/* Mon Builder — styles de base, chargés sur chaque page construite avec le builder. */

:root {
	/* Kit global provisoire. Il deviendra modifiable dans l'admin en phase 2. */
	--mb-primary: #1d4ed8;
	--mb-secondary: #0f172a;
	--mb-text: #334155;
	--mb-accent: #f59e0b;
	--mb-light: #f1f5f9;
	--mb-white: #ffffff;
}

.mb-page,
.mb-page *,
.mb-page *::before,
.mb-page *::after,
.mb-layout,
.mb-layout *,
.mb-layout *::before,
.mb-layout *::after {
	box-sizing: border-box;
}

.mb-page {
	width: 100%;
}

/* Les thèmes limitent souvent la largeur du contenu : une page builder prend toute la place disponible. */
.mb-active .entry-content > .mb-page,
.mb-active .wp-block-post-content > .mb-page {
	max-width: none;
}

.mb-node {
	min-width: 0;
}

/* Message visible seulement dans l'éditeur (widget à compléter). */
.mb-editor-notice {
	padding: 16px; border: 1px dashed #94a3b8; border-radius: 6px; background: #f8fafc;
	color: #475569; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center;
}

/* Icônes SVG */
.mb-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	flex-shrink: 0;
}

/* Visionneuse d'images (galerie, carrousel) */
.mb-lightbox-open { overflow: hidden; }
.mb-lightbox {
	position: fixed; inset: 0; z-index: 999999; background: rgba(0, 0, 0, 0.92);
	display: flex; align-items: center; justify-content: center; padding: 48px 64px;
}
.mb-lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mb-lightbox__figure img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; display: block; }
.mb-lightbox__figure figcaption { color: #e2e8f0; text-align: center; font-size: 15px; }
.mb-lightbox button {
	position: absolute; border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer;
	width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.mb-lightbox button:hover, .mb-lightbox button:focus-visible { background: rgba(255, 255, 255, 0.25); outline: none; }
.mb-lightbox__close { top: 12px; right: 12px; }
.mb-lightbox__prev { left: 12px; top: 50%; margin-top: -24px; }
.mb-lightbox__next { right: 12px; top: 50%; margin-top: -24px; }
.mb-lightbox__count { position: absolute; top: 24px; left: 24px; color: #cbd5e1; font-size: 14px; }
@media (max-width: 767px) {
	.mb-lightbox { padding: 56px 8px; }
	.mb-lightbox__prev, .mb-lightbox__next { top: auto; bottom: 12px; margin: 0; }
}

/* Texte réservé aux lecteurs d'écran (libellés masqués, etc.). */
.mb-sr-only {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Pages affichées par le theme builder ---------- */
.mb-canvas { margin: 0; }
.mb-site-main { display: block; }

.mb-site-header--sticky {
	position: sticky;
	top: 0;
	z-index: 1000;
}
.admin-bar .mb-site-header--sticky { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .mb-site-header--sticky { top: 46px; }
}

/* En-tête posé par-dessus le haut de la page : la première section (photo…) passe dessous. */
.mb-site-header--overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; }
.mb-site-header--overlay.mb-site-header--sticky { position: fixed; }
.admin-bar .mb-site-header--overlay { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .mb-site-header--overlay { top: 46px; }
	/* Sous 600 px, la barre d'administration défile avec la page. */
	.admin-bar .mb-site-header--overlay.mb-site-header--sticky { top: 0; }
}

/* Fond qui descend derrière l'en-tête dès que l'on fait défiler (classe posée par header-scroll.js). */
.mb-site-header--scroll-bg { isolation: isolate; }
.mb-site-header--scroll-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mb-header-scroll-bg);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	transform: translateY(-100%);
	opacity: 0;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
	pointer-events: none;
}
.mb-site-header--blur::before { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mb-site-header--scroll-bg.is-scrolled::before { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.mb-site-header--scroll-bg::before { transition: opacity 0.2s ease; transform: none; }
}

/* En-tête latéral (theme builder) : panneau fixe, replié par un bouton.
   Panneau, contenu de la page et bouton bougent ensemble, sur la même courbe. */
:root { --mb-side-ease: cubic-bezier(0.32, 0.72, 0, 1); --mb-side-speed: 0.45s; }
.mb-site-header--side {
	position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000;
	width: var(--mb-side-width, 280px); max-width: 85vw;
	/* Bande réservée au bouton, pour qu'il ne recouvre pas le contenu du panneau. */
	padding-top: 72px; box-sizing: border-box;
	overflow-y: auto; overscroll-behavior: contain;
	background: var(--mb-white, #fff); box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
	transition: transform var(--mb-side-speed) var(--mb-side-ease), box-shadow var(--mb-side-speed) var(--mb-side-ease);
}
.mb-side-right .mb-site-header--side { left: auto; right: 0; }
.admin-bar .mb-site-header--side { top: 32px; }
body.mb-has-side-header { transition: padding var(--mb-side-speed) var(--mb-side-ease); }
body.mb-side-left { padding-left: var(--mb-side-width, 280px); }
body.mb-side-right { padding-right: var(--mb-side-width, 280px); }

/* Contenu pensé pour une barre horizontale : il s'empile et prend la largeur du panneau. */
.mb-site-header--side .mb-container__inner { flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; }
.mb-site-header--side .mb-node { width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; }
.mb-site-header--side .mb-menu { justify-content: flex-start !important; }

.mb-side-toggle {
	/* Panneau ouvert : dans son coin haut, pour ne rien masquer de la page. */
	position: fixed; top: 16px; z-index: 1001;
	left: calc(var(--mb-side-width, 280px) - 56px);
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: var(--mb-white, #fff); color: var(--mb-secondary, #0f172a);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); cursor: pointer; font-size: 20px;
	transition: left var(--mb-side-speed) var(--mb-side-ease), right var(--mb-side-speed) var(--mb-side-ease);
}
.mb-side-right .mb-side-toggle { left: auto; right: calc(var(--mb-side-width, 280px) - 56px); }
.admin-bar .mb-side-toggle { top: 48px; }
.mb-side-toggle:focus-visible { outline: 2px solid var(--mb-primary, #1d4ed8); outline-offset: 3px; }
/* Les deux icônes se croisent en pivotant, selon l'état annoncé par le bouton. */
.mb-side-toggle > span { position: absolute; display: inline-flex; transition: opacity 0.25s ease, transform var(--mb-side-speed) var(--mb-side-ease); }
.mb-side-toggle svg { width: 1em; height: 1em; }
.mb-side-toggle[aria-expanded="true"] .mb-side-toggle__open,
.mb-side-toggle[aria-expanded="false"] .mb-side-toggle__close { opacity: 0; transform: rotate(-90deg) scale(0.6); }

/* Replié (ordinateur) : le panneau sort de l'écran, le contenu reprend toute la largeur. */
html.mb-side-collapsed .mb-site-header--side { transform: translateX(-100%); box-shadow: none; }
html.mb-side-collapsed .mb-side-right .mb-site-header--side { transform: translateX(100%); }
html.mb-side-collapsed body.mb-has-side-header { padding-left: 0; padding-right: 0; }
html.mb-side-collapsed .mb-side-toggle { left: 12px; }
html.mb-side-collapsed .mb-side-right .mb-side-toggle { left: auto; right: 12px; }

.mb-side-backdrop {
	position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.45);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity var(--mb-side-speed) ease, visibility var(--mb-side-speed) ease;
}
.mb-side-backdrop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }

/* Tablette et mobile : tiroir fermé par défaut, ouvert par-dessus la page. */
@media (max-width: 1024px) {
	body.mb-has-side-header { padding-left: 0; padding-right: 0; }
	.mb-site-header--side { transform: translateX(-100%); box-shadow: none; }
	.mb-side-right .mb-site-header--side { transform: translateX(100%); }
	.mb-side-toggle, .mb-side-right .mb-side-toggle { left: 12px; right: auto; }
	.mb-side-right .mb-side-toggle { left: auto; right: 12px; }
	html.mb-side-drawer-open .mb-site-header--side,
	html.mb-side-drawer-open .mb-side-right .mb-site-header--side { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); }
	html.mb-side-drawer-open .mb-side-toggle { left: calc(min(var(--mb-side-width, 280px), 85vw) - 56px); }
	html.mb-side-drawer-open .mb-side-right .mb-side-toggle { left: auto; right: calc(min(var(--mb-side-width, 280px), 85vw) - 56px); }
}
@media (max-width: 782px) {
	.admin-bar .mb-site-header--side { top: 46px; }
	.admin-bar .mb-side-toggle { top: 62px; }
}
/* Animations réduites (réglage du système, souvent activé sans le savoir sur Windows) :
   pas de glissement, un simple fondu. Le panneau s'efface, puis sort de l'écran. */
@media (prefers-reduced-motion: reduce) {
	body.mb-has-side-header, .mb-side-toggle, .mb-side-toggle > span { transition: none; }
	.mb-site-header--side { transition: opacity 0.25s ease, transform 0s; }
	html.mb-side-collapsed .mb-site-header--side { opacity: 0; transition: opacity 0.25s ease, transform 0s linear 0.25s; }
	.mb-side-backdrop { transition-duration: 0.25s; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1024px) {
	.mb-site-header--side { opacity: 0; transition: opacity 0.25s ease, transform 0s linear 0.25s; }
	html.mb-side-drawer-open .mb-site-header--side { opacity: 1; transition: opacity 0.25s ease, transform 0s; }
}

/* Lien d'évitement : visible seulement au clavier. */
.mb-skip-link:focus {
	position: fixed !important;
	top: 8px; left: 8px; z-index: 100000;
	width: auto; height: auto; clip: auto; margin: 0;
	padding: 10px 16px; background: #fff; color: #000; border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Contenu sans modèle (affichage simple). */
.mb-default-content { max-width: 760px; margin: 0 auto; padding: 48px 20px; line-height: 1.7; }
.mb-default-content img { max-width: 100%; height: auto; }
.mb-default-item { padding: 16px 0; border-bottom: 1px solid #e2e8f0; }

/* Liens vers une section (#contact…) : l'en-tête fixe ne doit pas cacher le début de la section. */
html { scroll-behavior: smooth; }
body:has(.mb-site-header--sticky) .mb-node[id] { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Popup (theme builder). */
.mb-popup { width: min(var(--mb-popup-width, 640px), calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 12px; background: transparent; overflow: auto; }
.mb-popup::backdrop { background: rgba(0, 0, 0, 0.6); }
.mb-popup__close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.mb-popup__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Animations d'apparition (onglet « Avancé »). Les éléments ne sont cachés que si
   JavaScript fonctionne, et jamais dans l'éditeur. */
html.mb-js:not(.mb-anim-safe) .mb-anim:not(.is-visible),
html.mb-js.mb-anim-ready .mb-anim:not(.is-visible) { opacity: 0; }
/* Haut de page : presque invisible plutôt qu'invisible. Les navigateurs ignorent un élément en
   opacité 0 pour mesurer la vitesse d'affichage (LCP) ; l'animation reste la même à l'œil. */
html.mb-js:not(.mb-anim-safe) .mb-anim.mb-anim--first:not(.is-visible),
html.mb-js.mb-anim-ready .mb-anim.mb-anim--first:not(.is-visible) { opacity: 0.01; }
html.mb-js .mb-anim {
	transition: opacity var(--mb-anim-duration, 700ms) cubic-bezier(0.2, 0.7, 0.2, 1) var(--mb-anim-delay, 0ms),
		transform var(--mb-anim-duration, 700ms) cubic-bezier(0.2, 0.7, 0.2, 1) var(--mb-anim-delay, 0ms);
}
html.mb-js .mb-anim--fade-up:not(.is-visible) { transform: translateY(40px); }
html.mb-js .mb-anim--fade-down:not(.is-visible) { transform: translateY(-40px); }
html.mb-js .mb-anim--fade-left:not(.is-visible) { transform: translateX(50px); }
html.mb-js .mb-anim--fade-right:not(.is-visible) { transform: translateX(-50px); }
html.mb-js .mb-anim--zoom:not(.is-visible) { transform: scale(0.9); }
html.mb-anim-safe:not(.mb-anim-ready) .mb-anim { opacity: 1; transform: none; }
.mb-preview .mb-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
/* Visiteur qui a demandé moins d'animations (réglage souvent activé sans le savoir sur
   Windows) : les éléments apparaissent en simple fondu, sans aucun déplacement. */
@media (prefers-reduced-motion: reduce) {
	html.mb-js .mb-anim, html.mb-js .mb-anim:not(.is-visible) { transform: none !important; }
}