/* ==========================================================
   BOULANGERIE MAREDSOUS — Habillage vitrine SiteOrigin
   Inspiré de la page historique boulangerie-maredsous.be
   Compatible thèmes classiques (Twenty Twenty-One) et blocs
   (Twenty Twenty-Five). Uniquement pages contenant SiteOrigin.
   Aucun impact intentionnel sur le tunnel de commande WooCommerce.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Abel&family=Balthazar&family=Dosis:wght@400;500;600;700&display=swap');

body.page:has(.panel-layout) {
  --bm-ivoire: #ffffff;
  --bm-beige: #ebdfb5;
  --bm-or: #ae9a63;
  --bm-prune: #422143;
  --bm-noir: #111111;
  --bm-texte: #333333;
  background: #fff;
}

/* ===== CADRE GLOBAL / THÈME WORDPRESS ===== */
body.page:has(.panel-layout) .wp-site-blocks,
body.page:has(.panel-layout) #page,
body.page:has(.panel-layout) .site { overflow-x: clip; }

/* Masquer uniquement le titre de la page HOME, pas les titres SiteOrigin */
body.page:has(.panel-layout) .wp-block-post-title,
body.page:has(.panel-layout) .entry-header .entry-title,
body.page:has(.panel-layout) h1.entry-title { display: none !important; }

body.page:has(.panel-layout) main,
body.page:has(.panel-layout) #primary,
body.page:has(.panel-layout) .site-main,
body.page:has(.panel-layout) .site-content,
body.page:has(.panel-layout) article.page,
body.page:has(.panel-layout) .entry-content,
body.page:has(.panel-layout) .wp-block-post-content {
  max-width: none !important;
  width: 100%;
  margin-block: 0 !important;
  padding-block: 0 !important;
}
body.page:has(.panel-layout) .wp-block-post-content,
body.page:has(.panel-layout) .entry-content { padding-inline: 0 !important; }
body.page:has(.panel-layout) .entry-content > .panel-layout,
body.page:has(.panel-layout) .wp-block-post-content > .panel-layout {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ===== EN-TÊTE NATIF (logo + navigation à configurer dans WordPress) ===== */
body.page:has(.panel-layout) .wp-site-blocks > header,
body.page:has(.panel-layout) header#masthead {
  background: #fff;
  border-top: 5px solid #24292a;
  border-bottom: 1px solid #e6e6e6;
  box-shadow: none;
}
body.page:has(.panel-layout) .wp-site-blocks > header > .wp-block-group,
body.page:has(.panel-layout) .wp-site-blocks > header .is-layout-constrained,
body.page:has(.panel-layout) header#masthead .site-header-inner {
  max-width: 1160px;
  margin-inline: auto;
}
body.page:has(.panel-layout) .wp-site-blocks > header > .wp-block-group { padding: 12px 24px; }
body.page:has(.panel-layout) .wp-block-site-logo img,
body.page:has(.panel-layout) .custom-logo {
  width: auto !important;
  max-width: 210px;
  max-height: 74px;
  object-fit: contain;
}
body.page:has(.panel-layout) .wp-block-navigation a,
body.page:has(.panel-layout) .primary-navigation a,
body.page:has(.panel-layout) .site-header a {
  font-family: 'Dosis', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
body.page:has(.panel-layout) .wp-block-navigation a:hover,
body.page:has(.panel-layout) .primary-navigation a:hover { color: var(--bm-or); }

/* ===== TYPOGRAPHIE SITEORIGIN ===== */
body.page:has(.panel-layout) .panel-layout {
  color: var(--bm-texte);
  font-family: 'Abel', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
body.page:has(.panel-layout) .panel-layout p,
body.page:has(.panel-layout) .panel-layout li,
body.page:has(.panel-layout) .panel-layout h4 {
  font-family: 'Abel', Arial, sans-serif !important;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}
body.page:has(.panel-layout) .panel-layout h1,
body.page:has(.panel-layout) .panel-layout h2,
body.page:has(.panel-layout) .panel-layout .so-widget-sow-headline h1,
body.page:has(.panel-layout) .panel-layout .so-widget-sow-headline h2 {
  font-family: 'Balthazar', Georgia, serif !important;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--bm-texte);
}
body.page:has(.panel-layout) .panel-layout h3,
body.page:has(.panel-layout) .panel-layout .widget-title {
  font-family: 'Balthazar', Georgia, serif;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.3;
}
body.page:has(.panel-layout) .panel-layout h6 {
  font-family: 'Balthazar', Georgia, serif;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 400;
}
body.page:has(.panel-layout) .panel-layout a { color: var(--bm-prune); }
body.page:has(.panel-layout) .panel-layout img {
  max-width: 100%;
  height: auto;
}

/* ===== PREMIÈRE SECTION PHOTO + TEXTE ===== */
/* La première ligne exportée contient un ancien fil d'Ariane,
   la deuxième la véritable introduction. */
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(1) {
  display: none; /* ancien widget Breadcrumb NavXT */
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(2) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: #fff;
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(2) > .panel-row-style {
  max-width: 1120px !important;
  margin-inline: auto !important;
  padding: 56px 24px !important;
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(2) img {
  display: block;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

/* ===== SECTION BEIGE « LE COMPTOIR » ===== */
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(3) {
  margin-bottom: 0 !important;
  background: var(--bm-beige);
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(3) > .panel-row-style {
  background: var(--bm-beige) !important;
  padding: 54px 24px 66px !important;
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(3) .panel-grid-cell {
  max-width: 1040px;
  margin-inline: auto;
  text-align: center;
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(3) .widget-title { text-align: center; }

/* ===== DEUX BANNIÈRES DE COMMANDE ===== */
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(4) {
  margin: 0 !important;
  background: #14100e;
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(4) > .panel-row-style { gap: 0 !important; }
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(4) .panel-grid-cell { margin: 0 !important; }
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(4) .sow-slider-base { overflow: hidden; }
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(4) .sow-slider-image {
  background-position: center center !important;
  background-size: cover !important;
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(4) .ow-button-base a {
  font-family: 'Dosis', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.3;
  text-transform: uppercase;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 24px !important;
}

/* ===== BOUTONS STANDARD SITEORIGIN ===== */
body.page:has(.panel-layout) .ow-button-base a {
  font-family: 'Dosis', Arial, sans-serif;
  font-size: 15px;
  text-decoration: none !important;
  border-radius: 2px !important;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
body.page:has(.panel-layout) .ow-button-base a:hover { transform: translateY(-1px); }
body.page:has(.panel-layout) .ow-button-base a:focus-visible,
body.page:has(.panel-layout) .wp-block-navigation a:focus-visible {
  outline: 2px solid var(--bm-prune);
  outline-offset: 4px;
}

/* ===== POINTS DE VENTE ===== */
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(5) > .panel-row-style {
  padding: 54px 24px 16px !important;
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(5) .panel-grid-cell { text-align: center; }
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(6),
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(7),
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(8) {
  max-width: 1120px;
  margin-inline: auto !important;
  padding-inline: 24px;
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(6) img {
  max-width: 390px;
  margin-inline: auto;
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(8) {
  padding-top: 15px;
  padding-bottom: 48px;
  text-align: center;
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(8) p {
  font-size: 14px;
  line-height: 1.45;
}

/* ===== DERNIÈRE SECTION BEIGE « L'ABBAYE » ===== */
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(9) {
  background: var(--bm-beige);
  margin-bottom: 0 !important;
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(9) > .panel-row-style {
  background: var(--bm-beige) !important;
  padding: 55px max(24px, calc((100vw - 1120px) / 2)) !important;
}
body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(9) img { width: 100%; }

/* ===== FOOTER PERSONNALISÉ : bloc HTML fourni séparément ===== */
.bm-footer {
  background: #050505;
  color: #ddd;
  margin: 0;
  padding: 52px 24px 20px;
  font: 15px/1.55 'Abel', Arial, sans-serif;
}
.bm-footer * { box-sizing: border-box; }
.bm-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) repeat(3, minmax(150px, 1fr));
  gap: 32px;
}
.bm-footer__brand {
  font: 30px/1.05 'Balthazar', Georgia, serif;
  color: #e6d7a5;
}
.bm-footer__brand img { max-width: 190px; max-height: 95px; object-fit: contain; }
.bm-footer h3 {
  font: 18px/1.25 'Dosis', Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f1e7c7;
  margin: 0 0 15px;
}
.bm-footer p { margin: 0 0 10px; }
.bm-footer a { color: #dedede; text-decoration: none; }
.bm-footer a:hover { color: #e6d7a5; text-decoration: underline; }
.bm-footer__bottom {
  max-width: 1120px;
  margin: 40px auto 0;
  padding-top: 17px;
  border-top: 1px solid #343434;
  font-size: 13px;
  color: #a3a3a3;
  text-align: center;
}

/* ===== MOBILE / TABLETTES ===== */
@media (max-width: 900px) {
  body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(2) > .panel-row-style {
    padding: 34px 20px !important;
  }
  body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(8) .panel-grid-cell {
    min-width: calc(33.333% - 10px);
    margin-bottom: 24px;
  }
  .bm-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body.page:has(.panel-layout) .panel-layout { font-size: 16px; }
  body.page:has(.panel-layout) .panel-layout p,
  body.page:has(.panel-layout) .panel-layout h4 { font-size: 16px; }
  body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(2) .panel-grid-cell,
  body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(6) .panel-grid-cell,
  body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(9) .panel-grid-cell {
    width: 100% !important;
    margin-bottom: 18px;
  }
  body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(3) > .panel-row-style {
    padding: 40px 18px 44px !important;
  }
  body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(4) .panel-grid-cell {
    width: 100% !important;
  }
  body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(4) .sow-slider-image,
  body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(4) .sow-slider-base {
    min-height: 240px;
  }
  body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(8) .panel-grid-cell {
    min-width: calc(50% - 8px);
    margin-bottom: 18px;
  }
  body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(9) > .panel-row-style {
    padding: 38px 20px !important;
  }
  .bm-footer { padding: 35px 20px 18px; }
  .bm-footer__inner { gap: 24px; }
}
@media (max-width: 480px) {
  body.page:has(.panel-layout) .panel-layout > .panel-grid:nth-child(8) .panel-grid-cell {
    min-width: 100%;
  }
  .bm-footer__inner { grid-template-columns: 1fr; }
}