/* =============================================================
   MAISON MÂCONNAISE DES VINS
   Uniformisation des blocs "photo" de la page d'accueil (hors hero)
   Portée : textes de corps + boutons
   -------------------------------------------------------------
   Blocs concernés :
     .mmv-restaurant-hero   → « Le Restaurant » (moitié texte / moitié photo)
     .mdv-maison-section    → « Une Maison née du vin »
     .mdv-caveau2-section   → « Le Caveau »
     .mmv-lieu-rencontre    → « Un Lieu de rencontre »

   Un seul endroit, une seule fois : ne PAS dupliquer ces règles
   dans les widgets HTML Elementor. Toutes les valeurs se pilotent
   depuis le bloc :root ci-dessous.

   Pourquoi "body ..." + !important : les widgets Elementor
   embarquent leurs propres <style>, dont celui du bloc Restaurant
   qui utilise !important partout. Ce snippet fait autorité sur
   ces 4 blocs — c'est ici, et nulle part ailleurs, qu'on règle
   la taille des textes et l'allure des boutons.

   POUR AJOUTER UN NOUVEAU BLOC DU MÊME TYPE :
   ajouter son sélecteur de paragraphe dans la liste §1,
   sa rangée de boutons dans §2, son bouton dans §3. Rien d'autre.
   ============================================================= */

:root {
  /* Couleurs */
  --mdv-cream:      #FFFBF0;  /* texte sur fond sombre */
  --mdv-cream-ink:  #2B2117;  /* texte au survol d'un bouton clair */
  --mdv-brown:      #493518;  /* bordure / texte des boutons sur fond clair */
  --mdv-brown-text: #4D392A;  /* paragraphes sur fond clair */

  /* Typographie de corps */
  --mdv-body-font:    "Alegreya", serif;
  --mdv-body-size:    18px;
  --mdv-body-lh:      1.65;
  --mdv-body-track:   0.2px;
  --mdv-measure:      560px;  /* largeur de lecture max */
  --mdv-para-gap:     14px;   /* entre deux paragraphes */
  --mdv-block-gap:    32px;   /* entre le texte et les boutons */

  /* Boutons */
  --mdv-btn-size:     15px;
  --mdv-btn-track:    2px;
  --mdv-btn-padding:  15px clamp(22px, 2.4vw, 34px);
  --mdv-btn-border:   1px;
  --mdv-btn-gap:      16px;   /* entre deux boutons voisins */
}

/* ---------- 1. Paragraphes ---------- */

body .mmv-restaurant-hero .mmv-body,
body .mdv-maison-text,
body .mdv-caveau2-text,
body .mmv-lieu-rencontre p {
  font-family: var(--mdv-body-font) !important;
  font-size: var(--mdv-body-size) !important;
  font-weight: 400 !important;
  line-height: var(--mdv-body-lh) !important;
  letter-spacing: var(--mdv-body-track) !important;
  max-width: var(--mdv-measure) !important;
  margin: 0 0 var(--mdv-para-gap) !important;
}

/* Couleur : crème sur fond sombre, brun sur le fond clair du Caveau */
body .mmv-restaurant-hero .mmv-body,
body .mdv-maison-text,
body .mmv-lieu-rencontre p {
  color: var(--mdv-cream) !important;
}
body .mdv-caveau2-text {
  color: var(--mdv-brown-text) !important;
}

/* Blocs à texte centré : la colonne de lecture reste centrée */
body .mmv-restaurant-hero .mmv-body,
body .mdv-caveau2-text {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Dernier paragraphe : pas de marge résiduelle,
   l'écart aux boutons est porté par --mdv-block-gap */
body .mmv-restaurant-hero .mmv-body:last-of-type,
body .mdv-maison-text:last-of-type,
body .mdv-caveau2-text:last-of-type,
body .mmv-lieu-rencontre p:last-of-type {
  margin-bottom: 0 !important;
}

/* ---------- 2. Rangées de boutons ---------- */
/* Quand un bloc a un conteneur pour ses boutons, c'est lui qui
   porte l'écart au texte et l'écart entre boutons. */

body .mmv-restaurant-hero .mmv-ctas,
body .mdv-caveau2-buttons {
  margin-top: var(--mdv-block-gap) !important;
  gap: var(--mdv-btn-gap) !important;
  flex-wrap: wrap !important;
}

/* ---------- 3. Boutons ---------- */

body .mmv-restaurant-hero .mmv-btn,
body .mdv-maison-btn,
body .mdv-caveau2-btn,
body .mmv-lieu-rencontre__btn {
  display: inline-block !important;
  font-family: var(--mdv-body-font) !important;
  font-size: var(--mdv-btn-size) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: var(--mdv-btn-track) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: var(--mdv-btn-padding) !important;
  border: var(--mdv-btn-border) solid currentColor !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin-top: var(--mdv-block-gap) !important;
  transition: background-color .25s ease, color .25s ease !important;
}

/* Boutons déjà dans une rangée : l'écart est porté par la rangée */
body .mmv-restaurant-hero .mmv-btn,
body .mdv-caveau2-btn {
  margin-top: 0 !important;
}

/* Boutons sur fond sombre */
body .mmv-restaurant-hero .mmv-btn,
body .mdv-maison-btn,
body .mmv-lieu-rencontre__btn {
  color: var(--mdv-cream) !important;
}
body .mmv-restaurant-hero .mmv-btn:hover,
body .mmv-restaurant-hero .mmv-btn:focus-visible,
body .mdv-maison-btn:hover,
body .mdv-maison-btn:focus-visible,
body .mmv-lieu-rencontre__btn:hover,
body .mmv-lieu-rencontre__btn:focus-visible {
  background: var(--mdv-cream) !important;
  color: var(--mdv-cream-ink) !important;
}

/* Bouton sur fond clair (Caveau) */
body .mdv-caveau2-btn {
  color: var(--mdv-brown) !important;
}
body .mdv-caveau2-btn:hover,
body .mdv-caveau2-btn:focus-visible {
  background: var(--mdv-brown) !important;
  color: var(--mdv-cream) !important;
}

/* ---------- 4. Bloc Restaurant : mise en page ---------- */
/* Split 50/50 (texte a gauche, photo a droite). Sa colonne de texte
   etait trop etroite : le sur-titre debordait et les 2 boutons
   passaient l'un sous l'autre. */

body .mmv-restaurant-hero .mmv-left {
  padding: clamp(56px, 6vw, 80px) clamp(24px, 4vw, 72px) !important;
}

/* Le PNG du titre "Le Restaurant" contient ~37% de vide transparent
   en haut et en bas, ce qui eloignait le sur-titre. On le recadre a
   la volee (object-fit) plutot que de toucher au fichier source. */
/* Le PNG du titre "Le Restaurant" contient ~37% de vide transparent
   en haut et en bas, ce qui eloignait le sur-titre. On le recadre a
   la volee (object-fit) plutot que de toucher au fichier source. */
body .mmv-restaurant-hero .mmv-title-img {
  margin: 0 auto !important;
  aspect-ratio: 1601 / 470 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}

body .mmv-restaurant-hero .mmv-subtitle {
  font-size: clamp(10px, 1vw, 14px) !important;
  letter-spacing: 0.05em !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  margin: 0 0 30px !important;
}

body .mmv-restaurant-hero .mmv-ctas {
  justify-content: center !important;
}
body .mmv-restaurant-hero .mmv-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* ---------- 5. Mobile ---------- */

@media (max-width: 767px) {
  :root {
    --mdv-body-size:   17px;
    --mdv-btn-size:    14px;
    --mdv-btn-padding: 14px 28px;
    --mdv-block-gap:   26px;
    --mdv-btn-gap:     14px;
  }
}