/* 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; }
}

/* 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; } }

/* 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; }
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; }
}