/* =========================================================================
   MAISON PÉNIELLE — GLOBAL DESIGN SYSTEM
   Typographies, layouts, boutons, composants de base
   ========================================================================= */

/* =========================================================================
   TYPOGRAPHY HIERARCHY
   ========================================================================= */

.mp-display {
  font-family: var(--mp-serif-display);
  font-weight: 400;
  font-size: clamp(44px, 7.5vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--mp-ink);
}

.mp-display em,
.mp-h1 em,
.mp-h2 em,
.mp-h3 em {
  font-style: italic;
  font-family: var(--mp-serif);
  font-weight: 300;
}

.mp-h1 {
  font-family: var(--mp-serif-display);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--mp-ink);
}

.mp-h2 {
  font-family: var(--mp-serif-display);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--mp-ink);
}

.mp-h3 {
  font-family: var(--mp-serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.2;
  margin: 0;
  color: var(--mp-ink);
}

.mp-body-l {
  font-size: 17px;
  line-height: 1.6;
  color: var(--mp-ink-soft);
  font-family: var(--mp-sans);
}

.mp-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mp-ink-soft);
  font-family: var(--mp-sans);
}

.mp-small-caps,
.mp-eyebrow {
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mp-muted);
  display: inline-block;
}

/* =========================================================================
   BUTTONS
   ========================================================================= */

.mp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  border: 1px solid var(--mp-ink);
  background: var(--mp-ink);
  color: var(--mp-bg);
  font-family: var(--mp-sans);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.35s var(--mp-ease);
  cursor: pointer;
}

.mp-btn:hover {
  background: transparent;
  color: var(--mp-ink);
}

.mp-btn.mp-btn-ghost {
  background: transparent;
  color: var(--mp-ink);
}

.mp-btn.mp-btn-ghost:hover {
  background: var(--mp-ink);
  color: var(--mp-bg);
}

.mp-btn.mp-btn-gold {
  background: var(--mp-caramel);
  border-color: var(--mp-caramel);
  color: #111;
}

.mp-btn.mp-btn-gold:hover {
  background: var(--mp-caramel-d);
  border-color: var(--mp-caramel-d);
  color: var(--mp-bg);
  transform: translateY(-1px);
}

/* ----- Modifier .mp-on-dark — pour boutons utilisés sur fond noir ----- */
/* À ajouter manuellement à la classe du bouton : class="mp-btn mp-on-dark" */
/* Descendants automatiques : tout .mp-btn à l'intérieur de .mp-final-cta */
/* ou .mp-on-dark reçoit l'inversion. */

.mp-btn.mp-on-dark,
.mp-final-cta .mp-btn:not(.mp-btn-gold) {
  background: var(--mp-bg);
  border-color: var(--mp-bg);
  color: var(--mp-ink);
}

.mp-btn.mp-on-dark:hover,
.mp-final-cta .mp-btn:not(.mp-btn-gold):hover {
  background: transparent;
  color: var(--mp-bg);
  border-color: var(--mp-bg);
}

.mp-btn.mp-btn-ghost.mp-on-dark,
.mp-final-cta .mp-btn.mp-btn-ghost {
  background: transparent;
  color: var(--mp-bg);
  border-color: var(--mp-bg);
}

.mp-btn.mp-btn-ghost.mp-on-dark:hover,
.mp-final-cta .mp-btn.mp-btn-ghost:hover {
  background: var(--mp-bg);
  color: var(--mp-ink);
  border-color: var(--mp-bg);
}

/* Le bouton gold reste inchangé en mp-on-dark (déjà visible sur noir via v2.3) */

.mp-link-ul {
  border-bottom: 1px solid var(--mp-ink);
  padding-bottom: 2px;
  font-family: var(--mp-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mp-ink);
  display: inline-block;
}

.mp-link-ul:hover {
  color: var(--mp-caramel-d);
  border-color: var(--mp-caramel-d);
}

/* =========================================================================
   LAYOUT UTILS
   ========================================================================= */

.mp-pad {
  padding: var(--mp-pad-y) var(--mp-pad-x);
}

.mp-pad-x {
  padding-left: var(--mp-pad-x);
  padding-right: var(--mp-pad-x);
}

.mp-pad-y {
  padding-top: var(--mp-pad-y);
  padding-bottom: var(--mp-pad-y);
}

.mp-container {
  max-width: 1480px;
  margin: 0 auto;
}

.mp-rule {
  height: 1px;
  background: var(--mp-hair);
  width: 100%;
  border: 0;
  margin: 0;
}

.mp-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mp-caramel);
  margin-right: 8px;
}

/* =========================================================================
   PLACEHOLDER IMAGE WRAPPER
   ========================================================================= */

.mp-ph {
  position: relative;
  background: var(--mp-bg-2);
  overflow: hidden;
}

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

.mp-ph .mp-ph-lbl {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  background: rgba(251, 247, 243, 0.88);
  font-family: var(--mp-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mp-ink-soft);
  z-index: 2;
}

/* =========================================================================
   ELEMENTOR GLOBAL OVERRIDES
   Appliquent le design system automatiquement dans les widgets Elementor
   ========================================================================= */

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--mp-serif-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--mp-ink);
}

.elementor-widget-heading .elementor-heading-title em {
  font-family: var(--mp-serif);
  font-style: italic;
  font-weight: 300;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--mp-sans);
  color: var(--mp-ink-soft);
}

.elementor-button {
  font-family: var(--mp-sans) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 12.5px !important;
  padding: 16px 28px !important;
  border-radius: 999px !important;
  transition: all 0.35s var(--mp-ease) !important;
}

/* =========================================================================
   SELECTION & SCROLLBAR
   ========================================================================= */

::selection {
  background: var(--mp-caramel);
  color: var(--mp-bg);
}

::-moz-selection {
  background: var(--mp-caramel);
  color: var(--mp-bg);
}

/* Scrollbar personnalisée (Webkit uniquement) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--mp-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--mp-hair);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mp-caramel);
}