{"id":16,"date":"2026-03-27T16:41:53","date_gmt":"2026-03-27T16:41:53","guid":{"rendered":"https:\/\/mm-db.be\/?page_id=16"},"modified":"2026-07-07T16:05:58","modified_gmt":"2026-07-07T16:05:58","slug":"16-2","status":"publish","type":"page","link":"https:\/\/mm-db.be\/index.php\/fr\/16-2\/","title":{"rendered":""},"content":{"rendered":"\n<!-- \n  M&M Design & Build \u2014 Gutenberg Custom HTML Block\n  Copiez tout ce bloc dans un bloc \"HTML personnalis\u00e9\" dans Gutenberg\n-->\n\n<script>\n  \/\/ Force le bloc parent \u00e0 prendre toute la largeur\n  document.addEventListener('DOMContentLoaded', function () {\n    var block = document.querySelector('.wp-block-html');\n    if (block) {\n      block.style.cssText = 'margin:0!important;padding:0!important;max-width:100%!important;';\n      var parent = block.parentElement;\n      while (parent && parent !== document.body) {\n        parent.style.maxWidth = '100%';\n        parent.style.padding = '0';\n        parent.style.margin = '0';\n        parent = parent.parentElement;\n      }\n    }\n  });\n<\/script>\n\n<style>\n  \/* ===== HELLO THEME \u2014 SUPPRESSION BORDURES BLANCHES ===== *\/\n  html,\n  body {\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow-x: hidden;\n    background: rgba(185, 155, 120, 0.65) !important;\n\n  }\n\n  .goog-te-banner-frame,\n  .skiptranslate {\n    display: none !important;\n  }\n\n\n  .site-main,\n  .page-content,\n  .entry-content,\n  #content,\n  #primary,\n  article,\n  .post-content {\n    padding: 0 !important;\n    margin: 0 !important;\n    max-width: 100% !important;\n  }\n\n  .wp-block-html,\n  .wp-block-group,\n  .wp-block-post-content,\n  .is-layout-flow,\n  .is-layout-constrained {\n    padding: 0 !important;\n    margin: 0 !important;\n    max-width: 100% !important;\n  }\n\n  .wp-site-blocks,\n  .wp-site-blocks>* {\n    padding: 0 !important;\n    margin: 0 !important;\n  }\n\n  \/* Cache le header natif Hello pour \u00e9viter le doublon *\/\n  .site-header {\n    display: none !important;\n  }\n\n  .site-footer,\n  footer.elementor-section,\n  #colophon,\n  .footer-widgets,\n  .site-info {\n    display: none !important;\n  }\n\n  \/* ===== RESET & BASE ===== *\/\n  .mm-header-wrap * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  \/* ===== VARIABLES ===== *\/\n  :root {\n    --mm-red: #c0404a;\n    --mm-red-nav: rgba(176, 58, 64, 0.92);\n    --mm-cream: #f5f0eb;\n    --mm-white: #ffffff;\n    --mm-dark: #1a1a1a;\n    --mm-font-display: 'Cormorant Garamond', Georgia, serif;\n    --mm-font-nav: 'Montserrat', sans-serif;\n  }\n\n  \/* ===== GOOGLE FONTS ===== *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;600&display=swap');\n\n  \/* ===========================\n     NAVBAR\n  =========================== *\/\n\n\n  .mm-header-wrap {\n    position: relative;\n    width: 100%;\n    font-family: var(--mm-font-nav);\n\n  }\n\n  .mm-navbar {\n    position: relative;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 100;\n    background: var(--mm-red-nav);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 40px;\n    height: 90px;\n    backdrop-filter: blur(4px);\n  }\n\n  \/* Logo *\/\n  .mm-logo {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-decoration: none;\n    gap: 2px;\n  }\n\n  .mm-logo-icon {\n    width: 52px;\n    height: 52px;\n  }\n\n  .mm-logo-text {\n    font-family: var(--mm-font-nav);\n    font-size: 9px;\n    font-weight: 300;\n    letter-spacing: 2px;\n    color: var(--mm-white);\n    text-transform: uppercase;\n  }\n\n  \/* Nav links *\/\n  .mm-nav-links {\n    display: flex;\n    align-items: center;\n    gap: 38px;\n    list-style: none;\n  }\n\n  .mm-nav-links a {\n    color: var(--mm-white);\n    text-decoration: none;\n    font-size: 13px;\n    font-weight: 400;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    position: relative;\n    padding-bottom: 4px;\n    transition: opacity 0.2s;\n  }\n\n  .mm-nav-links a::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 0;\n    height: 1px;\n    background: var(--mm-white);\n    transition: width 0.3s ease;\n  }\n\n  .mm-nav-links a:hover::after {\n    width: 100%;\n  }\n\n  .mm-nav-links a:hover {\n    opacity: 0.85;\n  }\n\n  \/* Language switcher *\/\n  .mm-lang {\n    display: flex;\n    gap: 14px;\n    list-style: none;\n  }\n\n  .mm-lang a {\n    color: var(--mm-white);\n    text-decoration: none;\n    font-size: 12px;\n    font-weight: 600;\n    letter-spacing: 1.5px;\n    opacity: 0.75;\n    transition: opacity 0.2s;\n  }\n\n  .mm-lang a:hover,\n  .mm-lang a.active {\n    opacity: 1;\n  }\n\n  \/* Hamburger (mobile) *\/\n  .mm-hamburger {\n    display: none;\n    flex-direction: column;\n    gap: 5px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 4px;\n  }\n\n  .mm-hamburger span {\n    display: block;\n    width: 26px;\n    height: 2px;\n    background: var(--mm-white);\n    border-radius: 2px;\n    transition: transform 0.3s, opacity 0.3s;\n  }\n\n  .mm-hamburger.open span:nth-child(1) {\n    transform: translateY(7px) rotate(45deg);\n  }\n\n  .mm-hamburger.open span:nth-child(2) {\n    opacity: 0;\n  }\n\n  .mm-hamburger.open span:nth-child(3) {\n    transform: translateY(-7px) rotate(-45deg);\n  }\n\n  \/* Mobile nav drawer *\/\n\n\n  .mm-mobile-nav {\n    display: none;\n    position: absolute;\n    top: 90px;\n    left: 0;\n    right: 0;\n    background: var(--mm-red-nav);\n    backdrop-filter: blur(6px);\n    z-index: 99;\n    padding: 20px 30px 30px;\n    flex-direction: column;\n    gap: 20px;\n  }\n\n  .mm-mobile-nav.open {\n    display: flex;\n  }\n\n  .mm-mobile-nav a {\n    color: var(--mm-white);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 400;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.15);\n    padding-bottom: 14px;\n  }\n\n  .mm-mobile-lang {\n    display: flex;\n    gap: 16px;\n    margin-top: 4px;\n  }\n\n  .mm-mobile-lang a {\n    border: none;\n    padding: 0;\n    font-weight: 600;\n    font-size: 12px;\n    opacity: 0.75;\n  }\n\n  \/* ===========================\n     HERO SLIDER\n  =========================== *\/\n  .mm-hero {\n    position: relative;\n    width: 100%;\n    height: 100vh;\n    min-height: 560px;\n    overflow: hidden;\n  }\n\n  \/* Slides *\/\n  .mm-slides {\n    display: flex;\n    width: 300%;\n    height: 100%;\n    transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1);\n  }\n\n  .mm-slide {\n    width: 33.333%;\n    height: 100%;\n    position: relative;\n    flex-shrink: 0;\n  }\n\n  \/* Each slide background \u2014 remplacez les URLs par vos vraies images *\/\n  .mm-slide:nth-child(1) {\n    background: url('http:\/\/mm-db.be\/wp-content\/uploads\/2026\/04\/CABANON-FRANCE-2.jpg') center\/cover no-repeat;\n  }\n\n  .mm-slide:nth-child(2) {\n    background: url('http:\/\/mm-db.be\/wp-content\/uploads\/2026\/04\/FACADE-BRIQUETTE-2610.jpg') center\/cover no-repeat;\n  }\n\n  .mm-slide:nth-child(3) {\n    background: url('http:\/\/mm-db.be\/wp-content\/uploads\/2026\/04\/SDB-GESVES-PARENTS-2.jpg') center\/cover no-repeat;\n  }\n\n  \/* Red overlay *\/\n  .mm-slide::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: rgba(185, 155, 120, 0.45);\n  }\n\n  \/* Center content *\/\n  .mm-hero-content {\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 0;\n    text-align: center;\n    padding: 0 20px;\n    pointer-events: none;\n  }\n\n  \/* House outline SVG icon above logo letters *\/\n  .mm-hero-house {\n    width: 160px;\n    opacity: 0.85;\n    margin-bottom: -30px;\n  }\n\n  .mm-hero-brand {\n    font-family: var(--mm-font-display);\n    font-size: clamp(90px, 14vw, 160px);\n    font-weight: 600;\n    color: var(--mm-red);\n    line-height: 0.85;\n    letter-spacing: -2px;\n    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);\n    animation: mm-fade-up 1.1s ease both;\n  }\n\n  .mm-hero-sub {\n    font-family: var(--mm-font-display);\n    font-size: clamp(28px, 4.5vw, 52px);\n    font-weight: 400;\n    color: var(--mm-white);\n    letter-spacing: 1px;\n    margin-top: 10px;\n    animation: mm-fade-up 1.1s 0.2s ease both;\n  }\n\n  .mm-hero-tagline {\n    font-family: var(--mm-font-display);\n    font-size: clamp(16px, 2.2vw, 24px);\n    font-style: italic;\n    color: rgba(255, 255, 255, 0.9);\n    margin-top: 10px;\n    animation: mm-fade-up 1.1s 0.35s ease both;\n  }\n\n  @keyframes mm-fade-up {\n    from {\n      opacity: 0;\n      transform: translateY(22px);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  \/* Dots *\/\n  .mm-dots {\n    position: absolute;\n    bottom: 36px;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 20;\n    display: flex;\n    gap: 16px;\n  }\n\n  .mm-dot {\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    border: 2px solid rgba(255, 255, 255, 0.7);\n    background: transparent;\n    cursor: pointer;\n    transition: background 0.3s, border-color 0.3s;\n    position: relative;\n  }\n\n  .mm-dot.active {\n    background: var(--mm-red);\n    border-color: var(--mm-red);\n  }\n\n  \/* Arrow buttons *\/\n  .mm-arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 20;\n    background: rgba(255, 255, 255, 0.12);\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    color: white;\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    font-size: 22px;\n    transition: background 0.3s;\n    backdrop-filter: blur(4px);\n  }\n\n  .mm-arrow:hover {\n    background: rgba(192, 64, 74, 0.7);\n  }\n\n  .mm-arrow-prev {\n    left: 24px;\n  }\n\n  .mm-arrow-next {\n    right: 24px;\n  }\n\n  \/* ===========================\n     RESPONSIVE\n  =========================== *\/\n  @media (max-width: 900px) {\n\n    .mm-nav-links,\n    .mm-lang {\n      display: none;\n    }\n\n    .mm-hamburger {\n      display: flex;\n    }\n\n    .mm-navbar {\n      padding: 0 24px;\n    }\n  }\n\n  @media (max-width: 900px) {\n    .mm-hamburger {\n      display: flex;\n      order: 0;\n    }\n\n    .mm-logo {\n      position: absolute;\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n<\/style>\n\n<div class=\"mm-header-wrap\">\n\n\n\n  <!-- ===== NAVBAR ===== -->\n  <nav class=\"mm-navbar\">\n\n    <button class=\"mm-hamburger\" id=\"mmHamburger\" aria-label=\"Menu\">\n      <span><\/span><span><\/span><span><\/span>\n    <\/button>\n\n    <!-- Logo -->\n    <a href=\"https:\/\/mm-db.be\/index.php\/16-2\/\" class=\"mm-logo\">\n      <img decoding=\"async\" src=\"http:\/\/mm-db.be\/wp-content\/uploads\/2026\/06\/mm-logo-gris.png\" alt=\"M&#038;M Design &#038; Build\"\n        style=\"height: 70px; width: auto;\" style=\"height: 70px; width: auto; filter: brightness(0) invert(1);\">\n    <\/a>\n\n    <!-- Nav links -->\n    <ul class=\"mm-nav-links\">\n      <li><a href=\"https:\/\/mm-db.be\/index.php\/16-2\/\">Home<\/a><\/li>\n      <li><a href=\"https:\/\/mm-db.be\/index.php\/nos-services\/\">Nos services<\/a><\/li>\n      <li><a href=\"https:\/\/mm-db.be\/index.php\/devis\/\">Devis<\/a><\/li>\n      <li><a href=\"https:\/\/mm-db.be\/index.php\/nos-realisations\/\">Nos r\u00e9alisations<\/a><\/li>\n      <li><a href=\"https:\/\/mm-db.be\/index.php\/contact\/\">Contact<\/a><\/li>\n    <\/ul>\n\n    <div style=\"width:52px;\"><\/div>\n\n  <\/nav>\n\n  <!-- Mobile drawer -->\n  <div class=\"mm-mobile-nav\" id=\"mmMobileNav\">\n    <a href=\"https:\/\/mm-db.be\/index.php\/16-2\/\">Home<\/a>\n    <a href=\"https:\/\/mm-db.be\/index.php\/nos-services\/\">Nos services<\/a>\n    <a href=\"https:\/\/mm-db.be\/index.php\/devis\/\">Devis<\/a>\n    <a href=\"https:\/\/mm-db.be\/index.php\/nos-realisations\/\">Nos r\u00e9alisations<\/a>\n    <a href=\"https:\/\/mm-db.be\/index.php\/contact\/\">Contact<\/a>\n\n  <\/div>\n\n  <!-- ===== HERO SLIDER ===== -->\n  <div class=\"mm-hero\">\n\n    <div class=\"mm-slides\" id=\"mmSlides\">\n      <div class=\"mm-slide\"><\/div>\n      <div class=\"mm-slide\"><\/div>\n      <div class=\"mm-slide\"><\/div>\n    <\/div>\n\n    <!-- Centered brand overlay -->\n    <div class=\"mm-hero-content\">\n      <img decoding=\"async\" src=\"http:\/\/mm-db.be\/wp-content\/uploads\/2026\/06\/mm-logo-rose-fonce.png\" alt=\"M&#038;M Design &#038; Build\"\n        style=\"width: clamp(220px, 30vw, 400px); height: auto; opacity: 0.92;\">\n      <div class=\"mm-hero-tagline\">Vous r\u00eavez, nous cr\u00e9ons&nbsp;!<\/div>\n    <\/div>\n\n    <!-- Arrows -->\n    <button class=\"mm-arrow mm-arrow-prev\" id=\"mmPrev\" aria-label=\"Pr\u00e9c\u00e9dent\">&#8592;<\/button>\n    <button class=\"mm-arrow mm-arrow-next\" id=\"mmNext\" aria-label=\"Suivant\">&#8594;<\/button>\n\n    <!-- Dots -->\n    <div class=\"mm-dots\" id=\"mmDots\">\n      <button class=\"mm-dot\" data-index=\"0\" aria-label=\"Slide 1\"><\/button>\n      <button class=\"mm-dot active\" data-index=\"1\" aria-label=\"Slide 2\"><\/button>\n      <button class=\"mm-dot\" data-index=\"2\" aria-label=\"Slide 3\"><\/button>\n    <\/div>\n\n  <\/div>\n\n\n\n<\/div>\n\n<!-- ===========================\n     SECTION ABOUT \u2014 Une r\u00e9f\u00e9rence depuis 1986\n=========================== -->\n<style>\n  .mm-about {\n    width: 100%;\n    background: #b5a99a;\n    padding: 80px 60px;\n    box-sizing: border-box;\n    font-family: 'Cormorant Garamond', Georgia, serif;\n  }\n\n  .mm-about-inner {\n    max-width: 1200px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1fr 420px;\n    gap: 80px;\n    align-items: center;\n  }\n\n  .mm-about-title {\n    font-family: 'Cormorant Garamond', Georgia, serif;\n    font-size: clamp(32px, 4.5vw, 52px);\n    font-weight: 400;\n    color: #c0404a;\n    line-height: 1.15;\n    margin: 0 0 40px 0;\n  }\n\n  .mm-about-subtitle {\n    font-family: 'Montserrat', sans-serif;\n    font-size: 13px;\n    font-weight: 600;\n    color: #c0404a;\n    letter-spacing: 0.5px;\n    margin: 0 0 12px 0;\n  }\n\n  .mm-about-text {\n    font-family: 'Cormorant Garamond', Georgia, serif;\n    font-size: clamp(16px, 1.5vw, 19px);\n    font-weight: 400;\n    color: white;\n    line-height: 1.75;\n    text-align: justify;\n    margin: 0 0 22px 0;\n  }\n\n  .mm-about-text:last-child {\n    margin-bottom: 0;\n  }\n\n  \/* Arch image *\/\n  .mm-about-image-wrap {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .mm-about-arch {\n    width: 100%;\n    max-width: 420px;\n    aspect-ratio: 3\/4;\n    object-fit: cover;\n    border-radius: 200px 200px 0 0;\n    display: block;\n    background: url('http:\/\/mm-db.be\/wp-content\/uploads\/2026\/04\/STUDIO-NAM-1-scaled.jpeg') center\/cover no-repeat;\n    min-height: 480px;\n  }\n\n  @media (max-width: 860px) {\n    .mm-about-inner {\n      grid-template-columns: 1fr;\n      gap: 40px;\n      padding: 0;\n    }\n\n    .mm-about {\n      padding: 60px 30px;\n    }\n\n    .mm-about-image-wrap {\n      order: -1;\n    }\n\n    .mm-about-arch {\n      max-width: 320px;\n      min-height: 360px;\n      margin: 0 auto;\n    }\n  }\n<\/style>\n\n<section class=\"mm-about\">\n  <div class=\"mm-about-inner\">\n\n    <!-- Left: text -->\n    <div>\n      <h2 class=\"mm-about-title\">Une r\u00e9f\u00e9rence pour vos r\u00e9novations depuis 1986<\/h2>\n\n      <p class=\"mm-about-subtitle\">Anciennement M&amp;M Plumbing,<\/p>\n      <p class=\"mm-about-text\">Depuis nos d\u00e9buts, M&amp;M Plumbing s&#8217;est forg\u00e9 une solide r\u00e9putation gr\u00e2ce \u00e0 notre\n        professionnalisme, notre transparence et notre engagement envers un service de qualit\u00e9. Aujourd&#8217;hui, notre\n        entreprise \u00e9volue et grandit avec vous.<\/p>\n\n      <p class=\"mm-about-text\">Nous sommes fiers de vous pr\u00e9senter M&amp;M Design &amp; Build \u2014 une nouvelle identit\u00e9\n        qui refl\u00e8te l&#8217;\u00e9largissement de nos services, sans jamais compromettre ce qui fait notre force : la rigueur,\n        l&#8217;expertise et la confiance.<\/p>\n\n      <p class=\"mm-about-text\">Nous ne faisons plus que de la plomberie.<br>\n        Nous r\u00e9novons. Nous transformons vos id\u00e9es en r\u00e9alit\u00e9.<br>\n        Avec M&amp;M Design &amp; Build, vous b\u00e9n\u00e9ficiez d\u00e9sormais d&#8217;une gamme compl\u00e8te de services.<\/p>\n\n      <p class=\"mm-about-text\"><em>Notre mission reste la m\u00eame : vous offrir un accompagnement personnalis\u00e9, un travail\n          impeccable, et des solutions durables, pens\u00e9es pour vos besoins.<br>\n          Nouveau nom. Nouveaux services.<br>\n          M\u00eame passion. M\u00eame qualit\u00e9.<\/em><\/p>\n    <\/div>\n\n    <!-- Right: arch photo -->\n    <div class=\"mm-about-image-wrap\">\n      <div class=\"mm-about-arch\"><\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- ===========================\n     SECTION SAVOIR-FAIRE\n=========================== -->\n<style>\n  .mm-skills {\n    width: 100%;\n    background: linear-gradient(to bottom, #b5a99a 70%, #a84040 70%);\n    padding: 70px 60px 0;\n    box-sizing: border-box;\n    text-align: center;\n    font-family: 'Cormorant Garamond', Georgia, serif;\n  }\n\n  .mm-skills-title {\n    font-family: 'Cormorant Garamond', Georgia, serif;\n    font-size: clamp(36px, 5vw, 64px);\n    font-weight: 600;\n    color: #c0404a;\n    letter-spacing: 4px;\n    text-transform: uppercase;\n    margin: 0 0 28px 0;\n  }\n\n  .mm-skills-subtitle {\n    font-family: 'Cormorant Garamond', Georgia, serif;\n    font-size: clamp(18px, 2.2vw, 26px);\n    font-weight: 400;\n    color: #fff;\n    line-height: 1.6;\n    margin: 0 0 60px 0;\n  }\n\n  \/* Cards row *\/\n  .mm-skills-cards {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 0;\n    margin: 0 -60px;\n  }\n\n  .mm-skill-card {\n    background: #a84040;\n    padding: 40px 24px 50px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 30px;\n    border-radius: 18px 18px 0 0;\n    position: relative;\n  }\n\n  \/* Slightly darker on hover *\/\n  .mm-skill-card:hover {\n    background: #963838;\n  }\n\n  \/* Icon circle (for the \"40\" card) *\/\n  .mm-skill-icon-circle {\n    width: 70px;\n    height: 70px;\n    border-radius: 50%;\n    background: rgba(181, 169, 154, 0.35);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: 'Montserrat', sans-serif;\n    font-size: 28px;\n    font-weight: 700;\n    color: #f0e8e0;\n  }\n\n  \/* SVG icon wrapper *\/\n  .mm-skill-icon {\n    width: 70px;\n    height: 70px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .mm-skill-icon svg {\n    width: 64px;\n    height: 64px;\n    stroke: rgba(240, 232, 224, 0.65);\n    fill: none;\n    stroke-width: 1.4;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .mm-skill-label {\n    font-family: 'Montserrat', sans-serif;\n    font-size: 15px;\n    font-weight: 700;\n    color: #f0e8e0;\n    letter-spacing: 0.5px;\n    line-height: 1.4;\n    text-align: center;\n  }\n\n  \/* Bottom logo strip *\/\n  .mm-skills-footer {\n    background: #a84040;\n    padding: 30px 0 36px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .mm-skills-footer svg {\n    width: 90px;\n    opacity: 0.75;\n  }\n\n  @media (max-width: 860px) {\n    .mm-skills {\n      padding: 50px 24px 0;\n    }\n\n    .mm-skills-cards {\n      grid-template-columns: repeat(2, 1fr);\n      margin: 0 -24px;\n      gap: 3px;\n    }\n\n    .mm-skill-card {\n      border-radius: 0;\n      padding: 32px 16px 40px;\n    }\n\n    .mm-skill-card:first-child {\n      border-radius: 18px 0 0 0;\n    }\n\n    .mm-skill-card:nth-child(2) {\n      border-radius: 0 18px 0 0;\n    }\n  }\n\n  @media (max-width: 500px) {\n    .mm-skills-cards {\n      grid-template-columns: 1fr 1fr;\n    }\n  }\n<\/style>\n\n<section class=\"mm-skills\">\n\n  <h2 class=\"mm-skills-title\">Notre savoir-faire<\/h2>\n\n  <p class=\"mm-skills-subtitle\">\n    Votre satisfaction est notre plus belle carte de visite !<br>\n    Plusieurs corps de m\u00e9tier dans une m\u00eame enseigne\n  <\/p>\n\n  <div class=\"mm-skills-cards\">\n\n    <!-- 40 ans -->\n    <div class=\"mm-skill-card\">\n      <div class=\"mm-skill-icon-circle\">40<\/div>\n      <div class=\"mm-skill-label\">40 ans<br>d&#8217;exp\u00e9rience<\/div>\n    <\/div>\n\n    <!-- Equipe sp\u00e9cialis\u00e9e -->\n    <div class=\"mm-skill-card\">\n      <div class=\"mm-skill-icon\">\n        <svg viewBox=\"0 0 64 64\">\n          <!-- 3 people + gear -->\n          <circle cx=\"20\" cy=\"18\" r=\"7\" \/>\n          <path d=\"M6 42c0-8 7-13 14-13\" \/>\n          <circle cx=\"44\" cy=\"18\" r=\"7\" \/>\n          <path d=\"M58 42c0-8-7-13-14-13\" \/>\n          <circle cx=\"32\" cy=\"20\" r=\"8\" \/>\n          <path d=\"M16 48c0-9 7-15 16-15s16 6 16 15\" \/>\n          <!-- gear -->\n          <circle cx=\"50\" cy=\"46\" r=\"5\" \/>\n          <path d=\"M50 38v3M50 54v-3M42 46h3M58 46h-3M44.5 40.5l2 2M55.5 51.5l-2-2M44.5 51.5l2-2M55.5 40.5l-2 2\" \/>\n        <\/svg>\n      <\/div>\n      <div class=\"mm-skill-label\">\u00c9quipe<br>sp\u00e9cialis\u00e9e<\/div>\n    <\/div>\n\n    <!-- Conception sur mesure -->\n    <div class=\"mm-skill-card\">\n      <div class=\"mm-skill-icon\">\n        <svg viewBox=\"0 0 64 64\">\n          <!-- gear + pencil -->\n          <circle cx=\"30\" cy=\"28\" r=\"10\" \/>\n          <circle cx=\"30\" cy=\"28\" r=\"4\" \/>\n          <path\n            d=\"M30 14v5M30 42v-5M16 28h5M44 28h-5M19.5 19.5l3.5 3.5M37 36.5l3.5 3.5M19.5 36.5l3.5-3.5M37 21.5l3.5-3.5\" \/>\n          <!-- pencil -->\n          <path d=\"M42 44l10-10 4 4-10 10z\" \/>\n          <path d=\"M42 44l-3 7 7-3\" \/>\n          <line x1=\"46\" y1=\"38\" x2=\"50\" y2=\"42\" \/>\n        <\/svg>\n      <\/div>\n      <div class=\"mm-skill-label\">Conception<br>sur mesure<\/div>\n    <\/div>\n\n    <!-- Suivi de A \u00e0 Z -->\n    <div class=\"mm-skill-card\">\n      <div class=\"mm-skill-icon\">\n        <svg viewBox=\"0 0 64 64\">\n          <!-- handshake -->\n          <path d=\"M4 36l10-10h12l8-8h10l10 6\" \/>\n          <path d=\"M4 36l6 6 6-4 6 4 6-4 6 4 6-4 6 6\" \/>\n          <path d=\"M54 28l6 8-10 10\" \/>\n          <path d=\"M26 18l4-4 8 8\" \/>\n        <\/svg>\n      <\/div>\n      <div class=\"mm-skill-label\">Suivi de A \u00e0 Z<\/div>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"mm-skills-footer\">\n    <img decoding=\"async\" src=\"http:\/\/mm-db.be\/wp-content\/uploads\/2026\/06\/mm-logo-gris.png\" alt=\"M&#038;M Design &#038; Build\"\n      style=\"height: 90px; width: auto; opacity: 0.75;\">\n  <\/div>\n\n<\/section>\n\n\n<!-- ===========================\n     SECTION T\u00c9MOIGNAGES\n=========================== -->\n<style>\n  .wp-block-html+.wp-block-html {\n    margin-top: 0 !important;\n    padding-top: 0 !important;\n  }\n\n  .mm-testimonials {\n    position: relative;\n    width: 100%;\n    min-height: 100vh;\n    padding-bottom: 1px;\n    box-sizing: border-box;\n    overflow: visible;\n    font-family: var(--mm-font-display);\n  }\n\n  \/* Background image with warm overlay *\/\n  .mm-testimonials-bg {\n    position: absolute;\n    inset: 0;\n    background: url('http:\/\/mm-db.be\/wp-content\/uploads\/2026\/04\/TERRASSE-GESVES.jpg') center\/cover no-repeat;\n    \/* \u2190 changer top en center *\/\n    z-index: 0;\n  }\n\n  .mm-testimonials-bg::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: rgba(185, 155, 120, 0.65);\n  }\n\n  \/* Content above bg *\/\n  .mm-testimonials-inner {\n    position: relative;\n    z-index: 10;\n    padding: 80px 60px 100px;\n    max-width: 1300px;\n    margin: 0 auto;\n  }\n\n  .mm-testimonials-title {\n    font-family: 'Cormorant Garamond', Georgia, serif;\n    font-size: clamp(38px, 5.5vw, 72px);\n    font-weight: 400;\n    color: #c0404a;\n    text-align: center;\n    margin: 0 0 80px 0;\n    line-height: 1.1;\n  }\n\n  \/* 3-col grid *\/\n  .mm-testimonials-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 40px;\n    align-items: start;\n  }\n\n  .mm-testimonial-item {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  }\n\n  \/* Big quote mark *\/\n  .mm-quote-mark {\n    font-family: Georgia, serif;\n    font-size: 64px;\n    font-weight: 700;\n    color: #c0404a;\n    line-height: 0.8;\n    margin-bottom: 10px;\n  }\n\n  .mm-testimonial-text {\n    font-family: 'Cormorant Garamond', Georgia, serif;\n    font-size: clamp(15px, 1.4vw, 18px);\n    font-weight: 400;\n    color: rgba(255, 255, 255, 0.92);\n    line-height: 1.75;\n    margin: 0;\n  }\n\n  .mm-testimonial-author {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    margin-top: 8px;\n  }\n\n  .mm-testimonial-dash {\n    font-size: 18px;\n    color: rgba(255, 255, 255, 0.7);\n  }\n\n  .mm-testimonial-name {\n    font-family: 'Cormorant Garamond', Georgia, serif;\n    font-size: clamp(15px, 1.4vw, 18px);\n    font-style: italic;\n    font-weight: 600;\n    color: #c0404a;\n  }\n\n  @media (max-width: 860px) {\n    .mm-testimonials-inner {\n      padding: 60px 30px 80px;\n    }\n\n    .mm-testimonials-grid {\n      grid-template-columns: 1fr;\n      gap: 50px;\n    }\n  }\n<\/style>\n\n<section class=\"mm-testimonials\">\n\n  <div class=\"mm-testimonials-bg\"><\/div>\n\n  <div class=\"mm-testimonials-inner\">\n\n    <h2 class=\"mm-testimonials-title\">Ils nous ont fait confiance&nbsp;!<\/h2>\n\n    <div class=\"mm-testimonials-grid\">\n\n      <!-- T\u00e9moignage 1 -->\n      <div class=\"mm-testimonial-item\">\n        <div class=\"mm-quote-mark\">&#8220;<\/div>\n        <p class=\"mm-testimonial-text\">\n          J\u2019ai fait appel appel \u00e0 M&#038;M design &#038; build pour la r\u00e9novation de ma salle de bain. 100% satisfait du r\u00e9sultat. Merci\u00a0\n        <\/p>\n        <div class=\"mm-testimonial-author\">\n          <span class=\"mm-testimonial-dash\">\u2013<\/span>\n          <span class=\"mm-testimonial-name\">Philippe H, Client<\/span>\n        <\/div>\n      <\/div>\n\n      <!-- T\u00e9moignage 2 -->\n      <div class=\"mm-testimonial-item\">\n        <div class=\"mm-quote-mark\">&#8220;<\/div>\n        <p class=\"mm-testimonial-text\">\n          \u00a0Un service irr\u00e9prochable. Travaux effectu\u00e9s dans les d\u00e9lais. A conseiller\n        <\/p>\n        <div class=\"mm-testimonial-author\">\n          <span class=\"mm-testimonial-dash\">\u2013<\/span>\n          <span class=\"mm-testimonial-name\">Laurent DB, Client<\/span>\n        <\/div>\n      <\/div>\n\n      <!-- T\u00e9moignage 3 -->\n      <div class=\"mm-testimonial-item\">\n        <div class=\"mm-quote-mark\">&#8220;<\/div>\n        <p class=\"mm-testimonial-text\">\n          J\u2019ai du faire appel \u00e0 M&#038;M design &#038; build pour un d\u00e9bouchage en urgence ! Merci pour la rapidit\u00e9 et l\u2019efficacit\u00e9\u00a0\n        <\/p>\n        <div class=\"mm-testimonial-author\">\n          <span class=\"mm-testimonial-dash\">\u2013<\/span>\n          <span class=\"mm-testimonial-name\">C\u00e9dric H, Client<\/span>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n<\/section>\n\n\n\n\n\n\n<script>\n  (function () {\n    \/* --- Slider --- *\/\n    var slides = document.getElementById('mmSlides');\n    var dots = document.querySelectorAll('.mm-dot');\n    var total = 3;\n    var current = 1;           \/\/ start on slide 2 (index 1) like the screenshot\n    var autoPlay;\n\n    function goTo(n) {\n      current = (n + total) % total;\n      slides.style.transform = 'translateX(-' + (current * 33.3333) + '%)';\n      dots.forEach(function (d, i) {\n        d.classList.toggle('active', i === current);\n      });\n    }\n\n    \/\/ Init position without animation\n    slides.style.transition = 'none';\n    slides.style.transform = 'translateX(-' + (current * 33.3333) + '%)';\n    setTimeout(function () { slides.style.transition = ''; }, 50);\n\n    document.getElementById('mmNext').addEventListener('click', function () { goTo(current + 1); resetAuto(); });\n    document.getElementById('mmPrev').addEventListener('click', function () { goTo(current - 1); resetAuto(); });\n\n    dots.forEach(function (d) {\n      d.addEventListener('click', function () { goTo(+this.dataset.index); resetAuto(); });\n    });\n\n    function resetAuto() { clearInterval(autoPlay); startAuto(); }\n    function startAuto() { autoPlay = setInterval(function () { goTo(current + 1); }, 5000); }\n    startAuto();\n\n    \/* --- Hamburger --- *\/\n    var ham = document.getElementById('mmHamburger');\n    var mobileNav = document.getElementById('mmMobileNav');\n\n    ham.addEventListener('click', function () {\n      ham.classList.toggle('open');\n      mobileNav.classList.toggle('open');\n    });\n  })();\n\n<\/script>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Home Nos services Devis Nos r\u00e9alisations Contact Home Nos services Devis Nos r\u00e9alisations Contact Vous r\u00eavez, nous cr\u00e9ons&nbsp;! &#8592; &#8594; Une r\u00e9f\u00e9rence pour vos r\u00e9novations depuis 1986 Anciennement M&amp;M Plumbing, Depuis nos d\u00e9buts, M&amp;M Plumbing s&#8217;est forg\u00e9 une solide r\u00e9putation gr\u00e2ce \u00e0 notre professionnalisme, notre transparence et notre engagement envers un service de qualit\u00e9. Aujourd&#8217;hui, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin9484","author_link":"https:\/\/mm-db.be\/index.php\/author\/admin9484\/"},"uagb_comment_info":0,"uagb_excerpt":"Home Nos services Devis Nos r\u00e9alisations Contact Home Nos services Devis Nos r\u00e9alisations Contact Vous r\u00eavez, nous cr\u00e9ons&nbsp;! &#8592; &#8594; Une r\u00e9f\u00e9rence pour vos r\u00e9novations depuis 1986 Anciennement M&amp;M Plumbing, Depuis nos d\u00e9buts, M&amp;M Plumbing s&#8217;est forg\u00e9 une solide r\u00e9putation gr\u00e2ce \u00e0 notre professionnalisme, notre transparence et notre engagement envers un service de qualit\u00e9. Aujourd&#8217;hui,&hellip;","_links":{"self":[{"href":"https:\/\/mm-db.be\/index.php\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mm-db.be\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mm-db.be\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mm-db.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mm-db.be\/index.php\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":92,"href":"https:\/\/mm-db.be\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":243,"href":"https:\/\/mm-db.be\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions\/243"}],"wp:attachment":[{"href":"https:\/\/mm-db.be\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}