@charset "UTF-8";
/* POLICES */
@font-face {
  font-family: "Neutraface2Display-Bold";
  src: url("./assets/fonts/Neutraface2Display-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Neutraface2Display-Titling";
  src: url("./assets/fonts/WEB/fonts/Neutraface2Display-Titling.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Neutraface2Text-Demi";
  src: url("./assets/fonts/WEB/fonts/Neutraface2Text-Demi.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Neutraface2Text-Book";
  src: url("./assets/fonts/WEB/fonts/Neutraface2Text-Book.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
/* @font-face var(--font-primary) supprimé — invalide dans @font-face */
/* @font-face Neutraface2Text-Bold supprimé — non utilisé + chemin absolu cassé */
@font-face {
  font-family: "Neutraface2Display-Light";
  src: url("./assets/fonts/WEB/fonts/Neutraface2Display-Light.woff2") format("woff2"), url("./assets/fonts/WEB/fonts/Neutraface2Display-Light.woff") format("woff");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Neutraface2Display-Medium";
  src: url("./assets/fonts/WEB/fonts/Neutraface2Display-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
:root {
  --gold: #8b7a5e; /* RGAA 3.2 — ratio 4.56:1 sur blanc (était #ae9a79 = 3.5:1) */
  --gold-decorative: #ae9a79; /* Couleur originale pour fonds, bordures, éléments décoratifs */
  --black: #1c1b1a;
  --mbaa-rose: #e03a80;
  --mdt-orange: #d46e36;
  --muted: rgba(245, 242, 236, 0.55);
  --nav-bg-light: rgba(232, 232, 232, 0.95);
  /* Polices */
  --font-body: "Neutraface2Text-Book", "Neutraface2Text-Demi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-h1-h2: "Neutraface2Display-Titling", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-h3-h4-h5: "Neutraface2Display-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Aliases pour compatibilité */
  --font-primary: var(--font-h1-h2);
  --font-light: "Neutraface2Display-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-secondary: "Neutraface2Text-Demi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-paragraphe: var(--font-body);
  --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Échelle typographique harmonisée */
  --fs-xs: 0.65rem; /* badges, tags, tiny labels */
  --fs-sm: 0.75rem; /* labels, captions, meta */
  --fs-base: 0.875rem; /* mobile body text, form inputs */
  --fs-md: 0.9375rem; /* card text, descriptions */
  --fs-body: 1rem; /* desktop paragraphs */
  --fs-lg: 1.125rem; /* card titles, highlights */
  --fs-xl: 1.25rem; /* section subtitles, large text */
}

/* Polices */
/* Couleurs */
/* Typographie - Hiérarchie claire et impactante (Mobile First) */
/* Hauteurs de ligne - Optimisées pour la lisibilité */
/* Poids de police */
/* Espacements - Renforcent la hiérarchie typographique */
/* Espacements verticaux spécifiques pour la typographie */
/* Breakpoints - Mobile First */
/* Touch targets - Minimum 44x44px pour l'accessibilité mobile */
/* Hauteurs viewport */
:root {
  --footer-bg: #0e0e0e;
  --footer-bg-bottom: #080808;
  --footer-gold: var(--gold);
  --footer-gold-light: rgba(174, 154, 121, 0.18);
  --footer-text: rgba(245, 242, 236, 0.82);
  --footer-text-muted: rgba(245, 242, 236, 0.42);
  --footer-border: rgba(245, 242, 236, 0.08);
  --footer-cream: #FFFDF3;
}

.calendar-filters {
  --cf-bg: #ffffff;
  --cf-bg-alt: #f8f7f4;
  --cf-border: #e8e5df;
  --cf-border-light: #f0ede8;
  --cf-text: #2e2d2c;
  --cf-text-muted: #5c5752;
  --cf-text-light: #7a756f;
  --cf-gold: var(--gold, #ae9a79);
  --cf-dark: var(--black, #1c1b1a);
  --cf-green: #2d6a4f;
  --cf-radius: 10px;
  --cf-radius-sm: 6px;
  --cf-radius-pill: 50px;
  --cf-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --cf-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --cf-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --cf-shadow-active: 0 0 0 2px rgba(174, 154, 121, 0.25);
}

/* TYPOGRAPHIE */
/* Block: heading */
p {
  font-family: var(--font-body);
}

.heading {
  font-family: var(--font-h1-h2);
}

.header__title {
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

@media (min-width: 768px) {
  .header__title {
    font-size: clamp(3rem, 6vw + 1rem, 4.5rem);
    letter-spacing: -0.04em;
  }
}
@media (min-width: 1024px) {
  .header__title {
    letter-spacing: -0.05em;
  }
}
/* Element: heading__subtitle (h2 */
.heading__subtitle {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.4;
}

@media (min-width: 48rem) {
  .heading__subtitle {
    font-size: 3rem;
  }
}
/* Element: heading__section (h3 */
.heading__section {
  font-family: var(--font-h3-h4-h5);
  line-height: 1.4;
}

/* Modifier: heading__section$large */
.heading__section--large {
  font-size: 2rem;
  font-weight: 500;
}

/* Modifier: heading__section$medium */
.heading__section--medium {
  font-size: 1.5rem;
  font-weight: 500;
}

/* Modifier: heading__section$small */
.heading__section--small {
  font-size: 1.25rem;
  font-weight: 300;
}

/* Element: heading__subsection (h4 */
.heading__subsection {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Block: text */
.text {
  font-family: var(--font-body);
}

/* Element: text__body (paragraphe par défaut */
.text__body {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.5;
}

/* Modifier: text__body$small */
.text__body--small {
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
}

/* Element: text__highlight (texte Futura PT */
.text__highlight {
  font-family: var(--font-secondary);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.main {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem 0.75rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .main {
    padding: 1rem 2rem;
  }
}
.main__programmation-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
}

.main__programmation-img {
  width: 24px;
  height: 24px;
}

.main__programmation-title {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

.main__card {
  padding: 2rem;
  border: none;
  border-radius: 10px;
  margin-bottom: 2rem;
}

.main__card-agencement {
  display: flex;
  flex-direction: row;
}

@media (min-width: 768px) {
  .main__card {
    display: flex;
    flex-direction: row;
  }
}
.main__card-img {
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  border-radius: 6px;
}

.main__card-title {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

.main__card-subtitle {
  font-size: clamp(1.5rem, 1.5vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
}

.main__card-text {
  font-size: var(--fs-md);
  margin-bottom: 1rem;
  color: #666666;
  line-height: 1.5;
}

.main__card-description {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: #666666;
}

.main__banner-img {
  width: 100px;
  height: 100px;
}

body.is-nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

#headerCanvas {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  top: 0;
  left: 0;
  pointer-events: none;
}

.btn-accent, .btn-outline-gold, .footer__button, .main__button--infos-or, .btn-outline, .main__button--evenement-black, .main__button--visite-black,
.main__button--explore-black, .btn-outline--filter, .btn-secondary, .main__button-black, .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.875rem 1.75rem;
  border: 0.5px solid rgba(28, 27, 26, 0.4);
  border-radius: 5px;
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn-accent:active, .btn-outline-gold:active, .footer__button:active, .main__button--infos-or:active, .btn-outline:active, .main__button--evenement-black:active, .main__button--visite-black:active,
.main__button--explore-black:active, .btn-outline--filter:active, .btn-secondary:active, .main__button-black:active, .btn-primary:active {
  transform: scale(0.97);
}
.btn-accent:focus-visible, .btn-outline-gold:focus-visible, .footer__button:focus-visible, .main__button--infos-or:focus-visible, .btn-outline:focus-visible, .main__button--evenement-black:focus-visible, .main__button--visite-black:focus-visible,
.main__button--explore-black:focus-visible, .btn-outline--filter:focus-visible, .btn-secondary:focus-visible, .main__button-black:focus-visible, .btn-primary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.btn-accent:disabled, .btn-outline-gold:disabled, .footer__button:disabled, .main__button--infos-or:disabled, .btn-outline:disabled, .main__button--evenement-black:disabled, .main__button--visite-black:disabled,
.main__button--explore-black:disabled, .btn-outline--filter:disabled, .btn-secondary:disabled, .main__button-black:disabled, .btn-primary:disabled, [aria-disabled=true].btn-accent, [aria-disabled=true].btn-outline-gold, [aria-disabled=true].footer__button, [aria-disabled=true].main__button--infos-or, [aria-disabled=true].btn-outline, [aria-disabled=true].main__button--evenement-black, [aria-disabled=true].main__button--visite-black,
[aria-disabled=true].main__button--explore-black, [aria-disabled=true].btn-outline--filter, [aria-disabled=true].btn-secondary, [aria-disabled=true].main__button-black, [aria-disabled=true].btn-primary {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-accent svg, .btn-outline-gold svg, .footer__button svg, .main__button--infos-or svg, .btn-outline svg, .main__button--evenement-black svg, .main__button--visite-black svg,
.main__button--explore-black svg, .btn-outline--filter svg, .btn-secondary svg, .main__button-black svg, .btn-primary svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.2s ease;
}
.btn-accent:hover svg, .btn-outline-gold:hover svg, .footer__button:hover svg, .main__button--infos-or:hover svg, .btn-outline:hover svg, .main__button--evenement-black:hover svg, .main__button--visite-black:hover svg,
.main__button--explore-black:hover svg, .btn-outline--filter:hover svg, .btn-secondary:hover svg, .main__button-black:hover svg, .btn-primary:hover svg {
  transform: translateX(3px);
}

.btn-primary {
  background: var(--gold);
  color: #FFFDF3;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.btn-primary:hover {
  background: #7a6b51;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 122, 94, 0.3);
}
.btn-primary:active {
  background: #6d6048;
}

.btn-secondary, .main__button-black {
  background: var(--black);
  color: #FFFDF3;
  transition: background 0.25s ease, transform 0.2s ease;
}
.btn-secondary:hover, .main__button-black:hover {
  background: #3e3d3c;
  transform: translateY(-2px);
}

.btn-outline, .main__button--evenement-black, .main__button--visite-black,
.main__button--explore-black, .btn-outline--filter {
  background: linear-gradient(var(--black), var(--black)) no-repeat left/0% 100%;
  background-color: transparent;
  color: var(--black);
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
}
.btn-outline:hover, .main__button--evenement-black:hover, .main__button--visite-black:hover,
.main__button--explore-black:hover, .btn-outline--filter:hover {
  background-size: 100% 100%;
  color: #FFFDF3;
}
.btn-outline:disabled, .main__button--evenement-black:disabled, .main__button--visite-black:disabled,
.main__button--explore-black:disabled, .btn-outline--filter:disabled, .btn-outline[aria-disabled=true], [aria-disabled=true].main__button--evenement-black, [aria-disabled=true].main__button--visite-black,
[aria-disabled=true].main__button--explore-black, [aria-disabled=true].btn-outline--filter {
  border-color: rgba(28, 27, 26, 0.2);
}
.btn-outline--filter {
  border-radius: 10px;
}

.btn-outline-gold, .footer__button, .main__button--infos-or {
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(174, 154, 121, 0.5);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-outline-gold:hover, .footer__button:hover, .main__button--infos-or:hover {
  background: var(--gold);
  color: #FFFDF3;
  border-color: var(--gold);
}
.btn-outline-gold:focus-visible, .footer__button:focus-visible, .main__button--infos-or:focus-visible {
  outline: 2px solid #FFFDF3;
  outline-offset: 3px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  background: none;
  color: var(--black);
  border: none;
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.btn-ghost::after {
  content: "";
  position: absolute;
  bottom: 0.25rem;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-ghost:hover {
  color: var(--gold);
}
.btn-ghost:hover::after {
  width: 100%;
}
.btn-ghost:active {
  opacity: 0.7;
}
.btn-ghost:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.btn-ghost:disabled, .btn-ghost[aria-disabled=true] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-ghost svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.btn-ghost:hover svg {
  transform: translateX(3px);
}

.btn-accent {
  background: var(--mbaa-rose);
  color: #FFFDF3;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.btn-accent:hover {
  background: #c9326f;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(224, 58, 128, 0.3);
}
.btn-accent:active {
  background: #b32c63;
}
.btn-accent:focus-visible {
  outline: 2px solid var(--mbaa-rose);
  outline-offset: 3px;
}

.btn-hero, .main__button--savoir-white, .header__cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 1.125rem 2.5rem;
  background: linear-gradient(#FFFDF3, #FFFDF3) no-repeat left/0% 100%;
  background-color: transparent;
  color: #FFFDF3;
  border: 0.5px solid rgba(28, 27, 26, 0.4);
  border-radius: 10px;
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1024px) {
  .btn-hero, .main__button--savoir-white, .header__cta-button {
    padding: 1.25rem 3rem;
    font-size: 1.125rem;
  }
}
.btn-hero:hover, .main__button--savoir-white:hover, .header__cta-button:hover {
  background-size: 100% 100%;
  color: var(--black);
}
.btn-hero:active, .main__button--savoir-white:active, .header__cta-button:active {
  transform: scale(0.97);
}
.btn-hero:focus-visible, .main__button--savoir-white:focus-visible, .header__cta-button:focus-visible {
  outline: 2px solid #FFFDF3;
  outline-offset: 4px;
}
.btn-hero:disabled, .main__button--savoir-white:disabled, .header__cta-button:disabled, .btn-hero[aria-disabled=true], [aria-disabled=true].main__button--savoir-white, [aria-disabled=true].header__cta-button {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(255, 253, 243, 0.3);
}
.btn-hero svg, .main__button--savoir-white svg, .header__cta-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.btn-hero:hover svg, .main__button--savoir-white:hover svg, .header__cta-button:hover svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary,
  .main__button-black,
  .btn-outline,
  .main__button--evenement-black,
  .main__button--visite-black,
  .main__button--explore-black,
  .btn-outline--filter,
  .btn-outline-gold,
  .footer__button,
  .main__button--infos-or,
  .btn-ghost,
  .btn-accent,
  .btn-hero,
  .main__button--savoir-white,
  .header__cta-button {
    transition-duration: 0.01s !important;
  }
  .btn-primary:hover,
  .btn-secondary:hover,
  .main__button-black:hover,
  .btn-outline:hover,
  .main__button--evenement-black:hover,
  .main__button--visite-black:hover,
  .main__button--explore-black:hover,
  .btn-outline--filter:hover,
  .btn-outline-gold:hover,
  .footer__button:hover,
  .main__button--infos-or:hover,
  .btn-ghost:hover,
  .btn-accent:hover,
  .btn-hero:hover,
  .main__button--savoir-white:hover,
  .header__cta-button:hover {
    transform: none !important;
  }
  .btn-primary svg,
  .btn-secondary svg,
  .main__button-black svg,
  .btn-outline svg,
  .main__button--evenement-black svg,
  .main__button--visite-black svg,
  .main__button--explore-black svg,
  .btn-outline--filter svg,
  .btn-outline-gold svg,
  .footer__button svg,
  .main__button--infos-or svg,
  .btn-ghost svg,
  .btn-accent svg,
  .btn-hero svg,
  .main__button--savoir-white svg,
  .header__cta-button svg {
    transition: none !important;
  }
  .btn-primary::after,
  .btn-secondary::after,
  .main__button-black::after,
  .btn-outline::after,
  .main__button--evenement-black::after,
  .main__button--visite-black::after,
  .main__button--explore-black::after,
  .btn-outline--filter::after,
  .btn-outline-gold::after,
  .footer__button::after,
  .main__button--infos-or::after,
  .btn-ghost::after,
  .btn-accent::after,
  .btn-hero::after,
  .main__button--savoir-white::after,
  .header__cta-button::after {
    transition: none !important;
  }
}
/* COMPOSANTS */
.hero {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background-color: var(--black);
}

.hero__content {
  max-width: 75rem;
  width: 100%;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--black);
  margin-top: 0;
  letter-spacing: -0.02em;
}

h1 {
  font-family: var(--font-h1-h2);
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 2rem;
  letter-spacing: -0.03em;
}

@media (min-width: 768px) {
  h1 {
    font-size: clamp(3rem, 6vw + 1rem, 4.5rem);
    margin-bottom: 3rem;
  }
}
@media (min-width: 1024px) {
  h1 {
    letter-spacing: -0.04em;
  }
}
h2 {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  letter-spacing: -0.015em;
}

@media (min-width: 768px) {
  h2 {
    font-size: clamp(2.25rem, 4.5vw + 0.5rem, 3rem);
  }
}
h3 {
  font-family: var(--font-h3-h4-h5);
  font-size: clamp(1.25rem, 3vw + 0.25rem, 4rem);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.04em;
}

@media (min-width: 768px) {
  h3 {
    font-size: clamp(1.5rem, 3.5vw + 0.25rem, 4rem);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
  }
}
h4 {
  font-family: var(--font-h3-h4-h5);
  font-size: clamp(1rem, 2vw + 0.125rem, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  text-transform: none;
}

@media (min-width: 768px) {
  h4 {
    font-size: clamp(1.125rem, 2.5vw + 0.125rem, 1.5rem);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
}
h5 {
  font-family: var(--font-h3-h4-h5);
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  font-weight: 700;
  line-height: 1.4;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  text-transform: none;
  color: #666666;
}

h6 {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.25vw, 0.875rem);
  font-weight: 300;
  line-height: 1.4;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-transform: none;
  color: #b3b3b3;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1rem);
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: inherit;
}

@media (min-width: 768px) {
  p {
    font-size: clamp(1rem, 2vw, 1.125rem);
    margin-bottom: 2rem;
  }
}
p:last-child {
  margin-bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

.header {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh; /* Fallback */
  min-height: 100dvh; /* S'adapte dynamiquement si la barre d'adresse mobile réduit */
  background-color: var(--black);
  color: #FFFDF3;
  position: relative;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 🔴 FIX : background-attachment:fixed désactivé sur mobile (perf iOS/Android) */
  background-attachment: scroll;
  transition: background-color 0.3s ease;
}

@media (min-width: 1024px) {
  .header {
    background-attachment: fixed;
  }
}
.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(25, 25, 25, 0.5) 0%, rgba(25, 25, 25, 0.08) 25%, transparent 45%, transparent 55%, rgba(25, 25, 25, 0.08) 75%, rgba(25, 25, 25, 0.5) 100%);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 1023px) {
  .header--menu-open {
    z-index: 999;
    pointer-events: none;
    /* Pas de isolation ici pour que le toggle fixed puisse dépasser */
  }
  .header--menu-open::before {
    opacity: 0;
    pointer-events: none;
  }
  .header--menu-open .header__menu-toggle {
    pointer-events: auto;
  }
}
@media (min-width: 1024px) {
  .header {
    position: relative;
    background-image: none;
  }
  .header::before {
    display: none;
  }
}
/* Navbar — transparent au départ, blur au scroll */
.header__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  gap: 1rem;
  background: transparent;
  transition: background 0.45s ease, border-color 0.45s ease, backdrop-filter 0.45s ease, padding 0.45s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  .header__container {
    padding: 1.2rem 1.5rem;
  }
}
@media (min-width: 1024px) {
  .header__container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 4rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    z-index: 1000;
    box-sizing: border-box;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    will-change: transform, background;
    transition: background 0.45s ease, border-color 0.45s ease, backdrop-filter 0.45s ease, padding 0.45s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .header__logo-link,
  .custom-logo-link {
    justify-self: start;
  }
  .header__nav {
    grid-column: 2;
    justify-self: center;
  }
  .header__nav-list--secondary {
    justify-self: end;
  }
}
@media (min-width: 1024px) {
  .header--scrolled .header__container {
    background: rgba(0, 0, 0, 0.71) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid rgba(255, 253, 243, 0.08);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
  .header--scrolled .header__logo-link,
  .header--scrolled .custom-logo-link {
    /* La taille est maintenant gérée par les sous-éléments icon/text */
  }
}
/* ─── Logo — logo complet par défaut, carré MAT au scroll ─── */
.header__logo-link,
.custom-logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex-shrink: 0;
  width: auto;
  min-height: 44px;
  text-decoration: none;
  position: relative;
}

/* Logo complet (MAT + texte) — visible par défaut */
.header__logo-full {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  max-height: 200px;
  overflow: hidden;
}

/* Logo compact (carré MAT seul) — masqué par défaut */
.header__logo-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  pointer-events: none;
  height: 34px;
  width: 34px;
}

/* Au scroll → le logo complet disparaît, le compact apparaît */
@media (min-width: 1024px) {
  .header--scrolled .header__logo-full {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
  }
  .header--scrolled .header__logo-compact {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
    position: relative;
    top: auto;
    left: auto;
    transform: scale(1);
  }
}
/* Accessibilité — désactiver les animations logo si demandé */
@media (prefers-reduced-motion: reduce) {
  .header__logo-full,
  .header__logo-compact,
  .header__logo-link {
    transition: none !important;
  }
}
/* Image logo — s'adapte au conteneur */
.header__logo-img,
.custom-logo {
  width: auto;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

.header__logo-img--full {
  height: 120px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .header__logo-img--full {
    height: 140px;
  }
}
@media (min-width: 1024px) {
  .header__logo-img--full {
    height: 180px;
    width: auto;
  }
}
.header__logo-img--compact {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header__logo-link:hover {
  opacity: 1;
}

.header__logo-link:active {
  transform: scale(0.95);
}

@media (min-width: 1024px) {
  .header__logo-link:hover {
    transform: none;
  }
}
.header__logo-img {
  border-radius: 6px;
  object-fit: contain;
}

/* ─── BURGER MENU — icônes SVG burger / croix ─── */
.header__menu-toggle {
  min-width: 112px;
  min-height: 112px;
  width: 112px;
  height: 112px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  background: none;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  padding: 28px;
  color: #FFFDF3;
  transition: background 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 1024px) {
  .header__menu-toggle {
    display: none;
  }
}
.header__menu-toggle:focus-visible {
  outline: 2px solid #FFFDF3;
  outline-offset: 2px;
}

.header__menu-toggle:active {
  transform: scale(0.92);
}

.header__menu-toggle[aria-expanded=true] {
  position: fixed;
  top: calc(1rem + 46px);
  right: 1rem;
  z-index: 100000;
  background: rgba(30, 28, 20, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 253, 243, 0.3);
  border-radius: 10px;
  color: #FFFDF3;
}

body:not(.admin-bar) .header__menu-toggle[aria-expanded=true] {
  top: 1rem;
}

@media (min-width: 768px) {
  .header__menu-toggle[aria-expanded=true] {
    top: calc(1.2rem + 32px);
    right: 1.2rem;
  }
  body:not(.admin-bar) .header__menu-toggle[aria-expanded=true] {
    top: 1.2rem;
  }
}
/* ─── nav-icon2 : 6 spans animés burger → croix ─── */
.nav-icon2 {
  width: 48px;
  height: 40px;
  position: relative;
  display: block;
}
.nav-icon2 span {
  display: block;
  position: absolute;
  height: 4px;
  width: 50%;
  background: currentColor;
  opacity: 1;
  transform: rotate(0deg);
  transition: top 0.25s ease-in-out 0.25s, left 0.25s ease-in-out 0.25s, transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
}
.nav-icon2 span:nth-child(odd) {
  left: 0;
  border-radius: 4px 0 0 4px;
}
.nav-icon2 span:nth-child(even) {
  left: 50%;
  border-radius: 0 4px 4px 0;
}
.nav-icon2 span:nth-child(1), .nav-icon2 span:nth-child(2) {
  top: 0;
}
.nav-icon2 span:nth-child(3), .nav-icon2 span:nth-child(4) {
  top: 18px;
}
.nav-icon2 span:nth-child(5), .nav-icon2 span:nth-child(6) {
  top: 36px;
}

/* État ouvert : burger → X */
.header__menu-toggle[aria-expanded=true] .nav-icon2 span {
  transition: top 0.25s ease-in-out, left 0.25s ease-in-out, transform 0.25s ease-in-out 0.25s, opacity 0.25s ease-in-out 0.25s;
}
.header__menu-toggle[aria-expanded=true] .nav-icon2 span:nth-child(1) {
  top: 18px;
  left: 0;
  transform: rotate(45deg);
  transform-origin: right center;
}
.header__menu-toggle[aria-expanded=true] .nav-icon2 span:nth-child(2) {
  top: 18px;
  left: 50%;
  transform: rotate(-45deg);
  transform-origin: left center;
}
.header__menu-toggle[aria-expanded=true] .nav-icon2 span:nth-child(3) {
  left: -50%;
  opacity: 0;
}
.header__menu-toggle[aria-expanded=true] .nav-icon2 span:nth-child(4) {
  left: 100%;
  opacity: 0;
}
.header__menu-toggle[aria-expanded=true] .nav-icon2 span:nth-child(5) {
  top: 18px;
  left: 0;
  transform: rotate(-45deg);
  transform-origin: right center;
}
.header__menu-toggle[aria-expanded=true] .nav-icon2 span:nth-child(6) {
  top: 18px;
  left: 50%;
  transform: rotate(45deg);
  transform-origin: left center;
}

/* Couleur adaptive du burger selon le fond */
.header__menu-toggle.adaptive-light {
  color: #1a1a1a;
}

.header__menu-toggle.adaptive-dark {
  color: #FFFDF3;
}

@media (prefers-reduced-motion: reduce) {
  .nav-icon2 span,
  .header__menu-toggle[aria-expanded=true] .nav-icon2 span {
    transition: none !important;
  }
}
.header__nav {
  color: #FFFDF3;
  position: fixed;
  z-index: 1050;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 5.5rem 1.75rem 2.5rem; /* top augmenté pour dégager le burger */
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 2.5rem;
  background: rgba(18, 18, 18, 0.85); /* opacité augmentée pour lisibilité */
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: visible;
  opacity: 1;
}

.header__nav[aria-hidden=false] {
  transform: translateX(0);
}

/* ── Zone secondaire mobile : séparateur gold ── */
@media (max-width: 1023px) {
  .header__nav-list--secondary-mobile {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(174, 154, 121, 0.3); /* --gold à 30% */
    margin-top: auto; /* pousse la zone secondaire en bas du menu */
  }
}
/* ── Stagger d'apparition des liens au slide-in ── */
@media (max-width: 1023px) {
  .header__nav[aria-hidden=false] .header__nav-item {
    animation: navItemFadeIn 0.3s ease both;
  }
  .header__nav[aria-hidden=false] .header__nav-item:nth-child(1) {
    animation-delay: 0.05s;
  }
  .header__nav[aria-hidden=false] .header__nav-item:nth-child(2) {
    animation-delay: 0.1s;
  }
  .header__nav[aria-hidden=false] .header__nav-item:nth-child(3) {
    animation-delay: 0.15s;
  }
  .header__nav[aria-hidden=false] .header__nav-item:nth-child(4) {
    animation-delay: 0.2s;
  }
  .header__nav[aria-hidden=false] .header__nav-item:nth-child(5) {
    animation-delay: 0.25s;
  }
  @keyframes navItemFadeIn {
    from {
      opacity: 0;
      transform: translateX(12px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .header__nav[aria-hidden=false] .header__nav-item {
    animation: none;
  }
}
/* ─── MENU MOBILE — améliorations UX musée ─── */
/* Hover mobile — flèche → se déplace légèrement */
@media (max-width: 1023px) {
  .header__nav-link:hover::after,
  .header__nav-link:focus-visible::after {
    opacity: 0.9;
    transform: translateX(4px);
  }
  /* Pas de flèche sur les liens secondaires */
  .header__nav-list--secondary-mobile .header__nav-link::after {
    display: none;
  }
  /* Pas de flèche sur le trigger dropdown */
  .header__nav-dropdown-trigger::after {
    display: none;
  }
}
@media (min-width: 768px) {
  .header__nav {
    padding: 6.5rem 2.5rem 2.5rem;
    gap: 3rem;
  }
}
@media (min-width: 1024px) {
  .header__nav {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 0;
    backdrop-filter: none;
    background: transparent;
    overflow-y: visible;
    z-index: 10;
    display: flex;
  }
  .header__nav-list--main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-grow: 0;
  }
  .header__nav-list--secondary {
    position: static;
    top: auto;
    right: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
    margin-left: auto;
    transition: none;
  }
  .header--scrolled .header__nav-list--secondary {
    height: auto;
  }
}
.header__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 1024px) {
  .header__nav-list--main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2.5rem;
    flex-grow: 1;
    max-width: none;
  }
}
.header__nav-list--secondary {
  margin-top: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .header__nav-list--secondary {
    margin-top: 0;
    gap: 1.25rem;
    flex-shrink: 0;
  }
}
.header__nav-item {
  margin-bottom: 0;
  padding: 0;
  border-bottom: 1px solid rgba(174, 154, 121, 0.2); /* --gold à 20% */
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: "Neutraface2Text-Demi";
}

@media (min-width: 768px) {
  .header__nav-item {
    padding: 0;
  }
}
@media (min-width: 1024px) {
  .header__nav-item {
    margin-bottom: 0;
    padding: 0;
    border-bottom: none;
    position: relative;
    min-height: auto;
  }
}
.header__nav-list--secondary .header__nav-item {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.header__nav-link {
  color: #FFFDF3;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.25s ease, transform 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
  font-size: clamp(1.125rem, 3vw, 1.375rem); /* 18px → 22px */
  font-weight: 500;
  text-transform: uppercase;
  width: 100%;
  padding: 0.875rem 0; /* 14px — touch target confortable */
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  font-family: var(--font-secondary);
}

/* Flèche → à droite sur mobile */
.header__nav-link::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 18px;
  background-image: url("../../Img/svg/icon-arrow-filtre.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: opacity 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .header__nav-link::after {
    display: none;
  }
}
.header__nav-link:active {
  opacity: 0.7;
  transform: scale(0.98);
}

.header__nav-link:focus-visible {
  outline: 2px solid var(--gold, #ae9a79);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (min-width: 768px) {
  .header__nav-link {
    padding: 1rem 0;
  }
}
/* ── Nav compacte — MacBook 13" (1024–1439px) ── */
@media (min-width: 1024px) and (max-width: 1439px) {
  .header__container {
    padding: 1rem 2rem;
    gap: 1.25rem;
  }
  .header__nav-list--main {
    gap: 1.25rem;
  }
  .header__nav-list--secondary {
    gap: 0.75rem;
  }
  .header__nav-link {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
  }
  .header--scrolled .header__container {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
}
@media (min-width: 1024px) {
  .header__nav-link {
    position: relative;
    color: #FFFDF3;
    font-size: var(--fs-base);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    width: auto;
    padding: 0 0 4px; /* espace pour la ligne */
    opacity: 0.8;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block; /* reset flex mobile */
    overflow: hidden; /* clip la ligne */
  }
  /* Ligne Awwwards — entre depuis la gauche, sort vers la droite */
  .header__nav-link::before,
  .header__nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 1px;
    background: #FFFDF3;
    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  }
  /* Moitié gauche — part de gauche vers le centre */
  .header__nav-link::before {
    left: 0;
    width: 50%;
    transform: scaleX(0);
    transform-origin: left center;
  }
  /* Moitié droite — part de droite vers le centre */
  .header__nav-link::after {
    right: 0;
    width: 50%;
    transform: scaleX(0);
    transform-origin: right center;
  }
  .header__nav-link:hover {
    opacity: 1;
    transform: none;
  }
  .header__nav-link:hover::before,
  .header__nav-link:hover::after {
    transform: scaleX(1);
  }
  .header__nav-link:active {
    transform: none;
    opacity: 0.6;
  }
}
.header__nav-list--secondary .header__nav-link {
  font-size: 1rem;
  display: flex;
  align-items: center;
}

@media (min-width: 1024px) {
  .header__nav-list--secondary .header__nav-link {
    font-size: 1rem;
    font-weight: 500;
    color: #FFFDF3;
    transition: opacity 0.3s ease;
  }
  .header__nav-list--secondary .header__nav-link:hover {
    opacity: 0.7;
  }
}
.header__nav-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke-width: 1.5;
  stroke: rgba(255, 253, 243, 0.65);
}

.header__nav-icon:active {
  transform: scale(0.95);
}

@media (min-width: 768px) {
  .header__nav-icon {
    width: 20px;
    height: 20px;
    padding: 0;
  }
}
@media (min-width: 1024px) {
  .header__nav-icon {
    min-width: auto;
    min-height: auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    filter: none;
    stroke: rgba(255, 253, 243, 0.65);
    stroke-width: 1.5;
    cursor: pointer;
    transition: stroke 0.3s ease;
  }
  .header__nav-icon:hover {
    stroke: rgb(255, 253, 243);
    opacity: 1;
  }
}
.header__nav-link-fr {
  font-size: 1rem;
  font-weight: 600;
  color: #FFFDF3;
  text-decoration: none;
  display: block;
  transition: all 0.3s ease;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .header__nav-link-fr {
    font-size: 1rem;
    font-weight: 500;
    color: #FFFDF3;
    transition: opacity 0.3s ease;
  }
  .header__nav-link-fr:hover {
    opacity: 0.7;
  }
}
/* ── Lien actif ── */
.header__nav-link--active {
  color: #FFFDF3 !important;
  opacity: 1 !important;
}

@media (min-width: 1024px) {
  .header__nav-link--active::before,
  .header__nav-link--active::after {
    transform: scaleX(1) !important;
  }
}
/* ── Contact (lien secondaire texte) ── */
.header__nav-link--contact {
  font-family: var(--font-secondary);
  font-size: var(--fs-base);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.9); /* contraste amélioré — ratio ~5.8:1 */
  text-decoration: none;
  transition: color 0.25s;
}

.header__nav-link--contact:hover {
  color: #FFFDF3;
}

/* ── Dropdown Espace pro ── */
.header__nav-item--dropdown {
  position: relative;
}

.header__nav-dropdown-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
}

.header__nav-dropdown-arrow {
  display: inline-block;
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

@media (min-width: 1024px) {
  .header__nav-item--dropdown:hover .header__nav-dropdown-arrow {
    transform: rotate(180deg);
  }
  .header__nav-dropdown {
    position: absolute;
    top: calc(100% + 1.2rem);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 1px solid #c9a84c;
    min-width: 210px;
    padding: 0.4rem 0;
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1100;
  }
  .header__nav-item--dropdown:hover .header__nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .header__nav-dropdown li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-family: var(--font-secondary);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 253, 243, 0.55);
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
  }
  .header__nav-dropdown li a::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("../../Img/svg/icon-arrow-filtre.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .header__nav-dropdown li a:hover {
    color: #FFFDF3;
    background: rgba(255, 255, 255, 0.04);
  }
  .header__nav-dropdown li a:hover::after {
    opacity: 1;
    transform: translateX(0);
  }
  .header__nav-dropdown li + li a {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
}
/* Mobile : dropdown inline */
@media (max-width: 1023px) {
  .header__nav-dropdown {
    list-style: none;
    padding: 0.25rem 0 0.25rem 1.25rem;
    display: none;
    border-left: 1px solid rgba(174, 154, 121, 0.35); /* trait gold discret */
    margin-top: 0.25rem;
  }
  .header__nav-item--dropdown.is-open .header__nav-dropdown {
    display: block;
  }
  .header__nav-dropdown li a {
    font-family: var(--font-secondary);
    font-size: 0.875rem; /* 14px — hiérarchie claire vs 16px parent */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 253, 243, 0.65);
    text-decoration: none;
    display: block;
    padding: 0.75rem 0; /* touch target 44px avec min-height */
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 253, 243, 0.06);
    transition: color 0.2s;
  }
  .header__nav-dropdown li a:hover,
  .header__nav-dropdown li a:focus-visible {
    color: #FFFDF3;
  }
  .header__nav-dropdown li a:focus-visible {
    outline: 2px solid var(--gold, #ae9a79);
    outline-offset: 2px;
  }
}
.header__hero {
  flex: 1; /* Force le hero à prendre tout l'espace restant sous le nav */
  display: flex;
  align-items: center; /* Centre verticalement le contenu */
  justify-content: center;
  width: 100%;
  position: relative;
  min-height: 100vh;
  padding: 7.5rem 1.5rem 3.75rem;
  overflow: hidden;
  z-index: 1;
}

@media (min-width: 768px) {
  .header__hero {
    padding: 7.5rem 2rem 3.75rem;
  }
}
@media (min-width: 1024px) {
  .header__hero {
    flex-direction: row;
    padding: 7.5rem 3.75rem 3.75rem;
    width: auto;
  }
}
.header__hero-content {
  width: 100%;
  display: flex;
  gap: 2.5rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .header__hero-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3.75rem;
    padding: 5rem 3.75rem;
  }
}
.header__hero-content--reduced {
  margin-top: 1rem;
}

.header__hero-text {
  flex: 1;
  max-width: 600px;
  position: relative;
  z-index: 20;
}

.header__hero-text h1,
.header__hero-text .header__title {
  color: #FFFDF3 !important;
}

.header__hero-text #sous-menu-header,
.header__hero-text span {
  color: #FFFDF3 !important;
}

.header__title {
  color: #FFFDF3 !important;
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 1.875rem;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.125rem;
}

@media (min-width: 768px) {
  .header__title {
    font-size: clamp(5rem, 10vw, 7.5rem);
  }
}
@media (min-width: 1024px) {
  .header__title {
    font-size: 7.5rem;
  }
}
.header__hero-images {
  position: relative;
  flex: 1;
  min-height: 400px;
}

@media (max-width: 1023px) {
  .header__hero-images {
    display: none;
  }
}
@media (min-width: 1024px) {
  .header__hero-images {
    min-height: 500px;
  }
}
.header__hero-background {
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  will-change: transform;
  transition: transform 0.3s ease;
}

.header__hero-background:hover {
  transform: scale(1.05);
  z-index: 10 !important;
}

.header__hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.header__hero-background--layer1 {
  width: 280px;
  height: 200px;
  top: 0;
  left: 50px;
  z-index: 1;
}

@media (min-width: 1200px) {
  .header__hero-background--layer1 {
    width: 280px;
    height: 200px;
  }
}
.header__hero-background--layer2 {
  width: 320px;
  height: 240px;
  top: 150px;
  left: 0;
  z-index: 2;
}

@media (min-width: 1200px) {
  .header__hero-background--layer2 {
    width: 320px;
    height: 240px;
  }
}
.header__hero-background--layer3 {
  width: 350px;
  height: 280px;
  top: 50px;
  right: 0;
  z-index: 3;
}

@media (min-width: 1200px) {
  .header__hero-background--layer3 {
    width: 350px;
    height: 280px;
  }
}
.header #sous-menu-header {
  font-size: clamp(1rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  display: block;
  color: #FFFDF3 !important;
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .header #sous-menu-header {
    font-size: 1.75rem;
  }
}
.header__hero-cta {
  position: absolute;
  border: 1px solid white;
  border-radius: 10px;
  bottom: 5rem;
  right: 3.75rem;
  text-align: right;
  z-index: 30;
}

@media (max-width: 1023px) {
  .header__hero-cta {
    position: static;
    margin-top: 2.5rem;
    text-align: center;
  }
}
.header__cta-text {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  margin-bottom: 1.25rem;
  line-height: 1.2;
  color: #FFFDF3;
}

@media (min-width: 1024px) {
  .header__cta-text {
    font-size: 2rem;
  }
}
.header__cta-button {
  display: inline-block;
  padding: 1.125rem 2.5rem;
  border: 1.5px solid white;
  border-radius: 10px;
  color: #FFFDF3;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 600;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease, border-color 0.4s ease;
  margin-bottom: 1.25rem;
  background: linear-gradient(#FFFDF3, #FFFDF3) no-repeat bottom/100% 0%;
}

.header__cta-button:hover {
  background-size: 100% 100%;
  color: var(--black);
}

.header--index {
  background-color: var(--black);
  background-image: none !important;
}

/* Désactiver l'overlay générique du header sur la page index
   (le hero__slider a son propre overlay via ::after) */
.header--index::before {
  display: none;
}

/* header--collections : overrides déplacés dans page-collections.css */
.header--evenement {
  background-image: url("./assets/Img/activite-performance-break.webp");
}

@media (prefers-reduced-motion: reduce) {
  .header--evenement {
    background-attachment: scroll;
  }
}
.header--fiche-oeuvre {
  background-image: url("./assets/Img/misc-interieur-musee.webp");
}

@media (prefers-reduced-motion: reduce) {
  .header--fiche-oeuvre {
    background-attachment: scroll;
  }
}
.header--musee {
  background-image: url("./assets/Img/misc-interieur-musee.webp");
}

@media (prefers-reduced-motion: reduce) {
  .header--musee {
    background-attachment: scroll;
  }
}
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--black);
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.search-overlay__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  color: #FFFDF3;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease;
  z-index: 10000;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
  .search-overlay__close {
    top: 2rem;
    right: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2.5rem;
  }
}
.search-overlay__close:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.2);
}

@media (min-width: 1024px) {
  .search-overlay__close:hover {
    transform: rotate(90deg);
    color: var(--gold);
    background: rgba(255, 255, 255, 0.15);
  }
}
.search-overlay__content {
  width: 90%;
  max-width: 600px;
  position: relative;
  z-index: 10000;
}

.search-overlay__form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
  .search-overlay__form {
    padding: 1.5rem 2rem;
    gap: 1rem;
  }
}
.search-overlay__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: var(--font-primary);
  color: var(--black);
  background: transparent;
  padding: 0.5rem 0;
}

@media (min-width: 768px) {
  .search-overlay__input {
    font-size: 1.2rem;
  }
}
.search-overlay__input::placeholder {
  color: #999;
}

.search-overlay__submit {
  min-width: 2.75rem;
  min-height: 2.75rem;
  background: var(--gold);
  border: none;
  padding: 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
  .search-overlay__submit {
    padding: 0.8rem;
  }
}
.search-overlay__submit:active {
  transform: scale(0.95);
  background: var(--gold);
}

@media (min-width: 1024px) {
  .search-overlay__submit:hover {
    background: var(--gold);
    transform: scale(1.05);
  }
}
.search-overlay__submit img {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(100%);
}

@media (min-width: 768px) {
  .search-overlay__submit img {
    width: 24px;
    height: 24px;
  }
}
.hero {
  padding: 10rem 3rem 3rem 4rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  text-align: left;
}

@media (max-width: 1023px) {
  .hero {
    padding: 9rem 5rem 12rem 0;
    flex-direction: column;
    align-items: center;
    text-align: left;
  }
}
@media (min-width: 768px) {
  .hero {
    padding: 10rem 3rem 3rem 4rem;
  }
}
.hero-left {
  flex: 1;
  position: relative;
  z-index: 10;
}

.hero-title {
  color: #FFFDF3;
  font-size: 34px;
  font-weight: 900;
  margin: 30px;
  z-index: 10;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.4s forwards;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 28px;
    margin-bottom: 30px;
  }
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: 120px;
  }
}
.hero-subtitle {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  position: relative;
  z-index: 10;
  margin: 2rem;
  color: #FFFDF3;
}

@media (min-width: 768px) {
  .hero-subtitle {
    font-size: 40px;
    font-weight: 700;
    position: relative;
    z-index: 10;
  }
}
.hero-right {
  flex: 1;
  position: relative;
  height: 500px;
}

.art-image {
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  background-position: center;
  background-size: cover;
}

.art-image.img1 {
  width: 150px;
  height: 80px;
  top: 0;
  left: 50px;
  z-index: 1;
  background-image: url("./assets/Img/tableaux/tableau-signac-venise.webp");
}

@media (min-width: 1200px) {
  .art-image.img1 {
    width: 424px;
    height: 281px;
    top: -197px;
    left: 364px;
  }
}
.art-image.img2 {
  width: 150px;
  height: 80px;
  top: 150px;
  left: 0;
  z-index: 2;
  background-image: url("./assets/Img/tableaux/tableau-toffoli-vendeuse.webp");
}

@media (min-width: 768px) {
  .art-image.img2 {
    width: 320px;
    height: 270px;
    top: -407px;
    left: 77px;
  }
}
@media (min-width: 1200px) {
  .art-image.img2 {
    width: 320px;
    height: 270px;
    top: -407px;
    left: 77px;
  }
}
.art-image.img3 {
  width: 150px;
  height: 80px;
  top: 50px;
  right: 0;
  z-index: 3;
  background-image: url("./assets/Img/tableaux/tableau-ocean-contemporain.webp");
}

@media (min-width: 768px) {
  .art-image.img3 {
    width: 350px;
    height: 280px;
    top: -197px;
    right: 0;
  }
}
@media (min-width: 1200px) {
  .art-image.img3 {
    width: 564px;
    height: 331px;
    top: -497px;
    right: 224px;
  }
}
.cta-section {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 20;
}

@media (max-width: 1023px) {
  .cta-section {
    position: static;
    margin-top: 5rem;
    align-items: center;
    text-align: center;
  }
}
.reserve-btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  background-color: var(--gold);
  color: #FFFDF3;
  border: none;
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(149, 126, 24, 0.4);
}

.reserve-btn:hover {
  background-color: #7a6510;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(149, 126, 24, 0.5);
}

.reserve-btn:active {
  transform: translateY(-1px);
}

.cta-text {
  font-family: var(--font-primary);
  color: #FFFDF3;
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-arrow {
  color: #FFFDF3;
  font-size: 2.5rem;
  animation: bounce 2s infinite;
  font-weight: 300;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
/* =========================================
         HEADER WRAPPER
      ========================================= */
.header {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  background-color: var(--black);
  background-image: url("./assets/Img/backgrounds/bg-header-collections.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Dark overlay — vignette verticale (sombre haut/bas, transparent au centre) */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(17, 17, 16, 0.55) 0%, rgba(17, 17, 16, 0.08) 25%, transparent 45%, transparent 55%, rgba(17, 17, 16, 0.08) 75%, rgba(17, 17, 16, 0.55) 100%);
  z-index: 0;
}

/* Grain texture */
.header::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

/* =========================================
         NAVBAR — PRESERVED, minor visual touch
      ========================================= */
/* 🔴 FIX : Ce bloc était desktop-first (position:fixed sans media query).
   Converti en mobile-first : base mobile, puis desktop via min-width. */
.header__container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  gap: 1rem;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.45s ease, border-color 0.45s ease, backdrop-filter 0.45s ease, padding 0.45s ease;
}

@media (min-width: 1024px) {
  .header__container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    padding: 1.5rem 4rem;
    position: fixed;
    top: 0;
    left: 0;
    gap: 2rem;
  }
}
/* Les styles logo sont définis dans la section "Logo — logo complet par défaut" ci-dessus */
@media (min-width: 1024px) {
  .header__nav {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 100%;
    max-width: 100%;
    gap: 0;
    backdrop-filter: none;
    background: transparent;
    overflow-y: visible;
    transform: none;
    grid-column: 2;
  }
}
.header__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  /* 🔴 FIX : mobile-first — colonne par défaut, ligne sur desktop */
  flex-direction: column;
  align-items: flex-start;
}

.header__nav-list--main {
  gap: 1.1rem;
  width: 100%;
}

.header__nav-list--secondary {
  gap: 1rem;
  flex-shrink: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  /* Sur mobile, la secondary est dans la nav overlay */
  position: static;
  height: auto;
  background: none;
  box-shadow: none;
  padding: 0;
}

@media (min-width: 1024px) {
  .header__nav-list--main {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    background-color: var(--nav-bg-light);
    padding: 1.25rem 3.125rem;
    border-radius: 15px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    flex-grow: 0;
    justify-content: center;
    width: auto;
  }
  .header__nav-list--secondary {
    gap: 1.25rem;
    background-color: var(--nav-bg-light);
    padding: 1.25rem 1.875rem;
    border-radius: 15px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    position: fixed;
    top: 0;
    right: 4rem;
    height: 88px;
    flex-direction: row;
    align-items: center;
    transition: height 0.45s ease;
  }
  .header--scrolled .header__nav-list--secondary {
    height: 64px;
  }
}
.header__nav-item {
  margin: 0;
  /* 🔴 FIX : mobile-first — padding et border sur mobile par défaut */
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 253, 243, 0.15);
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  font-family: var(--font-primary);
}

@media (min-width: 1024px) {
  .header__nav-item {
    padding: 0;
    border-bottom: none;
    min-height: auto;
    width: auto;
  }
}
.header__nav-icon {
  /* 🔴 FIX : mobile-first — stroke blanc par défaut, noir sur desktop */
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #FFFDF3;
  stroke-width: 2;
  filter: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.header__nav-icon:hover {
  opacity: 0.7;
}

@media (min-width: 1024px) {
  .header__nav-icon {
    width: 30px;
    height: 30px;
    stroke: black;
    filter: brightness(0);
  }
}
.header__nav-link-fr {
  font-family: var(--font-primary);
  /* 🔴 FIX : mobile-first — couleur claire par défaut (fond sombre) */
  font-size: 1rem;
  font-weight: 600;
  color: #FFFDF3;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.header__nav-link-fr:hover {
  opacity: 0.7;
}

@media (min-width: 1024px) {
  .header__nav-link-fr {
    font-weight: 500;
    color: var(--black);
  }
}
/* =========================================
         HERO — NEW CONTEMPORARY LAYOUT
      ========================================= */
.header__hero {
  flex: 1;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  padding: 120px 3.75rem 3.75rem;
  gap: 0;
  min-height: 100dvh;
}

@media (max-width: 1023px) {
  .header__hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 100px clamp(1.5rem, 4vw, 3rem) 3rem;
    gap: 2rem;
  }
}
@media (max-width: 767px) {
  .header__hero {
    min-height: 55vh;
  }
}
/* — LEFT: Eyebrow + Title — */
.hero__left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 3rem;
  padding-right: 2rem;
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  /* 🔴 FIX : --gold sans var() est invalide */
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.2s forwards;
}

.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url("./assets/Img/svg/croix-blanche.svg") no-repeat center/contain;
  vertical-align: middle;
}

.hero__title {
  font-weight: 700;
  font-size: clamp(4.5rem, 3vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #FFFDF3;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.4s forwards;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__title {
    font-size: clamp(2.8rem, 6vw, 4rem);
  }
}

.hero__title em {
  font-style: italic;
  color: #FFFDF3;
  font-weight: 300;
}

/* — RIGHT: Meta info stacked — */
.hero__right {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 1023px) {
  .hero__left {
    grid-column: 1;
    grid-row: 1;
    padding-right: 0;
    padding-bottom: 0;
  }
  .hero__right {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
  }
}
.hero__description {
  font-family: var(--font-primary);
  /* 🟡 FIX : min était 0.85rem (13.6px) — porté à 1rem (16px) minimum */
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 253, 243, 0.75);
  max-width: 300px;
  text-align: right;
  letter-spacing: 0.04em;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.6s forwards;
}

@media (max-width: 1023px) {
  .hero__description {
    text-align: left;
    max-width: 100%;
  }
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.75rem;
  border: 1.5px solid rgba(245, 242, 236, 0.3);
  border-radius: 10px;
  color: #FFFDF3;
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease, border-color 0.4s ease;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.8s forwards;
  background: linear-gradient(#FFFDF3, #FFFDF3) no-repeat bottom/100% 0%;
}

.hero__cta:hover {
  background-size: 100% 100%;
  border-color: #FFFDF3;
  color: var(--black);
}

.hero__cta > * {
  position: relative;
  z-index: 1;
}

.hero__cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.hero__cta:hover svg {
  transform: translateX(4px);
}

.hero__cta-icon {
  width: 24px;
  height: auto;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease, filter 0.3s ease;
  position: relative;
  z-index: 1;
}

.hero__cta:hover .hero__cta-icon {
  transform: translateX(4px);
  filter: brightness(0);
}

/* — BOTTOM: Horizontal metadata strip — */
.hero__strip {
  grid-column: 1/-1;
  grid-row: 2;
  border-top: 1px solid rgba(245, 242, 236, 0.12);
  padding-top: 1.5rem;
  display: flex;
  position: relative;
  z-index: 3;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hero__stat-number {
  font-size: 2rem;
  font-weight: 400;
  color: #FFFDF3;
  line-height: 1;
  font-family: var(--font-primary);
}

.hero__stat-label {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* 🔴 FIX : --muted sans var() est invalide */
  color: var(--muted);
}

.hero__strip-divider {
  width: 1px;
  height: 2.5rem;
  background: rgba(245, 242, 236, 0.15);
}

.hero__scroll {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* 🔴 FIX : --muted sans var() est invalide */
  color: var(--muted);
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.hero__scroll-arrow {
  /* 🟡 FIX : touch target porté à 44×44px (était 32×32px) */
  width: 44px;
  height: 44px;
  border: 1px solid rgba(245, 242, 236, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bounce 2.5s ease infinite;
}

.hero__scroll-arrow svg {
  width: 14px;
  height: 14px;
  stroke: #FFFDF3;
  fill: none;
}

.hero__scroll-arrow img {
  width: 14px;
  height: 14px;
  display: block;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
/* =========================================
   HERO SLIDER — Actualités
   ========================================= */
.hero__slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000000;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 9%, rgba(0, 0, 0, 0) 39%, rgba(0, 0, 0, 0) 57%, rgba(0, 0, 0, 0.63) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.9s ease;
  z-index: 0;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__news-caption {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 520px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  /* Glass blur */
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 253, 243, 0.08);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
}

.hero__news-caption.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 1023px) {
  .hero__news-caption {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
  }
}
.hero__news-category {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.hero__news-category::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url("http://localhost:8080/Mbaa/wordpress/wp-content/themes/Mbaa_theme/assets/Img/svg/croix-blanche.svg") no-repeat center/contain;
  flex-shrink: 0;
}

.hero__news-title {
  font-size: clamp(1.35rem, 4vw, 2.5rem);
  font-weight: 900;
  line-height: 1.1;
  color: #FFFDF3;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-family: var(--font-primary);
}

.hero__news-arrow {
  display: inline-flex;
  align-items: center;
  margin-top: 0.25rem;
  transition: transform 0.2s ease;
}

.hero__news-arrow img {
  width: 14px;
  height: 11px;
  display: block;
  /* Recolorer le SVG blanc → gold #ae9a79 */
  filter: brightness(0) saturate(100%) invert(67%) sepia(14%) saturate(653%) hue-rotate(3deg) brightness(90%) contrast(87%);
}

.hero__news-dates {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(245, 242, 236, 0.6);
  text-transform: uppercase;
}

.hero__news-dates-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.hero__news-caption:hover .hero__news-arrow {
  transform: translateX(4px);
}

/* ─── Hero navigation flèches ─── */
.hero__nav {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.hero__arrow {
  border: 1.5px solid rgba(255, 253, 243, 0.5);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  transition: border-color 0.4s ease;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Fond circulaire qui scale au hover */
.hero__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #FFFDF3;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.hero__arrow:hover {
  border-color: #FFFDF3;
}

.hero__arrow:hover::before {
  transform: scale(1);
}

.hero__arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.hero__arrow:hover img {
  filter: brightness(0);
}

/* Flèche gauche glisse vers la gauche au hover */
.hero__arrow--prev:hover img {
  transform: translateX(-2px);
}

/* Flèche droite glisse vers la droite au hover */
.hero__arrow--next:hover img {
  transform: translateX(2px);
}

.hero__arrow:active {
  transform: scale(0.95);
}

/* =========================================
   HERO STRIP — Horaires musées
   ========================================= */
.hero__hours-museum {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: default;
}

.hero__hours-logo {
  height: 1.5rem;
  width: auto;
  object-fit: contain;
  filter: invert(1);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .hero__hours-logo {
    height: 2rem;
    width: auto;
  }
}
.hero__hours-sep {
  width: 1px;
  height: 1.4rem;
  background: rgba(245, 242, 236, 0.2);
  flex-shrink: 0;
}

.hero__hours-etat {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero__hours-etat--ouvert {
  color: #6fcf97;
}

.hero__hours-etat--ferme {
  color: #ef4444;
}

.horaires-bar__statut {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.horaires-bar__statut--ouvert {
  background: #6fcf97;
}

.horaires-bar__statut--ferme {
  background: #ef4444;
}

.hero__hours-today {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: #FFFDF3;
  letter-spacing: 0.05em;
}

.hero__hours-today--ferme {
  color: #ef4444;
}

.hero__hours-more {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.5);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

/* ── Hero strip — desktop sizes ── */
@media (min-width: 1024px) {
  .hero__hours-museum {
    gap: 1rem;
  }
  .hero__hours-sep {
    height: 2rem;
  }
  .hero__hours-etat {
    font-size: var(--fs-base);
  }
  .hero__hours-today {
    font-size: var(--fs-md);
  }
  .hero__hours-more {
    font-size: var(--fs-sm);
  }
  .horaires-bar__statut {
    width: 8px;
    height: 8px;
  }
}
.hero__hours-museum:hover .hero__hours-more {
  color: rgba(245, 242, 236, 0.8);
}

.hero__hours-chevron {
  width: 10px;
  height: 6px;
  stroke: currentColor;
  transition: transform 0.26s ease;
}

.hero__hours-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 1rem);
  left: 0;
  min-width: 200px;
  background: rgba(20, 20, 20, 0.96);
  border: 1px solid rgba(245, 242, 236, 0.12);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  z-index: 10;
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero__hours-dropdown {
    /* Ouvre vers le bas sur mobile pour éviter le clipping du header */
    bottom: auto;
    top: calc(100% + 0.5rem);
    left: auto;
    right: 0;
    min-width: 180px;
  }
}
.hero__hours-drop-title {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.6rem;
}

.hero__hours-drop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hero__hours-drop-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  color: rgba(245, 242, 236, 0.6);
}

.hero__hours-drop-row.is-today {
  color: #FFFDF3;
  font-weight: 600;
}

.hero__hours-drop-day {
  white-space: nowrap;
}

.hero__hours-drop-hours {
  color: inherit;
  white-space: nowrap;
}

.hero__hours-drop-closed {
  color: rgba(245, 242, 236, 0.3);
}

.hero__hours-drop-pause {
  color: rgba(245, 242, 236, 0.35);
  font-size: var(--fs-xs);
}

.hero__hours-drop-notice {
  margin: 0.7rem 0 0;
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  color: rgba(245, 242, 236, 0.4);
  line-height: 1.5;
  font-style: italic;
}

.text {
  font-family: var(--font-primary);
}

.text__body {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1;
}

.text__body--small {
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1;
}

.text__highlight {
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.main__banniere {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--gold);
  color: #fffdf3;
  padding: clamp(0.75rem, 1.5vw, 1.5rem) clamp(3.5rem, 8vw, 7rem) clamp(0.75rem, 1.5vw, 1.5rem) clamp(1.25rem, 2.5vw, 3rem);
  max-width: 100%;
  box-sizing: border-box;
  margin: 2rem 0rem 2rem 0rem;
}

/* Quand la bannière est dans .main, compenser le padding parent pour coller aux bords */
.main > .main__banniere,
.main > * > .main__banniere,
#main-content > .main__banniere {
  margin-top: 2rem;
  margin-left: -2rem;
  margin-right: 0;
  margin-bottom: 2rem;
}

@media (max-width: 767px) {
  .main__banniere {
    margin: 0 !important;
  }
  .main > .main__banniere,
  .main > * > .main__banniere,
  #main-content > .main__banniere {
    margin-top: 2rem !important;
    margin-left: -1rem !important;
    margin-right: 0 !important;
    margin-bottom: 2rem !important;
  }
}
@media (min-width: 768px) {
  .main > .main__banniere,
  .main > * > .main__banniere,
  #main-content > .main__banniere {
    margin-top: 2rem;
    margin-left: -2rem;
    margin-right: 0;
    margin-bottom: 2rem;
  }
}
.main__banniere-titre {
  font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem);
  color: #FFFDF3;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.015em;
}

@media (min-width: 768px) {
  .main__banniere-titre {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.8;
  }
}
@media (min-width: 1400px) {
  .main__banniere-titre {
    font-size: clamp(4rem, 4.5vw + 0.5rem, 3rem);
    line-height: 4rem;
  }
}
.main__banniere-sous-titre {
  font-size: clamp(1rem, 2vw + 0.125rem, 1.5rem);
  font-weight: 500;
  color: #FFFDF3;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.main__banniere-titre-fonce {
  font-family: var(--font-h1-h2);
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-weight: 600;
  color: brightness(0) saturate(100%) invert(0%) sepia(17%) saturate(23%) hue-rotate(345deg) brightness(96%) contrast(80%);
  line-height: 0.8;
  margin-top: 0;
  margin-bottom: 1rem;
  letter-spacing: -0.04em;
}

@media (min-width: 768px) {
  .main__banniere-titre-fonce {
    margin-bottom: 1.5rem;
  }
}
.main__banniere-contenu {
  display: flex;
  flex-direction: column;
}

.main__banniere-img {
  max-width: 32px;
  height: 32px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .main__banniere-img {
    max-width: 40px;
    height: 40px;
  }
}
.main__banniere-img-fonce {
  background-color: brightness(0) saturate(100%) invert(0%) sepia(17%) saturate(23%) hue-rotate(345deg) brightness(96%) contrast(80%);
  width: 32px;
  height: 32px;
}

@media (min-width: 768px) {
  .main__banniere-img-fonce {
    width: 40px;
    height: 40px;
  }
}
@media (min-width: 1024px) {
  .main__banniere-img-fonce {
    width: 70px;
    height: 70px;
  }
}
@media (min-width: 768px) {
  .main__banniere {
    max-width: 65%;
  }
}
.main__banniere-prog {
  background-color: transparent;
}

.main__banniere--visite {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .main__banniere--visite {
    gap: 20px;
  }
}
.main__banniere--programmation {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: brightness(0) saturate(100%) invert(0%) sepia(17%) saturate(23%) hue-rotate(345deg) brightness(96%) contrast(80%);
  gap: 12px;
  padding: clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  align-items: center;
}

@media (min-width: 768px) {
  .main__banniere--programmation {
    gap: 20px;
  }
}
.main_evenement {
  position: inherit;
}

.main__banniere--evenement {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .main__banniere--evenement {
    gap: 20px;
  }
}
.main__banniere--infos {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

@media (min-width: 768px) {
  .main__banniere--infos {
    gap: 20px;
  }
}
.main__banniere--explorer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .main__banniere--explorer {
    gap: 20px;
  }
}
.main__programmation {
  max-width: 65%;
  margin: 0;
  box-sizing: border-box;
}

.fichier-pedago {
  padding: 40px;
  background-color: #47564F;
  color: #FFFDF3;
  border-radius: 10px;
}

.fichier-pedago__titre {
  padding-bottom: 10px;
}

.fichier-pedago__para {
  padding-bottom: 20px;
}

.fichier-pedago__button {
  margin-top: 20px;
}

footer {
  width: 100%;
  background: var(--black);
  color: #FFFDF3;
  padding: 0;
  position: relative;
  overflow: hidden;
  margin: 0;
  box-sizing: border-box;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.footer__contain-form {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .footer__contain-form {
    padding: 3rem 2rem 3rem;
    gap: 3rem;
  }
}
@media (min-width: 1024px) {
  .footer__contain-form {
    padding: 5rem 3rem 4rem;
    grid-template-columns: 1.2fr 2.8fr;
    gap: 5rem;
  }
}
.footer__logo-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0;
}

@media (min-width: 1024px) {
  .footer__logo-container {
    position: sticky;
    top: 2rem;
    align-self: start;
  }
}
.footer__logo-link {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.footer__logo-link:hover {
  opacity: 0.85;
}

.footer__logo-img {
  height: 40px;
  width: auto;
  display: block;
}

@media (min-width: 768px) {
  .footer__logo-img {
    height: 50px;
  }
}
@media (min-width: 1024px) {
  .footer__logo-img {
    height: 60px;
  }
}
.footer__title {
  font-size: clamp(1.2rem, 2.5vw, 1.1rem);
  font-weight: 500;
  line-height: 1.5;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.3px;
}

@media (min-width: 768px) {
  .footer__title {
    margin: 1.5rem 0 0;
    font-size: 1.1rem;
  }
}
@media (min-width: 1024px) {
  .footer__title {
    font-size: 1.25rem;
  }
}
.footer__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
}

@media (min-width: 640px) {
  .footer__form {
    flex-direction: row;
    align-items: center;
  }
}
.footer__input {
  flex: 1;
  padding: 0.875rem 0;
  font-size: 1rem;
  color: #FFFDF3;
  background-color: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  transition: all 0.3s ease;
  min-height: 2.75rem;
}

.footer__input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
}

.footer__input:focus {
  outline: none;
  border-bottom-color: #FFFDF3;
  padding-left: 0.5rem;
}

@media (min-width: 640px) {
  .footer__input {
    min-width: 250px;
    font-size: 1.2rem;
  }
}
.footer__button {
  min-height: 2.75rem;
  padding: 0.875rem 1.5rem;
  font-size: 1.2rem;
  font-weight: 500;
  background-color: transparent;
  color: #FFFDF3;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  cursor: pointer;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease, border-color 0.4s ease;
  white-space: nowrap;
  letter-spacing: 0.5px;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  background: linear-gradient(#FFFDF3, #FFFDF3) no-repeat bottom/100% 0%;
}

@media (min-width: 640px) {
  .footer__button {
    width: auto;
    padding: 0.875rem 2rem;
  }
}
.footer__button::before {
  display: none;
}

.footer__button:hover::before {
  display: none;
}

.footer__button:hover {
  background-size: 100% 100%;
  color: var(--gold);
  border-color: #FFFDF3;
}

.footer__button:active {
  transform: scale(0.97);
}

.footer__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 640px) {
  .footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .footer__nav {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
  }
}
.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__nav-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: #FFFDF3;
  letter-spacing: 0.5px;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.footer__nav-item {
  margin: 0;
}

.footer__nav-link {
  font-size: var(--fs-md);
  color: #FFFDF3;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  line-height: 1.6;
  padding: 0.25rem 0;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}

.footer__nav-link:active {
  opacity: 0.7;
}

@media (min-width: 1024px) {
  .footer__nav-link {
    padding: 0;
    min-height: auto;
    display: inline-block;
  }
  .footer__nav-link:hover {
    color: #FFFDF3;
    transform: translateX(4px);
  }
}
.footer__address {
  font-size: var(--fs-base);
  font-style: normal;
  opacity: 0.75;
  line-height: 1.8;
  color: #FFFDF3;
  margin: 0;
}

.footer__hours {
  font-size: var(--fs-base);
  opacity: 0.75;
  line-height: 1.8;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer__hours p {
  margin: 0;
}

.footer__bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 3rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  justify-content: center;
}

@media (min-width: 768px) {
  .footer__bottom {
    justify-content: space-between;
  }
}
.footer__social-media {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.footer__social-link:active {
  transform: scale(0.95);
  background-color: rgba(255, 255, 255, 0.2);
}

@media (min-width: 1024px) {
  .footer__social-link:hover {
    background-color: #FFFDF3;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  .footer__social-link:hover .footer__social-icon {
    filter: brightness(0) saturate(100%) invert(38%) sepia(85%) saturate(1500%) hue-rotate(10deg);
  }
}
.footer__social-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.footer__copyright {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  text-align: center;
  flex: 1;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
}

.footer__link {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
}

.footer__link:hover {
  color: #FFFDF3;
}

.footer__link:not(:last-child)::after {
  content: "•";
  position: absolute;
  right: -0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.container {
  max-width: 75rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.services-section {
  background-color: rgb(253, 253, 253);
  padding: 3rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  color: #333333;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(149, 126, 24, 0.1);
}

.services-section .section-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
}

@media (min-width: 48rem) {
  .services-section .section-title {
    font-size: 2rem;
  }
}
.services-section .section-title .icon {
  font-size: 28px;
  font-weight: 300;
}

.services-section .services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 4rem;
}

.services-section .service-item {
  padding: 1rem;
  transition: transform 0.3s ease;
}

.services-section .service-item:hover {
  transform: translateX(5px);
}

.services-section .service-item .service-subtitle {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--black);
}

.services-section .service-item .service-text {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #666666;
}

.bottom-sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.reservation-section {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 3rem;
  border: 1px solid rgba(149, 126, 24, 0.1);
}

.reservation-section .section-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
}

@media (min-width: 48rem) {
  .reservation-section .section-title {
    font-size: 2rem;
  }
}
.reservation-section .section-title .icon {
  font-size: 28px;
  font-weight: 300;
}

.reservation-section .reservation-text {
  font-family: var(--font-primary);
  font-size: 1rem;
  color: #666666;
  margin-bottom: 1.5rem;
  line-height: 1.5;
  font-weight: 400;
}

.reservation-section .reservation-link {
  margin-bottom: 3rem;
}

.reservation-section .reservation-link a {
  color: var(--gold);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
  transition: all 0.3s ease;
}

.reservation-section .reservation-link a:hover {
  background-color: rgba(149, 126, 24, 0.1);
  color: rgb(105, 89, 17);
}

.reservation-section .subsection-title {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.deals-section {
  background-color: rgb(253, 253, 253);
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(149, 126, 24, 0.1);
}

.deals-section .section-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
}

@media (min-width: 48rem) {
  .deals-section .section-title {
    font-size: 2rem;
  }
}
.deals-section .section-title .icon {
  font-size: 28px;
  font-weight: 300;
}

.deals-section .deal-title {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 0.5rem;
  margin-top: 2rem;
}

.deals-section .deal-title:first-of-type {
  margin-top: 0;
}

.deals-section .deal-text {
  font-family: var(--font-primary);
  font-size: 1rem;
  color: #666666;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

@media (max-width: 48rem) {
  .services-section .services-grid {
    grid-template-columns: 1fr;
  }
  .bottom-sections {
    grid-template-columns: 1fr;
  }
}
.fancy-details {
  font-family: var(--font-h3-h4-h5), sans-serif;
  color: var(--black);
  font-weight: 600;
  padding: 0.4rem;
  margin-bottom: 1rem;
  overflow: hidden;
  border-bottom: 3px solid var(--black);
}

.fancy-details summary::-webkit-details-marker {
  display: none;
}

.fancy-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  padding: 0.8rem 1rem;
  cursor: pointer;
  font-weight: 600;
  position: relative;
}

.fancy-details summary::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.25s ease;
  margin-left: 1rem;
}

.fancy-details .fancy-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  padding: 0 1rem;
}

.fancy-details[open] summary::after {
  transform: rotate(45deg);
}

.fancy-details[open] .fancy-content {
  max-height: 500px;
  opacity: 1;
  padding-top: 0.5rem;
  padding-bottom: 0.8rem;
}

.main__button--savoir-white {
  min-height: 2.75rem;
  padding: clamp(0.875rem, 2.5vw, 15px) clamp(1.25rem, 4vw, 30px);
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.main__button--savoir-white:active {
  transform: scale(0.97);
}

.main__button--savoir-white {
  color: #FFFDF3;
  border: 1.5px solid #FFFDF3;
  background: linear-gradient(#FFFDF3, #FFFDF3) no-repeat bottom/100% 0%;
}

.main__button--savoir-white::before {
  display: none;
}

.main__button--savoir-white:hover::before {
  display: none;
}

.main__button--savoir-white:hover {
  background-size: 100% 100%;
  color: var(--black);
}

@media (min-width: 1024px) {
  .main__button--savoir-white {
    width: inherit;
  }
}
@media (min-width: 1024px) {
  .main__button--savoir-white {
    padding: 20px 50px;
    font-size: 15px;
  }
}
.main__button-black {
  min-height: 2.75rem;
  padding: clamp(0.875rem, 2.5vw, 15px) clamp(1.25rem, 4vw, 30px);
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.main__button-black:active {
  transform: scale(0.97);
}

.main__button-black {
  color: var(--black);
  background-color: #FFFDF3;
}

@media (min-width: 1024px) {
  .main__button-black {
    padding: 20px 50px;
    font-size: 15px;
  }
}
.main__button--infos-or {
  min-height: 2.75rem;
  padding: clamp(0.875rem, 2.5vw, 15px) clamp(1.25rem, 4vw, 30px);
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease, border-color 0.4s ease;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.main__button--infos-or:active {
  transform: scale(0.97);
}

.main__button--infos-or {
  color: var(--gold);
  width: 100%;
  background: linear-gradient(var(--black), var(--black)) no-repeat bottom/100% 0%;
}

.main__button--infos-or:hover {
  background: linear-gradient(var(--black), var(--black)) no-repeat bottom;
  background-size: 100% 100%;
  color: #FFFDF3;
  border-color: var(--black);
}

@media (min-width: 768px) {
  .main__button--infos-or {
    width: auto;
  }
}
@media (min-width: 1024px) {
  .main__button--infos-or {
    padding: 20px 50px;
    font-size: 15px;
  }
}
.main__button--visite-black {
  min-height: 2.75rem;
  padding: clamp(0.875rem, 2.5vw, 15px) clamp(1.25rem, 4vw, 30px);
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.main__button--visite-black:active {
  transform: scale(0.97);
}

.main__button--visite-black {
  color: var(--black);
  width: 100%;
  border: 1px solid var(--black);
  background: linear-gradient(var(--black), var(--black)) no-repeat bottom/100% 0%;
}

.main__button--visite-black:hover {
  background-size: 100% 100%;
  color: #FFFDF3;
}

@media (min-width: 768px) {
  .main__button--visite-black {
    width: auto;
  }
}
@media (min-width: 1024px) {
  .main__button--visite-black {
    padding: 20px 50px;
    font-size: 15px;
  }
}
.main__button--explore-black {
  min-height: 2.75rem;
  padding: clamp(0.875rem, 2.5vw, 15px) clamp(1.25rem, 4vw, 30px);
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.main__button--explore-black:active {
  transform: scale(0.97);
}

.main__button--explore-black {
  color: var(--black);
  width: 100%;
  border: 1px solid var(--black);
  background: linear-gradient(var(--black), var(--black)) no-repeat bottom/100% 0%;
}

.main__button--explore-black:hover {
  background-size: 100% 100%;
  color: #FFFDF3;
}

@media (min-width: 768px) {
  .main__button--explore-black {
    width: auto;
  }
}
@media (min-width: 1024px) {
  .main__button--explore-black {
    padding: 20px 50px;
    font-size: 13px;
  }
}
.main__button--evenement-black {
  min-height: 2.75rem;
  padding: clamp(0.875rem, 2.5vw, 15px) clamp(1.25rem, 4vw, 30px);
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease, border-color 0.4s ease;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.main__button--evenement-black:active {
  transform: scale(0.97);
}

.main__button--evenement-black {
  color: var(--black);
  width: auto;
  border: 1.5px solid #787878;
  background: linear-gradient(#2e2d2c, #2e2d2c) no-repeat bottom/100% 0%;
}

.main__button--evenement-black:hover {
  background-size: 100% 100%;
  color: #FFFDF3;
  border-color: #2e2d2c;
}

@media (min-width: 768px) {
  .main__button--evenement-black {
    width: auto;
  }
}
@media (min-width: 1024px) {
  .main__button--evenement-black {
    padding: 20px 50px;
    font-size: 13px;
  }
}
.main__card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background-color: var(--gold);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  color: rgb(253, 253, 253);
  margin: clamp(1rem, 2vw, 2rem) auto;
  max-width: 100%;
  border-radius: 0.5rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .main__card {
    max-width: 95%;
    gap: 1.5rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }
}
@media (min-width: 1024px) {
  .main__card {
    flex-direction: row;
    align-items: stretch;
    gap: 2rem;
    max-width: 90%;
  }
}
@media (min-width: 1600px) {
  .main__card {
    max-width: 85%;
    padding: 3rem;
  }
}
.main__card-agencement {
  width: 100%;
}

@media (min-width: 1024px) {
  .main__card-agencement {
    width: 50%;
    flex-shrink: 0;
  }
}
.main__card-img {
  width: 100%;
  height: 250px;
  border-radius: 10px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .main__card-img {
    height: 350px;
  }
}
@media (min-width: 1024px) {
  .main__card-img {
    height: 100%;
    min-height: 600px;
  }
}
.main__card-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 768px) {
  .main__card-container {
    gap: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .main__card-container {
    width: 55%;
    flex: 1;
  }
}
.main__card-title {
  color: #FFFDF3;
  font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  letter-spacing: -0.015em;
}

@media (min-width: 768px) {
  .main__card-title {
    font-size: clamp(2.25rem, 4.5vw + 0.5rem, 3rem);
  }
}
.main__card-subtitle {
  color: #FFFDF3;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  letter-spacing: -0.04em;
}

@media (min-width: 768px) {
  .main__card-subtitle {
    font-size: clamp(1.5rem, 3vw, 2rem);
  }
}
.main__card-text {
  color: #FFFDF3;
  font-weight: 400;
  margin-bottom: 1rem;
}

.main__card-text-subtitle {
  color: #FFFDF3;
  font-weight: 200;
  margin-bottom: 1rem;
}

.main__card-description {
  color: #FFFDF3;
  line-height: 1.6;
}

.main__visite-cards {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 100%;
  margin: clamp(1rem, 2vw, 2rem) auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .main__visite-cards {
    max-width: 95%;
    gap: 1.5rem;
    padding: 0 clamp(0.5rem, 2vw, 1rem);
  }
}
@media (min-width: 1024px) {
  .main__visite-cards {
    flex-direction: row;
    gap: 2rem;
    align-items: flex-start;
    max-width: 90%;
  }
}
@media (min-width: 1600px) {
  .main__visite-cards {
    max-width: 85%;
  }
}
.main__visite-card {
  box-shadow: 0px 0px 16px 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .main__visite-card {
    padding: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .main__visite-card {
    margin-bottom: 0;
    flex: 1;
    max-width: 50%;
    padding: 2.5rem;
  }
}
.main__visite-card-title {
  color: var(--gold);
  font-size: clamp(1.25rem, 3vw + 0.25rem, 4rem);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
  letter-spacing: -0.04em;
}

@media (min-width: 768px) {
  .main__visite-card-title {
    font-size: clamp(1.5rem, 3.5vw + 0.25rem, 4rem);
    margin-bottom: 1.5rem;
  }
}
.main__visite-card-subtitle {
  font-size: clamp(1rem, 2vw + 0.125rem, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .main__visite-card-subtitle {
    font-size: clamp(1.125rem, 2.5vw + 0.125rem, 1.5rem);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
}
.main__visite-card-subtitle--orange {
  color: var(--gold);
}

.main__visite-card-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .main__visite-card-column {
    gap: 1.5rem;
    margin-bottom: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .main__visite-card-column {
    gap: 30px;
    margin-bottom: 20px;
  }
}
.main__visite-card-column-entree {
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .main__visite-card-column-entree {
    margin-bottom: 1rem;
  }
}
.main__visite-card-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .main__visite-card-row {
    gap: 15px;
  }
}
.main__visite-card-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: brightness(0) saturate(100%) invert(100%) sepia(65%) saturate(348%) hue-rotate(342deg) brightness(106%) contrast(108%);
  stroke-width: 2px;
}

@media (min-width: 768px) {
  .main__visite-card-arrow {
    width: 20px;
    height: 20px;
  }
}
.main__visite-card-text {
  color: #666666;
  font-weight: 400;
}

.main__visite-card-text-bold {
  font-weight: 500;
  padding: 10px 0;
}

.main__visite-card-small-text {
  font-size: var(--fs-md);
  color: #666666;
  margin-bottom: 10px;
}

.main__infos-utiles-separator {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1rem;
}

@media (min-width: 768px) {
  .main__infos-utiles-separator {
    margin: 1.5rem;
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
  .main__infos-utiles-separator {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin: 0 2rem;
    gap: 2rem;
  }
}
.main__infos-utiles-cards {
  display: flex;
  flex-direction: column;
  margin: 1rem;
  gap: 1.25rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .main__infos-utiles-cards {
    gap: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .main__infos-utiles-cards {
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
}
.main__infos-utiles-card {
  width: 100%;
}

@media (min-width: 1024px) {
  .main__infos-utiles-card {
    flex: 1;
  }
}
.main__infos-utiles-card-or {
  background-color: var(--gold);
  padding: 20px;
  border-radius: 10px;
}

.main__infos-utiles-card-title-or {
  color: var(--gold);
}

.main__infos-utiles-card-subtitle {
  margin: 20px 0;
  font-weight: 600;
}

.main__infos-utiles-card-subtitle-white {
  color: #FFFDF3;
  margin: 10px 0;
}

.main__infos-utiles-card-text {
  color: #666666;
}

.main__infos-utiles-card-text-white {
  color: #FFFDF3;
  margin-bottom: 15px;
}

.main__infos-utiles-card-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.main__infos-utiles-card-list-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.main__infos-utiles-card-row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.main__infos-utiles-card-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
}

.main__visite-button {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
}

/* ── Contact & Accès ───────────────────────────────── */
.main__contact {
  padding: 0 0 60px;
}

.main__contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 40px 24px 0;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .main__contact-grid {
    grid-template-columns: 1fr 1fr;
    padding: 40px 40px 0;
  }
}
@media (min-width: 1200px) {
  .main__contact-grid {
    padding: 40px 80px 0;
  }
}
.main__contact-card {
  background: #f5f3ef;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.main__contact-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.main__contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.main__contact-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  stroke: #ae9a79;
  color: #ae9a79;
}

.main__contact-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.main__contact-social-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-size: 0.85rem;
  transition: color 0.2s;
}

.main__contact-social-link:hover {
  color: #ae9a79;
}

.main__contact-social-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ── Partenaires & Labels ──────────────────────────── */
.main__partenaires {
  padding: 0 0 80px;
  background: #fff;
}

.main__partenaires-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 40px 24px 0;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .main__partenaires-row {
    padding: 40px 80px 0;
    gap: 48px;
  }
}
.main__partenaires-row--musees {
  padding-top: 32px;
}

.main__partenaires-row--ville {
  padding-top: 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 8px;
}

.main__partenaires-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main__partenaires-logo img {
  max-height: 80px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter 0.2s;
}

.main__partenaires-logo:hover img {
  filter: grayscale(0%);
}

.main__partenaires-logo--dark {
  background: #1c1b1a;
  padding: 16px 24px;
}

.main__partenaires-logo--dark img {
  max-height: 60px;
  filter: none;
}

.main__partenaires-row--ville .main__partenaires-logo img {
  max-height: 100px;
  max-width: 220px;
}

/* ── Barre infos pratiques condensée (front page) ── */
.visite-bar {
  position: relative;
  background: transparent;
  padding: 0 40px;
}

/* Orbes masquées */
.visite-bar__orbs {
  display: none;
}

/* Contenu */
.visite-bar__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  gap: 20px;
  padding: 0 36px;
  background: var(--black);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 12px;
}

.visite-bar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Point vert statut */
.visite-bar__dot {
  width: 7px;
  height: 7px;
  background: #4caf50;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
  flex-shrink: 0;
}

.visite-bar__status-label {
  font-family: var(--font-secondary);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #4caf50;
  white-space: nowrap;
}

.visite-bar__sep {
  width: 1px;
  height: 32px;
  background: #e9e9e9;
  flex-shrink: 0;
}

.visite-bar__muted {
  font-family: var(--font-paragraphe);
  font-size: 12px;
  color: #e9e9e9;
  flex-shrink: 0;
  white-space: nowrap;
}

.visite-bar__label {
  font-family: var(--font-secondary);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e9e9e9;
}

.visite-bar__value {
  font-family: var(--font-h3-h4-h5);
  font-size: 18px;
  color: #e9e9e9;
}

.visite-bar__address {
  font-family: var(--font-paragraphe);
  font-size: 12px;
  color: #e9e9e9;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visite-bar__cta {
  flex-shrink: 0;
  background: var(--gold);
  color: #e9e9e9;
  padding: 12px 28px;
  border-radius: 10px;
  font-family: var(--font-secondary);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.visite-bar__cta:hover {
  opacity: 0.85;
}

/* Responsive */
@media (max-width: 767px) {
  .visite-bar {
    padding: 0 16px;
  }
  .visite-bar__inner {
    height: auto;
    padding: 20px 16px;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
  }
  .visite-bar__sep,
  .visite-bar__address,
  .visite-bar__muted {
    display: none;
  }
  .visite-bar__cta {
    width: 100%;
    text-align: center;
    padding: 14px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .visite-bar__address {
    display: none;
  }
}
.main__infos-utiles-cards {
  box-shadow: 0px 0px 16px 5px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  border-radius: 1.5rem;
}

.main__infos-utiles-card-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.main__infos-utiles-card-list-item {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  font-weight: 300;
  margin-bottom: 1rem;
}

.main__infos-utiles-card-subtitle {
  color: var(--gold);
  font-weight: 500;
  margin: 1rem;
}

.main__infos-utiles-card-text {
  color: #666666;
  font-weight: 400;
}

.main__infos-utiles-card-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin-bottom: 5rem;
}

.carousel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 1rem 0;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
}

@media (min-width: 768px) {
  .carousel {
    margin: clamp(1rem, 3vw, 2rem) 0;
  }
}
.carousel__list {
  width: 100%;
  max-width: 100%;
  display: block;
  overflow: visible;
}

/* ── Splide Carousel — overrides structure ── */
/* Splide gère le layout (flex, gap, width) en inline via JS.
   Ces règles assurent l'overflow et corrigent min-width. */
.splide__list {
  touch-action: pan-y pinch-zoom;
}

.splide__slide {
  min-width: 0;
}

.carousel__item__container {
  width: 33.333%;
  padding: 0 10px;
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .carousel__item__container {
    width: 50%;
  }
}
@media (max-width: 767px) {
  .carousel__item__container {
    width: 100%;
  }
}
/* ─── Carousel card — structure globale ─────────────────────────────────── */
.carousel__item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: clamp(500px, 60vh, 680px);
  height: auto;
  justify-content: space-between;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  color: #FFFDF3;
  /* Padding uniquement sur le haut pour le badge — le bloc bas gère son propre padding */
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(0.6rem, 1.5vw, 0.85rem) 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* ─── Card cliquable : reset du style <a> ───────────────────────────────── */
a.carousel__item--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a.carousel__item--link:hover,
a.carousel__item--link:focus {
  transform: scale(1.015);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

a.carousel__item--link:hover .carousel__item-more {
  color: #c9a227;
}

/* Overlay sombre léger sur toute la card */
.carousel__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 20, 20, 0.25);
  z-index: 0;
  border-radius: 10px;
}

.carousel__item > * {
  position: relative;
  z-index: 1;
}

/* ─── Bloc bas : card dans la card — frosted glass contenu ──────────────── */
.carousel__item-bottom {
  position: relative;
  /* Fond semi-transparent + blur : effet verre dépoli contenu */
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  /* Bords arrondis sur les 4 coins : vraie card dans la card */
  border-radius: 6px;
  border: 1px solid rgba(255, 253, 243, 0.12);
  /* Padding interne */
  padding: clamp(1rem, 2.5vw, 1.5rem);
  /* Marge en bas pour ne pas coller au bord de la card */
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
  /* Hauteur fixe : le contenu ne fait pas varier la taille de la card */
  height: clamp(12rem, 22vw, 15rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ─── Badge prix / gratuit ───────────────────────────────────────────────── */
.carousel__item-badge {
  font-size: clamp(0.65rem, 1.5vw, 0.875rem);
  padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
  border-radius: 6px;
  align-self: flex-start;
}

.carousel__item-badge--free {
  background-color: rgba(71, 86, 79, 0.45);
  color: white;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.carousel__item-badge--price {
  background-color: rgba(0, 0, 0, 0.45);
  color: white;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── Label musée (MBAA / MDT / MAT) ────────────────────────────────────── */
.carousel__item-musee-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  white-space: nowrap;
}
.hp-actu-card__thumb .carousel__item-musee-label {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  flex-shrink: unset;
  padding: 3px 8px;
  font-size: 11px;
  gap: 4px;
}
.hp-actu-card__thumb .carousel__item-musee-label .carousel__item-musee-logo {
  width: 12px;
  height: 12px;
}

.carousel__item-musee-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ─── Conteneur top : badge à gauche, label musée à droite ──────────────── */
.carousel__item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

/* ─── Meta date/heure : inline, discret, sans fond propre ───────────────── */
.carousel__item-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  /* Plus de fond/border/blur propre : le bloc .carousel__item-bottom gère l'effet */
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 0;
  width: auto;
}

/* ─── Date et heure : petites, lisibles, secondaires ────────────────────── */
.carousel__item-date,
.carousel__item-time {
  white-space: nowrap;
  font-size: clamp(0.72rem, 1.3vw, 0.88rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.75);
  line-height: 1;
}

/* Séparateur · entre date et heure */
.carousel__item-date::after {
  content: "·";
  margin-left: 0.4rem;
  opacity: 0.5;
  font-weight: 400;
}

/* ─── Responsive date/heure : colonne sur écrans < grand desktop ────────── */
/* Laptops 13-15" et en dessous : date au-dessus de l'heure pour éviter le débordement */
@media (max-width: 1500px) {
  .carousel__item-date::after {
    display: none;
  }
  .carousel__item-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
}
/* Petits écrans (mobile) : taille réduite en plus */
@media (max-width: 767px) {
  .carousel__item-date,
  .carousel__item-time {
    font-size: clamp(0.65rem, 2.8vw, 0.8rem);
  }
}
/* ─── Tags : public cible + places ──────────────────────────────────────── */
.carousel__item-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}

.carousel__item-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.9);
  background: rgba(255, 253, 243, 0.12);
  border: 1px solid rgba(255, 253, 243, 0.18);
  border-radius: 20px;
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
}

.carousel__item-places {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 253, 243, 0.75);
  white-space: nowrap;
}

/* ─── Titre : ancre visuelle principale ─────────────────────────────────── */
.carousel__item-title {
  font-size: clamp(1.1rem, 2.2vw + 0.2rem, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.4rem;
  color: #FFFDF3;
  word-break: break-word;
  letter-spacing: -0.04em;
}

@media (min-width: 768px) {
  .carousel__item-title {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    margin-bottom: 0.45rem;
  }
}
/* ─── Description : secondaire, compacte, tronquée ──────────────────────── */
.carousel__item-text {
  font-size: clamp(0.78rem, 1.5vw, 0.92rem);
  line-height: 1.5;
  margin-bottom: 0;
  color: rgba(255, 253, 243, 0.78);
  /* Troncature : max 3 lignes */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

/* ─── Footer : Voir + à gauche, places à droite ─────────────────────────── */
.carousel__item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 0.5rem;
  flex-shrink: 0;
}

/* ─── Bouton "Voir +" ────────────────────────────────────────────────────── */
.carousel__item-more {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.75rem;
  font-size: clamp(0.68rem, 1.3vw, 0.82rem);
  font-weight: 600;
  color: #FFFDF3;
  text-decoration: none;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 253, 243, 0.45);
  border-radius: 20px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
  width: max-content;
}

.carousel__item-more:hover,
.carousel__item-more:focus {
  color: #c9a227;
  border-color: #c9a227;
  background: rgba(201, 162, 39, 0.08);
}

.carousel__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media (min-width: 768px) {
  .carousel__button {
    margin: clamp(0.5rem, 2vw, 1rem);
    width: auto;
  }
}
.carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}

@media (max-width: 1044px) {
  .carousel__controls {
    order: -1;
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}
.carousel__arrow {
  border: 1.5px solid #1a1a1a;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  background: #FFFDF3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.carousel__arrow:hover {
  transform: scale(1.1);
  background: #1a1a1a;
}

.carousel__arrow:hover img {
  filter: invert(1);
}

.carousel__arrow:active {
  transform: scale(0.95);
}

.carousel__arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.2s ease;
}

/* Override : quand carousel__arrow utilise le style hero__arrow */
.hero__arrow.carousel__arrow {
  border: 1.5px solid rgba(28, 27, 26, 0.4);
  width: 56px;
  height: 56px;
  background: transparent;
  padding: 14px;
}

.hero__arrow.carousel__arrow::before {
  background: var(--black);
}

.hero__arrow.carousel__arrow img {
  filter: brightness(0);
}

.hero__arrow.carousel__arrow:hover {
  transform: none;
  background: transparent;
  border-color: var(--black);
}

.hero__arrow.carousel__arrow:hover img {
  filter: brightness(0) invert(1);
}

.filtre {
  margin: clamp(1rem, 3vw, 2rem) clamp(0.5rem, 2vw, 1rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gallery-filtre {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.gallery-filtre .filtre__title {
  display: none;
}

.filtre__title {
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: 600;
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .filtre__title {
    font-size: 1.15rem;
  }
}
.filtre__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.filtre__list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .filtre__list {
    gap: 0.75rem;
  }
}
.filtre__list-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border: 0.5px solid rgba(28, 27, 26, 0.4) !important;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(#1a1a1a, #1a1a1a) no-repeat bottom/100% 0%;
  color: #1a1a1a;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease, border-color 0.4s ease;
  user-select: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.filtre__list-item:hover {
  background-size: 100% 100%;
  color: #FFFDF3;
  border-color: #1a1a1a !important;
}

@media (min-width: 1024px) {
  .filtre__list-item {
    font-size: 0.875rem;
    padding: 0.7rem 1.8rem;
    border-width: 2px;
    gap: 0.55rem;
  }
}
.filtre__list-item:hover .filtre__list-img {
  filter: invert(1);
}

.filtre__list-item--active {
  background: var(--gold);
  color: #FFFDF3;
  border-color: var(--gold);
  font-weight: 600;
}

.filtre__list-item--active .filtre__list-img {
  filter: invert(1);
}

.filtre__list-item:active {
  background: #1a1a1a;
  color: #FFFDF3;
  border-color: #1a1a1a;
}

.filtre__list-img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: filter 0.2s ease;
}

@media (min-width: 1024px) {
  .filtre__list-img {
    width: 18px;
    height: 18px;
  }
}
.filtre__list__drag-img {
  width: auto;
  height: clamp(15px, 3vw, 20px);
  flex-shrink: 0;
}

.art-gallery-subfilters {
  border: 1.5px solid;
  border-radius: 10px;
  width: fit-content;
  margin-bottom: 20px;
}

.art-gallery-subfilterbtn {
  background-color: none;
  width: fit-content;
  height: fit-content;
  padding: 10px;
  border-radius: 10px;
  border: none;
  padding: 20px;
}

.art-gallery-subfilterbtn:hover {
  background: aqua;
  transition: all 0.5s ease-in-out;
}

.main__explore {
  margin: 2rem;
}

.main__explore-grid {
  display: grid;
  margin: 1rem;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .main__explore-grid {
    margin: 1.5rem;
    gap: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .main__explore-grid {
    margin: 4rem 3rem 3rem 3rem;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    grid-template-rows: 500px 500px 250px;
  }
}
.main__explore-card-img {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease-in-out;
  opacity: 0.7;
}

.main__explore-card {
  position: relative;
  padding: 50px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  color: white;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  background: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main__explore-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(43, 43, 43, 0.44);
  z-index: 0;
  border-radius: 10px;
  transition: background 0.3s ease;
}

@media (min-width: 768px) {
  .main__explore-card {
    padding: 20px;
  }
}
.main__explore-card > * {
  position: relative;
  z-index: 3;
}

.main__explore-card:hover::before {
  background: rgba(0, 0, 0, 0.7);
}

.main__explore-card:hover .main__explore-card-img {
  transform: scale(1.1);
  opacity: 0.3;
}

.main__explore-card--fat {
  grid-column: span 6;
  grid-row: span 2;
}

.main__explore-card--test {
  grid-column: span 7;
}

.main__explore-card--child {
  grid-column: span 5;
}

.main__explore-card--wide {
  grid-column: span 6;
}

.main__explore-card--tall {
  grid-column: span 6;
}

.main__explore-card-title {
  font-family: var(--font-h1-h2);
  font-weight: 900;
  color: #FFFDF3;
  text-align: center;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0rem;
  font-size: clamp(1.25rem, 3vw + 0.25rem, 4rem);
  line-height: 1.2;
  transition: all 0.3s ease;
  padding: 0 1rem;
  width: 100%;
  letter-spacing: -0.04em;
}

@media (min-width: 768px) {
  .main__explore-card-title {
    font-size: clamp(1.5rem, 3.5vw + 0.25rem, 4rem);
  }
}
/* ============================================================
   FOOTER MBAA — Redesign institutionnel
   Inspiré des grands musées français (Louvre, Orsay, Pompidou)
   Fond sombre · Accent or · Typographie hiérarchisée
   ============================================================ */
/* ── Variables locales footer ── */
/* NOTE : Les variables CSS footer sont dans _variables.scss */
/* ── Reset footer ── */
.footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  font-family: var(--font-body);
  position: relative;
  overflow: hidden;
}

/* Grain de texture subtil */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.footer > * {
  position: relative;
  z-index: 1;
}

/* ── Bande dorée supérieure ── */
.footer__gold-bar {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--footer-gold) 20%, var(--footer-gold) 80%, transparent 100%);
  opacity: 0.7;
}

/* ── Corps principal ── */
.footer__body {
  padding: 4rem 1.5rem 3rem;
}

@media (min-width: 768px) {
  .footer__body {
    padding: 5rem 2.5rem 3.5rem;
  }
}
@media (min-width: 1280px) {
  .footer__body {
    padding: 6rem 4rem 4rem;
  }
}
/* ── Grille principale ── */
.footer__contain-form {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
}

@media (min-width: 1024px) {
  .footer__contain-form {
    grid-template-columns: 320px 1fr;
    gap: 5rem;
    align-items: start;
  }
}
@media (min-width: 1280px) {
  .footer__contain-form {
    grid-template-columns: 360px 1fr;
    gap: 6rem;
  }
}
/* ── Zone logo + infos ── */
.footer__logo-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer__logo-link {
  display: inline-block;
  transition: opacity 0.25s ease;
  margin-bottom: 1.25rem;
}

.footer__logo-link:hover {
  opacity: 0.8;
}

.footer__logo-img {
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

@media (min-width: 768px) {
  .footer__logo-img {
    height: 58px;
  }
}
/* Tagline */
.footer__tagline {
  font-family: var(--font-secondary);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--footer-gold);
  margin: 0 0 1.75rem;
  font-weight: 500;
}

/* Adresse */
.footer__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1.5rem;
}

.footer__address-line {
  font-size: 0.875rem;
  color: var(--footer-text);
  line-height: 1.6;
}

/* Horaires */
.footer__hours {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--footer-border);
  border-bottom: 1px solid var(--footer-border);
  margin-bottom: 2.25rem;
}

.footer__hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.footer__hours-day {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--footer-text-muted);
  font-family: var(--font-secondary);
  font-weight: 500;
}

.footer__hours-time {
  font-size: 0.875rem;
  color: var(--footer-text);
  font-weight: 400;
}

.footer__hours-row--closed .footer__hours-time {
  color: var(--footer-text-muted);
  font-style: italic;
}

/* ── Newsletter ── */
.footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer__newsletter-label {
  font-family: var(--font-secondary);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--footer-gold);
  margin: 0 0 0.6rem;
  font-weight: 500;
}

.footer__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 600;
  color: var(--footer-cream);
  margin: 0 0 1.25rem;
  line-height: 1.35;
  letter-spacing: -0.04em;
}

/* Formulaire */
.footer__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 480px) {
  .footer__form-group {
    flex-direction: row;
    align-items: stretch;
  }
}
.footer__input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--footer-border);
  border-radius: 6px;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--footer-cream);
  font-family: var(--font-body);
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 48px;
  outline: none;
}

.footer__input::placeholder {
  color: var(--footer-text-muted);
  font-size: 0.875rem;
}

.footer__input:focus {
  border-color: var(--footer-gold);
  background: rgba(174, 154, 121, 0.06);
}

.footer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--footer-gold);
  color: #0e0e0e;
  border: none;
  border-radius: 6px;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
  min-height: 48px;
}

.footer__button:hover {
  color: var(--gold);
  border-color: #FFFDF3;
}

.footer__button:active {
  transform: scale(0.97);
}

.footer__button-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.footer__button:hover .footer__button-arrow {
  transform: translateX(3px);
}

.footer__form-notice {
  font-size: 0.75rem;
  color: var(--footer-text-muted);
  margin: 0;
  line-height: 1.5;
}

.footer__form-link {
  color: var(--footer-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(174, 154, 121, 0.3);
  transition: border-color 0.2s ease;
}

.footer__form-link:hover {
  border-color: var(--footer-gold);
}

/* ── Navigation 4 colonnes ── */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 2rem;
}

@media (min-width: 768px) {
  .footer__nav {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}
.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer__nav-title {
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--footer-gold);
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--footer-border);
}

.footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer__nav-list li {
  margin: 0;
}

.footer__nav-link {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--footer-text);
  text-decoration: none;
  padding: 0.45rem 0;
  line-height: 1.4;
  transition: color 0.2s ease, padding-left 0.2s ease;
  position: relative;
}

.footer__nav-link::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--footer-gold);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (min-width: 1024px) {
  .footer__nav-link:hover {
    color: var(--footer-cream);
    padding-left: 14px;
  }
  .footer__nav-link:hover::before {
    opacity: 1;
  }
}
/* ── Séparateur ── */
.footer__divider {
  max-width: 1400px;
  margin: 0 auto;
  height: 1px;
  background: var(--footer-border);
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

@media (min-width: 768px) {
  .footer__divider {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
}
@media (min-width: 1280px) {
  .footer__divider {
    margin-left: 4rem;
    margin-right: 4rem;
  }
}
/* ── Barre de bas de page ── */
.footer__bottom {
  padding: 1.5rem 1.5rem;
}

@media (min-width: 768px) {
  .footer__bottom {
    padding: 1.5rem 2.5rem;
  }
}
@media (min-width: 1280px) {
  .footer__bottom {
    padding: 1.5rem 4rem;
  }
}
.footer__bottom-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .footer__bottom-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
}
/* Réseaux sociaux */
.footer__social-media {
  display: flex;
  align-items: center;
  gap: 1rem;
  order: 1;
}

@media (min-width: 768px) {
  .footer__social-media {
    order: 0;
  }
}
.footer__social-label {
  font-family: var(--font-secondary);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--footer-text-muted);
  white-space: nowrap;
  display: none;
}

@media (min-width: 1024px) {
  .footer__social-label {
    display: block;
  }
}
.footer__social-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--footer-border);
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.footer__social-link:hover {
  background: var(--footer-gold-light);
  border-color: var(--footer-gold);
  transform: translateY(-2px);
}

.footer__social-link:active {
  transform: scale(0.95);
}

.footer__social-icon {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.footer__social-link:hover .footer__social-icon {
  opacity: 1;
}

/* Copyright */
.footer__copyright {
  font-size: 0.78rem;
  color: var(--footer-text-muted);
  margin: 0;
  text-align: center;
  flex: 1;
  order: 3;
}

@media (min-width: 768px) {
  .footer__copyright {
    order: 0;
    text-align: center;
  }
}
/* Liens légaux */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  order: 2;
}

@media (min-width: 768px) {
  .footer__links {
    order: 0;
  }
}
.footer__link {
  font-size: 0.78rem;
  color: var(--footer-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.footer__link:hover {
  color: var(--footer-cream);
}

.footer__link:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -0.75rem;
  color: var(--footer-border);
  pointer-events: none;
}

/* Badge accessibilité RGAA */
.footer__link--a11y {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2rem;
  padding: 0.2rem 0.85rem;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.footer__link--a11y:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFDF3;
}

/* ── Responsive mobile ── */
@media (max-width: 479px) {
  .footer__body {
    padding: 3rem 1.25rem 2.5rem;
  }
  .footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }
  .footer__bottom {
    padding: 1.5rem 1.25rem;
  }
  .footer__bottom-inner {
    gap: 1rem;
  }
  .footer__copyright {
    font-size: 0.72rem;
  }
}
/* ── Fin footer MBAA ── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #1c1b1a;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader__bands {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.preloader__bands.is-ready {
  opacity: 0.2;
}

.preloader__bands.is-bright {
  opacity: 0.55;
}

.preloader__band {
  display: flex;
  gap: 6px;
  height: 30vh;
  flex-shrink: 0;
  width: max-content;
  pointer-events: none;
  will-change: transform;
}

.preloader__band img {
  height: 100%;
  width: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;
  flex-shrink: 0;
  pointer-events: none;
}

.preloader__band--right {
  animation: preloader-r 28s linear infinite;
  animation-play-state: paused;
}

.preloader__band--left {
  animation: preloader-l 34s linear infinite;
  animation-play-state: paused;
}

.preloader__band--right2 {
  animation: preloader-r 22s linear infinite;
  animation-play-state: paused;
}

.preloader__bands.is-ready .preloader__band--right,
.preloader__bands.is-ready .preloader__band--left,
.preloader__bands.is-ready .preloader__band--right2 {
  animation-play-state: running;
}

@keyframes preloader-r {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes preloader-l {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
.preloader__overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.preloader__percent {
  font-family: "Neutraface2Display-Titling", sans-serif;
  font-size: clamp(3.5rem, 10vw, 7rem);
  color: #ae9a79;
  letter-spacing: 0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.preloader__percent.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.preloader__logos {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 1.5rem;
  min-height: 60px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.preloader__logos.is-visible {
  opacity: 1;
}

.preloader__logo {
  height: 50px;
  width: auto;
  filter: brightness(0) invert(1);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.preloader__logo--mbaa {
  transform: translateX(0);
}

.preloader__logo--mdt {
  transform: translateX(0);
}

.preloader__logo--mat {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  transition: opacity 0.5s ease 0.3s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.preloader__logos.is-merging .preloader__logo--mbaa {
  transform: translateX(40px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease 0.3s;
}

.preloader__logos.is-merging .preloader__logo--mdt {
  transform: translateX(-40px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease 0.3s;
}

.preloader__logos.is-merging .preloader__logo--mat {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.preloader__label {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: 0.85rem;
  color: rgba(245, 242, 236, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 0.75rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}

.preloader__label.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.preloader__welcome {
  font-family: "Neutraface2Display-Titling", sans-serif;
  font-size: clamp(0.9rem, 2.5vw, 1.3rem);
  color: rgba(245, 242, 236, 0.8);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.preloader__welcome.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.preloader.is-text-leaving .preloader__overlay {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.preloader.is-leaving {
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader .preloader__band img,
.preloader .preloader__band img:hover {
  transform: none !important;
}

.preloader__logo:hover {
  transform: none !important;
}

.preloader__logo--mat,
.preloader__logo--mat:hover {
  transform: translate(-50%, -50%) scale(0.85) !important;
}

.preloader__logos.is-merging .preloader__logo--mat,
.preloader__logos.is-merging .preloader__logo--mat:hover {
  transform: translate(-50%, -50%) scale(1) !important;
}

@media (max-width: 768px) {
  .preloader__band {
    height: 25vh;
    gap: 4px;
  }
  .preloader__bands {
    gap: 4px;
  }
  .preloader__logos {
    gap: 1.5rem;
  }
  .preloader__logo {
    height: 38px;
  }
  .preloader__welcome {
    font-size: 0.8rem;
    padding: 0 1rem;
    text-align: center;
  }
  .preloader__logos.is-merging .preloader__logo--mbaa {
    transform: translateX(30px);
  }
  .preloader__logos.is-merging .preloader__logo--mdt {
    transform: translateX(-30px);
  }
}
@media (max-width: 480px) {
  .preloader__band {
    height: 22vh;
    gap: 3px;
  }
  .preloader__bands {
    gap: 3px;
  }
  .preloader__logos {
    gap: 1rem;
  }
  .preloader__logo {
    height: 30px;
  }
  .preloader__welcome {
    font-size: 0.7rem;
    padding: 0 0.75rem;
  }
  .preloader__label {
    font-size: 0.7rem;
  }
  .preloader__logos.is-merging .preloader__logo--mbaa {
    transform: translateX(22px);
  }
  .preloader__logos.is-merging .preloader__logo--mdt {
    transform: translateX(-22px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .preloader__band {
    animation: none;
  }
  .preloader, .preloader.is-leaving {
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .preloader__percent, .preloader__label, .preloader__brand,
  .preloader__welcome, .preloader__logo, .preloader__logos {
    transition: opacity 0.15s ease;
    transform: none;
  }
}
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 99999;
  padding: 0.75rem 1.5rem;
  background: var(--gold, #ae9a79);
  color: #000;
  font-family: var(--font-body, sans-serif);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #000;
  outline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--gold, #ae9a79);
  outline-offset: 3px;
  border-radius: 6px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.header__nav-link:focus-visible,
.header__nav-dropdown a:focus-visible {
  outline: 3px solid var(--gold, #ae9a79);
  outline-offset: 3px;
  border-radius: 6px;
}

button:focus-visible,
[role=button]:focus-visible {
  outline: 3px solid var(--gold, #ae9a79);
  outline-offset: 3px;
  border-radius: 6px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold, #ae9a79);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .header__container {
    transition: none !important;
    transform: none !important;
  }
  .swiper-wrapper {
    transition-duration: 0ms !important;
  }
}
@media (prefers-contrast: more) {
  :root {
    --gold: #6b5d45;
  }
  .header__nav-link,
  .footer__form-link,
  a {
    text-decoration: underline;
  }
  .header__nav-link--active {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  .hero__cta,
  .footer__button,
  button {
    border: 1.5px solid currentColor !important;
  }
}
.header__nav-item--dropdown .header__nav-dropdown-trigger[aria-expanded=true] + .header__nav-dropdown {
  display: block;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.audio-player__progress-bar {
  cursor: pointer;
}

.audio-player__progress-bar:focus-visible {
  outline: 3px solid var(--gold, #ae9a79);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#a11y-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero__pause {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.hero__pause:hover,
.hero__pause:focus-visible {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.8);
}

.preloader__skip {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 100001;
  padding: 0.6rem 1.2rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  font-family: var(--font-body, sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.preloader__skip.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.preloader__skip:hover,
.preloader__skip:focus-visible {
  background: rgba(0, 0, 0, 0.9);
  border-color: #fff;
}

.footer__form-error {
  display: block;
  min-height: 1.2em;
  font-size: 0.8rem;
  color: #e74c3c;
  margin-top: 0.25rem;
  font-family: var(--font-body, sans-serif);
}

.footer__form-error:empty {
  display: none;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal] {
  opacity: 1;
  transform: none;
}

.js [data-reveal=left] {
  transform: translateX(-30px);
}

.js [data-reveal=right] {
  transform: translateX(30px);
}

.js [data-reveal=scale] {
  transform: scale(0.92);
}

@media (min-width: 768px) {
  .js [data-reveal] {
    transform: translateY(35px);
  }
  .js [data-reveal=left] {
    transform: translateX(-45px);
  }
  .js [data-reveal=right] {
    transform: translateX(45px);
  }
  .js [data-reveal=scale] {
    transform: scale(0.88);
  }
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

[data-parallax] {
  will-change: auto;
}

@media (min-width: 1024px) {
  [data-parallax] {
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-parallax] {
    transform: none !important;
    will-change: auto !important;
  }
}
.main__explore-card-text {
  font-family: var(--font-body);
  text-align: center;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  line-height: 1.5;
  transition: all 0.3s ease;
  padding: 0 1rem;
  width: 100%;
  max-width: 600px;
}

@media (min-width: 768px) {
  .main__explore-card-text {
    padding: 0 1.5rem;
    font-size: 1.2rem;
  }
}
@media (min-width: 1024px) {
  .main__explore-card-text {
    padding: 0 2rem;
  }
}
.main__explore-button {
  margin: 1.5rem 1rem;
  display: flex;
  justify-content: center;
  align-content: center;
}

@media (min-width: 768px) {
  .main__explore-button {
    margin: 2rem 1.5rem;
  }
}
@media (min-width: 1024px) {
  .main__explore-button {
    margin: 2rem;
  }
}
.artist-gallery {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
}

.main_map-img {
  width: 50px;
  height: auto;
}

.main__map-section {
  margin: 1rem;
}

@media (min-width: 768px) {
  .main__map-section {
    margin: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .main__map-section {
    margin: 2rem;
    flex: 1;
    max-width: 50%;
    display: flex;
    flex-direction: column;
  }
}
.main__map-container {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 16px 5px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .main__map-container {
    height: 400px;
  }
}
@media (min-width: 1024px) {
  .main__map-container {
    flex: 1;
    height: auto;
    min-height: 300px;
  }
}
.main__map {
  width: 100%;
  height: 100%;
}

.main__map-header {
  margin-bottom: 2rem;
}

.leaflet-control-zoom {
  border: none !important;
}

.leaflet-control-zoom a {
  background-color: var(--gold) !important;
  color: #FFFDF3 !important;
  border: none !important;
  border-radius: 8px !important;
  margin-bottom: 8px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.leaflet-control-zoom a:hover {
  background-color: rgb(105, 89, 17) !important;
  transform: scale(1.05);
}

.leaflet-control-zoom a:last-child {
  margin-bottom: 0;
}

.gallery {
  padding: 0 0 4rem 0;
}

.img-container {
  width: 100%;
  cursor: pointer;
  overflow: hidden;
}

.img-container:hover .img-content-hover {
  display: block;
}

img {
  width: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: all 0.3s ease-in-out;
}

.img-content-hover {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  display: none;
  padding: 1rem;
  font-weight: 400;
  margin-top: 1.25rem;
  margin-left: -2rem;
}

.title {
  font-size: 1.5rem;
  font-weight: 700;
}

.category {
  font-size: 1rem;
}

.img-content {
  display: none;
}

.social, .copyright {
  margin: 1rem;
}

.social li {
  display: inline-block;
}

@supports (display: grid) {
  .gallery .grid {
    gap: 1rem;
  }
}
@media (min-width: 800px) {
  nav ul {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 1024px) {
  img:hover {
    transform: none;
  }
  .img-container {
    height: 100%;
  }
  .img-container:hover .img-content-hover {
    display: none;
  }
  .img-content {
    display: block;
    padding: 1rem 0;
  }
}
/* ── SECTION WRAPPER ── */
.gallery-section {
  max-width: 1360px;
  margin: 0 auto;
}

/* ── TOP BAR: LABEL + TOTAL ── */
.gallery-topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 2.5rem 0 1.5rem;
  margin-bottom: 2rem;
}

.gallery-topbar__label {
  font-family: var(--font-primary);
  font-size: 1.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #666666;
}

.gallery-topbar__count {
  font-family: var(--font-primary);
  font-size: 1.7rem;
  letter-spacing: 0.12em;
  color: #666666;
}

.gallery-topbar__count span {
  color: var(--black);
  font-weight: 500;
}

/* ── CONTROLS ROW ── */
.gallery-controls {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 0;
  overflow: visible;
  flex-wrap: wrap;
}

/* ── FILTER PILLS ── */
.gallery-filters {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 1rem;
}

.filter-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.9rem 1.3rem;
  background: none;
  border: none;
  border-right: 4px solid var(--rule);
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--black);
  letter-spacing: 0.02em;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

.filter-btn:hover {
  color: var(--black);
  background: white;
}

.filter-btn.active {
  color: var(--black);
  font-weight: 500;
  background: rgb(253, 253, 253);
}

.filter-btn.active .filter-arrow {
  transform: rotate(40deg);
}

/* SVG arrow — same as yours, just sized */
.filter-arrow {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #666666;
}

/* ── SEARCH ── */
.gallery-search {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.gallery-search__wrapper {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 999px;
  min-width: 220px;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.gallery-search__wrapper:focus-within {
  background: #1a1a1a;
  border-color: #1a1a1a;
}

.gallery-search__wrapper:focus-within .gallery-search__icon {
  color: #FFFDF3;
}

.gallery-search__wrapper:focus-within .gallery-search__input {
  color: #FFFDF3;
}

.gallery-search__wrapper:focus-within .gallery-search__input::placeholder {
  color: rgba(255, 253, 243, 0.5);
}

.gallery-search__icon {
  width: 14px;
  height: 14px;
  color: #1a1a1a;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.gallery-search__input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--black);
  flex: 1;
  min-width: 0;
}

.gallery-search__input::placeholder {
  color: #999;
}

.gallery-search__clear {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  color: inherit;
  transition: color 0.2s ease;
}

.gallery-search__clear svg {
  width: 14px;
  height: 14px;
}

.gallery-search input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: var(--black);
  width: 100%;
}

.gallery-search input::placeholder {
  color: #666666;
}

/* ── SUBFILTERS DRAWER ── */
.subfilters-drawer {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  background: transparent;
  margin-bottom: 1.5rem;
}

.subfilters-drawer.open {
  display: flex;
  padding: 0.875rem 0;
}

.subfilter-pill {
  padding: 0.35rem 0.95rem;
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 253, 243, 0.85);
  background: linear-gradient(rgba(255, 253, 243, 0.9), rgba(255, 253, 243, 0.9)) no-repeat bottom/100% 0%;
  border: 0.5px solid rgba(255, 253, 243, 0.3);
  border-radius: 999px;
  cursor: pointer;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease, border-color 0.35s ease;
  white-space: nowrap;
}

.subfilter-pill:hover {
  background-size: 100% 100%;
  color: #1a1a18;
  border-color: rgba(255, 253, 243, 0.6);
}

.subfilter-pill.active {
  background: linear-gradient(var(--gold), var(--gold)) no-repeat bottom/100% 100%;
  color: #FFFDF3;
  border-color: var(--gold);
}

.subfilters-label {
  padding: 0.45rem 0.75rem 0.45rem 0;
  font-family: var(--font-secondary);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 253, 243, 0.9);
  white-space: nowrap;
  margin-right: 0.25rem;
}

/* ── MASONRY GRID ── */
.gallery-grid {
  column-count: 1;
  column-gap: 1.5rem;
  margin-top: 0;
}

@media (min-width: 560px) {
  .gallery-grid {
    column-count: 2;
  }
}
@media (min-width: 900px) {
  .gallery-grid {
    column-count: 3;
  }
}
@media (min-width: 1200px) {
  .gallery-grid {
    column-count: 4;
  }
}
.gallery-item {
  break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: rgb(253, 253, 253);
  border-radius: 6px;
}

/* ─ image ─ */
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─ overlay ─ */
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 14, 12, 0.82) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
  pointer-events: none;
}

.gallery-item:hover .gallery-item__overlay {
  opacity: 1;
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item__title {
  font-family: "Playfair Display", serif;
  font-size: var(--fs-md);
  font-weight: 400;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}

.gallery-item__meta {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
}

/* ─ index badge ─ */
.gallery-item__index {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(15, 14, 12, 0.6);
  padding: 0.15rem 0.4rem;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s;
}

.gallery-item:hover .gallery-item__index {
  opacity: 1;
}

/* ─ badge musée ─ */
.gallery-item__musee-badge {
  position: absolute;
  bottom: 0.7rem;
  right: 0.7rem;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 3;
}

.gallery-item:hover .gallery-item__musee-badge {
  opacity: 1;
}

/* ─ hidden state ─ */
.gallery-item.hidden {
  display: none;
}

/* ─ intro line above grid ─ */
.gallery-grid-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0 1.2rem;
  margin-bottom: 1.5rem;
}

.gallery-grid-header__rule {
  flex: 1;
  height: 1px;
  background: rgba(255, 253, 243, 0.18);
  margin-left: 1.5rem;
}

.gallery-grid-header__tag {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #151515;
}

.gallery-grid-header__count {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: rgba(255, 253, 243, 0.6);
}

/* ── NO RESULT ── */
.gallery-empty {
  display: none;
  grid-column: 1/-1;
  text-align: center;
  padding: 5rem 2rem;
}

.gallery-empty.visible {
  display: block;
}

.gallery-empty p {
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-style: italic;
  color: rgba(255, 253, 243, 0.75);
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .gallery-section {
    padding: 0 1rem 3rem;
  }
  .gallery-search {
    min-width: 140px;
    font-size: 1rem;
  }
  .filter-btn {
    padding: 0.8rem 0.9rem;
    font-size: 1rem;
  }
}
.movements-table-section {
  padding: 4rem 2rem;
}

@media (min-width: 1024px) {
  .movements-table-section {
    padding: 5rem 3rem;
  }
}
.movements-table-container {
  max-width: 1400px;
  margin: 0 auto;
}

.movements-table-title {
  text-align: center;
  font-size: 2rem;
  color: var(--black);
  margin-bottom: 3rem;
  font-weight: 700;
  font-family: var(--font-primary);
}

@media (max-width: 768px) {
  .movements-table-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
}
.movements-table-wrapper {
  background-color: #ffffff;
  border-radius: 10px;
  overflow-x: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.movements-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.2rem;
  min-width: 800px;
}

.movements-table thead {
  background-color: var(--gold);
  color: #ffffff;
}

.movements-table th {
  padding: 1.2rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 3px solid var(--gold);
  font-family: var(--font-primary);
}

.movements-table th.period-col {
  width: 12%;
  min-width: 110px;
}

.movements-table th.movement-col {
  width: 18%;
  min-width: 140px;
}

.movements-table th.characteristics-col {
  width: 45%;
  min-width: 300px;
}

.movements-table th.artists-col {
  width: 25%;
  min-width: 200px;
}

.movements-table tbody tr {
  border-bottom: 1px solid #e8e8e8;
  transition: background-color 0.3s ease;
}

.movements-table tbody tr:hover {
  background-color: rgba(149, 126, 24, 0.08);
}

.movements-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.movements-table tbody tr:nth-child(even):hover {
  background-color: rgba(149, 126, 24, 0.12);
}

.movements-table td {
  padding: 1.2rem;
  vertical-align: top;
  font-family: var(--font-primary);
  line-height: 1.6;
}

.movements-table td strong {
  color: var(--black);
  font-weight: 700;
  font-size: 1rem;
  display: block;
  margin-bottom: 0.3rem;
}

@media (max-width: 768px) {
  .movements-table {
    font-size: 0.85rem;
  }
  .movements-table th,
  .movements-table td {
    padding: 0.8rem;
  }
}
.techniques-grid-section {
  padding: 4rem 2rem;
}

@media (min-width: 1024px) {
  .techniques-grid-section {
    padding: 5rem 3rem;
  }
}
.techniques-grid-container {
  max-width: 1400px;
  margin: 0 auto;
}

.techniques-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .techniques-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
  .techniques-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}
.technique-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/4;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.technique-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

@media (min-width: 1024px) {
  .technique-card {
    aspect-ratio: 4/4;
  }
}
.technique-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.technique-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.technique-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
}

.technique-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  z-index: 2;
  color: #ffffff;
}

@media (min-width: 1024px) {
  .technique-card-content {
    padding: 2.5rem;
  }
}
.technique-card-title {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
  font-family: var(--font-primary);
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .technique-card-title {
    font-size: 1.5rem;
  }
}
.technique-card-description {
  font-size: 1rem;
  color: #ffffff;
  margin: 0;
  line-height: 1.6;
  font-family: var(--font-primary);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  opacity: 0.95;
}

@media (min-width: 1024px) {
  .technique-card-description {
    font-size: 1.125rem;
  }
}
.pedagogical-elements-section {
  padding: 2rem 1rem;
  background-color: #ffffff;
  min-height: 100vh;
}

@media (min-width: 768px) {
  .pedagogical-elements-section {
    padding: 3rem 2rem;
  }
}
@media (min-width: 1024px) {
  .pedagogical-elements-section {
    padding: 4rem 2rem;
  }
}
.pedagogical-elements-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 1024px) {
  .pedagogical-elements-left {
    flex: 1;
  }
}
.pedagogical-element-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  width: 100%;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  min-height: 2.75rem;
  font-family: inherit;
}

@media (min-width: 768px) {
  .pedagogical-element-item {
    padding: 2rem 0;
  }
}
@media (min-width: 1024px) {
  .pedagogical-element-item {
    padding: 1.5rem 0;
  }
  .pedagogical-element-item:hover {
    opacity: 0.7;
  }
}
.pedagogical-element-item:active {
  opacity: 0.5;
}

/* is-active et active supportés (unification) */
.pedagogical-element-item.is-active .pedagogical-element-arrow,
.pedagogical-element-item.active .pedagogical-element-arrow,
.pedagogical-element-item.is-active img,
.pedagogical-element-item.active img {
  transform: rotate(90deg);
}

.pedagogical-element-text {
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  font-weight: 300;
  color: var(--black);
  font-family: var(--font-primary);
  letter-spacing: -0.04em;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .pedagogical-element-text {
    font-size: clamp(1.5rem, 4.5vw, 2rem);
  }
}
@media (min-width: 1024px) {
  .pedagogical-element-text {
    font-size: 2rem;
  }
}
.pedagogical-element-arrow,
.pedagogical-element-item img {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--black);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  transform-origin: center;
}

.pedagogical-element-separator {
  width: 100%;
  height: 2px;
  background-color: var(--black);
  margin: 0;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .pedagogical-element-separator {
    height: 1px;
  }
}
/* Panel accordéon — partagé entre fiche oeuvre et compositions Gutenberg */
.mbaa-accordeon-panel {
  padding: 0.75rem 0 1.25rem;
  font-size: var(--fs-md);
  line-height: 1.75;
  color: #555;
  font-family: var(--font-primary);
  animation: mbaa-panel-in 0.25s ease;
}

@keyframes mbaa-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.pedagogical-elements-right {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .pedagogical-elements-right {
    flex: 1;
    margin-top: 0;
  }
}
.pedagogical-painting {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

@media (min-width: 768px) {
  .pedagogical-painting {
    border-radius: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .pedagogical-painting {
    max-width: 100%;
    border-radius: 0.5rem;
  }
}
.art-appreciation-section {
  padding: 4rem 2rem;
  background-color: #ffffff;
}

@media (min-width: 1024px) {
  .art-appreciation-section {
    padding: 5rem 3rem;
  }
}
.art-appreciation-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .art-appreciation-container {
    flex-direction: row;
    align-items: flex-start;
    gap: 4rem;
  }
}
.art-appreciation-left {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1024px) {
  .art-appreciation-left {
    flex: 0 0 45%;
  }
}
.art-appreciation-painting {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

@media (min-width: 1024px) {
  .art-appreciation-painting {
    max-width: 500px;
  }
}
.art-appreciation-right {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .art-appreciation-right {
    flex: 0 0 55%;
    gap: 3rem;
  }
}
.art-appreciation-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.art-appreciation-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
  font-family: var(--font-primary);
  margin: 0;
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .art-appreciation-title {
    font-size: 1.75rem;
  }
}
.art-appreciation-text {
  font-size: 1rem;
  font-weight: 400;
  color: var(--black);
  font-family: var(--font-primary);
  margin: 0;
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .art-appreciation-text {
    font-size: 1.125rem;
  }
}
.bibliotheque {
  width: 100%;
}

.bibliotheque__banner {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  gap: 1.5rem;
  background-color: var(--gold);
  color: #FFFDF3;
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 100%;
  box-sizing: border-box;
  margin: 5rem 0rem 5rem 0rem;
}

@media (min-width: 768px) {
  .bibliotheque__banner {
    max-width: 95%;
    padding: clamp(2rem, 5vw, 3.5rem);
  }
}
@media (min-width: 1024px) {
  .bibliotheque__banner {
    max-width: 90%;
    padding: 3rem 3.5rem;
  }
}
@media (min-width: 1600px) {
  .bibliotheque__banner {
    max-width: 85%;
    padding: 3.5rem 4rem;
  }
}
.bibliotheque__banner-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .bibliotheque__banner-header {
    flex-direction: column;
    gap: 1rem;
  }
}
.bibliotheque__banner-icon {
  width: clamp(32px, 5vw, 48px);
  height: clamp(32px, 5vw, 48px);
  flex-shrink: 0;
  margin-top: 0.25rem;
  filter: brightness(0) invert(1);
}

.bibliotheque__banner-content {
  flex: 1;
}

.bibliotheque__banner-title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin: 0 0 1rem 0;
  color: #FFFDF3;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .bibliotheque__banner-title {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
  }
}
@media (min-width: 1024px) {
  .bibliotheque__banner-title {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
  }
}
.bibliotheque__banner-subtitle {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  color: #FFFDF3;
  margin: 0;
  opacity: 0.95;
}

.bibliotheque__banner-description {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 2vw, 1rem);
  line-height: 1.5;
  color: #FFFDF3;
  margin-top: 1rem;
  opacity: 0.95;
  max-width: 800px;
}

.bibliotheque__search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 3vw, 1.5rem);
  background-color: rgba(255, 253, 243, 0.15);
  color: var(--gold);
  border-radius: 10px;
  width: 100%;
  transition: all 0.3s ease;
}

.bibliotheque__search:hover, .bibliotheque__search:focus-within {
  background-color: rgba(149, 126, 24, 0.2);
  border-color: rgba(255, 253, 243, 0.5);
}

@media (min-width: 768px) {
  .bibliotheque__search {
    width: auto;
    min-width: 350px;
    max-width: 450px;
  }
}
.bibliotheque__search-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gold);
  opacity: 0.8;
}

.bibliotheque__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: 1rem;
  font-family: var(--font-primary);
  color: var(--gold);
}

.bibliotheque__search-input::placeholder {
  color: var(--gold);
}

.bibliotheque__filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: clamp(0.75rem, 2vw, 1.5rem) 0;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 768px) {
  .bibliotheque__filters {
    gap: 1rem;
    padding: clamp(1rem, 2.5vw, 1.5rem) 0;
    margin-bottom: clamp(2rem, 5vw, 3rem);
  }
}
.bibliotheque__filter-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background-color: transparent;
  border: 1.5px solid rgba(25, 25, 25, 0.6);
  border-radius: 6px;
  color: var(--black);
  font-family: var(--font-primary);
  font-size: clamp(0.8125rem, 1.5vw, 1.2rem);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.bibliotheque__filter-btn:hover {
  background-color: var(--gold);
  border-color: #FFFDF3;
  transform: translateY(-2px);
  color: #FFFDF3;
}

.bibliotheque__filter-btn.active {
  background-color: var(--gold);
  color: #FFFDF3;
  border-color: var(--gold);
}

.bibliotheque__filter-btn.active:hover {
  background-color: var(--black);
}

@media (min-width: 768px) {
  .bibliotheque__filter-btn {
    padding: 0.875rem 1.75rem;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
  }
}
.bibliotheque__filter-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.bibliotheque__filter-btn.active .bibliotheque__filter-icon {
  filter: none;
}

.bibliotheque__grid-container {
  max-width: 1400px;
  margin: 0 auto;
}

.bibliotheque__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  animation: fadeIn 0.4s ease;
}

@media (min-width: 768px) {
  .bibliotheque__grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem 2rem;
  }
}
@media (min-width: 1024px) {
  .bibliotheque__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}
@media (min-width: 1600px) {
  .bibliotheque__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
.bibliotheque__grid-item {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.4s ease;
  display: block;
  aspect-ratio: 1;
}

.bibliotheque__grid-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

.bibliotheque__grid-item:hover img {
  transform: scale(1.08);
  filter: grayscale(0%);
}

.bibliotheque__grid-item:hover .bibliotheque__grid-info {
  opacity: 1;
  transform: translateY(0);
}

.bibliotheque__grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: grayscale(30%);
}

.bibliotheque__grid-item.hidden {
  display: none;
}

.bibliotheque__grid-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(25, 25, 25, 0.3) 100%);
  pointer-events: none;
  transition: background 0.4s ease;
}

.bibliotheque__grid-item:hover::after {
  background: linear-gradient(to bottom, transparent 30%, rgba(149, 126, 24, 0.7) 100%);
}

.bibliotheque__grid-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: linear-gradient(to top, rgba(149, 126, 24, 0.95), rgba(149, 126, 24, 0.7));
  color: #FFFDF3;
  opacity: 1;
  transition: all 0.4s ease;
  transform: translateY(0);
}

.bibliotheque__grid-info h3 {
  margin: 0 0 0.5rem 0;
  font-family: var(--font-primary);
  font-size: clamp(0.9375rem, 2vw, 1.1rem);
  font-weight: 600;
  color: #FFFDF3;
  line-height: 1.3;
}

.bibliotheque__grid-info p {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  color: rgba(255, 253, 243, 0.9);
  line-height: 1.4;
}

.bibliotheque__no-results {
  grid-column: 1/-1;
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem);
  color: rgba(255, 253, 243, 0.7);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.bibliotheque__no-results p {
  margin: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 767px) {
  .bibliotheque__banner {
    padding: 1.5rem;
  }
  .bibliotheque__banner-header {
    flex-direction: column;
  }
  .bibliotheque__search {
    width: 100%;
    min-width: auto;
  }
  .bibliotheque__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .bibliotheque__grid-item {
    aspect-ratio: 1;
  }
}
@media (max-width: 479px) {
  .bibliotheque__grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .bibliotheque__grid-item {
    border-radius: 6px;
  }
  .bibliotheque__grid-info {
    padding: 0.75rem;
  }
  .bibliotheque__grid-info h3 {
    font-size: 0.8125rem;
  }
  .bibliotheque__grid-info p {
    font-size: 0.6875rem;
  }
}
.pedagogical-table-section {
  padding: 4rem 2rem;
  background-color: #f5f5f5;
}

@media (min-width: 1024px) {
  .pedagogical-table-section {
    padding: 5rem 3rem;
  }
}
.pedagogical-table-section h2 {
  text-align: center;
  font-size: 2rem;
  color: var(--black);
  margin-bottom: 3rem;
  font-weight: 700;
}

.pedagogical-table-container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.pedagogical-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.2rem;
}

.pedagogical-table thead {
  background-color: var(--gold);
  color: #ffffff;
}

.pedagogical-table th {
  padding: 1.2rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 3px solid var(--gold);
}

.pedagogical-table th.period-col {
  width: 12%;
  min-width: 110px;
}

.pedagogical-table th.movement-col {
  width: 18%;
  min-width: 140px;
}

.pedagogical-table th.characteristics-col {
  width: 45%;
  min-width: 300px;
}

.pedagogical-table th.artists-col {
  width: 25%;
  min-width: 200px;
}

.pedagogical-table tbody tr {
  border-bottom: 1px solid #e8e8e8;
  transition: background-color 0.3s ease;
}

.pedagogical-table tbody tr:hover {
  background-color: rgba(149, 126, 24, 0.08);
}

.pedagogical-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.pedagogical-table tbody tr:nth-child(even):hover {
  background-color: rgba(149, 126, 24, 0.12);
}

.pedagogical-table td {
  padding: 1.2rem;
  vertical-align: top;
  line-height: 1.6;
  color: var(--black);
}

.pedagogical-table td.period-cell {
  font-weight: 600;
  background-color: rgba(149, 126, 24, 0.15);
  color: var(--gold);
  text-align: center;
  border-left: 4px solid var(--gold);
}

.pedagogical-table td.movement-cell {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold);
}

.pedagogical-table td.movement-cell strong {
  color: var(--gold);
}

.pedagogical-table td.artists-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.artist {
  display: inline-block;
  background-color: rgba(149, 126, 24, 0.1);
  color: var(--gold);
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 500;
  border: 1px solid rgba(149, 126, 24, 0.3);
  white-space: nowrap;
  transition: all 0.3s ease;
}

.artist:hover {
  background-color: rgba(149, 126, 24, 0.2);
  border-color: rgba(149, 126, 24, 0.5);
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .pedagogical-table {
    font-size: 0.85rem;
  }
  .pedagogical-table th,
  .pedagogical-table td {
    padding: 0.9rem;
  }
  .pedagogical-table th.characteristics-col {
    display: none;
  }
  .pedagogical-table td:nth-child(3) {
    display: none;
  }
}
@media (max-width: 768px) {
  .pedagogical-table-section {
    padding: 2rem 1rem;
  }
  .pedagogical-table-section h2 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
  .pedagogical-table {
    font-size: 0.75rem;
  }
  .pedagogical-table th,
  .pedagogical-table td {
    padding: 0.7rem;
  }
  .pedagogical-table th.artists-col {
    display: none;
  }
  .pedagogical-table td:nth-child(4) {
    display: none;
  }
  .artist {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}
.horizontal-timeline-section {
  padding: 4rem 1.5rem;
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .horizontal-timeline-section {
    padding: 5rem 3rem;
  }
}
@media (min-width: 1024px) {
  .horizontal-timeline-section {
    padding: 6rem 4rem;
  }
}
.horizontal-timeline-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}

.horizontal-timeline-section h2 {
  text-align: center;
  font-size: 2rem;
  color: var(--black);
  margin-bottom: 1rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .horizontal-timeline-section h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }
}
.horizontal-timeline-section > p {
  text-align: center;
  color: #888;
  margin-bottom: 3rem;
  font-size: 1.2rem;
}

@media (min-width: 768px) {
  .horizontal-timeline-section > p {
    margin-bottom: 4rem;
  }
}
.horizontal-timeline-wrapper {
  max-width: 100%;
  position: relative;
}

.horizontal-timeline-wrapper::before {
  content: "← Swipe →";
  position: absolute;
  bottom: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 600;
  opacity: 0.6;
  white-space: nowrap;
  letter-spacing: 1px;
}

@media (min-width: 768px) {
  .horizontal-timeline-wrapper::before {
    display: none;
  }
}
.horizontal-timeline-track {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  margin: 0;
}

@media (min-width: 768px) {
  .horizontal-timeline-track {
    gap: 2rem;
    padding: 1.5rem 0;
  }
}
.horizontal-timeline-track::-webkit-scrollbar {
  height: 8px;
  margin-top: 1rem;
}

.horizontal-timeline-track::-webkit-scrollbar-track {
  background: rgba(149, 126, 24, 0.08);
  border-radius: 10px;
  margin: 0 1rem;
}

.horizontal-timeline-track::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--gold));
  border-radius: 10px;
  transition: all 0.3s ease;
}

.horizontal-timeline-track::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gold), var(--gold));
  box-shadow: 0 0 8px rgba(149, 126, 24, 0.3);
}

.horizontal-timeline-item {
  position: relative;
  flex: 0 0 calc(100vw - 3rem);
  scroll-snap-align: start;
  scroll-snap-stop: auto;
}

@media (min-width: 640px) {
  .horizontal-timeline-item {
    flex: 0 0 320px;
  }
}
@media (min-width: 768px) {
  .horizontal-timeline-item {
    flex: 0 0 360px;
  }
}
@media (min-width: 1024px) {
  .horizontal-timeline-item {
    flex: 0 0 420px;
  }
}
.timeline-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold));
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  top: 0;
  left: 1.75rem;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(149, 126, 24, 0.3), inset 0 0 0 3px var(--gold);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 768px) {
  .timeline-dot {
    width: 18px;
    height: 18px;
    border-width: 4px;
    left: 1.9rem;
    box-shadow: 0 4px 12px rgba(149, 126, 24, 0.4), inset 0 0 0 4px var(--gold);
  }
}
.timeline-card {
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  padding: 1.5rem;
  padding-left: 3.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-left: 4px solid var(--gold);
  border-top: 1px solid rgba(149, 126, 24, 0.2);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .timeline-card {
    padding: 2rem;
    padding-left: 3.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    min-height: 280px;
  }
}
.timeline-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 100% 0%, rgba(149, 126, 24, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.timeline-card:hover {
  box-shadow: 0 12px 32px rgba(149, 126, 24, 0.2), 0 0 24px rgba(149, 126, 24, 0.1);
  transform: translateY(-8px);
  border-top-color: rgba(149, 126, 24, 0.4);
}

.timeline-card:hover .timeline-dot {
  width: 20px;
  height: 20px;
  box-shadow: 0 6px 16px rgba(149, 126, 24, 0.5), inset 0 0 0 4px var(--gold);
  background: linear-gradient(135deg, var(--gold), var(--gold));
  left: 1.6rem;
}

@media (min-width: 768px) {
  .timeline-card:hover .timeline-dot {
    width: 24px;
    height: 24px;
    left: 1.7rem;
    box-shadow: 0 8px 20px rgba(149, 126, 24, 0.5), inset 0 0 0 5px var(--gold);
  }
}
.timeline-period {
  display: inline-block;
  background: linear-gradient(135deg, rgba(149, 126, 24, 0.12), rgba(149, 126, 24, 0.05));
  color: var(--gold);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  letter-spacing: 1px;
  width: fit-content;
  border: 1px solid rgba(149, 126, 24, 0.25);
  text-transform: uppercase;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .timeline-period {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
  }
}
.timeline-card:hover .timeline-period {
  background: linear-gradient(135deg, rgba(149, 126, 24, 0.2), rgba(149, 126, 24, 0.1));
  border-color: rgba(149, 126, 24, 0.4);
  transform: scale(1.05);
}

.timeline-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--black);
  margin: 0.8rem 0 1rem;
  line-height: 1.35;
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .timeline-title {
    font-size: 1.35rem;
    margin: 0.8rem 0 1.2rem;
  }
}
.timeline-card:hover .timeline-title {
  color: var(--gold);
}

.timeline-description {
  color: #666;
  font-size: var(--fs-base);
  line-height: 1.7;
  margin: 0;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

@media (min-width: 768px) {
  .timeline-description {
    font-size: 1.2rem;
    line-height: 1.8;
  }
}
.timeline-card:hover .timeline-description {
  color: #444;
}

@keyframes slideInHorizontal {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}
.horizontal-timeline-item {
  animation: slideInHorizontal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.horizontal-timeline-item:nth-child(1) {
  animation-delay: 0.12s;
}

.horizontal-timeline-item:nth-child(2) {
  animation-delay: 0.24s;
}

.horizontal-timeline-item:nth-child(3) {
  animation-delay: 0.36s;
}

.horizontal-timeline-item:nth-child(4) {
  animation-delay: 0.48s;
}

.horizontal-timeline-item:nth-child(5) {
  animation-delay: 0.6s;
}

.horizontal-timeline-item:nth-child(6) {
  animation-delay: 0.72s;
}

.horizontal-timeline-item:nth-child(7) {
  animation-delay: 0.84s;
}

.horizontal-timeline-item:nth-child(8) {
  animation-delay: 0.96s;
}

.horizontal-timeline-item:nth-child(9) {
  animation-delay: 1.08s;
}

.horizontal-timeline-item:nth-child(10) {
  animation-delay: 1.2s;
}

.horizontal-timeline-item:nth-child(11) {
  animation-delay: 1.32s;
}

.horizontal-timeline-item:nth-child(12) {
  animation-delay: 1.44s;
}

.horizontal-timeline-item:nth-child(13) {
  animation-delay: 1.56s;
}

.horizontal-timeline-item:nth-child(14) {
  animation-delay: 1.68s;
}

.horizontal-timeline-item:nth-child(15) {
  animation-delay: 1.8s;
}

.horizontal-timeline-item:hover {
  animation: float 3s ease-in-out infinite;
}

.pedagogical-timeline-section {
  padding: 6rem 2rem;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .pedagogical-timeline-section {
    padding: 8rem 4rem;
  }
}
@media (min-width: 1024px) {
  .pedagogical-timeline-section {
    padding: 10rem 6rem;
  }
}
.pedagogical-timeline-section h2 {
  text-align: center;
  font-size: 1.8rem;
  color: var(--black);
  margin-bottom: 1rem;
  font-weight: 400;
  letter-spacing: -0.8px;
}

@media (min-width: 768px) {
  .pedagogical-timeline-section h2 {
    font-size: 2.8rem;
    font-weight: 400;
  }
}
.pedagogical-timeline-section > p {
  text-align: center;
  color: #666666;
  margin-bottom: 5rem;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .pedagogical-timeline-section > p {
    margin-bottom: 6rem;
    font-size: 1rem;
  }
}
.timeline-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e5e5e5;
  transform: translateX(-50%);
  display: none;
}

@media (min-width: 1024px) {
  .timeline-line {
    display: block;
  }
}
.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 4rem;
}

@media (min-width: 1024px) {
  .timeline-item {
    margin-bottom: 7rem;
  }
  .timeline-item:nth-child(odd) {
    flex-direction: row;
    text-align: right;
  }
  .timeline-item:nth-child(odd) .timeline-content {
    margin-right: 5rem;
    margin-left: 0;
  }
  .timeline-item:nth-child(even) {
    flex-direction: row-reverse;
  }
  .timeline-item:nth-child(even) .timeline-content {
    margin-left: 5rem;
    margin-right: 0;
  }
}
.timeline-item::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--black);
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 0 0 2px #e5e5e5;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 1024px) {
  .timeline-item::before {
    width: 14px;
    height: 14px;
    border-width: 3px;
    box-shadow: 0 0 0 3px #e5e5e5;
  }
}
.timeline-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4rem;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .timeline-item::after {
    display: block;
    height: 7rem;
  }
}
@media (min-width: 1024px) {
  .timeline-item:nth-child(odd)::after {
    border-left: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-bottom-left-radius: 50px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}
@media (min-width: 1024px) {
  .timeline-item:nth-child(even)::after {
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-bottom-right-radius: 50px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}
.timeline-item:hover::before {
  width: 18px;
  height: 18px;
  background: var(--gold);
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px #e5e5e5;
}

@media (min-width: 1024px) {
  .timeline-item:hover::before {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 5px #ffffff, 0 0 0 6px #e5e5e5;
  }
}
.timeline-item:hover .timeline-content {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

@media (min-width: 1024px) {
  .timeline-item:nth-child(odd):hover::after {
    border-left-color: #999999;
    border-bottom-color: #999999;
  }
}
@media (min-width: 1024px) {
  .timeline-item:nth-child(even):hover::after {
    border-right-color: #999999;
    border-bottom-color: #999999;
  }
}
.timeline-content {
  background: #ffffff;
  padding: 2rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex: 1;
  margin-left: 2.5rem;
  border-left: 1px solid #e5e5e5;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .timeline-content {
    flex: 0 1 45%;
    padding: 3rem;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-left: 3rem;
  }
}
.timeline-content:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-left-color: var(--gold);
}

.timeline-period {
  display: inline-block;
  background: transparent;
  color: #999999;
  padding: 0;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  margin-bottom: 1.2rem;
  letter-spacing: 2px;
  border: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .timeline-period {
    font-size: 0.75rem;
    padding: 0;
  }
}
.timeline-content:hover .timeline-period {
  color: var(--gold);
}

.timeline-title {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--black);
  margin: 0 0 1.5rem;
  line-height: 1.4;
  letter-spacing: -0.5px;
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .timeline-title {
    font-size: 1.6rem;
    margin: 0 0 1.8rem;
  }
}
.timeline-content:hover .timeline-title {
  color: var(--gold);
}

.timeline-characteristics {
  color: #666666;
  font-size: var(--fs-md);
  line-height: 1.8;
  margin: 0;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .timeline-characteristics {
    font-size: 1.2rem;
    line-height: 1.8;
  }
}
.timeline-content:hover .timeline-characteristics {
  color: #444444;
}

.timeline-artists {
  margin-top: 1.2rem;
}

.timeline-artists .artist-label {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.8rem;
}

.artists-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (min-width: 1024px) {
  .artists-badges {
    gap: 0.8rem;
  }
}
.artist {
  display: inline-block;
  background-color: #f0f0f0;
  color: var(--black);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

@media (min-width: 1024px) {
  .artist {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
}
.artist:hover {
  background-color: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
  transform: scale(1.05);
}

@keyframes slideInTimeline {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.timeline-item {
  animation: slideInTimeline 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.timeline-item:nth-child(1) {
  animation-delay: 0.12s;
}

.timeline-item:nth-child(2) {
  animation-delay: 0.24s;
}

.timeline-item:nth-child(3) {
  animation-delay: 0.36s;
}

.timeline-item:nth-child(4) {
  animation-delay: 0.48s;
}

.timeline-item:nth-child(5) {
  animation-delay: 0.6s;
}

.timeline-item:nth-child(6) {
  animation-delay: 0.72s;
}

.timeline-item:nth-child(7) {
  animation-delay: 0.84s;
}

.timeline-item:nth-child(8) {
  animation-delay: 0.96s;
}

.timeline-item:nth-child(9) {
  animation-delay: 1.08s;
}

.timeline-item:nth-child(10) {
  animation-delay: 1.2s;
}

.timeline-item:nth-child(11) {
  animation-delay: 1.32s;
}

.timeline-item:nth-child(12) {
  animation-delay: 1.44s;
}

.timeline-item:nth-child(13) {
  animation-delay: 1.56s;
}

.timeline-item:nth-child(14) {
  animation-delay: 1.68s;
}

.timeline-item:nth-child(15) {
  animation-delay: 1.8s;
}

.event-calendar-section {
  padding: 2rem 1rem;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .event-calendar-section {
    padding: 3rem 2rem;
  }
}
@media (min-width: 1024px) {
  .event-calendar-section {
    padding: 4rem;
  }
}
.event-calendar-container {
  max-width: 80rem;
  margin: 0 auto;
}

/* ── Ancien .calendar-filter-bar supprimé — remplacé par calendar-filters.css ── */
/* ── Layout principal : filtres à gauche + grille à droite ── */
.calendar-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .calendar-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
  }
  /* Sidebar masquée sur desktop : le calendrier prend toute la largeur */
  .calendar-sidebar {
    display: none;
  }
  /* Filtres en sidebar : forcer le layout vertical même au-delà de 768px */
  .calendar-layout .calendar-filters {
    position: sticky;
    top: 100px;
    margin-bottom: 0;
  }
  .calendar-layout .calendar-filters__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .calendar-layout .calendar-filters__separator {
    width: 100%;
    height: 1px;
    margin: 0.25rem 0;
  }
  .calendar-layout .calendar-filters__pills {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .calendar-layout .calendar-filters__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .calendar-layout .calendar-filters__view-toggle {
    margin-left: 0;
    align-self: flex-start;
  }
  .calendar-layout .calendar-filters__summary {
    order: -1;
  }
}
.event-calendar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
}

@media (min-width: 768px) {
  .event-calendar-grid {
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
  .event-calendar-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
  }
}
/* Sidebar */
.calendar-sidebar {
  width: 100%;
  order: 2;
}

@media (min-width: 1024px) {
  .calendar-sidebar {
    grid-column: span 4;
    order: 1;
  }
}
/* ── Ancien .filter-group/.filter-pill supprimé — remplacé par calendar-filters.css ── */
.events-preview {
  margin-top: 2rem;
  width: 100%;
}

.events-preview-title {
  font-family: var(--font-primary);
  font-size: 1.375rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 1rem 0;
}

.events-list-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-height: none;
  overflow-y: visible;
}

.event-preview-card {
  font-family: var(--font-primary);
  color: #ffffff;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  gap: 1rem;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex: 1 1 260px;
  max-width: 340px;
}

.event-preview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.event-preview-card .event-date-box {
  background-color: #ffffff;
  color: #111827;
  border-radius: 10px;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.event-preview-card .event-date-box .event-month-abbr {
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b7280;
  line-height: 1;
  letter-spacing: 0.05em;
}

.event-preview-card .event-date-box .event-day-number {
  font-family: var(--font-primary);
  font-size: 1.375rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}

.event-preview-card .event-details {
  min-width: 0;
}

.event-preview-card .event-details .event-title {
  display: block;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-preview-card .event-details .event-type-tag {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 0.2rem 0.65rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Main Content (Calendar) */
.calendar-main-content {
  width: 100%;
  order: 1;
}

@media (min-width: 1024px) {
  .calendar-main-content {
    grid-column: span 8;
    order: 2;
  }
}
.calendar-card {
  background-color: #ffffff;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .calendar-card {
    padding: 2rem;
  }
}
.calendar-nav-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  gap: 2rem;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .calendar-nav-header {
    margin-bottom: 2rem;
    flex-wrap: nowrap;
  }
}
.calendar-nav-header .nav-arrow-btn {
  padding: 0.5rem;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.calendar-nav-header .nav-arrow-btn:hover {
  background-color: #f3f4f6;
}

.calendar-nav-header .nav-arrow-btn i {
  width: 24px;
  height: 24px;
}

.calendar-nav-header .calendar-current-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #111827;
  margin: 0;
  text-transform: none;
  line-height: 1.2;
  letter-spacing: normal;
}

@media (min-width: 768px) {
  .calendar-nav-header .calendar-current-title {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  }
}
@media (min-width: 1024px) {
  .calendar-nav-header .calendar-current-title {
    font-size: 2.25rem;
  }
}
.calendar-weekdays-grid {
  display: grid;
  font-family: var(--font-primary);
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .calendar-weekdays-grid {
    gap: 1rem;
  }
}
.calendar-weekdays-grid div {
  text-align: center;
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .calendar-weekdays-grid div {
    font-size: 1rem;
  }
}
.calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  min-width: 0;
}

@media (min-width: 768px) {
  .calendar-days-grid {
    gap: 1rem;
  }
}
.calendar-day-empty {
  background: transparent;
  border: none;
  pointer-events: none;
  aspect-ratio: 1;
}

.calendar-day-cell {
  border-radius: 12px;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s;
  aspect-ratio: 1;
}

.calendar-day-cell.has-event {
  border-radius: 14px;
  cursor: pointer;
}

.calendar-day-cell.has-event:hover {
  transform: scale(1.05);
  z-index: 10;
}

.calendar-day-cell.has-event .day-number {
  color: #ffffff;
}

.calendar-day-cell.is-today:not(.has-event) .day-number {
  color: #111827;
  text-decoration: underline;
}

.calendar-day-cell .day-number {
  font-family: var(--font-primary);
  font-size: clamp(0.75rem, 2.5vw, 1.125rem);
  font-weight: 600;
  color: #9ca3af;
  line-height: 1;
}

.calendar-day-cell .event-indicator {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(4px, 1vw, 6px);
  height: clamp(4px, 1vw, 6px);
  background-color: #eab308;
  border-radius: 50%;
}

/* Event specific colors */
.bg-yellow-700 {
  background-color: #a16207;
}

.bg-gray-600 {
  background-color: #4b5563;
}

.bg-indigo-950 {
  background-color: #1e1b4b;
}

.bg-gray-800 {
  background-color: #1f2937;
}

.bg-gray-700 {
  background-color: #374151;
}

.calendar-main-content {
  min-width: 0;
  box-sizing: border-box;
}

.calendar-card {
  min-width: 0;
  box-sizing: border-box;
}

.calendar-days-grid,
.calendar-weekdays-grid {
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}

@media (min-width: 480px) {
  .calendar-days-grid,
  .calendar-weekdays-grid {
    gap: 0.375rem;
  }
}
@media (min-width: 768px) {
  .calendar-days-grid,
  .calendar-weekdays-grid {
    gap: 0.75rem;
  }
}
.calendar-day-cell {
  padding-top: 100%;
  height: auto;
  min-height: unset;
  position: relative;
  box-sizing: border-box;
}

.calendar-day-cell .day-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.6rem, 2.5vw, 1.125rem);
  line-height: 1;
}

.calendar-day-cell.has-event .day-number {
  top: 40%;
}

.calendar-day-cell .event-indicator {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
}

.calendar-day-empty {
  padding-top: 100%;
  height: auto;
  min-height: unset;
}

.calendar-weekdays-grid div {
  font-size: clamp(0.55rem, 2vw, 0.875rem);
  padding: 0.25rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-nav-header {
  gap: 0.5rem;
  flex-wrap: nowrap;
  margin-bottom: 0.75rem;
}

.calendar-nav-header .calendar-current-title {
  font-size: clamp(1rem, 4vw, 2.25rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  flex: 1;
}

.calendar-nav-header .nav-arrow-btn {
  flex-shrink: 0;
  padding: 0.4rem 0.65rem;
  border: 1.5px solid rgba(28, 27, 26, 0.25);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.calendar-nav-header .nav-arrow-btn:hover {
  border-color: rgba(28, 27, 26, 0.6);
  background: rgba(28, 27, 26, 0.05);
}

.calendar-nav-header .nav-arrow-btn i, .calendar-nav-header .nav-arrow-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.calendar-sidebar {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.view-toggle {
  width: 100%;
  box-sizing: border-box;
}

.view-toggle .toggle-btn {
  flex: 1;
  justify-content: center;
}

.events-list__empty {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  color: #9ca3af;
  text-align: center;
  padding: 2rem 1rem;
  margin: 0;
}

/* Fond modal — clic sur un jour du calendrier */
.calendar-day-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(28, 27, 26, 0.55);
  backdrop-filter: blur(4px);
  animation: calendar-popup-fade 0.2s ease;
}

body.calendar-day-popup-open {
  overflow: hidden;
}

@keyframes calendar-popup-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.calendar-day-popup {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 100;
  padding: 1.25rem;
  font-family: var(--font-primary);
}

.calendar-day-popup--modal {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  max-width: 420px;
  max-height: min(85vh, 560px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  animation: calendar-popup-slide 0.25s ease;
}

@keyframes calendar-popup-slide {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.calendar-day-popup--modal .calendar-day-popup__header {
  padding: 1.25rem 1.25rem 0.75rem;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.calendar-day-popup__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
}

.calendar-day-popup__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.calendar-day-popup__cards {
  overflow-y: auto;
  padding: 0.75rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.calendar-day-popup__card {
  padding: 1rem;
  border-radius: 12px;
  background: #f9fafb;
}

.calendar-day-popup__card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}

.calendar-day-popup__card-titles {
  flex: 1;
  min-width: 0;
}

.calendar-day-popup__badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.25rem;
}

.calendar-day-popup__type {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 0.15rem;
}

.calendar-day-popup__card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}

.calendar-day-popup__desc {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #4b5563;
}

.calendar-day-popup__meta {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.calendar-day-popup__meta-item {
  font-size: 0.8125rem;
  color: #6b7280;
  padding-left: 1.1rem;
  position: relative;
}

.calendar-day-popup__meta-item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold, #ae9a79);
}

.calendar-day-popup__meta-item--time::before {
  content: "🕐";
  font-size: 0.7rem;
}

.calendar-day-popup__meta-item--place::before {
  content: "📍";
  font-size: 0.7rem;
}

.calendar-day-popup__meta-item--public::before {
  content: "👥";
  font-size: 0.7rem;
}

.calendar-day-popup__meta-item--price::before {
  content: "€";
  font-weight: 700;
}

.calendar-day-popup__card-actions {
  display: flex;
  justify-content: flex-end;
}

.calendar-day-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.calendar-day-popup__header strong {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}

.calendar-day-popup__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #6b7280;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: background-color 0.15s;
}

.calendar-day-popup__close:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.calendar-day-popup__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.calendar-day-popup__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.calendar-day-popup__item div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.calendar-day-popup__item div strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-day-popup__item div span {
  font-size: 0.8125rem;
  color: #6b7280;
}

.calendar-day-popup__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.calendar-day-popup__price {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111827 !important;
}

.calendar-day-popup__btn {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  background-color: #111827;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s;
}

.calendar-day-popup__btn:hover {
  background-color: #374151;
}

/* ── Actualités dans le calendrier ─────────────────────────────────── */
/* Dot couleur pour les actualités dans la grille du calendrier */
.calendar-event-dot--actualite {
  background-color: var(--gold, #c9a84c) !important;
}

/* Badge "Actualité" dans la sidebar liste */
.event-list-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.event-list-badge--actu {
  background-color: var(--gold, #c9a84c);
  color: #fff;
}

/* Item actualité dans la sidebar */
.event-list-item--actu {
  padding-left: 0.5rem;
}

/* Lien cliquable sur le titre d'une actualité */
.event-list-title-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

.event-list-title-link:hover {
  color: var(--gold, #c9a84c);
}

.event-list-title-link h4 {
  margin: 0;
}

/* Badge dans la modale */
.modal-event-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}

.modal-event-badge--actu {
  background-color: var(--gold, #c9a84c);
  color: #fff;
}

/* Lien "Voir l'actualité" dans la modale */
.modal-event-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold, #c9a84c);
  text-decoration: none;
  transition: color 0.2s ease;
}

.modal-event-link:hover {
  color: #1a1a1a;
  text-decoration: underline;
}

/* Indicateur couleur pour les actualités dans la grille calendar-day-cell */
.calendar-day-cell.has-event .event-indicator.event-indicator--actualite {
  background-color: var(--gold, #c9a84c);
}

/* Lien titre dans la sidebar événements */
.event-title-link {
  text-decoration: none;
  color: inherit;
}

.event-title-link:hover .event-title {
  text-decoration: underline;
}

/* Bouton "Voir" pour les actualités dans la popup jour */
.calendar-day-popup__btn--actu {
  background-color: var(--gold, #c9a84c);
}

.calendar-day-popup__btn--actu:hover {
  background-color: #b08a3a;
}

.event-carousel-section {
  background: #1a1a1a;
  padding: 3rem 1rem;
}

.event-carousel-section .event-categories__container {
  max-width: 80rem;
  margin: 0 auto;
}

.event-carousel-section .event-categories__title {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #fffdf3;
  margin: 0 0 2rem 0;
}

.events-carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.events-carousel::-webkit-scrollbar {
  height: 4px;
}

.events-carousel::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 6px;
}

.events-carousel::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 6px;
}

.event-slide {
  flex-shrink: 0;
  width: clamp(220px, 30vw, 300px);
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-slide:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.event-slide .event-image {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.event-slide .event-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.event-slide .event-image--fallback {
  background: #e5e7eb;
  height: 180px;
}

.event-slide .event-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}

.event-slide .event-info {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.event-slide .event-name {
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  font-weight: 700;
  color: #111827;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-slide .event-date {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: #6b7280;
  margin: 0;
}

.event-slide .event-price {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: 600;
  color: #111827;
}

.event-slide__reservation-btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 6px 14px;
  background: #c9a227;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
  align-self: flex-start;
}

.event-slide__reservation-btn:hover {
  background: #191919;
  color: #fff;
}

.Atelier,
.Conférences {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  margin: 0;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.Atelier__container,
.Conférences__container {
  position: relative;
  z-index: 2;
  max-width: 60%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.Atelier__title,
.Conférences__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #FFFDF3;
  margin: 0;
}

.Atelier__description,
.Conférences__description {
  font-family: var(--font-primary);
  font-size: clamp(1.2rem, 2vw, 1.1rem);
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.Atelier__link,
.Conférences__link {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.Atelier__link:hover,
.Conférences__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.Atelier {
  background: var(--gold);
  color: #FFFDF3;
}

.Atelier__link {
  background-color: rgba(255, 253, 243, 0.1);
  color: #FFFDF3;
}

.Atelier__link:hover {
  background-color: #FFFDF3;
  color: var(--gold);
}

.Atelier::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  width: 200px;
  height: 150px;
  background-image: url("./assets/Img/atelier-jeunes.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  z-index: 1;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
  transform: translateY(-50%);
}

.Atelier:hover::before {
  filter: grayscale(0%);
}

.Conférences {
  background: #47564F;
  color: #FFFDF3;
}

.Conférences__link {
  background-color: rgba(255, 253, 243, 0.1);
  color: #FFFDF3;
}

.Conférences__link:hover {
  background-color: #FFFDF3;
  color: #47564F;
}

.Conférences::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  width: 200px;
  height: 150px;
  background-image: url("./assets/Img/misc-discussion.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  z-index: 1;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
  transform: translateY(-50%);
}

.Conférences:hover::before {
  filter: grayscale(0%);
}

.Porterie {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(2rem, 5vw, 4rem);
  margin: 0;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #8b6f47;
  color: #FFFDF3;
  transition: all 0.3s ease;
}

.Porterie::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  width: 200px;
  height: 150px;
  background-image: url("./assets/Img/atelier-poterie.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  z-index: 1;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
  transform: translateY(-50%);
}

.Porterie:hover::before {
  filter: grayscale(0%);
}

.Porterie__container {
  position: relative;
  z-index: 2;
  max-width: 60%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.Porterie__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #FFFDF3;
  margin: 0;
}

.Porterie__description {
  font-family: var(--font-primary);
  font-size: clamp(1.2rem, 2vw, 1.1rem);
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.Porterie__link {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 600;
  background-color: rgba(255, 253, 243, 0.1);
  color: #FFFDF3;
  transition: all 0.3s ease;
  cursor: pointer;
}

.Porterie__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  background-color: #FFFDF3;
  color: #8b6f47;
}

.Jazz {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(2rem, 5vw, 4rem);
  margin: 0;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--black);
  color: #FFFDF3;
  transition: all 0.3s ease;
}

.Jazz::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  width: 200px;
  height: 150px;
  background-image: url("./assets/Img/activite-performance-break.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  z-index: 1;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
  transform: translateY(-50%);
}

.Jazz:hover::before {
  filter: grayscale(0%);
}

.Jazz__container {
  position: relative;
  z-index: 2;
  max-width: 60%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.Jazz__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #FFFDF3;
  margin: 0;
}

.Jazz__description {
  font-family: var(--font-primary);
  font-size: clamp(1.2rem, 2vw, 1.1rem);
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.Jazz__link {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 600;
  background-color: rgba(255, 253, 243, 0.1);
  color: #FFFDF3;
  transition: all 0.3s ease;
  cursor: pointer;
}

.Jazz__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  background-color: #FFFDF3;
  color: var(--black);
}

@media (max-width: 48rem) {
  .Atelier::before,
  .Conférences::before,
  .Porterie::before,
  .Jazz::before {
    width: 0 !important;
  }
  .Atelier__container,
  .Conférences__container,
  .Porterie__container,
  .Jazz__container {
    max-width: 90%;
  }
}
.header--reservations {
  background: linear-gradient(135deg, var(--black) 0%, #1a2d3a 100%);
}

.header--reservations .header__hero-content--reduced h1 {
  color: #FFFDF3;
}

.reservation-main {
  background-color: #FFFDF3;
}

.reservation-section {
  background-color: #FFFDF3;
}

.reservation-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.reservation-header {
  margin-bottom: 2rem;
}

.reservation-back-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: #47564F;
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 1px solid #47564F;
  transition: all 0.3s ease;
}

.reservation-back-btn:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.reservation-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.reservation-event-details {
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 10px;
}

.reservation-event-title {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--black);
  margin: 0 0 1rem 0;
}

.reservation-status {
  margin-bottom: 1.5rem;
}

.status-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
}

.status-available {
  background-color: #d4edda;
  color: #155724;
}

.status-unavailable {
  background-color: #f8d7da;
  color: #721c24;
}

.reservation-infos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: #FFFDF3;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
}

.reservation-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.reservation-info-label {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
}

.reservation-info-value {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--black);
}

.reservation-description {
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
}

.reservation-description h3 {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.75rem 0;
}

.reservation-description p {
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: #555;
  margin: 0;
}

.reservation-form-section {
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 10px;
  height: fit-content;
  position: sticky;
  top: 2rem;
}

.reservation-form-title {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 1.5rem 0;
}

.reservation-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--black);
}

.form-input {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  background-color: #FFFDF3;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: #47564F;
  box-shadow: 0 0 0 2px rgba(71, 86, 79, 0.1);
}

.form-input:invalid {
  border-color: #dc3545;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 0.85rem;
}

.form-checkbox input[type=checkbox] {
  margin-top: 0.25rem;
  cursor: pointer;
}

.form-checkbox span {
  color: #555;
}

.reservation-btn-submit {
  padding: 1rem;
  margin-top: 0.5rem;
  background-color: #47564F;
  color: #FFFDF3;
  border: none;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reservation-btn-submit:hover {
  background-color: #47564F;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.reservation-btn-submit:active {
  transform: translateY(0);
}

.reservation-btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.reservation-form-note {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: #e6e6e6;
  margin-top: 1rem;
}

.reservation-confirmation {
  min-height: 60vh;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.confirmation-card {
  max-width: 500px;
  padding: 3rem 2rem;
  background-color: #333333;
  color: #e6e6e6;
  border-radius: 10px;
  text-align: center;
}

.confirmation-icon {
  font-size: 3rem;
  color: #e6e6e6;
  margin-bottom: 1rem;
  animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.confirmation-card h2 {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  color: #e6e6e6;
  margin: 0 0 1rem 0;
}

.confirmation-card > p {
  font-family: var(--font-primary);
  color: #e6e6e6;
  margin-bottom: 1.5rem;
}

.confirmation-details {
  background-color: #FFFDF3;
  padding: 1.5rem;
  border-radius: 6px;
  margin: 1.5rem 0;
  text-align: left;
}

.confirmation-details p {
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  color: #333333;
  margin: 0.5rem 0;
}

.confirmation-details p strong {
  color: var(--black);
}

.reservation-btn-back {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--gold);
  color: #FFFDF3;
  text-decoration: none;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.reservation-btn-back:hover {
  background-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (max-width: 62rem) {
  .reservation-content {
    grid-template-columns: 1fr;
  }
  .reservation-form-section {
    position: static;
    top: auto;
  }
}
@media (max-width: 48rem) {
  .reservation-infos-grid {
    grid-template-columns: 1fr;
  }
  .reservation-event-details,
  .reservation-form-section {
    padding: 1.5rem;
  }
  .reservation-content {
    gap: 1.5rem;
  }
}
.museum-spaces-section {
  padding: 6rem 2rem;
  background: #ffffff;
  position: relative;
}

@media (min-width: 768px) {
  .museum-spaces-section {
    padding: 8rem 4rem;
  }
}
@media (min-width: 1024px) {
  .museum-spaces-section {
    padding: 10rem 6rem;
  }
}
.museum-spaces-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.museum-spaces-banner {
  margin-bottom: 6rem;
}

@media (min-width: 768px) {
  .museum-spaces-banner {
    margin-bottom: 8rem;
  }
}
.museum-spaces-banner h2 {
  font-size: 1.8rem;
  color: var(--black);
  margin-bottom: 1rem;
  font-weight: 400;
  letter-spacing: -0.8px;
}

@media (min-width: 768px) {
  .museum-spaces-banner h2 {
    font-size: 2.8rem;
    font-weight: 400;
  }
}
.museum-spaces-banner p {
  color: #666666;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.8;
  max-width: 700px;
}

@media (min-width: 768px) {
  .museum-spaces-banner p {
    font-size: 1rem;
    line-height: 1.9;
  }
}
.spaces-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 640px) {
  .spaces-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .spaces-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}
.space-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  aspect-ratio: 1;
  cursor: pointer;
}

@media (min-width: 768px) {
  .space-card {
    border-radius: 6px;
  }
}
.space-card:hover {
  transform: translateY(-8px);
  border-radius: 10px;
}

.space-card:hover .space-card-image {
  transform: scale(1.7);
  border-radius: 10px;
}

.space-card:hover .space-card-title {
  color: var(--gold);
}

.space-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  border-radius: 10px;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.space-card-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 2;
}

@media (min-width: 768px) {
  .space-card-content {
    padding: 3rem;
  }
}
.space-card-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
  line-height: 1.2;
  letter-spacing: -0.5px;
  transition: color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 768px) {
  .space-card-title {
    font-size: 2.2rem;
    margin-bottom: 1.2rem;
  }
}
.space-card-description {
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: 1.7;
  margin: 0;
  transition: color 0.4s ease;
  max-width: 90%;
}

@media (min-width: 768px) {
  .space-card-description {
    font-size: 1.2rem;
    line-height: 1.7;
  }
}
.space-card:hover .space-card-description {
  color: #ffffff;
  border-radius: 10px;
}

@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.space-card {
  animation: cardSlideIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.space-card:nth-child(1) {
  animation-delay: 0.12s;
}

.space-card:nth-child(2) {
  animation-delay: 0.24s;
}

.space-card:nth-child(3) {
  animation-delay: 0.36s;
}

.space-card:nth-child(4) {
  animation-delay: 0.48s;
}

.space-card:nth-child(5) {
  animation-delay: 0.6s;
}

.space-card:nth-child(6) {
  animation-delay: 0.72s;
}

.dropdown {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .dropdown {
    max-width: 800px;
  }
}
.dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dropdown-item {
  position: relative;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

.dropdown-item:not(:last-child) {
  border-bottom: 1px solid var(--black);
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.5rem 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--black);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 768px) {
  .dropdown-trigger {
    font-size: 1.8rem;
    padding: 2rem 0;
  }
}
.dropdown-trigger:hover {
  color: var(--gold);
}

.dropdown-trigger::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 1.5rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 8 17 17 8 17"></polyline><polyline points="7 7 17 7 17 17"></polyline></svg>') no-repeat center;
  background-size: contain;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dropdown-trigger.active {
  color: var(--gold);
}

.dropdown-trigger.active::after {
  transform: rotate(45deg);
}

.dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0 0;
}

.dropdown-content.active {
  padding: 1.5rem 0;
}

@media (min-width: 768px) {
  .dropdown-content.active {
    padding: 2rem 0;
  }
}
.dropdown-text {
  color: #666;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.8;
  font-family: var(--font-primary);
}

@media (min-width: 768px) {
  .dropdown-text {
    font-size: 1rem;
    line-height: 1.9;
  }
}
.missions-section {
  padding: 6rem 2rem;
  background: #fafafa;
}

@media (min-width: 768px) {
  .missions-section {
    padding: 8rem 4rem;
  }
}
@media (min-width: 1024px) {
  .missions-section {
    padding: 10rem 6rem;
  }
}
.missions-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.missions-title {
  font-size: 2.8rem;
  color: var(--gold);
  margin-bottom: 3rem;
  font-weight: 400;
  letter-spacing: -0.8px;
}

@media (min-width: 768px) {
  .missions-title {
    font-size: 3rem;
  }
}
.missions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .missions-list {
    gap: 2rem;
  }
}
.missions-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .missions-item {
    gap: 2rem;
  }
}
.missions-check {
  color: var(--gold);
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

@media (min-width: 768px) {
  .missions-check {
    font-size: 1.8rem;
  }
}
.missions-content {
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  font-family: var(--font-primary);
}

@media (min-width: 768px) {
  .missions-content {
    font-size: 1.1rem;
  }
}
.missions-content strong {
  font-weight: 600;
  color: var(--black);
}

.heritage-section {
  padding: 6rem 2rem;
  background: #ffffff;
}

@media (min-width: 768px) {
  .heritage-section {
    padding: 8rem 4rem;
  }
}
@media (min-width: 1024px) {
  .heritage-section {
    padding: 10rem 6rem;
  }
}
.heritage-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  .heritage-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}
.heritage-image {
  overflow: hidden;
  border-radius: 6px;
}

.heritage-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.heritage-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.heritage-title {
  font-size: 2.2rem;
  color: var(--gold);
  font-weight: 400;
  letter-spacing: -0.8px;
  margin: 0;
}

@media (min-width: 768px) {
  .heritage-title {
    font-size: 2.8rem;
  }
}
.heritage-intro {
  color: #333;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.8;
  font-family: var(--font-primary);
  margin: 0;
}

@media (min-width: 768px) {
  .heritage-intro {
    font-size: 1rem;
    line-height: 1.9;
  }
}
.heritage-subsection {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.heritage-subtitle {
  font-size: 1.3rem;
  color: var(--gold);
  font-weight: 400;
  letter-spacing: -0.5px;
  margin: 0;
}

@media (min-width: 768px) {
  .heritage-subtitle {
    font-size: 1.5rem;
  }
}
.heritage-subsection p {
  color: #333;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.8;
  font-family: var(--font-primary);
  margin: 0;
}

@media (min-width: 768px) {
  .heritage-subsection p {
    font-size: 1rem;
    line-height: 1.9;
  }
}
.breadcrumb {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.75rem 1.5rem;
  background-color: var(--black);
  border-bottom: 1px solid rgba(255, 253, 243, 0.1);
}

@media (min-width: 768px) {
  .breadcrumb {
    padding: 0.875rem 2rem;
  }
}
.breadcrumb__container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 1400px;
  margin: 0 auto;
  font-family: var(--font-primary);
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
}

.breadcrumb__link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: rgba(255, 253, 243, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb__link:hover {
  color: #FFFDF3;
}

.breadcrumb__link svg {
  flex-shrink: 0;
}

.breadcrumb__separator {
  color: rgba(255, 253, 243, 0.4);
  flex-shrink: 0;
}

.breadcrumb__current {
  color: #FFFDF3;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--gold);
  color: #FFFDF3;
  border: none;
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  .back-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
  }
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.back-to-top:active {
  transform: translateY(-2px);
}

.back-to-top svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 767px) {
  .back-to-top svg {
    width: 20px;
    height: 20px;
  }
}
.event-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
  .event-badge {
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.5rem;
  }
}
.event-badge--gratuit {
  background-color: #47564F;
  color: #FFFDF3;
}

.event-badge--complet {
  background-color: #d32f2f;
  color: #FFFDF3;
}

.event-badge--nouveau {
  background-color: var(--gold);
  color: #FFFDF3;
}

.event-badge--populaire {
  background-color: #7b1fa2;
  color: #FFFDF3;
}

.event-badge--bientot {
  background-color: #FFFDF3;
  color: var(--black);
}

.category-indicator {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  background-color: rgba(25, 25, 25, 0.8);
}

@media (max-width: 767px) {
  .category-indicator {
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
  }
}
.category-indicator svg {
  width: 16px;
  height: 16px;
  color: #FFFDF3;
}

.event-notifications {
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 3vw, 2rem);
  background-color: var(--black);
  border-top: 1px solid rgba(255, 253, 243, 0.1);
}

.notification-banner {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2rem);
  background-color: rgba(149, 126, 24, 0.15);
  border: 1.5px solid rgba(149, 126, 24, 0.4);
  border-radius: 12px;
  text-align: center;
}

.notification-banner__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  color: var(--gold);
}

@media (max-width: 767px) {
  .notification-banner__icon {
    width: 40px;
    height: 40px;
  }
}
.notification-banner__title {
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  color: #FFFDF3;
  margin: 0 0 0.75rem 0;
}

.notification-banner__text {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: rgba(255, 253, 243, 0.8);
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}

.notification-banner__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 400px;
  margin: 0 auto;
}

@media (min-width: 480px) {
  .notification-banner__form {
    flex-direction: row;
  }
}
.notification-banner__input {
  flex: 1;
  padding: 0.875rem 1.25rem;
  border: 1.5px solid rgba(255, 253, 243, 0.2);
  border-radius: 10px;
  background-color: rgba(255, 253, 243, 0.1);
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.notification-banner__input::placeholder {
  color: rgba(255, 253, 243, 0.5);
}

.notification-banner__input:hover, .notification-banner__input:focus {
  border-color: rgba(255, 253, 243, 0.4);
  background-color: rgba(255, 253, 243, 0.15);
  outline: none;
}

.notification-banner__button {
  padding: 0.875rem 1.5rem;
  background-color: var(--gold);
  color: #FFFDF3;
  border: none;
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.notification-banner__button:hover {
  background-color: #7a6510;
  transform: translateY(-2px);
}

.notification-banner__button:active {
  transform: translateY(0);
}

.event-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 4vw, 2rem);
  background-color: rgba(255, 253, 243, 0.05);
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
}

.event-legend__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 253, 243, 0.8);
}

.event-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.event-legend__dot--gratuit {
  background-color: #47564F;
}

.event-legend__dot--complet {
  background-color: #d32f2f;
}

.event-legend__dot--nouveau {
  background-color: var(--gold);
}

.event-legend__dot--populaire {
  background-color: #7b1fa2;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(149, 126, 24, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(149, 126, 24, 0);
  }
}
.event-loading {
  animation: pulse-glow 1.5s ease-in-out infinite;
}

.event-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: rgba(149, 126, 24, 0.2);
  border: 1px solid rgba(149, 126, 24, 0.4);
  border-radius: 20px;
  font-family: var(--font-primary);
  font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 1rem;
}

.event-counter__number {
  font-weight: 700;
}

.event-sort {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
  font-family: var(--font-primary);
  font-size: clamp(0.8125rem, 1.5vw, 0.875rem);
}

.event-sort__label {
  color: rgba(255, 253, 243, 0.6);
  flex-shrink: 0;
}

.event-sort__select {
  flex: 1;
  max-width: 200px;
  padding: 0.625rem 1rem;
  border: 1.5px solid rgba(255, 253, 243, 0.2);
  border-radius: 10px;
  background-color: transparent;
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.event-sort__select:hover, .event-sort__select:focus {
  border-color: rgba(255, 253, 243, 0.4);
  outline: none;
}

.event-sort__select option {
  background-color: var(--black);
  color: #FFFDF3;
}

.season-indicator {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--gold);
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.header--evenement .header__hero-content--reduced {
  padding: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem);
  max-width: 900px;
}

@media (min-width: 768px) {
  .header--evenement .header__hero-content--reduced {
    padding: clamp(4rem, 10vw, 8rem) clamp(3rem, 6vw, 5rem);
  }
}
.header--evenement .header__title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .header--evenement .header__title {
    font-size: clamp(3.5rem, 10vw, 6rem);
  }
}
.header--evenement #sous-menu-header {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  line-height: 1.6;
  display: block;
  margin-bottom: 2rem;
  max-width: 700px;
  opacity: 0.9;
}

.header--evenement .header__reserve-btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  background-color: var(--gold);
  color: #FFFDF3;
  border: none;
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(149, 126, 24, 0.4);
}

.header--evenement .header__reserve-btn:hover {
  background-color: #7a6510;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(149, 126, 24, 0.5);
}

.header--evenement .header__reserve-btn:active {
  transform: translateY(-1px);
}

.events-search {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
  background-color: var(--black);
}

.events-search__container {
  max-width: 800px;
  margin: 0 auto;
}

.events-search__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .events-search__form {
    flex-direction: row;
  }
}
.events-search__input-wrapper {
  flex: 1;
  position: relative;
}

.events-search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: rgba(255, 253, 243, 0.5);
  pointer-events: none;
}

.events-search__input {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  background-color: rgba(255, 253, 243, 0.1);
  border: 1.5px solid rgba(255, 253, 243, 0.2);
  border-radius: 10px;
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.events-search__input::placeholder {
  color: rgba(255, 253, 243, 0.5);
}

.events-search__input:hover, .events-search__input:focus {
  border-color: rgba(255, 253, 243, 0.4);
  background-color: rgba(255, 253, 243, 0.15);
  outline: none;
}

.events-search__button {
  padding: 1rem 2rem;
  background-color: var(--gold);
  color: #FFFDF3;
  border: none;
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.events-search__button:hover {
  background-color: #7a6510;
}

.events-filters {
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 2rem);
  background-color: rgba(255, 253, 243, 0.03);
  border-bottom: 1px solid rgba(255, 253, 243, 0.1);
}

.events-filters__container {
  max-width: 1400px;
  margin: 0 auto;
}

.events-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.events-filters__row--main {
  margin-bottom: 1rem;
}

.events-filters__label {
  font-family: var(--font-primary);
  font-size: clamp(0.8125rem, 1.5vw, 0.875rem);
  color: rgba(255, 253, 243, 0.7);
  font-weight: 500;
}

.events-filters__select {
  padding: 0.625rem 1rem;
  background-color: rgba(255, 253, 243, 0.08);
  border: 1.5px solid rgba(255, 253, 243, 0.2);
  border-radius: 10px;
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 150px;
}

.events-filters__select:hover, .events-filters__select:focus {
  border-color: rgba(255, 253, 243, 0.4);
  outline: none;
}

.events-filters__select option {
  background-color: var(--black);
}

.events-filters__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.events-filters__tag {
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 1.5px solid rgba(255, 253, 243, 0.3);
  border-radius: 20px;
  color: rgba(255, 253, 243, 0.8);
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.events-filters__tag:hover, .events-filters__tag--active {
  background-color: var(--gold);
  border-color: var(--gold);
  color: #FFFDF3;
}

.events-filters__clear {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  color: rgba(255, 253, 243, 0.5);
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.events-filters__clear:hover {
  color: #FFFDF3;
  text-decoration: underline;
}

.events-grid {
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 3vw, 2rem);
  background-color: var(--black);
}

.events-grid__container {
  max-width: 1400px;
  margin: 0 auto;
}

.events-grid__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.events-grid__title {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  color: #FFFDF3;
  margin: 0;
}

.events-grid__count {
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  color: rgba(255, 253, 243, 0.6);
}

.events-grid__sort {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.events-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .events-grid__grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
  .events-grid__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.events-grid--loading {
  opacity: 0.5;
  pointer-events: none;
}

.event-card {
  position: relative;
  background-color: rgba(255, 253, 243, 0.05);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
}

.event-card:hover {
  transform: translateY(-8px);
  background-color: rgba(255, 253, 243, 0.08);
}

.event-card:hover .event-card__image {
  transform: scale(1.08);
}

.event-card:hover .event-card__overlay {
  opacity: 1;
}

.event-card__image-wrapper {
  position: relative;
  height: 200px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .event-card__image-wrapper {
    height: 220px;
  }
}
.event-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.event-card__badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  z-index: 5;
}

.event-card__badge {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-card__badge--gratuit {
  background-color: #47564F;
  color: #FFFDF3;
}

.event-card__badge--complet {
  background-color: #d32f2f;
  color: #FFFDF3;
}

.event-card__badge--nouveau {
  background-color: var(--gold);
  color: #FFFDF3;
}

.event-card__badge--populaire {
  background-color: #7b1fa2;
  color: #FFFDF3;
}

.event-card__favorite {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(25, 25, 25, 0.6);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: all 0.3s ease;
}

.event-card__favorite svg {
  width: 18px;
  height: 18px;
  color: #FFFDF3;
  transition: all 0.3s ease;
}

.event-card__favorite:hover {
  background-color: rgba(149, 126, 24, 0.8);
}

.event-card__favorite--active svg {
  fill: var(--gold);
  stroke: var(--gold);
}

.event-card__content {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-card__date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.event-card__date svg {
  width: 14px;
  height: 14px;
}

.event-card__title {
  font-family: var(--font-primary);
  font-size: clamp(1.125rem, 2.5vw, 1.35rem);
  font-weight: 600;
  color: #FFFDF3;
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
}

.event-card__excerpt {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: rgba(255, 253, 243, 0.7);
  line-height: 1.5;
  margin: 0 0 1rem 0;
  flex: 1;
}

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: rgba(255, 253, 243, 0.6);
}

.event-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.event-card__meta-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.event-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 253, 243, 0.1);
}

.event-card__price {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gold);
}

.event-card__price--free {
  color: #47564F;
}

.event-card__button {
  padding: 0.625rem 1.25rem;
  background-color: var(--gold);
  color: #FFFDF3;
  border: none;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.event-card__button:hover {
  background-color: #7a6510;
}

.event-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(25, 25, 25, 0.98), rgba(25, 25, 25, 0.9));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 4;
}

.event-card__details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.event-card__detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: rgba(255, 253, 243, 0.9);
}

.event-card__detail svg {
  width: 14px;
  height: 14px;
  color: var(--gold);
  flex-shrink: 0;
}

.events-calendar-view {
  display: none;
}

.events-calendar-view--active {
  display: block;
}

.events-notifications {
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 3vw, 2rem);
  background-color: var(--black);
}

.notification-card {
  max-width: 600px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2rem);
  background: linear-gradient(135deg, rgba(149, 126, 24, 0.15), rgba(149, 126, 24, 0.08));
  border: 1.5px solid rgba(149, 126, 24, 0.3);
  border-radius: 12px;
  text-align: center;
}

.notification-card__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: var(--gold);
}

.notification-card__title {
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  color: #FFFDF3;
  margin: 0 0 0.5rem 0;
}

.notification-card__text {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: rgba(255, 253, 243, 0.8);
  margin: 0 0 1.5rem 0;
}

.notification-card__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 350px;
  margin: 0 auto;
}

@media (min-width: 480px) {
  .notification-card__form {
    flex-direction: row;
  }
}
.notification-card__input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1.5px solid rgba(255, 253, 243, 0.2);
  border-radius: 10px;
  background-color: rgba(255, 253, 243, 0.1);
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
}

.notification-card__input::placeholder {
  color: rgba(255, 253, 243, 0.5);
}

.notification-card__input:focus {
  outline: none;
  border-color: rgba(255, 253, 243, 0.4);
}

.notification-card__button {
  padding: 0.75rem 1.5rem;
  background-color: var(--gold);
  color: #FFFDF3;
  border: none;
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.notification-card__button:hover {
  background-color: #7a6510;
}

.accessibility-icons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.accessibility-icons__item {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(255, 253, 243, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.accessibility-icons__item svg {
  width: 14px;
  height: 14px;
  color: rgba(255, 253, 243, 0.7);
}

.accessibility-icons__item[title*=PMR] {
  background-color: rgba(71, 86, 79, 0.3);
}

.accessibility-icons__item[title*=PMR] svg {
  color: #47564F;
}

.accessibility-icons__item[title*=signes] {
  background-color: rgba(123, 31, 162, 0.3);
}

.accessibility-icons__item[title*=signes] svg {
  color: #7b1fa2;
}

.events-empty {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 3vw, 2rem);
}

.events-empty__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  color: rgba(255, 253, 243, 0.3);
}

.events-empty__title {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  color: #FFFDF3;
  margin: 0 0 0.75rem 0;
}

.events-empty__text {
  font-family: var(--font-primary);
  font-size: clamp(0.9375rem, 2vw, 1.125rem);
  color: rgba(255, 253, 243, 0.6);
  margin: 0 0 2rem 0;
}

.events-empty__button {
  padding: 0.875rem 2rem;
  color: var(--gold);
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
  background: linear-gradient(var(--gold), var(--gold)) no-repeat bottom/100% 0%;
}

.events-empty__button:hover {
  background-size: 100% 100%;
  color: #FFFDF3;
}

@media (max-width: 767px) {
  .events-grid__grid {
    grid-template-columns: 1fr;
  }
  .event-card__content {
    padding: 1rem;
  }
  .event-card__meta {
    flex-direction: column;
    gap: 0.5rem;
  }
}
.view-toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 0.25rem;
  margin-bottom: 1rem;
  font-family: var(--font-primary);
}

@media (min-width: 1024px) {
  .view-toggle {
    display: none;
  }
}
.view-toggle .toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.view-toggle .toggle-btn svg {
  width: 15px;
  height: 15px;
}

.view-toggle .toggle-btn.active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1023px) {
  /* Calendrier + ses filtres : desktop seulement */
  .calendar-card,
  .calendar-card.hidden-mobile,
  .calendar-filters {
    display: none !important;
  }
}
.mobile-events-list {
  display: none;
}

@media (max-width: 1023px) {
  .mobile-events-list {
    display: block;
  }
  .mobile-events-list.hidden {
    display: none;
  }
}
.mobile-month-group {
  margin-bottom: 2rem;
}

.mobile-month-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ca3af;
  font-family: var(--font-primary);
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

.mobile-event-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #ffffff;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  text-decoration: none;
  color: inherit;
  border: 1px solid #f3f4f6;
  transition: all 0.2s;
  cursor: pointer;
}

.mobile-event-card:active {
  transform: scale(0.98);
}

.mobile-event-card .mec-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding-right: 1rem;
  border-right: 2px solid #f3f4f6;
}

.mobile-event-card .mec-date .mec-day {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: #111827;
}

.mobile-event-card .mec-date .mec-weekday {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  font-family: var(--font-primary);
  margin-top: 0.125rem;
}

.mobile-event-card .mec-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem;
  min-width: 0;
}

.mobile-event-card .mec-body .mec-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-event-card .mec-body .mec-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  color: #ffffff;
  width: fit-content;
}

.mobile-event-card .mec-arrow {
  display: flex;
  align-items: center;
  color: #d1d5db;
}

.mobile-event-card .mec-arrow svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 1023px) {
  .filter-options {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filter-options::-webkit-scrollbar {
    display: none;
  }
  .filter-options .filter-pill {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
/* Liste des événements : toujours visible dans la sidebar */
.calendar-sidebar .events-preview {
  display: block;
}

.events-newsletter {
  background: #8b7a5e;
  padding: 4rem 2rem;
  margin-top: 4rem;
}

.events-newsletter__container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.events-newsletter__content {
  position: relative;
}

.events-newsletter__message {
  padding: 1rem 1.5rem;
  border-radius: 6px;
  margin-bottom: 2rem;
  font-size: 1.2rem;
  font-weight: 500;
  animation: slideDown 0.3s ease-out;
}

.events-newsletter__message--success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid #22c55e;
  color: #22c55e;
}

.events-newsletter__message--info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid #3b82f6;
  color: #3b82f6;
}

.events-newsletter__message--error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  color: #ef4444;
}

.events-newsletter__title {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .events-newsletter__title {
    font-size: 2rem;
  }
}
.events-newsletter__text {
  color: #cbd5e1;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .events-newsletter__text {
    font-size: 1rem;
  }
}
.events-newsletter__form {
  display: flex;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .events-newsletter__form {
    flex-direction: column;
    gap: 1rem;
  }
}
.events-newsletter input[type=email] {
  flex: 1;
  padding: 1rem 1.5rem;
  border: 1.5px solid #3d3d3d;
  border-radius: 6px;
  background: #fff;
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.events-newsletter input[type=email]::placeholder {
  color: #94a3b8;
}

.events-newsletter input[type=email]:focus {
  outline: none;
  border-color: #3b82f6;
  background: #0f172a;
}

@media (max-width: 640px) {
  .events-newsletter input[type=email] {
    padding: 1rem;
  }
}
.events-newsletter button[type=submit] {
  flex: 1;
  padding: 1rem 1.5rem;
  border: 1.5px solid #fff;
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.events-newsletter button[type=submit]:hover {
  background: #0f172a;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.events-newsletter button[type=submit]:active {
  transform: translateY(0);
}

@media (max-width: 640px) {
  .events-newsletter button[type=submit] {
    width: 100%;
    padding: 1rem;
  }
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mobile-show-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b7280;
  font-family: var(--font-primary);
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.2s;
}

.mobile-show-all-btn:hover, .mobile-show-all-btn:active {
  background: #f3f4f6;
  color: #374151;
}

@media (max-width: 480px) {
  .calendar-weekdays-grid div {
    font-size: 0.65rem;
  }
  .calendar-day-cell {
    height: 2.5rem;
    min-height: 2.5rem;
    border-radius: 6px;
    padding: 0.2rem;
  }
  .calendar-day-cell .day-number {
    font-size: 0.75rem;
  }
  .calendar-day-cell .event-indicator {
    width: 0.35rem;
    height: 0.35rem;
    bottom: 0.25rem;
  }
  .calendar-day-empty {
    height: 2.5rem;
    min-height: 2.5rem;
  }
  .calendar-nav-header .calendar-current-title {
    font-size: 1.1rem;
  }
  .calendar-card {
    padding: 1rem;
  }
}
.event-calendar-section {
  padding: 1rem;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.event-calendar-container {
  width: 100%;
  box-sizing: border-box;
}

.event-calendar-grid {
  width: 100%;
  box-sizing: border-box;
}

.calendar-main-content {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.calendar-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0.75rem;
}

@media (min-width: 480px) {
  .calendar-card {
    padding: 1rem;
  }
}
@media (min-width: 768px) {
  .calendar-card {
    padding: 1.5rem;
  }
}
.calendar-days-grid,
.calendar-weekdays-grid {
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}

@media (min-width: 480px) {
  .calendar-days-grid,
  .calendar-weekdays-grid {
    gap: 0.375rem;
  }
}
@media (min-width: 768px) {
  .calendar-days-grid,
  .calendar-weekdays-grid {
    gap: 0.75rem;
  }
}
.calendar-day-cell,
.calendar-day-empty {
  aspect-ratio: unset;
  height: auto;
  min-height: unset;
  padding-top: 100%;
  position: relative;
  box-sizing: border-box;
}

.calendar-day-cell .day-number,
.calendar-day-cell span,
.calendar-day-empty .day-number,
.calendar-day-empty span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.6rem, 2.5vw, 1rem);
  line-height: 1;
}

.calendar-day-cell .event-indicator,
.calendar-day-empty .event-indicator {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(0.25rem, 1vw, 0.5rem);
  height: clamp(0.25rem, 1vw, 0.5rem);
}

.calendar-day-empty {
  padding-top: 100%;
  height: auto;
  min-height: unset;
  background: transparent;
  border: none;
}

.calendar-weekdays-grid div {
  font-size: clamp(0.55rem, 2vw, 0.875rem);
  padding: 0.25rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-nav-header {
  gap: 0.5rem;
  flex-wrap: nowrap;
  margin-bottom: 0.75rem;
}

.calendar-nav-header .calendar-current-title {
  font-size: clamp(1rem, 4vw, 2.25rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  flex: 1;
}

.calendar-nav-header .nav-arrow-btn {
  flex-shrink: 0;
  padding: 0.4rem 0.65rem;
  border: 1.5px solid rgba(28, 27, 26, 0.25);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.calendar-nav-header .nav-arrow-btn:hover {
  border-color: rgba(28, 27, 26, 0.6);
  background: rgba(28, 27, 26, 0.05);
}

.calendar-nav-header .nav-arrow-btn i, .calendar-nav-header .nav-arrow-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.calendar-sidebar {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.view-toggle {
  width: 100%;
  box-sizing: border-box;
}

.view-toggle .toggle-btn {
  flex: 1;
  justify-content: center;
}

.events-seo-index {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.event-featured {
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
}

.event-featured__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 768px) {
  .event-featured__container {
    grid-template-columns: 1fr;
  }
}
.event-featured__media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.event-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.event-featured__img:hover {
  transform: scale(1.03);
}

.event-featured__media-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: var(--gold);
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  border-radius: 50px;
}

.event-featured__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.event-featured__eyebrow {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.event-featured__title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: #1d1d1f;
  margin: 0;
}

.event-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.event-featured__meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: rgba(255, 253, 243, 0.75);
}

.event-featured__meta-item svg {
  flex-shrink: 0;
  color: var(--gold);
}

.event-featured__price-tag {
  color: #4ade80;
  font-weight: 600;
}

.event-featured__desc {
  font-size: 1.2rem;
  line-height: 1.7;
  color: rgba(255, 253, 243, 0.8);
  margin: 0;
}

.event-featured__spots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.event-featured__spots-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 253, 243, 0.15);
  border-radius: 6px;
  overflow: hidden;
}

.event-featured__spots-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #c9a826);
  border-radius: 6px;
  transition: width 0.8s ease;
}

.event-featured__spots-label {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  color: rgba(255, 253, 243, 0.6);
}

.event-featured__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.event-featured__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background-color: var(--gold);
  color: #FFFDF3;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.event-featured__btn-primary:hover {
  background-color: rgb(105, 89, 17);
  transform: translateY(-2px);
}

.event-featured__btn-icon {
  width: 14px;
  filter: invert(1);
}

.event-featured__btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 1.75rem;
  color: rgba(255, 253, 243, 0.85);
  font-family: var(--font-paragraphe);
  font-size: 1.2rem;
  font-weight: 500;
  border: 1.5px solid rgba(255, 253, 243, 0.25);
  border-radius: 6px;
  cursor: pointer;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease, border-color 0.4s ease;
  background: linear-gradient(#FFFDF3, #FFFDF3) no-repeat bottom/100% 0%;
}

.event-featured__btn-secondary:hover {
  background-size: 100% 100%;
  border-color: #FFFDF3;
  color: var(--black);
}

.event-gallery {
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
}

.event-gallery__container {
  max-width: 1200px;
  margin: 0 auto;
}

.event-gallery__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.event-gallery__eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #47564F;
  margin-bottom: 0.5rem;
}

.event-gallery__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 300;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.02em;
}

.event-gallery__subtitle {
  font-family: var(--font-primary);
  font-size: 1rem;
  color: #888;
  max-width: 300px;
  text-align: right;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .event-gallery__subtitle {
    text-align: left;
    max-width: 100%;
  }
}
.event-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 220px);
  gap: 1rem;
}

@media (max-width: 992px) {
  .event-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
}
@media (max-width: 480px) {
  .event-gallery__grid {
    grid-template-columns: 1fr;
  }
}
.event-gallery__item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.event-gallery__item--large {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 992px) {
  .event-gallery__item--large {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (max-width: 480px) {
  .event-gallery__item--large {
    grid-column: span 1;
  }
}
.event-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  min-height: 200px;
}

.event-gallery__item:hover img {
  transform: scale(1.05);
}

.event-gallery__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  opacity: 1;
}

.event-gallery__overlay-tag {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  color: #FFFDF3;
}

.event-gallery__overlay-date {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: rgba(255, 253, 243, 0.75);
}

.event-gallery__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.event-gallery__cta p {
  font-family: var(--font-primary);
  font-size: 1.2rem;
  color: #555;
  margin: 0;
}

.event-gallery__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background-color: #1a1a1a;
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.event-gallery__cta-btn:hover {
  background-color: #957e18;
  transform: translateY(-2px);
}

.event-categories__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 2rem) clamp(1rem, 4vw, 3rem);
}

.event-categories__container h2.event-categories__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 2rem;
}

.events-carousel {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) #e5e7eb;
}

.events-carousel::-webkit-scrollbar {
  height: 4px;
}

.events-carousel::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 6px;
}

.events-carousel::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 6px;
}

.event-slide {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.event-slide:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

@media (max-width: 480px) {
  .event-slide {
    flex: 0 0 240px;
  }
}
.event-image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.event-slide:hover .event-image img {
  transform: scale(1.05);
}

.event-image--fallback {
  background: #e5e7eb;
}

.event-image--fallback::after {
  content: "📷";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.event-image .event-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.event-info {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.event-name {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--black);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-date {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  color: #666666;
  margin: 0;
}

.event-price {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
}

.event-categories {
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
}

.event-categories__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1024px) {
  .event-categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .event-categories__grid {
    grid-template-columns: 1fr;
  }
}
.category-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.category-card__image {
  aspect-ratio: 3/2;
  overflow: hidden;
}

.category-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

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

.category-card__content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.category-card__tag {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.category-card__title {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--black);
  margin: 0;
}

.category-card__desc {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: #666666;
  line-height: 1.5;
  margin: 0;
}

.category-card__cta {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--black);
  margin-top: 0.25rem;
  transition: color 0.2s ease;
}

.category-card:hover .category-card__cta {
  color: var(--gold);
}

.event-faq {
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
}

.event-faq__container {
  max-width: 1200px;
  margin: 0 auto;
}

.event-faq__header {
  text-align: center;
  margin-bottom: 3rem;
}

.event-faq__eyebrow {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.75rem;
}

.event-faq__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--black);
  margin: 0;
}

.event-faq__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 1024px) {
  .event-faq__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-item[open] {
  border-color: var(--gold);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--black);
  cursor: pointer;
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question:hover {
  color: var(--gold);
}

.faq-item__icon {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

details[open] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  padding: 0 1.25rem 1.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.7;
  color: #666666;
  margin: 0;
}

.faq-contact__inner {
  background: var(--black);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 1024px) {
  .faq-contact__inner {
    position: static;
  }
}
.faq-contact__icon {
  font-size: 2rem;
}

.faq-contact__title {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFDF3;
  margin: 0;
}

.faq-contact__text {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: rgba(255, 253, 243, 0.7);
  line-height: 1.6;
  margin: 0;
}

.faq-contact__btn {
  display: inline-block;
  padding: 0.875rem 1.5rem;
  background: var(--gold);
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  width: 100%;
  text-align: center;
  transition: background 0.3s ease;
}

.faq-contact__btn:hover {
  background: rgb(105, 89, 17);
}

.faq-contact__divider {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  color: rgba(255, 253, 243, 0.4);
}

.faq-contact__reserve {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 253, 243, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.faq-contact__reserve:hover {
  color: #FFFDF3;
}

/* ── Fiche oeuvre — Mobile First ─────────────────────────────────────── */
.fiche__content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

@media (min-width: 768px) {
  .fiche__content-wrapper {
    padding: 2rem 2rem 4rem;
  }
}
@media (min-width: 1024px) {
  .fiche__content-wrapper {
    padding: 3rem 2rem 5rem;
  }
}
/* block-description : colonne sur mobile, row sur desktop */
.block-description {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .block-description {
    flex-direction: row;
    align-items: stretch;
    gap: 2.5rem;
  }
}
/* Image de l'oeuvre */
.description {
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .description {
    width: 45%;
    display: flex;
  }
}
@media (min-width: 1024px) {
  .description {
    width: 50%;
  }
}
.description__img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .description__img {
    height: 100%;
    object-fit: cover;
  }
}
/* Texte à droite */
.description__texte {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.description__texte p {
  font-size: 1rem;
  line-height: 1.75;
  color: #1d1d1f;
}

@media (min-width: 768px) {
  .description__texte p {
    font-size: 1.125rem;
  }
}
/* Artwork */
.artwork__title {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #1d1d1f;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}

.artwork__artist {
  font-size: clamp(1.1rem, 3vw, 1.75rem);
  font-weight: 500;
  color: #86868b;
  margin-bottom: 0.25rem;
}

.artwork__year {
  font-size: 1rem;
  color: #86868b;
  font-weight: 400;
}

/* Details */
.details {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.details__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .details__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
.details__card {
  background: #f5f5f7;
  border-radius: 12px;
  padding: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.details__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.details__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #86868b;
  margin-bottom: 0.4rem;
}

.details__value {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: #1d1d1f;
  line-height: 1.4;
}

.section__title {
  font-size: clamp(1.5rem, 3vw, 3.5rem);
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.04em;
  margin: 0;
}

.section__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .section__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.section__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #0071e3;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.section__link:hover {
  opacity: 0.7;
}

/* Audio player */
.audio-player {
  margin-top: 1.5rem;
}

@media (min-width: 1024px) {
  .audio-player {
    margin-top: 2rem;
  }
}
.audio-player__card {
  background: var(--gold);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .audio-player__card {
    padding: 2rem;
  }
}
.audio-player__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.audio-player__icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.audio-player__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.audio-player__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
}

.audio-player__title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: none;
}

.audio-player__controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  .audio-player__controls {
    flex-wrap: wrap;
  }
}
.audio-player__play-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1d1d1f;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.audio-player__play-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
}

.audio-player__play-button:active {
  transform: scale(0.95);
}

@media (max-width: 767px) {
  .audio-player__play-button {
    width: 44px;
    height: 44px;
  }
}
.audio-player__progress-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

@media (max-width: 767px) {
  .audio-player__progress-container {
    order: 1;
    width: 100%;
    margin-top: 0.75rem;
  }
}
.audio-player__time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
  min-width: 35px;
}

.audio-player__time--current {
  text-align: right;
}

.audio-player__progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.audio-player__progress-bar:hover {
  height: 6px;
}

.audio-player__progress-bar:hover .audio-player__progress-fill::after {
  opacity: 1;
}

.audio-player__progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 6px;
  width: 0%;
  transition: width 0.1s linear;
  position: relative;
}

.audio-player__progress-fill::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.audio-player__volume {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.audio-player__volume-button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

.audio-player__volume-button:hover {
  color: #fff;
  transform: scale(1.1);
}

.audio-player__volume-slider {
  width: 100px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
}

@media (min-width: 768px) {
  .audio-player__volume-slider {
    width: 120px;
  }
}
.audio-player__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.audio-player__volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.audio-player__volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.audio-player__volume-value {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  min-width: 40px;
  text-align: right;
}

.artists-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

@media (min-width: 1024px) {
  .artists-grid {
    padding: 4rem 2rem 5rem;
  }
}
.artists-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .artists-grid__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
@media (max-width: 767px) {
  .artists-grid__grid {
    grid-template-columns: 1fr;
  }
}
.artists-grid__card {
  position: relative;
  height: 350px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

.artists-grid__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

@media (max-width: 767px) {
  .artists-grid__card {
    height: 300px;
  }
}
.artists-grid__card--barre {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><rect fill="%23556b2f" width="400" height="400"/><circle cx="200" cy="100" r="80" fill="%234a5d2a"/></svg>') center/cover;
}

.artists-grid__card--matisse {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><rect fill="%23556b5f" width="400" height="400"/><ellipse cx="250" cy="150" rx="100" ry="80" fill="%23c4985f" transform="rotate(-20 250 150)"/></svg>') center/cover;
}

.artists-grid__card--valtat {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><rect fill="%234682b4" width="400" height="400"/><rect x="50" y="250" width="300" height="100" fill="%2366a3d9"/></svg>') center/cover;
}

.artists-grid__card--signac {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><rect fill="%236b8e9c" width="400" height="400"/><path d="M 50 350 Q 200 250 350 350" stroke="%238baab8" fill="none" stroke-width="30"/></svg>') center/cover;
}

.artists-grid__card--stojka {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><rect fill="%23698b69" width="400" height="400"/><rect x="100" y="100" width="200" height="200" fill="%2385a085"/></svg>') center/cover;
}

.artists-grid__card--bonnard {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><rect fill="%23728c6a" width="400" height="400"/><ellipse cx="200" cy="150" rx="120" ry="90" fill="%23c49b6a"/></svg>') center/cover;
}

.artists-grid__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: white;
}

.artists-grid__name {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.artists-grid__description {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 300;
  opacity: 0.9;
}

.works-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

@media (min-width: 1024px) {
  .works-grid {
    padding: 4rem 2rem 5rem;
  }
}
.works-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .works-grid__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media (max-width: 767px) {
  .works-grid__grid {
    grid-template-columns: 1fr;
  }
}
.works-grid__card {
  position: relative;
  height: 350px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

.works-grid__card:hover {
  transform: scale(1.02);
}

@media (max-width: 767px) {
  .works-grid__card {
    height: 300px;
  }
}
.works-grid__card--famille {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><rect fill="%236b8ea3" width="600" height="400"/><rect x="50" y="300" width="100" height="100" fill="%23c4a862"/><rect x="200" y="250" width="100" height="150" fill="%234a6d8a"/><rect x="350" y="280" width="100" height="120" fill="%23d4b872"/></svg>') center/cover;
}

.works-grid__card--portraits {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><rect fill="%23556b4a" width="600" height="400"/><ellipse cx="300" cy="180" rx="100" ry="120" fill="%23c4985f"/><rect x="250" y="280" width="100" height="80" fill="%23d9a872"/></svg>') center/cover;
}

.works-grid__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}

.works-grid__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.works-grid__description {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 300;
}

.work-hover {
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

@media (min-width: 1024px) {
  .work-hover {
    padding: 4rem 2rem 5rem;
  }
}
.work-hover__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (max-width: 767px) {
  .work-hover__row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.work-hover__card {
  position: relative;
  height: 400px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.work-hover__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.work-hover__card:hover .work-hover__overlay {
  opacity: 1;
  transform: translateY(0);
}

.work-hover__card:hover .work-hover__image img {
  transform: scale(1.1);
}

@media (max-width: 767px) {
  .work-hover__card {
    height: 300px;
  }
  .work-hover__card .work-hover__overlay {
    opacity: 1;
    transform: translateY(0);
  }
}
.work-hover__image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

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

.work-hover__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  color: white;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

@media (max-width: 767px) {
  .work-hover__overlay {
    opacity: 1;
    transform: translateY(0);
    padding: 1.5rem;
  }
}
.work-hover__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.work-hover__year {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.work-hover__description {
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 300;
  opacity: 0.9;
}

.btn--more {
  display: inline-block;
  margin-top: 2rem;
  padding: 1rem 2.5rem;
  border: 1.5px solid #1d1d1f;
  background: transparent;
  color: #1d1d1f;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
}

.btn--more:hover {
  background: #1d1d1f;
  color: white;
}

.location-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

@media (min-width: 1024px) {
  .location-section {
    padding: 4rem 2rem 5rem;
  }
}
.location-section__map {
  width: 100%;
  height: 400px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .location-section__map {
    height: 500px;
  }
}
audio {
  display: none;
}

.other-works {
  max-width: 1400px;
  margin: 2rem;
}

@media (min-width: 1024px) {
  .other-works {
    padding: 4rem 2rem 5rem;
    margin: 0 auto;
  }
}
.other-works__header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  margin: 2rem;
}

.other-works__header img {
  max-width: 50px;
  max-height: 50px;
}

.panels {
  display: flex;
  width: 100%;
  max-width: 1100px;
  height: 500px;
  gap: 12px;
}

.panel {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  flex: 1;
  transition: flex 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.panels:hover .panel {
  flex: 0.6;
}

.panels:hover .panel:hover {
  flex: 1.6;
}

.panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  filter: brightness(0.75);
}

.panel:hover img {
  transform: scale(1.04);
  filter: brightness(0.6);
}

.panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
}

.panel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 30px;
  color: #fff;
}

.panel-content h3 {
  color: rgb(253, 253, 253);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 12px;
  transform: translateY(8px);
  transition: transform 0.4s ease;
}

.panel-content p {
  font-size: 0.82rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  max-width: 340px;
  color: rgba(255, 255, 255, 0.85);
}

.panel:hover .panel-content h3 {
  transform: translateY(0);
}

.panel:hover .panel-content p {
  opacity: 1;
  transform: translateY(0);
}

/* Arrow indicator */
.panel-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: white;
}

.panel:hover .panel-arrow {
  opacity: 1;
  transform: scale(1);
}

.panel-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.actu-archive {
  min-height: 100vh;
}

.actu-archive__header {
  background: var(--black);
  color: rgb(253, 253, 253);
  padding: clamp(5rem, 12vw, 8rem) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 6vw, 4rem);
}

.actu-archive__header-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.actu-archive__eyebrow {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 0 0 0.75rem;
}

.actu-archive__title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
}

.actu-section {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 5rem);
}

.actu-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.actu-section__heading {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(25, 25, 25, 0.12);
}

.actu-section--passees {
  background: rgb(248, 248, 248);
}

.actu-section--passees .actu-section__heading {
  color: #666666;
}

.actu-section__empty {
  color: #666666;
  font-size: 1rem;
  font-style: italic;
  padding: 2rem 0;
}

.actu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 600px) {
  .actu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .actu-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.actu-card {
  background: rgb(253, 253, 253);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.actu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14), 0 0 60px rgba(0, 0, 0, 0.04);
}

.actu-card--past {
  opacity: 0.75;
  filter: saturate(0.5);
}

.actu-card--past:hover {
  opacity: 1;
  filter: saturate(0.7);
}

.actu-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.actu-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #e8e8e8;
}

.actu-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

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

.actu-card__thumb--empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgb(221, 221, 221), rgb(237, 237, 237));
}

.actu-card__cat {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  font-family: var(--font-primary);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(253, 253, 253);
  border-radius: 6px;
}

.actu-card__cat--past {
  background: #666666 !important;
}

/* Label musée sur les cards */
.actu-card__musee-label {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.actu-card__musee-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  border-radius: 6px;
}

/* ── Section actualités homepage ─────────────────────────────── */
.main__actualites {
  padding: 0;
}

.hp-actu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0;
}

@media (min-width: 640px) {
  .hp-actu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
@media (min-width: 960px) {
  .hp-actu-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 0;
  }
}
/* ── hp-actu-card — layout horizontal façon "Made in Germany" ─────────────── */
.hp-actu-card {
  border-radius: 10px;
  overflow: hidden;
  background: var(--black);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-height: clamp(200px, 22vw, 280px);
}

.hp-actu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
}

.hp-actu-card__link {
  display: flex;
  flex-direction: row;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* ── Vignette : colonne gauche ──────────────────────────────────────────── */
.hp-actu-card__thumb {
  position: relative;
  overflow: hidden;
  background: #111;
  /* Légèrement plus large pour compenser le recadrage diagonal */
  flex: 0 0 52%;
  min-height: clamp(200px, 22vw, 280px);
  /* Découpe diagonale : bord droit part du coin haut → rentre de 3rem en bas */
  clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%);
}

.hp-actu-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.hp-actu-card:hover .hp-actu-card__thumb img {
  transform: scale(1.04);
}

.hp-actu-card__thumb--empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

.hp-actu-card__cat-inline {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.hp-actu-card__musee-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Badge musée — dans le flux, au-dessus de la date */
.hp-actu-card__musee-badge {
  align-self: flex-start;
  padding: 3px 8px;
  font-size: 11px;
  gap: 4px;
}
.hp-actu-card__musee-badge .carousel__item-musee-logo {
  width: 12px;
  height: 12px;
}

/* ── Body : colonne droite sombre ───────────────────────────────────────── */
.hp-actu-card__body {
  flex: 1;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: var(--black);
  position: relative;
}

/* Date → badge pill façon "SÉLECTIONS" */
.hp-actu-card__date {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFDF3;
  background: rgba(255, 253, 243, 0.1);
  border: 1px solid rgba(255, 253, 243, 0.3);
  border-radius: 4px;
  padding: 3px 10px;
  margin: 0;
}

/* Titre : grand, gras, uppercase */
.hp-actu-card__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #FFFDF3;
  margin: 0;
}

.hp-actu-card__excerpt {
  font-size: clamp(0.78rem, 1.3vw, 0.88rem);
  color: rgba(255, 253, 243, 0.75);
  line-height: 1.55;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bouton "+" en bas à droite */
.hp-actu-card__more {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 300;
  color: rgba(255, 253, 243, 0.5);
  border: 1px solid rgba(255, 253, 243, 0.25);
  border-radius: 50%;
  line-height: 1;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hp-actu-card:hover .hp-actu-card__more {
  color: var(--gold, #c9a227);
  border-color: var(--gold, #c9a227);
}

/* ── Badges overlay dans .hp-actu-card__thumb ───────────────────────────── */
/* Badge catégorie — top-left */
.hp-actu-card__cat {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Badge statut — bottom-left */
.hp-actu-card__statut {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hp-actu-card__statut--encours {
  background: rgba(22, 163, 74, 0.6);
}

.hp-actu-card__statut--avenir {
  background: rgba(37, 99, 235, 0.6);
}

.hp-actu-card__statut--passee {
  background: rgba(107, 114, 128, 0.6);
}

/* Tags public cible */
.hp-actu-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto;
}

.hp-actu-card__tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.9);
  background: rgba(255, 253, 243, 0.1);
  border: 1px solid rgba(255, 253, 243, 0.18);
  border-radius: 20px;
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
}

/* ── Mobile : retour en colonne, pas de découpe ─────────────────────────── */
@media (max-width: 639px) {
  .hp-actu-card__link {
    flex-direction: column;
  }
  .hp-actu-card__thumb {
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: 16/9;
    clip-path: none;
  }
  .hp-actu-card {
    min-height: 0;
  }
}
.hp-actu-footer {
  display: flex;
  justify-content: center;
  padding: 2rem 1.5rem 0;
}

.actu-card__body {
  padding: 1.25rem 1.25rem 1.5rem;
}

.actu-card__title {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--black);
  margin: 0 0 0.6rem;
}

.actu-card__dates {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  color: #666666;
  margin: 0;
  letter-spacing: 0.02em;
}

/* ── Calendrier avec sidebar filtres ── */
.calendar-card {
  max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS REDESIGN — Inspiré MAMC Saint-Étienne + Musées de Troyes

   MAMC : typo oversize majuscule, carrousel horizontal avec flèches,
          sections très aérées, fond sombre, cards larges épurées
   Troyes : grille de cards avec badges musée, layout éditorial propre,
            "Voir tout" en header, sections claires/sombres alternées
   ═══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 1 : ACTIVITÉS — Style MAMC
   Titre oversize + filtres discrets + carrousel horizontal avec nav flèches
   ───────────────────────────────────────────────────────────────────────── */
.aw-activites {
  position: relative;
  background: #f2f2f2;
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}

.aw-activites__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

/* ── Header : titre MAMC-style + nav flèches ── */
.aw-activites__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  gap: 2rem;
}

.aw-activites__title-group {
  flex: 1;
}

.aw-activites__eyebrow {
  display: inline;
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
}

.aw-activites__title {
  font-family: var(--font-h1-h2, "Neutraface2Display-Titling", sans-serif);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 700;
  color: #292929;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}

.aw-activites__title em {
  display: block;
  font-style: normal;
  color: var(--gold, #ae9a79);
  font-size: 0.55em;
  letter-spacing: 0.02em;
  margin-top: 0.3em;
  text-transform: none;
}

/* Bloc droit : compteur + flèches nav (style MAMC) */
.aw-activites__header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.25rem;
  flex-shrink: 0;
}

.aw-activites__count-badge {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(41, 41, 41, 0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aw-activites__count-number {
  font-weight: 700;
  color: var(--gold, #ae9a79);
  font-size: 1.1rem;
}

.aw-activites__nav {
  display: flex;
  gap: 0.6rem;
}

.aw-activites__nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(41, 41, 41, 0.2);
  background: transparent;
  color: #292929;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.aw-activites__nav-btn:hover {
  border-color: var(--gold, #ae9a79);
  background: rgba(174, 154, 121, 0.1);
}

.aw-activites__nav-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.aw-activites__nav-btn img {
  width: 18px;
  height: 18px;
  display: block;
  transition: filter 0.2s ease;
}

.aw-activites__nav-btn:hover img {
  filter: brightness(0.6);
}

/* ── Filtres — tabs minimalistes style MAMC ── */
.aw-activites__filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(41, 41, 41, 0.1);
}

.aw-filter-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.aw-filter-row__label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #292929;
  min-width: 56px;
  flex-shrink: 0;
}

.aw-filter-row__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.aw-filter-pill {
  appearance: none;
  border: 1px solid rgba(41, 41, 41, 0.12);
  background: transparent;
  color: rgba(41, 41, 41, 0.6);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.aw-filter-pill:hover {
  color: #292929;
  background: rgba(41, 41, 41, 0.06);
  border-color: rgba(41, 41, 41, 0.25);
}

.aw-filter-pill.is-active {
  color: #fff;
  background: #292929;
  border-color: #292929;
  font-weight: 600;
}

.aw-filter-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Carrousel horizontal — style MAMC ── */
.aw-activites__grid {
  display: flex;
  gap: clamp(1rem, 1.8vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.aw-activites__grid::-webkit-scrollbar {
  display: none;
}

/* ── Card activité — épurée, verticale, style MAMC ── */
.aw-activite-card {
  flex: 0 0 clamp(280px, 24vw, 340px);
  scroll-snap-align: start;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #161616;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.aw-activite-card__media {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
}

.aw-activite-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.aw-activite-card:hover .aw-activite-card__img {
  transform: scale(1.06);
}

.aw-activite-card__img--empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
}

/* Badge catégorie — style MAMC (petit, en haut à gauche) */
.aw-activite-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  z-index: 2;
}

/* Corps de la card */
.aw-activite-card__body {
  padding: 1.2rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.aw-activite-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.aw-activite-card__date {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gold, #ae9a79);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aw-activite-card__time {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: rgba(255, 253, 243, 0.35);
}

.aw-activite-card__title {
  font-family: var(--font-h3-h4-h5, sans-serif);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 700;
  color: #fffdf3;
  line-height: 1.25;
  margin: 0.15rem 0 0;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aw-activite-card__price {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 253, 243, 0.5);
  margin-top: 0.2rem;
}

.aw-activite-card__price--free {
  color: rgba(255, 253, 243, 0.7);
}

.aw-activite-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 253, 243, 0.06);
}

.aw-activite-card__cta {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 253, 243, 0.35);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.aw-activite-card:hover .aw-activite-card__cta {
  color: var(--gold, #ae9a79);
}

.aw-activite-card__arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 243, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.aw-activite-card:hover .aw-activite-card__arrow {
  border-color: var(--gold, #ae9a79);
  background: rgba(174, 154, 121, 0.08);
}

.aw-activite-card__arrow svg {
  width: 12px;
  height: 12px;
  stroke: rgba(255, 253, 243, 0.35);
  transition: stroke 0.2s ease;
}

.aw-activite-card__arrow img {
  width: 12px;
  height: 12px;
  display: block;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.aw-activite-card:hover .aw-activite-card__arrow svg {
  stroke: var(--gold, #ae9a79);
}

.aw-activite-card:hover .aw-activite-card__arrow img {
  opacity: 1;
}

/* Bouton réservation */
.aw-activite-card__reserve {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: var(--gold, #ae9a79);
  color: #0e0e0e;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.aw-activite-card__reserve:hover {
  background: #c9a227;
}

/* Message vide */
.aw-activites__empty {
  color: rgba(41, 41, 41, 0.35);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 3rem 0;
  text-align: center;
  width: 100%;
}

@media (max-width: 767px) {
  .aw-activites__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .aw-activites__header-right {
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }
  .aw-filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .aw-activite-card {
    flex: 0 0 82vw;
  }
}
/* ─────────────────────────────────────────────────────────────────────────────
   SECTION : GRILLE ACTIVITÉS (page événements)
   Design : fond gold, cards blanches, textes foncés, bouton Découvrir avec bordure
   ───────────────────────────────────────────────────────────────────────── */
.ev-activites {
  position: relative;
  background: #fff;
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.ev-activites__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

.ev-activites__filtre-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ev-activites__filtre-bar .filtre__list-item {
  color: rgba(0, 0, 0, 0.6);
  border-color: rgba(0, 0, 0, 0.15);
}

.ev-activites__filtre-bar .filtre__list-item:hover {
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.4);
}

.ev-activites__filtre-bar .filtre__list-item--active {
  color: #fff;
  background: var(--black, #191919);
  border-color: var(--black, #191919);
}

.ev-activites__filtre-bar .filtre__group-label {
  color: rgba(0, 0, 0, 0.6);
}

.ev-activites__filtre-bar .filtre__dropdown {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ev-activites__filtre-bar .filtre__dropdown-item {
  color: rgba(0, 0, 0, 0.7);
}

.ev-activites__filtre-bar .filtre__dropdown-item:hover {
  color: var(--black, #191919);
  background: rgba(0, 0, 0, 0.04);
}

.ev-activites__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.ev-activites__count {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.05em;
}

.ev-activites__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .ev-activites__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .ev-activites__grid {
    grid-template-columns: 1fr;
  }
}
.ev-activites__empty {
  color: rgba(0, 0, 0, 0.35);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 3rem 0;
  text-align: center;
  grid-column: 1/-1;
}

.ev-activites__load-more {
  text-align: center;
  margin-top: 2.5rem;
}

.ev-activites__load-btn {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  color: var(--black, #191919);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.75rem 2rem;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.ev-activites__load-btn img {
  width: 9px;
  height: 9px;
}

.ev-activites__load-btn:hover {
  background: var(--black, #191919);
  border-color: var(--black, #191919);
  color: #fff;
}

/* ── Cards activités (grille) ── */
.ev-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  animation: evCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ev-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

@keyframes evCardIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ev-card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #f0f0f0;
}

.ev-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ev-card:hover .ev-card__img {
  transform: scale(1.06);
}

.ev-card__img--empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
}

.ev-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  padding: 0.3rem 0.7rem;
  border-radius: 50px;
}

.ev-card__free-tag {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  background: #16a34a;
  padding: 0.3rem 0.7rem;
  border-radius: 50px;
}

.ev-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--gold, #957e18);
  color: #fff;
}

.ev-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ev-card__date {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  text-transform: capitalize;
}

.ev-card__time {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
}

.ev-card__title {
  font-family: var(--font-primary, var(--font-body));
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.ev-card__public {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ev-card__price {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

.ev-card__footer {
  margin-top: auto;
  padding-top: 0.75rem;
}

.ev-card__cta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  transition: gap 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.ev-card:hover .ev-card__cta {
  gap: 0.6rem;
  background: #fff;
  color: var(--gold, #957e18);
}

.ev-card:hover .ev-card__cta img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(60%) saturate(500%) hue-rotate(20deg);
}

.ev-card__cta img {
  width: 10px;
  height: 10px;
  filter: brightness(0) invert(1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 2 : ACTUALITÉS & EXPOSITIONS — Style Troyes + MAMC
   Grille bento avec featured card, badges musée, fond clair éditorial
   ───────────────────moi ça ────────────────────────────────────────────────────── */
.aw-actus {
  position: relative;
  overflow: hidden;
}

.aw-actus__inner {
  max-width: 1440px;
  margin: 0 auto;
}

/* Header — style Troyes (titre + "Voir tout") */
.aw-actus__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  gap: 2rem;
  flex-wrap: wrap;
}

.aw-actus__title-group {
  flex: 1;
}

.aw-actus__eyebrow {
  display: inline;
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
}

.aw-actus__title {
  font-family: var(--font-h1-h2, "Neutraface2Display-Titling", sans-serif);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 700;
  color: var(--black, #1c1b1a);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}

.aw-actus__title em {
  font-style: normal;
  color: var(--gold, #ae9a79);
}

/* Bouton "Voir tout" — style Troyes */
.aw-actus__see-all {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black, #1c1b1a);
  text-decoration: none;
  padding: 20px 50px;
  border: 1.5px solid var(--black, #1c1b1a);
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.aw-actus__see-all:hover {
  background: var(--black, #1c1b1a);
  color: #fffdf3;
}

.aw-actus__see-all svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.aw-actus__see-all img {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.aw-actus__see-all:hover svg,
.aw-actus__see-all:hover img {
  transform: translateX(4px);
  filter: invert(1);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .aw-actus__see-all {
    padding: 14px 28px;
    font-size: 11px;
  }
}
.aw-actus__footer {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  justify-content: flex-start;
}

/* Grille Bento — 12 colonnes, rows min 200px */
.aw-actus__bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* Card actu — base */
.aw-actu-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--gold);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.aw-actu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}

/* ── Bento layout : 3 tailles de cards ──────────────────────────────────────
   Rangée 1-2 : [Card1 : 7col × 2row HERO] [Card2 : 5col] / [Card3 : 5col]
   Rangée 3-4 : [Card4 : 3col × 2row] [Card5 : 5col × 2row] [Card6+7 : 4col]
   Rangée 5+  : grille régulière 4col
   ─────────────────────────────────────────────────────────────────────────── */
/* Card 1 — Hero large */
.aw-actu-card:nth-child(1) {
  grid-column: span 8;
  grid-row: span 2;
}

/* Cards 2 & 3 — Moyennes empilées (droite du hero) */
.aw-actu-card:nth-child(2) {
  grid-column: span 3;
  grid-row: span 3;
}

.aw-actu-card:nth-child(3) {
  grid-column: span 5;
}

/* Card 4 — Étroite et haute */
.aw-actu-card:nth-child(4) {
  grid-column: span 3;
  grid-row: span 2;
}

/* Card 5 — Moyenne et haute */
.aw-actu-card:nth-child(5) {
  grid-column: span 4;
  grid-row: span 1;
}

/* Cards 6 & 7 — Petites empilées (droite) */
.aw-actu-card:nth-child(6) {
  grid-column: span 4;
}

.aw-actu-card:nth-child(7) {
  grid-column: span 4;
}

/* Cards suivantes — grille régulière */
.aw-actu-card:nth-child(n+8) {
  grid-column: span 4;
}

@media (max-width: 1024px) {
  .aw-actus__bento {
    grid-auto-rows: minmax(180px, auto);
  }
  .aw-actu-card:nth-child(1) {
    grid-column: span 8;
    grid-row: span 2;
  }
  .aw-actu-card:nth-child(2) {
    grid-column: span 4;
    grid-row: span 3;
  }
  .aw-actu-card:nth-child(3) {
    grid-column: span 5;
    grid-row: span 2;
  }
  .aw-actu-card:nth-child(4) {
    grid-column: span 3;
    grid-row: span 2;
  }
  .aw-actu-card:nth-child(5) {
    grid-column: span 4;
    grid-row: span 1;
  }
  .aw-actu-card:nth-child(6),
  .aw-actu-card:nth-child(7),
  .aw-actu-card:nth-child(n+8) {
    grid-column: span 6;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .aw-actus__bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(160px, auto);
  }
  .aw-actu-card:nth-child(1) {
    grid-column: span 6;
    grid-row: span 2;
  }
  .aw-actu-card:nth-child(2) {
    grid-column: span 3;
    grid-row: span 2;
  }
  .aw-actu-card:nth-child(3) {
    grid-column: span 3;
    grid-row: span 2;
  }
  .aw-actu-card:nth-child(4) {
    grid-column: span 3;
    grid-row: span 1;
  }
  .aw-actu-card:nth-child(5) {
    grid-column: span 3;
    grid-row: span 1;
  }
  .aw-actu-card:nth-child(6),
  .aw-actu-card:nth-child(7),
  .aw-actu-card:nth-child(n+8) {
    grid-column: span 3;
    grid-row: span 1;
  }
}
@media (max-width: 640px) {
  .aw-actus__bento {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(260px, auto);
  }
  .aw-actu-card,
  .aw-actu-card:nth-child(1),
  .aw-actu-card:nth-child(2),
  .aw-actu-card:nth-child(3),
  .aw-actu-card:nth-child(4),
  .aw-actu-card:nth-child(5),
  .aw-actu-card:nth-child(6),
  .aw-actu-card:nth-child(7),
  .aw-actu-card:nth-child(n+8) {
    grid-column: span 1;
    grid-row: span 1;
  }
}
.aw-actu-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Featured card = layout horizontal */
.aw-actu-card:nth-child(1) .aw-actu-card__link {
  flex-direction: row;
}

@media (max-width: 1024px) {
  .aw-actu-card:nth-child(1) .aw-actu-card__link {
    flex-direction: column;
  }
}
/* Media */
.aw-actu-card__media {
  position: relative;
  overflow: hidden;
}

.aw-actu-card:nth-child(1) .aw-actu-card__media {
  flex: 1 1 62%;
  min-height: 100%;
  max-width: 62%;
}
.aw-actu-card:nth-child(1) .aw-actu-card__media::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 40px;
  height: 100%;
  background: var(--gold);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .aw-actu-card:nth-child(1) .aw-actu-card__media {
    max-width: 100%;
    aspect-ratio: 16/10;
  }
  .aw-actu-card:nth-child(1) .aw-actu-card__media::after {
    top: auto;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 32px;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
  }
}
.aw-actu-card:not(:nth-child(1)) .aw-actu-card__media {
  flex: 1 1 0;
  min-height: 0;
}
.aw-actu-card:not(:nth-child(1)) .aw-actu-card__media::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 32px;
  background: var(--gold);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

.aw-actu-card:not(:nth-child(1)) .aw-actu-card__body {
  flex: 0 0 auto;
}

.aw-actu-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.aw-actu-card:hover .aw-actu-card__img {
  transform: scale(1.04);
}

.aw-actu-card__img--empty {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: linear-gradient(135deg, #e8e5de 0%, #ddd9d0 100%);
}

/* Badges — style Troyes (superposés sur l'image) */
.aw-actu-card__badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  gap: 0.35rem;
  z-index: 2;
}

.aw-actu-card__cat-badge {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
}

.aw-actu-card__musee-badge {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
}

/* Corps */
.aw-actu-card__body {
  padding: clamp(1rem, 2vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.aw-actu-card:nth-child(1) .aw-actu-card__body {
  flex: 0 0 38%;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  justify-content: center;
}

@media (max-width: 1024px) {
  .aw-actu-card:nth-child(1) .aw-actu-card__body {
    flex: none;
  }
}
.aw-actu-card__date {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 253, 243, 0.7);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aw-actu-card__title {
  font-family: var(--font-h3-h4-h5, sans-serif);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 700;
  color: #FFFDF3;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aw-actu-card:nth-child(1) .aw-actu-card__title {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  -webkit-line-clamp: 3;
}

.aw-actu-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(255, 253, 243, 0.75);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aw-actu-card:nth-child(1) .aw-actu-card__excerpt {
  -webkit-line-clamp: 3;
  font-size: 0.85rem;
}

.aw-actu-card__price {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: #FFFDF3;
}

.aw-actu-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFDF3;
  margin-top: auto;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255, 253, 243, 0.5);
  border-radius: 6px;
  align-self: flex-start;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.aw-actu-card:hover .aw-actu-card__read-more {
  color: #FFFDF3;
  background: rgba(255, 253, 243, 0.15);
  border-color: #FFFDF3;
}

.aw-actu-card__read-more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.aw-actu-card__read-more img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}

.aw-actu-card:hover .aw-actu-card__read-more svg,
.aw-actu-card:hover .aw-actu-card__read-more img {
  transform: translateX(5px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 3 : CATÉGORIES — Style MAMC (cards immersives plein cadre)
   Grille 2×2 avec overlay cinématique, numérotation, hover reveal
   ───────────────────────────────────────────────────────────────────────── */
.aw-categories {
  position: relative;
  background: var(--black, #1c1b1a);
  padding: clamp(5rem, 10vw, 9rem) 0;
  overflow: hidden;
}

.aw-categories__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

.aw-categories__header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.aw-categories__title-group {
  max-width: 700px;
}

.aw-categories__eyebrow {
  display: inline;
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
}

.aw-categories__title {
  font-family: var(--font-h1-h2, "Neutraface2Display-Titling", sans-serif);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 700;
  color: #fffdf3;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}

.aw-categories__subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  color: rgba(255, 253, 243, 0.4);
  margin-top: 1.5rem;
  line-height: 1.7;
}

/* Grille 2×2 */
.aw-categories__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 1.2vw, 1rem);
}

@media (max-width: 767px) {
  .aw-categories__grid {
    grid-template-columns: 1fr;
  }
}
/* Card catégorie — immersive MAMC */
.aw-cat-card {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
}

@media (max-width: 767px) {
  .aw-cat-card {
    aspect-ratio: 4/3;
  }
}
.aw-cat-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.aw-cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.85);
}

.aw-cat-card:hover .aw-cat-card__img {
  transform: scale(1.06);
  filter: brightness(0.7);
}

/* Overlay gradient — style MAMC */
.aw-cat-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(14, 14, 14, 0.85) 0%, rgba(14, 14, 14, 0.2) 50%, transparent 100%);
  transition: opacity 0.5s ease;
}

.aw-cat-card:hover .aw-cat-card__overlay {
  opacity: 0.95;
}

/* Numéro décoratif oversize — style MAMC */
.aw-cat-card__number {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  z-index: 2;
  font-family: var(--font-h1-h2, sans-serif);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  color: rgba(255, 253, 243, 0.04);
  line-height: 1;
  transition: color 0.5s ease;
}

.aw-cat-card:hover .aw-cat-card__number {
  color: rgba(174, 154, 121, 0.12);
}

/* Contenu en bas */
.aw-cat-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.aw-cat-card__tag {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
}

.aw-cat-card__title {
  font-family: var(--font-h3-h4-h5, sans-serif);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #fffdf3;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.aw-cat-card__desc {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255, 253, 243, 0.5);
  line-height: 1.5;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease 0.05s;
}

.aw-cat-card:hover .aw-cat-card__desc {
  max-height: 80px;
  opacity: 1;
}

.aw-cat-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fffdf3;
  margin-top: 0.35rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.1s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, color 0.2s ease;
}

.aw-cat-card:hover .aw-cat-card__cta {
  opacity: 1;
  transform: translateY(0);
}

.aw-cat-card__cta:hover {
  color: var(--gold, #ae9a79);
}

.aw-cat-card__cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.aw-cat-card__cta img {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.aw-cat-card:hover .aw-cat-card__cta svg,
.aw-cat-card:hover .aw-cat-card__cta img {
  transform: translateX(5px);
}

/* ─── Croix décorative avant les eyebrows ─── */
.aw-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.aw-eyebrow__cross {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.5;
}

/* Sur fond clair (sections actus et activités), inverser la croix blanche en sombre */
.aw-actus .aw-eyebrow__cross,
.aw-activites .aw-eyebrow__cross {
  filter: invert(1);
  opacity: 1;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .aw-activite-card,
  .aw-actu-card,
  .aw-cat-card,
  .aw-activite-card__img,
  .aw-actu-card__img,
  .aw-cat-card__img,
  .aw-cat-card__desc,
  .aw-cat-card__cta,
  .aw-activites__nav-btn {
    transition: none !important;
    transform: none !important;
  }
  .aw-cat-card__desc {
    max-height: none;
    opacity: 1;
  }
  .aw-cat-card__cta {
    opacity: 1;
    transform: none;
  }
  .aw-cat-card__img {
    filter: brightness(0.75) !important;
  }
}
/*
 * editor-patterns.css — MBAA Block Patterns v1.0.6
 * Chargé via add_editor_style() (iFrame Gutenberg) + wp_enqueue_scripts (frontend).
 * @font-face : chemins relatifs depuis assets/css/ → ../fonts/
 */
/* ── @FONT-FACE ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Neutraface2Display-Titling";
  src: url("../fonts/WEB/fonts/Neutraface2Display-Titling.woff2") format("woff2"), url("../fonts/WEB/fonts/Neutraface2Display-Titling.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Neutraface2Display-Bold";
  src: url("../fonts/WEB/fonts/Neutraface2Display-Bold.woff2") format("woff2"), url("../fonts/WEB/fonts/Neutraface2Display-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Neutraface2Text-Book";
  src: url("../fonts/WEB/fonts/Neutraface2Text-Book.woff2") format("woff2"), url("../fonts/WEB/fonts/Neutraface2Text-Book.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Neutraface2Text-Demi";
  src: url("../fonts/WEB/fonts/Neutraface2Text-Demi.woff2") format("woff2"), url("../fonts/WEB/fonts/Neutraface2Text-Demi.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Neutraface2Display-Medium";
  src: url("../fonts/WEB/fonts/Neutraface2Display-Medium.woff2") format("woff2"), url("../fonts/WEB/fonts/Neutraface2Display-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
/* ── VARIABLES ──────────────────────────────────────────────────────────── */
:root {
  --mbaa-gold: #ae9a79;
  --mbaa-black: #191919;
  --mbaa-white: #FFFDF3;
  --mbaa-light: #f5f2ec;
  --mbaa-rose: #e03a80;
  --mbaa-green: #4ade80;
}

img {
  border-radius: 3px !important;
}

/* ── SECTION WRAPPER ────────────────────────────────────────────────────── */
.mbaa-section {
  padding: 4rem 2rem;
  width: 100%;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════
   1. BANNIÈRE TITRE
   ══════════════════════════════════════════════════════════════════════════ */
.mbaa-banniere {
  display: flex !important;
  border-radius: 0 10px 10px 0 !important;
  gap: 2rem !important;
  background-color: #ae9a79 !important;
  color: #FFFDF3 !important;
  padding: clamp(4.25rem, 3vw, 3rem) !important;
  max-width: max-content;
  box-sizing: border-box !important;
  margin: -2rem;
}

.mbaa-banniere__inner {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  flex-shrink: 0;
}

.mbaa-banniere__cross-img,
.mbaa-banniere__cross {
  width: 65px !important;
  height: 65px !important;
  flex-shrink: 0 !important;
  display: block !important;
  color: #FFFDF3 !important;
}

.mbaa-banniere__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #FFFDF3 !important;
}

.mbaa-banniere__titre,
.mbaa-banniere .wp-block-heading.mbaa-banniere__titre {
  font-family: "Neutraface2Display-Titling", sans-serif !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.03em !important;
  color: #FFFDF3 !important;
  margin: 0 !important;
  line-height: 1.05 !important;
}

.mbaa-banniere__titre--dark,
.mbaa-banniere .wp-block-heading.mbaa-banniere__titre--dark {
  color: #191919 !important;
}

.mbaa-banniere__description,
.mbaa-banniere .wp-block-paragraph.mbaa-banniere__description {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: 1rem !important;
  color: rgba(255, 253, 243, 0.85) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. HERO SLIDER
   ══════════════════════════════════════════════════════════════════════════ */
.mbaa-hero.wp-block-cover {
  min-height: 80vh !important;
}

.mbaa-hero .mbaa-hero__caption {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 700px;
}

.mbaa-hero__category,
.mbaa-hero .wp-block-paragraph.mbaa-hero__category {
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: var(--fs-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #ae9a79 !important;
  margin: 0 !important;
}

.mbaa-hero__title,
.mbaa-hero .wp-block-heading.mbaa-hero__title {
  font-family: "Neutraface2Display-Titling", sans-serif !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #FFFDF3 !important;
  margin: 0 !important;
  line-height: 1.05 !important;
}

.mbaa-hero__excerpt, .mbaa-hero__dates,
.mbaa-hero .wp-block-paragraph.mbaa-hero__excerpt,
.mbaa-hero .wp-block-paragraph.mbaa-hero__dates {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  color: rgba(255, 253, 243, 0.85) !important;
  font-size: 1rem !important;
  margin: 0 !important;
}

.mbaa-hero__arrow,
.mbaa-hero .wp-block-paragraph.mbaa-hero__arrow {
  color: #ae9a79 !important;
  font-size: 1.5rem !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. CARTE EXPOSITION
   ══════════════════════════════════════════════════════════════════════════ */
.mbaa-expo-card {
  overflow: hidden;
}

.mbaa-expo-card .mbaa-expo-card__img .wp-block-image img,
.mbaa-expo-card .mbaa-expo-card__img img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  display: block;
}

.mbaa-expo-card .mbaa-expo-card__content {
  background-color: #f5f2ec !important;
  padding: 3rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
}

.mbaa-expo-card__tag,
.mbaa-expo-card .wp-block-paragraph.mbaa-expo-card__tag {
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: var(--fs-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #ae9a79 !important;
  margin: 0 !important;
}

.mbaa-expo-card__title,
.mbaa-expo-card .wp-block-heading.mbaa-expo-card__title {
  font-family: "Neutraface2Display-Titling", sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #191919 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

.mbaa-expo-card__subtitle,
.mbaa-expo-card .wp-block-heading.mbaa-expo-card__subtitle {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: #444 !important;
  margin: 0 !important;
  text-transform: none !important;
}

.mbaa-expo-card__meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.mbaa-expo-card__dates, .mbaa-expo-card__type,
.mbaa-expo-card .wp-block-paragraph.mbaa-expo-card__dates,
.mbaa-expo-card .wp-block-paragraph.mbaa-expo-card__type {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: var(--fs-base) !important;
  color: #666 !important;
  margin: 0 !important;
}

.mbaa-expo-card__sep.wp-block-separator {
  border-color: rgba(25, 25, 25, 0.15) !important;
  margin: 0.5rem 0 !important;
}

.mbaa-expo-card__desc,
.mbaa-expo-card .wp-block-paragraph.mbaa-expo-card__desc {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: var(--fs-md) !important;
  color: #555 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.mbaa-expo-card__btn .wp-block-button__link,
.mbaa-expo-card .wp-block-button__link {
  background-color: #191919 !important;
  color: #FFFDF3 !important;
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: var(--fs-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.75rem 1.75rem !important;
  border-radius: 0 !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.mbaa-expo-card__cta-arrow {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  filter: invert(1) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. BARRE VISITE
   ══════════════════════════════════════════════════════════════════════════ */
.mbaa-visite-bar {
  background: rgba(25, 25, 25, 0.92) !important;
  padding: 1.5rem 2rem !important;
}

.mbaa-visite-bar__inner {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
}

.mbaa-visite-bar__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}

.mbaa-visite-bar__status p,
.mbaa-visite-bar__status .wp-block-paragraph {
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  color: #FFFDF3 !important;
  font-size: var(--fs-base) !important;
  margin: 0 !important;
}

.mbaa-visite-bar__label,
.mbaa-visite-bar .wp-block-paragraph.mbaa-visite-bar__label {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: var(--fs-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 253, 243, 0.5) !important;
  margin: 0 !important;
}

.mbaa-visite-bar__value,
.mbaa-visite-bar .wp-block-paragraph.mbaa-visite-bar__value {
  font-family: "Neutraface2Display-Bold", sans-serif !important;
  font-size: var(--fs-body) !important;
  color: #ae9a79 !important;
  margin: 0 !important;
}

.mbaa-visite-bar__cta .wp-block-button__link,
.mbaa-visite-bar .wp-block-button__link {
  background-color: #ae9a79 !important;
  color: #191919 !important;
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: var(--fs-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: 0 !important;
  border: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   5. GRILLE ACTUALITÉS
   ══════════════════════════════════════════════════════════════════════════ */
.mbaa-actu-card {
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mbaa-actu-card__img-wrap {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 16/9 !important;
}

.mbaa-actu-card__thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}

.mbaa-actu-card__badge {
  position: absolute !important;
  top: 0.75rem !important;
  left: 0.75rem !important;
  background: #e03a80 !important;
  color: #fff !important;
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: var(--fs-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 0 !important;
  z-index: 1 !important;
}

.mbaa-actu-card__date,
.mbaa-actu-card .wp-block-paragraph.mbaa-actu-card__date {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: var(--fs-sm) !important;
  color: #ae9a79 !important;
  margin: 0.75rem 0.75rem 0.25rem !important;
}

.mbaa-actu-card__title,
.mbaa-actu-card .wp-block-heading.mbaa-actu-card__title {
  font-family: "Neutraface2Display-Bold", sans-serif !important;
  font-size: var(--fs-body) !important;
  color: #191919 !important;
  line-height: 1.3 !important;
  margin: 0 0.75rem 0.5rem !important;
}

.mbaa-actu-card__excerpt,
.mbaa-actu-card .wp-block-paragraph.mbaa-actu-card__excerpt {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: var(--fs-base) !important;
  color: #666 !important;
  line-height: 1.5 !important;
  margin: 0 0.75rem 0.75rem !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   6. CAROUSEL ÉVÉNEMENTS
   Style identique au .carousel__item du site (style.css)
   ══════════════════════════════════════════════════════════════════════════ */
/* Filtres — pills arrondis comme sur le site */
.mbaa-carousel__filters .wp-block-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  margin-bottom: 1.5rem !important;
}

.mbaa-carousel__filters .wp-block-button__link {
  background: transparent !important;
  border: 1.5px solid #191919 !important;
  color: #191919 !important;
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: var(--fs-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.45rem 1.25rem !important;
  border-radius: 999px !important;
}

.mbaa-carousel__filter-btn--active .wp-block-button__link {
  background: #191919 !important;
  color: #FFFDF3 !important;
}

/* Cards — border-radius 10px, min-height clamp, overlay rgba(43,43,43,0.4) */
.mbaa-carousel__cover.wp-block-cover {
  min-height: clamp(500px, 55vh, 650px) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.mbaa-carousel__cover.wp-block-cover .wp-block-cover__image-background {
  border-radius: 10px !important;
  object-fit: cover !important;
}

.mbaa-carousel__cover.wp-block-cover .wp-block-cover__background {
  background: rgba(43, 43, 43, 0.4) !important;
  border-radius: 10px !important;
}

/* Contenu interne — flex colonne, espace entre badge et meta */
.mbaa-carousel__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  padding: 0 !important;
}

/* Badge — border-radius 4px, en haut, align-self flex-start */
.mbaa-carousel__badge,
.mbaa-carousel__badge--left {
  align-self: flex-start !important;
  padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem) !important;
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: clamp(0.65rem, 1.5vw, 0.875rem) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 4px !important;
  z-index: 2 !important;
  display: inline-block !important;
  margin-bottom: auto !important;
}

.mbaa-carousel__badge--free {
  background: rgba(71, 86, 79, 0.9) !important;
  color: #fff !important;
}

.mbaa-carousel__badge--price {
  background: #191919 !important;
  color: #fff !important;
}

/* Titre — identique au .carousel__item-title */
.mbaa-carousel__title,
.mbaa-carousel .wp-block-heading.mbaa-carousel__title {
  font-family: "Neutraface2Display-Bold", sans-serif !important;
  font-size: clamp(1.25rem, 3vw + 0.25rem, 4rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #FFFDF3 !important;
  margin: 0 0 1rem !important;
  text-transform: none !important;
  word-break: break-word !important;
  letter-spacing: -0.01em !important;
}

.mbaa-carousel__text,
.mbaa-carousel .wp-block-paragraph.mbaa-carousel__text {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: clamp(0.75rem, 2vw, 1rem) !important;
  color: #FFFDF3 !important;
  line-height: 1.4 !important;
  margin: 0 0 0.5rem !important;
}

/* Meta — identique au .carousel__item-meta */
.mbaa-carousel__meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.mbaa-carousel__date, .mbaa-carousel__time,
.mbaa-carousel .wp-block-paragraph.mbaa-carousel__date,
.mbaa-carousel .wp-block-paragraph.mbaa-carousel__time {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: clamp(0.7rem, 1.5vw, 0.875rem) !important;
  color: #FFFDF3 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Bouton voir tous */
.mbaa-carousel__voir-tous .wp-block-button__link {
  background: #191919 !important;
  color: #FFFDF3 !important;
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: var(--fs-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 1rem 2.5rem !important;
  border-radius: 0 !important;
  border: 1px solid #191919 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.mbaa-carousel__voir-tous-arrow {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  filter: invert(1) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   7. GRILLE EXPLORER
   ══════════════════════════════════════════════════════════════════════════ */
.mbaa-explore-grid__layout {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 0.5rem !important;
}

.mbaa-explore-card.wp-block-cover {
  overflow: hidden;
  cursor: pointer;
  border-radius: 0 !important;
}

.mbaa-explore-card--large.wp-block-cover {
  grid-column: span 7 !important;
  min-height: 420px !important;
}

.mbaa-explore-card--medium.wp-block-cover {
  grid-column: span 5 !important;
  min-height: 300px !important;
}

.mbaa-explore-card--small.wp-block-cover {
  grid-column: span 4 !important;
  min-height: 240px !important;
}

.mbaa-explore-card__title,
.mbaa-explore-card .wp-block-heading.mbaa-explore-card__title {
  font-family: "Neutraface2Display-Titling", sans-serif !important;
  font-size: clamp(1rem, 2vw, 1.5rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #FFFDF3 !important;
  margin: 0 0 0.4rem !important;
  line-height: 1.1 !important;
}

.mbaa-explore-card__text,
.mbaa-explore-card .wp-block-paragraph.mbaa-explore-card__text {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: var(--fs-base) !important;
  color: rgba(255, 253, 243, 0.8) !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. SECTION NUMÉROTÉE
   ══════════════════════════════════════════════════════════════════════════ */
.mbaa-compo-num__eyebrow,
.mbaa-compo-num .wp-block-paragraph.mbaa-compo-num__eyebrow {
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: var(--fs-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #ae9a79 !important;
  margin: 0 0 1.5rem !important;
}

.mbaa-compo-num__block {
  margin-bottom: 2rem !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid rgba(25, 25, 25, 0.12) !important;
}

.mbaa-compo-num__block:last-of-type {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

.mbaa-compo-num__num,
.mbaa-compo-num .wp-block-paragraph.mbaa-compo-num__num {
  font-family: "Neutraface2Display-Titling", sans-serif !important;
  font-size: 3.5rem !important;
  color: rgba(25, 25, 25, 0.1) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.mbaa-compo-num__title,
.mbaa-compo-num .wp-block-heading.mbaa-compo-num__title {
  font-family: "Neutraface2Display-Bold", sans-serif !important;
  font-size: 1.25rem !important;
  color: #191919 !important;
  margin: -0.75rem 0 0.5rem !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}

.mbaa-compo-num__body,
.mbaa-compo-num .wp-block-paragraph.mbaa-compo-num__body {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: var(--fs-md) !important;
  color: #666 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.mbaa-compo-num__img .wp-block-image img,
.mbaa-compo-num__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 4/5 !important;
  display: block !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PATTERNS EXISTANTS — Carte artiste, Galerie, Panels, Accordéon, Texte-image
   ══════════════════════════════════════════════════════════════════════════ */
.techniques-grid-section {
  padding: 3rem 2rem;
}

.other-works__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.other-works__icon {
  color: #ae9a79;
  font-size: 1rem;
  margin: 0;
}

.section__title--with-icon {
  font-family: "Neutraface2Display-Titling", sans-serif !important;
  font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
  font-weight: 700 !important;
  color: #191919 !important;
  margin: 0 !important;
}

.techniques-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}

.technique-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  cursor: pointer;
}

.technique-card .wp-block-image, .technique-card-image {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.technique-card .wp-block-image img, .technique-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.technique-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.75) 100%);
  z-index: 1;
}

.technique-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  z-index: 2;
  color: #fff;
}

.technique-card-title {
  font-family: "Neutraface2Display-Titling", sans-serif !important;
  font-size: 1.25rem !important;
  color: #fff !important;
  margin: 0 0 0.5rem !important;
}

.technique-card-description {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: var(--fs-md) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
}

.mbaa-masonry-section,
.mbaa-gallery-section {
  padding: 3rem 2rem;
}

/* ── GALERIE MASONRY — identique à .gallery-grid du site ── */
/* Le conteneur interne du groupe Gutenberg reçoit le column-count */
.mbaa-gallery-grid > .wp-block-group__inner-container,
.mbaa-gallery-grid .block-editor-block-list__layout {
  column-count: 4 !important;
  column-gap: 1.5rem !important;
  display: block !important;
}

/* Chaque item — break-inside + inline-block obligatoire pour column-count */
.mbaa-gallery-item.wp-block-image,
.mbaa-gallery-grid .wp-block-image {
  break-inside: avoid !important;
  page-break-inside: avoid !important;
  display: inline-block !important;
  width: 100% !important;
  margin-bottom: 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
  background: rgb(253, 253, 253) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}

/* Image — hauteur naturelle = vrai masonry */
.mbaa-gallery-item.wp-block-image img,
.mbaa-gallery-grid .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 5px !important;
}

/* Dans l'éditeur, les blocs ont un wrapper supplémentaire — on le force aussi */
.mbaa-gallery-grid [data-type="core/image"] {
  break-inside: avoid !important;
  display: inline-block !important;
  width: 100% !important;
  margin-bottom: 1.5rem !important;
}

/* Responsive */
@media (max-width: 1200px) {
  .mbaa-gallery-grid > .wp-block-group__inner-container,
  .mbaa-gallery-grid .block-editor-block-list__layout {
    column-count: 3 !important;
  }
}
@media (max-width: 900px) {
  .mbaa-gallery-grid > .wp-block-group__inner-container,
  .mbaa-gallery-grid .block-editor-block-list__layout {
    column-count: 2 !important;
  }
}
@media (max-width: 560px) {
  .mbaa-gallery-grid > .wp-block-group__inner-container,
  .mbaa-gallery-grid .block-editor-block-list__layout {
    column-count: 1 !important;
  }
}
/* Colonnes masonry (ancien pattern) — conservé pour compatibilité */
.mbaa-masonry-cols.wp-block-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
}

.mbaa-masonry-col.wp-block-column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  align-self: flex-start !important;
}

.mbaa-masonry-col--offset.wp-block-column {
  margin-top: 2.5rem !important;
}

.mbaa-masonry-col .wp-block-image {
  margin: 0 !important;
  width: 100% !important;
}

.mbaa-masonry-col .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 10px;
}

/* ── 8. GALERIE — topbar & filtres ── */
.gallery-topbar__label,
.gallery-topbar__count {
  font-family: var(--font-h1-h2);
}

.filter-btn {
  font-family: var(--font-h3-h4-h5);
}

.subfilter-pill,
.subfilters-label {
  font-family: var(--font-secondary);
}

.gallery-item__meta,
.gallery-item__index {
  font-family: var(--font-secondary);
}

.gallery-grid-header__tag {
  font-family: var(--font-secondary);
}

.gallery-empty p {
  font-family: var(--font-body);
}

/* ── 9. TABLE MOUVEMENTS ── */
.movements-table-title {
  font-family: var(--font-h1-h2);
}

.movements-table th {
  font-family: var(--font-h3-h4-h5);
}

.movements-table td {
  font-family: var(--font-body);
}

/* ── 10. CARTES TECHNIQUES ── */
.technique-card-title {
  font-family: var(--font-h1-h2);
}

.technique-card-description {
  font-family: var(--font-body);
}

/* ── 11. ÉLÉMENTS PÉDAGOGIQUES ── */
.pedagogical-element-text {
  font-family: var(--font-body);
}

/* ── 12. APPRÉCIATION ARTISTIQUE ── */
.art-appreciation-title {
  font-family: var(--font-h3-h4-h5);
}

.art-appreciation-text {
  font-family: var(--font-body);
}

/* ── 13. BIBLIOTHÈQUE — bannière ── */
.bibliotheque__banner-title {
  font-family: var(--font-h1-h2);
}

.bibliotheque__banner-subtitle {
  font-family: var(--font-h3-h4-h5);
}

.bibliotheque__banner-description {
  font-family: var(--font-body);
}

/* ── 14. COMPOSANTS HERO LEGACY ── */
.reserve-btn {
  font-family: var(--font-secondary);
}

.cta-text {
  font-family: var(--font-secondary);
}

/* ── 15. SEARCH OVERLAY ── */
.search-overlay__input {
  font-family: var(--font-body);
}

.other-works {
  padding: 3rem 2rem;
}

.panels {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
}

.panel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
}

.panel .wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.panel .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 1;
}

.panel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  z-index: 2;
  color: #fff;
}

.panel-content .wp-block-heading {
  font-family: "Neutraface2Display-Titling", sans-serif !important;
  font-size: 1.25rem !important;
  color: #fff !important;
  margin: 0 0 0.5rem !important;
}

.panel-content .wp-block-paragraph {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: var(--fs-base) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
}

.mbaa-accordeon-visuel {
  gap: 4rem;
  align-items: center;
  padding: 4rem 2rem;
}

.mbaa-accordeon-item {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

.mbaa-accordeon-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important;
  font-weight: 300 !important;
  color: #191919 !important;
}

.mbaa-accordeon-item > summary::-webkit-details-marker {
  display: none;
}

.mbaa-accordeon-item__separator {
  border: none;
  height: 1px;
  background: rgba(25, 25, 25, 0.2);
  margin: 0;
}

.mbaa-accordeon-item .wp-block-paragraph {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: var(--fs-md) !important;
  color: #555 !important;
  line-height: 1.75 !important;
  padding: 0.75rem 0 1.5rem !important;
  margin: 0 !important;
}

.mbaa-cols--texte-image, .mbaa-cols--image-texte {
  gap: 4rem;
  align-items: center;
}

.mbaa-col--texte .mbaa-surtitre {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #ae9a79 !important;
  margin: 0 !important;
}

.mbaa-col--texte .mbaa-titre,
.mbaa-col--texte .wp-block-heading.mbaa-titre {
  font-family: "Neutraface2Display-Titling", sans-serif !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: 700 !important;
  color: #191919 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

.mbaa-actions .wp-block-button__link {
  background-color: #191919 !important;
  color: #FFFDF3 !important;
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 2rem !important;
  border-radius: 0 !important;
  border: 1px solid #191919 !important;
}

.mbaa-col--image .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 4/3 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .mbaa-explore-card--large.wp-block-cover {
    grid-column: span 12 !important;
  }
  .mbaa-explore-card--medium.wp-block-cover,
  .mbaa-explore-card--small.wp-block-cover {
    grid-column: span 6 !important;
  }
  .techniques-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .mbaa-section {
    padding: 2.5rem 1rem;
  }
  .mbaa-banniere {
    flex-direction: column !important;
  }
  .mbaa-banniere__description {
    display: none;
    padding-left: 0;
  }
  .mbaa-explore-grid__layout {
    grid-template-columns: 1fr !important;
  }
  .mbaa-explore-card--large.wp-block-cover,
  .mbaa-explore-card--medium.wp-block-cover,
  .mbaa-explore-card--small.wp-block-cover {
    grid-column: span 1 !important;
  }
  .techniques-grid, .panels {
    grid-template-columns: 1fr !important;
  }
  .mbaa-accordeon-visuel {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  .mbaa-carousel__meta {
    flex-direction: row !important;
    justify-content: space-between;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   TIMELINE MOUVEMENTS ARTISTIQUES — .mbaa-tl-*
   Style identique à .mvt-tl-* du site
   ══════════════════════════════════════════════════════════════════════════ */
.mbaa-tl-section {
  padding: 4rem 0 !important;
  background: #FFFDF3 !important;
  overflow: hidden !important;
}

/* Header */
.mbaa-tl-header {
  padding: 0 3rem 2.5rem !important;
}

.mbaa-tl-eyebrow,
.mbaa-tl-section .wp-block-paragraph.mbaa-tl-eyebrow {
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: #ae9a79 !important;
  margin: 0 0 0.5rem !important;
  display: block !important;
}

.mbaa-tl-title,
.mbaa-tl-section .wp-block-heading.mbaa-tl-title {
  font-family: "Neutraface2Display-Titling", sans-serif !important;
  font-size: clamp(1.2rem, 5vw, 2rem) !important;
  font-weight: 400 !important;
  color: #191919 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  text-transform: none !important;
}

/* Track wrapper */
.mbaa-tl-track-wrap {
  padding: 0 3rem !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Track — ligne horizontale en fond */
.mbaa-tl-track.wp-block-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  position: relative !important;
  padding-top: 2.5rem !important;
  padding-bottom: 0.75rem !important;
  gap: 3rem !important;
  overflow-x: auto !important;
}

.mbaa-tl-track.wp-block-group::before {
  content: "" !important;
  position: absolute !important;
  top: calc(2.5rem + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, rgba(174, 154, 121, 0.35) 4%, rgba(174, 154, 121, 0.35) 96%, transparent) !important;
}

/* Step individuel */
.mbaa-tl-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 160px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
}

/* Point de la timeline */
.mbaa-tl-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #FFFDF3 !important;
  border: 1.5px solid rgba(174, 154, 121, 0.45) !important;
  margin-bottom: 0.75rem !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.mbaa-tl-step--active .mbaa-tl-dot {
  background: #ae9a79 !important;
  border-color: #ae9a79 !important;
  transform: scale(1.5) !important;
  box-shadow: 0 0 0 4px rgba(174, 154, 121, 0.18) !important;
}

/* Période */
.mbaa-tl-period,
.mbaa-tl-step .wp-block-paragraph.mbaa-tl-period {
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.1em !important;
  color: #ae9a79 !important;
  opacity: 0.7 !important;
  margin: 0 0 0.4rem !important;
  text-align: center !important;
}

.mbaa-tl-step--active .mbaa-tl-period,
.mbaa-tl-step--active .wp-block-paragraph.mbaa-tl-period {
  opacity: 1 !important;
}

/* Nom du mouvement */
.mbaa-tl-name,
.mbaa-tl-step .wp-block-paragraph.mbaa-tl-name {
  font-family: "Neutraface2Display-Bold", sans-serif !important;
  font-size: clamp(1.7rem, 2.5vw, 1.4rem) !important;
  font-weight: 600 !important;
  color: rgba(25, 25, 25, 0.4) !important;
  text-align: center !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 0.3rem !important;
}

.mbaa-tl-step--active .mbaa-tl-name,
.mbaa-tl-step--active .wp-block-paragraph.mbaa-tl-name {
  color: #191919 !important;
}

/* Barre de progression */
.mbaa-tl-progress {
  margin: 1.5rem 0 0 !important;
  height: 1px !important;
  background: rgba(25, 25, 25, 0.1) !important;
  position: relative !important;
}

.mbaa-tl-progress-fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  background: #ae9a79 !important;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Carte détail */
.mbaa-tl-detail-wrap {
  margin: 2.5rem 3rem 0 !important;
}

.mbaa-tl-detail {
  display: grid !important;
  grid-template-columns: 220px 1fr auto !important;
  gap: 3rem !important;
  align-items: start !important;
  padding: 1.5rem !important;
  background: rgba(25, 25, 25, 0.04) !important;
  border: 1.5px solid #ae9a79 !important;
  border-radius: 10px !important;
}

.mbaa-tl-detail-period,
.mbaa-tl-detail .wp-block-paragraph.mbaa-tl-detail-period {
  font-family: "Neutraface2Text-Demi", sans-serif !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #ae9a79 !important;
  margin: 0 0 0.4rem !important;
  display: block !important;
}

.mbaa-tl-detail-name,
.mbaa-tl-detail .wp-block-heading.mbaa-tl-detail-name {
  font-family: "Neutraface2Display-Titling", sans-serif !important;
  font-size: clamp(1.4rem, 3vw, 2.4rem) !important;
  font-weight: 400 !important;
  color: #191919 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-transform: none !important;
}

.mbaa-tl-detail-desc,
.mbaa-tl-detail .wp-block-paragraph.mbaa-tl-detail-desc {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem) !important;
  color: rgba(25, 25, 25, 0.6) !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

.mbaa-tl-detail-artists {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.4rem 0.75rem !important;
  align-self: start !important;
}

.mbaa-tl-detail-artist,
.mbaa-tl-detail-artists .wp-block-paragraph.mbaa-tl-detail-artist {
  font-family: "Neutraface2Text-Book", sans-serif !important;
  font-size: clamp(0.72rem, 0.85vw, 0.9rem) !important;
  letter-spacing: 0.05em !important;
  color: rgba(25, 25, 25, 0.5) !important;
  padding-left: 0.65rem !important;
  border-left: 1px solid rgba(174, 154, 121, 0.3) !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .mbaa-tl-header,
  .mbaa-tl-track-wrap,
  .mbaa-tl-detail-wrap {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .mbaa-tl-detail {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .mbaa-tl-step {
    min-width: 120px !important;
  }
}
/* ══════════════════════════════════════════════════════
   SINGLE ACTUALITÉ — style Citadelle (sa__)
══════════════════════════════════════════════════════ */
/* Hero pleine largeur */
.sa__hero {
  position: relative;
  height: clamp(280px, 40vh, 420px);
  overflow: hidden;
  background: var(--black);
}

.sa__hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s ease;
}

.sa__hero:hover .sa__hero-img {
  transform: scale(1.03);
}

.sa__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%);
}

.sa__hero-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sa__hero-nav {
  position: relative;
  z-index: 20;
}

.sa__hero-content {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sa__hero-label {
  font-family: var(--font-primary);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: #FFFDF3;
  letter-spacing: -0.03em;
}

.sa__hero-cat {
  display: inline-block;
  padding: 4px 12px;
  font-family: var(--font-primary);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 6px;
}

/* Corps */
.sa__body {
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 5vw, 5rem);
  background: #fff;
}

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

/* Lien retour */
.sa__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color 0.2s;
}

.sa__back:hover {
  color: var(--black);
}

.sa__back svg {
  flex-shrink: 0;
}

/* Layout 2 colonnes */
.sa__layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 860px) {
  .sa__layout {
    grid-template-columns: 1fr;
  }
}
/* Sidebar */
.sa__sidebar-img {
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.sa__sidebar-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Carte infos pratiques */
.sa__info-card {
  background: #f8f8f8;
  border-radius: 6px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.sa__info-status {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  color: #fff;
}

.sa__info-status--encours {
  background: #276749;
}

.sa__info-status--avenir {
  background: #2563a8;
}

.sa__info-status--passee {
  background: #6b7280;
}

.sa__info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.sa__info-row svg {
  flex-shrink: 0;
  color: #999;
  margin-top: 2px;
}

.sa__info-label {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999;
  margin-bottom: 0.15rem;
}

.sa__info-value {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--black);
  line-height: 1.4;
}

/* CTA Réserver */
.sa__info-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.2rem;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s, transform 0.2s;
  margin-top: 0.5rem;
}

.sa__info-cta:hover {
  background: #7a6514;
  transform: translateY(-1px);
}

.sa__info-cta svg {
  flex-shrink: 0;
}

/* Contenu principal */
.sa__date {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.sa__title {
  font-family: var(--font-primary);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--black);
  margin: 0 0 0.8rem;
}

.sa__dates-line {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sa__text {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

.sa__text h2, .sa__text h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--black);
  margin: 2.5rem 0 0.8rem;
  font-size: 1.3rem;
}

.sa__text p {
  margin-bottom: 1.3rem;
}

.sa__text img {
  max-width: 100%;
  border-radius: 6px;
  margin: 1.5rem 0;
}

.sa__text blockquote {
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: #f8f8f8;
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: #555;
}

.sa__text ul, .sa__text ol {
  padding-left: 1.5rem;
  margin-bottom: 1.3rem;
}

.sa__text li {
  margin-bottom: 0.4rem;
}

/* Actus liées */
.sa__related {
  background: #f5f5f5;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 5rem);
}

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

.sa__related-heading {
  font-family: var(--font-primary);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 2rem;
}

/* ══════════════════════════════════════════════════════
   HEADER COMPACT — Page Actualités (bloc minimaliste)
══════════════════════════════════════════════════════ */
.actu-header {
  background: var(--black);
  padding: 0 0 0;
  position: relative;
}

.actu-header__nav {
  position: relative;
  z-index: 20;
}

.actu-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(5rem, 10vw, 7rem) clamp(1.5rem, 5vw, 5rem) clamp(2.5rem, 4vw, 3.5rem);
}

.actu-header__title {
  font-family: var(--font-primary);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #FFFDF3;
  margin: 0 0 0.6rem;
}

.actu-header__sub {
  font-family: var(--font-primary);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: rgba(255, 253, 243, 0.55);
  line-height: 1.5;
  margin: 0 0 1.5rem;
  max-width: 480px;
}

.actu-header__stats {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.actu-header__stat {
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.03em;
}

.actu-header__stat-sep {
  color: rgba(255, 253, 243, 0.25);
  font-size: 0.9rem;
}

/* ── Contrôles admin-style (tri, par page, compteur) ─────── */
.actu-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 253, 243, 0.06);
  flex-wrap: wrap;
}

.actu-controls__count {
  font-family: var(--font-primary);
  font-size: 0.78rem;
  color: rgba(255, 253, 243, 0.5);
  white-space: nowrap;
}

.actu-controls__right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.actu-controls__sort,
.actu-controls__per-page {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.actu-controls__label {
  font-family: var(--font-primary);
  font-size: 0.72rem;
  color: rgba(255, 253, 243, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.actu-controls__btn {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: rgba(255, 253, 243, 0.55);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 253, 243, 0.1);
  transition: all 0.2s;
}

.actu-controls__btn:hover {
  color: #FFFDF3;
  border-color: rgba(255, 253, 243, 0.25);
}

.actu-controls__btn--active {
  background: var(--gold);
  color: #FFFDF3;
  border-color: var(--gold);
}

@media (max-width: 600px) {
  .actu-controls {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ── Badge statut sur les cartes ─────────────────────────── */
.actu-card__status {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: var(--font-primary);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  color: #fff;
  z-index: 2;
}

.actu-card__status--encours {
  background: #276749;
}

.actu-card__status--avenir {
  background: #2563a8;
}

.actu-card__status--passee {
  background: #6b7280;
}

/* ── Pagination ──────────────────────────────────────────── */
.actu-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.actu-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--black);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  transition: all 0.2s;
}

.actu-pagination__btn:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.actu-pagination__btn svg {
  flex-shrink: 0;
}

.actu-pagination__pages {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.actu-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s;
}

.actu-pagination__page:hover {
  background: rgba(0, 0, 0, 0.06);
}

.actu-pagination__page--active {
  background: var(--gold);
  color: #fff;
  font-weight: 700;
}

.actu-pagination__page--active:hover {
  background: var(--gold);
}

.actu-pagination__dots {
  font-family: var(--font-primary);
  font-size: 0.82rem;
  color: #999;
  padding: 0 0.3rem;
}

.actu-pagination__info {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  color: #888;
  white-space: nowrap;
  margin: 0 0.5rem;
}

.actu-empty__reset {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}

.actu-empty__reset:hover {
  color: var(--black);
}

/* Filtres : pills en liens (au lieu de buttons) */
a.actu-filter-pill {
  text-decoration: none;
}

/* Lieu dans les cartes */
.actu-card__lieu {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: #999;
  margin: 0.2rem 0 0;
}

.actu-card__lieu svg {
  flex-shrink: 0;
  color: #bbb;
}

@keyframes heroScrollBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
.actu-featured {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 5rem);
}

.actu-featured__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 768px) {
  .actu-featured__container {
    grid-template-columns: 1fr;
  }
}
.actu-featured__media {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #e8e8e8;
}

.actu-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.actu-featured:hover .actu-featured__img {
  transform: scale(1.03);
}

.actu-featured__img--empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgb(221, 221, 221), rgb(237, 237, 237));
}

.actu-featured__media-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--gold);
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
}

.actu-featured__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.actu-featured__eyebrow {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.actu-featured__cat {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-primary);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFDF3;
  border-radius: 6px;
  align-self: flex-start;
}

.actu-featured__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--black);
  margin: 0;
}

.actu-featured__meta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.actu-featured__meta-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: #666666;
}

.actu-featured__meta-item svg {
  flex-shrink: 0;
  color: var(--gold);
}

.actu-featured__price-tag {
  font-weight: 600;
  color: var(--black);
}

.actu-featured__desc {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.5;
  color: #333333;
  margin: 0;
}

.actu-featured__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.actu-featured__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  background: var(--black);
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s, transform 0.2s;
}

.actu-featured__btn-primary:hover {
  background: var(--gold);
  transform: translateY(-2px);
}

.actu-featured__btn-primary .actu-featured__btn-icon {
  width: 13px;
  filter: invert(1);
}

.actu-featured__btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.75rem;
  background: transparent;
  color: var(--black);
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(25, 25, 25, 0.2);
  border-radius: 6px;
  transition: border-color 0.2s, color 0.2s;
  cursor: pointer;
}

.actu-featured__btn-secondary:hover {
  border-color: var(--black);
  color: var(--black);
}

/* ── Bouton Réserver (vedette) ──────────────────────────────── */
.actu-featured__btn-reservation {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  background: var(--gold);
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.2s;
}

.actu-featured__btn-reservation:hover {
  background: #7a6514;
  transform: translateY(-2px);
}

.actu-featured__btn-reservation svg {
  flex-shrink: 0;
}

/* ── Countdown sur cartes À venir ───────────────────────────── */
.actu-card__countdown {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--gold);
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  z-index: 2;
}

.actu-card__countdown--urgent {
  background: #c0392b;
  animation: mbaa-pulse 1.5s ease-in-out infinite;
}

@keyframes mbaa-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}
/* ── Badge relatif cartes Passées ───────────────────────────── */
.actu-card__badge--past {
  background: rgba(55, 65, 81, 0.85);
  color: rgba(255, 253, 243, 0.8);
  font-family: var(--font-primary);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  position: absolute;
  top: 10px;
  left: 10px;
}

/* ══════════════════════════════════════════════════════
   S2.1 — TIMELINE VERTICALE (section À venir)
══════════════════════════════════════════════════════ */
.actu-timeline {
  position: relative;
  padding: 2rem 0;
}

/* Ligne centrale dorée */
.actu-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(149, 126, 24, 0.2) 100%);
  transform: translateX(-50%);
}

.actu-timeline__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 50%;
  padding: 0 2.5rem 3rem;
  opacity: 0;
  transform: translateY(30px);
  animation: mbaa-tl-fadein 0.5s ease forwards;
}

.actu-timeline__step:nth-child(1) {
  animation-delay: 0.1s;
}

.actu-timeline__step:nth-child(2) {
  animation-delay: 0.2s;
}

.actu-timeline__step:nth-child(3) {
  animation-delay: 0.3s;
}

.actu-timeline__step:nth-child(4) {
  animation-delay: 0.4s;
}

.actu-timeline__step:nth-child(5) {
  animation-delay: 0.5s;
}

.actu-timeline__step:nth-child(6) {
  animation-delay: 0.6s;
}

@keyframes mbaa-tl-fadein {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Gauche : aligné à droite de la moitié gauche */
.actu-timeline__step--left {
  margin-left: 0;
  justify-content: flex-end;
  padding-right: 3rem;
  padding-left: 0;
}

/* Droite : aligné à gauche de la moitié droite */
.actu-timeline__step--right {
  margin-left: 50%;
  justify-content: flex-start;
  padding-left: 3rem;
  padding-right: 0;
}

/* Point sur la ligne */
.actu-timeline__marker {
  position: absolute;
  top: 0.5rem;
  z-index: 2;
}

.actu-timeline__step--left .actu-timeline__marker {
  right: -9px;
}

.actu-timeline__step--right .actu-timeline__marker {
  left: -9px;
}

.actu-timeline__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 1.5px solid #f8f8f8;
  box-shadow: 0 0 0 3px var(--gold);
  transition: transform 0.3s, box-shadow 0.3s;
}

.actu-timeline__step:hover .actu-timeline__dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 6px rgba(149, 126, 24, 0.25);
}

/* Carte */
.actu-timeline__card {
  display: block;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s, box-shadow 0.3s;
  max-width: 420px;
  width: 100%;
}

.actu-timeline__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.actu-timeline__thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.actu-timeline__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.actu-timeline__card:hover .actu-timeline__thumb img {
  transform: scale(1.05);
}

.actu-timeline__cat {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
}

.actu-timeline__body {
  padding: 1.2rem 1.4rem;
}

.actu-timeline__month {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.actu-timeline__title {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.actu-timeline__lieu {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: #888;
  margin: 0 0 0.4rem;
}

.actu-timeline__lieu svg {
  flex-shrink: 0;
  color: #aaa;
}

.actu-timeline__excerpt {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  line-height: 1.5;
  color: #666;
  margin: 0 0 0.6rem;
}

.actu-timeline__link-label {
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  transition: letter-spacing 0.2s;
}

.actu-timeline__card:hover .actu-timeline__link-label {
  letter-spacing: 0.04em;
}

/* Responsive timeline */
@media (max-width: 900px) {
  .actu-timeline::before {
    left: 24px;
  }
  .actu-timeline__step,
  .actu-timeline__step--left,
  .actu-timeline__step--right {
    width: 100%;
    margin-left: 0;
    padding-left: 56px;
    padding-right: 0;
    justify-content: flex-start;
  }
  .actu-timeline__step--left .actu-timeline__marker,
  .actu-timeline__step--right .actu-timeline__marker {
    left: 15px;
    right: auto;
  }
  .actu-timeline__card {
    max-width: 100%;
  }
}
/* ══════════════════════════════════════════════════════
   S2.2 — CAROUSEL HORIZONTAL (section Passées)
══════════════════════════════════════════════════════ */
.actu-carousel {
  position: relative;
  overflow: hidden;
}

.actu-carousel__track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.5rem 0 1.5rem;
}

.actu-carousel__track::-webkit-scrollbar {
  display: none;
}

.actu-carousel__track .actu-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  transition: filter 0.4s, opacity 0.4s;
}

/* Désaturation progressive des plus anciennes */
.actu-carousel__track .actu-card:nth-child(n+4) {
  filter: grayscale(30%);
  opacity: 0.85;
}

.actu-carousel__track .actu-card:nth-child(n+6) {
  filter: grayscale(60%);
  opacity: 0.7;
}

.actu-carousel__track .actu-card:hover {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}

/* Chevrons */
.actu-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s;
}

.actu-carousel:hover .actu-carousel__nav {
  opacity: 1;
}

.actu-carousel__nav--prev {
  left: 8px;
}

.actu-carousel__nav--next {
  right: 8px;
}

.actu-carousel__nav:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.actu-carousel__nav svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

@media (max-width: 600px) {
  .actu-carousel__track .actu-card {
    flex: 0 0 260px;
  }
  .actu-carousel__nav {
    display: none;
  }
}
/* ══════════════════════════════════════════════════════
   S2.3 — IMAGE REVEAL AU SCROLL (vedette)
══════════════════════════════════════════════════════ */
.actu-featured__media {
  position: relative;
  overflow: hidden;
}

.actu-featured__img {
  transition: filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.actu-featured__img--blur {
  filter: blur(20px);
  transform: scale(1.08);
}

.actu-featured__img--revealed {
  filter: blur(0);
  transform: scale(1);
}

/* Fade-in cascade sur le contenu */
.actu-featured__content > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.actu-featured--visible .actu-featured__content > * {
  opacity: 1;
  transform: translateY(0);
}

.actu-featured--visible .actu-featured__content > *:nth-child(1) {
  transition-delay: 0.1s;
}

.actu-featured--visible .actu-featured__content > *:nth-child(2) {
  transition-delay: 0.18s;
}

.actu-featured--visible .actu-featured__content > *:nth-child(3) {
  transition-delay: 0.26s;
}

.actu-featured--visible .actu-featured__content > *:nth-child(4) {
  transition-delay: 0.34s;
}

.actu-featured--visible .actu-featured__content > *:nth-child(5) {
  transition-delay: 0.42s;
}

.actu-featured--visible .actu-featured__content > *:nth-child(6) {
  transition-delay: 0.5s;
}

.actu-featured--visible .actu-featured__content > *:nth-child(7) {
  transition-delay: 0.58s;
}

/* ══════════════════════════════════════════════════════
   S4.2 — Shortcode [mbaa_actualites_recent]
══════════════════════════════════════════════════════ */
.mbaa-actualites-shortcode__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.mbaa-actualites-shortcode__card {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}

.mbaa-actualites-shortcode__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.mbaa-actualites-shortcode__card a {
  text-decoration: none;
  color: inherit;
}

.mbaa-actualites-shortcode__thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.mbaa-actualites-shortcode__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mbaa-actualites-shortcode__cat {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--gold);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--font-primary);
}

.mbaa-actualites-shortcode__body {
  padding: 1rem 1.2rem;
}

.mbaa-actualites-shortcode__body h3 {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
  color: var(--black);
}

.mbaa-actualites-shortcode__date {
  font-family: var(--font-primary);
  font-size: 0.78rem;
  color: #888;
}

.mbaa-actualites-shortcode__more {
  display: inline-block;
  margin-top: 1.2rem;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.mbaa-actualites-shortcode__more:hover {
  color: var(--black);
}

/* Page fiche œuvre */
.hero__title em {
  font-family: var(--font-light);
  font-weight: 300;
  font-style: italic;
  display: block;
}

/* ══════════════════════════════════════════════════════
   BARRE DE FILTRES — pills arrondies + panneau dépliable
══════════════════════════════════════════════════════ */
.actu-filters {
  background: transparent;
  padding: 1.2rem clamp(1.5rem, 5vw, 5rem);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.actu-filters__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.actu-filters__tabs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.actu-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1.1rem;
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #555;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  text-decoration: none;
}

.actu-tab::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg);
  transition: transform 0.25s;
  margin-top: 2px;
}

.actu-tab--active::after {
  transform: rotate(45deg);
  margin-top: -2px;
}

.actu-tab:hover {
  color: var(--black);
  border-color: rgba(0, 0, 0, 0.3);
}

.actu-tab--active {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.actu-tab--active:hover {
  background: var(--gold);
  color: #fff;
}

.actu-filters__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Bouton loupe — même style pill */
.actu-filters__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.7rem;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
  color: #555;
}

.actu-filters__search-btn:hover {
  color: var(--black);
  border-color: rgba(0, 0, 0, 0.3);
}

/* Bouton Filtrer — même style pill */
.actu-filters__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #555;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}

.actu-filters__toggle:hover {
  color: var(--black);
  border-color: rgba(0, 0, 0, 0.3);
}

.actu-filters__toggle--active {
  color: var(--gold);
  border-color: var(--gold);
}

.actu-filters__toggle--has-filters::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* Panneau dépliable */
.actu-filters__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.actu-filters__panel--open {
  max-height: 300px;
  padding: 1.25rem 0 1.5rem;
}

.actu-filters__panel-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
}

.actu-filters__group {
  margin-bottom: 1rem;
}

.actu-filters__group:last-child {
  margin-bottom: 0;
}

.actu-filters__group-label {
  font-family: var(--font-primary);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.6rem;
  display: block;
}

.actu-filters__group .actu-filter-pill {
  padding: 0.35rem 0.9rem;
  font-size: 0.75rem;
  background: none;
  color: #555;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.actu-filters__group .actu-filter-pill:hover {
  color: var(--black);
  border-color: rgba(0, 0, 0, 0.3);
  background: none;
}

.actu-filters__group .actu-filter-pill.actu-filter-pill--active {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.actu-filters__panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.actu-filters__result-count {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: #999;
}

/* Overlay recherche avec backdrop-blur */
.actu-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
  background: rgba(17, 17, 16, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.actu-search-overlay--open {
  opacity: 1;
  visibility: visible;
}

.actu-search-overlay__inner {
  width: 90%;
  max-width: 600px;
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.3s;
}

.actu-search-overlay--open .actu-search-overlay__inner {
  transform: translateY(0);
}

.actu-search-overlay__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: none;
  border: none;
  color: rgba(255, 253, 243, 0.6);
  cursor: pointer;
  transition: color 0.2s;
}

.actu-search-overlay__close:hover {
  color: #FFFDF3;
}

.actu-search-overlay__label {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.4);
  margin-bottom: 1.5rem;
}

.actu-search-overlay__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 253, 243, 0.2);
  outline: none;
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  padding: 0.5rem 0;
  text-align: center;
  transition: border-color 0.3s;
}

.actu-search-overlay__input:focus {
  border-color: var(--gold);
}

.actu-search-overlay__input::placeholder {
  color: rgba(255, 253, 243, 0.2);
}

.actu-search-overlay__hint {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  color: rgba(255, 253, 243, 0.45);
}

/* Pagination buttons (JS-generated) */
.actu-pagination__btn {
  background: none;
  cursor: pointer;
}

.actu-pagination__page {
  background: none;
  border: none;
  cursor: pointer;
}

.actu-filters__pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.actu-filter-pill {
  padding: 0.45rem 1.1rem;
  background: rgba(255, 253, 243, 0.08);
  color: rgba(255, 253, 243, 0.65);
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid rgba(255, 253, 243, 0.12);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.actu-filter-pill:hover {
  background: rgba(255, 253, 243, 0.15);
  color: #FFFDF3;
}

.actu-filter-pill--active {
  background: var(--gold);
  color: #FFFDF3;
  border-color: var(--gold);
}

a.actu-filter-pill {
  text-decoration: none;
}

.actu-filters__reset {
  font-family: var(--font-primary);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  text-decoration: none;
  transition: color 0.2s;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.actu-filters__reset:hover {
  color: var(--gold);
}

@media (max-width: 768px) {
  .actu-filters__tabs {
    flex-wrap: wrap;
  }
  .actu-tab {
    font-size: 0.72rem;
    padding: 0.4rem 0.9rem;
  }
}
@media (max-width: 480px) {
  .actu-filters {
    padding: 1rem;
  }
  .actu-tab {
    font-size: 0.68rem;
    padding: 0.35rem 0.75rem;
  }
  .actu-filters__toggle span {
    display: none;
  }
  .actu-filters__panel-inner {
    padding: 0 1rem;
  }
}
.actu-page-section {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 5rem);
}

.actu-page-section--avenir {
  background: rgb(248, 248, 248);
}

.actu-page-section--passees {
  background: rgb(244, 244, 244);
}

.actu-page-section__container {
  max-width: 1200px;
  margin: 0 auto;
}

.actu-page-section__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(25, 25, 25, 0.1);
}

.actu-page-section__title {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0;
}

.actu-page-section__title--passees {
  color: #666666;
}

.actu-page-section__count {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  color: #666666;
  background: rgba(25, 25, 25, 0.06);
  padding: 3px 10px;
  border-radius: 100px;
}

.actu-page-section__voir-tout {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--gold);
  text-decoration: none;
  margin-left: auto;
  transition: color 0.2s;
}

.actu-page-section__voir-tout:hover {
  color: var(--black);
}

.actu-card--featured .actu-card__thumb {
  aspect-ratio: 16/8;
}

.actu-card__badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--gold);
  color: #FFFDF3;
  font-family: var(--font-primary);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
}

.actu-card__badge--avenir {
  background: #2563a8;
}

.actu-card__excerpt {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  line-height: 1.55;
  color: #666666;
  margin: 0.4rem 0 0;
}

.actu-grid--passees {
  opacity: 0.8;
}

.actu-empty {
  font-family: var(--font-primary);
  font-size: 1rem;
  color: #666666;
  font-style: italic;
  padding: 3rem 0;
  text-align: center;
}

.admin-body {
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

.admin-container {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar {
  width: 250px;
  background: #2a2a2a;
  padding: 2rem 1.5rem;
  overflow-y: auto;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
}

@media (max-width: 768px) {
  .admin-sidebar {
    width: 200px;
    padding: 1.5rem 1rem;
  }
}
.sidebar-header {
  margin-bottom: 2rem;
}

.sidebar-btn-add {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--gold);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
}

.sidebar-btn-add:hover {
  background: var(--gold);
  transform: translateY(-2px);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.sidebar-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-link {
  display: block;
  padding: 0.8rem 1rem;
  color: #ccc;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--font-primary);
}

.sidebar-link:hover {
  background: rgba(149, 126, 24, 0.1);
  color: #fff;
}

.sidebar-link.active {
  background: var(--gold);
  color: white;
}

.admin-main {
  margin-left: 250px;
  flex: 1;
  padding: 2rem;
}

@media (max-width: 768px) {
  .admin-main {
    margin-left: 200px;
    padding: 1.5rem;
  }
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  gap: 2rem;
}

.admin-tabs {
  display: flex;
  gap: 1rem;
}

.admin-tab {
  padding: 0.7rem 1.2rem;
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
}

.admin-tab:hover {
  background: #f9f9f9;
}

.admin-tab.active {
  background: var(--gold);
  color: white;
  border-color: var(--gold);
}

.admin-user {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #2a2a2a;
  padding: 0.8rem 1.2rem;
  border-radius: 10px;
}

.admin-username {
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--font-primary);
}

.admin-search,
.admin-profile {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.4rem;
  transition: opacity 0.3s;
}

.admin-search:hover,
.admin-profile:hover {
  opacity: 0.7;
}

.admin-search .icon-admin-user {
  width: 35px;
  height: 40px;
}

.admin-profile .icon-admin-user {
  width: 28px;
  height: 35px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .admin-stats {
    grid-template-columns: 1fr;
  }
}
.stat-card {
  background: white;
  padding: 1.8rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.stat-label {
  font-size: 0.85rem;
  color: #888;
  font-weight: 500;
  margin-bottom: 0.8rem;
  font-family: var(--font-primary);
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.6rem;
  font-family: var(--font-primary);
}

.stat-change {
  font-size: 0.8rem;
  color: #666;
  font-family: var(--font-primary);
}

.admin-filters {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .admin-filters {
    flex-direction: row;
    align-items: center;
  }
}
.search-box {
  flex: 1;
  min-width: 300px;
}

.filter-input {
  width: 100%;
  padding: 0.9rem 1.2rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  transition: all 0.3s ease;
}

.filter-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(149, 126, 24, 0.1);
}

.filter-input::placeholder {
  color: #bbb;
}

.filter-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.7rem 1.2rem;
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.admin-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: white;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #eee;
  gap: 2rem;
}

@media (max-width: 768px) {
  .admin-actions {
    flex-direction: column;
    gap: 1rem;
  }
}
.action-count {
  font-size: 0.9rem;
  color: #666;
  font-family: var(--font-primary);
  white-space: nowrap;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.action-btn {
  padding: 0.7rem 1rem;
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
  font-weight: 500;
}

.action-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.admin-table-wrapper {
  background: white;
  border-radius: 0 0 8px 8px;
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table thead {
  background: var(--gold);
  color: white;
}

.admin-table th {
  padding: 1.2rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-table th:last-child {
  border-right: none;
}

.admin-table td {
  padding: 1.5rem 1.2rem;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
  font-family: var(--font-primary);
}

.admin-table td strong {
  color: var(--black);
  display: block;
  margin-bottom: 0.3rem;
}

.admin-table tbody tr {
  transition: background 0.2s ease;
}

.admin-table tbody tr:hover {
  background: #fafafa;
}

.table-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--gold);
}

.table-checkbox-all {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: white;
}

.table-image {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.table-image img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

.table-image .table-views {
  font-size: 0.75rem;
  color: #666;
  background: #f0f0f0;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
}

.table-id {
  font-size: 0.8rem;
  color: #999;
  margin: 0;
  font-weight: 300;
}

.status-badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-badge.online {
  background: rgba(149, 126, 24, 0.15);
  color: var(--gold);
}

.status-badge.brouillon {
  background: #ffeaa7;
  color: #d63031;
}

.progress-bar {
  height: 6px;
  background: #eee;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.4rem;
  max-width: 100px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold));
  border-radius: 6px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.75rem;
  color: #666;
}

@media (max-width: 1024px) {
  .admin-main {
    margin-left: 200px;
  }
  .admin-sidebar {
    width: 200px;
  }
}
.admin-section {
  display: none;
}

.admin-section[data-section=dashboard-table] {
  display: block;
}

.media-header {
  margin-bottom: 2rem;
}

.media-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .media-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .media-stats {
    grid-template-columns: 1fr;
  }
}
.media-stat {
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.media-stat-label {
  font-size: 0.8rem;
  color: #888;
  font-weight: 500;
  font-family: var(--font-primary);
}

.media-stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--black);
  font-family: var(--font-primary);
}

.media-stat-change {
  font-size: 0.75rem;
  color: #666;
  font-family: var(--font-primary);
}

.media-controls {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .media-controls {
    flex-direction: row;
    align-items: center;
  }
}
.media-search-input {
  width: 100%;
  padding: 0.9rem 1.2rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  transition: all 0.3s ease;
}

.media-search-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(149, 126, 24, 0.1);
}

.media-search-input::placeholder {
  color: #bbb;
}

.media-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: white;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #eee;
  gap: 2rem;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .media-action-bar {
    flex-direction: column;
    gap: 1rem;
  }
}
.media-selection-count {
  font-size: 0.9rem;
  color: #666;
  font-family: var(--font-primary);
  white-space: nowrap;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  background: white;
  padding: 1.5rem;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
@media (max-width: 480px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.media-card {
  background: white;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.media-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
  border-color: var(--gold);
}

.media-card-image {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background: #f5f5f5;
}

.media-card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

.media-card-image .media-checkbox {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--gold);
  background: white;
  border-radius: 6px;
  padding: 2px;
}

.media-card-info {
  padding: 1.2rem;
}

.media-card-info h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--black);
  margin: 0 0 0.6rem 0;
  font-family: var(--font-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-card-info p {
  font-size: 0.8rem;
  color: #666;
  margin: 0.4rem 0;
  font-family: var(--font-primary);
}

.media-size,
.media-dimensions {
  color: #888;
  font-size: 0.75rem;
}

.media-date {
  color: #999;
  font-size: 0.75rem;
  margin-top: 0.6rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.section-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--black);
  margin: 0;
  font-family: var(--font-primary);
}

.works-table-wrapper,
.users-table-wrapper,
.qr-table-wrapper {
  background: white;
  border-radius: 10px;
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.works-table,
.users-table,
.qr-table {
  width: 100%;
  border-collapse: collapse;
}

.works-table thead,
.users-table thead,
.qr-table thead {
  background: var(--gold);
  color: white;
}

.works-table th,
.users-table th,
.qr-table th {
  padding: 1.2rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.works-table th:last-child,
.users-table th:last-child,
.qr-table th:last-child {
  border-right: none;
}

.works-table td,
.users-table td,
.qr-table td {
  padding: 1.2rem;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
  font-family: var(--font-primary);
}

.works-table td strong,
.users-table td strong,
.qr-table td strong {
  color: var(--black);
}

.works-table tbody tr,
.users-table tbody tr,
.qr-table tbody tr {
  transition: background 0.2s ease;
}

.works-table tbody tr:hover,
.users-table tbody tr:hover,
.qr-table tbody tr:hover {
  background: #fafafa;
}

.works-checkbox,
.works-checkbox-all {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--gold);
}

.completion-badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.completion-badge.complete {
  background: rgba(149, 126, 24, 0.15);
  color: var(--gold);
}

.completion-badge.incomplete {
  background: #ffeaa7;
  color: #d63031;
}

.collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
}

@media (max-width: 768px) {
  .collections-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
.collection-card {
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.collection-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.collection-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.5rem 0;
  font-family: var(--font-primary);
}

.collection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.collection-count {
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: 600;
  font-family: var(--font-primary);
}

.collection-desc {
  font-size: 0.9rem;
  color: #666;
  margin: 0.5rem 0 1rem 0;
  font-family: var(--font-primary);
}

.collection-actions {
  display: flex;
  gap: 0.5rem;
}

.expositions-list {
  display: grid;
  gap: 2rem;
}

.exposition-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: grid;
  grid-template-columns: 300px 1fr;
  transition: all 0.3s ease;
}

.exposition-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .exposition-card {
    grid-template-columns: 1fr;
  }
}
.exposition-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: #f5f5f5;
}

.exposition-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exposition-info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.exposition-info h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.5rem 0;
  font-family: var(--font-primary);
}

.exposition-dates {
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  font-family: var(--font-primary);
}

.exposition-desc {
  font-size: 0.9rem;
  color: #666;
  margin: 0.5rem 0 1rem 0;
  font-family: var(--font-primary);
}

.exposition-meta {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #f0f0f0;
  color: #666;
  font-family: var(--font-primary);
}

.badge.active {
  background: rgba(149, 126, 24, 0.15);
  color: var(--gold);
}

.badge.archived {
  background: #e0e0e0;
  color: #999;
}

.exposition-actions {
  display: flex;
  gap: 0.5rem;
}

.analytics-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.popular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
}

@media (max-width: 768px) {
  .popular-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
.popular-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
}

.popular-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.popular-card .rank {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--gold);
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
}

.popular-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.popular-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  margin: 1rem;
  font-family: var(--font-primary);
}

.popular-card .artist {
  font-size: 0.9rem;
  color: #666;
  margin: 0 1rem;
  font-family: var(--font-primary);
}

.stats {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem 1rem 1rem;
  flex-wrap: wrap;
}

.stat-item {
  font-size: 0.8rem;
  background: #f0f0f0;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  color: #666;
  font-family: var(--font-primary);
}

.qr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.qr-stat-card {
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.qr-stat-card .stat-label {
  font-size: 0.85rem;
  color: #888;
  font-weight: 500;
  margin-bottom: 0.8rem;
  font-family: var(--font-primary);
}

.qr-stat-card .stat-big {
  font-size: 2rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.5rem;
  font-family: var(--font-primary);
}

.qr-stat-card .stat-change {
  font-size: 0.8rem;
  color: #666;
  font-family: var(--font-primary);
}

.engagement {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.engagement.high {
  background: rgba(149, 126, 24, 0.15);
  color: var(--gold);
}

.engagement.medium {
  background: #fff3cd;
  color: #856404;
}

.engagement.low {
  background: #f8d7da;
  color: #721c24;
}

.settings-container {
  display: flex;
  gap: 2rem;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.settings-nav {
  width: 220px;
  background: #f5f5f5;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 600px;
}

.settings-nav-btn {
  padding: 0.8rem 1rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #666;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
}

.settings-nav-btn:hover {
  background: #e8e8e8;
  color: #333;
}

.settings-nav-btn.active {
  background: var(--gold);
  color: white;
}

.settings-content {
  flex: 1;
  padding: 2rem;
  max-width: 800px;
}

.settings-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.5rem 0;
  font-family: var(--font-primary);
}

.settings-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--black);
  margin: 1.5rem 0 0.5rem 0;
  font-family: var(--font-primary);
}

.settings-content h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  font-family: var(--font-primary);
}

.settings-tab {
  display: none;
}

.settings-tab.active {
  display: block;
}

.settings-description {
  font-size: 0.85rem;
  color: #999;
  margin: 0 0 1.5rem 0;
  font-family: var(--font-primary);
}

.settings-form-group {
  margin-bottom: 1.5rem;
}

.settings-form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #333;
  font-family: var(--font-primary);
}

.settings-input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  transition: all 0.3s ease;
  background: white;
}

.settings-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(149, 126, 24, 0.1);
}

.settings-input::placeholder {
  color: #bbb;
}

.settings-toggle-group {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: #f9f9f9;
  border-radius: 6px;
  border: 1px solid #eee;
}

.toggle-info {
  flex: 1;
}

.toggle-info h4 {
  margin: 0 0 0.5rem 0;
}

.toggle-info p {
  font-size: 0.85rem;
  color: #999;
  margin: 0;
  font-family: var(--font-primary);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  margin-left: 1rem;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch input:checked + .slider {
  background: var(--gold);
}

.toggle-switch input:checked + .slider:before {
  transform: translateX(22px);
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.theme-selector {
  display: flex;
  gap: 2rem;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-option input[type=radio] {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

.theme-option label {
  cursor: pointer;
  font-family: var(--font-primary);
  color: #333;
}

.storage-info {
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: 6px;
  border: 1px solid #eee;
}

.storage-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--font-primary);
  color: #333;
}

.storage-amount {
  color: var(--gold);
  font-weight: 700;
}

.storage-bar {
  width: 100%;
  height: 12px;
  background: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.storage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold));
  transition: width 0.3s ease;
}

.storage-warning {
  background: #fff9e6;
  padding: 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #666;
  font-family: var(--font-primary);
}

.danger-title {
  color: #d63031 !important;
}

.danger-actions {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.danger-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: #fdf0f0;
  border-left: 4px solid #d63031;
  border-radius: 6px;
}

.danger-info {
  flex: 1;
}

.danger-info h4 {
  color: #d63031;
}

.danger-info p {
  font-size: 0.85rem;
  color: #999;
  margin: 0.5rem 0 0 0;
  font-family: var(--font-primary);
}

.btn-danger {
  padding: 0.7rem 1.2rem;
  background: #8b3a3a;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  margin-left: 1rem;
}

.btn-danger:hover {
  background: #a04040;
}

.btn-danger-secondary {
  padding: 0.7rem 1.2rem;
  background: white;
  color: #d63031;
  border: 1px solid #d63031;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  margin-left: 1rem;
}

.btn-danger-secondary:hover {
  background: #fff0f0;
}

.settings-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
  justify-content: flex-start;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #333;
  font-family: var(--font-primary);
  cursor: pointer;
}

.checkbox-label input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--gold);
}

.settings-desc {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 1rem 0;
  font-family: var(--font-primary);
}

.btn-primary,
.btn-secondary,
.btn-export {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
}

.btn-primary {
  background: var(--gold);
  color: white;
}

.btn-primary:hover {
  background: var(--gold);
  transform: translateY(-2px);
}

.btn-secondary {
  background: white;
  color: #333;
  border: 1px solid #ddd;
}

.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-export {
  background: white;
  border: 1px solid #ddd;
  color: #333;
  width: 100%;
  text-align: left;
  padding: 1rem;
  margin-bottom: 0.8rem;
}

.btn-export:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: #fafafa;
}

.action-link {
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
  text-decoration: none;
}

.action-link:hover {
  color: var(--gold);
}

.action-link.danger {
  color: #e74c3c;
}

.action-link.danger:hover {
  color: #e74c3c;
}

.export-import-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .export-import-container {
    grid-template-columns: 1fr;
  }
}
.export-section-card {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.export-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.5rem 0;
  font-family: var(--font-primary);
}

.export-subtitle {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 1.5rem 0;
  font-family: var(--font-primary);
}

.export-format-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.format-option {
  padding: 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.format-option .format-label {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  font-family: var(--font-primary);
}

.format-option .format-desc {
  font-size: 0.85rem;
  font-family: var(--font-primary);
}

.format-option:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.format-option-excel {
  background: #1e3a8a;
  border: none;
}

.format-option-excel .format-label,
.format-option-excel .format-desc {
  color: white;
}

.format-option-csv {
  background: #47564F;
  border: none;
}

.format-option-csv .format-label,
.format-option-csv .format-desc {
  color: white;
}

.format-option-json {
  background: #f9a8d4;
  border: none;
}

.format-option-json .format-label,
.format-option-json .format-desc {
  color: white;
}

.export-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.export-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.9rem;
  color: #333;
  font-family: var(--font-primary);
  cursor: pointer;
}

.export-checkbox-label input[type=checkbox] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #47564F;
}

.export-download-btn {
  padding: 1rem 2rem;
  background: #47564F;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
  width: 100%;
}

.export-download-btn:hover {
  background: #47564F;
  transform: translateY(-2px);
}

.import-section-card {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.import-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.import-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.import-icon-box svg {
  width: 24px;
  height: 24px;
}

.import-icon-green {
  background: #47564F;
}

.import-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--black);
  margin: 0;
  font-family: var(--font-primary);
}

.import-subtitle {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
  font-family: var(--font-primary);
}

.import-formats-banner {
  background: #47564F;
  color: white;
  padding: 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  text-align: center;
  font-family: var(--font-primary);
  font-weight: 500;
}

.import-dropzone {
  border: 1.5px dashed #ddd;
  border-radius: 10px;
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  background: #f9f9f9;
}

.import-dropzone:hover {
  border-color: #47564F;
  background: rgba(71, 86, 79, 0.05);
}

.import-dropzone .dropzone-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #47564F;
}

.import-dropzone .dropzone-text {
  font-size: 1.2rem;
  color: #333;
  margin: 0.5rem 0;
  font-family: var(--font-primary);
  font-weight: 500;
}

.import-dropzone .dropzone-hint {
  font-size: 0.85rem;
  color: #999;
  margin: 0.5rem 0 0 0;
  font-family: var(--font-primary);
}

.import-file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.import-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.import-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.9rem;
  color: #333;
  font-family: var(--font-primary);
  cursor: pointer;
}

.import-checkbox-label input[type=checkbox] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #47564F;
}

.import-launch-btn {
  padding: 1rem 2rem;
  background: #47564F;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
  width: 100%;
}

.import-launch-btn:hover {
  background: #47564F;
  transform: translateY(-2px);
}

.role-badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.role-badge.admin {
  background: rgba(149, 126, 24, 0.15);
  color: var(--gold);
}

.role-badge.moderator {
  background: #d4edda;
  color: #155724;
}

.role-badge.editor {
  background: #d1ecf1;
  color: #0c5460;
}

.fiche-list-view {
  display: block;
}

.fiche-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.fiche-list-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--black);
  margin: 0;
  font-family: var(--font-primary);
}

.fiche-search-bar {
  margin-bottom: 1.5rem;
}

.fiche-search-input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  background: white;
  transition: all 0.3s ease;
}

.fiche-search-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(149, 126, 24, 0.1);
}

.fiche-search-input::placeholder {
  color: #bbb;
}

.fiche-list-table-wrapper {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.fiche-list-table {
  width: 100%;
  border-collapse: collapse;
}

.fiche-list-table thead {
  background: #f9f9f9;
  border-bottom: 2px solid #eee;
}

.fiche-list-table thead th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-primary);
}

.fiche-list-table tbody tr {
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
}

.fiche-list-table tbody tr:hover {
  background: rgba(149, 126, 24, 0.02);
}

.fiche-list-table tbody tr td {
  padding: 1rem;
  font-size: 0.9rem;
  color: #333;
  font-family: var(--font-primary);
}

.fiche-row {
  cursor: pointer;
}

.fiche-row:hover {
  background: rgba(149, 126, 24, 0.05);
}

.fiche-status-online {
  display: inline-block;
  background: #d4edda;
  color: #155724;
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--font-primary);
}

.fiche-edit-btn {
  padding: 0.5rem 1rem;
  background: var(--gold);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-primary);
  transition: all 0.3s ease;
}

.fiche-edit-btn:hover {
  background: var(--gold);
  transform: translateY(-2px);
}

.fiche-detail-view {
  display: none;
}

.fiche-detail-view.active {
  display: block;
}

.fiche-list-view.hidden {
  display: none;
}

.fiche-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1rem 2rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.fiche-tabs {
  display: flex;
  gap: 1rem;
}

.fiche-tab {
  padding: 0.7rem 1.2rem;
  background: transparent;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.fiche-tab.active {
  background: var(--gold);
  color: white;
  border-color: var(--gold);
}

.fiche-tab:hover:not(.active) {
  border-color: var(--gold);
  color: var(--gold);
}

.fiche-back-btn {
  padding: 0.7rem 1.2rem;
  background: white;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.fiche-back-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.fiche-artwork-card {
  display: flex;
  gap: 3rem;
  background: white;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.fiche-artwork-left {
  flex: 0 0 300px;
}

.fiche-artwork-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
}

.fiche-artwork-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fiche-status-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--gold);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-primary);
}

.fiche-artwork-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.fiche-artwork-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.fiche-artwork-title h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--black);
  margin: 0;
  font-family: var(--font-primary);
}

.fiche-artwork-actions {
  display: flex;
  gap: 0.5rem;
}

.fiche-action-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiche-action-btn:hover {
  border-color: var(--gold);
  background: rgba(149, 126, 24, 0.05);
}

.fiche-content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 1rem;
}

.fiche-content::-webkit-scrollbar {
  width: 6px;
}

.fiche-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

.fiche-content::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 6px;
}

.fiche-content::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.fiche-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.fiche-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fiche-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--black);
  margin: 0;
  font-family: var(--font-primary);
}

.fiche-section-subtitle {
  font-size: 0.85rem;
  color: #999;
  margin: 0 0 1rem 0;
  font-family: var(--font-primary);
}

.fiche-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fiche-form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
  font-family: var(--font-primary);
}

.fiche-input {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  background: white;
  transition: all 0.3s ease;
}

.fiche-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(149, 126, 24, 0.1);
}

.fiche-hint {
  font-size: 0.75rem;
  color: #999;
  margin: 0;
  font-family: var(--font-primary);
  font-style: italic;
}

.fiche-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fiche-textarea {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  min-height: 150px;
  resize: vertical;
  transition: all 0.3s ease;
}

.fiche-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(149, 126, 24, 0.1);
}

.fiche-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.fiche-upload-area {
  border: 1.5px dashed #ddd;
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f9f9f9;
  position: relative;
}

.fiche-upload-area:hover {
  border-color: var(--gold);
  background: rgba(149, 126, 24, 0.02);
}

.fiche-upload-area h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin: 1rem 0 0.5rem 0;
  font-family: var(--font-primary);
}

.fiche-upload-icon {
  font-size: 2.5rem;
}

.fiche-upload-hint {
  font-size: 0.8rem;
  color: #999;
  margin: 0.5rem 0 0 0;
  font-family: var(--font-primary);
}

.fiche-file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.fiche-actions {
  display: flex;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.fiche-btn-primary {
  padding: 0.9rem 2rem;
  background: var(--gold);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.fiche-btn-primary:hover {
  background: var(--gold);
  transform: translateY(-2px);
}

.fiche-btn-secondary {
  padding: 0.9rem 2rem;
  background: white;
  color: var(--black);
  border: 1.5px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.fiche-btn-secondary:hover {
  border-color: var(--black);
  color: var(--black);
}

.fiche-btn-cancel {
  padding: 0.9rem 2rem;
  background: transparent;
  color: #999;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.fiche-btn-cancel:hover {
  border-color: #999;
  color: #666;
}

@media (max-width: 768px) {
  .admin-container {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    padding: 1.5rem;
    display: none;
  }
  .admin-main {
    margin-left: 0;
  }
  .admin-header {
    flex-direction: column;
  }
  .admin-tabs {
    width: 100%;
    justify-content: center;
  }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .exposition-card {
    grid-template-columns: 1fr;
  }
  .export-import-container {
    grid-template-columns: 1fr;
  }
  .fiche-artwork-card {
    flex-direction: column;
    gap: 1.5rem;
  }
  .fiche-artwork-left {
    flex: 1;
    max-width: 100%;
  }
  .fiche-two-columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .fiche-media-grid {
    grid-template-columns: 1fr;
  }
  .fiche-content {
    max-height: 100%;
  }
  .fiche-list-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .fiche-list-header h1 {
    font-size: 1.3rem;
  }
  .fiche-list-table {
    font-size: 0.8rem;
  }
  .fiche-list-table th,
  .fiche-list-table td {
    padding: 0.7rem;
  }
  .fiche-edit-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
  }
}
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  position: relative;
  overflow: hidden;
}

.login-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("./assets/Img/statues-groupe.webp") center/cover;
  opacity: 0.05;
  z-index: 0;
}

.login-box {
  width: 100%;
  max-width: 420px;
  padding: 3rem 2rem;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  z-index: 1;
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.login-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.login-header h1 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 0.5rem 0;
  letter-spacing: -1px;
  font-family: var(--font-primary);
}

.login-header p {
  font-size: 1.2rem;
  color: #999;
  margin: 0;
  font-weight: 300;
  transition: all 0.3s ease;
}

.login-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.role-btn {
  padding: 1.5rem;
  border: 1.5px solid #ddd;
  background: white;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-primary);
}

.role-btn:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(149, 126, 24, 0.15);
  transform: translateY(-4px);
}

.role-icon {
  font-size: 3rem;
}

.role-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--black);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--black);
}

.form-group input {
  padding: 0.9rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1.2rem;
  font-family: var(--font-primary);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: #fafafa;
}

.form-group input:focus {
  outline: none;
  border-color: var(--gold);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(149, 126, 24, 0.1);
}

.form-group input::placeholder {
  color: #bbb;
}

.form-remember {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.form-remember input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--gold);
}

.form-remember label {
  cursor: pointer;
  color: #666;
  margin: 0;
}

.login-button {
  padding: 1.2rem 1.5rem;
  background: var(--gold);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--font-primary);
  margin-top: 0.5rem;
}

.login-button:hover {
  background: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(149, 126, 24, 0.3);
}

.login-button:active {
  transform: translateY(0);
}

.login-back {
  padding: 0.8rem 1.2rem;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
}

.login-back:hover {
  background: rgba(149, 126, 24, 0.1);
}

.login-error {
  padding: 1rem;
  background: #fee;
  border: 1px solid #fcc;
  border-radius: 6px;
  color: #c33;
  font-size: 0.9rem;
  text-align: center;
}

.login-footer {
  text-align: center;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.login-footer p {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
}

.login-footer .login-link {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.login-footer .login-link:hover {
  color: var(--gold);
}

@media (max-width: 480px) {
  .login-box {
    border-radius: 10px;
    padding: 2rem 1.5rem;
  }
  .login-header h1 {
    font-size: 1.8rem;
  }
}
.visiteur-body {
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

.visiteur-container {
  display: flex;
  min-height: 100vh;
}

.visiteur-sidebar {
  width: 280px;
  background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
  padding: 2rem 1.5rem;
  overflow-y: auto;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (max-width: 768px) {
  .visiteur-sidebar {
    width: 220px;
    padding: 1.5rem 1rem;
  }
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(149, 126, 24, 0.1);
  border-radius: 12px;
}

.user-avatar {
  font-size: 2.5rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(149, 126, 24, 0.2);
  border-radius: 50%;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  color: white;
  font-weight: 600;
  margin: 0 0 0.3rem 0;
  font-size: 1.2rem;
  font-family: var(--font-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-email {
  color: #aaa;
  font-size: 0.75rem;
  margin: 0;
  font-family: var(--font-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-nav {
  flex: 1;
}

.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.sidebar-link {
  display: block;
  padding: 1rem 1.2rem;
  color: #ccc;
  text-decoration: none;
  font-size: 1.2rem;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--font-primary);
}

.sidebar-link:hover {
  background: rgba(149, 126, 24, 0.1);
  color: #fff;
}

.sidebar-link.active {
  background: var(--gold);
  color: white;
}

.sidebar-logout {
  padding: 0.9rem 1.2rem;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
}

.sidebar-logout:hover {
  background: rgba(149, 126, 24, 0.1);
}

.visiteur-main {
  margin-left: 280px;
  flex: 1;
  padding: 3rem 2rem;
}

@media (max-width: 768px) {
  .visiteur-main {
    margin-left: 220px;
    padding: 2rem 1.5rem;
  }
}
.visiteur-header {
  margin-bottom: 3rem;
}

.visiteur-header h1 {
  font-size: 2.5rem;
  color: var(--black);
  margin: 0 0 0.5rem 0;
  font-weight: 700;
  font-family: var(--font-primary);
}

.visiteur-header .welcome-text {
  color: #666;
  font-size: 1rem;
  margin: 0;
  font-family: var(--font-primary);
}

.content-section {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.section-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #eee;
}

.section-header h2 {
  color: var(--black);
  font-size: 1.8rem;
  margin: 0;
  font-weight: 600;
  font-family: var(--font-primary);
}

.tickets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.ticket-card {
  border: 1.5px solid #eee;
  border-radius: 10px;
  padding: 1.5rem;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  transition: all 0.3s ease;
}

.ticket-card:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(149, 126, 24, 0.1);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}

.ticket-type {
  font-weight: 700;
  color: var(--black);
  font-size: 1.1rem;
  font-family: var(--font-primary);
}

.ticket-status {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.ticket-status.valid {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
}

.ticket-status.expired {
  background: rgba(200, 200, 200, 0.15);
  color: #999;
}

.ticket-details {
  margin-bottom: 1.5rem;
}

.ticket-details p {
  margin: 0.6rem 0;
  font-size: 0.9rem;
  color: #666;
  font-family: var(--font-primary);
}

.ticket-details p strong {
  color: var(--black);
}

.ticket-btn {
  width: 100%;
  padding: 0.8rem;
  background: var(--gold);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  font-family: var(--font-primary);
}

.ticket-btn:hover {
  background: var(--gold);
  transform: translateY(-2px);
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.event-item {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
  padding: 1.5rem;
  border: 1px solid #eee;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.event-item:hover {
  border-color: var(--gold);
  background: #fafafa;
}

@media (max-width: 768px) {
  .event-item {
    grid-template-columns: 1fr;
  }
}
.event-image {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.event-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.event-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-info h3 {
  color: var(--black);
  font-size: 1.3rem;
  margin: 0 0 0.8rem 0;
  font-weight: 600;
  font-family: var(--font-primary);
}

.event-info .event-date {
  color: #666;
  font-size: 1.2rem;
  margin: 0 0 0.8rem 0;
}

.event-info .event-desc {
  color: #666;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

.event-rating {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #666;
  font-size: 1.2rem;
}

.stars {
  display: flex;
  gap: 0.3rem;
}

.star {
  font-size: 1.3rem;
  color: #ddd;
  cursor: pointer;
  transition: all 0.2s ease;
}

.star.filled {
  color: var(--gold);
}

.star:hover {
  transform: scale(1.2);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.info-card {
  padding: 1.5rem;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fafafa;
}

.info-card h3 {
  color: var(--black);
  font-size: 1.1rem;
  margin: 0 0 1rem 0;
  font-weight: 600;
  font-family: var(--font-primary);
}

.info-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-card ul li {
  padding: 0.5rem 0;
  color: #666;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  line-height: 1.6;
}

.info-card ul li span {
  font-weight: 600;
  color: var(--black);
}

.newsletter-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

@media (max-width: 768px) {
  .newsletter-container {
    grid-template-columns: 1fr;
  }
}
.newsletter-card {
  padding: 2rem;
  border: 1.5px solid #eee;
  border-radius: 10px;
  background: #fafafa;
}

.newsletter-card h3 {
  color: var(--black);
  font-size: 1.3rem;
  margin: 0 0 0.8rem 0;
  font-weight: 600;
  font-family: var(--font-primary);
}

.newsletter-card p {
  color: #666;
  font-size: 1.2rem;
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.form-group label {
  font-weight: 600;
  color: var(--black);
  font-size: 0.9rem;
  font-family: var(--font-primary);
}

.form-group input {
  padding: 0.9rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1.2rem;
  font-family: var(--font-primary);
  transition: all 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(149, 126, 24, 0.1);
}

.newsletter-options {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
  background: white;
  border-radius: 6px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #666;
  font-family: var(--font-primary);
}

.checkbox-label input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--gold);
}

.form-agree {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.form-agree input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--gold);
  margin-top: 2px;
}

.form-agree label {
  font-size: 0.85rem;
  color: #666;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 400;
}

.btn-primary {
  padding: 1.2rem 1.5rem;
  background: var(--gold);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--font-primary);
  text-decoration: none;
  text-align: center;
  display: inline-block;
}

.btn-primary:hover {
  background: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(149, 126, 24, 0.3);
}

.newsletter-message {
  padding: 0.8rem;
  text-align: center;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

.newsletter-benefits {
  padding: 2rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold) 100%);
  border-radius: 10px;
  color: white;
}

.newsletter-benefits h3 {
  color: white;
  font-size: 1.3rem;
  margin: 0 0 1.5rem 0;
  font-weight: 600;
}

.newsletter-benefits ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.newsletter-benefits ul li {
  padding: 0.8rem 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
}

.section-actions {
  margin-top: 2rem;
  text-align: center;
}

@media (max-width: 768px) {
  .visiteur-sidebar {
    width: 220px;
  }
  .visiteur-main {
    margin-left: 220px;
  }
}
/* Slick carousel CSS supprimé — Slick n'est plus utilisé (remplacé par Swiper) */
/* =====================================================================
   NAVBAR AUDIT FIX — MBAA
   Applied: full audit corrections for secondary nav alignment,
   icon sizing, typography, and removal of pill/card styling.
   ===================================================================== */
/* ------------------------------------------------------------------
   1. GRID LAYOUT — nav spans columns 2–3 so secondary list
      can sit flush at the right edge of the container.
      Logo stays in column 1 (justify-self: start).
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .header__container {
    grid-template-columns: 240px 1fr auto;
    align-items: center;
  }
  .header__logo-link {
    grid-column: 1;
    justify-self: start;
  }
  .header__nav {
    grid-column: 2/4; /* spans the center + right zones */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    width: 100%;
    gap: 0;
    position: static; /* ensure it stays in flow */
    transform: none;
    background: transparent;
    backdrop-filter: none;
    overflow-y: visible;
    z-index: auto;
  }
}
/* ------------------------------------------------------------------
   2. REMOVE PILL / CARD STYLING from both nav lists
      No background, no border-radius, no box-shadow, no padding pill.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .header__nav-list--main {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    flex-grow: 0;
    justify-content: center;
  }
  .header__nav-list--secondary {
    /* Remove fixed positioning — integrate into flex row */
    position: static !important;
    top: auto !important;
    right: auto !important;
    height: auto !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    /* Layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
    margin-left: auto; /* push to right edge of the nav flex row */
    transition: none;
  }
  /* Scrolled state no longer needs height hack — padding on container handles it */
  .header--scrolled .header__nav-list--secondary {
    height: auto !important;
  }
}
/* ------------------------------------------------------------------
   3. MAIN NAV LINKS — typography corrections
      font-size: 0.68rem | letter-spacing: 0.14em | opacity: 0.75 → 1
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .header__nav-list--main .header__nav-link {
    font-size: 0.68rem;
    font-weight: 500;
    font-family: var(--font-secondary);
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #FFFDF3;
    opacity: 0.75;
    padding: 0;
    width: auto;
    transition: opacity 0.3s ease;
  }
  .header__nav-list--main .header__nav-link:hover {
    opacity: 1;
    transform: none;
  }
  .header__nav-list--main .header__nav-link::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: rgba(255, 253, 243, 0.6);
    transition: width 0.35s ease;
  }
  .header__nav-list--main .header__nav-link:hover::after {
    width: 100%;
  }
  .header__nav-list--main .header__nav-link--active {
    opacity: 1 !important;
  }
  .header__nav-list--main .header__nav-link--active::after {
    width: 100% !important;
  }
}
/* ------------------------------------------------------------------
   4. ICONS — 18×18px, stroke rgba(255,253,243,0.65) → 1.0 on hover
      stroke-width: 1.5, no filter, no background
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .header__nav-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    padding: 0 !important;
    stroke: rgba(255, 253, 243, 0.65) !important;
    stroke-width: 1.5 !important;
    fill: none !important;
    filter: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: stroke 0.3s ease, opacity 0.3s ease;
    display: block;
  }
  .header__nav-icon:hover {
    stroke: rgb(255, 253, 243) !important;
    opacity: 1 !important;
  }
  /* The wrapping <a> around icons — remove any inherited opacity shift */
  .header__nav-list--secondary .header__nav-link:has(.header__nav-icon) {
    opacity: 1;
    display: flex;
    align-items: center;
  }
  .header__nav-list--secondary .header__nav-link:has(.header__nav-icon):hover {
    opacity: 1;
  }
}
/* ------------------------------------------------------------------
   5. FR / EN LANGUAGE SWITCHER
      font-size: 0.62rem | letter-spacing: 0.1em | opacity: 0.45 → 1
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .header__nav-link-fr {
    font-family: var(--font-primary);
    font-size: 0.62rem !important;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFDF3 !important;
    opacity: 0.45;
    text-decoration: none;
    transition: opacity 0.3s ease;
  }
  .header__nav-link-fr:hover {
    opacity: 1 !important;
    color: #FFFDF3 !important;
  }
}
/* ------------------------------------------------------------------
   6. CONTACT LINK — same style as main nav links
      font-size: 0.68rem | letter-spacing: 0.14em | opacity: 0.75 → 1
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .header__nav-link--contact {
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #FFFDF3 !important;
    opacity: 0.75;
    transition: opacity 0.3s ease;
  }
  .header__nav-link--contact:hover {
    color: #FFFDF3 !important;
    opacity: 1;
  }
}
/* ------------------------------------------------------------------
   7. SECONDARY NAV ITEMS — remove mobile border/padding on desktop
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .header__nav-list--secondary .header__nav-item {
    border-bottom: none !important;
    padding: 0 !important;
    min-height: auto !important;
    width: auto !important;
  }
}
/* ------------------------------------------------------------------
   8. MOBILE — keep secondary list stacked cleanly (no regressions)
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .header__nav-list--secondary {
    position: static !important;
    height: auto !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .header__nav-icon {
    width: 22px !important;
    height: 22px !important;
    stroke: #FFFDF3 !important;
    stroke-width: 1.5 !important;
    filter: none !important;
  }
  .header__nav-link-fr {
    color: #FFFDF3 !important;
    font-size: 0.9rem !important;
    opacity: 0.75;
  }
}
/* =====================================================================
   END NAVBAR AUDIT FIX
   ===================================================================== */
/* =====================================================================
   NAVBAR — CENTRAGE LISTE PRINCIPALE
   La secondary-desktop est enfant direct du container (3e colonne)
   La secondary-mobile reste dans la <nav> et est cachée sur desktop
   ===================================================================== */
@media (min-width: 1024px) {
  .header__nav-list--secondary-desktop {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-self: end;
  }
  .header__nav-list--secondary-mobile {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .header__nav-list--secondary-desktop {
    display: none !important;
  }
  .header__nav-list--secondary-mobile {
    display: flex !important;
  }
}
/* =====================================================================
   NAVBAR MASTER OVERRIDE — écrase tous les blocs précédents
   ===================================================================== */
/* — Container : grille 3 colonnes, transparent par défaut — */
@media (min-width: 1024px) {
  .header__container {
    position: fixed !important;
    top: 1 !important;
    left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    padding: 1.5rem 4rem !important;
    gap: 2rem !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid transparent !important;
    transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease !important;
  }
  /* Logo — colonne 1 */
  .header__container > .header__logo-link,
  .header__container > .custom-logo-link {
    grid-column: 1 !important;
    justify-self: start !important;
  }
  /* Nav principale — colonne 2, centrée */
  .header__container > .header__nav {
    grid-column: 2 !important;
    justify-self: center !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Secondary desktop — colonne 3 */
  .header__nav-list--secondary-desktop {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.25rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    height: auto !important;
    background: none !important;
    box-shadow: none !important;
  }
  /* Burger caché */
  .header__container > .header__menu-toggle {
    display: none !important;
  }
  /* Liste principale */
  .header__nav-list--main {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.75rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex-grow: 0 !important;
  }
  /* Secondary mobile cachée sur desktop */
  .header__nav-list--secondary-mobile {
    display: none !important;
  }
  /* Scrolled state */
  .header--scrolled .header__container {
    background: rgba(0, 0, 0, 0.71) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border-bottom: 1px solid rgba(255, 253, 243, 0.08) !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }
}
/* — Mobile — */
@media (max-width: 1023px) {
  .header__container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.25rem !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
  }
  .header__container > .header__menu-toggle {
    display: flex !important;
    order: 3 !important;
  }
  .header__nav-list--secondary-desktop {
    display: none !important;
  }
  .header__nav-list--secondary-mobile {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    position: static !important;
    height: auto !important;
  }
}
/* =====================================================================
   END NAVBAR MASTER OVERRIDE
   ===================================================================== */
/* Fallback padding-top pour compenser la navbar fixe */
@media (min-width: 1024px) {
  .header__hero {
    padding-top: max(88px, 6rem) !important;
  }
}
/* Nav links — taille max 1.2rem */
@media (min-width: 1024px) {
  .header__nav-list--main .header__nav-link,
  .header__nav-dropdown-trigger {
    font-size: 1.2rem !important;
  }
}
/* ============================================================
   Espace pro — dropdown glass blur override
   ============================================================ */
@media (min-width: 1024px) {
  .header__nav-dropdown {
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 253, 243, 0.08);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    padding: 0.4rem 0;
  }
  /* Rounded hover state — background stays inset from edges */
  .header__nav-dropdown li a {
    margin: 0 6px;
    border-radius: 6px;
    padding: 0.75rem calc(1.5rem - 6px);
  }
  .header__nav-dropdown li a:hover {
    background: rgba(255, 255, 255, 0.07);
  }
}
/* ── Dropdown Espace pro — fixes ── */
@media (min-width: 1024px) {
  /* Pont invisible entre le trigger et le menu pour éviter la fermeture prématurée */
  .header__nav-item--dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1.2rem;
  }
  /* Décale le menu sous le pont */
  .header__nav-dropdown {
    top: calc(100% + 1.2rem) !important;
  }
  /* Liens du dropdown plus grands */
  .header__nav-dropdown li a {
    font-size: 0.82rem !important;
    letter-spacing: 0.1em !important;
    padding: 0.85rem calc(1.5rem - 6px) !important;
  }
}
/* ── Séparateurs verticaux entre les liens de nav ── */
@media (min-width: 1024px) {
  .header__nav-list--main .header__nav-item {
    position: relative;
  }
  .header__nav-list--main .header__nav-item + .header__nav-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 0.9em;
    background: rgba(255, 253, 243, 0.2);
  }
  /* Décale les liens pour laisser de la place au trait */
  .header__nav-list--main {
    gap: 0 !important;
  }
  .header__nav-list--main .header__nav-link,
  .header__nav-list--main .header__nav-dropdown-trigger {
    padding: 0.4rem 1.5rem !important;
  }
}
/* =====================================================================
   SECONDARY DESKTOP NAV — SIZE ALIGNMENT WITH MAIN NAV (1.2rem)
   Icons → 22px, FR/EN → 0.85rem uppercase, Contact → 1.2rem uppercase
   Gap → 1.5rem, vertical separators matching main nav style
   ===================================================================== */
@media (min-width: 1024px) {
  /* 1. Icons: 22×22px for visual balance with 1.2rem text */
  .header__nav-list--secondary-desktop .header__nav-icon {
    width: 22px !important;
    height: 22px !important;
  }
  /* 2. FR/EN language switcher */
  .header__nav-list--secondary-desktop .header__nav-link-fr {
    font-size: 0.85rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
  }
  /* 3. Contact link — matches main nav link size exactly */
  .header__nav-list--secondary-desktop .header__nav-link--contact {
    font-size: 1.2rem !important;
    letter-spacing: 0px !important;
    text-transform: uppercase !important;
  }
  /* 5. Vertical separators — same pattern as main nav */
  .header__nav-list--secondary-desktop .header__nav-item {
    position: relative;
  }
  /* Padding on items to space them around the separator (2.2rem total gap) */
  .header__nav-list--secondary-desktop .header__nav-item:first-child {
    padding-right: 1.1rem;
  }
  .header__nav-list--secondary-desktop .header__nav-item + .header__nav-item {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  .header__nav-list--secondary-desktop .header__nav-item:last-child {
    padding-right: 0;
  }
}
/* =====================================================================
   END SECONDARY DESKTOP NAV SIZE ALIGNMENT
   ===================================================================== */
/* ── Espace entre les deux blocs horaires du hero strip ── */
.hero__strip {
  gap: 2rem;
  position: relative;
}

/* ── Scroll arrow — centré horizontalement dans le hero strip ── */
.hero__strip > .hero__scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  margin-left: 0; /* override le margin-left: auto */
}

.hero__strip-divider {
  width: 1px;
  height: 2rem;
  background: rgba(245, 242, 236, 0.2);
  flex-shrink: 0;
  align-self: center;
}

/* ── Dropdown horaires — même glass que le dropdown nav ── */
.hero__hours-dropdown {
  background: rgba(10, 10, 10, 0.72) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  border: 1px solid rgba(255, 253, 243, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  z-index: 9999 !important;
}

/* ── Dropdown horaires — tailles desktop (≥1024px) ── */
@media (min-width: 1024px) {
  .hero__hours-dropdown {
    min-width: 260px;
    padding: 1rem 1.25rem;
  }
  .hero__hours-drop-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .hero__hours-drop-day {
    font-size: 0.78rem;
    font-weight: 500;
  }
  .hero__hours-drop-hours {
    font-size: 0.78rem;
  }
  .hero__hours-drop-closed {
    font-size: 0.78rem;
    color: rgba(245, 242, 236, 0.4);
  }
  .hero__hours-drop-pause {
    font-size: 0.65rem;
  }
  .hero__hours-drop-notice {
    font-size: 0.68rem;
  }
}
/* =====================================================================
   MOBILE FIRST FIXES — MBAA
   Audit date: 2025
   Scope: Navbar + Hero section — @media (max-width: 767px)
   ===================================================================== */
/* ─────────────────────────────────────────────
   1. BURGER BUTTON — touch target déjà géré dans le bloc principal
   ───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
   2. MOBILE NAV OVERLAY — readable font sizes + padding
   Issue: .header__nav-link was 0.8rem on mobile (below 1rem minimum).
   Also: side padding bumped to 2rem for breathing room on narrow screens.
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .header__nav {
    padding: 5rem 2rem 2.5rem;
  }
  .header__nav-link {
    font-size: 1rem;
    padding: 0.625rem 0; /* 10px top/bottom — keeps 44px min-height on item */
  }
  /* Dropdown sub-links also need readable size */
  .header__nav-dropdown li a {
    font-size: 0.9rem;
    padding: 0.625rem 0.75rem;
  }
}
/* ─────────────────────────────────────────────
   3. LOGO — max 120px wide on mobile, height auto
   Fix: utilise min-width (mobile-first), cible aussi .custom-logo-link
   ───────────────────────────────────────────── */
/* Les règles logo sont définies plus haut avec .header__logo-link, .custom-logo-link */
/* ─────────────────────────────────────────────
   4. HEADER CONTAINER — position: absolute on mobile
   Flotte au-dessus du hero sans créer de bande noire.
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .header__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }
}
/* ─────────────────────────────────────────────
   5. HERO TITLE — clamp with safe mobile minimum
   Issue: clamp(4.5rem, 9vw, 9rem) — 4.5rem = 72px on mobile, far too large.
   Fix: start at 2.5rem, scale up with viewport.
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero__title {
    font-size: clamp(2.5rem, 10vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
  }
}
/* ─────────────────────────────────────────────
   6. HERO NEWS TITLE — broken clamp corrected
   Issue: clamp(3rem, 1.8vw, 1.35rem) — min (3rem) > max (1.35rem),
   browser always renders 3rem. Correct to a sensible mobile size.
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero__news-title {
    font-size: clamp(1rem, 4vw, 1.35rem);
    line-height: 1.4;
  }
}
/* ─────────────────────────────────────────────
   7. HERO DESCRIPTION — minimum readable size
   Issue: clamp(0.85rem, 1.2vw, 1rem) — 0.85rem is below 0.875rem floor.
   On mobile 1.2vw ≈ 4.5px, so it collapses to 0.85rem. Fix the minimum.
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero__description {
    font-size: 0.9375rem; /* 15px — comfortable mobile body size */
    line-height: 1.7;
    max-width: 100%;
    text-align: left;
  }
}
/* ─────────────────────────────────────────────
   8. HERO STRIP — stack vertically on mobile, no horizontal overflow
   Issue: .hero__strip is display:flex with no flex-wrap.
   With 3 museum blocks + dividers it overflows horizontally on mobile.
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero__strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 1.25rem;
    overflow: hidden; /* belt-and-suspenders: no horizontal scroll */
  }
  /* Hide vertical dividers — they make no sense in column layout */
  .hero__strip-divider {
    display: none;
  }
  /* Each museum block takes full width */
  .hero__hours-museum {
    width: 100%;
    gap: 0.625rem;
  }
  /* Logo slightly smaller in stacked layout */
  .hero__hours-logo {
    height: 1.5rem;
    width: auto;
  }
  /* ── Mobile : afficher uniquement logo + ouvert/fermé ── */
  /* Masquer les horaires du jour */
  .hero__hours-today {
    display: none !important;
  }
  /* Masquer le séparateur avant les horaires du jour */
  .hero__hours-sep:last-of-type {
    display: none !important;
  }
  /* Masquer "Voir les horaires" + chevron */
  .hero__hours-more {
    display: none !important;
  }
  /* Empêcher le dropdown de s'afficher */
  .hero__hours-dropdown {
    display: none !important;
    pointer-events: none !important;
  }
}
/* ─────────────────────────────────────────────
   9. HERO NEWS CAPTION — full width, safe padding on mobile
   Issue: max-width: none was set but no width: 100% or padding fix.
   Caption can still overflow if content is wide.
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero__news-caption {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    /* Align to bottom of hero on mobile */
    align-self: flex-end;
    margin-top: auto;
  }
  .hero__news-category {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
  }
  .hero__news-excerpt {
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 253, 243, 0.75);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/* ─────────────────────────────────────────────
   10. HERO TOP PADDING — account for non-fixed navbar on mobile
   Issue: header__hero has padding-top: 100px (for fixed desktop nav).
   On mobile the nav is position: relative, so 100px creates dead space.
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .header__hero {
    padding: 5rem 1.25rem 1.5rem; /* padding-top pour laisser place à la navbar absolue */
    min-height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 1.5rem;
  }
}
/* ─────────────────────────────────────────────
   11. HERO NAV ARROWS — responsive sizing on mobile
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero__arrow {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hero__nav {
    gap: 0.4rem;
  }
}
/* ─────────────────────────────────────────────
   12. GENERAL MOBILE SAFETY — overflow, images, touch targets
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Prevent any fixed-width child from causing horizontal scroll */
  .header,
  .header__hero,
  .header__container {
    max-width: 100vw;
    overflow-x: clip; /* clip au lieu de hidden pour ne pas bloquer les dropdowns positionnés en absolu */
  }
  /* All images responsive */
  .header img,
  .header__hero img {
    max-width: 100%;
  }
  /* Minimum touch target for all interactive elements in header */
  .header__nav-list--secondary .header__nav-item a,
  .header__nav-list--secondary .header__nav-item button {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Icon touch targets in secondary nav */
  .header__nav-icon {
    width: 22px;
    height: 22px;
    padding: 11px;
    box-sizing: content-box;
  }
}
/* =====================================================================
   END MOBILE FIRST FIXES
   ===================================================================== */
/* ── Centrage des blocs horaires dans le hero strip ── */
@media (min-width: 1024px) {
  .hero__strip {
    justify-content: flex-start;
    align-items: center;
  }
  /* Les flèches restent à droite */
  .hero__nav {
    margin-left: auto;
  }
}
/* ── Section event-featured — fond clair, texte noir ── */
.event-featured__eyebrow {
  color: var(--gold) !important;
}

.event-featured__title {
  color: var(--black) !important;
}

.event-featured__meta-item {
  color: #444 !important;
}

.event-featured__meta-item svg {
  stroke: var(--gold) !important;
}

.event-featured__desc {
  color: #555 !important;
}

.event-featured__spots-label {
  color: #444 !important;
}

.event-featured__btn-secondary {
  color: var(--black) !important;
  border-color: rgba(25, 25, 25, 0.3) !important;
}

.event-featured__btn-secondary:hover {
  border-color: var(--black) !important;
}

/* =============================================================================
   CORRECTIFS TYPOGRAPHIQUES — Cohérence des variables CSS
   Remplacement de var(--font-primary) par les variables sémantiques correctes
   --font-body       → Neutraface2Text-Book   (body, p, .text, descriptions)
   --font-h1-h2      → Neutraface2Display-Titling (h1, h2, titres majeurs)
   --font-h3-h4-h5   → Neutraface2Display-Bold    (h3–h5, sous-titres sections)
   --font-secondary  → Neutraface2Text-Demi   (UI labels, nav, highlights, caps)
   ============================================================================= */
/* ── 1. NAVIGATION ── */
/* .header__nav-item : conteneur neutre, pas de font-family nécessaire */
.header__nav-item {
  font-family: inherit;
}

/* Sélecteur de langue FR → UI label → --font-secondary */
.header__nav-link-fr {
  font-family: var(--font-secondary);
}

/* ── 2. HERO — zone gauche ── */
/* Eyebrow (surtitre uppercase) → --font-secondary */
.hero__eyebrow {
  font-family: var(--font-secondary);
}

/* Description courte → --font-body */
.hero__description {
  font-family: var(--font-body);
}

/* CTA link (uppercase label) → --font-secondary */
.hero__cta {
  font-family: var(--font-secondary);
}

/* ── 3. HERO STRIP — statistiques ── */
/* Chiffre stat → --font-h1-h2 (valeur display) */
.hero__stat-number {
  font-family: var(--font-h1-h2);
}

/* Label stat (uppercase micro) → --font-secondary */
.hero__stat-label {
  font-family: var(--font-secondary);
}

/* Scroll hint (uppercase micro) → --font-secondary */
.hero__scroll {
  font-family: var(--font-secondary);
}

/* ── 4. HERO — actualité ── */
/* Catégorie (uppercase label) → --font-secondary */
.hero__news-category {
  font-family: var(--font-secondary);
}

/* Titre actualité (display heading) → --font-h1-h2 */
.hero__news-title {
  font-family: var(--font-h1-h2);
}

/* ── 5. HERO — horaires ── */
/* Tous les éléments horaires sont des micro-labels UI → --font-secondary */
.hero__hours-etat {
  font-family: var(--font-secondary);
}

.hero__hours-today {
  font-family: var(--font-secondary);
}

.hero__hours-more {
  font-family: var(--font-secondary);
}

.hero__hours-drop-title {
  font-family: var(--font-secondary);
}

.hero__hours-drop-row {
  font-family: var(--font-secondary);
}

.hero__hours-drop-notice {
  font-family: var(--font-secondary);
}

/* ── 6. BLOC .text (BEM) ── */
/* .text → --font-body (correction : était sur --font-primary) */
.text {
  font-family: var(--font-body);
}

/* .text__highlight → --font-secondary (Neutraface2Text-Demi, comme défini dans :root) */
.text__highlight {
  font-family: var(--font-secondary);
}

/* ── 7. SECTIONS ADMIN (services / réservation / deals) ── */
/* section-title → h3-level → --font-h3-h4-h5 */
.services-section .section-title,
.reservation-section .section-title,
.deals-section .section-title {
  font-family: var(--font-h3-h4-h5);
}

/* service-subtitle, subsection-title, deal-title → h4-level → --font-h3-h4-h5 */
.services-section .service-item .service-subtitle,
.reservation-section .subsection-title,
.deals-section .deal-title {
  font-family: var(--font-h3-h4-h5);
}

/* Textes courants dans ces sections → --font-body */
.services-section .service-item .service-text,
.reservation-section .reservation-text,
.deals-section .deal-text {
  font-family: var(--font-body);
}

/* ── 8. GALERIE — topbar & filtres ── */
/* Labels topbar (uppercase display) → --font-h1-h2 */
.gallery-topbar__label,
.gallery-topbar__count {
  font-family: var(--font-h1-h2);
}

/* Boutons filtre (display large) → --font-h3-h4-h5 */
.filter-btn {
  font-family: var(--font-h3-h4-h5);
}

/* Pills sous-filtres (micro uppercase) → --font-secondary */
.subfilter-pill,
.subfilters-label {
  font-family: var(--font-secondary);
}

/* Meta overlay galerie (micro uppercase) → --font-secondary */
.gallery-item__meta,
.gallery-item__index {
  font-family: var(--font-secondary);
}

/* Tag header grille (micro uppercase) → --font-secondary */
.gallery-grid-header__tag {
  font-family: var(--font-secondary);
}

/* Message vide galerie → --font-body */
.gallery-empty p {
  font-family: var(--font-body);
}

/* ── 9. TABLE MOUVEMENTS ── */
/* Titre de section → --font-h1-h2 */
.movements-table-title {
  font-family: var(--font-h1-h2);
}

/* En-têtes de colonnes → --font-h3-h4-h5 */
.movements-table th {
  font-family: var(--font-h3-h4-h5);
}

/* Cellules → --font-body */
.movements-table td {
  font-family: var(--font-body);
}

/* ── 10. CARTES TECHNIQUES (technique-card) ── */
/* Titre carte → --font-h1-h2 */
.technique-card-title {
  font-family: var(--font-h1-h2);
}

/* Description carte → --font-body */
.technique-card-description {
  font-family: var(--font-body);
}

/* ── 11. ÉLÉMENTS PÉDAGOGIQUES ── */
/* Texte item (grande taille, mais corps de liste) → --font-body */
.pedagogical-element-text {
  font-family: var(--font-body);
}

/* ── 12. APPRÉCIATION ARTISTIQUE ── */
/* Titre carte → --font-h3-h4-h5 */
.art-appreciation-title {
  font-family: var(--font-h3-h4-h5);
}

/* Texte descriptif → --font-body */
.art-appreciation-text {
  font-family: var(--font-body);
}

/* ── 13. BIBLIOTHÈQUE — bannière ── */
/* Titre principal bannière → --font-h1-h2 */
.bibliotheque__banner-title {
  font-family: var(--font-h1-h2);
}

/* Sous-titre → --font-h3-h4-h5 */
.bibliotheque__banner-subtitle {
  font-family: var(--font-h3-h4-h5);
}

/* Description → --font-body */
.bibliotheque__banner-description {
  font-family: var(--font-body);
}

/* ── 14. COMPOSANTS HERO LEGACY (reserve-btn, cta-text) ── */
/* Bouton réservation → --font-secondary (label uppercase UI) */
.reserve-btn {
  font-family: var(--font-secondary);
}

/* Texte CTA → --font-secondary */
.cta-text {
  font-family: var(--font-secondary);
}

/* ── 15. SEARCH OVERLAY ── */
/* Input recherche → --font-body */
.search-overlay__input {
  font-family: var(--font-body);
}

/* =============================================================================
   CLASSE UTILITAIRE — .text--caption
   Petits textes optionnels sous les descriptions (légendes, crédits, notes)
   ============================================================================= */
.text--caption {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.25vw, 0.875rem);
  font-weight: 400;
  line-height: 1.4;
  color: #666666;
}

/* =============================================================================
   COLLECTIONS — LAYOUT ALIGNÉ SITE DE RÉFÉRENCE
   Polices et couleurs locales conservées (Neutraface, var(--gold), var(--black))
   ============================================================================= */
/* ── 1. BANDEAU main__banniere — style original conservé ── */
/* ── 2. ÉLÉMENTS PÉDAGOGIQUES — boutons La couleur / La ligne… ── */
.pedagogical-elements-container {
  max-width: 100%;
  margin: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 1024px) {
  .pedagogical-elements-container {
    flex-direction: row;
    align-items: stretch;
    min-height: 480px;
  }
}
.pedagogical-elements-left {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}

@media (max-width: 1023px) {
  .pedagogical-elements-left {
    padding: 2rem 1.5rem;
    border-right: none;
    border-bottom: 1px solid rgba(25, 25, 25, 0.1);
  }
}
.pedagogical-element-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  min-height: 2.75rem;
  font-family: inherit;
  transition: opacity 0.25s ease;
}

.pedagogical-element-item:hover {
  opacity: 0.6;
}

.pedagogical-element-item img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pedagogical-element-item:hover img {
  opacity: 1;
  transform: translateX(4px);
}

.pedagogical-element-text {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400;
  color: var(--black);
  letter-spacing: -0.04em;
  transition: color 0.25s ease;
}

.pedagogical-element-separator {
  width: 100%;
  height: 1px;
  background-color: rgba(25, 25, 25, 0.15);
  margin: 0;
  flex-shrink: 0;
}

.pedagogical-elements-right {
  flex: 0 0 60%;
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

@media (max-width: 1023px) {
  .pedagogical-elements-right {
    flex: unset;
    min-height: 320px;
    height: 320px;
  }
}
.pedagogical-painting {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1023px) {
  .pedagogical-painting {
    position: relative;
    inset: auto;
    height: 320px;
  }
}
/* ── 3. COMPOSITION — Proposition 2 (fond sombre, numérotée, image droite) ── */
.compo-p2 {
  display: flex;
  min-height: 480px;
  background: var(--cream, #FFFDF3);
}

.compo-p2__text {
  flex: 0 0 50%;
  display: flex;
  background-color: var(--cream, #FFFDF3);
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  border-right: 1px solid rgba(46, 45, 44, 0.08);
}

.compo-p2__eyebrow {
  font-family: var(--font-h1-h2);
  font-size: clamp(3rem, 6vw, 7rem);
  color: var(--black, #2e2d2c);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.compo-p2__block {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(46, 45, 44, 0.08);
}

.compo-p2__block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.compo-p2__num {
  display: none;
}

.compo-p2__header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 0.6rem;
}

.compo-p2__header .compo-p2__title {
  margin: 0;
}

.compo-p2__arrow {
  width: 14px;
  height: 14px;
  opacity: 0.35;
  flex-shrink: 0;
  transition: opacity 0.3s, transform 0.3s;
}

.compo-p2__block:hover .compo-p2__arrow {
  opacity: 0.7;
  transform: translateX(3px);
}

.compo-p2__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 400;
  color: var(--black, #2e2d2c);
  margin-bottom: 0;
  letter-spacing: -0.04em;
}

.compo-p2__body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: rgba(46, 45, 44, 0.55);
  line-height: 1.75;
}

.compo-p2__img {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.compo-p2__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1023px) {
  .compo-p2 {
    flex-direction: column-reverse;
  }
  .compo-p2__img {
    flex: unset;
    height: 300px;
  }
  .compo-p2__img img {
    position: relative;
    inset: auto;
    height: 300px;
  }
  .compo-p2__text {
    border-right: none;
    border-top: 1px solid rgba(46, 45, 44, 0.08);
  }
}
/* ── 4. TIMELINE MOUVEMENTS — mobile first ── */
/* Base mobile */
.mvt-tl-section {
  padding: 3rem 0 3rem;
  overflow: hidden;
}

.mvt-tl-header {
  padding: 0 1.25rem 2rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.mvt-tl-eyebrow {
  display: block;
  font-family: var(--font-secondary);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.mvt-tl-title {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.2rem, 5vw, 2rem);
  font-weight: 400;
  color: #191919;
  letter-spacing: -0.02em;
}

.mvt-tl-nav {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-left: auto;
}

.mvt-tl-nav-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(25, 25, 25, 0.2);
  border-radius: 30px;
  background: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: #191919;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mvt-tl-nav-btn:hover {
  background: #191919;
  color: #FFFDF3;
  border-color: #191919;
}

.mvt-tl-nav-btn:disabled {
  opacity: 0.25;
  pointer-events: none;
}

/* Track */
.mvt-tl-track-outer {
  overflow-x: clip;
  overflow-y: visible;
  padding: 0 1.25rem;
  position: relative;
}

.mvt-tl-track-outer::before,
.mvt-tl-track-outer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}

.mvt-tl-track-outer::before {
  left: 0;
  background: linear-gradient(to right, #FFFDF3, transparent);
}

.mvt-tl-track-outer::after {
  right: 0;
  background: linear-gradient(to left, #FFFDF3 30%, transparent);
  width: 80px;
}

/* Badge "encore N →" sur le bord droit */
.mvt-tl-more {
  position: absolute;
  right: 1.25rem;
  bottom: 0.5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-secondary);
  font-size: clamp(0.6rem, 0.75vw, 0.72rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.mvt-tl-more.hidden {
  opacity: 0;
  pointer-events: none;
}

.mvt-tl-more-arrow {
  font-size: 0.9em;
  animation: mvtMorePulse 1.4s ease-in-out infinite;
}

@keyframes mvtMorePulse {
  0%, 100% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(4px);
    opacity: 0.5;
  }
}
.mvt-tl-less {
  position: absolute;
  left: 1.25rem;
  bottom: 0.5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  font-family: var(--font-secondary);
  font-size: clamp(0.6rem, 0.75vw, 0.72rem);
  color: var(--gold);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.mvt-tl-less.hidden {
  opacity: 0;
  pointer-events: none;
}

.mvt-tl-less-arrow {
  font-size: 0.9em;
  animation: mvtLessPulse 1.4s ease-in-out infinite;
}

@keyframes mvtLessPulse {
  0%, 100% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-4px);
    opacity: 0.5;
  }
}
.mvt-tl-track {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-top: 1rem;
  padding-bottom: 1rem;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  width: max-content;
}

.mvt-tl-track::before {
  display: none;
}

.mvt-tl-step {
  width: 170px;
  height: 280px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.6rem 0.55rem;
  transition: border-color 0.35s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s;
}

.mvt-tl-step:hover {
  transform: scale(1.04);
  border-color: rgba(174, 154, 121, 0.5);
}

.mvt-tl-step.active {
  border-color: #e03a80;
  height: 340px;
  box-shadow: -5px 0 18px rgba(0, 0, 0, 0), 3px 0 18px rgba(105, 105, 105, 0.35);
}

.mvt-tl-step-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 60%);
  transition: background 0.3s;
  z-index: 0;
}

.mvt-tl-step.active .mvt-tl-step-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.25) 60%);
}

.mvt-tl-step-dot-wrap {
  display: none;
}

.mvt-tl-step-period {
  font-family: var(--font-secondary);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: rgba(255, 253, 243, 0.65);
  margin-bottom: 0.2rem;
  position: relative;
  z-index: 1;
  transition: color 0.25s;
}

.mvt-tl-step:hover .mvt-tl-step-period,
.mvt-tl-step.active .mvt-tl-step-period {
  color: var(--gold);
}

.mvt-tl-step-name {
  font-family: var(--font-h1-h2);
  font-size: clamp(1rem, 0.9vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.85);
  line-height: 1.25;
  position: relative;
  z-index: 1;
  transition: color 0.25s;
}

.mvt-tl-step:hover .mvt-tl-step-name,
.mvt-tl-step.active .mvt-tl-step-name {
  color: #FFFDF3;
}

/* Progress */
.mvt-tl-progress {
  margin: 1.25rem 1.25rem 0;
  height: 1px;
  background: rgba(25, 25, 25, 0.1);
  position: relative;
}

.mvt-tl-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--gold);
  width: 0%;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Detail card — colonne unique sur mobile */
.mvt-tl-detail-wrap {
  margin: 1.75rem 1.25rem 0;
}

.mvt-tl-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.75rem;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 200px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.mvt-tl-detail.visible {
  opacity: 1;
  transform: translateY(0);
}

.mvt-tl-detail-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: background-image 0.4s ease;
  z-index: 0;
}

.mvt-tl-detail-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.55) 55%, rgba(10, 10, 10, 0.3) 100%);
  z-index: 1;
}

.mvt-tl-detail-left,
.mvt-tl-detail-desc,
.mvt-tl-detail-artists {
  position: relative;
  z-index: 2;
}

.mvt-tl-detail-period {
  display: block;
  font-family: var(--font-secondary);
  font-size: clamp(0.62rem, 0.8vw, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.mvt-tl-detail-name {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 400;
  color: #FFFDF3;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.mvt-tl-detail-desc {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: rgba(255, 253, 243, 0.7);
  line-height: 1.8;
}

.mvt-tl-detail-artists {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
}

.mvt-tl-detail-artist {
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.85vw, 0.9rem);
  letter-spacing: 0.05em;
  color: rgba(255, 253, 243, 0.5);
  padding-left: 0.65rem;
  border-left: 1px solid rgba(174, 154, 121, 0.4);
  transition: color 0.2s, border-color 0.2s;
}

.mvt-tl-detail-artist:hover {
  color: #FFFDF3;
  border-color: var(--gold);
}

@media (max-width: 1023px) {
  .mvt-tl-header {
    padding: 0 1.5rem 2rem;
  }
  .mvt-tl-track-outer {
    padding: 0 1.5rem;
  }
  .mvt-tl-detail-wrap {
    margin: 2rem 1.5rem 0;
  }
  .mvt-tl-progress {
    margin: 1.5rem 1.5rem 0;
  }
  .mvt-tl-detail {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .mvt-tl-detail-artists {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
  }
}
/* ── Timeline — desktop (1024px+) ── */
@media (min-width: 1024px) {
  .mvt-tl-section {
    padding: 4rem 0;
  }
  .mvt-tl-header {
    padding: 0 3rem 2.5rem;
  }
  .mvt-tl-track-outer {
    padding: 0 3rem;
  }
  .mvt-tl-progress {
    margin: 1.5rem 3rem 0;
  }
  .mvt-tl-detail-wrap {
    margin: 2.5rem 3rem 0;
  }
  .mvt-tl-detail {
    grid-template-columns: 220px 1fr auto;
    gap: 3rem;
    align-items: start;
  }
  .mvt-tl-nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 30px;
  }
}
/* ── Timeline — grands écrans (1400px+) ── */
@media (min-width: 1400px) {
  .mvt-tl-section {
    padding: 5rem 0;
  }
  .mvt-tl-header {
    padding: 0 4rem 3rem;
  }
  .mvt-tl-track-outer {
    padding: 0 4rem;
  }
  .mvt-tl-progress {
    margin: 2rem 4rem 0;
  }
  .mvt-tl-detail-wrap {
    margin: 3rem 4rem 0;
  }
  .mvt-tl-detail {
    grid-template-columns: 260px 1fr auto;
    gap: 4rem;
  }
  .mvt-tl-nav-btn {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
    border-radius: 30px;
  }
}
/* ── 5. GRILLE TECHNIQUES ── */
.techniques-grid-section {
  padding: 4rem 2rem;
}

@media (min-width: 1024px) {
  .techniques-grid-section {
    padding: 5rem 4rem;
  }
}
.techniques-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .techniques-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .techniques-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
.technique-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4/4;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.technique-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.technique-card-image {
  position: absolute;
  inset: 0;
}

.technique-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.technique-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
}

.technique-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  z-index: 2;
  color: #ffffff;
}

.technique-card-title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.5rem;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.technique-card-description {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ── 6. FICHIER PÉDAGOGIQUE ── */
.pedagogical-file {
  padding: clamp(3rem, 5vw, 5rem) clamp(2rem, 5vw, 5rem);
  background-color: #47564F;
  border-radius: 1rem;
  margin: 3rem 2rem;
}

.pedagogical-file-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  color: #FFFDF3;
  margin: 0 0 1rem;
}

.pedagogical-file-text {
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  color: rgba(255, 253, 243, 0.85);
  line-height: 1.6;
  margin: 0 0 2rem;
  max-width: 600px;
}

.pedagogical-file-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  color: #FFFDF3;
  border: 1.5px solid #FFFDF3;
  border-radius: 0.5rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  width: max-content;
}

.pedagogical-file-link:hover {
  background-color: #FFFDF3;
  color: #47564F;
  opacity: 1;
}

/* ── 7. PROGRAMMATION + CARTE EXPOSITION ── */
.main__programmation {
  max-width: 65%;
  margin: 0;
  box-sizing: border-box;
}

.main__banniere--programmation {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(2rem, 4vw, 4rem);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.main__card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background-color: var(--gold);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  color: #FFFDF3;
  margin: clamp(1rem, 2vw, 2rem) auto;
  max-width: 100%;
  border-radius: 0.5rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .main__card {
    max-width: 95%;
    gap: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .main__card {
    flex-direction: row;
    align-items: stretch;
    gap: 2rem;
    max-width: 90%;
  }
}
@media (min-width: 1600px) {
  .main__card {
    max-width: 85%;
    padding: 3rem;
  }
}
.main__card-agencement {
  width: 100%;
}

@media (min-width: 1024px) {
  .main__card-agencement {
    width: 50%;
    flex-shrink: 0;
  }
}
.main__card-img {
  width: 100%;
  height: 250px;
  border-radius: 10px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .main__card-img {
    height: 350px;
  }
}
@media (min-width: 1024px) {
  .main__card-img {
    height: 100%;
    min-height: 600px;
  }
}
.main__card-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 768px) {
  .main__card-container {
    gap: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .main__card-container {
    width: 55%;
    flex: 1;
  }
}
.main__card-title {
  color: #FFFDF3;
  font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  letter-spacing: -0.015em;
}

.main__card-subtitle {
  color: #FFFDF3;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  margin-top: 0;
}

.main__card-text {
  color: #FFFDF3;
  font-weight: 400;
  margin-bottom: 1rem;
}

.main__card-description {
  color: #FFFDF3;
  line-height: 1.6;
}

.main__button--savoir-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.875rem, 2.5vw, 15px) clamp(1.25rem, 4vw, 30px);
  border-radius: 10px;
  font-weight: 600;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  cursor: pointer;
  color: #FFFDF3;
  border: 1.5px solid #FFFDF3;
  transition: all 0.3s ease;
  text-decoration: none;
  min-height: 2.75rem;
}

.main__button--savoir-white:hover {
  color: var(--black);
  opacity: 1;
}

@media (min-width: 1024px) {
  .main__button--savoir-white {
    padding: 20px 50px;
    font-size: 1.1rem;
  }
}
/* ── EXPO CARD — Design fusion 2+5 (glass blur) ── */
.expo-card {
  position: relative;
  min-height: 600px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  margin: 2rem auto;
  max-width: 95%;
}

@media (min-width: 1600px) {
  .expo-card {
    max-width: 85%;
  }
}
.expo-card__img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s ease;
}

.expo-card:hover .expo-card__img {
  transform: scale(1.04);
}

/* Gauche — légende en bas à gauche */
.expo-card__left {
  position: absolute;
  z-index: 2;
  bottom: 2.5rem;
  left: 2.5rem;
}

.expo-card__caption {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(25, 25, 25, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 253, 243, 0.12);
  border-radius: 6px;
  color: rgba(255, 253, 243, 0.6);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: fit-content;
}

/* Droite — glass blur */
.expo-card__content {
  position: relative;
  z-index: 1;
  width: 480px;
  flex-shrink: 0;
  margin: 2rem;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 253, 243, 0.08);
  border-radius: 6px;
}

.expo-card__number {
  font-size: 5rem;
  font-weight: 700;
  color: rgba(174, 154, 121, 0.15);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: -1.5rem;
  user-select: none;
}

.expo-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  width: fit-content;
}

.expo-card__tag::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--gold);
}

.expo-card__title {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: #FFFDF3;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

.expo-card__subtitle {
  font-size: 0.9375rem;
  color: rgba(255, 253, 243, 0.7);
  font-style: italic;
  line-height: 1.5;
  padding-left: 1.25rem;
  border-left: 2px solid var(--gold);
  margin: 0;
}

.expo-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.expo-card__date {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.4);
}

.expo-card__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 253, 243, 0.2);
  flex-shrink: 0;
}

.expo-card__type {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.3);
}

.expo-card__divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 253, 243, 0.08);
}

.expo-card__desc {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(255, 253, 243, 0.55);
  margin: 0;
}

.expo-card__footer {
  margin-top: 0.5rem;
}

.expo-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.875rem 1.75rem;
  border: 0.5px solid #fff;
  border-radius: 5px;
  background: linear-gradient(var(--black), var(--black)) no-repeat left/0% 100%;
  background-color: transparent;
  color: #fff;
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
}

.expo-card__btn:hover {
  background-size: 100% 100%, 100% 100%;
  transform: translateX(4px);
  color: #191919;
}

.expo-card__btn svg {
  transition: transform 0.3s ease;
}

.expo-card__btn:hover svg {
  transform: translateX(3px);
}

/* Mobile */
@media (max-width: 767px) {
  .expo-card {
    flex-direction: column;
    min-height: unset;
    border-radius: 6px;
  }
  .expo-card__left {
    min-height: 240px;
  }
  .expo-card__content {
    width: auto;
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(255, 253, 243, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--black);
    padding: 2rem 1.5rem;
  }
  .expo-card__number {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .expo-card__content {
    width: 380px;
    padding: 2rem;
  }
  .expo-card__number {
    font-size: 4rem;
  }
}
/* ═══════════════════════════════════════════════════════════
   PAGE INFOS PRATIQUES — Nouveau design Moderne Minimaliste
   ═══════════════════════════════════════════════════════════ */
.infos-page {
  background: #ffffff;
  font-family: var(--font-body);
}

/* ── Layout général ── */
.infos-grid,
.infos-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: #e8e8e8;
  max-width: 100%;
}

/* ── Cards ── */
.infos-card {
  background: #ffffff;
  padding: 3rem 3.5rem;
}

.infos-card--dark {
  background: #fafaf8;
}

.infos-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--black);
}

.infos-card__tag {
  font-family: var(--font-h3-h4-h5);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--black);
}

.infos-card__block {
  margin-bottom: 1.75rem;
}

.infos-card__season {
  font-family: var(--font-secondary);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

.infos-card__season span {
  color: #999;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
}

.infos-card__note {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: #aaa;
  margin-bottom: 0.6rem;
  font-style: italic;
}

.infos-card__row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.infos-card__dash {
  color: var(--gold);
  flex-shrink: 0;
  font-size: 0.9rem;
}

.infos-card__text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #444;
  line-height: 1.65;
}

.infos-card__text strong {
  font-family: var(--font-secondary);
  color: var(--black);
}

.infos-card__alert {
  background: #f5f5f3;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

.infos-card__alert p {
  font-family: var(--font-secondary);
  font-size: 0.8rem;
  color: var(--black);
  line-height: 1.7;
}

.infos-card__highlight {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
}

/* Grille tarifs */
.infos-card__price-list {
  border-top: 1px solid #ebebeb;
  margin-bottom: 0.5rem;
}

.infos-card__price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid #ebebeb;
}

.infos-card__price-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #555;
}

.infos-card__price-value {
  font-family: var(--font-h3-h4-h5);
  font-size: 1.4rem;
  color: var(--black);
}

/* CTAs */
.infos-card__cta {
  display: inline-block;
  margin-top: 2rem;
  background: var(--black);
  color: #FFFDF3;
  padding: 13px 32px;
  font-family: var(--font-secondary);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease;
}

.infos-card__cta:hover {
  background: var(--gold);
  color: var(--black);
}

.infos-card__cta--outline {
  background: transparent;
  border: 1px solid var(--black);
  color: var(--black);
}

.infos-card__cta--outline:hover {
  background: var(--black);
  color: #FFFDF3;
}

.infos-card__link {
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 76, 0.4);
  padding-bottom: 1px;
  transition: border-color 0.2s;
}

.infos-card__link:hover {
  border-color: var(--gold);
}

/* ── Section Services ── */
.infos-services {
  background: var(--black);
  padding: 3rem 3.5rem;
}

.infos-section-head {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.infos-section-tag {
  font-family: var(--font-h3-h4-h5);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}

.infos-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #2a2a2a;
}

.infos-services__item {
  background: var(--black);
  padding: 1.75rem 1.5rem;
  transition: background 0.2s;
}

.infos-services__item:hover {
  background: #1e1e1e;
}

.infos-services__label {
  font-family: var(--font-secondary);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.infos-services__text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 253, 243, 0.55);
  line-height: 1.7;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .infos-grid,
  .infos-bottom {
    grid-template-columns: 1fr;
  }
  .infos-card {
    padding: 2rem 1.5rem;
  }
  .infos-services {
    padding: 2rem 1.5rem;
  }
  .infos-services__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .infos-services__grid {
    grid-template-columns: 1fr;
  }
}
/* ── Services grid (page infos) ── */
.main__services {
  padding: 0 0 2rem;
}

.main__services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 0 clamp(1rem, 4vw, 4rem) 2rem;
  max-width: 95%;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .main__services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1600px) {
  .main__services-grid {
    max-width: 85%;
  }
}
/* ── Hero header personnalisé (override par page) ─────────────────────── */
.header__hero--custom {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
}

.header__hero--custom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.08) 25%, transparent 45%, transparent 55%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.5) 100%);
}

.header__hero-content {
  position: relative;
  z-index: 1;
  padding: 2.5rem 2rem;
  color: #fff;
  max-width: 800px;
}

.header__hero-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  color: #fff;
}

.header__hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity: 0.85;
  margin: 0;
  color: #fff;
}

/* ── Hero header par défaut (bandeau titre de page) ──────────────────────── */
.header__hero--default {
  min-height: 180px;
  display: flex;
  align-items: flex-end;
  background-color: #1a1a1a;
  padding: 2rem;
}

.header__hero--default .header__hero-content {
  padding: 0;
}

.header__hero--default .header__hero-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Footer — grands écrans (1400px+) ───────────────────────────────────── */
@media (min-width: 1400px) {
  .footer__tagline,
  .footer__newsletter-label,
  .footer__nav-title,
  .footer__social-label {
    font-size: 0.7rem; /* était 10px fixe */
    letter-spacing: 0.18em;
  }
  .footer__address-line {
    font-size: 1rem;
  }
  .footer__hours-day {
    font-size: 0.9rem;
  }
  .footer__hours-time {
    font-size: 1rem;
  }
  .footer__title {
    font-size: 1.35rem;
  }
  .footer__nav-link {
    font-size: 1rem;
  }
  .footer__input {
    font-size: 0.95rem;
  }
  .footer__button {
    font-size: 0.75rem;
  }
  .footer__copyright {
    font-size: 0.85rem;
  }
  .footer__link {
    font-size: 0.85rem;
  }
  .footer__form-notice {
    font-size: 0.8rem;
  }
}
/* ── Footer — très grands écrans (1800px+) ──────────────────────────────── */
@media (min-width: 1800px) {
  .footer__tagline,
  .footer__newsletter-label,
  .footer__nav-title,
  .footer__social-label {
    font-size: 0.75rem;
  }
  .footer__address-line,
  .footer__hours-time {
    font-size: 1.05rem;
  }
  .footer__title {
    font-size: 1.5rem;
  }
  .footer__nav-link {
    font-size: 1.05rem;
  }
  .footer__copyright,
  .footer__link {
    font-size: 0.9rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   EXPOSITION CEIJA STOJKA — ENRICHISSEMENTS & NOUVELLES SECTIONS
   Ajouté : page exposition.html
   Palette : #000000 fond · #FFFDF3 crème · var(--gold) or · #1a1a1a surface
   ═══════════════════════════════════════════════════════════════════ */
/* ─── VARIABLES LOCALES EXPOSITION ─── */
:root {
  --expo-black: #0C0B09;
  --expo-cream: #FFFDF3;
  --expo-gold: #C8A960;
  --expo-gold-dim: rgba(200, 169, 96, 0.25);
  --expo-surface: #161412;
  --expo-surface-glass: rgba(20, 18, 14, 0.65);
  --expo-border: rgba(200, 169, 96, 0.12);
  --expo-muted: rgba(245, 240, 232, 0.55);
  --expo-max-w: 1280px;
  --expo-pad-x: clamp(1.25rem, 5vw, 5rem);
  --expo-section-gap: clamp(5rem, 10vw, 9rem);
  /* ─── PALETTE LIGHT — sections claires Awwwards ─── */
  --expo-light-bg: #FAFAF7;
  --expo-light-bg-alt: #F2F1ED;
  --expo-light-text: #1A1A18;
  --expo-light-text-mid: #5A5A55;
  --expo-light-muted: rgba(26, 26, 24, 0.50);
  --expo-gold-dark: #8B7425;
  --expo-light-border: rgba(26, 26, 24, 0.08);
  --expo-light-border-strong: rgba(26, 26, 24, 0.14);
  --expo-light-card-hover: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO EXPOSITION — hero-expo__*
   Layout : plein écran, image fond, grille 2 colonnes + strip bas
   ═══════════════════════════════════════════════════════════════════ */
.hero--exhibition {
  position: relative;
  min-height: 100dvh;
  background: var(--expo-gold);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* Image de fond plein écran */
.hero-expo__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-expo__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* Dégradé noir profond sur l'image — style Awwwards éditorial */
.hero-expo__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(12, 11, 9, 0.94) 0%, rgba(12, 11, 9, 0.55) 55%, rgba(12, 11, 9, 0.78) 100%), linear-gradient(to bottom, rgba(12, 11, 9, 0.3) 0%, rgba(12, 11, 9, 0) 40%, rgba(12, 11, 9, 0.8) 100%);
}

/* Layout principal du hero */
.hero-expo__layout {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 120px var(--expo-pad-x) 3rem;
  gap: 3rem;
  max-width: var(--expo-max-w);
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1023px) {
  .hero-expo__layout {
    grid-template-columns: 1fr;
    padding: 100px var(--expo-pad-x) 2rem;
    gap: 2rem;
    align-items: start;
  }
}
/* Colonne gauche */
.hero-expo__left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero-expo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--expo-gold);
  opacity: 0;
  animation: fadeUp 0.7s ease 0.1s forwards;
}

.hero-expo__eyebrow-line {
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--expo-gold);
  flex-shrink: 0;
}

.hero-expo__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(4.5rem, 10vw, 10rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--expo-cream);
  margin: 0;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.25s forwards;
}

.hero-expo__subtitle {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 253, 243, 0.7);
  letter-spacing: 0.02em;
  margin: 0;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.4s forwards;
}

/* Colonne droite */
.hero-expo__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.75rem;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.5s forwards;
}

@media (max-width: 1023px) {
  .hero-expo__right {
    align-items: flex-start;
  }
}
/* Bloc méta (dates, lieu, œuvres) */
.hero-expo__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--expo-border);
  border-radius: 6px;
  overflow: hidden;
  min-width: 260px;
  background: var(--expo-surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-expo__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.875rem 1.25rem;
}

.hero-expo__meta-divider {
  height: 1px;
  background: var(--expo-border);
}

.hero-expo__meta-label {
  font-family: var(--font-h3-h4-h5);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--expo-gold);
}

.hero-expo__meta-value {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--expo-cream);
  letter-spacing: 0.02em;
}

/* Warning */
.hero-expo__warning {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255, 253, 243, 0.55);
  border: 1px solid rgba(255, 253, 243, 0.15);
  border-radius: 6px;
  padding: 0.5rem 0.875rem;
}

.hero-expo__warning svg {
  flex-shrink: 0;
  stroke: rgba(255, 200, 100, 0.7);
}

/* Boutons CTA */
.hero-expo__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}

@media (max-width: 1023px) {
  .hero-expo__actions {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.hero-expo__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.75rem;
  background: var(--expo-gold);
  color: #0a0a0a;
  border: none;
  border-radius: 6px;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
}

.hero-expo__btn-primary:hover {
  background: #D4B86A;
  transform: translateY(-2px);
}

.hero-expo__btn-primary svg {
  transition: transform 0.25s ease;
}

.hero-expo__btn-primary:hover svg {
  transform: translateX(4px);
}

.hero-expo__btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: transparent;
  color: var(--expo-cream);
  border: 1px solid rgba(255, 253, 243, 0.3);
  border-radius: 6px;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.hero-expo__btn-secondary:hover {
  border-color: rgba(255, 253, 243, 0.65);
  background: rgba(255, 253, 243, 0.06);
}

/* Strip bas du hero — stats */
.hero-expo__strip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1.25rem var(--expo-pad-x);
  border-top: 1px solid var(--expo-border);
  background: rgba(12, 11, 9, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hero-expo__strip::-webkit-scrollbar {
  display: none;
}

.hero-expo__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0 2rem;
  flex-shrink: 0;
}

.hero-expo__stat:first-child {
  padding-left: 0;
}

.hero-expo__stat-num {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--expo-cream);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-expo__stat-lbl {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--expo-muted);
  white-space: nowrap;
}

.hero-expo__strip-sep {
  width: 1px;
  height: 2.5rem;
  background: var(--expo-border);
  flex-shrink: 0;
}

.hero-expo__scroll-cue {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--expo-muted);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.hero-expo__scroll-cue:hover {
  color: var(--expo-cream);
}

.hero-expo__scroll-cue svg {
  animation: bounceY 2.5s ease infinite;
}

@keyframes bounceY {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
/* ═══════════════════════════════════════════════════════════════════
   GALERIE ŒUVRES — améliorations
   Grid asymétrique : item large = 2 colonnes, reste = 1 colonne
   ═══════════════════════════════════════════════════════════════════ */
.exhibition-gallery {
  background: var(--expo-gold);
  padding: var(--expo-section-gap) var(--expo-pad-x);
}

.exhibition-gallery__container {
  max-width: var(--expo-max-w);
  margin: 0 auto;
}

.exhibition-gallery__header {
  margin-bottom: 3rem;
}

.exhibition-gallery__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--expo-gold);
  margin-bottom: 1rem;
}

.exhibition-gallery__eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--expo-gold);
}

.exhibition-gallery__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--expo-cream);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

.exhibition-gallery__subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--expo-muted);
  max-width: 520px;
  line-height: 1.7;
  margin: 0;
}

/* Grid 3 colonnes, item large = 2 colonnes */
.exhibition-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .exhibition-gallery__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 479px) {
  .exhibition-gallery__grid {
    grid-template-columns: 1fr;
  }
}
.exhibition-gallery__item {
  position: relative;
  overflow: hidden;
  background: var(--expo-surface);
  cursor: pointer;
}

/* Ratio 4/3 par défaut */
.exhibition-gallery__item::before {
  content: "";
  display: block;
  padding-top: 75%;
}

.exhibition-gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.exhibition-gallery__item:hover img {
  transform: scale(1.06);
}

/* Item large : 2 colonnes, ratio 16/9 */
.exhibition-gallery__item--large {
  grid-column: span 2;
}

.exhibition-gallery__item--large::before {
  padding-top: 56.25%;
}

@media (max-width: 479px) {
  .exhibition-gallery__item--large {
    grid-column: span 1;
  }
}
/* Overlay figcaption */
.exhibition-gallery__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 11, 9, 0.9) 0%, rgba(12, 11, 9, 0) 55%);
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.exhibition-gallery__item:hover .exhibition-gallery__overlay,
.exhibition-gallery__item:focus-within .exhibition-gallery__overlay {
  opacity: 1;
}

.exhibition-gallery__overlay-inner {
  display: flex;
  align-items: flex-end;
  gap: 0.875rem;
  width: 100%;
}

.exhibition-gallery__overlay-num {
  font-family: var(--font-h1-h2);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--expo-gold);
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 0.1rem;
}

.exhibition-gallery__overlay-title {
  display: block;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--expo-cream);
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.exhibition-gallery__overlay-desc {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--expo-muted);
  letter-spacing: 0.04em;
}

.exhibition-gallery__overlay-link {
  margin-left: auto;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 253, 243, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--expo-cream);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.exhibition-gallery__overlay-link:hover {
  background: var(--expo-gold);
  border-color: var(--expo-gold);
  color: #0a0a0a;
}

/* Footer galerie */
.exhibition-gallery__footer {
  margin-top: 2rem;
  text-align: center;
}

.exhibition-gallery__all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--expo-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--expo-gold-dim);
  padding-bottom: 0.25rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.exhibition-gallery__all-link:hover {
  color: var(--expo-cream);
  border-color: var(--expo-cream);
}

.exhibition-gallery__all-link svg {
  transition: transform 0.25s ease;
}

.exhibition-gallery__all-link:hover svg {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════════
   CITATION IMMERSIVE — exhibition-quote-immersive
   Fond plein #111110, grande typographie centrée
   ═══════════════════════════════════════════════════════════════════ */
.exhibition-quote-immersive {
  background: var(--expo-surface);
  padding: clamp(5rem, 12vw, 10rem) var(--expo-pad-x);
  position: relative;
  overflow: hidden;
}

/* Grain subtil */
.exhibition-quote-immersive::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Ligne décorative or en haut */
.exhibition-quote-immersive::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--expo-pad-x);
  right: var(--expo-pad-x);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--expo-gold) 30%, var(--expo-gold) 70%, transparent 100%);
  opacity: 0.4;
}

.exhibition-quote-immersive__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Guillemet décoratif géant */
.exhibition-quote-immersive__mark {
  font-family: var(--font-h1-h2);
  font-size: clamp(6rem, 15vw, 14rem);
  line-height: 0.6;
  color: var(--expo-gold);
  opacity: 0.18;
  user-select: none;
  display: block;
  margin-bottom: -1rem;
}

.exhibition-quote-immersive__text {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--expo-cream);
  text-transform: uppercase;
  margin: 0;
  border: none;
  padding: 0;
}

.exhibition-quote-immersive__text em {
  font-style: italic;
  font-weight: 300;
  color: var(--expo-gold);
  text-transform: none;
  display: block;
  font-size: 0.85em;
  margin-top: 0.5rem;
}

.exhibition-quote-immersive__author {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--expo-muted);
  font-style: normal;
}

.exhibition-quote-immersive__line {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--expo-gold);
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════
   PARCOURS DE VISITE — exhibition-parcours
   Liste numérotée verticale avec ligne connectrice
   ═══════════════════════════════════════════════════════════════════ */
.exhibition-parcours {
  background: var(--expo-gold);
  padding: var(--expo-section-gap) var(--expo-pad-x);
}

.exhibition-parcours__container {
  max-width: var(--expo-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

@media (max-width: 1023px) {
  .exhibition-parcours__container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
.exhibition-parcours__header {
  position: sticky;
  top: 6rem;
}

.exhibition-parcours__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--expo-gold);
  margin-bottom: 1.25rem;
}

.exhibition-parcours__eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--expo-gold);
}

.exhibition-parcours__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--expo-cream);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}

.exhibition-parcours__intro {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--expo-muted);
  line-height: 1.75;
  margin: 0;
  max-width: 400px;
}

/* Liste des étapes */
.exhibition-parcours__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Ligne verticale connectrice */
.exhibition-parcours__list::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--expo-gold) 0%, rgba(200, 169, 96, 0.1) 100%);
}

.parcours-step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--expo-border);
  position: relative;
}

.parcours-step:last-child {
  border-bottom: none;
}

.parcours-step__number {
  font-family: var(--font-h1-h2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--expo-gold);
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--expo-gold-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--expo-gold);
  position: relative;
  z-index: 1;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.parcours-step:hover .parcours-step__number {
  background: var(--expo-gold);
  border-color: var(--expo-gold);
  color: #0a0a0a;
}

.parcours-step__content {
  padding-top: 0.5rem;
}

.parcours-step__title {
  font-family: var(--font-h3-h4-h5);
  font-size: 1rem;
  font-weight: 500;
  color: var(--expo-cream);
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.parcours-step:hover .parcours-step__title {
  color: var(--expo-gold);
}

.parcours-step__desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--expo-muted);
  line-height: 1.7;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   MÉDIATION CULTURELLE — exhibition-mediation
   Grid 2×2 de cards + bloc CTA enseignants
   ═══════════════════════════════════════════════════════════════════ */
.exhibition-mediation {
  background: var(--expo-light-bg-alt);
  padding: var(--expo-section-gap) var(--expo-pad-x);
  position: relative;
}

.exhibition-mediation::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--expo-pad-x);
  right: var(--expo-pad-x);
  height: 1px;
  background: var(--expo-light-border);
}

.exhibition-mediation__container {
  max-width: var(--expo-max-w);
  margin: 0 auto;
}

.exhibition-mediation__header {
  margin-bottom: 3rem;
  max-width: 640px;
}

.exhibition-mediation__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--expo-gold-dark);
  margin-bottom: 1rem;
}

.exhibition-mediation__eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--expo-gold-dark);
}

.exhibition-mediation__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--expo-light-text);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.exhibition-mediation__intro {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--expo-light-text-mid);
  line-height: 1.75;
  margin: 0;
}

/* Grid 2×2 */
.exhibition-mediation__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--expo-light-border-strong);
  border: 1px solid var(--expo-light-border);
  margin-bottom: 2.5rem;
}

@media (max-width: 767px) {
  .exhibition-mediation__grid {
    grid-template-columns: 1fr;
  }
}
.mediation-card {
  background: var(--expo-light-bg);
  padding: 2rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background 0.25s ease;
}

.mediation-card:hover {
  background: var(--expo-light-card-hover);
}

.mediation-card__icon {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(139, 116, 37, 0.25);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--expo-gold-dark);
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.mediation-card:hover .mediation-card__icon {
  background: rgba(139, 116, 37, 0.08);
  border-color: var(--expo-gold-dark);
}

.mediation-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.mediation-card__title {
  font-family: var(--font-h3-h4-h5);
  font-size: 1rem;
  font-weight: 500;
  color: var(--expo-light-text);
  margin: 0;
  letter-spacing: 0.02em;
}

.mediation-card__desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--expo-light-text-mid);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.mediation-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--expo-gold-dark);
  text-decoration: none;
  margin-top: 0.5rem;
  border-bottom: 1px solid rgba(139, 116, 37, 0.3);
  padding-bottom: 0.2rem;
  align-self: flex-start;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.mediation-card__link:hover {
  color: var(--expo-light-text);
  border-color: var(--expo-light-text);
}

.mediation-card__link svg {
  transition: transform 0.2s ease;
}

.mediation-card__link:hover svg {
  transform: translateX(3px);
}

/* Bloc CTA enseignants */
.exhibition-mediation__cta-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem 2rem;
  border: 1px solid var(--expo-light-border-strong);
}

@media (max-width: 767px) {
  .exhibition-mediation__cta-block {
    flex-direction: column;
    align-items: flex-start;
  }
}
.exhibition-mediation__cta-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--expo-light-text-mid);
  line-height: 1.65;
  margin: 0;
  max-width: 520px;
}

.exhibition-mediation__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 1px solid var(--expo-gold);
  border-radius: 6px;
  color: var(--expo-gold-dark);
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease;
}

.exhibition-mediation__cta-btn:hover {
  background: var(--expo-gold);
  color: var(--expo-light-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   PRESSE & PUBLICATIONS — exhibition-press
   Layout 2 colonnes : catalogue + revue de presse
   ═══════════════════════════════════════════════════════════════════ */
.exhibition-press {
  background: var(--expo-gold);
  padding: var(--expo-section-gap) var(--expo-pad-x);
}

.exhibition-press__container {
  max-width: var(--expo-max-w);
  margin: 0 auto;
}

.exhibition-press__header {
  margin-bottom: 3rem;
}

.exhibition-press__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--expo-gold);
  margin-bottom: 1rem;
}

.exhibition-press__eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--expo-gold);
}

.exhibition-press__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--expo-cream);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0;
}

.exhibition-press__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 1023px) {
  .exhibition-press__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
/* Item catalogue */
.press-item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.press-item--catalogue {
  flex-direction: row;
  gap: 2rem;
  align-items: flex-start;
}

@media (max-width: 767px) {
  .press-item--catalogue {
    flex-direction: column;
  }
}
.press-item__visual {
  flex-shrink: 0;
}

.press-item__cover {
  width: 140px;
  aspect-ratio: 2/3;
  overflow: hidden;
  border: 1px solid var(--expo-border);
  box-shadow: 8px 8px 0 rgba(200, 169, 96, 0.08);
}

.press-item__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.press-item__cover:hover img {
  transform: scale(1.04);
}

.press-item__tag {
  display: inline-block;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--expo-gold);
  border: 1px solid var(--expo-gold-dim);
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.press-item__title {
  font-family: var(--font-h3-h4-h5);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--expo-cream);
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
}

.press-item__desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--expo-muted);
  line-height: 1.7;
  margin: 0 0 0.75rem;
}

.press-item__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.press-item__price {
  font-family: var(--font-h3-h4-h5);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--expo-cream);
}

.press-item__availability {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--expo-muted);
  letter-spacing: 0.04em;
}

.press-item__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--expo-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--expo-gold-dim);
  padding-bottom: 0.2rem;
  align-self: flex-start;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.press-item__link:hover {
  color: var(--expo-cream);
  border-color: rgba(255, 253, 243, 0.3);
}

.press-item__link svg {
  transition: transform 0.2s ease;
}

.press-item__link:hover svg {
  transform: translateX(3px);
}

.press-item__link--dossier:hover svg {
  transform: translateY(2px);
}

/* Revue de presse — citations */
.press-quotes {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.press-quote {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--expo-border);
}

.press-quote:first-child {
  border-top: 1px solid var(--expo-border);
}

.press-quote__text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(255, 253, 243, 0.8);
  line-height: 1.65;
  margin: 0 0 0.5rem;
  border: none;
  padding: 0;
}

.press-quote__source {
  font-family: var(--font-h3-h4-h5);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--expo-gold);
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════
   AMÉLIORATIONS SECTIONS EXISTANTES
   ═══════════════════════════════════════════════════════════════════ */
/* Intro artiste — fond clair, layout 2 colonnes */
.exhibition-intro {
  background: var(--expo-light-bg);
  padding: var(--expo-section-gap) var(--expo-pad-x);
}

.exhibition-intro__container {
  max-width: var(--expo-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

@media (max-width: 1023px) {
  .exhibition-intro__container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
.exhibition-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--expo-gold-dark);
  margin-bottom: 1.25rem;
}

.exhibition-intro__eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--expo-gold-dark);
}

.exhibition-intro__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--expo-light-text);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

.exhibition-intro__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--expo-light-text-mid);
  line-height: 1.8;
  margin: 0 0 1.25rem;
}

.exhibition-intro__text:last-child {
  margin-bottom: 0;
}

.exhibition-intro__image-container {
  position: relative;
}

.exhibition-intro__image-container img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  filter: grayscale(20%);
  transition: filter 0.4s ease;
}

.exhibition-intro__image-container:hover img {
  filter: grayscale(0%);
}

.exhibition-intro__image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: rgba(12, 11, 9, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.exhibition-intro__image-caption span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--expo-muted);
  text-transform: uppercase;
}

/* Details cards — fond clair */
.exhibition-details {
  background: var(--expo-light-bg);
  padding: clamp(3rem, 6vw, 5rem) var(--expo-pad-x);
  border-top: 1px solid var(--expo-light-border);
}

.exhibition-details__container {
  max-width: var(--expo-max-w);
  margin: 0 auto;
}

.exhibition-details__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--expo-light-border-strong);
  border: 1px solid var(--expo-light-border);
}

@media (max-width: 767px) {
  .exhibition-details__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.exhibition-details__card {
  background: var(--expo-light-bg);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background 0.25s ease;
}

.exhibition-details__card:hover {
  background: var(--expo-light-card-hover);
}

.exhibition-details__icon {
  color: var(--expo-gold);
  margin-bottom: 0.25rem;
}

.exhibition-details__title {
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--expo-light-muted);
  margin: 0;
}

.exhibition-details__text {
  font-family: var(--font-h3-h4-h5);
  font-size: 1rem;
  font-weight: 500;
  color: var(--expo-light-text);
  margin: 0;
}

.exhibition-details__subtext {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--expo-light-muted);
  margin: 0;
}

/* Contexte historique */
.exhibition-context {
  background: var(--expo-light-bg);
  padding: var(--expo-section-gap) var(--expo-pad-x);
}

.exhibition-context__container {
  max-width: var(--expo-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

@media (max-width: 1023px) {
  .exhibition-context__container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
.exhibition-context__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--expo-gold-dark);
  margin-bottom: 1.25rem;
}

.exhibition-context__eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--expo-gold-dark);
}

.exhibition-context__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--expo-light-text);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

.exhibition-context__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--expo-light-text-mid);
  line-height: 1.8;
  margin: 0 0 1.25rem;
}

.exhibition-context__quote blockquote {
  font-family: var(--font-h1-h2);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-style: italic;
  color: var(--expo-light-text);
  padding-left: 1.5rem;
  margin: 2rem 0 0;
}

.exhibition-context__quote cite {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--expo-gold-dark);
  font-style: normal;
  margin-top: 0.75rem;
}

/* Timeline améliorée */
.exhibition-context__timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 1rem;
}

.exhibition-context__timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--expo-gold-dark) 0%, rgba(107, 90, 17, 0.1) 100%);
}

.timeline-item {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--expo-light-border);
  position: relative;
}

.timeline-item:last-child {
  border-bottom: none;
}

/* Point sur la ligne */
.timeline-item::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 1.6rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--expo-gold-dark);
  transform: translateX(-3px);
}

.timeline-year {
  font-family: var(--font-h1-h2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--expo-gold-dark);
  padding-top: 0.1rem;
}

.timeline-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--expo-light-text-mid);
  line-height: 1.6;
}

/* Section visite */
.exhibition-visit {
  background: var(--expo-light-bg);
  padding: var(--expo-section-gap) var(--expo-pad-x);
}

.exhibition-visit__container {
  max-width: var(--expo-max-w);
  margin: 0 auto;
}

.exhibition-visit__header {
  margin-bottom: 3rem;
}

.exhibition-visit__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--expo-gold-dark);
  margin-bottom: 1rem;
}

.exhibition-visit__eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--expo-gold-dark);
}

.exhibition-visit__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--expo-light-text);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0;
}

.exhibition-visit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 1023px) {
  .exhibition-visit__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
.exhibition-visit__subtitle {
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--expo-gold);
  margin: 0 0 1.5rem;
}

.info-item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--expo-light-border);
}

.info-item:last-child {
  border-bottom: none;
}

.info-item__icon {
  color: var(--expo-gold);
  padding-top: 0.1rem;
}

.info-item__content h4 {
  font-family: var(--font-h3-h4-h5);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--expo-light-text);
  margin: 0 0 0.35rem;
  letter-spacing: 0.04em;
}

.info-item__content p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--expo-light-text-mid);
  line-height: 1.6;
  margin: 0;
}

/* Booking card — reste en ton chaud sombre pour contraste CTA */
.booking-card {
  background: var(--expo-gold);
  border: 1px solid var(--expo-border);
  border-top: 2px solid var(--expo-gold);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.booking-card__title {
  font-family: var(--font-h3-h4-h5);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--expo-cream);
  margin: 0;
}

.booking-card__text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--expo-muted);
  line-height: 1.7;
  margin: 0;
}

.booking-card__spots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.booking-card__spots-bar {
  height: 3px;
  background: rgba(255, 253, 243, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

.booking-card__spots-fill {
  height: 100%;
  background: var(--expo-gold);
  border-radius: 6px;
  transition: width 0.6s ease;
}

.booking-card__spots-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--expo-muted);
  letter-spacing: 0.06em;
}

.booking-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.booking-card__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  background: var(--expo-gold);
  color: #0a0a0a;
  border: none;
  border-radius: 6px;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease;
}

.booking-card__btn-primary:hover {
  background: #D4B86A;
}

.booking-card__btn-primary svg {
  transition: transform 0.2s ease;
}

.booking-card__btn-primary:hover svg {
  transform: translateX(4px);
}

.booking-card__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--expo-muted);
  border: 1px solid var(--expo-border);
  border-radius: 6px;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.booking-card__btn-secondary:hover {
  color: var(--expo-cream);
  border-color: rgba(255, 253, 243, 0.3);
}

/* Section événements associés */
.exhibition-events {
  background: var(--expo-light-bg-alt);
  padding: var(--expo-section-gap) var(--expo-pad-x);
}

.exhibition-events__container {
  max-width: var(--expo-max-w);
  margin: 0 auto;
}

.exhibition-events__header {
  margin-bottom: 3rem;
}

.exhibition-events__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--expo-gold-dark);
  margin-bottom: 1rem;
}

.exhibition-events__eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--expo-gold-dark);
}

.exhibition-events__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--expo-light-text);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0;
}

.exhibition-events__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--expo-light-border-strong);
  border: 1px solid var(--expo-light-border);
}

@media (max-width: 767px) {
  .exhibition-events__grid {
    grid-template-columns: 1fr;
  }
}
.event-card {
  background: var(--expo-light-bg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background 0.25s ease;
}

.event-card:hover {
  background: var(--expo-light-card-hover);
}

.event-card__date {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.event-card__day {
  font-family: var(--font-h1-h2);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--expo-light-text);
  line-height: 1;
  letter-spacing: -0.03em;
}

.event-card__month {
  font-family: var(--font-h3-h4-h5);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--expo-gold);
}

.event-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.event-card__title {
  font-family: var(--font-h3-h4-h5);
  font-size: 1rem;
  font-weight: 500;
  color: var(--expo-light-text);
  margin: 0;
}

.event-card__desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--expo-light-text-mid);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.event-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-h3-h4-h5);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--expo-gold-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 116, 37, 0.3);
  padding-bottom: 0.2rem;
  align-self: flex-start;
  margin-top: auto;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.event-card__link:hover {
  color: var(--expo-light-text);
  border-color: var(--expo-light-text);
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — focus visible
   ═══════════════════════════════════════════════════════════════════ */
.hero-expo__btn-primary:focus-visible,
.hero-expo__btn-secondary:focus-visible,
.mediation-card__link:focus-visible,
.press-item__link:focus-visible,
.exhibition-gallery__overlay-link:focus-visible,
.booking-card__btn-primary:focus-visible,
.event-card__link:focus-visible {
  outline: 2px solid var(--expo-gold);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-expo__eyebrow,
  .hero-expo__title,
  .hero-expo__subtitle,
  .hero-expo__right,
  .hero-expo__scroll-cue svg {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .exhibition-gallery__item img,
  .hero-expo__btn-primary,
  .hero-expo__btn-secondary {
    transition: none;
  }
  /* 🟢 FIX : désactiver les animations fadeUp du hero principal */
  .hero__eyebrow,
  .hero__title,
  .hero__description,
  .hero__cta,
  .hero__news-caption,
  .hero__scroll-arrow {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero__slide {
    transition: none;
  }
  .hero__scroll-arrow {
    animation: none;
  }
}
/* ── Vue liste brochure agenda ─────────────────────────────────────────────── */
/* Toggle boutons */
.view-toggle-btns {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
}

.view-toggle-btn svg {
  width: 16px;
  height: 16px;
}

.view-toggle-btn--active {
  background: #191919;
  border-color: #191919;
  color: #fff;
}

.view-toggle-btn:hover:not(.view-toggle-btn--active) {
  border-color: #191919;
  color: #191919;
}

/* Section liste */
.agenda-liste-section {
  background: #f9fafb;
  padding: 2rem 1rem;
}

@media (min-width: 1024px) {
  .agenda-liste-section {
    padding: 3rem 4rem;
  }
}
.agenda-liste-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Bloc mois */
.agenda-mois-block {
  margin-bottom: 2.5rem;
}

.agenda-mois-titre {
  display: inline-block;
  background: #191919;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 6px;
  margin-bottom: 1rem;
}

/* 3 colonnes */
.agenda-mois-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .agenda-mois-cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .agenda-mois-cols {
    grid-template-columns: 1fr;
  }
}
/* Bloc jour */
.agenda-jour-block {
  margin-bottom: 1rem;
}

.agenda-jour-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 6px;
}

.agenda-jour-nom {
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  text-transform: capitalize;
}

.agenda-jour-num {
  font-size: 1rem;
  font-weight: 700;
  color: #191919;
}

/* Ligne événement */
.agenda-ev-line {
  padding: 6px 0;
  border-bottom: 1px dotted #e5e7eb;
}

.agenda-ev-line:last-child {
  border-bottom: none;
}

.agenda-ev-top {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.agenda-ev-heure {
  font-size: 0.72rem;
  font-weight: 700;
  color: #191919;
}

.agenda-ev-sep {
  color: #d1d5db;
  font-size: 0.65rem;
}

.agenda-ev-type {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

/* Badge musée — identique à hp-actu-card__musee */
.agenda-ev-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  border-radius: 6px;
  margin-left: auto;
}

.agenda-ev-badge img {
  width: 36px;
  height: 11px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block;
}

.agenda-ev-titre {
  font-size: 0.78rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin-bottom: 1px;
}

.agenda-ev-sous {
  font-size: 0.7rem;
  font-style: italic;
  color: #6b7280;
  margin-bottom: 1px;
}

.agenda-ev-public {
  font-size: 0.68rem;
  color: #9ca3af;
  margin-bottom: 2px;
}

.agenda-ev-infos {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  color: #6b7280;
  margin-top: 2px;
}

.agenda-ev-tarif {
  font-weight: 600;
  color: #374151;
}

.agenda-ev-dot {
  color: #d1d5db;
}

.agenda-ev-lieu {
  color: #9ca3af;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCS GUTENBERG — Pattern Timeline horizontale (mbaa-tl-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.mbaa-tl-section {
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
  background: #191919;
  color: #FFFDF3;
  overflow: hidden;
}

.mbaa-tl-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.mbaa-tl-eyebrow {
  font-family: var(--font-display, "ClashDisplay-Bold", sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.5rem;
}

.mbaa-tl-title {
  font-family: var(--font-display, "ClashDisplay-Bold", sans-serif);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  color: #FFFDF3;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ── Track horizontal ──────────────────────────────────────────────────────── */
.mbaa-tl-track-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.mbaa-tl-track-wrap::-webkit-scrollbar {
  display: none;
}

.mbaa-tl-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: flex-start;
  min-width: max-content;
  padding-bottom: 1.5rem;
}

.mbaa-tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.5rem;
  position: relative;
  cursor: pointer;
  min-width: 120px;
  flex-shrink: 0;
}

/* Connecteur horizontal entre steps */
.mbaa-tl-step + .mbaa-tl-step::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  width: calc(50% - 0px);
  height: 2px;
  background: rgba(149, 126, 24, 0.3);
}

.mbaa-tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(149, 126, 24, 0.3);
  border: 1.5px solid rgba(149, 126, 24, 0.5);
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
}

.mbaa-tl-step--active .mbaa-tl-dot,
.mbaa-tl-step:hover .mbaa-tl-dot {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.3);
}

.mbaa-tl-period {
  font-family: var(--font-display, "ClashDisplay-Bold", sans-serif);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

.mbaa-tl-name {
  font-family: var(--font-primary, "Synonym", sans-serif);
  font-size: 0.8rem;
  color: rgba(255, 253, 243, 0.6);
  text-align: center;
  margin: 0;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.mbaa-tl-step--active .mbaa-tl-name,
.mbaa-tl-step:hover .mbaa-tl-name {
  color: #FFFDF3;
}

/* Barre de progression */
.mbaa-tl-progress {
  height: 2px;
  background: rgba(149, 126, 24, 0.2);
  margin-top: 0.5rem;
  border-radius: 6px;
  overflow: hidden;
}

.mbaa-tl-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 6px;
  transition: width 0.4s ease;
}

/* ── Carte détail ──────────────────────────────────────────────────────────── */
.mbaa-tl-detail-wrap {
  border-top: 1px solid rgba(149, 126, 24, 0.2);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.mbaa-tl-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .mbaa-tl-detail {
    grid-template-columns: 1fr 2fr 1fr;
    align-items: start;
    gap: 2rem;
  }
}
.mbaa-tl-detail-period {
  font-family: var(--font-display, "ClashDisplay-Bold", sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.mbaa-tl-detail-name {
  font-family: var(--font-display, "ClashDisplay-Bold", sans-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: #FFFDF3;
  text-transform: uppercase;
  margin: 0;
}

.mbaa-tl-detail-desc {
  font-family: var(--font-primary, "Synonym", sans-serif);
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.75;
  color: rgba(255, 253, 243, 0.75);
  margin: 0;
}

.mbaa-tl-detail-artists {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mbaa-tl-detail-artist {
  font-family: var(--font-display, "ClashDisplay-Bold", sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFDF3;
  background: rgba(149, 126, 24, 0.15);
  border: 1px solid rgba(149, 126, 24, 0.3);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOC GUTENBERG — Carousel Activités (mbaa-carousel-activites-block)
   Les slides utilisent les classes .carousel__* déjà définies plus haut.
   Ces classes couvrent les filtres et le wrapper du bloc.
   ═══════════════════════════════════════════════════════════════════════════ */
.mbaa-carousel-activites-block {
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.mbaa-ca-filters {
  padding: 0 clamp(1rem, 4vw, 2rem);
  margin-bottom: 1.5rem;
}

.mbaa-ca-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Les boutons filtres utilisent .filtre__list-item déjà défini dans ce fichier */
/* ─── Override cards carousel-activites : plus compactes, 3 visibles ────── */
.mbaa-carousel-activites-block .carousel__item {
  min-height: clamp(280px, 38vh, 380px);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(0.6rem, 1.5vw, 0.85rem) 0;
}

.mbaa-carousel-activites-block .carousel__item-title {
  font-size: clamp(1rem, 2vw, 1.35rem);
  margin-bottom: 0.3rem;
}

.mbaa-carousel-activites-block .carousel__item-text {
  font-size: clamp(0.7rem, 1.4vw, 0.82rem);
  -webkit-line-clamp: 2;
}

.mbaa-carousel-activites-block .carousel__item-badge {
  font-size: clamp(0.6rem, 1.2vw, 0.75rem);
  padding: 0.2rem 0.5rem;
}

.mbaa-carousel-activites-block .carousel__item-date,
.mbaa-carousel-activites-block .carousel__item-time {
  font-size: clamp(0.6rem, 1.1vw, 0.72rem);
}

.mbaa-carousel-activites-block .carousel__item-meta {
  margin-bottom: 0.3rem;
}

.mbaa-carousel-activites-block .carousel__item-bottom {
  padding: clamp(0.7rem, 1.8vw, 1rem);
  margin-bottom: clamp(0.7rem, 1.8vw, 1rem);
}

/* Mobile : 1 card visible, hauteur réduite */
@media (max-width: 575px) {
  .mbaa-carousel-activites-block .carousel__item {
    min-height: 260px;
  }
}
/* ══════════════════════════════════════════════════
   SECTION EXPOSITIONS — page-evenements.php
══════════════════════════════════════════════════ */
.expo-agenda-section {
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
  background: var(--white, #FFFDF3);
}

.expo-agenda-container {
  max-width: 1200px;
  margin: 0 auto;
}

.expo-agenda__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--black, #1a1a1a);
  padding: 1rem 1.5rem;
  margin-bottom: 2.5rem;
}

.expo-agenda__cross {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.expo-agenda__title {
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: #FFFDF3;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.expo-agenda__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.expo-agenda-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expo-agenda-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.expo-agenda-card__media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f0ede6;
}

.expo-agenda-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.expo-agenda-card:hover .expo-agenda-card__img {
  transform: scale(1.04);
}

.expo-agenda-card__img--empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8e0d5, #d4c9b8);
}

.expo-agenda-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: #6b4c9a;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
}

.expo-agenda-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.expo-agenda-card__title {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 700;
  color: var(--black, #1a1a1a);
  margin: 0;
  line-height: 1.3;
}

.expo-agenda-card__dates {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  color: #6b4c9a;
  font-weight: 600;
  margin: 0;
}

.expo-agenda-card__desc {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

.expo-agenda-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.expo-agenda-card__lieu {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-primary);
  font-size: 0.78rem;
  color: #777;
}

.expo-agenda-card__tarif {
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 600;
  color: #276749;
  background: rgba(39, 103, 73, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
}

@media (max-width: 640px) {
  .expo-agenda__grid {
    grid-template-columns: 1fr;
  }
}
/* ── Badges carousel actualités ── */
.actu-slide .event-image {
  position: relative;
}

/* Label catégorie — coin supérieur gauche */
.actu-slide__cat-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
}

/* Label musée — coin inférieur droit */
.actu-slide__musee-badge {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   CORRECTIONS RESPONSIVE MOBILE GLOBALES
   ══════════════════════════════════════════════════════════════════════════ */
/* Empêche le débordement horizontal sur toutes les pages */
@media (max-width: 767px) {
  /* Sécurité globale */
  body {
    overflow-x: hidden;
  }
  /* Bannière principale — évite le débordement */
  .main__banniere {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 10px 10px 0 !important;
  }
  .main > .main__banniere,
  .main > * > .main__banniere {
    margin-left: -0.75rem !important;
    max-width: calc(100% + 0.75rem) !important;
  }
  /* Visite bar — passe en colonne */
  .visite-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .visite-bar__sep {
    display: none;
  }
  /* Grille explore — colonne unique */
  .main__explore-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    margin: 1rem !important;
  }
  /* Toutes les cards : même taille, reset des spans */
  .main__explore-card,
  .main__explore-card--fat,
  .main__explore-card--test,
  .main__explore-card--child,
  .main__explore-card--wide,
  .main__explore-card--tall {
    grid-column: 1/-1 !important;
    grid-row: auto !important;
    height: 200px !important;
  }
  .main__explore-card[style*=grid-column] {
    grid-column: 1/-1 !important;
  }
  /* Cards actualités — colonne unique */
  .hp-actu-grid {
    grid-template-columns: 1fr !important;
  }
  /* Infos utiles — colonne unique */
  .main__infos-utiles-separator {
    flex-direction: column !important;
  }
  .main__infos-utiles-cards {
    flex-direction: column !important;
  }
  /* Filtre — wrap sur plusieurs lignes sur mobile */
  .filtre__list {
    overflow-x: visible;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0;
  }
  .filtre__list-item {
    flex: 0 0 auto;
  }
  /* ── Carousel — lisibilité senior ── */
  .carousel__item-title {
    font-size: 1.35rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
  }
  .carousel__item-text {
    font-size: 0.95rem;
    line-height: 1.55;
  }
  /* Date/heure : légèrement agrandies pour la lisibilité senior */
  .carousel__item-date,
  .carousel__item-time {
    font-size: 0.8rem;
    color: rgba(255, 253, 243, 0.88);
  }
  .carousel__item-meta {
    margin-bottom: 0.5rem;
  }
  .carousel__item-badge {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
  }
  /* ── Flèches carousel — plus petites sur mobile ── */
  .carousel__arrow {
    width: 32px;
    height: 32px;
  }
  .carousel__arrow img {
    width: 20px;
    height: 20px;
  }
}
/* Tablette */
@media (min-width: 768px) and (max-width: 1023px) {
  .main__explore-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    margin: 2rem !important;
  }
  .main__explore-card[style*="grid-column: span 5"] {
    grid-column: span 3 !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   FILTRE AUTOMATIQUE SUR IMAGES DE HEADER
   Pages : Collections · Événements · Fiche Œuvre · Musée
   Overlay ::before sur chaque hero/panel avec image de fond
   ═══════════════════════════════════════════════════════════════════ */
/* Événements — overlay sur le header__hero */
.header--evenement .header__hero--evenement {
  position: relative;
}

.header--evenement .header__hero--evenement::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 8, 5, 0.5) 0%, rgba(10, 8, 5, 0.08) 25%, transparent 45%, transparent 55%, rgba(10, 8, 5, 0.08) 75%, rgba(10, 8, 5, 0.5) 100%);
  pointer-events: none;
  z-index: 0;
}

.header--evenement .header__hero--evenement > * {
  position: relative;
  z-index: 1;
}

/* Fiche Œuvre — overlay sur le header__hero (classe .header sans modificateur) */
.header:not([class*=header--]) .header__hero,
.header.header--fiche .header__hero {
  position: relative;
}

.header:not([class*=header--]) .header__hero::before,
.header.header--fiche .header__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.08) 25%, transparent 45%, transparent 55%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  z-index: 0;
}

.header:not([class*=header--]) .header__hero > *,
.header.header--fiche .header__hero > * {
  position: relative;
  z-index: 1;
}

/* Musée — l'overlay est géré dans page-musee.css, on ne surcharge plus ici */
/* .musees__panel-overlay — styles dans assets/css/page-musee.css */
/* =============================================================================
   QR Scan — Bouton & Modal
   ============================================================================= */
.qr-scan {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem;
}

.qr-scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.25rem;
  font-family: var(--font-secondary, sans-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
  background: transparent;
  border: 1px solid var(--gold, #ae9a79);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.qr-scan-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.qr-scan-btn:hover {
  background: var(--gold, #ae9a79);
  color: #1a1a1a;
}

.qr-scan-btn:hover svg {
  color: #1a1a1a;
}

.qr-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 13, 10, 0.97);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1.25rem 3rem;
  overflow-y: auto;
}

.qr-modal.is-open,
.qr-modal.open {
  display: flex;
}

.qr-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 420px;
  margin-bottom: 1.5rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid rgba(174, 154, 121, 0.25);
}

.qr-modal__label {
  font-family: var(--font-secondary, sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
}

.qr-modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(174, 154, 121, 0.35);
  color: var(--gold, #ae9a79);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.qr-modal__close:hover {
  background: var(--gold, #ae9a79);
  color: #1a1a1a;
}

#qr-reader {
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(174, 154, 121, 0.4);
  background: #0d0c0a;
  overflow: hidden;
}

#qr-reader > * {
  font-family: var(--font-body, sans-serif) !important;
  color: rgba(245, 242, 236, 0.7) !important;
}

.qr-result {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 420px;
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(174, 154, 121, 0.2);
  background: rgba(174, 154, 121, 0.05);
  text-align: center;
}

.qr-result.is-visible,
.qr-result.visible {
  display: flex;
}

.qr-result__eyebrow {
  font-family: var(--font-secondary, sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
}

.qr-result__text {
  font-size: 0.875rem;
  color: rgba(245, 242, 236, 0.8);
  word-break: break-all;
  line-height: 1.5;
}

.qr-result__actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.25rem;
}

.btn-outline {
  padding: 0.5rem 1rem;
  font-family: var(--font-secondary, sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
  background: transparent;
  border: 1px solid var(--gold, #ae9a79);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-outline:hover {
  background: var(--gold, #ae9a79);
  color: #1a1a1a;
}

.btn-gold {
  display: none;
  padding: 0.5rem 1rem;
  font-family: var(--font-secondary, sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
  background: var(--gold, #ae9a79);
  border: 1px solid var(--gold, #ae9a79);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.btn-gold:hover {
  background: #c9b48e;
  box-shadow: 0 3px 12px rgba(174, 154, 121, 0.35);
}

/* ============================================================
   PAGES LÉGALES — Mentions légales · Politique de conf. · Accessibilité
   ============================================================ */
.legal-page *,
.legal-page *::before,
.legal-page *::after {
  box-sizing: border-box;
}

.legal-page {
  background: #FFFDF3;
  min-height: 100vh;
}

.legal-hero {
  position: relative;
  background: #1a1917;
  padding: 8rem 4rem 5rem;
  overflow: hidden;
  min-height: 38vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.legal-hero::before {
  content: attr(data-bg-text);
  position: absolute;
  right: -0.05em;
  bottom: -0.2em;
  font-family: var(--font-primary);
  font-size: clamp(10rem, 22vw, 20rem);
  font-weight: 700;
  color: rgba(174, 154, 121, 0.06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}

.legal-hero::after {
  content: "";
  position: absolute;
  left: 4rem;
  top: 7rem;
  bottom: 4rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold, #ae9a79), transparent);
}

.legal-hero__inner {
  position: relative;
  z-index: 1;
  padding-left: 5rem;
}

.legal-hero__eyebrow {
  font-family: var(--font-primary);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
  margin: 0 0 1.25rem;
  display: block;
}

.legal-hero__title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  color: #FFFDF3;
  margin: 0 0 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.legal-hero__meta {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.legal-hero__date {
  font-family: var(--font-primary);
  font-size: 0.72rem;
  color: rgba(255, 253, 243, 0.35);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-hero__tag {
  font-family: var(--font-primary);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--black, #2e2d2c);
  background: var(--gold, #ae9a79);
  padding: 0.3rem 0.8rem;
  font-weight: 700;
}

.legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 4rem 8rem;
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 6rem;
  padding-right: 3rem;
}

.legal-toc__label {
  font-family: var(--font-secondary);
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
  margin-bottom: 1.25rem;
  display: block;
}

.legal-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-toc__item {
  padding: 0.5rem 0 0.5rem 1.25rem;
}

.legal-toc__link {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: #9a9590;
  text-decoration: none;
  letter-spacing: 0.03em;
  line-height: 1.4;
  transition: color 0.2s;
  display: block;
}

.legal-toc__link:hover,
.legal-toc__link.is-active {
  color: var(--black, #2e2d2c);
}

.legal-toc__link.is-active {
  font-weight: 600;
}

.legal-content {
  min-width: 0;
}

.legal-section {
  position: relative;
  padding: 3.5rem 0 3.5rem 3rem;
  border-bottom: 1px solid rgba(174, 154, 121, 0.15);
}

.legal-section:last-child {
  border-bottom: none;
}

.legal-section__bg-num {
  position: absolute;
  left: -0.5rem;
  top: 2rem;
  width: 20px;
  height: 20px;
  font-size: 0;
  color: transparent;
  background: url("assets/Img/svg/icon-arrow-filtre.svg") no-repeat center/contain;
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

.legal-section__label {
  font-family: var(--font-primary);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
  display: block;
  margin-bottom: 0.6rem;
}

.legal-section__title {
  font-family: var(--font-primary);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--black, #2e2d2c);
  margin: 0 0 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.legal-section p {
  font-family: var(--font-paragraphe);
  font-size: 0.92rem;
  line-height: 1.85;
  color: #5a5754;
  margin: 0 0 1rem;
}

.legal-section ul,
.legal-section ol {
  padding-left: 0;
  margin: 0 0 1rem;
  list-style: none;
}

.legal-section li {
  font-family: var(--font-primary);
  font-size: 0.92rem;
  line-height: 1.75;
  color: #5a5754;
  padding: 0.35rem 0 0.35rem 1.5rem;
  position: relative;
  border-bottom: 1px solid rgba(174, 154, 121, 0.1);
}

.legal-section li:last-child {
  border-bottom: none;
}

.legal-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 1px;
  background: var(--gold, #ae9a79);
}

.legal-section a {
  color: var(--black, #2e2d2c);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(174, 154, 121, 0.5);
  transition: text-decoration-color 0.2s;
}

.legal-section a:hover {
  text-decoration-color: var(--gold, #ae9a79);
}

.legal-section strong {
  color: var(--black, #2e2d2c);
  font-weight: 600;
}

.legal-section code {
  font-size: 0.82rem;
  background: rgba(174, 154, 121, 0.1);
  padding: 0.1em 0.4em;
  border-radius: 6px;
  color: var(--black, #2e2d2c);
}

.legal-contact-box {
  position: relative;
  background: #1a1917;
  padding: 1.75rem 2rem 1.75rem 2.5rem;
  margin: 1.5rem 0;
  overflow: hidden;
}

.legal-contact-box p {
  color: rgba(255, 253, 243, 0.75) !important;
  font-size: 0.85rem !important;
  margin: 0.2rem 0 !important;
  line-height: 1.6 !important;
}

.legal-contact-box p strong {
  color: #FFFDF3 !important;
  font-size: 0.9rem;
}

.legal-contact-box a {
  color: var(--gold, #ae9a79) !important;
  text-decoration: none !important;
}

.legal-contact-box a:hover {
  text-decoration: underline !important;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.75rem;
  font-family: var(--font-primary);
  font-size: 0.82rem;
}

.legal-table thead tr {
  border-bottom: 2px solid var(--gold, #ae9a79);
}

.legal-table th {
  padding: 0.75rem 1rem 0.75rem 0;
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.65rem;
  color: var(--black, #2e2d2c);
}

.legal-table td {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid rgba(174, 154, 121, 0.12);
  color: #5a5754;
  vertical-align: top;
  line-height: 1.5;
}

.legal-table tr:last-child td {
  border-bottom: none;
}

.legal-table tbody tr:hover td {
  background: rgba(174, 154, 121, 0.04);
}

.legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--gold, #ae9a79);
  color: var(--gold, #ae9a79);
  font-family: var(--font-primary);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
    padding: 3rem 2rem 5rem;
  }
  .legal-toc {
    position: static;
    padding-right: 0;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(174, 154, 121, 0.2);
    margin-bottom: 2.5rem;
  }
  .legal-hero {
    padding: 7rem 2rem 3.5rem;
    min-height: auto;
  }
  .legal-hero::after {
    left: 2rem;
  }
  .legal-hero__inner {
    padding-left: 3rem;
  }
  .legal-section {
    padding: 2.5rem 0;
  }
  .legal-section__bg-num {
    display: none;
  }
}
@media (max-width: 480px) {
  .legal-hero {
    padding: 6rem 1.5rem 3rem;
  }
  .legal-hero::after {
    display: none;
  }
  .legal-hero__inner {
    padding-left: 0;
  }
  .legal-layout {
    padding: 2rem 1.25rem 4rem;
  }
  .legal-table {
    font-size: 0.75rem;
  }
  .legal-table th,
  .legal-table td {
    padding: 0.6rem 0.5rem 0.6rem 0;
  }
}
/* =============================================================================
   MENU MOBILE — AUDIT & AMÉLIORATIONS MBAA
   Appliqué le : 2025
   Problèmes corrigés :
     1. Logo visible dans le menu ouvert
     2. Indicateur de page active (gold var(--gold))
     3. Hiérarchie visuelle liens principaux vs secondaires
     4. CTA Billetterie mis en avant
     5. Liens principaux plus grands et plus lisibles
     6. Zone secondaire (recherche + contact) avec label texte
   ============================================================================= */
@media (max-width: 1023px) {
  /* ── 1. Logo dans le menu ouvert ─────────────────────────────────────────── */
  .header__nav-logo {
    display: flex;
    align-items: center;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid rgba(174, 154, 121, 0.2);
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
  }
  .header__nav[aria-hidden=false] .header__nav-logo {
    opacity: 1;
    transform: translateY(0);
  }
  .header__nav-logo a {
    display: block;
    line-height: 0;
  }
  .header__nav-logo-img {
    height: 52px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1); /* blanc sur fond sombre */
  }
  /* ── 2. Liens principaux — taille, lisibilité et flèche → (style Tate) ──── */
  /* Écrase le clamp() existant pour forcer 18px minimum sur mobile */
  .header__nav-list--main .header__nav-link {
    font-size: 1.125rem; /* 18px — hiérarchie claire, lisible */
    letter-spacing: 0.12em;
    padding: 1rem 0; /* 16px — touch target 44px+ avec min-height */
    font-family: "Neutraface2Display-Titling", "Neutraface2Text-Demi", sans-serif;
    color: rgba(255, 253, 243, 0.85);
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* Flèche → à droite */
  .header__nav-list--main .header__nav-link::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 18px;
    background-image: url("../../Img/svg/icon-arrow-filtre.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
  }
  .header__nav-list--main .header__nav-link:hover,
  .header__nav-list--main .header__nav-link:focus-visible {
    color: #FFFDF3;
    padding-left: 6px; /* micro-indent au hover — feedback subtil */
  }
  .header__nav-list--main .header__nav-link:hover::after,
  .header__nav-list--main .header__nav-link:focus-visible::after {
    opacity: 0.85;
    transform: translateX(4px);
  }
  /* ── 3. Indicateur de page active — gold ────────────────────────────────── */
  .header__nav-list--main .header__nav-link--active {
    color: var(--gold) !important; /* --gold */
    opacity: 1 !important;
    position: relative;
  }
  /* Pas de flèche → sur le lien actif (remplacé par le trait gauche) */
  .header__nav-list--main .header__nav-link--active::after {
    display: none;
  }
  /* Trait gold à gauche du lien actif */
  .header__nav-list--main .header__nav-link--active::before {
    content: "";
    position: absolute;
    left: -1.75rem; /* sort dans le padding du nav */
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.25em;
    background: var(--gold);
    border-radius: 0 2px 2px 0;
  }
  /* ── 4. Séparateurs — gold à 15% au lieu de blanc à 15% ─────────────────── */
  .header__nav-list--main .header__nav-item {
    border-bottom-color: rgba(174, 154, 121, 0.15);
  }
  /* Dernier item principal : pas de séparateur avant la zone secondaire */
  .header__nav-list--main .header__nav-item:last-child {
    border-bottom: none;
  }
  /* ── 5. CTA Billetterie / Réserver ──────────────────────────────────────── */
  .header__nav-cta-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--gold);
    color: #2e2d2c;
    font-family: "Neutraface2Text-Demi", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
  }
  .header__nav-cta-mobile:hover,
  .header__nav-cta-mobile:focus-visible {
    background: var(--gold); /* gold éclairci */
    color: #2e2d2c;
  }
  .header__nav-cta-mobile:active {
    transform: scale(0.98);
  }
  .header__nav-cta-mobile:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  /* ── 6. Zone secondaire — hiérarchie claire ──────────────────────────────── */
  .header__nav-list--secondary-mobile {
    flex-direction: row !important;
    align-items: center;
    gap: 0 !important;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(174, 154, 121, 0.2);
    margin-top: auto;
  }
  /* Items secondaires : taille réduite vs liens principaux */
  .header__nav-list--secondary-mobile .header__nav-item {
    border-bottom: none;
    min-height: 44px;
    width: auto;
    flex: 1;
    justify-content: center;
  }
  .header__nav-list--secondary-mobile .header__nav-link {
    font-size: 0.7rem !important; /* 11.2px — clairement secondaire vs 18px principal */
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 253, 243, 0.55);
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    transition: color 0.2s ease;
  }
  .header__nav-list--secondary-mobile .header__nav-link:hover {
    color: rgba(255, 253, 243, 0.9);
    padding-left: 0.75rem; /* annule le micro-indent hérité */
  }
  /* Icône loupe dans la zone secondaire */
  .header__nav-list--secondary-mobile .header__nav-icon {
    width: 20px;
    height: 20px;
    stroke: rgba(255, 253, 243, 0.55);
    transition: stroke 0.2s ease;
  }
  .header__nav-list--secondary-mobile .header__nav-link:hover .header__nav-icon {
    stroke: rgba(255, 253, 243, 0.9);
  }
  /* Lien Contact actif dans la zone secondaire */
  .header__nav-list--secondary-mobile .header__nav-link--active {
    color: var(--gold) !important;
  }
  /* Séparateur vertical entre loupe et Contact */
  /* ── 7. Stagger — inclut le logo et le CTA ───────────────────────────────── */
  .header__nav[aria-hidden=false] .header__nav-cta-mobile {
    animation: navItemFadeIn 0.3s ease both;
    animation-delay: 0.3s;
  }
  .header__nav[aria-hidden=false] .header__nav-list--secondary-mobile {
    animation: navItemFadeIn 0.3s ease both;
    animation-delay: 0.35s;
  }
}
/* Desktop : masquer le logo et le CTA mobile */
@media (min-width: 1024px) {
  .header__nav-logo,
  .header__nav-cta-mobile {
    display: none !important;
  }
}
/* =========================================
   HERO — CORRECTIF MOBILE (< 768px)
   Restructure en colonne verticale :
   eyebrow → titre → description → CTA → stats
   AUCUNE modification desktop.
   ========================================= */
@media (max-width: 767px) {
  /* 1. Overlay sombre renforcé sur l'image de fond pour lisibilité */
  .header::before {
    background: linear-gradient(to bottom, rgba(15, 15, 15, 0.6) 0%, rgba(15, 15, 15, 0.1) 25%, transparent 45%, transparent 55%, rgba(15, 15, 15, 0.1) 75%, rgba(15, 15, 15, 0.6) 100%);
  }
  /* 2. Hero : passe en flex-column, empile les zones */
  .header__hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 5.5rem 1.25rem 1.5rem !important;
    min-height: 100dvh !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  /* 3. hero__left : eyebrow + titre en haut, sans padding parasite */
  .hero__left {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
    order: 1;
  }
  /* 4. hero__right : description + CTA juste sous le titre */
  .hero__right {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
    padding: 0 !important;
    margin: 1.25rem 0 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
    order: 2;
  }
  /* 5. hero__strip : stats en bas, lisibles horizontalement */
  .hero__strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1rem 1.5rem !important;
    padding-top: 1.25rem !important;
    margin-top: 1.5rem !important;
    border-top: 1px solid rgba(245, 242, 236, 0.15) !important;
    grid-column: unset !important;
    grid-row: unset !important;
    order: 3;
  }
  /* 6. Dividers : masqués sur mobile (flex-wrap gère l'espacement) */
  .hero__strip-divider {
    display: none !important;
  }
  /* 7. Eyebrow : taille lisible, pas de margin-bottom excessif */
  .hero__eyebrow {
    font-size: 0.6875rem !important; /* 11px — uppercase lisible */
    margin-bottom: 0.75rem !important;
    opacity: 1 !important;
    animation: none !important;
  }
  /* 8. Titre : taille fluide safe sur 320px */
  .hero__title {
    font-size: clamp(2.25rem, 11vw, 3.5rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
    animation: none !important;
  }
  /* 9. Description : corps minimum 16px, aligné à gauche */
  .hero__description {
    font-size: 1rem !important; /* 16px minimum WCAG */
    line-height: 1.6 !important;
    text-align: left !important;
    max-width: 100% !important;
    color: rgba(255, 253, 243, 0.85) !important;
    opacity: 1 !important;
    animation: none !important;
  }
  /* 10. CTA : touch target 44px minimum */
  .hero__cta {
    min-height: 44px !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.8125rem !important;
    align-self: flex-start !important;
    opacity: 1 !important;
    animation: none !important;
  }
  /* 11. Stats : chiffres lisibles, labels corrects */
  .hero__stat {
    flex-direction: column !important;
    gap: 0.15rem !important;
  }
  .hero__stat-number {
    font-size: 1.5rem !important;
    line-height: 1 !important;
  }
  .hero__stat-label {
    font-size: 0.625rem !important;
    letter-spacing: 0.14em !important;
  }
  /* 12. Scroll indicator : masqué sur mobile (pas de place) */
  .hero__scroll {
    display: none !important;
  }
  /* 13. Désactiver les animations fadeUp sur mobile (perf + lisibilité immédiate) */
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .hero__eyebrow,
  .hero__title,
  .hero__description,
  .hero__cta {
    animation: none !important;
    opacity: 1 !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   SCROLL TO TOP
   ═══════════════════════════════════════════════════════════════════════ */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--gold);
  color: #FFFDF3;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(46, 45, 44, 0.25);
}

.scroll-to-top svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.scroll-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background-color: #9a8768;
  box-shadow: 0 4px 14px rgba(46, 45, 44, 0.35);
}

.scroll-to-top:active {
  transform: translateY(2px);
}

.scroll-to-top:focus-visible {
  outline: 3px solid #FFFDF3;
  outline-offset: 3px;
}

@media (min-width: 1024px) {
  .scroll-to-top {
    bottom: 40px;
    right: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-to-top {
    transition: none;
  }
  .hero__cta::before,
  .header__cta-button::before,
  .inst-btn--gold-outline::before,
  .filtre__list-item::before,
  .hero__arrow::before,
  .main__button--explore-black::before,
  .main__button--evenement-black::before,
  .main__button--savoir-white::before,
  .main__button--infos-or::before,
  .main__button--visite-black::before,
  .footer__button::before,
  .event-featured__btn-secondary::before,
  .events-empty__button::before {
    transition: none;
    transform: none;
    display: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   PAGES INSTITUTIONNELLES — .inst-*
   Partenariats & Mécénat / Prêt d'œuvres / Espace professionnel
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Header modifier — espaces professionnels ── */
.header--espaces-pro {
  background-image: url("./assets/Img/misc-pret-oeuvre.webp");
  min-height: 75vh;
  min-height: 75dvh;
}

.header--espaces-pro .header__hero {
  min-height: 75vh;
  min-height: 75dvh;
  padding-top: 80px;
  padding-bottom: 2rem;
}

.header--espaces-pro .hero__left {
  padding-bottom: 1.5rem;
}

.header--espaces-pro .hero__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
}
.header--espaces-pro .hero__eyebrow .main__banniere-img {
  width: 1em;
  height: 1em;
  max-width: 1em;
}

.header--espaces-pro .hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.header--espaces-pro .hero__description {
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  max-width: 260px;
}

.header--espaces-pro .hero__stat-number {
  font-size: 1.4rem;
}

.header--espaces-pro .hero__stat-label {
  font-size: 0.55rem;
}

@media (min-width: 1024px) {
  .header--espaces-pro .header__hero {
    padding-top: 100px;
    padding-bottom: 2.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header--espaces-pro {
    background-attachment: scroll;
  }
}
/* ── Conteneur principal ── */
.inst-page {
  background-color: var(--black);
  color: #FFFDF3;
}

/* ── Bande de chiffres clés ── */
.inst-band {
  background-color: #111110;
  border-bottom: 1px solid rgba(174, 154, 121, 0.2);
  padding: 3.5rem 0;
}

.inst-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3.75rem;
}

@media (max-width: 1023px) {
  .inst-band__inner {
    padding: 0 1.5rem;
  }
}
.inst-band__label {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.inst-band__title {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #FFFDF3;
  margin-bottom: 2rem;
}

.inst-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid rgba(174, 154, 121, 0.2);
  padding-top: 2rem;
}

@media (max-width: 767px) {
  .inst-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
.inst-stat__val {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.inst-stat__label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(255, 253, 243, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── Layout deux colonnes avec TOC ── */
.inst-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 3.75rem;
}

.inst-layout--with-toc {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 5rem;
  align-items: start;
}

@media (max-width: 1199px) {
  .inst-layout {
    padding: 4rem 2rem;
  }
}
@media (max-width: 1023px) {
  .inst-layout--with-toc {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .inst-layout {
    padding: 3rem 1.5rem;
  }
}
/* ── Table des matières ── */
.inst-toc {
  position: sticky;
  top: 120px;
}

.inst-toc__label {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.inst-toc__list {
  list-style: none;
  padding: 0 0 0 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.inst-toc__link {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: rgba(255, 253, 243, 0.45);
  text-decoration: none;
  transition: color 0.25s ease;
  display: block;
}

.inst-toc__link:hover,
.inst-toc__link.is-active {
  color: var(--gold);
}

@media (max-width: 1023px) {
  .inst-toc {
    display: none;
  }
}
/* ── Sections numérotées ── */
.inst-section {
  position: relative;
  padding: 4.5rem 0;
  border-bottom: 1px solid rgba(174, 154, 121, 0.1);
}

.inst-section:last-child {
  border-bottom: none;
}

.inst-section__bg-num {
  position: absolute;
  top: 3rem;
  right: 0;
  font-family: var(--font-primary);
  font-size: clamp(7rem, 14vw, 12rem);
  font-weight: 700;
  color: rgba(174, 154, 121, 0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.inst-section__label {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.inst-section__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: #FFFDF3;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}

.inst-section__intro {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.85;
  color: rgba(255, 253, 243, 0.72);
  max-width: 680px;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.inst-section > p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.85;
  color: rgba(255, 253, 243, 0.72);
  margin-bottom: 1rem;
  max-width: 700px;
  position: relative;
  z-index: 1;
}

.inst-section > ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
  z-index: 1;
}

.inst-section > ul li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: rgba(255, 253, 243, 0.72);
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.6;
}

.inst-section > ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background-color: var(--gold);
}

/* ── Cards ── */
.inst-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
}

.inst-cards--3 {
  grid-template-columns: repeat(3, 1fr);
}

.inst-cards--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 767px) {
  .inst-cards,
  .inst-cards--3,
  .inst-cards--4 {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .inst-cards--3,
  .inst-cards--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.inst-card {
  background-color: rgba(255, 253, 243, 0.04);
  border: 1px solid rgba(174, 154, 121, 0.15);
  border-radius: 12px;
  padding: 2rem;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.inst-card:hover {
  border-color: rgba(174, 154, 121, 0.38);
  background-color: rgba(255, 253, 243, 0.06);
}

.inst-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 1.25rem;
}

.inst-card__icon svg {
  width: 40px;
  height: 40px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inst-card__title {
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: #FFFDF3;
  margin-bottom: 0.75rem;
}

.inst-card__text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: rgba(255, 253, 243, 0.62);
  margin: 0;
}

/* Card avec image */
.inst-card--image {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.inst-card__img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-shrink: 0;
}

.inst-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
  display: block;
}

.inst-card--image:hover .inst-card__img {
  transform: scale(1.04);
}

.inst-card__body {
  padding: 1.5rem 2rem;
  flex: 1;
}

.inst-card__eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

/* ── Formules de mécénat (pricing tiers) ── */
.inst-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .inst-tiers {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .inst-tiers {
    grid-template-columns: repeat(2, 1fr);
  }
}
.inst-tier {
  background-color: rgba(255, 253, 243, 0.04);
  border: 1px solid rgba(174, 154, 121, 0.2);
  border-radius: 14px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.3s ease;
}

.inst-tier:hover {
  border-color: rgba(174, 154, 121, 0.4);
}

.inst-tier--featured {
  border-color: var(--gold);
  background-color: rgba(174, 154, 121, 0.07);
  position: relative;
}

.inst-tier--featured::before {
  content: "Recommandé";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--gold);
  color: var(--black);
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 1rem;
  border-radius: 100px;
  white-space: nowrap;
}

.inst-tier__name {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
}

.inst-tier__price {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: #FFFDF3;
  line-height: 1;
  margin-top: 0.5rem;
}

.inst-tier__period {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(255, 253, 243, 0.4);
  margin-bottom: 1.5rem;
}

.inst-tier__features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
  border-top: 1px solid rgba(174, 154, 121, 0.15);
  padding-top: 1.25rem;
}

.inst-tier__features li {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: rgba(255, 253, 243, 0.72);
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.5;
}

.inst-tier__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 1px;
  background-color: var(--gold);
}

/* ── Étapes de procédure ── */
.inst-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
}

.inst-steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(174, 154, 121, 0.6), rgba(174, 154, 121, 0.08));
  pointer-events: none;
}

.inst-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1.75rem;
  padding-bottom: 2.75rem;
  position: relative;
}

.inst-step:last-child {
  padding-bottom: 0;
}

.inst-step__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--black);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.inst-step__title {
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: #FFFDF3;
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
}

.inst-step__text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.8;
  color: rgba(255, 253, 243, 0.62);
  margin: 0;
}

/* ── Highlight / Callout ── */
.inst-highlight {
  background-color: rgba(174, 154, 121, 0.08);
  border-radius: 0 10px 10px 0;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  position: relative;
  z-index: 1;
}

.inst-highlight__title {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
  display: block;
}

.inst-highlight p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.8;
  color: rgba(255, 253, 243, 0.78);
  margin: 0;
}

.inst-highlight a {
  color: var(--gold);
  text-decoration: none;
}

.inst-highlight a:hover {
  text-decoration: underline;
}

/* ── Formulaire institutionnel ── */
.inst-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

.inst-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 767px) {
  .inst-form__row {
    grid-template-columns: 1fr;
  }
}
.inst-form__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.inst-form__label {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.65);
}

.inst-form__input,
.inst-form__textarea,
.inst-form__select {
  background-color: rgba(255, 253, 243, 0.05);
  border: 1px solid rgba(174, 154, 121, 0.25);
  border-radius: 6px;
  padding: 0.9rem 1.125rem;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: #FFFDF3;
  transition: border-color 0.25s ease, background-color 0.25s ease;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.inst-form__input:focus,
.inst-form__textarea:focus,
.inst-form__select:focus {
  outline: none;
  border-color: var(--gold);
  background-color: rgba(255, 253, 243, 0.08);
}

.inst-form__input::placeholder,
.inst-form__textarea::placeholder {
  color: rgba(255, 253, 243, 0.28);
}

.inst-form__select option {
  background-color: #1c1b1a;
  color: #FFFDF3;
}

.inst-form__textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.7;
}

.inst-form__hint {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: rgba(255, 253, 243, 0.38);
}

/* ── Boutons institutionnels ── */
.inst-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.9rem 2rem;
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.inst-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inst-btn--gold {
  background-color: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}

.inst-btn--gold:hover {
  background-color: #c5b08f;
  border-color: #c5b08f;
}

.inst-btn--gold-outline {
  color: var(--gold);
  border-color: rgba(174, 154, 121, 0.4);
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease, border-color 0.4s ease;
  background: linear-gradient(var(--gold), var(--gold)) no-repeat bottom/100% 0%;
}

.inst-btn--gold-outline:hover {
  background-size: 100% 100%;
  border-color: var(--gold);
  color: var(--inst-hero-bg, #1a1917);
}

/* ── Bloc contact ── */
.inst-contact {
  background-color: rgba(255, 253, 243, 0.04);
  border: 1px solid rgba(174, 154, 121, 0.2);
  border-radius: 12px;
  padding: 2rem;
  margin-top: 1.5rem;
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}

.inst-contact p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: rgba(255, 253, 243, 0.75);
  margin: 0;
  line-height: 1.6;
}

.inst-contact a {
  color: var(--gold);
  text-decoration: none;
}

.inst-contact a:hover {
  text-decoration: underline;
}

/* ── FAQ Accordion ── */
.inst-faq {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

.inst-faq__item {
  border-bottom: 1px solid rgba(174, 154, 121, 0.12);
}

.inst-faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  font-weight: 600;
  color: #FFFDF3;
  text-align: left;
  transition: color 0.25s ease;
}

.inst-faq__btn:hover {
  color: var(--gold);
}

.inst-faq__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}

.inst-faq__item.is-open .inst-faq__icon {
  transform: rotate(45deg);
}

.inst-faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.inst-faq__item.is-open .inst-faq__answer {
  max-height: 600px;
}

.inst-faq__answer-inner {
  padding-bottom: 1.75rem;
}

.inst-faq__answer-inner p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.85;
  color: rgba(255, 253, 243, 0.65);
  margin: 0;
}

/* ── Documents téléchargeables ── */
.inst-docs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .inst-docs {
    grid-template-columns: 1fr;
  }
}
.inst-doc {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background-color: rgba(255, 253, 243, 0.04);
  border: 1px solid rgba(174, 154, 121, 0.15);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.inst-doc:hover {
  border-color: rgba(174, 154, 121, 0.42);
  background-color: rgba(255, 253, 243, 0.07);
}

.inst-doc__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.inst-doc__icon svg {
  width: 36px;
  height: 36px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inst-doc__name {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #FFFDF3;
  margin-bottom: 0.2rem;
}

.inst-doc__type {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: rgba(255, 253, 243, 0.38);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ── Bande CTA bas de page ── */
.inst-cta-band {
  background-color: #0e0d0c;
  border-top: 1px solid rgba(174, 154, 121, 0.12);
  padding: 5.5rem 0;
}

.inst-cta-band__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 3.75rem;
  text-align: center;
}

.inst-cta-band__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: #FFFDF3;
  margin-bottom: 1rem;
}

.inst-cta-band__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.85;
  color: rgba(255, 253, 243, 0.55);
  margin-bottom: 2.5rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.inst-cta-band__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .inst-cta-band__inner {
    padding: 0 1.5rem;
  }
  .inst-cta-band {
    padding: 4rem 0;
  }
}
/* ── Filtres groupés : dropdown positioning only ── */
.filtre--grouped {
  margin: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
}

.filtre--grouped .filtre__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

@media (min-width: 768px) {
  .filtre--grouped .filtre__bar {
    gap: 5px;
  }
}
@media (min-width: 1024px) {
  .filtre--grouped .filtre__bar {
    gap: 5px;
  }
}
.filtre__group {
  position: relative;
  z-index: 10;
}

/* Bouton groupe : hérite du style pill .filtre__list-item */
.filtre__group-btn {
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Le hover générique .filtre__list-item:hover met color:var(--black) ce qui
   donne du texte noir sur le fond noir du groupe ouvert. On force le blanc.
   .filtre__group-label a color:rgba(0,0,0,.6) en dur, il faut le cibler aussi. */
.filtre__group-btn:hover .filtre__list-img {
  filter: invert(1);
}

/* Label dans le bouton */
.filtre__group-label {
  white-space: nowrap;
}

/* Rotation flèche quand ouvert */
.filtre__group--open .filtre__group-arrow {
  transform: rotate(90deg);
  filter: invert(1);
}

.filtre__group--open .filtre__group-btn {
  background: #1a1a1a;
  color: #FFFDF3;
  border-color: #1a1a1a;
}

/* Dropdown panel — style glassmorphism identique à la navbar */
.filtre__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  max-height: min(70vh, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 253, 243, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  z-index: 200;
  /* Animation ouverture/fermeture comme la navbar */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.filtre__group--open .filtre__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .filtre__dropdown {
    min-width: 220px;
  }
}
/* Items du dropdown — même style que navbar */
.filtre__dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 6px;
  border-radius: 6px;
  padding: 0.75rem calc(1.2rem - 6px);
  font-family: var(--font-secondary, inherit);
  font-size: clamp(0.8rem, 1.6vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  filter: invert(100%) brightness(200%);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .filtre__dropdown-item {
    padding: 0.85rem calc(1.2rem - 6px);
    font-size: 0.88rem;
    letter-spacing: 0.1em;
  }
}
.filtre__dropdown-item + .filtre__dropdown-item {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.filtre__dropdown-item:hover {
  color: #FFFDF3;
  background: rgba(255, 255, 255, 0.07);
}

.filtre__dropdown-item:hover .filtre__list-img {
  filter: invert(1) brightness(2);
}

.filtre__dropdown-item--active {
  color: var(--gold, #c9a227);
  background: rgba(201, 168, 76, 0.1);
  font-weight: 600;
}

.filtre__dropdown-item--active .filtre__list-img {
  filter: invert(1) brightness(2);
}

/* Date input invisible, déclenché par le label */
.filtre__date-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Bouton date : même style pill que les autres */
.filtre__date-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* Icône calendrier */
.filtre__date-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

@media (min-width: 1024px) {
  .filtre__date-icon {
    width: 18px;
    height: 18px;
  }
}
/* Date label text */
.filtre__date-label-text {
  white-space: nowrap;
}

/*
 * page-musee.css — Page Les Musées (MBAA + MdT)
 */
:root {
  --mbaa-rose: #e03a80;
  --mdt-orange: #d46e36;
  --musee-dark: var(--dark);
  --musee-light: var(--light);
  --musee-cream: #ffff;
}

main {
  padding-top: 0 !important;
}

/* ── HEADER ── */
.header--musees {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--musee-dark);
  background-image: none;
  padding: 0;
  overflow: hidden;
}

/* Désactiver les pseudo-éléments du header générique
   (les panels ont leur propre overlay .musees__panel-overlay) */
.header--musees::before,
.header--musees::after {
  display: none;
}

/* ── HERO ── */
.musees__hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - 80px);
  background: var(--black, #1c1b1a);
}

@media (min-width: 768px) {
  .musees__hero {
    flex-direction: row;
    min-height: 100vh;
  }
}
.musees__panel {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: var(--musee-cream);
  min-height: 50vh;
  transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1), clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Neutraliser le a:hover { opacity: .8 } global — les panels gèrent leur propre overlay */
a.musees__panel:hover {
  opacity: 1;
}

@media (min-width: 768px) {
  .musees__panel {
    min-height: 100vh;
  }
  .musees__hero:has(.musees__panel--mbaa:hover) .musees__panel--mbaa {
    flex: 1.55;
    clip-path: polygon(0 0, 91% 0, 100% 100%, 0 100%);
  }
  .musees__hero:has(.musees__panel--mbaa:hover) .musees__panel--mdt {
    flex: 0.45;
    background-position: right top;
  }
  .musees__hero:has(.musees__panel--mdt:hover) .musees__panel--mdt {
    flex: 1.55;
  }
  .musees__hero:has(.musees__panel--mdt:hover) .musees__panel--mbaa {
    flex: 0.45;
  }
  .musees__panel--mbaa {
    clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%);
    margin-right: -8%;
    padding-right: 8%;
    z-index: 2;
  }
  .musees__panel--mdt {
    z-index: 1;
  }
}
.musees__panel--mbaa {
  background-color: var(--black);
  background-size: cover;
  background-position: center;
}

.musees__panel--mdt {
  background-color: var(--dark);
  background-size: cover;
  background-position: center top;
  transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-position 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.musees__panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.88) 0%, rgba(10, 9, 8, 0.3) 45%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.musees__panel--mdt .musees__panel-overlay {
  background: linear-gradient(to top, rgba(8, 18, 12, 0.9) 0%, rgba(8, 18, 12, 0.3) 45%, transparent 100%);
}

.musees__panel-inner {
  position: relative;
  z-index: 2;
  padding: 2.5rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 480px;
}

@media (min-width: 1024px) {
  .musees__panel-inner {
    padding: 3rem 7rem 4rem;
  }
  /* Éloigner le contenu MdT de la barre diagonale centrale */
  .musees__panel--mdt .musees__panel-inner {
    padding-left: 28%;
    transition: padding-left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .musees__panel--mdt:hover .musees__panel-inner {
    padding-left: 14%;
  }
}
.musees__panel-eyebrow {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.6);
  display: block;
}

.musees__panel-title {
  font-family: "Neutraface2Display-Titling", sans-serif;
  font-size: clamp(4.5rem, 10vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: transform 0.4s ease;
}

.musees__panel--mbaa .musees__panel-title {
  color: var(--mbaa-rose);
}

.musees__panel--mdt .musees__panel-title {
  color: var(--mdt-orange);
}

.musees__panel:hover .musees__panel-title {
  transform: translateY(-4px);
}

.musees__panel-sub {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-base);
  color: rgba(255, 253, 243, 0.55);
  margin: 0;
}

.musees__panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  margin-top: 0.5rem;
  width: fit-content;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease, transform 0.25s ease;
}

.musees__panel-cta--or {
  color: var(--musee-cream);
  border: 1.5px solid var(--mbaa-rose);
  background: linear-gradient(var(--mbaa-rose), var(--mbaa-rose)) no-repeat bottom/100% 0%;
}

.musees__panel-cta--or:hover {
  background-size: 100% 100%;
}

.musees__panel-cta--vert {
  color: var(--musee-cream);
  border: 1.5px solid var(--mdt-orange);
  background: linear-gradient(var(--mdt-orange), var(--mdt-orange)) no-repeat bottom/100% 0%;
}

.musees__panel-cta--vert:hover {
  background-size: 100% 100%;
}

.musees__panel-cta--or-outline {
  color: rgba(255, 253, 243, 0.6);
  border: 1.5px solid rgba(255, 253, 243, 0.2);
}

.musees__panel-cta--or-outline:hover {
  background: rgba(255, 253, 243, 0.1);
  color: var(--musee-cream);
  border-color: rgba(255, 253, 243, 0.4);
}

.musees__panel-cta--vert-outline {
  color: rgba(255, 253, 243, 0.6);
  border: 1.5px solid rgba(255, 253, 243, 0.2);
}

.musees__panel-cta--vert-outline:hover {
  background: rgba(255, 253, 243, 0.1);
  color: var(--musee-cream);
  border-color: rgba(255, 253, 243, 0.4);
}

.musees__panel-ctas {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.musees__panel-ctas .musees__panel-cta {
  margin-top: 0;
  text-decoration: none;
}

.musees__panel:hover .musees__panel-cta {
  transform: translateX(4px);
}

.musees__panel-cta__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.musees__panel-num {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: clamp(120px, 25vw, 280px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
  transition: opacity 0.4s ease;
}

.musees__panel:hover .musees__panel-num {
  opacity: 0.2;
}

.musees__panel-num img {
  width: 70%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.musees__divider {
  display: none;
}

/* ── BLOCS MUSÉE ── */
.musee-bloc {
  padding: 6rem 0;
  overflow: hidden;
}

.musee-bloc--dark {
  background: var(--light);
  color: var(--musee-cream);
}

.musee-bloc--light {
  background: var(--musee-light);
  color: var(--musee-dark);
}

.musee-bloc__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .musee-bloc__container {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 5rem;
  }
}
/* ── BANNIÈRE IDENTITÉ ── */
.musee-banniere {
  grid-column: 1/-1;
  max-width: 85%;
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  margin-left: calc((100vw - 1200px) / -2 - 2rem) !important;
  border-radius: 0 10px 10px 0 !important;
}

@media (max-width: 1200px) {
  .musee-banniere {
    max-width: 85% !important;
    margin-left: -2.5rem !important;
  }
}
@media (max-width: 767px) {
  .musee-banniere {
    margin-left: -1.25rem !important;
    max-width: calc(85% + 0.25rem) !important;
  }
}
.musee-banniere .musee-banniere__logo-img,
.musee-banniere .main__banniere-img {
  width: auto !important;
  max-width: none !important;
  height: 3rem;
  object-fit: contain;
  filter: brightness(0) invert(1) !important;
}

@media (max-width: 1200px) {
  .musee-banniere .musee-banniere__logo-img,
  .musee-banniere .main__banniere-img {
    height: 7rem !important;
  }
}
/* ── STATS ── */
.musee-bloc__stats {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(174, 154, 121, 0.2);
  border-bottom: 1px solid rgba(174, 154, 121, 0.2);
}

.musee-bloc--light .musee-bloc__stats {
  border-color: rgba(212, 110, 54, 0.2);
}

.musee-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.musee-stat__val {
  font-family: "Neutraface2Display-Titling", sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1;
}

.musee-stat__val--or {
  color: var(--gold);
}

.musee-stat__val--vert {
  color: var(--mdt-orange);
}

.musee-stat__label {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.musee-bloc--dark .musee-stat__label {
  color: var(--black);
}

.musee-bloc--light .musee-stat__label {
  color: rgba(46, 45, 44, 0.6);
}

/* ── BODY : description + horaires ── */
.musee-bloc__body {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .musee-bloc__body {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.musee-bloc__desc {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.musee-bloc__desc-label {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid;
  width: fit-content;
}

.musee-bloc--dark .musee-bloc__desc-label {
  color: var(--gold);
  border-color: rgba(174, 154, 121, 0.35);
}

.musee-bloc--light .musee-bloc__desc-label {
  color: var(--mdt-orange);
  border-color: rgba(212, 110, 54, 0.35);
}

.musee-bloc__desc-text {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.75;
  margin: 0;
}

.musee-bloc--dark .musee-bloc__desc-text {
  color: var(--black);
}

.musee-bloc--light .musee-bloc__desc-text {
  color: rgba(46, 45, 44, 0.85);
}

/* ── HORAIRES & TARIFS ── */
.musee-infos {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgba(174, 154, 121, 0.25);
  border-radius: 6px;
  overflow: hidden;
  align-self: start;
}

.musee-infos--light {
  border-color: rgba(212, 110, 54, 0.2);
}

.musee-infos__block {
  padding: 1.5rem;
  flex: 1;
  min-width: 100px;
}

@media (max-width: 480px) {
  .musee-infos {
    flex-direction: column;
  }
  .musee-infos__sep {
    width: 100%;
    height: 1px;
  }
  .musee-infos__block {
    min-width: auto;
    width: 100%;
  }
}
.musee-infos__sep {
  width: 1px;
  background: rgba(174, 154, 121, 0.15);
  flex-shrink: 0;
}

.musee-infos--light .musee-infos__sep {
  background: rgba(212, 110, 54, 0.15);
}

.musee-infos__label {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.musee-bloc--dark .musee-infos__label {
  color: var(--gold);
}

.musee-bloc--light .musee-infos__label {
  color: var(--mdt-orange);
}

.musee-infos__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.musee-infos__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-body);
}

.musee-bloc--dark .musee-infos__list li {
  color: var(--black);
}

.musee-bloc--light .musee-infos__list li {
  color: rgba(46, 45, 44, 0.75);
}

.musee-infos__closed span {
  opacity: 0.4;
}

.musee-infos__price {
  font-family: "Neutraface2Text-Demi", sans-serif;
}

.musee-bloc--dark .musee-infos__price {
  color: var(--gold);
}

.musee-bloc--light .musee-infos__price {
  color: var(--mdt-orange);
}

.musee-infos__addr {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  margin: 0;
}

.musee-bloc--dark .musee-infos__addr {
  color: var(--black);
}

.musee-bloc--light .musee-infos__addr {
  color: rgba(46, 45, 44, 0.7);
}

/* ── TIMELINE ── */
.musee-bloc__timeline-wrap {
  grid-column: 1/-1;
  width: 100%;
}

/* ── GALERIE ── */
.musee-galerie {
  grid-column: 1/-1;
  width: 100%;
}

.musee-galerie__label {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: 2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.musee-bloc--dark .musee-galerie__label {
  color: var(--gold);
}

.musee-bloc--light .musee-galerie__label {
  color: var(--mdt-orange);
}

.musee-galerie__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.musee-galerie__item {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 6px;
}

.musee-galerie__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.musee-galerie__item:hover img {
  transform: scale(1.06);
}

/* ── EXPO EN COURS ── */
.musee-expo {
  grid-column: 1/-1;
  width: 100%;
  border-top: 1px solid rgba(174, 154, 121, 0.2);
  padding-top: 2rem;
}

.musee-expo--light {
  border-color: rgba(212, 110, 54, 0.2);
}

.musee-expo__label {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.musee-bloc--dark .musee-expo__label {
  color: var(--gold);
}

.musee-bloc--light .musee-expo__label {
  color: var(--mdt-orange);
}

.musee-expo__inner {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.musee-expo__img {
  width: 160px;
  height: 200px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 6px;
}

.musee-expo__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.musee-expo__dates {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.musee-bloc--dark .musee-expo__dates {
  color: var(--gold);
}

.musee-bloc--light .musee-expo__dates {
  color: var(--mdt-orange);
}

.musee-expo__title {
  font-family: "Neutraface2Display-Bold", sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  line-height: 1.2;
  margin: 0;
}

.musee-bloc--dark .musee-expo__title {
  color: var(--musee-cream);
}

.musee-bloc--light .musee-expo__title {
  color: var(--musee-dark);
}

.musee-expo__sub {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0;
}

.musee-bloc--dark .musee-expo__sub {
  color: rgba(255, 253, 243, 0.55);
}

.musee-bloc--light .musee-expo__sub {
  color: rgba(46, 45, 44, 0.6);
}

/* ── BOUTONS ── */
.musee-bloc__ctas {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.musee-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.875rem 1.75rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
  white-space: nowrap;
}

.musee-btn:hover {
  transform: translateY(-2px);
}

.musee-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.musee-btn:hover svg {
  transform: translateX(3px);
}

.musee-btn--or {
  background: var(--gold);
  color: #FFFDF3;
  border-color: var(--gold);
}

.musee-btn--or:hover {
  background: var(--gold);
  border-color: var(--gold);
}

.musee-btn--or-outline {
  background: transparent;
  color: var(--gold);
  border-color: rgba(174, 154, 121, 0.5);
}

.musee-btn--or-outline:hover {
  background: rgba(174, 154, 121, 0.1);
  border-color: var(--gold);
}

.musee-btn--vert {
  background: var(--mdt-orange);
  color: var(--musee-cream);
  border-color: var(--mdt-orange);
}

.musee-btn--vert:hover {
  background: #c0622e;
  border-color: #c0622e;
}

.musee-btn--vert-outline {
  background: transparent;
  color: var(--mdt-orange);
  border-color: rgba(212, 110, 54, 0.45);
}

.musee-btn--vert-outline:hover {
  background: rgba(212, 110, 54, 0.08);
  border-color: var(--mdt-orange);
}

/* ── SÉPARATEUR ── */
.musees__section-sep {
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%);
  opacity: 0.3;
}

/* ── RESPONSIVE ── */
@media (max-width: 767px) {
  .musees__hero {
    flex-direction: column;
  }
  .musees__panel {
    min-height: 55vh;
    flex: none;
  }
  .musees__panel-title {
    font-size: clamp(3.5rem, 18vw, 6rem);
  }
  .musees__panel-inner {
    padding: 2rem 1.5rem 2.5rem;
  }
  .musee-bloc {
    padding: 4rem 0;
  }
  .musee-bloc__container {
    padding: 0 1.25rem;
    gap: 2rem;
  }
  .musee-bloc__stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .musee-galerie__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .musee-bloc__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .musee-btn {
    justify-content: center;
    width: 100%;
  }
  .musee-expo__inner {
    flex-direction: column;
  }
  .musee-expo__img {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .musee-bloc__container {
    padding: 0 2.5rem;
  }
  .musees__panel-title {
    font-size: clamp(4rem, 12vw, 7rem);
  }
}
/* ══════════════════════════════════════════════════════
   MÉTIERS DU MUSÉE
══════════════════════════════════════════════════════ */
.metiers-section {
  background: var(--musee-dark, #0a0908);
  padding: 7rem 0 8rem;
}

.metiers-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.metiers-section__eyebrow {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-xs, 0.7rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 1rem;
}

.metiers-section__title {
  font-family: "Neutraface2Display-Titling", sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--musee-cream, #FFFDF3);
  margin: 0 0 1.25rem;
}

.metiers-section__intro {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-body, 1rem);
  line-height: 1.75;
  color: rgba(255, 253, 243, 0.55);
  max-width: 600px;
  margin: 0 0 4rem;
}

/* ── Grille ── */
.metiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

/* ── Card ── */
.metier-card {
  background: #111010;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease;
}

.metier-card:hover {
  background: #1a1714;
}

/* ── Photo ── */
.metier-card__photo {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  flex-shrink: 0;
}

.metier-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  filter: saturate(0.85) brightness(0.95);
}

.metier-card:hover .metier-card__photo img {
  transform: scale(1.05);
  filter: saturate(1) brightness(1);
}

/* ── Corps ── */
.metier-card__body {
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  border-top: 2px solid var(--gold);
}

.metier-card__cat {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-xs, 0.7rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.metier-card__title {
  font-family: "Neutraface2Display-Bold", sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.25;
  color: var(--musee-cream, #FFFDF3);
  margin: 0;
}

.metier-card__desc {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.65;
  color: rgba(255, 253, 243, 0.5);
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
  .metiers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .metiers-section {
    padding: 4rem 0 5rem;
  }
  .metiers-section__inner {
    padding: 0 1.25rem;
  }
  .metiers-section__intro {
    margin-bottom: 2.5rem;
  }
  .metiers-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .metier-card__body {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}
/* ══════════════════════════════════════════════════════
   PARTENARIAT & MÉCÉNAT
══════════════════════════════════════════════════════ */
.partenariat-section {
  background: var(--musee-dark, #1c1b1a);
  padding: 7rem 0 8rem;
  border-top: 1px solid rgba(255, 253, 243, 0.08);
}

.partenariat-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.partenariat-section__eyebrow {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-xs, 0.7rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}

.partenariat-section__title {
  font-family: "Neutraface2Display-Bold", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--musee-cream, #FFFDF3);
  margin: 0 0 3.5rem;
}

.partenariat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.partenariat-card {
  background: rgba(255, 253, 243, 0.03);
  border: 1px solid rgba(255, 253, 243, 0.08);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: background 0.25s ease;
}

.partenariat-card:hover {
  background: rgba(255, 253, 243, 0.06);
}

.partenariat-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-top: 2px solid var(--gold);
  padding-top: 1.25rem;
}

.partenariat-card__cat {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-xs, 0.7rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.partenariat-card__title {
  font-family: "Neutraface2Display-Bold", sans-serif;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.25;
  color: var(--musee-cream, #FFFDF3);
  margin: 0;
}

.partenariat-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.partenariat-card__desc {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.7;
  color: rgba(255, 253, 243, 0.55);
  margin: 0;
}

.partenariat-card__infos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-sm, 0.875rem);
  color: rgba(255, 253, 243, 0.4);
}

.partenariat-card__infos a {
  color: var(--gold);
  text-decoration: none;
}

.partenariat-card__infos a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .partenariat-section {
    padding: 4rem 0 5rem;
  }
  .partenariat-section__inner {
    padding: 0 1.25rem;
  }
  .partenariat-grid {
    grid-template-columns: 1fr;
  }
  .partenariat-card {
    padding: 1.5rem 1.25rem;
  }
}
/* ══════════════════════════════════════════════════════
   PLAN DU MUSÉE
══════════════════════════════════════════════════════ */
.musee-plan-section {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.musee-plan-section__top {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.musee-plan-tabs {
  display: flex;
  gap: 4px;
  background: rgba(174, 154, 121, 0.08);
  border-radius: 6px;
  padding: 4px;
  width: fit-content;
}

.musee-plan-tab {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  border: none;
  background: transparent;
  color: rgba(46, 45, 44, 0.45);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.musee-plan-tab.is-active {
  background: var(--gold);
  color: #FFFDF3;
}

.musee-plan-tab:hover:not(.is-active) {
  color: var(--gold);
}

.musee-plan-floor {
  display: none;
}

.musee-plan-floor.is-active {
  display: block;
}

/* Building container */
.plan-building {
  border: 1px solid rgba(174, 154, 121, 0.22);
  border-radius: 6px;
  padding: 1.5rem;
  background: rgba(174, 154, 121, 0.03);
}

.plan-building__label {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(46, 45, 44, 0.38);
  margin-bottom: 1.25rem;
}

/* ── RdC ── */
.plan-rdc {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 6px;
  min-height: 200px;
}

/* ── 1er étage ── */
.plan-etage {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 6px;
  min-height: 260px;
}

.plan-etage__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Zones ── */
.plan-zone {
  border: 1px solid rgba(174, 154, 121, 0.2);
  border-radius: 6px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: rgba(174, 154, 121, 0.04);
  transition: background 0.2s, border-color 0.2s;
  flex: 1;
}

.plan-zone:hover {
  background: rgba(174, 154, 121, 0.1);
  border-color: rgba(174, 154, 121, 0.4);
}

.plan-zone--central {
  border-color: rgba(174, 154, 121, 0.32);
  background: rgba(174, 154, 121, 0.07);
  justify-content: space-between;
}

.plan-zone--tall {
  align-items: flex-start;
}

.plan-zone--accent {
  border-color: rgba(174, 154, 121, 0.35);
  background: rgba(174, 154, 121, 0.1);
}

.plan-zone__inner {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.plan-zone__central-label {
  font-family: "Neutraface2Display-Titling", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.plan-zone__num {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-sm);
  color: var(--gold);
}

.plan-zone__name {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-body);
  color: rgba(46, 45, 44, 0.85);
  line-height: 1.4;
}

.plan-zone__tag {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(174, 154, 121, 0.45);
  margin-top: auto;
}

.plan-zone__sub {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-xs);
  color: rgba(46, 45, 44, 0.45);
}

/* Services row */
.plan-services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(174, 154, 121, 0.15);
}

.plan-services span {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  background: rgba(174, 154, 121, 0.1);
  color: rgba(46, 45, 44, 0.55);
}

.plan-services__accent {
  background: rgba(174, 154, 121, 0.22) !important;
  color: var(--gold) !important;
}

/* ── Rampe Miquel ── */
.plan-rampe {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 2.25rem;
}

.plan-rampe::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold) 0%, rgba(174, 154, 121, 0.15) 100%);
}

.plan-rampe__item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  position: relative;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(174, 154, 121, 0.1);
}

.plan-rampe__item:last-child {
  border-bottom: none;
}

.plan-rampe__dot {
  position: absolute;
  left: -2.25rem;
  top: 1.5rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--light);
  flex-shrink: 0;
  margin-left: -3px;
}

.plan-rampe__dot--accent {
  background: var(--gold);
}

.plan-rampe__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.plan-rampe__level {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}

.plan-rampe__rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.plan-rampe__room {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-sm);
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  border: 1px solid rgba(174, 154, 121, 0.3);
  color: rgba(46, 45, 44, 0.75);
}

.plan-rampe__room--ghost {
  border-style: dashed;
  color: rgba(46, 45, 44, 0.35);
}

.plan-rampe__room--gold {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(174, 154, 121, 0.08);
}

.plan-rampe__room--wide {
  min-width: 120px;
  text-align: center;
}

.plan-rampe__theme {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-body);
  color: rgba(46, 45, 44, 0.55);
  line-height: 1.5;
}

.plan-rampe__theme em {
  font-style: italic;
}

/* ══════════════════════════════════════════════════════
   ACCORDÉON COLLECTIONS
══════════════════════════════════════════════════════ */
.musee-collections {
  grid-column: 1/-1;
  width: 100%;
}

.musee-accord {
  border-top: 1px solid rgba(174, 154, 121, 0.2);
}

.musee-accord__item {
  border-bottom: 1px solid rgba(174, 154, 121, 0.12);
}

.musee-accord__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.2s;
}

.musee-accord__trigger:hover {
  opacity: 0.75;
}

.musee-accord__header {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.musee-accord__loc {
  font-family: "Neutraface2Text-Demi", sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}

.musee-accord__title {
  font-family: "Neutraface2Display-Bold", sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.2;
  color: rgba(46, 45, 44, 0.9);
}

.musee-accord__icon {
  flex-shrink: 0;
  color: var(--gold);
  transition: transform 0.3s ease;
}

.musee-accord__trigger[aria-expanded=true] .musee-accord__icon {
  transform: rotate(180deg);
}

.musee-accord__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.38s ease;
}

.musee-accord__body.is-open {
  max-height: 600px;
}

.musee-accord__body p {
  font-family: "Neutraface2Text-Book", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: rgba(46, 45, 44, 0.75);
  margin: 0 0 1.5rem;
}

.musee-accord__body p em {
  font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .plan-rdc {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .plan-etage {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .plan-etage__col {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .plan-etage__col .plan-zone {
    flex: 1 1 140px;
  }
  .plan-zone--central {
    min-height: 120px;
  }
  .musee-plan-tabs {
    flex-wrap: wrap;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   TEMPLATE : Page Musée — Standard
   Bannière titre + zone de contenu libre Gutenberg
══════════════════════════════════════════════════════════════════════════ */
.page-musee__banner {
  position: relative;
  min-height: 340px;
  background: var(--black);
  display: flex;
  align-items: flex-end;
  padding: 80px 3rem 2.5rem;
}
.page-musee__banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.page-musee__banner-croix {
  width: 40px;
  height: auto;
  opacity: 0.6;
}
.page-musee__banner-titre {
  font-family: var(--font-h1-h2);
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--gold-decorative);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0;
}
.page-musee__banner-sous-titre {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(255, 253, 243, 0.7);
  margin: 0;
  max-width: 540px;
  line-height: 1.6;
}

.page-musee__content {
  padding: 3rem 0;
}

.page-musee__entry {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 767px) {
  .page-musee__banner {
    min-height: 220px;
    padding: 80px 1.25rem 1.75rem;
  }
}
/*
 * page-collections.css — Nouveaux composants page Collections
 * Hero split, Carrousel, Tabs musée, Accordéon pédagogique
 */
/* ── Boutons partagés ── */
.coll-btn {
  padding: 0.875rem 2rem;
  border-radius: 6px;
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  display: inline-block;
}

.coll-btn--primary {
  color: var(--gold);
  border: 1.5px solid var(--gold, #ae9a79);
  background: linear-gradient(var(--gold, #ae9a79), var(--gold, #ae9a79)) no-repeat bottom/100% 0%;
}

.coll-btn--primary:hover {
  background-size: 100% 100%;
  border-color: var(--gold);
  color: #FFFDF3;
}

.coll-btn--outline {
  color: rgba(255, 253, 243, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) no-repeat bottom/100% 0%;
}

.coll-btn--outline:hover {
  background-size: 100% 100%;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

/* ══════════════════════════════════════════════════════════
   2. CARROUSEL — Œuvres phares
   ══════════════════════════════════════════════════════════ */
.coll-highlights {
  padding: clamp(3rem, 5vw, 4rem) 0 clamp(3rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
}

.coll-highlights__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2rem;
}

.coll-highlights__eyebrow {
  font-family: var(--font-secondary);
  font-size: var(--fs-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
  margin-bottom: 0.4rem;
}

.coll-highlights__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(2rem, 5vw, 7rem);
  color: var(--black, #2e2d2c);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.coll-highlights__nav {
  display: flex;
  gap: 0.5rem;
}

.coll-highlights__nav-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid #191919;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, border-color 0.25s;
}

.coll-highlights__nav-btn img {
  filter: none !important;
  width: 14px !important;
}

.coll-highlights__nav-btn:hover {
  background: var(--black, #2e2d2c);
  border-color: var(--black, #2e2d2c);
}

.coll-highlights__nav-btn:hover img {
  filter: invert(1) !important;
  opacity: 1;
}

/* Carousel track */
.coll-carousel {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  padding-right: 3rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.coll-carousel::-webkit-scrollbar {
  height: 3px;
}

.coll-carousel::-webkit-scrollbar-track {
  background: rgba(46, 45, 44, 0.06);
}

.coll-carousel::-webkit-scrollbar-thumb {
  background: var(--gold, #ae9a79);
  border-radius: 6px;
}

.coll-carousel__card {
  flex: 0 0 260px;
  scroll-snap-align: start;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 3/4;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.coll-carousel__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  loading: lazy;
}

.coll-carousel__card:hover img {
  transform: scale(1.05);
}

.coll-carousel__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--font-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  text-transform: uppercase;
  z-index: 2;
}

.coll-carousel__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  z-index: 1;
}

.coll-carousel__title {
  font-family: var(--font-h3-h4-h5);
  font-size: var(--fs-body);
  color: #fff;
  margin-bottom: 0.2rem;
}

.coll-carousel__artist {
  font-family: var(--font-secondary);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════════════════════
   3. TABS MUSÉE (gros) + FILTRES PILLS
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   LAYOUT SIDEBAR + GRILLE
   ══════════════════════════════════════════════════════════ */
.gallery-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  align-items: stretch;
  padding-top: 2rem;
  background: #f8f8f8;
  border: 1px solid rgba(255, 253, 243, 0.08);
  border-radius: 10px;
  overflow: hidden;
}

.gallery-sidebar {
  position: sticky;
  top: 110px;
  align-self: start;
  padding: 1.5rem 1.5rem 0.5rem;
  background: #151515;
  border-radius: 0px 20px 20px 0px;
}

.gallery-container {
  padding: 1.5rem;
}

@media (max-width: 768px) {
  .gallery-layout {
    grid-template-columns: 1fr;
  }
  .gallery-sidebar {
    position: static;
    border-right: none;
    border-bottom: 1px solid rgba(255, 253, 243, 0.08);
  }
}
/* ══════════════════════════════════════════════════════════
   ACCORDION FILTRES (Proposition 5)
   ══════════════════════════════════════════════════════════ */
.coll-acc-filter {
  border-top: 1px solid rgba(255, 253, 243, 0.1);
}

.coll-acc-filter__section {
  border-bottom: 1px solid rgba(255, 253, 243, 0.1);
}

.coll-acc-filter__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.coll-acc-filter__summary::-webkit-details-marker {
  display: none;
}
.coll-acc-filter__summary:hover .coll-acc-filter__label {
  opacity: 0.5;
}

.coll-acc-filter__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.75);
  transition: opacity 0.2s;
}

.coll-acc-filter__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  filter: invert(1) brightness(0.8);
}

details[open] .coll-acc-filter__chevron {
  transform: scaleY(-1);
}

.coll-acc-filter__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
}

/* pills dans l'accordion */
.coll-acc-filter__body .coll-filters__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* tabs musée + pills dans la sidebar : pleine largeur, texte qui ne déborde pas */
.coll-acc-filter__body .coll-tab {
  width: 100%;
  white-space: normal;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.55rem 0.75rem;
  justify-content: center;
}

.coll-acc-filter__body .coll-pill {
  font-size: 0.75rem;
}

/* search toujours visible dans la section Recherche */
.coll-acc-filter__body .coll-search-expand {
  max-width: 100%;
  border-radius: 999px;
  border: 0.5px solid rgba(255, 253, 243, 0.2);
  background: rgba(255, 253, 243, 0.04);
}

.coll-acc-filter__body .coll-search-expand--open {
  max-width: 100%;
  border-color: rgba(255, 253, 243, 0.35);
}

.coll-acc-filter__body .coll-search-expand__input {
  opacity: 1;
  padding-right: 0.5rem;
}

/* subfilters-drawer dans l'accordion : pas de margin-bottom externe */
.coll-acc-filter__body .subfilters-drawer {
  margin-bottom: 0;
}

/* ── Tabs musée — gros boutons ── */
.coll-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.coll-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border: 0.5px solid rgba(255, 253, 243, 0.25);
  border-radius: 999px;
  background: linear-gradient(rgba(255, 253, 243, 0.15), rgba(255, 253, 243, 0.15)) no-repeat bottom/100% 0%;
  font-family: var(--font-h1-h2);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.7);
  cursor: pointer;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease, border-color 0.4s ease;
  user-select: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.coll-tab:hover {
  background-size: 100% 100%;
  color: #1a1a18;
  border-color: rgba(255, 253, 243, 0.5);
}

@media (min-width: 1024px) {
  .coll-tab {
    padding: 0.7rem 1.8rem;
    border-width: 1px;
    gap: 0.55rem;
  }
}
.coll-tab--active {
  background: var(--gold, #ae9a79);
  background-size: 100% 100%;
  color: #FFFDF3;
  border-color: var(--gold, #ae9a79);
  font-weight: 600;
}

.coll-tab--mbaa {
  border-color: #e03a80;
  color: white;
  background-image: linear-gradient(#e03a80, #e03a80);
}

.coll-tab--mbaa:hover,
.coll-tab--mbaa.coll-tab--active {
  background-size: 100% 100%;
  color: #fff;
  border-color: #e03a80;
}

.coll-tab--mdt {
  border-color: #d46e36;
  color: white;
  background-image: linear-gradient(#d46e36, #d46e36);
}

.coll-tab--mdt:hover,
.coll-tab--mdt.coll-tab--active {
  background-size: 100% 100%;
  color: #fff;
  border-color: #d46e36;
}

/* ── Filtres pills ── */
.coll-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}

.coll-filters__pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.coll-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border: 0.5px solid rgba(255, 253, 243, 0.25);
  border-radius: 999px;
  color: rgba(255, 253, 243, 0.7);
  background: linear-gradient(rgba(255, 253, 243, 0.15), rgba(255, 253, 243, 0.15)) no-repeat bottom/100% 0%;
  font-family: var(--font-h1-h2);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease, border-color 0.4s ease;
  user-select: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.coll-pill:hover {
  background-size: 100% 100%;
  color: #1a1a18;
  border-color: rgba(255, 253, 243, 0.5);
}

@media (min-width: 1024px) {
  .coll-pill {
    padding: 0.7rem 1.8rem;
    border-width: 1px;
    gap: 0.55rem;
  }
}
.coll-pill--active {
  background: var(--gold, #ae9a79);
  background-size: 100% 100%;
  color: #FFFDF3;
  border-color: var(--gold, #ae9a79);
  font-weight: 600;
}

.coll-pill__arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  object-fit: contain;
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: invert(1) brightness(0.8);
}

.coll-pill:hover .coll-pill__arrow {
  filter: invert(0) brightness(1);
}

.coll-pill--active .coll-pill__arrow {
  transform: scaleY(-1);
  filter: invert(1);
}

/* ── Actions (loupe + filtrer) ── */
.coll-filters__actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.coll-filters__search-btn,
.coll-filters__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border: 0.5px solid rgba(28, 27, 26, 0.4);
  border-radius: 999px;
  background: linear-gradient(#1a1a1a, #1a1a1a) no-repeat bottom/100% 0%;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1a1a;
  cursor: pointer;
  transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease, border-color 0.4s ease;
  user-select: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.coll-filters__search-btn:hover,
.coll-filters__toggle:hover {
  background-size: 100% 100%;
  color: #FFFDF3;
  border-color: #1a1a1a;
}

.coll-filters__search-btn:hover svg,
.coll-filters__toggle:hover svg {
  stroke: #FFFDF3;
}

.coll-filters__toggle--active {
  background: var(--gold, #ae9a79);
  background-size: 100% 100%;
  color: #FFFDF3;
  border-color: var(--gold, #ae9a79);
}

@media (min-width: 1024px) {
  .coll-filters__search-btn,
  .coll-filters__toggle {
    padding: 0.7rem 1.8rem;
    border-width: 1px;
  }
}
/* ── Search pill expansible ── */
.coll-search-expand {
  display: inline-flex;
  align-items: center;
  border: 0.5px solid rgba(255, 253, 243, 0.2);
  border-radius: 999px;
  overflow: hidden;
  max-width: 38px;
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
}

@media (min-width: 1024px) {
  .coll-search-expand {
    max-width: 46px;
  }
}
.coll-search-expand--open {
  max-width: 280px;
  border-color: rgba(255, 253, 243, 0.4);
}

.coll-search-expand__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 253, 243, 0.6);
  transition: color 0.25s;
}

@media (min-width: 1024px) {
  .coll-search-expand__btn {
    padding: 0.7rem 0.85rem;
  }
}
.coll-search-expand__btn:hover {
  color: var(--gold, #ae9a79);
}

.coll-search-expand__input {
  flex: 1;
  min-width: 0;
  width: 180px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255, 253, 243, 0.9);
  opacity: 0;
  transition: opacity 0.25s ease 0.1s;
  padding: 0;
}

.coll-search-expand--open .coll-search-expand__input {
  opacity: 1;
  padding-right: 0.25rem;
}

.coll-search-expand__input::placeholder {
  color: rgba(255, 253, 243, 0.3);
}

.coll-search-expand__clear {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem 0 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 253, 243, 0.5);
  transition: color 0.2s;
}

.coll-search-expand__clear:hover {
  color: var(--gold, #ae9a79);
}

/* ── Recherche (legacy — plus utilisée) ── */
.coll-filters__search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border: 1.5px solid var(--black, #2e2d2c);
  border-radius: 999px;
  min-width: 220px;
  background: transparent;
  transition: background 0.25s, border-color 0.25s;
}

.coll-filters__search:focus-within {
  background: var(--black, #2e2d2c);
  border-color: var(--black, #2e2d2c);
}

.coll-filters__search:focus-within .coll-filters__search-icon {
  color: var(--cream, #FFFDF3);
}

.coll-filters__search:focus-within .coll-filters__search-input {
  color: var(--cream, #FFFDF3);
}

.coll-filters__search:focus-within .coll-filters__search-input::placeholder {
  color: rgba(255, 253, 243, 0.45);
}

.coll-filters__search-icon {
  width: 14px;
  height: 14px;
  color: var(--black, #2e2d2c);
  flex-shrink: 0;
  transition: color 0.25s;
}

.coll-filters__search-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--black, #2e2d2c);
  flex: 1;
  min-width: 0;
}

.coll-filters__search-input::placeholder {
  color: rgba(46, 45, 44, 0.35);
}

.coll-filters__search-clear {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  color: inherit;
  transition: color 0.2s;
}

.coll-filters__search-clear svg {
  width: 14px;
  height: 14px;
}

/* ══════════════════════════════════════════════════════════
   4. ACCORDÉON — Approfondir · Brutalist Index
   ══════════════════════════════════════════════════════════ */
.coll-accordion {
  --acc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 4vw, 3rem);
  background: var(--cream, #FFFDF3);
}

/* ── Header — titre massif ── */
.coll-accordion__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: none;
}

.coll-accordion__icon {
  display: none;
}

.coll-accordion__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(3rem, 6vw, 7rem);
  color: var(--black, #2e2d2c);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* ── Item ── */
.coll-acc-item {
  border: none;
  position: relative;
  padding: 0.5rem 0;
}

.coll-acc-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--black, #2e2d2c);
  opacity: 0.08;
}

.coll-acc-item:last-child::after {
  opacity: 0.08;
}

/* Reveal stagger */
.coll-acc-item[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--acc-ease), transform 0.6s var(--acc-ease);
}

.coll-acc-item[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Header bouton ── */
.coll-acc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--black, #2e2d2c);
  transition: opacity 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.coll-acc-header:hover {
  opacity: 0.55;
}

.coll-acc-item.open .coll-acc-header {
  opacity: 1;
}

.coll-acc-header:focus-visible {
  outline: 2px solid var(--gold, #ae9a79);
  outline-offset: 4px;
  border-radius: 6px;
}

.coll-acc-header__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Flèche masquée dans ce style */
.coll-acc-arrow {
  display: none;
}

.coll-acc-header__left span {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ── Croix cerclée ── */
.coll-acc-plus {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1.5px solid var(--black, #2e2d2c);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--acc-ease), color 0.3s var(--acc-ease);
  color: var(--black, #2e2d2c);
}

.coll-acc-item.open .coll-acc-plus {
  background: var(--black, #2e2d2c);
  color: var(--cream, #FFFDF3);
}

.coll-acc-plus::before,
.coll-acc-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 6px;
  transition: transform 0.4s var(--acc-ease);
}

.coll-acc-plus::before {
  width: 12px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.coll-acc-plus::after {
  width: 1.5px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.coll-acc-item.open .coll-acc-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ── Body — expansion grid ── */
.coll-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--acc-ease);
  overflow: hidden;
}

.coll-acc-item.open .coll-acc-body {
  grid-template-rows: 1fr;
}

.coll-acc-body > * {
  overflow: hidden;
}

/* ── Panel ── */
.coll-acc-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 0.25rem 0 2rem;
  align-items: start;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--acc-ease) 0.1s, transform 0.4s var(--acc-ease) 0.1s;
}

.coll-acc-item.open .coll-acc-panel {
  opacity: 1;
  transform: translateY(0);
}

/* ── Image — pas de border-radius, brut ── */
.coll-acc-panel__img {
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 16/9;
  max-height: 240px;
}

.coll-acc-panel__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Variante download */
.coll-acc-panel__img--download {
  background: rgba(46, 45, 44, 0.04);
  border: 1.5px dashed rgba(46, 45, 44, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--black, #2e2d2c);
}

.coll-acc-panel__img--download svg {
  opacity: 0.3;
}

.coll-acc-panel__img--download span {
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.4;
}

/* ── Texte ── */
.coll-acc-panel__text {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: rgba(46, 45, 44, 0.55);
  line-height: 1.75;
}

.coll-acc-panel__text p {
  margin-bottom: 0.75rem;
}

.coll-acc-panel__text p:last-child {
  margin-bottom: 0;
}

/* ── Numéros (masqués, remplacés par flèches) ── */
.coll-acc-panel__num {
  display: none;
}

.coll-acc-panel__step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.coll-acc-panel__step .coll-acc-panel__heading {
  margin-bottom: 0;
}

.coll-acc-panel__arrow {
  width: 14px;
  height: 14px;
  opacity: 0.35;
  flex-shrink: 0;
}

/* ── Heading ── */
.coll-acc-panel__heading {
  font-family: var(--font-h3-h4-h5);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--black, #2e2d2c);
  font-weight: 400;
  margin-bottom: 0.5rem;
  letter-spacing: -0.04em;
  line-height: 1.3;
}

/* ── Tags — brutalist style ── */
.coll-acc-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.coll-acc-tag {
  padding: 0.35rem 0.9rem;
  border: 1.5px solid var(--black, #2e2d2c);
  border-radius: 999px;
  font-family: var(--font-secondary);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black, #2e2d2c);
  background: transparent;
  cursor: default;
  transition: background 0.2s, color 0.2s;
}

.coll-acc-tag:hover {
  background: var(--black, #2e2d2c);
  color: var(--cream, #FFFDF3);
}

/* ── Bouton download ── */
.coll-acc-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--black, #2e2d2c);
  color: var(--cream, #FFFDF3);
  border: 1.5px solid var(--black, #2e2d2c);
  border-radius: 0;
  text-decoration: none;
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}

.coll-acc-download:hover {
  background: transparent;
  color: var(--black, #2e2d2c);
}

.coll-acc-download svg {
  flex-shrink: 0;
}

.coll-acc-download:focus-visible {
  outline: 2px solid var(--gold, #ae9a79);
  outline-offset: 3px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .coll-acc-header,
  .coll-acc-plus,
  .coll-acc-plus::before,
  .coll-acc-plus::after,
  .coll-acc-panel,
  .coll-acc-tag,
  .coll-acc-download,
  .coll-acc-item.is-revealed {
    transition-duration: 0.01ms !important;
  }
  .coll-acc-body {
    transition-duration: 0.15s !important;
  }
  .coll-acc-item[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ══════════════════════════════════════════════════════════
   5. RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .coll-acc-panel {
    grid-template-columns: 220px 1fr;
    gap: 2rem;
  }
  .coll-acc-panel__img {
    aspect-ratio: 3/4;
    max-height: none;
  }
}
@media (min-width: 1024px) {
  .coll-acc-panel {
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
  }
  .coll-acc-header__left span {
    font-size: clamp(1.3rem, 2.5vw, 2rem);
  }
}
@media (min-width: 1280px) {
  .coll-accordion {
    padding: clamp(5rem, 8vw, 8rem) clamp(3rem, 6vw, 6rem);
  }
  .coll-acc-panel {
    grid-template-columns: 320px 1fr;
    gap: 3rem;
  }
}
@media (min-width: 1440px) {
  .coll-accordion {
    padding-left: clamp(4rem, 8vw, 8rem);
    padding-right: clamp(4rem, 8vw, 8rem);
  }
  .coll-acc-panel {
    grid-template-columns: 360px 1fr;
  }
  .coll-accordion__title {
    font-size: clamp(5rem, 8vw, 8rem);
  }
}
/* ── Anciennes media queries (max-width) pour compatibilité ── */
@media (max-width: 768px) {
  .coll-carousel__card {
    flex: 0 0 200px;
  }
  .coll-highlights__nav {
    display: none;
  }
  .coll-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 0.4rem;
    padding: 1rem 1.5rem;
  }
  .coll-tab {
    padding: 0.7rem 1.25rem;
    font-size: var(--fs-sm);
  }
  .coll-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .coll-filters__pills {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
  }
  .coll-filters__search {
    margin-left: 0;
    min-width: unset;
  }
}
@media (max-width: 480px) {
  .coll-intro__btns {
    flex-direction: column;
    align-items: center;
  }
  .coll-btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
  .coll-carousel__card {
    flex: 0 0 180px;
  }
}
/* ══════════════════════════════════════════════════════════
   6. INFOS PRATIQUES — Résumé compact
   ══════════════════════════════════════════════════════════ */
.coll-infos {
  padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--black, #2e2d2c);
}

.coll-infos__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.coll-infos__icon {
  width: 32px;
  height: 32px;
  opacity: 0.4;
}

.coll-infos__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--cream, #FFFDF3);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.coll-infos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.coll-infos__card {
  padding: 2rem;
  background: rgba(255, 253, 243, 0.04);
  border: 1px solid rgba(255, 253, 243, 0.08);
  border-radius: 10px;
  transition: border-color 0.3s, background 0.3s;
}

.coll-infos__card:hover {
  border-color: rgba(174, 154, 121, 0.3);
  background: rgba(255, 253, 243, 0.06);
}

.coll-infos__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(174, 154, 121, 0.12);
  color: var(--gold, #ae9a79);
  margin-bottom: 1.25rem;
}

.coll-infos__card-title {
  font-family: var(--font-h3-h4-h5);
  font-size: var(--fs-lg);
  color: var(--cream, #FFFDF3);
  margin-bottom: 0.75rem;
  font-weight: 400;
}

.coll-infos__card-text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: rgba(255, 253, 243, 0.55);
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.coll-infos__card-note {
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  color: var(--gold, #ae9a79);
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
}

.coll-infos__footer {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.coll-infos__footer .coll-btn--outline {
  color: var(--cream, #FFFDF3);
  border-color: rgba(255, 253, 243, 0.2);
  background: linear-gradient(var(--cream, #FFFDF3), var(--cream, #FFFDF3)) no-repeat bottom/100% 0%;
}

.coll-infos__footer .coll-btn--outline:hover {
  background-size: 100% 100%;
  color: var(--black, #2e2d2c);
  border-color: var(--cream, #FFFDF3);
}

.coll-infos__footer .coll-btn--primary {
  color: #FFFDF3;
  background: linear-gradient(#8a7a5e, #8a7a5e) no-repeat bottom/100% 0%, linear-gradient(var(--gold, #ae9a79), var(--gold, #ae9a79)) no-repeat/100% 100%;
  border-color: var(--gold, #ae9a79);
}

.coll-infos__footer .coll-btn--primary:hover {
  color: #FFFDF3;
  background-size: 100% 100%, 100% 100%;
  border-color: #8a7a5e;
}

/* ══════════════════════════════════════════════════════════
   7. VISITES GUIDÉES & AUDIOGUIDE
   ══════════════════════════════════════════════════════════ */
.coll-visites {
  padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--cream, #FFFDF3);
}

.coll-visites__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.coll-visites__eyebrow {
  font-family: var(--font-secondary);
  font-size: var(--fs-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
  margin-bottom: 0.5rem;
}

.coll-visites__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--black, #2e2d2c);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.coll-visites__desc {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: rgba(46, 45, 44, 0.6);
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

.coll-visites__options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.coll-visites__option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--light, #f5f2ec);
  border-radius: 6px;
}

.coll-visites__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(174, 154, 121, 0.15);
  color: var(--gold, #ae9a79);
  flex-shrink: 0;
}

.coll-visites__option-title {
  font-family: var(--font-h3-h4-h5);
  font-size: var(--fs-md);
  color: var(--black, #2e2d2c);
  margin-bottom: 0.2rem;
  font-weight: 500;
}

.coll-visites__option-text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(46, 45, 44, 0.5);
  line-height: 1.5;
}

.coll-visites__img {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.coll-visites__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ══════════════════════════════════════════════════════════
   8. COLLECTIONS EN CHIFFRES — Layout split
   ══════════════════════════════════════════════════════════ */
.coll-chiffres {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  min-height: 420px;
  background: var(--black, #2e2d2c);
}

.coll-chiffres__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  border-right: 1px solid rgba(255, 253, 243, 0.06);
}

.coll-chiffres__eyebrow {
  font-family: var(--font-h1-h2);
  font-size: 3rem;
  text-transform: uppercase;
  color: var(--gold, #ae9a79);
  margin-bottom: 1rem;
}

.coll-chiffres__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(1rem, 6vw, 5rem);
  color: var(--cream, #FFFDF3);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.coll-chiffres__title span {
  font-style: italic;
  color: var(--gold, #ae9a79);
  font-size: 0.55em;
}

.coll-chiffres__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: rgba(255, 253, 243, 0.4);
  line-height: 1.7;
  max-width: 320px;
}

.coll-chiffres__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
}

.coll-chiffres__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  border-bottom: 1px solid rgba(255, 253, 243, 0.04);
  text-align: center;
  transition: background 0.3s;
}

.coll-chiffres__card:hover {
  background: rgba(255, 253, 243, 0.03);
}

/* Last row: 2 cards spanning 3 cols */
.coll-chiffres__card:nth-child(4) {
  grid-column: 1/2;
}

.coll-chiffres__card:nth-child(5) {
  grid-column: 2/4;
}

.coll-chiffres__icon {
  color: var(--gold, #ae9a79);
  opacity: 0.4;
  margin-bottom: 0.75rem;
}

.coll-chiffres__number {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: var(--cream, #FFFDF3);
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.coll-chiffres__label {
  font-family: var(--font-secondary);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 253, 243, 0.35);
}

/* ══════════════════════════════════════════════════════════
   9. RESSOURCES & ACTION ÉDUCATIVE
   ══════════════════════════════════════════════════════════ */
.coll-ressources {
  padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}

.coll-ressources__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.coll-ressources__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.coll-ressources__card {
  padding: 2rem;
  background: rgba(46, 45, 44, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 10px;
  border: 1px solid rgba(255, 253, 243, 0.1);
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}

.coll-ressources__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  background: rgba(46, 45, 44, 0.55);
}

.coll-ressources__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: rgba(174, 154, 121, 0.2);
  color: var(--gold, #ae9a79);
  margin-bottom: 1.25rem;
}

.coll-ressources__title {
  font-family: var(--font-h3-h4-h5);
  font-size: var(--fs-lg);
  color: var(--cream, #FFFDF3);
  margin-bottom: 0.6rem;
  font-weight: 400;
}

.coll-ressources__desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: rgba(255, 253, 243, 0.55);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.coll-ressources__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s, gap 0.3s;
}

.coll-ressources__link:hover {
  color: #FFFDF3;
  gap: 0.7rem;
}

/* ══════════════════════════════════════════════════════════
   10. NEWSLETTER CTA
   ══════════════════════════════════════════════════════════ */
.coll-newsletter {
  padding: clamp(3rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--gold, #ae9a79);
}

.coll-newsletter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.coll-newsletter__title {
  font-family: var(--font-h1-h2);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  color: var(--cream, #FFFDF3);
  font-weight: 400;
  margin-bottom: 0.4rem;
}

.coll-newsletter__desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: rgba(255, 253, 243, 0.7);
  line-height: 1.6;
  max-width: 420px;
}

.coll-newsletter__form {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}

.coll-newsletter__input {
  padding: 0.85rem 1.25rem;
  border: 1.5px solid rgba(255, 253, 243, 0.3);
  border-right: none;
  border-radius: 7px 0 0 7px;
  background: rgba(255, 253, 243, 0.1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--cream, #FFFDF3);
  min-width: 240px;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}

.coll-newsletter__input::placeholder {
  color: rgba(255, 253, 243, 0.45);
}

.coll-newsletter__input:focus {
  border-color: var(--cream, #FFFDF3);
  background: rgba(255, 253, 243, 0.15);
}

.coll-newsletter__btn {
  padding: 0.85rem 1.75rem;
  background: var(--black, #2e2d2c);
  color: var(--cream, #FFFDF3);
  border: 1.5px solid var(--black, #2e2d2c);
  border-radius: 0 7px 7px 0;
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.coll-newsletter__btn:hover {
  background: #1a1918;
}

/* ══════════════════════════════════════════════════════════
   11. RESPONSIVE — Nouvelles sections
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .coll-infos__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .coll-ressources__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .coll-chiffres {
    grid-template-columns: 1fr;
  }
  .coll-chiffres__left {
    border-right: none;
    border-bottom: 1px solid rgba(255, 253, 243, 0.06);
    text-align: center;
    align-items: center;
  }
  .coll-chiffres__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .coll-chiffres__card:nth-child(4) {
    grid-column: auto;
  }
  .coll-chiffres__card:nth-child(5) {
    grid-column: auto;
  }
}
@media (max-width: 768px) {
  .coll-infos__grid {
    grid-template-columns: 1fr;
  }
  .coll-visites__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .coll-visites__img {
    order: -1;
    aspect-ratio: 16/9;
    max-height: 280px;
  }
  .coll-ressources__inner {
    grid-template-columns: 1fr;
  }
  .coll-newsletter__inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .coll-newsletter__desc {
    max-width: 100%;
  }
  .coll-newsletter__form {
    width: 100%;
    max-width: 400px;
  }
  .coll-newsletter__input {
    min-width: 0;
    flex: 1;
  }
}
@media (max-width: 480px) {
  .coll-infos__footer {
    flex-direction: column;
    align-items: center;
  }
  .coll-infos__footer .coll-btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
  .coll-newsletter__form {
    flex-direction: column;
  }
  .coll-newsletter__input {
    border-right: 2px solid rgba(255, 253, 243, 0.3);
    border-radius: 6px;
  }
  .coll-newsletter__btn {
    border-radius: 6px;
  }
  .coll-chiffres__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PAGE-INSTITUTIONAL.CSS — Styles partagés pour les pages institutionnelles
   Pages : Espace Presse, Action Éducative, Accessibilité (refonte),
           Partenariats & Mécénat, Prêt d'œuvres
   Architecture : BEM, Mobile-first, Custom Properties du design system
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Variables locales ─────────────────────────────────────────────────── */
:root {
  --inst-hero-bg: #1a1917;
  --inst-hero-overlay: rgba(26, 25, 23, 0.72);
  --inst-section-light: var(--musee-cream, #ffffff);
  --inst-section-dark: var(--black, #2e2d2c);
  --inst-accent: var(--gold, #ae9a79);
  --inst-text: #5a5754;
  --inst-text-light: rgba(255, 255, 255, 0.75);
  --inst-border: rgba(174, 154, 121, 0.15);
  --inst-radius: 2px;
  --inst-max-width: 1200px;
}

/* ── Reset scope ───────────────────────────────────────────────────────── */
.inst-page *,
.inst-page *::before,
.inst-page *::after {
  box-sizing: border-box;
}

.inst-page {
  background: var(--inst-section-light);
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — Full-width avec image de fond, overlay, eyebrow + titre
   Inspiré : Frans Hals Museum (hero plein écran + overlay sombre)
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-hero {
  position: relative;
  background: var(--inst-hero-bg);
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6rem 1.5rem 3rem;
  overflow: hidden;
}

.inst-hero--with-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.inst-hero--with-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26, 25, 23, 0.3) 0%, rgba(26, 25, 23, 0.45) 40%, rgba(26, 25, 23, 0.8) 100%);
  z-index: 0;
}

/* Texte décoratif en arrière-plan (comme legal-hero) */
.inst-hero::after {
  content: attr(data-bg-text);
  position: absolute;
  right: -0.05em;
  bottom: -0.15em;
  font-family: var(--font-primary);
  font-size: clamp(8rem, 20vw, 18rem);
  font-weight: 700;
  color: rgba(174, 154, 121, 0.06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  z-index: 0;
}

/* Ligne décorative gold à gauche */
.inst-hero__line {
  position: absolute;
  left: 1.5rem;
  top: 5rem;
  bottom: 3rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--inst-accent), transparent);
  z-index: 1;
}

.inst-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--inst-max-width);
  margin: 0 auto;
  width: 100%;
  padding-left: 0;
}

.inst-hero__eyebrow {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--inst-accent);
  margin: 0 0 1rem;
  display: block;
}

.inst-hero__title {
  font-family: var(--font-primary);
  font-size: clamp(2.25rem, 7vw, 5.5rem);
  font-weight: 700;
  color: #FFFDF3;
  margin: 0 0 1.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.inst-hero__subtitle {
  font-family: "Neutraface2Display-Light", var(--font-body);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--inst-text-light);
  max-width: 560px;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.inst-hero__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.inst-hero__tag {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--inst-hero-bg);
  background: var(--inst-accent);
  padding: 0.3rem 0.8rem;
  font-weight: 700;
}

.inst-hero__date {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: rgba(255, 253, 243, 0.35);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Hero CTA */
.inst-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inst-hero-bg);
  background: var(--inst-accent);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.15s ease;
  min-height: 44px;
  margin-top: 0.5rem;
}

.inst-hero__cta:hover {
  background: var(--gold);
  opacity: 1;
}

.inst-hero__cta:focus-visible {
  outline: 2px solid var(--inst-accent);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .inst-hero {
    padding: 8rem 4rem 4rem;
    min-height: 45vh;
  }
  .inst-hero__line {
    left: 4rem;
    top: 7rem;
    bottom: 4rem;
  }
  .inst-hero__inner {
    padding-left: 4rem;
  }
}
@media (min-width: 1024px) {
  .inst-hero {
    min-height: 55vh;
    padding: 10rem 4rem 6rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT — Grille principale avec sommaire sticky optionnel
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-layout {
  max-width: var(--inst-max-width);
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.inst-layout--with-toc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .inst-layout {
    padding: 4rem 4rem 6rem;
  }
}
@media (min-width: 1024px) {
  .inst-layout--with-toc {
    grid-template-columns: 220px 1fr;
    gap: 0;
    padding: 5rem 4rem 8rem;
  }
}
/* ── Sommaire sticky (réutilise le pattern legal-toc) ──────────────────── */
.inst-toc {
  display: none;
}

@media (min-width: 1024px) {
  .inst-toc {
    display: block;
    position: sticky;
    top: 6rem;
    padding-right: 2.5rem;
    align-self: start;
  }
}
.inst-toc__label {
  font-family: var(--font-secondary);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--inst-accent);
  margin-bottom: 1.25rem;
  display: block;
}

.inst-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.inst-toc__item {
  padding: 0.45rem 0 0.45rem 1.25rem;
}

.inst-toc__link {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: #7a7570;
  text-decoration: none;
  letter-spacing: 0.03em;
  line-height: 1.4;
  transition: color 0.2s, padding-left 0.2s;
  display: block;
}

.inst-toc__link:hover,
.inst-toc__link.is-active {
  color: var(--inst-section-dark);
  opacity: 1;
}

.inst-toc__link.is-active {
  font-weight: 600;
  margin-left: -1.25rem;
  padding-left: calc(1.25rem - 2px);
}

/* ── Contenu principal ─────────────────────────────────────────────────── */
.inst-content {
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS — Blocs de contenu numérotés
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-section {
  position: relative;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--inst-border);
}

.inst-section:last-child {
  border-bottom: none;
}

/* Flèche masquée en tant que span, recréée via pseudo-élément sur le label */
.inst-section__bg-num {
  display: none;
}

.inst-section__label {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--inst-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Flèche alignée horizontalement et centrée verticalement avec le label */
.inst-section__label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("../Img/svg/icon-arrow-filtre.svg") no-repeat center/contain;
  opacity: 0.4;
  flex-shrink: 0;
}

.inst-section__title {
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 700;
  color: var(--inst-section-dark);
  margin: 0 0 1.25rem;
  margin-top: 0;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.inst-section__intro {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.85;
  color: var(--inst-text);
  margin: 0 0 1.5rem;
  max-width: 680px;
}

.inst-section p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.85;
  color: var(--inst-text);
  margin: 0 0 1rem;
}

/* Override des sélecteurs plus spécifiques de style.css (fond sombre → fond clair) */
.inst-section > p {
  color: var(--inst-text);
}

.inst-section > ul li {
  color: var(--inst-text);
}

.inst-section ul,
.inst-section ol {
  padding-left: 0;
  margin: 0 0 1.25rem;
  list-style: none;
}

.inst-section li {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--inst-text);
  padding: 0.35rem 0 0.35rem 1.5rem;
  position: relative;
  border-bottom: 1px solid rgba(174, 154, 121, 0.08);
}

.inst-section li:last-child {
  border-bottom: none;
}

.inst-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 1px;
  background: var(--inst-accent);
}

.inst-section a {
  color: var(--inst-section-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(174, 154, 121, 0.5);
  transition: text-decoration-color 0.2s;
}

.inst-section a:hover {
  text-decoration-color: var(--inst-accent);
  opacity: 1;
}

.inst-section strong {
  color: var(--inst-section-dark);
  font-weight: 600;
}

@media (min-width: 1024px) {
  .inst-section {
    padding: 4rem 0 4rem 2.5rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   CARDS — Grille de cartes polyvalentes
   Utilisé pour : communiqués, offres pédagogiques, avantages mécénat, etc.
   Inspiré : National Museum of Mexican Art (resource listing pattern)
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 480px) {
  .inst-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .inst-cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .inst-cards--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.inst-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(174, 154, 121, 0.12);
  padding: 1.75rem 1.5rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.inst-card:hover {
  border-color: rgba(174, 154, 121, 0.35);
  box-shadow: 0 4px 20px rgba(46, 45, 44, 0.06);
}

.inst-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  color: var(--inst-accent);
  flex-shrink: 0;
}

.inst-card__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.inst-card__eyebrow {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--inst-accent);
  margin-bottom: 0.4rem;
}

.inst-card__title {
  font-family: var(--font-h3-h4-h5);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 700;
  color: var(--inst-section-dark);
  margin: 0 0 0.6rem;
  line-height: 1.3;
}

.inst-card__text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--inst-text);
  margin: 0;
  flex: 1;
}

.inst-card__meta {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: #7a7570;
  letter-spacing: 0.05em;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--inst-border);
}

.inst-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inst-section-dark);
  text-decoration: none;
  margin-top: 1rem;
  transition: color 0.2s, gap 0.2s;
}

.inst-card__link:hover {
  color: var(--inst-accent);
  gap: 0.6rem;
  opacity: 1;
}

.inst-card__link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ── Card avec image ───────────────────────────────────────────────────── */
.inst-card--image {
  padding: 0;
  overflow: hidden;
}

.inst-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}

.inst-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.inst-card--image:hover .inst-card__img {
  transform: scale(1.04);
}

.inst-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
}

/* ── Card sombre (pour sections dark) ──────────────────────────────────── */
.inst-card--dark {
  background: rgba(255, 253, 243, 0.04);
  border-color: rgba(255, 253, 243, 0.08);
}

.inst-card--dark:hover {
  border-color: rgba(174, 154, 121, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.inst-card--dark .inst-card__title {
  color: #FFFDF3;
}

.inst-card--dark .inst-card__text {
  color: var(--inst-text-light);
}

.inst-card--dark .inst-card__link {
  color: var(--inst-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION ALTERNÉE — Fond sombre
   Inspiré : Frans Hals Museum (sections alternées clair/sombre)
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-band {
  background: var(--inst-section-dark);
  color: #FFFDF3;
  padding: 4rem 1.5rem;
}

.inst-band__inner {
  max-width: var(--inst-max-width);
  margin: 0 auto;
}

.inst-band__label {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--inst-accent);
  display: block;
  margin-bottom: 0.5rem;
}

.inst-band__title {
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700;
  color: #FFFDF3;
  margin: 0 0 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.inst-band__text {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.8;
  color: var(--inst-text-light);
  max-width: 640px;
  margin: 0 0 2rem;
}

.inst-band p {
  color: var(--inst-text-light);
}

@media (min-width: 768px) {
  .inst-band {
    padding: 5rem 4rem;
  }
}
@media (min-width: 1024px) {
  .inst-band {
    padding: 6rem 4rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT BOX — Bloc de contact (réutilise le pattern legal)
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-contact {
  position: relative;
  background: var(--inst-hero-bg);
  padding: 1.75rem 2rem 1.75rem 2.5rem;
  margin: 1.5rem 0;
  overflow: hidden;
}

.inst-contact p {
  color: var(--inst-text-light);
  font-size: var(--fs-base);
  margin: 0.2rem 0;
  line-height: 1.6;
}

.inst-contact p strong {
  color: #FFFDF3;
  font-size: var(--fs-md);
}

.inst-contact a {
  color: var(--inst-accent);
  text-decoration: none;
}

.inst-contact a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTONS — CTA institutionnels
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
}

.inst-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.inst-btn--gold {
  background: var(--inst-accent);
  color: var(--inst-hero-bg);
}

.inst-btn--gold:hover {
  background: var(--gold);
  opacity: 1;
}

.inst-btn--gold-outline {
  background: transparent;
  color: var(--inst-accent);
  border: 1px solid var(--inst-accent);
}

.inst-btn--gold-outline:hover {
  background: var(--inst-accent);
  color: var(--inst-hero-bg);
  opacity: 1;
}

.inst-btn--dark {
  background: var(--inst-section-dark);
  color: #FFFDF3;
}

.inst-btn--dark:hover {
  background: #3e3d3c;
  opacity: 1;
}

.inst-btn:focus-visible {
  outline: 2px solid var(--inst-accent);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHIFFRES CLÉS — Stats en ligne
   Inspiré : page Le Musée (musee-stat pattern)
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  padding: 2rem 0;
  border-top: 1px solid var(--inst-border);
  border-bottom: 1px solid var(--inst-border);
  margin: 2rem 0;
}

.inst-stat {
  text-align: left;
}

.inst-stat__val {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--inst-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

.inst-stat__label {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--inst-text);
  margin-top: 0.35rem;
}

/* Stats sur fond sombre */
.inst-band .inst-stat__label {
  color: var(--inst-text-light);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRILLE TÉLÉCHARGEMENTS — Fichiers PDF, visuels HD
   Spécifique : Espace Presse
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-downloads {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 1.5rem 0;
  border: 1px solid var(--inst-border);
}

@media (min-width: 768px) {
  .inst-downloads {
    grid-template-columns: repeat(2, 1fr);
  }
}
.inst-download {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--inst-border);
  text-decoration: none;
  color: var(--inst-section-dark);
  transition: background 0.2s ease;
}

@media (min-width: 768px) {
  .inst-download {
    border-right: 1px solid var(--inst-border);
  }
  .inst-download:nth-child(2n) {
    border-right: none;
  }
}
.inst-download:hover {
  background: rgba(174, 154, 121, 0.05);
  opacity: 1;
}

.inst-download__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--inst-accent);
}

.inst-download__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.inst-download__info {
  flex: 1;
  min-width: 0;
}

.inst-download__name {
  font-family: var(--font-h3-h4-h5);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--inst-section-dark);
  line-height: 1.3;
  margin: 0;
}

.inst-download__meta {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  color: #7a7570;
  letter-spacing: 0.05em;
  margin-top: 0.15rem;
}

.inst-download__arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--inst-accent);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.2s, transform 0.2s;
}

.inst-download:hover .inst-download__arrow {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ÉTAPES / PROCESSUS — Timeline verticale
   Spécifique : Prêt d'œuvres (procédure)
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-steps {
  position: relative;
  padding-left: 2.5rem;
  margin: 2rem 0;
}

.inst-steps::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--inst-border);
}

.inst-step {
  display: block;
  position: relative;
  padding: 0 0 2.5rem;
}

.inst-step:last-child {
  padding-bottom: 0;
}

.inst-step__dot {
  position: absolute;
  left: -2.5rem;
  top: 0.15rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--inst-hero-bg);
  background: var(--inst-accent);
  border-radius: 50%;
  z-index: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inst-step:hover .inst-step__dot {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(174, 154, 121, 0.15);
}

.inst-step__title {
  font-family: var(--font-h3-h4-h5);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--inst-section-dark);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.inst-step__text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--inst-text);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIGHLIGHT BOX — Encadré mis en avant
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-highlight {
  border-radius: 10px;
  border: 1px solid #1a1917;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0;
}

.inst-highlight__title {
  font-family: var(--font-h3-h4-h5);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--inst-section-dark);
  margin: 0 0 0.5rem;
}

.inst-highlight p {
  font-size: var(--fs-base);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ REFONTE — Composants spécifiques
   ═══════════════════════════════════════════════════════════════════════════ */
/* Grille de services accessibilité avec icônes */
.a11y-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 480px) {
  .a11y-services {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .a11y-services {
    grid-template-columns: repeat(3, 1fr);
  }
}
.a11y-service {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--inst-border);
  transition: border-color 0.25s;
}

.a11y-service:hover {
  border-color: rgba(174, 154, 121, 0.35);
}

.a11y-service__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(174, 154, 121, 0.08);
  border-radius: 50%;
  color: var(--inst-accent);
}

.a11y-service__icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.a11y-service__content {
  flex: 1;
}

.a11y-service__title {
  font-family: var(--font-h3-h4-h5);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--inst-section-dark);
  margin: 0 0 0.3rem;
}

.a11y-service__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--inst-text);
  margin: 0;
}

/* Barre de conformité RGAA */
.a11y-conformance {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: var(--inst-hero-bg);
  margin: 2rem 0;
  flex-wrap: wrap;
}

.a11y-conformance__badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--inst-accent);
  border: 1px solid var(--inst-accent);
  padding: 0.4rem 1rem;
}

.a11y-conformance__badge svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.a11y-conformance__text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--inst-text-light);
  margin: 0;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTENARIATS — Niveaux de mécénat
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .inst-tiers {
    grid-template-columns: repeat(3, 1fr);
  }
}
.inst-tier {
  position: relative;
  border: 1px solid var(--inst-border);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.inst-tier:hover {
  border-color: rgba(174, 154, 121, 0.4);
  box-shadow: 0 6px 24px rgba(46, 45, 44, 0.08);
}

.inst-tier--featured {
  border-color: var(--inst-accent);
  background: rgba(174, 154, 121, 0.03);
}

.inst-tier--featured::before {
  content: "Recommandé";
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--inst-hero-bg);
  background: var(--inst-accent);
  padding: 0.2rem 0.75rem;
  white-space: nowrap;
}

.inst-tier__name {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--inst-accent);
  margin: 0 0 0.75rem;
}

.inst-tier__price {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--inst-section-dark);
  line-height: 1;
  margin: 0 0 0.25rem;
}

.inst-tier__period {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: #7a7570;
  margin: 0 0 1.5rem;
}

.inst-tier__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
}

.inst-tier__features li {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--inst-text);
  padding: 0.4rem 0 0.4rem 1.25rem;
  position: relative;
  border-bottom: 1px solid rgba(174, 154, 121, 0.08);
}

.inst-tier__features li:last-child {
  border-bottom: none;
}

.inst-tier__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--inst-accent);
  font-size: var(--fs-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA BAND — Bande d'appel à l'action en bas de page
   Inspiré : Fondation Louis Vuitton (CTA persistant élégant)
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-cta-band {
  background: var(--inst-hero-bg);
  padding: 3.5rem 1.5rem;
  text-align: center;
}

.inst-cta-band__inner {
  max-width: 640px;
  margin: 0 auto;
}

.inst-cta-band__title {
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700;
  color: #FFFDF3;
  margin: 0 0 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.inst-cta-band__text {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--inst-text-light);
  margin: 0 0 1.75rem;
  line-height: 1.7;
}

.inst-cta-band__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .inst-cta-band {
    padding: 4.5rem 4rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   FORMULAIRE INLINE — Formulaire de contact simplifié
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-form {
  margin: 2rem 0;
}

.inst-form__group {
  margin-bottom: 1.25rem;
}

.inst-form__label {
  display: block;
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inst-section-dark);
  margin-bottom: 0.4rem;
}

.inst-form__input,
.inst-form__textarea,
.inst-form__select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--inst-section-dark);
  background: #fff;
  border: 1px solid rgba(174, 154, 121, 0.25);
  padding: 0.75rem 1rem;
  transition: border-color 0.2s;
  appearance: none;
}

.inst-form__input:focus,
.inst-form__textarea:focus,
.inst-form__select:focus {
  outline: none;
  border-color: var(--inst-accent);
  box-shadow: 0 0 0 3px rgba(174, 154, 121, 0.12);
}

.inst-form__textarea {
  min-height: 120px;
  resize: vertical;
}

.inst-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 480px) {
  .inst-form__row {
    grid-template-columns: 1fr 1fr;
  }
}
.inst-form__hint {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: #9a9590;
  margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALERIE VISUELS — Grille d'images téléchargeables
   Spécifique : Espace Presse (visuels HD)
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
}

@media (min-width: 768px) {
  .inst-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
@media (min-width: 1024px) {
  .inst-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}
.inst-gallery__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: #f0ede7;
}

.inst-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.inst-gallery__item:hover img {
  transform: scale(1.05);
}

.inst-gallery__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 25, 23, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.inst-gallery__item:hover .inst-gallery__overlay {
  opacity: 1;
}

.inst-gallery__overlay svg {
  width: 24px;
  height: 24px;
  stroke: #FFFDF3;
  fill: none;
  stroke-width: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Ajustements mobile
   ═══════════════════════════════════════════════════════════════════════════ */
/* Sommaire horizontal sur tablette */
@media (min-width: 768px) and (max-width: 1023px) {
  .inst-toc {
    display: block;
    position: static;
    padding: 0 0 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--inst-border);
  }
  .inst-toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }
  .inst-toc__item {
    padding: 0.3rem 0;
  }
}
@media (max-width: 480px) {
  .inst-hero {
    padding: 5.5rem 1.25rem 2.5rem;
    min-height: 40vh;
  }
  .inst-hero__line {
    display: none;
  }
  .inst-hero__title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }
  .inst-section__label::before {
    display: none;
  }
  .inst-stats {
    gap: 1.5rem 2rem;
  }
  .inst-stat__val {
    font-size: 1.75rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS-VISIBLE — Accessibilité clavier
   ═══════════════════════════════════════════════════════════════════════════ */
.inst-download:focus-visible {
  outline: 2px solid var(--inst-accent);
  outline-offset: -2px;
  background: rgba(174, 154, 121, 0.05);
}

.inst-gallery__item:focus-visible {
  outline: 2px solid var(--inst-accent);
  outline-offset: 2px;
}

.inst-gallery__item:focus-visible .inst-gallery__overlay {
  opacity: 1;
}

.inst-download:hover .inst-download__name {
  color: var(--inst-accent);
}

/* Validation formulaire */
.inst-form__input:invalid:not(:placeholder-shown),
.inst-form__textarea:invalid:not(:placeholder-shown) {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.inst-form__input:valid:not(:placeholder-shown),
.inst-form__textarea:valid:not(:placeholder-shown) {
  border-color: rgba(174, 154, 121, 0.5);
}

/* Hero sans image — pattern graphique subtil */
.inst-hero:not(.inst-hero--with-image) {
  background-image: radial-gradient(circle at 20% 80%, rgba(174, 154, 121, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(174, 154, 121, 0.05) 0%, transparent 50%);
}

/* Card featured */
.inst-card--featured {
  border-color: var(--inst-accent);
  background: rgba(174, 154, 121, 0.03);
}

.inst-card--featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--inst-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS — Intersection Observer, respectent prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .inst-card,
  .inst-download,
  .a11y-service,
  .inst-tier {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .inst-card.is-visible,
  .inst-download.is-visible,
  .a11y-service.is-visible,
  .inst-tier.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Stagger delays */
  .inst-cards .inst-card:nth-child(2).is-visible {
    transition-delay: 0.06s;
  }
  .inst-cards .inst-card:nth-child(3).is-visible {
    transition-delay: 0.12s;
  }
  .inst-cards .inst-card:nth-child(4).is-visible {
    transition-delay: 0.18s;
  }
  .inst-cards .inst-card:nth-child(5).is-visible {
    transition-delay: 0.24s;
  }
  .inst-cards .inst-card:nth-child(6).is-visible {
    transition-delay: 0.3s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .inst-card,
  .inst-download,
  .a11y-service,
  .inst-tier {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   HEADER WRAPPER — Pages institutionnelles (espace pro)
   Hérite du header générique (image de fond + overlay vignette)
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   CALENDAR FILTERS — Redesign muséal v2.1
   Musées des Arts et du Temps de Besançon (MBAA / MDT)
   ═══════════════════════════════════════════════════════════════════════════
   Architecture : BEM, mobile-first
   Breakpoints  : 480px, 768px, 1024px, 1280px
   Touch targets : 44px minimum (WCAG 2.5.5)
   Contraste    : 4.5:1 minimum (WCAG AA)
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Variables locales ─────────────────────────────────────────────────────── */
/* NOTE : Les variables CSS calendar-filters sont dans _variables.scss */
/* ── Conteneur principal ───────────────────────────────────────────────────── */
.calendar-filters {
  font-family: var(--font-body, "Neutraface2Text-Book", sans-serif);
  background: var(--cf-bg);
  border: 1px solid var(--cf-border);
  border-radius: clamp(12px, 2vw, 20px);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--cf-shadow);
  position: relative;
  overflow: hidden;
}

/* ── En-tête ───────────────────────────────────────────────────────────────── */
.calendar-filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(0.75rem, 1.5vw, 1rem);
  border-bottom: 1px solid var(--cf-border-light);
}

.calendar-filters__title-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.calendar-filters__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--cf-bg-alt);
  color: var(--cf-gold);
  flex-shrink: 0;
}

.calendar-filters__icon svg {
  width: 18px;
  height: 18px;
}

.calendar-filters__title {
  font-family: var(--font-h3-h4-h5, "Neutraface2Display-Bold", sans-serif);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 600;
  color: var(--cf-text);
  margin: 0;
  letter-spacing: 0.03em;
}

.calendar-filters__count {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--cf-text-light);
  margin-left: 0.25rem;
}

/* Bouton réinitialiser */
.calendar-filters__reset {
  display: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  min-height: 44px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-pill);
  background: transparent;
  color: var(--cf-text-muted);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all var(--cf-transition);
  white-space: nowrap;
}

.calendar-filters__reset svg {
  width: 13px;
  height: 13px;
}

.calendar-filters__reset:hover {
  border-color: var(--cf-text-muted);
  color: var(--cf-text);
  background: var(--cf-bg-alt);
}

.calendar-filters__reset:focus-visible {
  outline: 2px solid var(--cf-gold);
  outline-offset: 2px;
}

.calendar-filters__reset.is-visible {
  display: inline-flex;
}

/* ── Corps des filtres ─────────────────────────────────────────────────────── */
.calendar-filters__body {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.25rem);
}

/* ── Ligne de filtres ──────────────────────────────────────────────────────── */
.calendar-filters__row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Label de groupe */
.calendar-filters__label {
  font-family: var(--font-secondary, "Neutraface2Text-Demi", sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cf-text-muted);
  white-space: nowrap;
  min-width: 5.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.calendar-filters__label svg {
  width: 13px;
  height: 13px;
  opacity: 0.6;
}

/* Conteneur de pills — mobile : scroll horizontal avec fade */
.calendar-filters__pills {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
}

.calendar-filters__pills::-webkit-scrollbar {
  display: none;
}

/* ── Pill de filtre — 44px touch target ────────────────────────────────────── */
.calendar-filters__pill {
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  min-height: 44px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-pill);
  background: var(--cf-bg);
  color: var(--cf-text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--cf-transition);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}

.calendar-filters__pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity var(--cf-transition);
}

/* Pastille de couleur catégorie */
.calendar-filters__pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

/* Compteur dans la pill */
.calendar-filters__pill-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cf-text-muted);
  background: var(--cf-bg-alt);
  padding: 0.125rem 0.4rem;
  border-radius: 10px;
  line-height: 1.2;
  transition: all var(--cf-transition);
}

/* Hover */
.calendar-filters__pill:hover {
  color: var(--cf-text);
  box-shadow: var(--cf-shadow-hover);
  transform: translateY(-1px);
}

.calendar-filters__pill:hover svg {
  opacity: 0.8;
}

/* Active */
.calendar-filters__pill.is-active {
  background: var(--cf-dark);
  color: #ffffff;
  box-shadow: var(--cf-shadow-active);
}

.calendar-filters__pill.is-active svg {
  opacity: 1;
  color: #ffffff;
}

.calendar-filters__pill.is-active .calendar-filters__pill-count {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}

.calendar-filters__pill.is-active .calendar-filters__pill-dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Focus visible */
.calendar-filters__pill:focus-visible {
  outline: 2px solid var(--cf-gold);
  outline-offset: 2px;
}

/* ── Pill "Tous" ───────────────────────────────────────────────────────────── */
.calendar-filters__pill--all.is-active {
  background: var(--cf-gold);
}

/* ── Pill musée — couleurs de marque ───────────────────────────────────────── */
.calendar-filters__pill--musee.is-active[data-musee=mbaa] {
  background: var(--mbaa-rose, #e03a80);
  border-color: var(--mbaa-rose, #e03a80);
}

.calendar-filters__pill--musee.is-active[data-musee=mdt] {
  background: var(--mdt-orange, #d46e36);
  border-color: var(--mdt-orange, #d46e36);
}

.calendar-filters__pill--musee.is-active[data-musee=mat] {
  background: var(--cf-dark);
  border-color: var(--cf-dark);
}

/* ── Pill tarif ────────────────────────────────────────────────────────────── */
.calendar-filters__pill--gratuit.is-active {
  background: var(--cf-green);
  border-color: var(--cf-green);
  color: #ffffff;
}

.calendar-filters__pill--payant.is-active {
  background: var(--cf-gold);
  color: #ffffff;
}

/* ── Pill accessibilité ────────────────────────────────────────────────────── */
.calendar-filters__pill--accessible.is-active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
}

/* ── Séparateur ────────────────────────────────────────────────────────────── */
.calendar-filters__separator {
  width: 100%;
  height: 1px;
  background: var(--cf-border-light);
  margin: 0.5rem 0;
}

/* ── Actions (à venir + toggle vue) ────────────────────────────────────────── */
.calendar-filters__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  padding-top: clamp(0.75rem, 1.5vw, 1rem);
  border-top: 1px solid var(--cf-border-light);
}

/* Bouton "À venir" */
.calendar-filters__upcoming {
  font-family: var(--font-secondary, "Neutraface2Text-Demi", sans-serif);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  min-height: 44px;
  border-radius: var(--cf-radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--cf-dark);
  color: #ffffff;
  border: 1.5px solid var(--cf-dark);
  cursor: pointer;
  transition: all var(--cf-transition);
  white-space: nowrap;
  align-self: flex-start;
}

.calendar-filters__upcoming svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.calendar-filters__upcoming:hover {
  background: #374151;
  border-color: #374151;
}

.calendar-filters__upcoming.is-active {
  background: var(--cf-gold);
}

.calendar-filters__upcoming:focus-visible {
  outline: 2px solid var(--cf-gold);
  outline-offset: 2px;
}

/* Résumé */
.calendar-filters__summary {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--cf-text-light);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.calendar-filters__summary-count {
  font-weight: 600;
  color: var(--cf-gold);
  transition: transform 0.2s ease;
}

.calendar-filters__summary-count.is-updating {
  animation: cfCountPulse 0.4s ease;
}

@keyframes cfCountPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
/* Toggle vue */
.calendar-filters__view-toggle {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  background: var(--cf-bg-alt);
  padding: 3px;
  border-radius: 6px;
  align-self: flex-end;
}

.calendar-filters__view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--cf-text-light);
  cursor: pointer;
  transition: all 0.15s ease;
}

.calendar-filters__view-btn svg {
  width: 18px;
  height: 18px;
}

.calendar-filters__view-btn--active {
  background: var(--cf-dark);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.calendar-filters__view-btn:hover:not(.calendar-filters__view-btn--active) {
  background: var(--cf-bg);
  color: var(--cf-text);
}

.calendar-filters__view-btn:focus-visible {
  outline: 2px solid var(--cf-gold);
  outline-offset: 2px;
}

/* ── Panneau avancé (dépliable) ────────────────────────────────────────────── */
.calendar-filters__advanced {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-filters__advanced.is-open {
  grid-template-rows: 1fr;
}

.calendar-filters__advanced-inner {
  overflow: hidden;
}

.calendar-filters__advanced-content {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  padding-top: clamp(0.75rem, 1.5vw, 1rem);
  border-top: 1px solid var(--cf-border-light);
  margin-top: clamp(0.75rem, 1.5vw, 1rem);
  opacity: 0;
  transition: opacity 0.25s ease 0.1s;
}

.calendar-filters__advanced.is-open .calendar-filters__advanced-content {
  opacity: 1;
}

/* Fallback pour navigateurs sans animation grid-template-rows */
@supports not (transition: grid-template-rows 0.35s) {
  .calendar-filters__advanced {
    display: none;
  }
  .calendar-filters__advanced.is-open {
    display: block;
  }
  .calendar-filters__advanced-content {
    opacity: 1;
  }
}
/* Bouton "Plus de filtres" */
.calendar-filters__toggle-advanced {
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 0;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--cf-gold);
  font-size: 0.875rem;
  cursor: pointer;
  transition: color var(--cf-transition);
}

.calendar-filters__toggle-advanced svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.calendar-filters__toggle-advanced:hover {
  color: var(--cf-text);
}

.calendar-filters__toggle-advanced.is-open svg {
  transform: rotate(180deg);
}

.calendar-filters__toggle-advanced:focus-visible {
  outline: 2px solid var(--cf-gold);
  outline-offset: 2px;
}

/* ── Sélecteur de période ──────────────────────────────────────────────────── */
.calendar-filters__date-range {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.calendar-filters__date-input {
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: 0.625rem 0.75rem;
  min-height: 44px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-sm);
  background: var(--cf-bg);
  color: var(--cf-text);
  transition: border-color var(--cf-transition);
  width: 100%;
}

.calendar-filters__date-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(174, 154, 121, 0.15);
}

.calendar-filters__date-sep {
  font-size: 0.875rem;
  color: var(--cf-text-light);
  text-align: center;
}

/* ── Tags de filtres actifs ────────────────────────────────────────────────── */
.calendar-filters__active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 0;
}

.calendar-filters__active-tags:empty {
  display: none;
}

.calendar-filters__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  min-height: 36px;
  background: rgba(174, 154, 121, 0.1);
  border: 1px solid rgba(174, 154, 121, 0.2);
  border-radius: var(--cf-radius-pill);
  font-size: 0.8125rem;
  color: var(--cf-text);
  animation: cfTagIn 0.25s ease;
}

.calendar-filters__tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--cf-text-muted);
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: all 0.15s;
  margin: -4px -4px -4px 0;
}

.calendar-filters__tag-remove:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--cf-text);
}

.calendar-filters__tag-remove svg {
  width: 12px;
  height: 12px;
}

@keyframes cfTagIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR — Labels de lieu (MBAA / MDT / MAT)
   ═══════════════════════════════════════════════════════════════════════════ */
.event-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.event-lieu-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
  line-height: 1.4;
  text-transform: uppercase;
}

.event-lieu-badge--mbaa {
  background: var(--mbaa-rose, #e03a80);
}

.event-lieu-badge--mdt {
  background: var(--mdt-orange, #d46e36);
}

.event-lieu-badge--mat {
  background: #2e2d2c;
}

.event-price-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  font-size: 0.625rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  line-height: 1.4;
}

.event-time-tag {
  display: block;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.25rem;
}

/* Compteur d'événements sur les cellules du calendrier */
.day-event-count {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cf-gold, #ae9a79);
  color: #ffffff;
  font-size: 0.5625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first
   ═══════════════════════════════════════════════════════════════════════════ */
/* Phablet (480px) */
@media (min-width: 480px) {
  .calendar-filters__actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .calendar-filters__view-toggle {
    margin-left: auto;
    align-self: auto;
  }
  .calendar-filters__date-range {
    flex-direction: row;
    align-items: center;
  }
  .calendar-filters__date-input {
    width: auto;
  }
}
/* Tablette (768px) */
@media (min-width: 768px) {
  .calendar-filters__pills {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .calendar-filters__row {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
  .calendar-filters__separator {
    width: 1px;
    height: 28px;
    margin: 0 0.25rem;
  }
}
/* Desktop (1024px) — panneau avancé toujours ouvert */
@media (min-width: 1024px) {
  .calendar-filters__body {
    gap: 0.875rem;
  }
  .calendar-filters__label {
    min-width: 6rem;
  }
  /* Panneau avancé toujours visible */
  .calendar-filters__advanced {
    grid-template-rows: 1fr;
  }
  .calendar-filters__advanced-content {
    opacity: 1;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
  .calendar-filters__toggle-advanced {
    display: none;
  }
}
/* Grand écran (1280px) */
@media (min-width: 1280px) {
  .calendar-filters {
    padding: 2rem 2.5rem;
  }
}
/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .calendar-filters__pill,
  .calendar-filters__upcoming,
  .calendar-filters__reset,
  .calendar-filters__view-btn,
  .calendar-filters__toggle-advanced svg,
  .calendar-filters__advanced,
  .calendar-filters__advanced-content,
  .calendar-filters__tag,
  .calendar-filters__summary-count {
    transition: none;
    animation: none;
  }
  .calendar-filters__pill:hover {
    transform: none;
  }
}
/* ── Print ─────────────────────────────────────────────────────────────────── */
@media print {
  .calendar-filters {
    display: none;
  }
}
/*
 * large-screens.css — Adaptations typographiques et UI pour grands écrans
 * Breakpoints : 1400px, 1600px, 1800px+
 * Chargé après tous les autres CSS du thème
 */
/* ══════════════════════════════════════════════════════════
   0. PETITS LAPTOPS (1024px–1439px) — Navbar compacte
   MacBook 13" = 1440px CSS, donc on cible en dessous
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1439px) {
  /* Container plus serré */
  .header__container {
    padding: 0.75rem 2rem;
    gap: 1rem;
  }
  /* Logo réduit */
  .header__logo-link,
  .custom-logo-link {
    height: 120px;
  }
  .header__logo-img,
  .custom-logo {
    height: 120px;
  }
  /* Liens nav plus petits */
  .header__nav-link {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }
  /* Liens secondaires (icônes + contact) */
  .header__nav-list--secondary .header__nav-link {
    font-size: 0.7rem;
  }
  .header__nav-link--contact {
    font-size: 0.7rem;
  }
  /* Icônes plus petites */
  .header__nav-icon {
    width: 17px;
    height: 17px;
  }
  /* Gap entre les liens réduit */
  .header__nav-list--main {
    gap: 1.25rem;
  }
  .header__nav-list--secondary {
    gap: 0.75rem;
  }
  /* Scrolled state — encore plus compact */
  .header--scrolled .header__container {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .header--scrolled .header__logo-link,
  .header--scrolled .custom-logo-link {
    width: 100px;
    height: 44px;
  }
}
/* ══════════════════════════════════════════════════════════
   1. BASE — Scale globale via html font-size
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  html {
    font-size: 17px;
  }
}
@media (min-width: 1600px) {
  html {
    font-size: 18px;
  }
}
@media (min-width: 1920px) {
  html {
    font-size: 19px;
  }
}
/* ══════════════════════════════════════════════════════════
   2. TYPOGRAPHIE — Headings, paragraphes, textes
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  h1, .header__title {
    font-size: clamp(3.5rem, 5vw, 5.5rem);
  }
  h2 {
    font-size: clamp(2.5rem, 3.5vw, 3.5rem);
  }
  h3 {
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  }
  h4 {
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  }
  h5 {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
  }
  h6 {
    font-size: clamp(0.875rem, 1vw, 1rem);
  }
  p {
    font-size: clamp(1.05rem, 1.2vw, 1.25rem);
    line-height: 1.65;
  }
  /* Textes utilitaires */
  .text__body {
    font-size: var(--fs-lg);
  }
  .text__body--small {
    font-size: var(--fs-body);
  }
  .text__highlight {
    font-size: var(--fs-xl);
  }
  .heading__subtitle {
    font-size: 3.25rem;
  }
  .heading__section--large {
    font-size: 2.25rem;
  }
  .heading__section--medium {
    font-size: 1.75rem;
  }
  .heading__section--small {
    font-size: 1.4rem;
  }
  .heading__subsection {
    font-size: 1.25rem;
  }
}
/* ══════════════════════════════════════════════════════════
   3. NAVIGATION & HEADER
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .header__nav-link {
    font-size: var(--fs-md);
    letter-spacing: 0.11em;
  }
  .header__nav-link--contact {
    font-size: var(--fs-md) !important;
    letter-spacing: 0.11em !important;
  }
  .header__nav-list--secondary-desktop .header__nav-link--contact {
    font-size: var(--fs-md) !important;
  }
  .header__nav-icon {
    width: 24px;
    height: 24px;
  }
  .header #sous-menu-header {
    font-size: clamp(1.25rem, 1.8vw, 2rem);
  }
  .header__container {
    padding: 1.5rem 5rem;
  }
  /* Sous-menus nav */
  .nav__link,
  .menu-item a {
    font-size: var(--fs-body);
  }
}
@media (min-width: 1800px) {
  .header__nav-link {
    font-size: var(--fs-body);
    letter-spacing: 0.1em;
  }
  .header__nav-link--contact {
    font-size: var(--fs-body) !important;
  }
  .header__nav-list--secondary-desktop .header__nav-link--contact {
    font-size: var(--fs-body) !important;
  }
  .header__nav-icon {
    width: 26px;
    height: 26px;
  }
}
/* ══════════════════════════════════════════════════════════
   4. BOUTONS — Plus grands, plus lisibles
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .coll-btn {
    padding: 1rem 2.5rem;
    font-size: var(--fs-base);
  }
  /* Boutons génériques du thème */
  button,
  .btn,
  input[type=submit] {
    font-size: var(--fs-body);
  }
}
/* ══════════════════════════════════════════════════════════
   5. PAGE COLLECTIONS — Composants spécifiques
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  /* Carrousel œuvres phares */
  .coll-highlights__eyebrow,
  .coll-visites__eyebrow,
  .coll-chiffres__eyebrow {
    font-size: var(--fs-sm);
  }
  .coll-highlights__title,
  .coll-visites__title {
    font-size: clamp(1.8rem, 2.5vw, 2.8rem);
  }
  .coll-carousel__title {
    font-size: var(--fs-lg);
  }
  .coll-carousel__artist {
    font-size: var(--fs-sm);
  }
  .coll-carousel__badge {
    font-size: var(--fs-sm);
  }
  /* Accordéon pédagogique — Brutalist Index */
  .coll-accordion__title {
    font-size: clamp(3rem, 6vw, 7rem);
  }
  .coll-infos__title {
    font-size: clamp(1.8rem, 2.5vw, 3rem);
  }
  .coll-acc-header__left span {
    font-size: clamp(1.3rem, 2.5vw, 2rem);
  }
  .coll-acc-panel__text {
    font-size: var(--fs-body);
    line-height: 1.8;
  }
  .coll-acc-panel__heading {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  }
  /* Infos pratiques */
  .coll-infos__card-title {
    font-size: var(--fs-xl);
  }
  .coll-infos__card-text {
    font-size: var(--fs-body);
    line-height: 1.75;
  }
  .coll-infos__card-note {
    font-size: var(--fs-sm);
  }
  /* Visites */
  .coll-visites__desc {
    font-size: var(--fs-body);
  }
  .coll-visites__option-title {
    font-size: var(--fs-lg);
  }
  .coll-visites__option-text {
    font-size: var(--fs-md);
  }
  /* Chiffres clés */
  .coll-chiffres__number {
    font-size: clamp(2rem, 3vw, 2.8rem);
  }
  .coll-chiffres__label {
    font-size: var(--fs-sm);
  }
  .coll-chiffres__subtitle {
    font-size: var(--fs-body);
  }
  /* Ressources */
  .coll-ressources__title {
    font-size: var(--fs-xl);
  }
  .coll-ressources__desc {
    font-size: var(--fs-body);
  }
  /* Newsletter */
  .coll-newsletter__title {
    font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  }
  .coll-newsletter__desc {
    font-size: var(--fs-body);
  }
  /* Tabs & filtres */
  .coll-tab {
    font-size: var(--fs-base);
  }
  .coll-filters__search {
    font-size: var(--fs-md);
  }
  .coll-filters__select {
    font-size: var(--fs-base);
  }
}
/* ══════════════════════════════════════════════════════════
   6. PAGE ACTUALITÉS
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .actualites-title {
    font-size: 3.5rem;
  }
  .actualites-subtitle {
    font-size: 1.4rem;
  }
  .actualite-title {
    font-size: 1.7rem;
  }
  .actualite-date {
    font-size: var(--fs-body);
  }
  .filter-group label {
    font-size: var(--fs-body);
  }
}
/* ══════════════════════════════════════════════════════════
   7. FOOTER
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .footer__input {
    font-size: var(--fs-lg);
  }
}
/* ══════════════════════════════════════════════════════════
   8. COMPOSANTS GÉNÉRAUX — Cards, bannières, etc.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .main__programmation-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
  }
  /* Espacements plus généreux */
  .main__card {
    padding: 2.5rem;
  }
  /* Labels, badges, petits textes */
  .coll-acc-panel__img--download span,
  .coll-ressources__link {
    font-size: var(--fs-sm);
  }
}
/* ══════════════════════════════════════════════════════════
   9. TRÈS GRANDS ÉCRANS (1800px+) — Boost supplémentaire
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1800px) {
  h1, .header__title {
    font-size: clamp(4rem, 5vw, 6.5rem);
  }
  h2 {
    font-size: clamp(3rem, 3.5vw, 4rem);
  }
  h3 {
    font-size: clamp(2rem, 2.5vw, 3rem);
  }
  p {
    font-size: 1.3rem;
    line-height: 1.7;
  }
  .main__card {
    padding: 3rem;
  }
}