/* ============================================================
   MDT Override — Maison de Tara
   Surcharge Wandau avec charte MDT (tokens + fonts + base)
   Chargé APRES style.css pour gagner en specificity
   ============================================================ */

/* --- Alias charte : tout le fichier passe par var(--mdt-*), on remappe ici
   les variables historiques (Wandau) vers les tokens charte de css/tokens.css.
   terracotta / olive-deep / polices ne sont PLUS redéfinis ici : tokens.css est
   la source unique (chargé avant ce fichier). --- */
:root {
  /* Base — beige charte */
  --mdt-sable:      var(--mdt-beige);
  --mdt-sable-warm: #E8DCC4;   /* nuances beige conservées (dérivés neutres) */
  --mdt-sable-deep: #DCC9A5;
  --mdt-greige:     #B5A998;

  /* Primary — terracotta charte (#79301E via tokens.css) */
  --mdt-terra-dark: #5E2417;   /* hover : terracotta charte assombrie */

  /* Accent — vert charte */
  --mdt-sauge:      var(--mdt-olive-deep);  /* aplats / fonds verts foncés */
  --mdt-sauge-light:var(--mdt-olive);       /* vert de marque clair */

  /* Highlight — encre charte */
  --mdt-noir:       var(--mdt-ink);
  --mdt-noir-soft:  var(--mdt-ink);
  --mdt-laiton:     #B8924D;  /* doré v1 exact (laiton) — récupéré de l'historique, demandé par le client */
  /* Réglables en direct via le laboratoire de couleurs (?lab sur l'accueil) */
  --mdt-hero-bg:    var(--mdt-sauge);      /* fond du hero */
  --mdt-footer-bg:  var(--mdt-hero-bg);    /* footer = même vert que le hero */
  --mdt-newsletter-bg: var(--mdt-sable);   /* bande « La lettre de la maison » = crème comme le reste du site */

  /* Sémantique (--mdt-text-soft et --mdt-line déplacés dans tokens.css = source unique) */
  --mdt-text:       var(--mdt-ink);

  /* Espacements */
  --mdt-section-pad: clamp(64px, 8vw, 120px);
  --mdt-container: 1280px;
}

/* --- Body & typography overrides --- */
body {
  font-family: var(--mdt-font-body) !important;
  background: var(--mdt-sable) !important;
  color: var(--mdt-text) !important;
  font-weight: 400;
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.section-title h2,
.section-title h3 {
  font-family: var(--mdt-font-display) !important;
  font-weight: 400 !important;
  color: var(--mdt-noir) !important;
  letter-spacing: -0.01em;
  /* Dézoom modéré (12/06) : titres de section ~30 % plus petits que le
     92px Wandau, pour qu'une section tienne mieux à l'écran. */
  font-size: clamp(32px, 4.6vw, 64px) !important;
  line-height: 1.1 !important;
}

h1 { font-weight: 300 !important; }

.section-title h6,
.eyebrow,
.custom-menu a,
.site-menu a,
.navbar-button a {
  font-family: var(--mdt-font-body) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

/* --- Italics éditoriaux (mots-clés émotionnels) --- */
.mdt-italic,
em.mdt {
  font-family: var(--mdt-font-display);
  font-style: italic;
  color: var(--mdt-laiton);
}

/* --- Signature manuscrite --- */
.mdt-signature {
  font-family: var(--mdt-font-script);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--mdt-terracotta);
  font-weight: 400;
}

/* --- Buttons / CTA --- */
.custom-button,
.navbar-button a,
a.custom-button {
  background: var(--mdt-terracotta) !important;
  color: var(--mdt-sable) !important;
  border: none !important;
  padding: 18px 36px !important;
  font-family: var(--mdt-font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  transition: background 300ms cubic-bezier(.4,0,.2,1) !important;
  border-radius: 0 !important;
  /* Centrage texte horizontal + vertical (override des height 70px / line-height 70px Wandau qui cassent le centrage avec multi-lignes) */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 52px;
  text-indent: 0 !important;
}

.custom-button:hover,
.navbar-button a:hover {
  background: var(--mdt-terra-dark) !important;
  color: var(--mdt-sable) !important;
  line-height: 1.2 !important;
  text-indent: 0 !important;
}

/* --- Navbar Wandau native : logo MDT --- */
.navbar .logo img {
  height: 56px;
  width: auto;
}

/* --- Backgrounds : neutraliser les jaunes/verts Wandau au profit du sable --- */
[data-background="#fffbf7"],
[data-background="#fff8e9"] {
  background: var(--mdt-sable) !important;
}
[data-background="#94ffc4"],
[data-background="#feed01"] {
  background: var(--mdt-sauge) !important;
  color: var(--mdt-sable) !important;
}
[data-background="#94ffc4"] *,
[data-background="#feed01"] * {
  color: var(--mdt-sable) !important;
}

/* --- Hero slider : copy color sauge sur sable / sable sur sauge --- */
.slider-texts h1 {
  color: var(--mdt-noir) !important;
  font-family: var(--mdt-font-display) !important;
  font-weight: 300 !important;
  font-style: italic;
}
.slider-texts p {
  font-family: var(--mdt-font-body) !important;
  color: var(--mdt-text-soft) !important;
  font-weight: 400;
}

/* --- SVG morph blob du hero : passer au sauge --- */
.svg-morph path {
  fill: var(--mdt-sauge) !important;
  opacity: 0.92;
}

/* --- Custom menu (langues) : sable warm --- */
.navbar .custom-menu a {
  color: var(--mdt-text-soft) !important;
}
.navbar .site-menu a {
  color: var(--mdt-noir) !important;
}
.navbar .site-menu a:hover {
  color: var(--mdt-terracotta) !important;
}

/* --- Hamburger + search --- */
.navbar .hamburger path { stroke: var(--mdt-noir) !important; }
.navbar .search-button { color: var(--mdt-noir) !important; }

/* --- Preloader & page-transition : passer en sable --- */
.preloader svg path,
.page-transition svg path {
  fill: var(--mdt-sable) !important;
}
.preloader small {
  color: var(--mdt-sauge) !important;
  font-family: var(--mdt-font-body) !important;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  font-weight: 500;
}

/* Logo MDT dans preloader (PNG transparent — pas de mix-blend nécessaire) */
.preloader .inner .mdt-preloader-logo {
  width: 200px !important;
  height: 200px !important;
}
.preloader .inner .mdt-preloader-logo img {
  height: 176px !important;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* --- Sections backgrounds neutres --- */
.content-section { background: var(--mdt-sable); }
.content-section.bottom-white { background: var(--mdt-sable) !important; }

/* Espacement vertical des sections réduit de 50% (120→60px desktop, 80→40px mobile).
   Resserre le passage d'une section à l'autre. Les classes no-spacing /
   no-bottom-spacing Wandau gardent la priorité (padding 0 inchangé). */
.content-section { padding: 60px 0; }
@media (max-width: 767px) {
  .content-section { padding: 40px 0; }
}

/* --- Section-title shape : on neutralise le shape Wandau (souvent un blob jaune) --- */
.section-title figure img[src*="title-shape"] {
  filter: hue-rotate(-30deg) saturate(0.4) brightness(0.95);
  opacity: 0.6;
}

/* Capsule MDT à la place du title-shape Wandau (pas de filtre nécessaire) */
.section-title figure.mdt-title-shape img {
  filter: none !important;
  opacity: 1 !important;
  width: auto;
  height: 56px;
  margin: 0 auto;
}

/* Espace titre de section ↔ contenu réduit (retour Pastel #34 : 100px Wandau trop grand) */
.section-title { margin-bottom: 32px; }

/* Sous-titre éditorial sous le H2 de section */
.section-title .mdt-section-sub {
  font-family: var(--mdt-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--mdt-text-soft);
  max-width: 560px;
  margin: 18px auto 0;
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* Mini icône MDT — pill Wandau réduite (100→64) pour col-lg-3 plus étroite,
   fond sauge, icône laiton plus petite */
.image-icon-box .icon.mdt-step-icon {
  width: 64px !important;
  height: 64px !important;
  background: var(--mdt-sauge) !important;
  color: var(--mdt-laiton);
  left: 20px !important;
  top: 20px !important;
}
.image-icon-box .icon.mdt-step-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

/* Photos étapes : forcer aspect-ratio portrait pour prendre plus de hauteur
   (compense la perte de largeur due au passage 3→4 colonnes) */
.image-icon-box .content-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.image-icon-box .content-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Content-box (carte texte en bas) : blanc → sable cohérent MDT */
.image-icon-box .content-box {
  background: var(--mdt-sable) !important;
  text-align: center !important;
}
.image-icon-box .content-box b {
  font-family: var(--mdt-font-body) !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  color: var(--mdt-laiton) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
}
.image-icon-box .content-box h4 {
  font-family: var(--mdt-font-display) !important;
  font-weight: 400 !important;
  color: var(--mdt-noir) !important;
}
.image-icon-box .content-box p {
  font-family: var(--mdt-font-body) !important;
  color: var(--mdt-text-soft) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* Suppression du séparateur blanc en bas de section ('bottom-white' Wandau)
   → Wandau crée une bande blanche 140px via ::before, on l'enlève */
.content-section.bottom-white::before {
  display: none !important;
}

/* --- Side widget (drawer) : fond sauge profond + texte sable --- */
.side-widget svg path { fill: var(--mdt-olive-deep) !important; }
.side-widget,
.side-widget p,
.side-widget h6,
.side-widget a {
  color: var(--mdt-sable) !important;
}
.side-widget .widget-title {
  font-family: var(--mdt-font-display) !important;
  text-transform: none;
  letter-spacing: 0;
  font-size: 24px !important;
  font-style: italic;
}

/* --- Footer / newsletter sombre --- */
.newsletter,
.newsletter-section {
  background: var(--mdt-noir-soft) !important;
  color: var(--mdt-sable);
}
.newsletter h2 { color: var(--mdt-sable) !important; }

/* --- Cards / exhibition box --- */
.exhibition-box,
.content-box {
  background: var(--mdt-sable) !important;
  border: 1px solid var(--mdt-line);
}

/* --- Play-now circular text : sauge --- */
.play-now text { fill: var(--mdt-sauge); font-family: var(--mdt-font-body); letter-spacing: 0.18em; }
.play-now .play-btn { background: var(--mdt-terracotta); }

/* --- Selection highlight --- */
::selection {
  background: var(--mdt-sauge);
  color: var(--mdt-sable);
}

/* ============================================================
   HERO MDT — structure Wandau préservée (full-bleed bg + texte overlay)
   On surcharge UNIQUEMENT la DA : couleurs, typo, copy. Pas de photos.
   ============================================================ */

/* Fond sauge + wallpaper fleuri (repris du Hero V2 de l'ancienne LP) */
.slider .slider-images .swiper-slide.mdt-slide-bg,
.slider .slider-images .swiper-slide.mdt-slide-bg .mobile-slide {
  background: var(--mdt-hero-bg) !important;
  background-image: none !important;
}

/* Layer wallpaper tara-green par dessus, mix-blend screen — donne la texture fleurie de la LP */
.slider .slider-images .swiper-slide.mdt-slide-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../assets-premium-lp/wallpaper-tara-green.jpg");
  background-size: 720px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* Eyebrow au dessus du H1 (taille proportionnelle à l'écran) */
.slider-texts .hero-eyebrow {
  display: block;
  font-family: var(--mdt-font-body);
  font-size: clamp(9px, 0.58vw, 12px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mdt-sable);
  margin-bottom: clamp(14px, 1.5vw, 30px);
  font-weight: 500;
  opacity: 0.9;
}

/* H1 Playfair — proportionnel à la largeur (≈ 100px à 1920) : même
   composition sur petit comme grand écran */
.slider .slider-texts .swiper-slide h1 {
  font-family: var(--mdt-font-display) !important;
  font-weight: 300 !important;
  color: var(--mdt-sable) !important;
  letter-spacing: -0.01em;
  font-size: clamp(40px, 5.9vw, 126px) !important;
  line-height: 1.05 !important;
  /* Ombre douce : redonne du contraste au titre (et au doré) sur le fond
     hero éclairci, sans assombrir le fond ni changer la couleur du doré. */
  text-shadow: 0 2px 18px rgba(26, 24, 21, 0.45) !important;
}

/* Hero avec 1 seul slide : on cache les clones générés par Swiper (loop:true) */
.slider .slider-images .swiper-slide-duplicate,
.slider .slider-texts .swiper-slide-duplicate {
  visibility: hidden !important;
}

.slider-texts h1 em {
  font-family: var(--mdt-font-display);
  font-style: italic;
  color: var(--mdt-laiton);
  font-weight: 400;
}

/* Paragraphe sous H1 (taille + retrait proportionnels) */
.slider .slider-texts .swiper-slide p {
  font-family: var(--mdt-font-body) !important;
  color: var(--mdt-sable) !important;
  border-left-color: var(--mdt-laiton) !important;
  opacity: 0.9;
  font-size: clamp(13px, 1vw, 20px) !important;
  padding-left: clamp(16px, 1.6vw, 32px) !important;
  max-width: 36vw;
}

.slider-texts p em {
  font-family: var(--mdt-font-display);
  font-style: italic;
  color: var(--mdt-laiton);
  font-weight: 400;
}

/* Infos pratiques sous le paragraphe (tailles proportionnelles) */
.slider-texts .hero-meta {
  list-style: none;
  margin: clamp(16px, 1.5vw, 30px) 0 0;
  padding: clamp(12px, 1.15vw, 24px) 0 0;
  border-top: 1px solid rgba(244, 237, 224, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 0.63vw, 13px) clamp(16px, 1.6vw, 32px);
}
.slider-texts .hero-meta li {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.63vw, 13px);
  font-family: var(--mdt-font-body);
  font-size: clamp(11px, 0.74vw, 15px);
  color: var(--mdt-sable);
  opacity: 0.92;
}
.slider-texts .hero-meta__ic {
  width: clamp(14px, 0.95vw, 19px);
  height: clamp(14px, 0.95vw, 19px);
  flex: none;
  color: var(--mdt-laiton);
}

/* CTA hero */
.slider-texts .hero-cta {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 40px;
  flex-wrap: wrap;
  margin-left: 40px;
}

.slider-texts .hero-link {
  font-family: var(--mdt-font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mdt-sable);
  text-decoration: none;
  border-bottom: 1px solid var(--mdt-sable);
  padding-bottom: 4px;
  transition: color 250ms, border-color 250ms;
}

.slider-texts .hero-link:hover {
  color: var(--mdt-laiton);
  border-color: var(--mdt-laiton);
}

/* Blob morph sauge (au lieu du vert Wandau) */
.slider .slider-texts .svg-morph path {
  fill: var(--mdt-sauge) !important;
  opacity: 0.85;
}

/* Centrage horizontal du SVG déco dans le hero (retour Pastel #22)
   — Wandau le décale à gauche via translateX(-140%) ; vertical inchangé. */
.slider .slider-texts .svg-morph {
  transform: translateX(-50%) !important;
}

/* Overlay sombre sur image pour lisibilité du texte sable */
.slider .slider-images .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(26,24,21,0.55) 0%, rgba(26,24,21,0.32) 60%, rgba(26,24,21,0.18) 100%);
  pointer-events: none;
  z-index: 1;
}
.slider .slider-images .swiper-slide > * { position: relative; z-index: 2; }

/* Slider nav / fraction : tokens MDT */
.slider .swiper-fraction { color: var(--mdt-sable) !important; }
.slider .swiper-fraction span { color: var(--mdt-laiton) !important; }
.slider .swiper-pagination-progressbar { background: rgba(244,237,224,0.2) !important; }
.slider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--mdt-sable) !important; }
.slider .slider-nav .button-prev,
.slider .slider-nav .button-next {
  color: var(--mdt-sable);
  border-color: rgba(244,237,224,0.3);
}

/* Play-now : texte circulaire rotatif (on garde) */
.play-now text {
  fill: var(--mdt-laiton) !important;
  font-family: var(--mdt-font-body) !important;
  letter-spacing: 0.22em !important;
  font-size: 11px !important;
  font-weight: 500;
}

/* Plus de cercle blanc autour : on neutralise toute trace */
.play-now circle,
.play-now .svg-morph + svg circle {
  display: none !important;
}

/* Flèche : on remplace le triangle border-trick par une flèche plus chic */
.play-now .play-btn {
  background: transparent !important;
  width: 60px !important;
  height: 60px !important;
  border: 1px solid var(--mdt-laiton) !important;
  border-radius: 50% !important;
  transform: translateX(-50%) translateY(-50%) !important;
  transition: background 300ms ease, border-color 300ms ease !important;
}
.play-now .play-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: none;
  border-top: 1.5px solid var(--mdt-laiton);
  border-right: 1.5px solid var(--mdt-laiton);
  transform: translate(-60%, -50%) rotate(45deg);
  transition: border-color 300ms ease;
}
.play-now .play-btn:hover {
  background: var(--mdt-laiton) !important;
  border-color: var(--mdt-laiton) !important;
}
.play-now .play-btn:hover::before {
  border-top-color: var(--mdt-sauge);
  border-right-color: var(--mdt-sauge);
}

/* Badge « Découvrir le lieu » : vraiment centré horizontalement (Wandau le
   décalait à droite via margin-left:-100px sur une boîte de 340px) et descendu
   un peu pour ne pas chevaucher le texte du hero. */
.play-now {
  margin-left: -170px;   /* 340/2 → centrage exact sur left:50% */
  bottom: -48px;         /* descendu (la zone basse de la boîte est vide) */
}

/* ============================================================
   BOOKING CARD dans le hero (droite) — repris de l'ancienne LP
   ============================================================ */

/* Hauteur du hero : rentre dans le viewport restant après topbar+header fixes
   (le smooth-scroll padding-top compense déjà 136px côté flow, ici on cale juste la viewport) */
/* Hero plein écran dès le chargement (le vert prend tout le viewport à
   l'arrivée). 100vh ici — pas seulement sous body.has-hero — pour que Swiper
   mesure la bonne hauteur dès son init. */
header.slider {
  height: 100vh !important;
  min-height: 600px !important;
}

/* La couche verte (Swiper) suit TOUJOURS la hauteur réelle du hero :
   Swiper fige des hauteurs en pixels à l'init, on force le % par-dessus. */
.slider .slider-images,
.slider .slider-images .swiper-wrapper,
.slider .slider-images .swiper-slide {
  height: 100% !important;
}

/* Texte hero : ancré à gauche sur une gouttière réduite (≈96px à 1920,
   même colonne que le logo), bande élargie — le texte occupe l'espace. */
.slider .slider-texts .container-fluid {
  max-width: 46vw !important;
  margin-left: clamp(32px, 5vw, 110px) !important;
  margin-right: auto !important;
}

/* Aside photo — photo encadrée qui équilibre le H1, calée sur la même bande
   que l'ancienne carte booking (arbitrage Tara : photo seule, tasses rayées). */
.mdt-hero-photo {
  position: absolute;
  right: clamp(32px, 5vw, 110px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(420px, 32vw, 660px);
  max-width: 90vw;
  z-index: 5;
}
.mdt-hero-photo__frame {
  border: 1px solid var(--mdt-laiton);
  padding: 10px;
  background: rgba(240, 236, 219, .08);
  position: relative;
}
/* Double-bordure laiton décalée — signature MDT */
.mdt-hero-photo__frame::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--mdt-laiton);
  transform: translate(10px, 10px);
  pointer-events: none;
  z-index: -1;
}
.mdt-hero-photo__frame img {
  display: block;
  width: 100%;
  height: clamp(320px, 48vh, 470px);
  object-fit: cover;
}

.field { margin-bottom: 14px; }
.field__label {
  display: block;
  font-family: var(--mdt-font-body);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mdt-sauge);
  margin-bottom: 4px;
  font-weight: 500;
}
.field__input,
.field__select {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--mdt-line);
  background: transparent;
  font-family: var(--mdt-font-body);
  font-size: 14px;
  color: var(--mdt-noir);
  outline: none;
  transition: border-color 250ms;
  font-weight: 400;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.field__input:focus,
.field__select:focus { border-bottom-color: var(--mdt-terracotta); }
.field__input::placeholder { color: var(--mdt-greige); }
.field__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234A5D2E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
  cursor: pointer;
}
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.field--row .field { margin-bottom: 0; }

/* Responsive : la photo passe sous le texte si pas assez de place */
@media (max-width: 1440px) {
  .slider .slider-texts .container-fluid { max-width: 100% !important; margin: 0 auto !important; padding: 0 32px !important; }
  .mdt-hero-photo {
    position: relative;
    right: auto; top: auto; transform: none;
    margin: 32px auto 0;
    width: 90%;
    max-width: 600px;
  }
  header.slider { height: auto !important; min-height: auto !important; padding: 60px 0 80px !important; }
  .slider .slider-images,
  .slider .slider-images .swiper-container,
  .slider .slider-images .swiper-wrapper { height: 100% !important; }
}

/* Flèches slider-nav (override du #94ffc4 Wandau) */
.slider .slider-nav .button-prev,
.slider .slider-nav .button-next {
  background: var(--mdt-sable) !important;
  color: var(--mdt-sauge) !important;
}
.slider .slider-nav .button-prev:hover,
.slider .slider-nav .button-next:hover {
  background: var(--mdt-terracotta) !important;
  color: var(--mdt-sable) !important;
}

/* ============================================================
   HEADER MDT — repris de l'ancienne LP (topbar + header + drawer)
   Cache la navbar Wandau, on garde l'ancien header
   ============================================================ */

/* Alias sémantiques (utilisés par les rules importées) */
:root {
  --color-cta-primary:        var(--mdt-terracotta);
  --color-cta-primary-hover:  var(--mdt-terra-dark);
  --color-bg-dark:            var(--mdt-noir-soft);
  --color-text-on-dark:       var(--mdt-sable);
  --color-line:               var(--mdt-line);
  --font-display:             var(--mdt-font-display);
  --font-body:                var(--mdt-font-body);
  --ease-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-mdt:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --container: 1280px;
}

/* Cache la navbar Wandau (on la remplace par notre header MDT) */
nav.navbar { display: none !important; }

/* Container header/topbar : pleine largeur, gouttière proportionnelle —
   alignée sur celle du texte du hero (≈96px à 1920) pour une colonne commune. */
.mdt-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 110px);
}

/* sr-only (a11y) */
.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;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--mdt-noir);
  color: var(--mdt-sable);
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 1000;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* Icon sizes */
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  flex-shrink: 0;
}
.icon--md { width: 20px; height: 20px; }
.icon--lg { width: 24px; height: 24px; }

/* Btn (variantes utilisées dans header/drawer) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.3s var(--ease-out);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
}
.btn--primary {
  background: var(--color-cta-primary);
  color: var(--color-text-on-dark);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-cta-primary-hover);
  transform: translateY(-1px);
  color: var(--color-text-on-dark);
}

/* TOPBAR (hors smooth-scroll, fixe en haut) */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  background: var(--mdt-terracotta);     /* fond terracotta (demande Tara) */
  color: var(--mdt-beige);               /* texte crème — pas de doublon crème/crème au scroll */
  font-size: 12px;
  height: 42px;                          /* hauteur fixe = top du header → barres jointives */
  display: flex;
  align-items: center;
  padding: 0;
  transition: transform .35s ease;       /* glisse hors champ au scroll */
}
/* Au scroll : la topbar s'efface vers le haut et le header remonte d'autant
   (récupère 42px d'écran). Réversible en remontant. */
body.is-scrolled .topbar { transform: translateY(-100%); }
.topbar__inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.topbar__info {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar__info li {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.9;
}
.topbar__info a { color: inherit; }
.topbar__info .icon { color: var(--mdt-beige); }
.topbar__opening { letter-spacing: 0.04em; }

@media (max-width: 600px) {
  .topbar { padding: 8px 0; }
  .topbar__info { display: none; }
  .topbar__opening { width: 100%; text-align: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mdt-beige); }
}

/* HEADER (fixe en haut, sous la topbar) — opaque sable */
.mdt-header {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-line);
  position: fixed;
  top: 42px; /* = hauteur topbar → header jointif (pas d'espace) */
  left: 0;
  right: 0;
  z-index: 140;
  background: var(--mdt-sable);
  transition: top .35s ease;             /* suit la topbar qui se masque */
}
/* Topbar masquée → header collé tout en haut (gagne 42px). */
body.is-scrolled .mdt-header { top: 0; }

/* Compensation : décaler le contenu sous le header fixe (topbar 42 + header 108 avec logo 68) */
.smooth-scroll {
  padding-top: 150px;
}

@media (max-width: 600px) {
  .mdt-header { top: 0; } /* topbar invisible en mobile */
  .smooth-scroll { padding-top: 88px; }
}
.mdt-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Logo capsule_sage (PNG transparent — pas de mix-blend) */
.mdt-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.18em;
  color: var(--mdt-sauge);
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
}
.mdt-logo__image {
  height: 68px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  .mdt-logo__image { height: 42px; }
}

/* NAV desktop */
.mdt-nav { display: flex; gap: 28px; }
.mdt-nav a {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mdt-sauge);
  font-weight: 500;
  transition: color 0.3s;
  position: relative;
  white-space: nowrap;
  padding: 8px 0;
  text-decoration: none;
}
.mdt-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--mdt-terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.mdt-nav a:hover { color: var(--mdt-terracotta); }
.mdt-nav a:hover::after,
.mdt-nav a:focus-visible::after { transform: scaleX(1); }

.mdt-header__cta { display: flex; align-items: center; gap: 16px; }
.mdt-header__cta .btn {
  white-space: nowrap;
  padding: 12px 22px;
  font-size: 11px;
  min-height: 40px;
}

/* BURGER */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--mdt-sauge);
  background: transparent;
  border: 0;
}
.burger__lines {
  position: relative;
  width: 22px;
  height: 14px;
  display: block;
}
.burger__lines::before,
.burger__lines::after,
.burger__lines span {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.burger__lines::before { top: 0; }
.burger__lines span { top: 50%; transform: translateY(-50%); display: block; }
.burger__lines::after { bottom: 0; }

/* Tél du header : caché tant que la topbar (qui porte déjà le numéro) est visible */
.mdt-header__tel { display: none; }

@media (max-width: 900px) {
  .mdt-nav { display: none; }
  /* Le CTA reste visible en compact à côté du burger : depuis que le hero
     est en « photo seule », c'est le seul bouton Réserver au-dessus du pli. */
  .mdt-header__cta .btn--primary { padding: 9px 14px !important; font-size: 10px !important; }
  .burger { display: inline-flex; }
}
@media (max-width: 600px) {
  /* La topbar masque ses infos : le téléphone bascule dans le header
     (commerce local : l'appel est le premier geste mobile). */
  .mdt-header__tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--mdt-laiton);
    border-radius: 999px;
    color: var(--mdt-terracotta);
  }
  .mdt-header__tel .icon { width: 16px; height: 16px; }
  body.has-hero:not(.is-scrolled) .mdt-header__tel { color: var(--mdt-sable); }
}

/* NAV BADGE "Bientôt" */
.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background: var(--mdt-laiton);
  color: var(--mdt-sable) !important;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  vertical-align: 2px;
}

/* DRAWER mobile */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out), visibility 0s 0.3s;
}
.drawer.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }

.drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 24, 21, 0.5);
  cursor: pointer;
}
.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 90vw);
  background: var(--mdt-sable);
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-mdt);
  box-shadow: -8px 0 32px rgba(26, 24, 21, 0.08);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
.drawer__header .mdt-logo__image { height: 44px; }

.drawer__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mdt-sauge);
  background: transparent;
  border: 0;
  transition: transform 0.3s var(--ease-out);
}
.drawer__close:hover { transform: rotate(90deg); }

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 32px;
}
.drawer__nav a {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  color: var(--mdt-noir);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-line);
  transition: color 0.3s;
  min-height: 44px;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.drawer__nav a:hover,
.drawer__nav a:focus-visible { color: var(--mdt-terracotta); }
.drawer__nav a em {
  font-style: italic;
  color: var(--mdt-sauge);
  font-family: var(--font-display);
}

.drawer__cta { margin-top: auto; }
.drawer__cta .btn { width: 100%; }

.drawer__contact {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--mdt-text-soft);
}
.drawer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mdt-sauge);
  text-decoration: none;
}

body.is-drawer-open { overflow: hidden; }

/* ============================================================
   HEADER v1 — transparent sur le hero, solide au scroll (accueil)
   Activé par body.has-hero (ajouté en JS si header.slider présent).
   La bascule .is-scrolled est posée sur <body> par scripts.js.
   ============================================================ */

/* Transition douce de la bascule transparent ↔ solide */
.topbar,
.mdt-header { transition: background-color .35s ease, border-color .35s ease; }
.mdt-logo__image { transition: filter .35s ease, height .35s ease; }

/* Accueil : le hero remonte sous le header (plus de bande beige dédiée) */
body.has-hero .smooth-scroll { padding-top: 0; }
body.has-hero header.slider { height: 100vh !important; }

/* Le contenu du hero démarre JUSTE sous le header fixe (topbar 42 +
   header ~145 avec logo 11.5vh) au lieu de flotter au centre — le texte
   occupe l'espace dès le haut. La photo encadrée s'équilibre dessus. */
body.has-hero .slider .slider-texts .swiper-slide {
  align-items: flex-start;
  /* 12vh → 6vh : le bloc texte remonte sous le header (retour client 12/06) */
  padding-top: calc(96px + 6vh);
}
body.has-hero .mdt-hero-photo { top: calc(50% + 5vh); }
@media (max-width: 1440px) {
  body.has-hero .slider .slider-texts .swiper-slide { padding-top: 0; }
  body.has-hero .mdt-hero-photo { top: auto; }
}

/* Pages intérieures (hero clair, js/header-pages.js) : header transparent
   tout en haut, fond beige dès le premier défilement. Le hero étant clair,
   la nav reste encre et le logo garde sa taille/couleur normales. */
body.hero-clair:not(.is-scrolled) .mdt-header {
  background: transparent;
  border-bottom-color: transparent;
}
/* Au scroll : header compacté en hauteur (tailles texte/logo inchangées) */
.mdt-header { transition: background-color .35s ease, border-color .35s ease, padding .35s ease; }
body.is-scrolled .mdt-header { padding: 8px 0; }

/* État transparent du HEADER (accueil, avant scroll) — nav blanche sur le hero.
   La topbar, elle, reste crème + terracotta en permanence (voir bloc .topbar). */
body.has-hero:not(.is-scrolled) .mdt-header {
  background: transparent;
  border-bottom-color: transparent;
}
body.has-hero:not(.is-scrolled) .mdt-nav a { color: var(--mdt-sable); }
body.has-hero:not(.is-scrolled) .mdt-nav a:hover { color: var(--mdt-laiton); }
body.has-hero:not(.is-scrolled) .mdt-nav a::after { background: var(--mdt-laiton); }
/* Logo PNG passé en blanc + agrandi sur le hero (proportionnel à la hauteur
   d'écran, ≈110px sur un 1080p), revient en couleur 68px au scroll */
body.has-hero:not(.is-scrolled) .mdt-logo__image { filter: brightness(0) invert(1); height: clamp(64px, 11.5vh, 112px); }
body.has-hero:not(.is-scrolled) .burger { color: var(--mdt-sable); }

/* Layouts hero empilés (≤1440px) : le hero coule depuis le haut → on dégage
   l'espace du header fixe, on LIBÈRE la hauteur (texte + photo empilés
   dépassent 100vh, que la règle has-hero ci-dessus forcerait sinon avec
   l'overflow:hidden du template → contenu coupé), et le paragraphe reprend
   sa pleine largeur (le cap 36vw n'a de sens qu'à côté de la photo). */
@media (max-width: 1440px) {
  body.has-hero header.slider { height: auto !important; min-height: 100vh; padding-top: 176px !important; padding-bottom: 80px !important; }
  .slider .slider-texts .swiper-slide p { max-width: 100%; }
}
@media (max-width: 600px) {
  /* Logo pré-scroll ramené à une taille mobile (le clamp(64px,11.5vh,112px)
     bat sinon la règle mobile 42px en spécificité → header ~138px qui
     recouvrait le H1) + offset du hero recalé dessous. */
  body.has-hero:not(.is-scrolled) .mdt-logo__image { height: 56px; }
  body.has-hero header.slider { padding-top: 148px !important; }
}

/* ============================================================
   SECTION 2 — placeholder image-box en pattern fleuri MDT
   (la structure et la typo Wandau sont préservées, on remplace juste
    l'image manquante par un bloc décoratif sable+wallpaper)
   ============================================================ */
.mdt-pattern-block {
  position: relative;
  width: 100%;
  height: 460px;
  background: var(--mdt-sauge);
  overflow: hidden;
}
.mdt-pattern-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../assets-premium-lp/wallpaper-tara-green.jpg");
  background-size: 540px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.32;
  mix-blend-mode: screen;
}
.mdt-pattern-block::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--mdt-laiton);
  opacity: 0.55;
  pointer-events: none;
}

/* Section 3 cards — uniformiser les images (aspect-ratio 3/2 façon Wandau)
   et recolorer le badge pill (lime green → laiton MDT) */
.exhibition-box figure .img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
  /* Animation Wandau native préservée :
     opacity 0 + scale(1.2) au départ (style.css)
     → Locomotive ajoute .is-inview à l'entrée viewport
     → fade-in + zoom-out 0.7s cubic-bezier(0.86, 0, 0.09, 1) */
}
.exhibition-box figure .info span {
  background: var(--mdt-laiton) !important;
  color: var(--mdt-sable) !important;
  font-family: var(--mdt-font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em;
  font-weight: 500 !important;
}
/* Le cercle blanc "i" reste blanc (cohérent Wandau) — on s'assure que rien ne le surcharge */
.exhibition-box figure .info figure {
  background: #fff !important;
}
.exhibition-box figure .info figure img {
  filter: brightness(0); /* assure que le "i" reste foncé sur fond blanc */
}

/* Espace texte agrandi : marge sous l'image + plus de gap content-box.
   Cartes multi-paragraphes (textes de Tara) : paragraphes resserrés entre
   eux, respiration avant le CTA. */
.exhibition-box figure { margin-bottom: 28px !important; }
.exhibition-box .content-box { padding: 0 12px; }
.exhibition-box .content-box h4 {
  margin-bottom: 14px !important;
  /* Titres de carte resserrés (12/06) : prenaient trop de place en 30px Wandau. */
  font-size: clamp(19px, 1.6vw, 23px) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;   /* gras (demande 12/06) */
}
.exhibition-box .content-box p { margin-bottom: 14px !important; }
.exhibition-box .content-box p:last-of-type { margin-bottom: 24px !important; }

/* Cartes univers : version « résumé à puces » verrouillée (arbitrage 12/06) —
   .uv-bullets est un simple conteneur, le texte entier a été retiré du HTML. */

/* ============================================================
   Mode lab (?lab) — scroll natif : Locomotive est coupé, donc la
   classe is-inview n'est jamais posée. On révèle directement les
   images qu'elle déclenche d'habitude.
   ============================================================ */
body.lab-native .image-box img,
body.lab-native .exhibition-box .img,
body.lab-native .image-icon-box .content-image img,
body.lab-native .side-image img,
body.lab-native .image-content-box figure img {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   Parcours « Comment ça se passe ? » — textes Tara
   ============================================================ */
/* Format v1 (arbitrage Tara) : photos alignées, texte révélé au survol de la
   carte. Plafond Wandau 190px trop bas pour les textes complets → relevé.
   :focus / :focus-within = accès clavier (cartes avec tabindex="0"). */
#parcours .image-icon-box:hover .content-box .expand,
#parcours .image-icon-box:focus .content-box .expand,
#parcours .image-icon-box:focus-within .content-box .expand {
  max-height: 460px;
}
#parcours .image-icon-box:focus-visible { outline: 2px solid var(--mdt-laiton); outline-offset: -2px; }
/* Écrans tactiles (pas de survol possible) : texte toujours visible. */
@media (hover: none) {
  #parcours .content-box .expand { max-height: none !important; }
}
/* Titres du parcours (complets) et titre univers (« À découvrir à la maison »)
   verrouillés (arbitrage 12/06) — variantes retirées du HTML. */
#parcours .content-box .expand p { margin-bottom: 12px; }
/* Alignement strict des 4 étapes : aucune marge parasite, photos toutes au
   même niveau et à la même hauteur (la 4e dérivait). */
#parcours .image-icon-box { margin: 0 !important; }
#parcours .col-lg-3 { margin-top: 0 !important; }
#parcours .image-icon-box .content-image {
  aspect-ratio: 3 / 4;
  margin: 0 !important;
}

/* ============================================================
   Les grandes occasions (accueil) — section compacte : 5 petites
   cartes photo + légende, tient dans un écran (retour Tara).
   ============================================================ */
.mdt-occasions-lp {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.mdt-occasions-lp figure { margin: 0; }
.mdt-occasions-lp img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--mdt-laiton);
  padding: 5px;
  background: var(--mdt-sable);
}
.mdt-occasions-lp figcaption {
  font-family: var(--mdt-font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mdt-text-soft);
  text-align: center;
  margin-top: 8px;
}
.mdt-occasions-note {
  font-family: var(--mdt-font-body);
  color: var(--mdt-text-soft);
  text-align: center;
  font-style: italic;
  margin: 22px auto 0;
  max-width: 560px;
}
.mdt-occasions-cta { margin-top: 18px; }
@media (max-width: 900px) {
  .mdt-occasions-lp { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .mdt-occasions-lp { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mdt-occasions-lp img { height: 110px; }
}

/* « Certaines réalisations » : motif floral nettement visible (le filigrane
   générique à 9% ne se voyait pas — demande client). */
#realisations::before {
  opacity: 0.22 !important;
  background-size: 640px !important;
}

/* Mode lab (Locomotive coupé) : la galerie « Certaines réalisations »
   défile toute seule en va-et-vient doux, faute de parallaxe au scroll. */
body.lab-native .horizontal-scroll .scroll-inner {
  animation: mdt-marquee 38s linear infinite alternate;
}
@keyframes mdt-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100vw); }
}

/* Section boutique : mise en scène « vitrine 3 photos » verrouillée
   (arbitrage 12/06) — autres variantes retirées du HTML et du CSS. */
.mdt-boutique-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 34px;
}
.mdt-boutique-gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border: 1px solid var(--mdt-line);
}
@media (max-width: 700px) {
  .mdt-boutique-gallery { grid-template-columns: 1fr 1fr; }
  .mdt-boutique-gallery img:last-child { display: none; }
}

/* Cartes univers (arbitrage 12/06) : mêmes dimensions, alignées en haut ET en
   bas. On retire le décalage « quinconce » du Café et on force les 3 colonnes
   à la même hauteur, CTA collé en bas de chaque carte. */
#univers .row { align-items: stretch; }
#univers .col-lg-4 { display: flex; }
#univers .exhibition-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 !important;
}
#univers .exhibition-box .content-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Le bloc texte (uv-bullets) occupe l'espace, le CTA se cale en bas */
#univers .exhibition-box .uv-bullets { flex: 1 1 auto; }
#univers .exhibition-box .mdt-card-cta { margin-top: auto; align-self: center; }

/* Logo section 3 top-left (signature MDT) */
.mdt-section-with-logo { position: relative; }
.mdt-section-logo {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 96px;
  height: auto;
  z-index: 2;
  pointer-events: none;
}
.mdt-section-logo img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 991px) {
  .mdt-section-logo { width: 72px; top: 20px; left: 20px; }
}

/* Features list — petites puces centrées sous la description */
.mdt-features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.mdt-features li {
  font-family: var(--mdt-font-body);
  font-size: 13px;
  color: var(--mdt-text-soft);
  line-height: 1.6;
  position: relative;
  padding-left: 14px;
  display: inline-block;
}
.mdt-features li::before {
  content: "·";
  position: relative;
  left: -8px;
  color: var(--mdt-laiton);
  font-weight: 700;
}

/* CTA carte — petit lien éditorial soulign\é sauge */
.mdt-card-cta {
  display: inline-block;
  font-family: var(--mdt-font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mdt-sauge);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--mdt-sauge);
  padding-bottom: 4px;
  margin: 0 auto;
  transition: color 250ms, border-color 250ms;
}
.mdt-card-cta:hover {
  color: var(--mdt-terracotta);
  border-color: var(--mdt-terracotta);
}

/* Côté droit (3 items info) — Wandau côtes natives sont OK,
   on ne fait qu'aligner les icônes SVG dans les figures Wandau */
.side-icon-list .content a {
  color: var(--mdt-sauge);
  border-bottom: 1px solid var(--mdt-sauge);
  padding-bottom: 2px;
  font-family: var(--mdt-font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
  margin-top: 6px;
}
.side-icon-list .content a:hover { color: var(--mdt-terracotta); border-color: var(--mdt-terracotta); }
.side-icon-list figure { color: var(--mdt-laiton); display: inline-flex; align-items: center; justify-content: center; }
.side-icon-list figure .icon { width: 28px; height: 28px; }

@media (max-width: 991px) {
  .mdt-pattern-block { height: 320px; }
}

/* ============================================================
   Fonds floraux de sections (motifs de la LP de base)
   Intensite alternee : subtil sur sections chargees, marque sur bandes
   ============================================================ */
/* Filigranes sur fond creme. Pas d'overflow:hidden (casserait le
   scroll horizontal Locomotive de #histoire). On leve tous les enfants
   directs au-dessus du motif via "> *". */
.mdt-floral-soft,
.mdt-floral-line { position: relative; }
.mdt-floral-soft::before,
.mdt-floral-line::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Texture florale UNIFIÉE (12/06) : même échelle + opacité sur toutes les
   sections crème, pour une continuité du fond d'une section à l'autre (plus de
   cassure de densité aux jonctions univers↔parcours, calendrier↔occasions, etc.). */
.mdt-floral-soft::before,
.mdt-floral-line::before {
  background: url("../../assets-premium-lp/wallpaper-tara-green.jpg") center / 600px repeat;
  opacity: 0.07;
}
.mdt-floral-soft > *,
.mdt-floral-line > * { position: relative; z-index: 1; }

/* ============================================================
   Newsletter MDT — carte beige cadrée or (retour Pastel #9 : fond
   beige + texte noir) posée sur la bande verte florale (design v1).
   ============================================================ */
.mdt-newsletter {
  background: var(--mdt-newsletter-bg) !important;   /* réglable via le labo couleurs */
  padding: clamp(48px, 5vw, 72px) 0 !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Motif floral au MÊME niveau que les autres sections crème (600px / 0.07)
   pour que la bande se fonde dans le reste du site (12/06). */
.mdt-newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("../../assets-premium-lp/wallpaper-tara-green.jpg") center / 600px repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.mdt-newsletter > .container { position: relative; z-index: 2; }
/* Cadre à DOUBLE FILET doré rapproché, fond blanc voilé, format compact
   (fidèle capture v1) */
.mdt-nl-card {
  position: relative;
  background: rgba(252, 250, 244, 0.55);
  border: 1px solid var(--mdt-laiton);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3.5vw, 56px);
  max-width: 640px;
  margin: 0 auto;
}
.mdt-nl-card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--mdt-laiton);
  pointer-events: none;
}
.mdt-nl-capsule img {
  height: 40px;
  width: auto;
  display: block;
  margin: 0 auto 14px;
}
.mdt-nl-eyebrow {
  display: block;
  font-family: var(--mdt-font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  font-size: 11px;
  color: var(--mdt-ink);
  opacity: 0.8;
  margin-bottom: 10px;
}
.mdt-nl-title {
  font-family: var(--mdt-font-display) !important;
  font-weight: 300 !important;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mdt-ink) !important;
  margin-bottom: 12px;
}
.mdt-nl-title em { font-style: italic; color: var(--mdt-laiton); }
.mdt-nl-lead {
  max-width: 460px;
  margin: 0 auto 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mdt-ink);
  opacity: 0.82;
}
.mdt-nl-form {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  max-width: 460px;
  margin: 0 auto 16px;
  flex-wrap: wrap;
}
.mdt-nl-form input {
  flex: 1;
  min-width: 200px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(44, 36, 25, 0.35);
  padding: 10px 4px;
  font-family: var(--mdt-font-body);
  font-size: 14px;
  color: var(--mdt-ink);
  outline: none;
  transition: border-color .25s;
}
.mdt-nl-form input:focus { border-bottom-color: var(--mdt-laiton); }
.mdt-nl-form input::placeholder { color: rgba(44, 36, 25, 0.45); }
.mdt-nl-form button {
  background: var(--mdt-terracotta);
  border: none;
  color: #fff;
  font-family: var(--mdt-font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  font-size: 11px;
  cursor: pointer;
  padding: 13px 24px;
  transition: background .25s;
}
.mdt-nl-form button:hover { background: var(--mdt-terra-dark); }
@media (max-width: 540px) {
  .mdt-nl-form { flex-direction: column; align-items: stretch; }
}
.mdt-nl-note { font-size: 11px; color: rgba(44, 36, 25, 0.65); }
.mdt-nl-note a { color: rgba(44, 36, 25, 0.8); text-decoration: underline; }
.mdt-nl-note a:hover { color: var(--mdt-terracotta); }

/* ============================================================
   Rendez-vous de la Maison — événements (reprise LP v1, variante
   claire sur beige). Données placeholder avant branchement calendrier.
   ============================================================ */
.events-eyebrow {
  font-family: var(--mdt-font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mdt-text-soft);
}
.events-rows__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.events-rows__title {
  font-family: var(--mdt-font-display);
  font-size: clamp(36px, 4.5vw, 52px);
  color: var(--mdt-noir);
  font-weight: 300 !important;
  line-height: 1.1;
  margin: 14px 0 0;
}
.events-rows__title em {
  font-style: italic;
  color: var(--mdt-laiton);
  font-weight: 300;
}
.btn--outline {
  background: transparent;
  border: 1px solid var(--mdt-noir);
  color: var(--mdt-noir);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--mdt-noir);
  color: var(--mdt-sable);
}

.event-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--mdt-line);
}
.event-row:first-of-type { border-top: 1px solid var(--mdt-line); }
.event-row__date {
  width: 72px;
  height: 72px;
  background: #fff;
  border: 1px solid var(--mdt-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.event-row__date strong {
  font-family: var(--mdt-font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--mdt-noir);
  line-height: 1;
}
.event-row__date span {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mdt-text-soft);
  margin-top: 3px;
}
.event-row__date--featured {
  width: 96px;
  height: 96px;
  background: var(--mdt-laiton);
  border: none;
}
.event-row__date--featured strong { font-size: 38px; color: #fff; }
.event-row__date--featured span { color: rgba(255, 255, 255, 0.85); }
.event-row__meta {
  font-family: var(--mdt-font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mdt-text-soft);
  font-weight: 500;
  margin-bottom: 6px;
}
.event-row__title {
  font-family: var(--mdt-font-display);
  font-size: clamp(22px, 2.2vw, 28px) !important;
  font-weight: 400 !important;
  color: var(--mdt-noir);
  line-height: 1.25;
  margin: 0 0 8px;
}
.event-row__time {
  font-family: var(--mdt-font-body);
  font-size: 13px;
  color: var(--mdt-text-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.event-row__time .icon { color: var(--mdt-laiton); }
.event-row__time strong { color: var(--mdt-terracotta); }
.event-row__seats { color: var(--mdt-terracotta); font-weight: 500; }
.event-row__seats--full { color: var(--mdt-text-soft); font-weight: 500; font-style: italic; }
.event-row__badge {
  display: inline-block;
  background: var(--mdt-laiton);
  color: #fff;
  padding: 4px 10px;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
}
.event-row--featured {
  padding: 26px 0 30px;
  background: linear-gradient(90deg, rgba(184, 146, 77, 0.10), transparent 60%);
}
.event-row--full { opacity: 0.7; }
.event-row__cta { white-space: nowrap; }
.btn__arrow { width: 16px; height: 16px; }

@media (max-width: 800px) {
  .event-row { grid-template-columns: 72px 1fr; gap: 20px; padding: 22px 0; }
  .event-row__cta { grid-column: 1 / -1; justify-self: flex-start; }
  .event-row__date--featured { width: 72px; height: 72px; }
  .event-row__date--featured strong { font-size: 28px; }
}

/* ============================================================
   Footer MDT — « Invitation » (variante B validée le 11/06) :
   fond vert floral (recette hero conservée), signature manuscrite
   centrée, nav et coordonnées sur une ligne, barre du bas sur UNE
   seule ligne avec le crédit Propul'SEO centré et cliquable.
   ============================================================ */
.mdt-footer {
  background: var(--mdt-footer-bg) !important;
  /* couture laiton : adoucit la transition page claire → vert (revue expert) */
  border-top: 1px solid var(--mdt-laiton) !important;
  color: var(--mdt-sable);
  padding: clamp(48px, 7vw, 84px) 0 0;
  border-top: none;
  position: relative;
  overflow: hidden;
}
/* Texture florale discrète, comme la preview */
.mdt-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../assets-premium-lp/wallpaper-tara-green.jpg");
  background-size: 560px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.08;
  pointer-events: none;
}
.mdt-footer .container { max-width: var(--mdt-container); position: relative; z-index: 2; }
.mdt-footer-inner { text-align: center; }
.mdt-footer-tag {
  font-family: var(--mdt-font-script);
  font-size: clamp(28px, 4vw, 44px);
  color: var(--mdt-laiton);
  display: block;
  margin-bottom: 6px;
}
.mdt-footer-name {
  font-family: var(--mdt-font-display);
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 500;
  color: var(--mdt-sable);
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.mdt-footer-nav {
  margin: 30px 0 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}
.mdt-footer-nav a {
  color: var(--mdt-sable);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color .25s;
}
.mdt-footer-nav a:hover { color: var(--mdt-laiton); }
.mdt-footer-coords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  font-size: 13.5px;
  color: rgba(240, 236, 219, 0.85);
}
.mdt-footer-coords a {
  color: rgba(240, 236, 219, 0.85);
  border-bottom: 1px solid rgba(184, 146, 77, 0.5);
  transition: color .25s, border-color .25s;
}
.mdt-footer-coords a:hover { color: var(--mdt-laiton); border-bottom-color: var(--mdt-laiton); }
.mdt-footer-coords .dot { color: var(--mdt-laiton); }
.mdt-footer-filet {
  width: 72px;
  height: 1px;
  background: var(--mdt-laiton);
  margin: 30px auto 0;
  position: relative;
}
.mdt-footer-filet::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--mdt-laiton);
}
/* Barre du bas : UNE ligne — © à gauche, crédit centré, légal à droite */
.mdt-footer-bottom {
  margin-top: 26px;
  border-top: 1px solid rgba(184, 146, 77, 0.35);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 16px 0 18px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(240, 236, 219, 0.6);
}
.mdt-footer-bottom .fb-l { justify-self: start; white-space: nowrap; }
.mdt-footer-bottom .fb-c { justify-self: center; text-align: center; }
.mdt-footer-bottom .fb-r { justify-self: end; white-space: nowrap; }
.mdt-footer-bottom a { color: rgba(240, 236, 219, 0.8); transition: color .25s; }
.mdt-footer-bottom a:hover { color: var(--mdt-laiton); }
.mdt-footer-credit {
  font-family: var(--mdt-font-script);
  font-size: 17px;
  color: var(--mdt-laiton) !important;
  border-bottom: 0 !important;
}
.mdt-footer-credit:hover { color: var(--mdt-sable) !important; }

@media (max-width: 760px) {
  .mdt-footer-bottom { grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .mdt-footer-bottom .fb-l,
  .mdt-footer-bottom .fb-c,
  .mdt-footer-bottom .fb-r { justify-self: center; }
}