/*
 Theme Name:   Bricks Child — Maison Bebelle
 Description:  Charte Maison Bebelle (reprise fidèle du site DEFACTO 2022, corrigée). ARPASYS Studio, 10/2026.
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

:root {
	--mb-bordeaux: #77002d;
	--mb-noir: #000;
	--mb-texte: #333;
	--mb-gris: #333;
	--mb-blanc-80: rgba(255, 255, 255, .8);
	--mb-header: 120px;
	--mb-script: 'Petit Formal Script', cursive;
	--mb-sans: 'Roboto', Arial, sans-serif;
}
@media (max-width: 980px) { :root { --mb-header: 90px; } }

html { scroll-behavior: smooth; }
body { font-family: var(--mb-sans); font-size: 17px; line-height: 24px; color: var(--mb-texte); padding-top: var(--mb-header); }
h1, h2, h3, h4, h5 { font-family: var(--mb-script); font-weight: 400; }
[id] { scroll-margin-top: var(--mb-header); }
.mb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Bandeau ---------- */
#brx-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.mb-header { background: var(--mb-noir); height: var(--mb-header); width: 100%; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 30px; }
.mb-header .mb-logo img, .mb-header img.mb-logo { height: 80px; width: auto; display: block; }
.mb-header-droite { flex-direction: column; align-items: flex-end; gap: 10px; width: auto; }
.mb-pastilles { flex-direction: row; gap: 10px; width: auto; }
.mb-pastille { width: 35px; height: 35px; border-radius: 50%; background: #fff; color: #000; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: opacity .2s; }
.mb-pastille:hover { opacity: .6; }
.mb-pastille { font-size: 0 !important; gap: 0; }
/* Icône centrée dans le rond, quel que soit le texte masqué du bouton */
.mb-pastille { position: relative; }
.mb-pastille i, .mb-pastille svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; line-height: 1; }
.mb-pastille i, .mb-pastille svg { color: #000; fill: #000; font-size: 16px; }
.mb-pastille-mobile { display: none !important; }
.mb-menu .bricks-nav-menu > li > a { color: #fff; font-size: 17px; font-weight: 500; text-transform: uppercase; position: relative; padding: 5px 0; transition: opacity .2s; }
.mb-menu .bricks-nav-menu { gap: 28px; }
.mb-menu .bricks-nav-menu > li > a:hover { opacity: .6; }
.mb-menu .bricks-nav-menu > li > a.is-current::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 25px; height: 2px; margin-left: -12.5px; background: rgba(255, 255, 255, .7); }
.mb-menu .bricks-mobile-menu-toggle { color: #fff; width: 40px; }
.mb-menu .bricks-mobile-menu-toggle .bar-top, .mb-menu .bricks-mobile-menu-toggle .bar-center, .mb-menu .bricks-mobile-menu-toggle .bar-bottom { width: 40px; height: 4px; background: #fff; }
.mb-menu .bricks-mobile-menu-wrapper { background: var(--mb-gris); justify-content: center; }
.mb-menu .bricks-mobile-menu > li > a { color: #fff; font-size: 26px; font-weight: 700; text-align: center; padding: 14px 0; }
@media (max-width: 980px) {
	.mb-header { padding: 0 15px; }
	.mb-header .mb-logo img, .mb-header img.mb-logo { height: 60px; }
	.mb-header-droite { flex-direction: row-reverse; align-items: center; gap: 16px; }
	.mb-pastille-mobile { display: inline-flex !important; }
}
@media (max-width: 420px) { .mb-pastilles .mb-pastille:not(.mb-pastille-mobile) { display: none; } }

/* ---------- Accueil (diaporama) ---------- */
.mb-hero { position: relative; height: calc(100vh - var(--mb-header)); min-height: 420px; background: #000; padding: 0; overflow: hidden; }
.mb-hero > .brxe-container { max-width: none; width: 100%; height: 100%; padding: 0; }
.mb-hero .mb-diapo, .mb-hero .mb-diapo .splide__track, .mb-hero .mb-diapo .splide__list, .mb-hero .mb-diapo .splide__slide { height: 100% !important; }
.mb-hero .mb-diapo { position: absolute; inset: 0; width: 100%; }
.mb-hero .mb-vue { padding: 0; height: 100%; width: 100%; }
.mb-hero .mb-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-hero .splide__arrow { z-index: 3; width: 50px; height: 50px; background: transparent; opacity: 0; transition: opacity .3s; }
.mb-hero:hover .splide__arrow { opacity: 1; }
.mb-hero .splide__arrow svg { fill: #fff; width: 32px; height: 32px; }
.mb-voile { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.mb-voile .mb-logo-signature img, .mb-voile img.mb-logo-signature { width: 454px; max-width: 80vw; height: auto; }
.mb-voile h1 { font-family: var(--mb-sans); font-weight: 700; font-size: 30px; line-height: 1.2; letter-spacing: 3px; text-transform: uppercase; color: #fff; text-align: center; margin-top: 10px; }
.mb-souris { position: absolute; bottom: 80px; left: 50%; margin-left: -15px; width: 30px; height: 50px; border: 2px solid #fff; border-radius: 15px; z-index: 3; }
.mb-souris::after { content: ""; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: mb-souris 1.6s infinite; }
@keyframes mb-souris { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(14px); } }
@media (max-width: 980px) { .mb-hero .splide__arrow { display: none; } .mb-voile h1 { font-size: 22px; } .mb-souris { bottom: 40px; } }
@media (prefers-reduced-motion: reduce) { .mb-souris::after { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Sections communes ---------- */
.mb-section { padding: 70px 10px; color: #fff; }
.mb-section > .brxe-container { max-width: 1440px; width: 100%; align-items: center; }
.mb-section h2 { font-size: 55px; line-height: 55px; color: #fff; text-align: center; margin-bottom: 20px; }
.mb-section h3 { font-size: 30px; line-height: 1.3; color: #fff; text-align: center; position: relative; padding-bottom: 14px; margin-bottom: 18px; }
.mb-section h3::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 90px; height: 2px; margin-left: -45px; background: rgba(255, 255, 255, .6); }
.mb-intro { font-weight: 900; text-transform: uppercase; font-size: 16px; line-height: 24px; text-align: center; position: relative; padding-bottom: 18px; margin-bottom: 22px; max-width: 900px; }
.mb-intro::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 80px; height: 2px; margin-left: -40px; background: rgba(255, 255, 255, .6); }
.mb-texte { color: var(--mb-blanc-80); }
.mb-texte p + p { margin-top: 1em; }
@media (max-width: 980px) { .mb-section { padding: 40px 10px; } .mb-texte { text-align: center; } }
@media (max-width: 767px) { .mb-section h2 { font-size: 40px; line-height: 44px; } }
@media (max-width: 576px) { .mb-section h2 { font-size: 34px; line-height: 38px; } }

/* Photos en cadre blanc */
.mb-cadre { background: #fff; padding: 6px; border-radius: 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.mb-cadre img { display: block; width: 100%; height: 300px; object-fit: cover; border-radius: 2px; }
.mb-cadre > .brxe-image, .mb-cadre > a, .mb-cadre > figure, .mb-cadre > img { display: block !important; width: 100% !important; }
.mb-rot-g { transform: rotate(-3deg); }
.mb-rot-d { transform: rotate(3deg); }
.mb-rot-d2 { transform: rotate(2deg); }
.mb-rot-d6 { transform: rotate(6deg); }
.mb-rot-g2 { transform: rotate(-2deg); }

/* ---------- Présentation ---------- */
.mb-presentation { background: var(--mb-bordeaux); }
.mb-logo-presentation { margin-bottom: 50px; }
.mb-logo-presentation img, img.mb-logo-presentation { width: 441px; max-width: 80vw; height: auto; }
.mb-colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; width: 100%; align-items: start; }
.mb-colonne { gap: 0; }
.mb-colonne .mb-cadre { margin-top: 30px; width: 100%; }
@media (max-width: 991px) { .mb-colonnes { grid-template-columns: 1fr; max-width: 700px; margin: 0 auto; gap: 60px; } }

/* ---------- Le restaurant (parallaxe) ---------- */
.mb-restaurant { background-color: #111; background-size: cover; background-position: center; background-attachment: fixed; }
.mb-restaurant .mb-col8 { max-width: 960px; width: 100%; align-items: center; text-align: center; }
.mb-restaurant .mb-texte { text-align: center; }
.mb-duo { display: flex; flex-direction: row; justify-content: center; gap: 40px; margin-top: 40px; width: 100%; }
.mb-duo .mb-cadre { width: 45%; max-width: 420px; }
@media (max-width: 980px) { .mb-duo .mb-rot-d6 { transform: rotate(-2deg); } }
@media (max-width: 767px) { .mb-duo { flex-direction: column; align-items: center; } .mb-duo .mb-cadre { width: 90%; } }
@media (hover: none) { .mb-restaurant, .mb-carte { background-attachment: scroll; } }

/* ---------- L'équipe ---------- */
.mb-equipe { background-size: cover; background-position: center; }
.mb-equipe .mb-cadre { width: 100%; max-width: 1100px; }
.mb-equipe .mb-cadre img { height: 650px; }
@media (max-width: 576px) { .mb-equipe .mb-cadre img { height: 30vh; } }

/* ---------- La carte ---------- */
.mb-carte { background-color: #1d1d1d; background-size: cover; background-position: center; background-attachment: fixed; }
.mb-carte-grille { display: grid; grid-template-columns: 4fr 8fr; gap: 40px; width: 100%; align-items: start; margin-top: 20px; }
.mb-carte-col { gap: 40px; }
.mb-rubrique { width: 100%; }
.mb-rubrique h3 { width: 100%; background: var(--mb-bordeaux); border-radius: 5px; font-size: 22px; line-height: 1.2; padding: 12px 50px; margin-bottom: 14px; position: relative; }
.mb-rubrique h3::after { display: none; }
.mb-losange { position: absolute; right: 22px; top: 50%; width: 46px; height: 46px; margin-top: -23px; background: #fff; transform: rotate(45deg); display: flex; align-items: center; justify-content: center; }
.mb-losange span { transform: rotate(-45deg); font-family: var(--mb-sans); font-weight: 700; font-size: 18px; color: var(--mb-bordeaux); }
.mb-plat { flex-wrap: nowrap !important; flex-direction: row !important; align-items: flex-end; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, .5); }
.mb-plat-nom { flex: 1 1 auto; min-width: 0; color: var(--mb-blanc-80); }
.mb-plat-nom em { font-style: normal; opacity: .75; font-size: .9em; }
.mb-plat-prix { flex: 0 0 auto; font-weight: 700; font-size: 24px; line-height: 1; color: #fff; text-align: right; white-space: nowrap; }
.mb-salade { flex-direction: row; gap: 12px; width: 100%; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, .5); }
.mb-salade-nom { flex: 0 0 30%; font-weight: 700; color: #fff; }
.mb-salade-desc { flex: 1 1 70%; color: var(--mb-blanc-80); font-size: 17px; }
.mb-carte-photo { width: 100%; }
.mb-carte-note { color: var(--mb-blanc-80); font-size: 15px; text-align: center; margin-top: 30px; }
@media (max-width: 1200px) { .mb-salade-nom { font-size: 18px; } .mb-salade-desc { font-size: 16px; } }
@media (max-width: 980px) { .mb-carte-grille { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; } .mb-carte-photo { display: none; } }
@media (max-width: 576px) { .mb-salade { flex-direction: column !important; gap: 4px; } .mb-plat-prix { font-size: 19px; } }

/* ---------- Galerie ---------- */
.mb-photos { background: var(--mb-gris); }
.mb-filtres { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; width: 100%; }
.mb-filtre { padding: 8px 20px; border-radius: 6px; background: rgba(0, 0, 0, .2); color: #fff; cursor: pointer; border: 0; font: inherit; transition: background .2s; }
.mb-filtre:hover, .mb-filtre.is-actif { background: #000; }
.mb-galerie { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
.mb-galerie > * { width: 23%; margin: 1%; height: 200px; position: relative; overflow: hidden; transition: opacity .3s; }
.mb-galerie img { width: 100%; height: 200px; object-fit: cover; display: block; }
.mb-galerie a::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 36px no-repeat; opacity: 0; transition: opacity .3s; }
.mb-galerie a:hover::after, .mb-galerie a:focus-visible::after { opacity: 1; }
.mb-galerie > .is-exclue { opacity: .3; pointer-events: none; order: 2; }
@media (max-width: 980px) { .mb-galerie > * { width: 31.33%; } }
@media (max-width: 767px) { .mb-galerie > * { width: 48%; } }

/* ---------- Contact ---------- */
.mb-contact { background: var(--mb-bordeaux); }
.mb-contact-grille { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; width: 100%; align-items: start; }
.mb-contact .brxe-form { width: 100%; }
.mb-contact .brxe-form label { color: #fff; font-size: 15px; }
.mb-contact .brxe-form input:not([type="checkbox"]), .mb-contact .brxe-form textarea { background: #fff; color: #333; border: 1px solid #ccc; border-radius: 3px; padding: 12px; font: inherit; }
.mb-contact .brxe-form textarea { height: 160px; }
.mb-contact .brxe-form button[type="submit"] { width: 100%; background: #000; color: #fff; text-transform: uppercase; font-weight: 700; border-radius: 3px; padding: 14px; transition: background .2s, color .2s; }
.mb-contact .brxe-form button[type="submit"]:hover { background: #fff; color: var(--mb-bordeaux); }
.mb-contact .message.error { background: #e94b4b; color: #fff; }
.mb-contact .message.success { background: green; color: #fff; }
.mb-rgpd { font-size: 14px; color: var(--mb-blanc-80); margin-top: 12px; }
.mb-rgpd a, .mb-infos a { color: #fff; text-decoration: underline; }
.mb-infos { color: var(--mb-blanc-80); width: 100%; }
.mb-infos p { padding-left: 38px; position: relative; margin-bottom: 18px; }
.mb-infos p::before { content: ""; position: absolute; left: 0; top: 0; width: 25px; height: 25px; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.mb-i-horaires { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); }
.mb-i-tel { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.mb-i-mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.mb-i-adresse { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.mb-itineraire { display: block; max-width: 576px; margin-top: 10px; }
.mb-itineraire img { height: 260px; }
@media (max-width: 991px) { .mb-contact-grille { grid-template-columns: 1fr; max-width: 700px; margin: 0 auto; } }

/* ---------- Pied de page ---------- */
.mb-footer, .mb-footer p, .mb-footer .brxe-text { color: #fff; }
.mb-footer { background: #000; padding: 18px 15px; text-align: center; font-size: 14px; }
.mb-footer a { color: #fff; }
.mb-footer a:hover { opacity: .7; }
.mb-footer p { margin: 0; }

/* ---------- Pages légales ---------- */
#brx-content.wordpress { max-width: 980px; margin: 0 auto; padding: 50px 20px 70px; }
#brx-content.wordpress > h1 { color: var(--mb-bordeaux); font-size: 44px; line-height: 1.2; margin-bottom: 30px; }
.mb-legal { color: #333; }
.mb-legal h2 { font-family: var(--mb-sans); font-weight: 700; font-size: 20px; color: #fff; background: #333; padding: 8px 14px; border-radius: 4px; margin: 34px 0 14px; }
.mb-legal p, .mb-legal li { margin-bottom: 10px; }
.mb-legal ul { padding-left: 22px; list-style: disc; }
.mb-legal a { color: var(--mb-bordeaux); }