/* Masquer le titre automatique de WordPress */ body:has(.mati-site) .wp-block-post-title { display: none !important; } /* Masquer l’en-tête du thème sur la page Mati */ body:has(.mati-site) .wp-block-template-part:has(header) { display: none !important; } /* Supprimer les espaces au-dessus du design */ body:has(.mati-site) .wp-site-blocks { padding-top: 0 !important; } body:has(.mati-site) .wp-block-post-content { margin-top: 0 !important; } body:has(.mati-site) .mati-site { margin-top: 0 !important; } /* Mati Beach — affichage pleine largeur */ .mati-site { width: 100vw !important; max-width: 100vw !important; position: relative; left: 50%; margin-left: -50vw !important; margin-right: -50vw !important; } .mati-site .m-hero { width: 100%; } body { overflow-x: hidden; } @import url(‘https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600&display=swap’); .mati-site { –m-brown: #48382D; –m-green: #55634B; –m-beige: #E9DFCB; –m-ivory: #F8F5EE; –m-white: #FFFFFF; –m-photo: #D8CDB8; font-family: ‘DM Sans’, sans-serif; font-size: 15px; color: var(–m-brown); background: var(–m-ivory); overflow: hidden; width: 100%; } .mati-site, .mati-site * { box-sizing: border-box; } .mati-site h1, .mati-site h2, .mati-site h3 { font-family: ‘Cormorant Garamond’, Georgia, serif; font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; } .mati-site p { line-height: 1.85; } .mati-site a { text-decoration: none; } .mati-site .m-container { width: min(1180px, 88%); margin: 0 auto; } .mati-site .m-eyebrow { font-family: ‘DM Sans’, sans-serif; text-transform: uppercase; font-size: 11px; letter-spacing: 0.22em; font-weight: 500; } .mati-site .m-title { font-size: clamp(55px, 7.5vw, 110px); margin: 15px 0 35px; } .mati-site .m-section { padding: 105px 0; } .mati-site .m-button { display: inline-block; padding: 15px 26px; border: 1px solid currentColor; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.13em; transition: background .25s, color .25s; cursor: pointer; } .mati-site .m-button:hover { background: var(–m-brown); border-color: var(–m-brown); color: white !important; } .mati-site .m-photo-placeholder { display: flex; justify-content: center; align-items: center; text-align: center; padding: 25px; min-height: 400px; background: var(–m-photo); color: #6D6256; border: 1px dashed #A99A84; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; line-height: 2; } .mati-site .m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } /* ======================================== 01 — ACCUEIL PLEIN ÉCRAN ======================================== */ .mati-site .m-hero { position: relative; min-height: 95vh; min-height: 95svh; background: linear-gradient( 180deg, rgba(20, 20, 15, .45) 0%, rgba(20, 20, 15, .12) 40%, rgba(20, 20, 15, .5) 100% ), url(‘https://sxmmatibeach-lgctj.wordpress.com/wp-content/uploads/2026/08/img_6293-2.jpeg’) center center / cover no-repeat; display: flex; flex-direction: column; justify-content: space-between; color: white; } .mati-site .m-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 5%; } .mati-site .m-logo { font-family: ‘Cormorant Garamond’, serif; font-size: 31px; letter-spacing: 0.06em; font-weight: 600; color: white; white-space: nowrap; } .mati-site .m-navigation { display: flex; align-items: center; gap: 27px; } .mati-site .m-navigation a { color: white; font-size: 12px; } .mati-site .m-navigation a:hover { text-decoration: underline; text-underline-offset: 5px; } .mati-site .m-nav-book { border: 1px solid white; padding: 11px 16px; } .mati-site .m-hero-center { text-align: center; padding: 55px 20px; } .mati-site .m-hero-center h1 { font-size: clamp(78px, 13vw, 190px); color: white; margin: 13px 0 20px; line-height: .91; } .mati-site .m-hero-center .m-subtitle { text-transform: uppercase; font-size: 12px; letter-spacing: .2em; line-height: 1.8; } .mati-site .m-hero-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; margin-top: 36px; } .mati-site .m-hero-buttons a { color: white; } .mati-site .m-hero-buttons a:hover { color: var(–m-brown) !important; background: white; border-color: white; } .mati-site .m-scroll { text-align: center; padding: 28px; letter-spacing: .2em; font-size: 10px; } .mati-site .m-scroll a { color: white; } /* ======================================== 02 — INTRODUCTION ======================================== */ .mati-site .m-intro { background: var(–m-ivory); text-align: center; } .mati-site .m-intro h2 { font-size: clamp(55px, 7vw, 100px); max-width: 950px; margin: 24px auto; } .mati-site .m-intro p { max-width: 650px; margin: 0 auto; font-size: 15px; color: #675A4F; } .mati-site .m-divider { width: 65px; height: 1px; background: var(–m-green); margin: 30px auto; } /* ======================================== 03 — À TABLE ======================================== */ .mati-site .m-food { background: var(–m-beige); } .mati-site .m-food .m-photo-placeholder { min-height: 520px; } .mati-site .m-food h3 { font-size: 36px; margin: 22px 0 7px; } .mati-site .m-food .m-description { font-size: 13px; color: #6A5D51; } .mati-site .m-center-action { text-align: center; margin-top: 50px; } .mati-site .m-center-action a { color: var(–m-brown); } /* ======================================== 04 — LE LIEU ======================================== */ .mati-site .m-venue { background: var(–m-ivory); } .mati-site .m-venue-layout { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 8%; } .mati-site .m-venue .m-photo-placeholder { min-height: 640px; } .mati-site .m-venue h2 { font-size: clamp(65px, 7vw, 110px); margin: 22px 0; } .mati-site .m-venue p { color: #6A5D51; max-width: 440px; margin-bottom: 30px; } .mati-site .m-venue a { color: var(–m-brown); } /* ======================================== 05 — COCKTAILS ======================================== */ .mati-site .m-drinks { background: var(–m-green); color: white; } .mati-site .m-drinks h2, .mati-site .m-drinks h3 { color: white; } .mati-site .m-drinks .m-photo-placeholder { min-height: 440px; background: #79836E; border-color: #A8B19F; color: white; } .mati-site .m-drinks p { max-width: 650px; margin-top: 30px; } .mati-site .m-alcohol { font-size: 11px; opacity: .8; } /* ======================================== 06 — PHOTOGRAPHIES / LIFESTYLE ======================================== */ .mati-site .m-gallery { background: var(–m-ivory); text-align: center; } .mati-site .m-gallery h2 { font-size: clamp(65px, 8vw, 115px); margin: 18px 0 45px; } .mati-site .m-gallery-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 14px; } .mati-site .m-gallery-grid .m-photo-placeholder { min-height: 390px; } /* ======================================== 07 — PRIVATISATION ======================================== */ .mati-site .m-private { background: var(–m-beige); text-align: center; } .mati-site .m-private h2 { font-size: clamp(65px, 8vw, 115px); margin: 20px 0; } .mati-site .m-private p { max-width: 580px; margin: 0 auto 35px; color: #675A4F; } .mati-site .m-private .m-photo-placeholder { min-height: 500px; margin-top: 45px; } .mati-site .m-private .m-button { color: var(–m-brown); } /* ======================================== 08 — INFORMATIONS ET RÉSERVATION ======================================== */ .mati-site .m-info { background: var(–m-ivory); } .mati-site .m-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; } .mati-site .m-info h2 { font-size: clamp(60px, 7vw, 105px); margin: 20px 0 30px; } .mati-site .m-info p { color: #675A4F; } .mati-site .m-info .m-button { color: var(–m-brown); margin-top: 15px; } /* ======================================== 09 — FOOTER ======================================== */ .mati-site .m-footer { background: var(–m-brown); padding: 90px 20px 40px; color: white; text-align: center; } .mati-site .m-footer h2 { font-size: clamp(90px, 14vw, 200px); color: white; margin: 15px 0; } .mati-site .m-footer a { color: white; } .mati-site .m-footer p { font-size: 12px; } .mati-site .m-footer-bottom { border-top: 1px solid rgba(255,255,255,.25); max-width: 1200px; margin: 55px auto 0; padding-top: 25px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } /* ======================================== MOBILE ET TABLETTE ======================================== */ @media (max-width: 850px) { .mati-site .m-section { padding: 70px 0; } .mati-site .m-container { width: 88%; } .mati-site .m-navigation { gap: 12px; } .mati-site .m-navigation a:not(.m-nav-book) { display: none; } .mati-site .m-grid, .mati-site .m-venue-layout, .mati-site .m-info-grid { grid-template-columns: 1fr; gap: 30px; } .mati-site .m-gallery-grid { grid-template-columns: 1fr 1fr; } .mati-site .m-venue .m-photo-placeholder { min-height: 450px; } .mati-site .m-info-grid { gap: 60px; } } @media (max-width: 540px) { .mati-site .m-header { padding: 23px 5%; } .mati-site .m-logo { font-size: 24px; } .mati-site .m-hero-center h1 { font-size: clamp(65px, 16vw, 105px); letter-spacing: -.04em; } .mati-site .m-hero-center .m-subtitle { font-size: 10px; } .mati-site .m-hero-buttons { gap: 9px; } .mati-site .m-hero-buttons .m-button { padding: 13px 16px; font-size: 10px; } .mati-site .m-food .m-photo-placeholder { min-height: 400px; } .mati-site .m-gallery-grid { grid-template-columns: 1fr; } .mati-site .m-gallery-grid .m-photo-placeholder { min-height: 320px; } .mati-site .m-footer-bottom { justify-content: center; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .mati-site * { transition: none !important; animation: none !important; } }

MATI BEACH La carte Le lieu Cocktails Contact Réserver ↗

BAIE NETTLÉ · SAINT-MARTIN

Mati Beach

Déjeuner · Sunset · Dîner · Cocktails

Découvrir la carte Réserver une table

SCROLL TO DISCOVER ↓

WELCOME TO MATI BEACH

Life tastes better
by the lagoon.

À Baie Nettlé, Mati Beach vous accueille dans un cadre unique au bord du lagon. Une cuisine savoureuse, des cocktails rafraîchissants et une atmosphère chaleureuse, du déjeuner au sunset et jusqu’au dîner.

THE TASTE OF MATI BEACH

À table.

PHOTO 02
AJOUTER UN PLAT MATI BEACH

Something delicious.

Une cuisine gourmande à savourer au bord du lagon.

PHOTO 03
AJOUTER UN DEUXIÈME PLAT

Made to share.

Des saveurs ensoleillées et des moments à partager.

Découvrir notre carte ↗

PHOTO 04
AJOUTER UNE PHOTO DE LA TERRASSE

THE MATI WAY OF LIFE

Stay a
little longer.

Un déjeuner qui se prolonge, un cocktail face au lagon, un dîner entre amis… Chez Mati Beach, on prend le temps de profiter de chaque instant.

Nous rendre visite ↗

SUNSET O’CLOCK

Sip. Relax. Repeat.

PHOTO 05
AJOUTER UN COCKTAIL

PHOTO 06
AJOUTER UNE PHOTO SUNSET

Un cocktail à la main, le lagon en toile de fond et le soleil qui décline. Welcome to the Mati mood.

L’abus d’alcool est dangereux pour la santé. À consommer avec modération.

LITTLE MOMENTS, BIG MEMORIES

The Mati mood.

PHOTO 07
AMBIANCE RESTAURANT

PHOTO 08
TERRASSE / LAGON

PHOTO 09
PLAT / COCKTAIL / LIFESTYLE

Follow the Mati mood ↗

YOUR SPECIAL MOMENTS

Let’s celebrate
together.

Anniversaires, repas entre amis, événements privés ou occasions spéciales : profitez du cadre unique de Mati Beach pour partager vos plus beaux moments.

Organiser un événement ↗

PHOTO 10
AJOUTER UNE GRANDE TABLÉE OU UN ÉVÉNEMENT

COME FIND US

See you
at Mati.

Baie Nettlé, Saint-Martin

Mardi au dimanche
Déjeuner : 11h30 – 14h30
Sunset & dîner : 17h30 – 21h30
Fermé le lundi

+590 690 22 63 37

BOOK YOUR TABLE

Your table
is waiting.

Déjeuner ensoleillé, sunset entre amis ou dîner au bord du lagon ? Contactez-nous sur WhatsApp pour demander votre réservation.

Réserver sur WhatsApp ↗

sxm.matibeach

Bonjour tout le monde !