/* ═══════════════════════════════════════════════════════════════════
   MARIS D'ARMOR — main.css v1.3.0
   Retour au prototype original + corrections définitives
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. VARIABLES ───────────────────────────────────────────────── */
:root {
  --ivoire:        #F6F3ED;
  --ivoire-light:  #F8F5F0;
  --or:            #C4A96A;
  --or-dark:       #A8874F;
  --noir:          #1F1F1F;
  --noir-soft:     #2A2A2A;
  --ardoise:       #A39B8F;
  --gris-pierre:   #5C5C5C;

  --mda-ivoire:       #F6F3ED;
  --mda-ivoire-light: #F8F5F0;
  --mda-or:           #C4A96A;
  --mda-or-dark:      #A8874F;
  --mda-noir:         #1F1F1F;
  --mda-ardoise:      #A39B8F;
  --mda-gris-pierre:  #5C5C5C;

  --mda-font-serif:  'Playfair Display', Georgia, serif;
  --mda-font-body:   'Cormorant Garamond', Georgia, serif;
  --mda-container:   1320px;
  --mda-transition:  cubic-bezier(.4, 0, .2, 1);

  --mda-cursor-color: var(--mda-or);
  --mda-cursor-size-dot:  6px;
  --mda-cursor-size-ring: 36px;
}
body.mda-cursor-size-small  { --mda-cursor-size-dot: 4px; --mda-cursor-size-ring: 24px; }
body.mda-cursor-size-medium { --mda-cursor-size-dot: 6px; --mda-cursor-size-ring: 36px; }
body.mda-cursor-size-large  { --mda-cursor-size-dot: 8px; --mda-cursor-size-ring: 48px; }

/* ─── 2. RESET + TYPOGRAPHIES ────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--mda-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--mda-noir);
  background: var(--mda-ivoire);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mda-font-serif);
  font-weight: 400;
  line-height: 1.2;
  color: var(--mda-noir);
  margin-top: 0;
}
h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }

em { font-style: italic; color: var(--mda-or); }
a  { color: var(--mda-or); text-decoration: none; transition: color .3s var(--mda-transition); }
a:hover { color: var(--mda-or-dark); }

.mda-container {
  max-width: var(--mda-container);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 1rem;
  background: var(--mda-or);
  color: var(--mda-ivoire);
  padding: .5rem 1rem;
  z-index: 10001;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ─── 3. CURSEUR CUSTOM (6 styles pilotés par classes body) ─────── */
.mda-cursor, .mda-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  will-change: transform;
  display: none;
}
.mda-cursor { transition: width .2s, height .2s, background .2s, transform .2s; }
.mda-cursor-ring { transition: width .3s, height .3s, opacity .3s, transform .3s; z-index: 9999; }

body.mda-cursor-disabled .mda-cursor, body.mda-cursor-disabled .mda-cursor-ring { display: none !important; }
body.mda-cursor-disabled { cursor: auto !important; }

/* Rond */
body.mda-cursor-round .mda-cursor {
  display: block;
  width: var(--mda-cursor-size-dot);
  height: var(--mda-cursor-size-dot);
  background: var(--mda-cursor-color);
  border-radius: 50%;
  mix-blend-mode: difference;
}
body.mda-cursor-round .mda-cursor-ring {
  display: block;
  width: var(--mda-cursor-size-ring);
  height: var(--mda-cursor-size-ring);
  border: 1px solid var(--mda-cursor-color);
  border-radius: 50%;
  opacity: .6;
}
body.mda-cursor-round .mda-cursor.is-hovering { width: calc(var(--mda-cursor-size-dot)*1.6); height: calc(var(--mda-cursor-size-dot)*1.6); }
body.mda-cursor-round .mda-cursor-ring.is-hovering { width: calc(var(--mda-cursor-size-ring)*1.55); height: calc(var(--mda-cursor-size-ring)*1.55); opacity: 1; }

/* Croix */
body.mda-cursor-cross .mda-cursor { display: block; width: 24px; height: 24px; background: transparent; }
body.mda-cursor-cross .mda-cursor::before,
body.mda-cursor-cross .mda-cursor::after { content: ''; position: absolute; background: var(--mda-cursor-color); top: 50%; left: 50%; }
body.mda-cursor-cross .mda-cursor::before { width: 1.5px; height: 100%; transform: translate(-50%,-50%); }
body.mda-cursor-cross .mda-cursor::after  { width: 100%; height: 1.5px; transform: translate(-50%,-50%); }
body.mda-cursor-cross .mda-cursor.is-hovering { transform: translate(-50%,-50%) rotate(45deg) scale(1.3); }

/* Losange */
body.mda-cursor-diamond .mda-cursor { display: block; width: 14px; height: 14px; background: var(--mda-cursor-color); transform: translate(-50%,-50%) rotate(45deg); }
body.mda-cursor-diamond .mda-cursor.is-hovering { width: 22px; height: 22px; background: transparent; border: 1.5px solid var(--mda-cursor-color); }

/* Trait vertical */
body.mda-cursor-line .mda-cursor { display: block; width: 1.5px; height: 28px; background: var(--mda-cursor-color); }
body.mda-cursor-line .mda-cursor.is-hovering { height: 36px; width: 2px; }

/* Double cercle */
body.mda-cursor-rings .mda-cursor { display: block; width: 14px; height: 14px; background: transparent; border: 1px solid var(--mda-cursor-color); border-radius: 50%; }
body.mda-cursor-rings .mda-cursor-ring { display: block; width: var(--mda-cursor-size-ring); height: var(--mda-cursor-size-ring); border: 1px solid var(--mda-cursor-color); border-radius: 50%; opacity: .4; }
body.mda-cursor-rings .mda-cursor.is-hovering { width: 22px; height: 22px; background: var(--mda-cursor-color); }
body.mda-cursor-rings .mda-cursor-ring.is-hovering { width: calc(var(--mda-cursor-size-ring)*1.4); height: calc(var(--mda-cursor-size-ring)*1.4); opacity: .7; }

body.mda-cursor-round, body.mda-cursor-cross, body.mda-cursor-diamond, body.mda-cursor-line, body.mda-cursor-rings { cursor: none; }
body.mda-cursor-round *, body.mda-cursor-cross *, body.mda-cursor-diamond *, body.mda-cursor-line *, body.mda-cursor-rings * { cursor: none; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  body, body * { cursor: auto !important; }
  body button, body a { cursor: pointer !important; }
  body input, body textarea { cursor: text !important; }
  .mda-cursor, .mda-cursor-ring { display: none !important; }
}

/* ─── 4. GRAIN OVERLAY ───────────────────────────────────────────── */
.mda-grain-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .08;
  mix-blend-mode: multiply;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.4) 1px, transparent 0);
  background-size: 3px 3px;
}

/* ═══════════════════════════════════════════════════════════════
   5. LANG-SWITCHER FR/EN/IT — HAUT À GAUCHE (prototype original)
   Compatible Polylang (ul/li) et fallback statique
   ═══════════════════════════════════════════════════════════ */
.mda-lang-switcher {
  position: fixed;
  top: 2.6rem;
  left: 5.4rem;
  z-index: 101;
  font-family: var(--mda-font-body);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.mda-lang-switcher ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.25rem;
}
.mda-lang-switcher li {
  margin: 0;
}
.mda-lang-switcher a {
  color: var(--mda-or);
  opacity: .8;
  transition: opacity .3s, color .3s;
  position: relative;
  padding-bottom: 3px;
  text-decoration: none;
  display: inline-block;
}
.mda-lang-switcher a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--mda-or);
  transition: width .4s var(--mda-transition);
}
.mda-lang-switcher a:hover { opacity: 1; color: var(--mda-or-dark); }
.mda-lang-switcher .current-lang a,
.mda-lang-switcher li.is-active a,
.mda-lang-switcher a[aria-current="page"] {
  opacity: 1;
  color: var(--mda-or);
  font-style: italic;
}
.mda-lang-switcher .current-lang a::after,
.mda-lang-switcher li.is-active a::after,
.mda-lang-switcher a[aria-current="page"]::after {
  width: 100%;
}
/* Décaler le menu toggle quand lang switcher présent (haut à gauche) */
.mda-menu-toggle { top: 4.5rem; }

/* ═══════════════════════════════════════════════════════════════
   6. LOGO FIXED — Couleurs d'origine au repos, effet DARK au scroll
   ═══════════════════════════════════════════════════════════ */
.mda-logo {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 100;
  display: block;
  transition: filter .5s var(--mda-transition);
}
.mda-logo img {
  display: block;
  /* Responsive : de 30px (mobile) à 110px (desktop), proportionnel au viewport */
  width: clamp(30px, calc(30px + (110 - 30) * ((100vw - 375px) / (1440 - 375))), 60px);
  height: auto;
  transition: filter .5s var(--mda-transition);
}
/* Au repos : AUCUN filtre, couleurs d'origine strictement préservées */
/* Au scroll : effet DARK — le logo s'assombrit pour rester lisible sur fond clair */
.mda-logo.is-scrolled img {
  filter: brightness(0) saturate(100%);
}

/* Positions alternatives (options panneau admin) */
body.mda-logo-top-left .mda-logo { left: 2rem; right: auto; }
body.mda-logo-top-center .mda-logo { left: 50%; right: auto; transform: translateX(-50%); }

/* ─── 7. MENU TOGGLE ─────────────────────────────────────────────── */
.mda-menu-toggle {
  position: fixed;
  top: 2rem;
  left: 2rem;
  right: auto;
  z-index: 101;
  width: 42px;
  height: 42px;
  padding: 0;
  /*
   * Opacité à .82 (mesurée) : sur fond ivoire (#F6F3ED), le fond calculé
   * est rgb(70,69,68) → ratio de contraste avec les lignes ivoires = 10.4:1.
   * À .35 (ancienne valeur), le ratio était 2.14:1 — lignes invisibles.
   */
  background: rgba(31,31,31,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  align-items: flex-start;
  padding-left: 8px;
  transition: background .3s var(--mda-transition);
}
.mda-toggle-line {
  display: block;
  height: 1px;
  background: var(--mda-ivoire);
  transition: all .3s var(--mda-transition);
}
.mda-toggle-line:nth-child(1) { width: 28px; }
.mda-toggle-line:nth-child(2) { width: 22px; }
.mda-toggle-line:nth-child(3) { width: 16px; }
.mda-menu-toggle:hover .mda-toggle-line { width: 28px; }
.mda-menu-toggle.is-open .mda-toggle-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); width: 28px; }
.mda-menu-toggle.is-open .mda-toggle-line:nth-child(2) { opacity: 0; }
.mda-menu-toggle.is-open .mda-toggle-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); width: 28px; }

body.mda-menu-top-left .mda-menu-toggle { left: 2rem; right: auto; align-items: flex-start; }

/* ─── 8. BOUTON AUDIO ──────────────────────────────────────────── */
.mda-audio-control {
  position: fixed;
  top: 2rem;
  right: 9.5rem;
  z-index: 100;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mda-ivoire);
  transition: color .3s;
  mix-blend-mode: difference;
}
.mda-audio-control:hover { color: var(--mda-or); }
.mda-audio-icon { display: block; }
.mda-audio-on  { display: none; }
.mda-audio-off { display: block; }
.mda-audio-control.is-playing .mda-audio-off { display: none; }
.mda-audio-control.is-playing .mda-audio-on  { display: block; color: var(--mda-or); }
.mda-audio-on .mda-wave-1, .mda-audio-on .mda-wave-2, .mda-audio-on .mda-wave-3, .mda-audio-on .mda-wave-4 {
  animation: mda-wave 1.6s ease-in-out infinite; transform-origin: center;
}
.mda-audio-on .mda-wave-2 { animation-delay: .2s; }
.mda-audio-on .mda-wave-3 { animation-delay: .4s; }
.mda-audio-on .mda-wave-4 { animation-delay: .6s; }
@keyframes mda-wave { 0%,100% { transform: scaleY(.7); } 50% { transform: scaleY(1.3); } }

/* ─── 9. DRAWER ─────────────────────────────────────────────────── */
.mda-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  background: var(--mda-noir);
  z-index: 99;
  transform: translateX(-100%);
  transition: transform .5s var(--mda-transition);
  overflow-y: auto;
  padding: 5rem 4rem 3rem;
}
.mda-drawer.is-open { transform: translateX(0); }
.mda-drawer-inner { display: flex; flex-direction: column; min-height: 100%; gap: 3rem; }
.mda-drawer-brand { font-family: var(--mda-font-serif); font-size: 1.5rem; color: var(--mda-ivoire); line-height: 1; }
.mda-drawer-ornament { color: var(--mda-or); margin-right: .5rem; }
.mda-drawer-name-em  { color: var(--mda-or); font-style: italic; margin-left: .3em; }
.mda-drawer-nav { flex: 1; }
.mda-drawer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.mda-drawer-menu a {
  font-family: var(--mda-font-serif);
  font-size: 1.8rem;
  font-style: italic;
  color: var(--mda-ivoire);
  display: inline-block;
  position: relative;
  transition: color .3s;
}
.mda-drawer-menu a::before { content:''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--mda-or); transition: width .4s var(--mda-transition); }
.mda-drawer-menu a:hover { color: var(--mda-or); }
.mda-drawer-menu a:hover::before { width: 100%; }
.mda-drawer-footer { display: flex; flex-direction: column; gap: 1.2rem; padding-top: 2rem; border-top: 1px solid rgba(196,169,106,.15); }
.mda-drawer-mail { color: var(--mda-ivoire); font-family: var(--mda-font-body); font-size: .95rem; }
.mda-drawer-mail:hover { color: var(--mda-or); }
.mda-drawer-social { display: flex; gap: .8rem; }
.mda-drawer-social a {
  color: rgba(246,243,237,.6);
  display: inline-flex; width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(246,243,237,.15);
  border-radius: 50%;
  transition: color .3s, border-color .3s;
}
.mda-drawer-social a:hover { color: var(--mda-or); border-color: var(--mda-or); }

.mda-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(31,31,31,.7);
  backdrop-filter: blur(3px);
  z-index: 98;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--mda-transition);
}
.mda-drawer-overlay.is-visible { opacity: 1; pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════
   10. WAVE-HEADER ORIGINAL (retour au prototype)
   SVG : vague souple avec plusieurs points de contrôle,
         positionnée en bas du hero, fond noir avec image optionnelle
   ═══════════════════════════════════════════════════════════ */
.mda-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--mda-noir);
  color: var(--mda-ivoire);
}

/* SVG Wave en bas du hero — désactivée (design épuré sans vague) */
/* .mda-hero::after { ... } */
.mda-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(31,31,31,.4) 0%,
    rgba(31,31,31,.55) 50%,
    rgba(31,31,31,.85) 100%);
  z-index: 1;
}

.mda-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 6rem 2rem 10rem;
  max-width: 900px;
}
.mda-hero-label {
  display: inline-block;
  font-family: var(--mda-font-body);
  font-size: .8rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--mda-or);
  margin-bottom: 2rem;
}
.mda-hero-title {
  font-family: var(--mda-font-serif);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--mda-ivoire);
  margin: 0 0 2rem;
}
.mda-hero-title em { color: var(--mda-or); font-style: italic; }
.mda-hero-sub {
  font-family: var(--mda-font-body);
  font-size: 1.3rem;
  color: rgba(246,243,237,.85);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
  font-style: italic;
}

/* Petit trait doré qui descend sous le titre (prototype original) */
.mda-hero-line {
  position: absolute;
  left: 50%;
  bottom: 8rem;
  transform: translateX(-50%);
  width: 1px;
  height: 80px;
  z-index: 3;
  overflow: hidden;
  background: rgba(196,169,106,.2);
}
.mda-hero-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--mda-or);
  transform: scaleY(0);
  transform-origin: top;
  animation: mda-hero-line 2.8s var(--mda-transition) infinite;
}
@keyframes mda-hero-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  50%  { transform-origin: bottom; }
  95%  { transform: scaleY(0); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* SVG Wave original — forme douce et ample */
.mda-wave-svg {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 160px;
  z-index: 2;
  fill: var(--mda-ivoire);
  display: block;
}

/* ─── 11. SECTIONS ALTERNÉES (4 domaines) ───────────────────────── */
.mda-alternating {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  min-height: 60vh;
  background: var(--mda-ivoire);
}
.mda-alternating--reverse { background: var(--mda-ivoire-light); }
.mda-alternating--reverse .mda-alt-image { order: 2; }
.mda-alternating--reverse .mda-alt-text  { order: 1; }
.mda-alt-image { position: relative; width: 100%; height: 100%; min-height: 60vh; }
.mda-alt-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mda-alt-text { padding: 5rem 4rem; }

.mda-section-label {
  display: inline-block;
  font-family: var(--mda-font-body);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mda-or);
  margin-bottom: 1rem;
}

/* ─── 12. NEWSLETTER ────────────────────────────────────────────── */
.mda-newsletter {
  background: var(--mda-noir);
  color: var(--mda-ivoire);
  padding: 6rem 2rem;
  text-align: center;
}
.mda-newsletter-inner { max-width: 700px; margin: 0 auto; }
.mda-newsletter-label {
  display: inline-block;
  font-family: var(--mda-font-body);
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mda-or);
  margin-bottom: 1.5rem;
}
.mda-newsletter-title {
  font-family: var(--mda-font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--mda-ivoire);
  margin: 0 0 1rem;
}
.mda-newsletter-title em { color: var(--mda-or); font-style: italic; }
.mda-newsletter-desc { font-family: var(--mda-font-body); font-size: 1.1rem; color: rgba(246,243,237,.75); margin-bottom: 2.5rem; line-height: 1.7; }
.mda-newsletter-form { display: flex; gap: .5rem; max-width: 500px; margin: 0 auto; }
.mda-newsletter-input {
  flex: 1;
  padding: 1rem 1.2rem;
  background: transparent;
  border: 1px solid rgba(196,169,106,.4);
  color: var(--mda-ivoire);
  font-family: var(--mda-font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color .3s;
}
.mda-newsletter-input::placeholder { color: rgba(246,243,237,.4); font-style: italic; }
.mda-newsletter-input:focus { border-color: var(--mda-or); }
.mda-newsletter-btn {
  padding: 1rem 2rem;
  background: var(--mda-or);
  color: var(--mda-ivoire);
  border: none;
  font-family: var(--mda-font-body);
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s;
}
.mda-newsletter-btn:hover { background: var(--mda-or-dark); }

/* ═══════════════════════════════════════════════════════════════
   13. FORMULAIRE DE CONTACT SÉCURISÉ (Contact Form 7 stylé)
   ═══════════════════════════════════════════════════════════ */
.mda-contact-form-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 3rem 2rem;
}
.wpcf7-form { display: flex; flex-direction: column; gap: 1.5rem; }
.wpcf7-form label {
  font-family: var(--mda-font-body);
  font-size: .85rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mda-or);
  display: block;
  margin-bottom: .5rem;
}
.wpcf7-form input[type="email"],
.wpcf7-form input[type="text"],
.wpcf7-form textarea {
  width: 100%;
  padding: 1rem 1.2rem;
  background: transparent;
  border: 1px solid rgba(196,169,106,.4);
  border-radius: 0;
  color: var(--mda-noir);
  font-family: var(--mda-font-body);
  font-size: 1rem;
  transition: border-color .3s;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--mda-or);
}
.wpcf7-form textarea { min-height: 180px; resize: vertical; }
.wpcf7-form .wpcf7-submit {
  padding: 1rem 2.5rem;
  background: var(--mda-or);
  color: var(--mda-ivoire);
  border: none;
  font-family: var(--mda-font-body);
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s;
  align-self: flex-start;
}
.wpcf7-form .wpcf7-submit:hover { background: var(--mda-noir); color: var(--mda-or); }
.wpcf7-form .wpcf7-not-valid-tip { color: #c00; font-size: .85rem; }
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--mda-or);
  color: var(--mda-or);
}

/* ─── 14. MAIN CONTENT + FOOTER ─────────────────────────────────── */
.mda-main-content { position: relative; z-index: 2; min-height: 60vh; }
.mda-footer { background: var(--mda-noir); color: var(--mda-ivoire); padding: 5rem 2rem 2rem; position: relative; z-index: 2; }
.mda-footer-inner {
  max-width: var(--mda-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(196,169,106,.15);
}
.mda-footer-col h4 {
  font-family: var(--mda-font-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mda-or);
  margin: 0 0 1.5rem;
}
.mda-footer-logo { font-family: var(--mda-font-serif); font-size: 1.8rem; line-height: 1; margin-bottom: 1rem; }
.mda-footer-logo em { color: var(--mda-or); font-style: italic; }
.mda-footer-ornement { color: var(--mda-or); margin-right: .5rem; font-size: 1.4rem; }
.mda-footer-tagline { font-size: .95rem; line-height: 1.7; color: rgba(246,243,237,.6); margin: 0; }
.mda-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.mda-footer-menu a { color: rgba(246,243,237,.75); font-family: var(--mda-font-body); font-size: 1rem; transition: color .3s; }
.mda-footer-menu a:hover { color: var(--mda-or); }
.mda-footer-col p { margin: 0 0 .6rem; color: rgba(246,243,237,.75); }
.mda-footer-col a { color: rgba(246,243,237,.75); }
.mda-footer-col a:hover { color: var(--mda-or); }
.mda-footer-bottom { text-align: center; padding-top: 2rem; font-size: .75rem; letter-spacing: .15em; color: rgba(246,243,237,.4); }
.mda-footer-social { display: flex; gap: 1rem; margin-top: 1.5rem; }
.mda-footer-social a {
  color: rgba(246,243,237,.6);
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(246,243,237,.15);
  border-radius: 50%;
  transition: color .3s, border-color .3s;
}
.mda-footer-social a:hover { color: var(--mda-or); border-color: var(--mda-or); }

/* ─── 15. REVEAL ─────────────────────────────────────────────── */
.mda-reveal, [data-mda-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--mda-transition), transform 1s var(--mda-transition);
}
.mda-reveal.is-visible, [data-mda-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ─── 16. ELEMENTOR & WOOCOMMERCE ─────────────────────────────── */
.elementor-widget-heading h1, .elementor-widget-heading h2, .elementor-widget-heading h3 { font-family: var(--mda-font-serif); }
.elementor-widget-text-editor p { font-family: var(--mda-font-body); line-height: 1.8; }
.elementor-button-link.elementor-button { font-family: var(--mda-font-body); letter-spacing: .2em; text-transform: uppercase; }

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  background: var(--mda-ivoire-light);
  padding: 1.5rem;
  transition: transform .4s var(--mda-transition);
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--mda-font-serif);
  font-size: 1.3rem;
  font-style: italic;
}
.woocommerce ul.products li.product .price { color: var(--mda-or); font-family: var(--mda-font-body); }
.woocommerce a.button, .woocommerce button.button, .woocommerce .button.alt {
  background: var(--mda-or) !important;
  color: var(--mda-ivoire) !important;
  border-radius: 0 !important;
  font-family: var(--mda-font-body) !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}
.woocommerce div.product .product_title { font-family: var(--mda-font-serif); font-style: italic; }
.woocommerce div.product .price { color: var(--mda-or); }

/* ─── 17. RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .mda-alternating { grid-template-columns: 1fr; }
  .mda-alternating--reverse .mda-alt-image { order: 1; }
  .mda-alternating--reverse .mda-alt-text  { order: 2; }
  .mda-alt-image { min-height: 300px; }
  .mda-alt-text { padding: 3rem 2rem; }
  .mda-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .mda-lang-switcher { top: 1.55rem; left: 4.2rem; font-size: .65rem; gap: .6rem; }
  .mda-logo { top: 1.2rem; right: 1.2rem; }
  .mda-logo img { width: 80px; }
  .mda-menu-toggle { top: 1.2rem; left: 1.2rem; right: auto; }
  .mda-audio-control { top: 1.2rem; right: 6.5rem; }
  .mda-drawer { width: 100vw; padding: 4rem 2rem 2rem; }
  .mda-drawer-menu a { font-size: 1.5rem; }
  .mda-newsletter-form { flex-direction: column; }
  .mda-footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .mda-hero-content { padding: 4rem 1.5rem 8rem; }
}

/* ─── 18. REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mda-hero-line::before { animation: none; }
  .mda-cursor, .mda-cursor-ring { display: none !important; }
  body { cursor: auto; }
}

/* Focus visible */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--mda-or);
  outline-offset: 3px;
}

/* ─── 19. ARCHIVES, 404, SINGLE ───────────────────────────────── */
.mda-archive { padding: 6rem 2rem; }
.mda-archive-title { text-align: center; margin-bottom: 4rem; font-style: italic; }

/* Notes de Rivage — layout éditorial horizontal */
.mda-archive-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 920px;
  margin: 0 auto;
}
.mda-archive-item {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto;
  gap: 0;
  border-top: 1px solid rgba(196,169,106,0.2);
  transition: background .35s;
}
.mda-archive-item:last-child { border-bottom: 1px solid rgba(196,169,106,0.2); }
.mda-archive-item:hover { background: rgba(196,169,106,0.04); }

/* Photo à gauche */
.mda-archive-thumb {
  display: block;
  overflow: hidden;
  grid-row: 1 / 4;
}
.mda-archive-thumb img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  object-position: center;
  filter: sepia(12%) contrast(1.04);
  transition: filter .5s, transform .6s;
}
.mda-archive-item:hover .mda-archive-thumb img {
  filter: sepia(0%) contrast(1.06);
  transform: scale(1.03);
}

/* Contenu texte à droite */
.mda-archive-item h2 {
  font-size: 1.3rem;
  padding: 1.8rem 2rem .4rem;
  margin: 0;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}
.mda-archive-item h2 a { color: var(--mda-dark); text-decoration: none; transition: color .3s; }
.mda-archive-item h2 a:hover { color: var(--mda-or); }

.mda-single-meta { padding: 0 2rem .6rem !important; }
.mda-archive-excerpt { padding: .2rem 2rem .8rem; color: var(--mda-gris-pierre); font-size: .95rem; line-height: 1.65; }
.mda-link {
  display: inline-block;
  padding: 0 2rem 1.8rem;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mda-or);
  text-decoration: none;
  transition: color .3s;
}
.mda-link:hover { color: var(--mda-or-dark); }

/* Sans photo — fallback */
.mda-archive-item:not(:has(.mda-archive-thumb)) h2 { padding-top: 1.8rem; }

/* Mobile */
@media (max-width: 640px) {
  .mda-archive-item {
    grid-template-columns: 1fr;
  }
  .mda-archive-thumb { grid-row: auto; }
  .mda-archive-thumb img { min-height: 200px; height: 200px; }
  .mda-archive-item h2 { padding: 1.2rem 1.2rem .3rem; font-size: 1.15rem; }
  .mda-archive-excerpt { padding: .2rem 1.2rem .6rem; }
  .mda-link { padding: 0 1.2rem 1.4rem; }
}

.mda-single-note { padding-top: 4rem; padding-bottom: 4rem; }
.mda-single-header { max-width: 800px; margin: 0 auto 3rem; text-align: center; padding: 0 2rem; }
.mda-single-header h1 { font-style: italic; }
.mda-single-meta { font-family: var(--mda-font-body); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mda-ardoise); }
.mda-single-thumbnail {
  display: block;
  width: 100%;
  /* Pas de height ici — la figure se dimensionne à l'image.
     Plus de risque d'effondrement à 0 avec un enfant absolu. */
  overflow: hidden;
  margin: 0 0 4rem;
  background: var(--mda-noir);
  /* Supprime l'espace baseline sous l'img (gap inline par défaut) */
  line-height: 0;
  font-size: 0;
}
.mda-single-thumbnail img {
  display: block;
  width: 100%;
  /* La hauteur est appliquée directement sur l'img via style inline (PHP).
     Valeur de secours CSS si le style inline est absent. */
  height: 60vh;
  /* object-fit/position surchargés en inline via ACF */
  object-fit: cover;
  object-position: center;
  /* Empêche height:auto d'être réappliqué par un reset externe */
  max-height: none;
  vertical-align: bottom;
}
.mda-single-content { max-width: 720px; margin: 0 auto; padding: 0 2rem; font-family: var(--mda-font-body); font-size: 1.15rem; line-height: 1.9; }
.mda-single-content p { margin-bottom: 1.5rem; }
.mda-single-content blockquote { border-left: 2px solid var(--mda-or); padding-left: 2rem; margin: 2rem 0; font-style: italic; color: var(--mda-ardoise); }

.mda-404 { padding: 8rem 2rem; text-align: center; }
.mda-404 h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; }
.mda-btn-outline { display: inline-block; padding: .9rem 2rem; border: 1px solid var(--mda-or); color: var(--mda-or); font-family: var(--mda-font-body); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; transition: all .3s; }
.mda-btn-outline:hover { background: var(--mda-or); color: var(--mda-ivoire); }

/* ═══════════════════════════════════════════════════════════════
   FORMULAIRES — Newsletter, Contact, Notes list
   ═══════════════════════════════════════════════════════════════ */

/* Newsletter */
.mda-newsletter-wrap { background: var(--mda-noir); }
.mda-newsletter {
  background: var(--mda-noir);
  padding: 5rem 2rem;
  text-align: center;
}
.mda-newsletter-inner {
  max-width: 620px;
  margin: 0 auto;
}
.mda-newsletter-label {
  display: inline-block;
  font-family: var(--mda-font-body);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mda-or);
  margin-bottom: 1.5rem;
}
.mda-newsletter-title {
  font-family: var(--mda-font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  color: var(--mda-ivoire);
  line-height: 1.1;
  margin: 0 0 1.5rem;
}
.mda-newsletter-title em { color: var(--mda-or); font-style: italic; }
.mda-newsletter-desc {
  font-family: var(--mda-font-body);
  font-size: 1.1rem;
  color: rgba(246,243,237,.75);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.mda-newsletter-form {
  display: flex;
  gap: .5rem;
  max-width: 500px;
  margin: 0 auto;
}
.mda-newsletter-input {
  flex: 1;
  padding: 1rem 1.2rem;
  background: transparent;
  border: 1px solid rgba(196,169,106,.4);
  color: var(--mda-ivoire);
  font-family: var(--mda-font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color .3s;
}
.mda-newsletter-input::placeholder {
  color: rgba(246,243,237,.4);
  font-style: italic;
}
.mda-newsletter-input:focus { border-color: var(--mda-or); }
.mda-newsletter-btn {
  padding: 1rem 2rem;
  background: var(--mda-or);
  color: var(--mda-ivoire);
  border: none;
  font-family: var(--mda-font-body);
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s;
}
.mda-newsletter-btn:hover { background: var(--mda-noir-soft); color: var(--mda-or); border: 1px solid var(--mda-or); }
@media (max-width: 600px) {
  .mda-newsletter-form { flex-direction: column; }
}

/* Contact form (custom) */
.mda-contact-form-wrap,
.mda-contact-form {
  max-width: 640px;
  margin: 0 auto;
}
.mda-form-field {
  margin-bottom: 1.5rem;
  text-align: left;
}
.mda-form-field label {
  display: block;
  font-family: var(--mda-font-body);
  font-size: .85rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mda-gris-pierre);
  margin-bottom: .5rem;
  font-weight: 500;
}
.mda-form-field input[type="email"],
.mda-form-field input[type="text"],
.mda-form-field textarea,
.mda-input {
  width: 100%;
  padding: 1rem 1.2rem;
  background: transparent;
  border: 1px solid var(--mda-ardoise);
  color: var(--mda-noir);
  font-family: var(--mda-font-body);
  font-size: 1.05rem;
  outline: none;
  transition: border-color .3s;
  border-radius: 0;
}
.mda-form-field input:focus,
.mda-form-field textarea:focus,
.mda-input:focus { border-color: var(--mda-or); }
.mda-form-submit,
input.mda-form-submit,
.wpcf7-submit {
  padding: 1rem 2.5rem;
  background: var(--mda-or);
  color: var(--mda-ivoire);
  border: none;
  font-family: var(--mda-font-body);
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s;
  border-radius: 0;
}
.mda-form-submit:hover,
input.mda-form-submit:hover,
.wpcf7-submit:hover { background: var(--mda-noir); }

.mda-form-success {
  padding: 1rem 1.2rem;
  background: rgba(196,169,106,.1);
  border-left: 3px solid var(--mda-or);
  color: var(--mda-noir);
  margin-top: 1.5rem;
  font-family: var(--mda-font-body);
}
.mda-form-error {
  padding: 1rem 1.2rem;
  background: rgba(200,50,50,.08);
  border-left: 3px solid #c23;
  color: var(--mda-noir);
  margin-top: 1.5rem;
  font-family: var(--mda-font-body);
}

/* CF7 styles — harmoniser */
.wpcf7-not-valid-tip {
  color: #c23;
  font-family: var(--mda-font-body);
  font-size: .9rem;
  margin-top: .3rem;
}
.wpcf7-response-output {
  border: 1px solid var(--mda-or) !important;
  padding: 1rem 1.2rem !important;
  font-family: var(--mda-font-body);
  margin-top: 1.5rem !important;
}

/* Notes grid (archive) */
.mda-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2.5rem;
  max-width: var(--mda-container);
  margin: 0 auto;
}
.mda-note-card {
  background: var(--mda-ivoire);
  transition: transform .4s var(--mda-transition);
}
.mda-note-card:hover { transform: translateY(-4px); }
.mda-note-thumb { display: block; }
.mda-note-thumb img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.mda-note-body { padding: 1.5rem; }
.mda-note-date {
  font-family: var(--mda-font-body);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mda-or);
  margin-bottom: .8rem;
}
.mda-note-title {
  font-family: var(--mda-font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 .8rem;
  line-height: 1.3;
}
.mda-note-title a { color: var(--mda-noir); }
.mda-note-title a:hover { color: var(--mda-or); }
.mda-note-excerpt {
  font-family: var(--mda-font-body);
  color: var(--mda-gris-pierre);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}
.mda-note-link {
  font-family: var(--mda-font-body);
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mda-or);
}

/* ─── ARCHIVE NOTES DE RIVAGE — compléments ──────────────────── */
.mda-archive-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 4rem;
}
.mda-archive-intro {
  font-size: .95rem;
  color: var(--mda-gris-pierre);
  line-height: 1.75;
  font-style: italic;
  margin-top: 1rem;
}
.mda-archive-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mda-archive-thumb--empty {
  background: var(--mda-ivoire-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mda-archive-thumb-placeholder {
  font-size: 2rem;
  color: var(--mda-ardoise);
  opacity: .4;
}
.mda-archive-pagination {
  margin-top: 4rem;
  text-align: center;
}
.mda-archive-pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.mda-archive-pagination a,
.mda-archive-pagination .page-numbers {
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--mda-or);
  text-decoration: none;
  padding: .3rem .8rem;
  border: 1px solid rgba(196,169,106,.3);
  transition: background .3s, color .3s;
}
.mda-archive-pagination a:hover {
  background: var(--mda-or);
  color: var(--mda-dark);
}
.mda-archive-pagination .current {
  background: var(--mda-or);
  color: var(--mda-dark);
  border-color: var(--mda-or);
}

/* ═══════════════════════════════════════════════════════════════
   FRAGMENTS DE BRETAGNE — section d'accueil
   ═══════════════════════════════════════════════════════════ */
.mda-fragments-section {
  background: var(--mda-noir);
  padding: 6rem 2rem;
  text-align: center;
  position: relative;
}
/* Trait doré décoratif centré au-dessus du titre */
.mda-fragments-section::before {
  content: '';
  display: block;
  width: 1px;
  height: 60px;
  background: var(--mda-or);
  margin: 0 auto 3rem;
  opacity: .5;
}

/* ── Hamburger open state ── */

/* ═══════════════════════════════════════════════════════════════
   LOGO — mobile override explicite (clamp suffit mais
   on garde le fallback media-query pour anciens navigateurs)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mda-logo img { width: 68px; }
  .mda-menu-toggle { top: 1.2rem; left: 1.2rem; width: 38px; height: 38px; }
  .mda-logo { top: 1.2rem; right: 1.2rem; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .mda-logo img { width: 88px; }
}

/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO / TABLEAU — sections Elementor réutilisables
   Classes CSS pour les templates elementor-portfolio-*.json
   ═══════════════════════════════════════════════════════════ */

/* ── Grille portfolio 3 colonnes ── */
.mda-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--mda-noir);
}
@media (max-width: 900px) { .mda-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .mda-portfolio-grid { grid-template-columns: 1fr; } }

.mda-portfolio-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--mda-noir);
  cursor: pointer;
}
.mda-portfolio-card img,
.mda-portfolio-card .elementor-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94), filter .6s;
  filter: brightness(.85) saturate(.9);
}
.mda-portfolio-card:hover img,
.mda-portfolio-card:hover .elementor-image img {
  transform: scale(1.04);
  filter: brightness(.7) saturate(.8);
}

/* Overlay texte sur la carte */
.mda-portfolio-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 1.8rem;
  background: linear-gradient(to top, rgba(31,31,31,.85) 0%, transparent 55%);
  transition: background .4s;
}
.mda-portfolio-card:hover .mda-portfolio-overlay {
  background: linear-gradient(to top, rgba(31,31,31,.92) 0%, rgba(31,31,31,.25) 100%);
}
.mda-portfolio-label {
  font-family: var(--mda-font-body);
  font-size: .7rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--mda-or);
  margin-bottom: .6rem;
}
.mda-portfolio-title {
  font-family: var(--mda-font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--mda-ivoire);
  line-height: 1.2;
  margin: 0 0 .8rem;
}
.mda-portfolio-title em { color: var(--mda-or); font-style: italic; }
.mda-portfolio-link {
  font-family: var(--mda-font-body);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mda-or);
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s .1s, transform .3s .1s;
}
.mda-portfolio-card:hover .mda-portfolio-link {
  opacity: 1;
  transform: translateY(0);
}

/* ── Tableau éditorial (liste avec grand numéro) ── */
.mda-tableau {
  background: var(--mda-ivoire);
  padding: 6rem 2rem;
}
.mda-tableau-inner { max-width: var(--mda-container); margin: 0 auto; }
.mda-tableau-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: start;
  gap: 2rem 3rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(31,31,31,.08);
  transition: background .3s;
}
.mda-tableau-row:first-child { border-top: 1px solid rgba(31,31,31,.08); }
.mda-tableau-row:hover { background: rgba(196,169,106,.05); padding-left: 1rem; }
@media (max-width: 640px) {
  .mda-tableau-row { grid-template-columns: 48px 1fr; }
  .mda-tableau-cta { grid-column: 1/-1; }
}

.mda-tableau-num {
  font-family: var(--mda-font-serif);
  font-size: 3rem;
  font-weight: 400;
  color: var(--mda-or);
  opacity: .4;
  line-height: 1;
}
.mda-tableau-body {}
.mda-tableau-title {
  font-family: var(--mda-font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--mda-noir);
  margin: 0 0 .5rem;
}
.mda-tableau-desc {
  font-family: var(--mda-font-body);
  font-size: .95rem;
  color: rgba(31,31,31,.6);
  line-height: 1.7;
  margin: 0;
}
.mda-tableau-cta a {
  display: inline-block;
  font-family: var(--mda-font-body);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mda-or);
  text-decoration: none;
  border-bottom: 1px solid rgba(196,169,106,.4);
  padding-bottom: 2px;
  transition: border-color .3s, color .3s;
  white-space: nowrap;
}
.mda-tableau-cta a:hover { color: var(--mda-noir); border-color: var(--mda-noir); }

/* ── Mosaïque portrait (2 grandes + petites) ── */
.mda-mosaic {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 3px;
  background: var(--mda-noir);
}
@media (max-width: 640px) { .mda-mosaic { grid-template-columns: 1fr; } }
.mda-mosaic-main { grid-row: span 2; }
.mda-mosaic-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.mda-mosaic-main { aspect-ratio: unset; }
.mda-mosaic-item img,
.mda-mosaic-main img,
.mda-mosaic-item .elementor-image img,
.mda-mosaic-main .elementor-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94);
}
.mda-mosaic-item:hover img,
.mda-mosaic-main:hover img,
.mda-mosaic-item:hover .elementor-image img,
.mda-mosaic-main:hover .elementor-image img { transform: scale(1.03); }

/* ═══════════════════════════════════════════════════════════════════
   PAGE CIRCUIT COMPLET — Mise en page commissaire d'exposition
   Chaque section a un rôle éditorial précis, comme les salles
   d'une exposition. Le visiteur progresse, il ne défile pas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. HERO CIRCUIT — Pleine hauteur, image, titre, méta ────────── */
.mda-circuit-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--mda-noir);
}
.mda-circuit-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 8s ease-out;
}
/* Léger dézoom au chargement — effet de révélation */
.mda-circuit-hero.is-loaded .mda-circuit-hero-bg { transform: scale(1); }

.mda-circuit-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(31,31,31,.92) 0%,
    rgba(31,31,31,.4) 45%,
    rgba(31,31,31,.15) 100%
  );
  z-index: 1;
}
.mda-circuit-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 6rem 4rem 5rem;
  max-width: 860px;
}
/* Trait vertical doré — ponctuation visuelle */
.mda-circuit-hero-content::before {
  content: '';
  display: block;
  width: 1px;
  height: 60px;
  background: var(--mda-or);
  margin-bottom: 2.5rem;
  opacity: .7;
}
.mda-circuit-territoire {
  font-family: var(--mda-font-body);
  font-size: .72rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--mda-or);
  margin-bottom: 1.2rem;
  display: block;
}
.mda-circuit-hero-title {
  font-family: var(--mda-font-serif);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--mda-ivoire);
  margin: 0 0 2rem;
}
.mda-circuit-hero-title em { color: var(--mda-or); font-style: italic; }

/* Méta inline : durée / groupe / tarif */
.mda-circuit-meta-hero {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.mda-circuit-meta-item {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.mda-circuit-meta-label {
  font-family: var(--mda-font-body);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(246,243,237,.5);
}
.mda-circuit-meta-value {
  font-family: var(--mda-font-serif);
  font-size: 1.2rem;
  color: var(--mda-ivoire);
}

@media (max-width: 768px) {
  .mda-circuit-hero-content { padding: 4rem 1.5rem 3.5rem; }
  .mda-circuit-meta-hero { gap: 1.5rem; }
}

/* ── 2. INTRODUCTION NARRATIVE ────────────────────────────────────── */
.mda-circuit-intro {
  background: var(--mda-ivoire);
  padding: 8rem 2rem;
}
.mda-circuit-intro-inner {
  max-width: 720px;
  margin: 0 auto;
}
.mda-circuit-intro-chapeau {
  font-family: var(--mda-font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--mda-noir);
  margin: 0 0 2.5rem;
  /* Pas d'italique ici — le chapeau affirme, il n'excuse pas */
}
.mda-circuit-intro-chapeau em { color: var(--mda-or); font-style: italic; }

.mda-circuit-intro-body {
  font-family: var(--mda-font-body);
  font-size: 1.15rem;
  line-height: 1.95;
  color: rgba(31,31,31,.78);
  margin: 0;
}
.mda-circuit-intro-body p { margin: 0 0 1.6em; }
.mda-circuit-intro-body p:last-child { margin-bottom: 0; }

/* Ornement or entre chapeau et corps */
.mda-circuit-ornement {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--mda-or);
  margin: 2.5rem 0;
  opacity: .6;
}

/* ── 3. INTERLUDE VISUEL ──────────────────────────────────────────── */
/* Image pleine largeur + citation flottante superposée */
.mda-circuit-interlude {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 420px;
  overflow: hidden;
  background: var(--mda-noir);
}
.mda-circuit-interlude-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
  transition: transform 10s ease-out;
}
.mda-circuit-interlude:hover .mda-circuit-interlude-img { transform: scale(1.02); }
.mda-circuit-interlude-quote {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 420px;
  padding: 3rem;
  background: rgba(31,31,31,.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mda-circuit-interlude-quote blockquote {
  font-family: var(--mda-font-serif);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--mda-ivoire);
  line-height: 1.6;
  margin: 0 0 1rem;
  border: none;
  padding: 0;
}
.mda-circuit-interlude-quote blockquote::before {
  content: '«\00a0';
  color: var(--mda-or);
}
.mda-circuit-interlude-quote blockquote::after {
  content: '\00a0»';
  color: var(--mda-or);
}
.mda-circuit-interlude-source {
  font-family: var(--mda-font-body);
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mda-ardoise);
}
@media (max-width: 640px) {
  .mda-circuit-interlude { height: 55vh; }
  .mda-circuit-interlude-quote {
    position: relative;
    max-width: 100%;
    bottom: auto; right: auto;
  }
}

/* ── 4. ACTES DU CIRCUIT ─────────────────────────────────────────── */
/* Les étapes comme les salles d'une exposition — numérotées, nommées */
.mda-circuit-actes {
  background: var(--mda-noir);
  padding: 8rem 2rem;
}
.mda-circuit-actes-inner {
  max-width: var(--mda-container);
  margin: 0 auto;
}
.mda-circuit-actes-header {
  max-width: 560px;
  margin: 0 auto 5rem;
  text-align: center;
}
.mda-circuit-actes-header .mda-section-label { color: var(--mda-or); }
.mda-circuit-actes-header h2 {
  font-family: var(--mda-font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--mda-ivoire);
  margin: 1rem 0 0;
}
.mda-circuit-actes-header h2 em { color: var(--mda-or); font-style: italic; }

.mda-circuit-actes-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(196,169,106,.12);
}
@media (max-width: 900px) { .mda-circuit-actes-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .mda-circuit-actes-list { grid-template-columns: 1fr; } }

.mda-circuit-acte {
  background: var(--mda-noir);
  padding: 3rem 2.5rem;
  position: relative;
  transition: background .4s;
}
.mda-circuit-acte:hover { background: rgba(196,169,106,.06); }
.mda-circuit-acte-num {
  font-family: var(--mda-font-serif);
  font-size: 4rem;
  font-weight: 400;
  color: var(--mda-or);
  opacity: .2;
  line-height: 1;
  margin-bottom: 1.5rem;
  display: block;
}
.mda-circuit-acte-lieu {
  font-family: var(--mda-font-body);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mda-or);
  margin-bottom: .8rem;
  display: block;
}
.mda-circuit-acte-title {
  font-family: var(--mda-font-serif);
  font-size: 1.35rem;
  color: var(--mda-ivoire);
  margin: 0 0 1rem;
  line-height: 1.3;
}
.mda-circuit-acte-desc {
  font-family: var(--mda-font-body);
  font-size: .95rem;
  color: rgba(246,243,237,.55);
  line-height: 1.75;
  margin: 0;
}

/* ── 5. PORTRAIT D'UNE FIGURE ────────────────────────────────────── */
/* Focus sur un artiste ou personnage — 2 colonnes image + texte */
.mda-circuit-portrait {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
  background: var(--mda-ivoire);
}
@media (max-width: 768px) {
  .mda-circuit-portrait { grid-template-columns: 1fr; }
  .mda-circuit-portrait-img { min-height: 50vh; order: -1; }
}
.mda-circuit-portrait-img {
  position: relative;
  overflow: hidden;
  background: var(--mda-ardoise);
}
.mda-circuit-portrait-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%) contrast(1.05);
  transition: filter .6s, transform .8s;
}
.mda-circuit-portrait:hover .mda-circuit-portrait-img img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.02);
}
.mda-circuit-portrait-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 5rem;
}
@media (max-width: 1024px) { .mda-circuit-portrait-text { padding: 4rem 3rem; } }
@media (max-width: 768px)  { .mda-circuit-portrait-text { padding: 3rem 2rem; } }

.mda-circuit-portrait-label {
  font-family: var(--mda-font-body);
  font-size: .7rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--mda-or);
  margin-bottom: 1.5rem;
  display: block;
}
.mda-circuit-portrait-name {
  font-family: var(--mda-font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 400;
  color: var(--mda-noir);
  line-height: 1.1;
  margin: 0 0 .4rem;
}
.mda-circuit-portrait-dates {
  font-family: var(--mda-font-body);
  font-size: .85rem;
  color: var(--mda-ardoise);
  letter-spacing: .1em;
  margin-bottom: 2rem;
  display: block;
}
.mda-circuit-portrait-body {
  font-family: var(--mda-font-body);
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(31,31,31,.72);
}
.mda-circuit-portrait-body p { margin: 0 0 1.4em; }
.mda-circuit-portrait-body p:last-child { margin-bottom: 0; }

/* ── 6. DEUXIÈME INTERLUDE — Texte flottant sur fond sombre ──────── */
.mda-circuit-interlude-text {
  background: var(--mda-noir);
  padding: 8rem 2rem;
  text-align: center;
}
.mda-circuit-interlude-text-inner {
  max-width: 680px;
  margin: 0 auto;
}
.mda-circuit-interlude-text p {
  font-family: var(--mda-font-serif);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 400;
  font-style: italic;
  color: var(--mda-ivoire);
  line-height: 1.6;
  margin: 0;
}
.mda-circuit-interlude-text em { color: var(--mda-or); }
.mda-circuit-interlude-text .mda-circuit-interlude-source {
  display: block;
  margin-top: 2rem;
  font-family: var(--mda-font-body);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mda-ardoise);
  font-style: normal;
}

/* ── 7. FICHE PRATIQUE ───────────────────────────────────────────── */
/* Table d'exposition : données lisibles, élégantes, sans tableau HTML */
.mda-circuit-fiche {
  background: var(--mda-ivoire);
  padding: 8rem 2rem;
}
.mda-circuit-fiche-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem 6rem;
  align-items: start;
}
@media (max-width: 768px) {
  .mda-circuit-fiche-inner { grid-template-columns: 1fr; gap: 3rem; }
}

.mda-circuit-fiche-col-title {
  grid-column: 1 / -1;
}
.mda-circuit-fiche-col-title .mda-section-label { margin-bottom: 1.5rem; }
.mda-circuit-fiche-col-title h2 {
  font-family: var(--mda-font-serif);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--mda-noir);
  margin: 0;
}

.mda-circuit-fiche-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mda-circuit-fiche-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(31,31,31,.08);
}
.mda-circuit-fiche-item:first-child { border-top: 1px solid rgba(31,31,31,.08); }
.mda-circuit-fiche-key {
  font-family: var(--mda-font-body);
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mda-ardoise);
  padding-top: .15rem;
}
.mda-circuit-fiche-val {
  font-family: var(--mda-font-body);
  font-size: 1.05rem;
  color: var(--mda-noir);
  line-height: 1.5;
}
.mda-circuit-fiche-val strong { font-weight: 500; color: var(--mda-noir); }

/* Note tarifaire */
.mda-circuit-fiche-note {
  font-family: var(--mda-font-body);
  font-size: .9rem;
  color: rgba(31,31,31,.5);
  font-style: italic;
  line-height: 1.7;
  padding-top: 1.5rem;
}

/* ── 8. CTA FINAL ────────────────────────────────────────────────── */
.mda-circuit-cta {
  background: var(--mda-noir);
  padding: 9rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Fond discret — cercle or en filigrane */
.mda-circuit-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border: 1px solid rgba(196,169,106,.08);
  border-radius: 50%;
  pointer-events: none;
}
.mda-circuit-cta::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  border: 1px solid rgba(196,169,106,.05);
  border-radius: 50%;
  pointer-events: none;
}
.mda-circuit-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.mda-circuit-cta-label {
  display: block;
  font-family: var(--mda-font-body);
  font-size: .72rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--mda-or);
  margin-bottom: 2rem;
}
.mda-circuit-cta-title {
  font-family: var(--mda-font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  color: var(--mda-ivoire);
  line-height: 1.2;
  margin: 0 0 1.5rem;
}
.mda-circuit-cta-title em { color: var(--mda-or); font-style: italic; }
.mda-circuit-cta-desc {
  font-family: var(--mda-font-body);
  font-size: 1.05rem;
  color: rgba(246,243,237,.6);
  line-height: 1.8;
  margin: 0 0 3rem;
  font-style: italic;
}
.mda-circuit-cta-btn {
  display: inline-block;
  font-family: var(--mda-font-body);
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mda-ivoire);
  text-decoration: none;
  border: 1px solid rgba(196,169,106,.5);
  padding: 1.2rem 3rem;
  transition: background .35s, border-color .35s, color .35s;
}
.mda-circuit-cta-btn:hover {
  background: var(--mda-or);
  border-color: var(--mda-or);
  color: var(--mda-noir);
}

/* ═══════════════════════════════════════════════════════════════
   NOTE DE RIVAGE — MODE HEADER
   Activé via ACF → "Mode header" (true_false)
   L'image à la une devient un hero pleine largeur avec le titre
   et la date superposés, comme les pages circuit.
   ═══════════════════════════════════════════════════════════ */

/* Article en mode header : on retire le padding-top standard
   pour que l'image colle en haut de page directement sous la nav */
.mda-single-note--header-mode {
  padding-top: 0;
}

/* Conteneur hero : pleine largeur, hauteur configurable (défaut 85vh) */
.mda-note-header {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 480px;
  overflow: hidden;
  background: var(--mda-noir);
  display: flex;
  align-items: flex-end;
}

/* Image en fond du header — couvre tout */
.mda-note-header-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Légère désaturation pour que le texte reste lisible */
  filter: brightness(.75) saturate(.9);
  transition: transform 8s ease-out;
}
.mda-note-header:hover .mda-note-header-img {
  transform: scale(1.02);
}

/* Dégradé bas vers haut — ancre le texte sur l'image */
.mda-note-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(31,31,31,.90) 0%,
    rgba(31,31,31,.35) 50%,
    rgba(31,31,31,.10) 100%
  );
  z-index: 1;
}

/* Contenu textuel superposé en bas à gauche */
.mda-note-header-content {
  position: relative;
  z-index: 2;
  padding: 4rem;
  max-width: 780px;
  width: 100%;
}
@media (max-width: 768px) {
  .mda-note-header { height: 65vh; }
  .mda-note-header-content { padding: 2.5rem 1.5rem; }
}

/* Label "Note de rivage" */
.mda-note-header-label {
  display: block;
  font-family: var(--mda-font-body);
  font-size: .7rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--mda-or);
  margin-bottom: 1rem;
}

/* Titre principal */
.mda-note-header-title {
  font-family: var(--mda-font-serif);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  color: var(--mda-ivoire);
  line-height: 1.1;
  margin: 0 0 1.2rem;
}
.mda-note-header-title em { color: var(--mda-or); font-style: italic; }

/* Date */
.mda-note-header-date {
  font-family: var(--mda-font-body);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246,243,237,.5);
}

/* Corps du texte en mode header — on lui rend un peu d'air */
.mda-single-note--header-mode .mda-single-content {
  padding-top: 5rem;
  padding-bottom: 5rem;
}