/* ==========================================================
   Maison Blondin — global.css
   Variables CSS + reset + styles de base compatibles Elementor
   ========================================================== */

/* ── Palette & typographies ── */
:root {
  --mb-blush:        #e4c3bf;
  --mb-pink:         #ff66c4;
  --mb-cream:        #fff3e8;
  --mb-brown:        #572400;
  --mb-ink:          #1a0e08;
  --mb-text:         #6b4232;
  --mb-muted:        #b09080;
  --mb-sand:         #eeddd6;
  --mb-white:        #ffffff;
  --mb-blush2:       #f5e8e4;

  --mb-font-heading: 'Playfair Display', Georgia, serif;
  --mb-font-body:    'Open Sans', system-ui, sans-serif;

  --mb-radius:       4px;
  --mb-transition:   .3s ease;
}

/* ── Reset minimal ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family:      var(--mb-font-body);
  font-size:        15px;
  line-height:      1.75;
  color:            var(--mb-text);
  background-color: var(--mb-cream);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: var(--mb-brown); transition: color var(--mb-transition); }
a:hover { color: var(--mb-pink); }

/* ── Titres — style Playfair Display ── */
h1, h2, h3, h4, h5, h6 {
  font-family:   var(--mb-font-heading);
  font-weight:   400;
  line-height:   1.1;
  letter-spacing: -.01em;
  color:         var(--mb-brown);
}

h1 { font-size: clamp(40px, 6vw, 80px); }
h2 { font-size: clamp(32px, 4.5vw, 60px); }
h3 { font-size: clamp(22px, 3vw, 36px); }
h4 { font-size: clamp(18px, 2vw, 26px); }
h5 { font-size: 18px; }
h6 { font-size: 15px; font-family: var(--mb-font-body); font-weight: 600; }

p  { margin-bottom: 1.2em; }
p:last-child { margin-bottom: 0; }

/* ── Boutons natifs WP & Elementor ── */
.wp-block-button__link,
.elementor-button,
button:not([class*="elementor"]):not([class*="eicon"]):not([class*="wp-"]) {
  font-family:     var(--mb-font-body);
  font-size:       11px;
  font-weight:     600;
  letter-spacing:  .14em;
  text-transform:  uppercase;
  cursor:          pointer;
  transition:      background var(--mb-transition), color var(--mb-transition), box-shadow var(--mb-transition);
}

/* Bouton primaire (fill) */
.mb-btn,
.mb-btn-fill {
  display:         inline-block;
  font-family:     var(--mb-font-body);
  font-size:       11px;
  font-weight:     600;
  letter-spacing:  .14em;
  text-transform:  uppercase;
  text-decoration: none;
  padding:         13px 28px;
  background:      var(--mb-brown);
  color:           var(--mb-white);
  border:          none;
  cursor:          pointer;
  transition:      background var(--mb-transition), box-shadow var(--mb-transition);
}
.mb-btn:hover,
.mb-btn-fill:hover {
  background:  var(--mb-pink);
  color:       var(--mb-white);
  box-shadow:  0 8px 24px rgba(255,102,196,.28);
}

/* Bouton secondaire (outline) */
.mb-btn-out {
  display:         inline-block;
  font-family:     var(--mb-font-body);
  font-size:       11px;
  font-weight:     600;
  letter-spacing:  .14em;
  text-transform:  uppercase;
  text-decoration: none;
  padding:         12px 28px;
  background:      transparent;
  color:           var(--mb-brown);
  border:          1.5px solid var(--mb-brown);
  cursor:          pointer;
  transition:      background var(--mb-transition), color var(--mb-transition), border-color var(--mb-transition);
}
.mb-btn-out:hover {
  background:      var(--mb-brown);
  color:           var(--mb-white);
  border-color:    var(--mb-brown);
}

/* ── Eyebrow / label de section ── */
.mb-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  font-family:    var(--mb-font-body);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color:          var(--mb-muted);
}
.mb-eyebrow::before {
  content: '';
  display: block;
  width: 20px; height: 1.5px;
  background: var(--mb-pink);
  flex-shrink: 0;
}

/* ── Séparateur ── */
.mb-divider {
  width: 48px; height: 2px;
  background: var(--mb-pink);
  margin: 20px 0;
}

/* ── Conteneur centré ── */
.mb-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 768px) {
  .mb-container { padding: 0 20px; }
}

/* ── Selection ── */
::selection {
  background: var(--mb-blush);
  color:      var(--mb-brown);
}

/* ── Scrollbar (webkit) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--mb-cream); }
::-webkit-scrollbar-thumb { background: var(--mb-sand); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mb-muted); }

/* ── Elementor : neutraliser le padding par défaut des sections ──
   Elementor ajoute du padding sur .elementor-section par défaut.
   On laisse Elementor gérer ses propres espacements. ── */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1280px;
}

/* ── WordPress : contenu de page standard (hors Elementor) ── */
.entry-content {
  max-width: 760px;
  margin: 80px auto;
  padding: 0 24px;
}
.entry-content h2 { margin: 2em 0 .6em; }
.entry-content h3 { margin: 1.6em 0 .5em; }
.entry-content ul, .entry-content ol {
  padding-left: 1.5em;
  margin-bottom: 1.2em;
}
.entry-content li { margin-bottom: .4em; }