/* =========================================================
   MAISON NOYAU — PRESETS & UTILITAIRES
   =========================================================
   Comment utiliser ces classes dans WordPress ?
   → Dans l'éditeur Gutenberg, sélectionner un bloc
   → Panneau droit → "Avancé" → "Classe(s) CSS supplémentaire(s)"
   → Taper le nom de la classe (ex: mn-bg-dark)

   Ces classes fonctionnent sur TOUS les blocs Kadence et Gutenberg.
   ========================================================= */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BOUTONS — PRESETS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Applique sur un bloc "Bouton" Gutenberg / Kadence
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Base commune à tous les boutons */
.mn-btn-primary .wp-block-button__link,
.mn-btn-secondary .wp-block-button__link,
.mn-btn-outline .wp-block-button__link,
.mn-btn-outline-gold .wp-block-button__link,
.mn-btn-ghost .wp-block-button__link,
.mn-btn-danger .wp-block-button__link {
  font-family: var(--mn-font-sans) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: var(--mn-radius-sm) !important;
  padding: 14px 32px !important;
  transition:
    background-color var(--mn-duration-base) var(--mn-ease),
    color var(--mn-duration-base) var(--mn-ease),
    border-color var(--mn-duration-base) var(--mn-ease),
    transform var(--mn-duration-fast) var(--mn-ease) !important;
  text-decoration: none !important;
}

.mn-btn-primary .wp-block-button__link,
.mn-btn-secondary .wp-block-button__link,
.mn-btn-outline .wp-block-button__link,
.mn-btn-outline-gold .wp-block-button__link,
.mn-btn-ghost .wp-block-button__link,
.mn-btn-danger .wp-block-button__link {
  display: inline-block;
}

.mn-btn-primary .wp-block-button__link:hover,
.mn-btn-secondary .wp-block-button__link:hover,
.mn-btn-outline .wp-block-button__link:hover,
.mn-btn-outline-gold .wp-block-button__link:hover {
  transform: translateY(-1px);
}


/* ── Bouton Principal : indigo fond, crème texte ───────── */
.mn-btn-primary .wp-block-button__link {
  background-color: var(--mn-accent) !important;
  color: var(--mn-cream) !important;
  border: 1.5px solid var(--mn-accent) !important;
}
.mn-btn-primary .wp-block-button__link:hover {
  background-color: transparent !important;
  color: var(--mn-accent) !important;
}

/* ── Bouton Secondaire : or fond, marine texte ─────────── */
.mn-btn-secondary .wp-block-button__link {
  background-color: var(--mn-gold) !important;
  color: var(--mn-black) !important;
  border: 1.5px solid var(--mn-gold) !important;
}
.mn-btn-secondary .wp-block-button__link:hover {
  background-color: transparent !important;
  color: var(--mn-gold) !important;
}

/* ── Bouton Outline Sombre : transparent, bordure marine ─ */
.mn-btn-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--mn-black) !important;
  border: 1.5px solid var(--mn-black) !important;
}
.mn-btn-outline .wp-block-button__link:hover {
  background-color: var(--mn-black) !important;
  color: var(--mn-cream) !important;
}

/* ── Bouton Outline Or : transparent, bordure or ──────── */
.mn-btn-outline-gold .wp-block-button__link {
  background-color: transparent !important;
  color: var(--mn-gold) !important;
  border: 1.5px solid var(--mn-gold) !important;
}
.mn-btn-outline-gold .wp-block-button__link:hover {
  background-color: var(--mn-gold) !important;
  color: var(--mn-black) !important;
}

/* ── Bouton Fantôme : juste texte, pas de fond ────────── */
.mn-btn-ghost .wp-block-button__link {
  background-color: transparent !important;
  color: var(--mn-black-soft) !important;
  border: 1.5px solid transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative;
}
.mn-btn-ghost .wp-block-button__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--mn-accent);
  transform: scaleX(0);
  transition: transform var(--mn-duration-base) var(--mn-ease);
}
.mn-btn-ghost .wp-block-button__link:hover { color: var(--mn-accent) !important; }
.mn-btn-ghost .wp-block-button__link:hover::after { transform: scaleX(1); }

/* ── Bouton Clair (sur fond sombre) ────────────────────── */
.mn-btn-light .wp-block-button__link {
  background-color: var(--mn-cream) !important;
  color: var(--mn-black) !important;
  border: 1.5px solid var(--mn-cream) !important;
}
.mn-btn-light .wp-block-button__link:hover {
  background-color: transparent !important;
  color: var(--mn-cream) !important;
}

/* ── Bouton Petit ────────────────────────────────────────── */
.mn-btn-sm .wp-block-button__link {
  padding: 8px 20px !important;
  font-size: 0.7rem !important;
}

/* ── Bouton Large ───────────────────────────────────────── */
.mn-btn-lg .wp-block-button__link {
  padding: 18px 48px !important;
  font-size: 0.875rem !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FONDS DE SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Applique sur un bloc "Groupe" Gutenberg / Kadence Row
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mn-bg-cream   { background-color: var(--mn-cream) !important; }
.mn-bg-paper   { background-color: var(--mn-cream-paper) !important; }
.mn-bg-white   { background-color: #ffffff !important; }
.mn-bg-dark    { background-color: var(--mn-black) !important; }
.mn-bg-accent  { background-color: var(--mn-accent) !important; }
.mn-bg-accent-mid { background-color: var(--mn-accent-mid) !important; }
.mn-bg-gold-light { background-color: var(--mn-gold-pale) !important; }

/* Couleur du texte sur fonds sombres */
.mn-bg-dark    h1, .mn-bg-dark    h2, .mn-bg-dark    h3,
.mn-bg-dark    h4, .mn-bg-dark    p,  .mn-bg-dark    li  { color: var(--mn-cream) !important; }
.mn-bg-accent  h1, .mn-bg-accent  h2, .mn-bg-accent  h3,
.mn-bg-accent  h4, .mn-bg-accent  p,  .mn-bg-accent  li  { color: var(--mn-cream) !important; }
.mn-bg-accent-mid h1, .mn-bg-accent-mid h2, .mn-bg-accent-mid h3,
.mn-bg-accent-mid p { color: var(--mn-cream) !important; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ESPACEMENT VERTICAL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mn-py-xs  { padding-top: 32px  !important; padding-bottom: 32px  !important; }
.mn-py-sm  { padding-top: 56px  !important; padding-bottom: 56px  !important; }
.mn-py-md  { padding-top: 80px  !important; padding-bottom: 80px  !important; }
.mn-py-lg  { padding-top: 112px !important; padding-bottom: 112px !important; }
.mn-py-xl  { padding-top: 160px !important; padding-bottom: 160px !important; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LARGEUR MAXIMALE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mn-max-xs  { max-width: 480px  !important; margin-left: auto !important; margin-right: auto !important; }
.mn-max-sm  { max-width: 640px  !important; margin-left: auto !important; margin-right: auto !important; }
.mn-max-md  { max-width: 900px  !important; margin-left: auto !important; margin-right: auto !important; }
.mn-max-lg  { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TYPOGRAPHIE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mn-serif         { font-family: var(--mn-font-serif) !important; }
.mn-serif-italic  { font-family: var(--mn-font-serif) !important; font-style: italic !important; }
.mn-script        { font-family: var(--mn-font-script) !important; }
.mn-sans          { font-family: var(--mn-font-sans)   !important; }

.mn-text-xs    { font-size: 0.75rem  !important; }
.mn-text-sm    { font-size: 0.875rem !important; }
.mn-text-lg    { font-size: 1.25rem  !important; }
.mn-text-xl    { font-size: 1.5rem   !important; }
.mn-text-2xl   { font-size: 2rem     !important; }
.mn-text-hero  { font-size: clamp(2.5rem, 6vw, 5rem) !important; line-height: 1.1 !important; }

.mn-text-gold    { color: var(--mn-gold)         !important; }
.mn-text-accent  { color: var(--mn-accent)        !important; }
.mn-text-cream   { color: var(--mn-cream)         !important; }
.mn-text-muted   { color: var(--mn-black-soft)    !important; opacity: 0.65; }
.mn-text-red     { color: var(--mn-red)           !important; }

.mn-uppercase  { text-transform: uppercase  !important; letter-spacing: 0.1em !important; }
.mn-tracking   { letter-spacing: 0.15em     !important; }
.mn-weight-300 { font-weight: 300 !important; }
.mn-weight-400 { font-weight: 400 !important; }
.mn-weight-500 { font-weight: 500 !important; }
.mn-weight-600 { font-weight: 600 !important; }

/* Ligne décorative or sous un titre */
.mn-title-with-line {
  position: relative;
  padding-bottom: 20px;
}
.mn-title-with-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--mn-gold);
}
.mn-title-with-line.text-center::after,
.mn-title-with-line.has-text-align-center::after {
  left: 50%;
  transform: translateX(-50%);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARTES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Carte simple blanche */
.mn-card {
  background: #fff;
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-md);
  overflow: hidden;
  transition: transform var(--mn-duration-base) var(--mn-ease),
              box-shadow var(--mn-duration-base) var(--mn-ease);
}
.mn-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mn-shadow-md);
}

/* Carte produit (fond écru) */
.mn-card-product {
  background: var(--mn-cream-paper);
  border: 1px solid var(--mn-border-gold);
  border-radius: var(--mn-radius-md);
  overflow: hidden;
  transition: transform var(--mn-duration-base) var(--mn-ease),
              box-shadow var(--mn-duration-base) var(--mn-ease);
}
.mn-card-product:hover {
  transform: translateY(-4px);
  box-shadow: var(--mn-shadow-gold);
}

/* Carte sombre */
.mn-card-dark {
  background: var(--mn-black);
  border: 1px solid rgba(244,239,227,0.1);
  border-radius: var(--mn-radius-md);
  overflow: hidden;
}
.mn-card-dark h2, .mn-card-dark h3, .mn-card-dark p { color: var(--mn-cream) !important; }

/* Padding interne card */
.mn-card-body { padding: 28px; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DIVIDERS DÉCORATIFS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Applique sur un bloc "Séparateur" */
.mn-divider-gold.wp-block-separator {
  border: none !important;
  background-color: var(--mn-gold) !important;
  height: 1px !important;
  width: 40px !important;
  margin: 24px auto !important;
  opacity: 1 !important;
}
.mn-divider-gold-left.wp-block-separator {
  margin-left: 0 !important;
}
.mn-divider-full.wp-block-separator {
  width: 100% !important;
  background-color: var(--mn-border) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   IMAGES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Image avec ombre portée */
.mn-img-shadow figure img,
.mn-img-shadow img { box-shadow: var(--mn-shadow-lg) !important; }

/* Image arrondie légèrement */
.mn-img-rounded figure img,
.mn-img-rounded img { border-radius: var(--mn-radius-md) !important; }

/* Ratio carré forcé */
.mn-img-square figure img,
.mn-img-square img {
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
}

/* Ratio portrait */
.mn-img-portrait figure img,
.mn-img-portrait img {
  aspect-ratio: 3/4 !important;
  object-fit: cover !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANIMATIONS — CLASSES APPLICABLES DEPUIS L'ÉDITEUR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Ajouter mn-fade sur n'importe quel bloc pour un fade-in au scroll */
.mn-fade   { opacity: 0; transform: translateY(20px);  transition: opacity 0.6s ease, transform 0.6s ease; }
.mn-fade-l { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.mn-fade-r { opacity: 0; transform: translateX(30px);  transition: opacity 0.6s ease, transform 0.6s ease; }

.mn-fade.in-view,
.mn-fade-l.in-view,
.mn-fade-r.in-view { opacity: 1; transform: translate(0); }

.mn-delay-1 { transition-delay: 0.1s !important; }
.mn-delay-2 { transition-delay: 0.2s !important; }
.mn-delay-3 { transition-delay: 0.3s !important; }
.mn-delay-4 { transition-delay: 0.4s !important; }
.mn-delay-5 { transition-delay: 0.5s !important; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAVIGATION — CORRECTION MENU HOMEPAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Assure la visibilité du menu sur toutes les pages */
.site-header .main-navigation,
.header-navigation-wrap .main-navigation {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Transparent header sur la homepage — texte blanc si hero sombre */
.home .site-header:not(.scrolled) .main-navigation a,
.home .site-header:not(.scrolled) .site-title a {
  color: var(--mn-cream);
}
.home .site-header:not(.scrolled) .main-navigation a::after {
  background-color: var(--mn-gold);
}
.home .site-header:not(.scrolled) {
  background-color: transparent;
  border-bottom-color: transparent;
}

/* Header opaque dès le scroll */
.home .site-header.scrolled,
.site-header.scrolled {
  background-color: var(--mn-cream) !important;
  border-bottom: 1px solid var(--mn-border) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WOOCOMMERCE — FIXES FONCTIONNELS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Les liens produits dans les cards homepage → pointer cursor */
.mn-card-product a,
.mn-card a { cursor: pointer; text-decoration: none; }

/* Prix WooCommerce — style NDP */
.woocommerce .price,
.woocommerce-Price-amount {
  font-family: var(--mn-font-serif) !important;
  color: var(--mn-accent) !important;
  font-size: 1.25rem !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  .mn-py-lg  { padding-top: 64px  !important; padding-bottom: 64px  !important; }
  .mn-py-xl  { padding-top: 80px  !important; padding-bottom: 80px  !important; }
  .mn-text-hero { font-size: clamp(2rem, 8vw, 3.5rem) !important; }
}