/* Map in Glow: everything theme.json cannot express (layout of the sections, cards, glow, gold text) */

:root {
	--mg-line: rgba(236, 211, 159, .12);
	--mg-line2: rgba(236, 211, 159, .26);
	--mg-gold: linear-gradient(120deg, #aa875a, #ecd39f 47%, #d0ab6f);
	--mg-radius: 22px;
	--mg-texte: #cfc8bb;   /* body text of cards, lists, tables */
	--mg-texte-fort: #d9d2c5;
	--mg-voile: rgba(9, 9, 9, .85);   /* behind the sticky header and the phone bar */
}

/* ---- day mode: the same site on paper, set by the button of the header (functions.php) ---- */
:root[data-mode="jour"] {
	--wp--preset--color--noir: #f7f3ec;
	--wp--preset--color--nuit: #eee8dd;
	--wp--preset--color--ardoise: #fffdf8;
	--wp--preset--color--ivoire: #1f1b16;
	--wp--preset--color--sable: #6d6456;
	--wp--preset--color--or: #9a7340;
	--wp--preset--color--or-clair: #85602b;
	--mg-line: rgba(120, 90, 45, .16);
	--mg-line2: rgba(120, 90, 45, .32);
	--mg-gold: linear-gradient(120deg, #8a6a3e, #b08646 47%, #7c5d32);   /* gold text: darker on paper */
	--mg-texte: #4a4337;
	--mg-texte-fort: #39332a;
	--mg-voile: rgba(247, 243, 236, .88);
	color-scheme: light;
}
:root[data-mode="jour"] .mg-cfg-bar .wp-element-button { background: var(--wp--preset--gradient--or); }   /* a button: the light gold, its dark text stays readable */
:root[data-mode="jour"] .mg-card, :root[data-mode="jour"] .mg-photo img { box-shadow: 0 10px 30px -18px rgba(70, 50, 20, .35); }

/* the switch, at the end of the header */
.mg-mode { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: .6rem; padding: 0; cursor: pointer;
	border: 1px solid var(--mg-line2); border-radius: 50%; background: transparent; color: var(--wp--preset--color--or-clair); }
.mg-mode:hover { border-color: var(--wp--preset--color--or); }
.mg-mode svg { width: 18px; height: 18px; }
.mg-mode .mg-lune, :root[data-mode="jour"] .mg-mode .mg-soleil { display: none; }
:root[data-mode="jour"] .mg-mode .mg-lune { display: block; }

body { -webkit-font-smoothing: antialiased; }
::selection { background: #ecd39f; color: #1b150c; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }   /* header, main and footer touch: sections set their own spacing */

/* ---- header ---- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }   /* the wrapper sticks: it is as tall as the header, so the header alone could not */
@media (min-width: 601px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0px); } }
.mg-header {
	position: relative; isolation: isolate;
	padding: .9rem clamp(1rem, 4vw, 2.5rem) !important;
	border-bottom: 1px solid var(--mg-line);
}
.mg-header::before {   /* the blur sits on its own layer: on the header itself it would trap the full-screen phone menu inside the header */
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--mg-voile);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.mg-brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none !important; }
.mg-brand img { width: 36px; height: 36px; display: block; }
.mg-brand span {
	font-size: .82rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
	background: var(--mg-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mg-brand span { white-space: nowrap; }
.mg-header .wp-block-navigation { margin-left: auto; }   /* the menu, or its button, next to the day mode switch */
/* seven sections: below 1100 px the menu takes the phone's button and full-screen list, rather than two lines */
@media (max-width: 1100px) {
	.mg-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.mg-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.mg-header .wp-block-navigation a { color: var(--wp--preset--color--ivoire); }
.mg-header .wp-block-navigation a:hover { color: var(--wp--preset--color--or-clair); text-decoration: none; }
.mg-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--or-clair); }
/* phone menu: full screen, large serif links one under the other */
.wp-block-navigation__responsive-container.is-menu-open { padding: 1.4rem clamp(1rem, 4vw, 2.5rem) 2rem !important; }
.is-menu-open .wp-block-navigation__responsive-container-close { top: 1.4rem; right: clamp(1rem, 4vw, 2.5rem); color: var(--wp--preset--color--or-clair); }
.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem !important; align-items: stretch !important; }
.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; width: 100%; }
.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--mg-line); }
.is-menu-open .wp-block-navigation-item__content {
	display: block; width: 100%; padding: 1rem 0 !important;
	font-family: var(--wp--preset--font-family--serif); font-size: 1.9rem; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--or-clair); }

/* ---- sections ---- */
.mg-section { padding-block: var(--wp--preset--spacing--60) !important; position: relative; }
.mg-section.mg-tight { padding-top: 0 !important; }
.mg-band { background: var(--wp--preset--color--nuit); border-block: 1px solid var(--mg-line); }
.mg-hero { overflow: hidden; }
.mg-hero::before {   /* the glow of a lit relief behind the hero */
	content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
	background: radial-gradient(closest-side, rgba(236, 211, 159, .16), rgba(236, 211, 159, 0)); pointer-events: none;
}
.mg-hero > * { position: relative; }
.mg-hero-short { padding-bottom: var(--wp--preset--spacing--50) !important; }
.mg-hero h1 em, .mg-hero h2 em {
	font-style: italic;
	background: var(--mg-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mg-center { text-align: center; padding-block: var(--wp--preset--spacing--60) !important; }
.mg-center .wp-block-buttons { justify-content: center; }
.mg-page { padding-block: var(--wp--preset--spacing--60) !important; }

.mg-kicker {
	font-size: .72rem !important; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
	color: var(--wp--preset--color--or); margin-bottom: .6rem;
}
.mg-kicker + h1, .mg-kicker + h2 { margin-top: 0; }
.mg-lead { font-size: var(--wp--preset--font-size--large); color: var(--mg-texte-fort); line-height: 1.6; max-width: 36em; }
.has-text-align-center.mg-lead { margin-inline: auto; }
.mg-muted, .mg-copy { color: var(--wp--preset--color--sable); font-size: var(--wp--preset--font-size--small); }
.mg-split { gap: clamp(2rem, 5vw, 5rem) !important; }

/* ---- buttons ---- */
.wp-element-button { transition: transform .15s, box-shadow .2s, filter .2s; }
.wp-block-button:not(.is-style-outline) .wp-element-button:hover { box-shadow: 0 0 28px rgba(214, 179, 122, .35); filter: brightness(1.05); text-decoration: none; }
.wp-block-button.is-style-outline .wp-element-button {
	background: transparent !important; color: var(--wp--preset--color--or-clair) !important;
	border: 1px solid var(--mg-line2) !important;
}
.wp-block-button.is-style-outline .wp-element-button:hover { border-color: var(--wp--preset--color--or) !important; text-decoration: none; }
.wp-element-button:active { transform: scale(.98); }

/* ---- photos ---- */
.mg-photo img { border-radius: var(--mg-radius); border: 1px solid var(--mg-line); width: 100%; height: auto; display: block; }
.mg-loop video { width: 100%; max-width: 480px; display: block; margin-inline: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; background: #000;   /* the original portrait video, framed on the relief */
	border-radius: var(--mg-radius); border: 1px solid var(--mg-line); box-shadow: 0 30px 90px -20px rgba(236, 120, 90, .45); }
.mg-glow img { box-shadow: 0 30px 80px -20px rgba(236, 160, 90, .35), 0 0 0 1px var(--mg-line); }
.mg-photo figcaption { text-align: center; margin-top: .8rem; }
.mg-photo figcaption strong { color: var(--wp--preset--color--ivoire); font-family: var(--wp--preset--font-family--serif); font-size: 1.3rem; font-weight: 500; }

/* ---- grids ---- */
.mg-grid { display: grid !important; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: var(--wp--preset--spacing--50); }
.mg-grid > * { margin: 0 !important; }
.mg-grid-2 { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.mg-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mg-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mg-gallery img { aspect-ratio: 1; object-fit: cover; }
.mg-gallery .wp-block-image:last-child img { object-fit: contain; background: #0d0c0b; }   /* two frames side by side */
@media (max-width: 900px) {
	.mg-grid-3, .mg-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.mg-grid-2 { grid-template-columns: 1fr; }   /* two cards side by side do not fit a phone */
}
@media (max-width: 520px) {
	.mg-grid-3 { grid-template-columns: 1fr; }
	.mg-grid-3:has(> .mg-photo) { grid-template-columns: repeat(2, 1fr); }   /* photo galleries stay two by two on phones: less scrolling */
	.mg-grid-3:has(> .mg-photo) figcaption { font-size: .78rem; }
}

/* ---- cards ---- */
.mg-cards { gap: clamp(1rem, 2.5vw, 1.75rem) !important; margin-top: var(--wp--preset--spacing--50); }
.mg-cards + .wp-block-buttons, .mg-grid + .wp-block-buttons { margin-top: var(--wp--preset--spacing--50) !important; }   /* a button under cards gets some air */
.mg-card {
	background: var(--wp--preset--color--nuit); border: 1px solid var(--mg-line); border-radius: var(--mg-radius);
	padding: clamp(1.4rem, 3vw, 2.2rem) !important;
}
.mg-band .mg-card { background: var(--wp--preset--color--ardoise); }
.mg-card > :first-child { margin-top: 0; }
.mg-card h3 { margin: .2rem 0 .6rem; }
.mg-card p { color: var(--mg-texte); margin: 0; }
.mg-num { font-family: var(--wp--preset--font-family--serif); font-size: 2.6rem !important; line-height: 1; margin-bottom: .8rem !important;
	background: var(--mg-gold); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.mg-offer.is-featured { border-color: var(--mg-line2); box-shadow: 0 0 60px -20px rgba(236, 211, 159, .25); }
.mg-price { font-family: var(--wp--preset--font-family--serif); font-size: 3rem !important; line-height: 1.1; margin: .4rem 0 1rem !important;
	background: var(--mg-gold); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.mg-price small { display: block; font-family: var(--wp--preset--font-family--sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--sable); -webkit-text-fill-color: var(--wp--preset--color--sable); }
.mg-check { list-style: none; padding: 0; margin: 0; }
/* what happens after the order: numbered steps (Commander, Tarifs) */
.mg-etapes { counter-reset: etape; list-style: none; padding: 0; margin: .4rem auto 1.4rem; max-width: 42rem; }
.mg-etapes li { counter-increment: etape; position: relative; padding-left: 2.2rem; margin: .6rem 0; color: var(--mg-texte); }
.mg-etapes li::before { content: counter(etape); position: absolute; left: 0; top: .05em; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
	font: 600 .72rem/1 var(--wp--preset--font-family--sans); color: #1b150c; background: var(--wp--preset--gradient--or); }
.mg-cfg-suite { margin: 1rem 0; } .mg-cfg-suite .mg-etapes { margin: .4rem 0 0; } .mg-cfg-sum small { display: block; font-size: .7rem; letter-spacing: .08em; color: var(--wp--preset--color--sable); }
/* home: what the product does, at a glance */
.mg-atouts { list-style: none; padding: 0; margin: 1.2rem 0 1.8rem; display: grid; gap: .55rem; }
.mg-atouts li { position: relative; padding-left: 1.4rem; color: var(--mg-texte); }
.mg-atouts li::before { content: ""; position: absolute; left: 0; top: .55em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--mg-gold); box-shadow: 0 0 10px rgba(236, 211, 159, .6); }
.mg-atouts strong { color: var(--wp--preset--color--or-clair); font-weight: 600; }
/* La gamme: the two ranges, and the options of the sur mesure only */
.mg-gammes { margin-top: var(--wp--preset--spacing--50) !important; }
.mg-gammes .mg-offer { display: flex; flex-direction: column; }
.mg-gammes .mg-offer > .wp-block-buttons { margin-top: auto; padding-top: 1.2rem; }
.mg-tag { display: inline-block; vertical-align: middle; margin-left: .4rem; padding: .25em .7em; border: 1px solid var(--mg-line2); border-radius: 999px; font: 600 .6rem/1 var(--wp--preset--font-family--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--or-clair); }
.mg-check li { position: relative; padding-left: 1.6rem; margin: .55rem 0; color: var(--mg-texte); }
.mg-check li::before { content: ""; position: absolute; left: 0; top: .72em; width: .7rem; height: 1px; background: var(--wp--preset--color--or); }

.mg-prices { margin: 0 0 1rem; }
.mg-prices table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.mg-prices.wp-block-table thead { border-bottom: 0; }   /* WordPress draws a thick 3 px bar under table headers */
.mg-prices td, .mg-prices th { border: 0; border-bottom: 1px solid var(--mg-line); padding: .6rem 0; color: var(--mg-texte); text-align: left; vertical-align: top; }
.mg-prices td:not(:first-child), .mg-prices th:not(:first-child) { text-align: right; white-space: nowrap; padding-left: 1rem; color: var(--wp--preset--color--or-clair); }
.mg-prices th { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--sable) !important; }
.mg-prices table.has-fixed-layout td:last-child { width: 5.5rem; }
.mg-frame-offer { margin-top: clamp(1rem, 2.5vw, 1.75rem) !important; text-align: center; }
.mg-card-cta { border-style: dashed; border-color: var(--mg-line2); }
.mg-catalogue p strong { color: var(--wp--preset--color--ivoire); font-weight: 600; }

.mg-options h3 { font-size: 1.35rem; margin: 1.6rem 0 .3rem; color: var(--wp--preset--color--or-clair); }
.mg-options h3:first-child { margin-top: .5rem; }
.mg-options p { margin: 0; color: var(--mg-texte); }

/* ---- application ---- */
.mg-video video { width: 100%; max-width: 340px; display: block; margin-inline: auto; border-radius: 34px; border: 1px solid var(--mg-line2);
	box-shadow: 0 30px 90px -30px rgba(236, 160, 90, .4); background: #000; aspect-ratio: 9 / 16; object-fit: cover; }
.mg-demo { width: min(390px, 100%); height: min(800px, 86vh); margin-inline: auto; border-radius: 42px; border: 8px solid #1d1b18; outline: 1px solid var(--mg-line2);
	overflow: hidden; background: #090909; box-shadow: 0 40px 100px -30px rgba(236, 211, 159, .3); }
.mg-demo iframe { display: block; width: 100%; height: 100%; border: 0; }
#essayer { scroll-margin-top: 80px; }
/* the app demo: in a phone frame on computers, behind a picture on phones (it opens full screen, assets/js/application.js) */
.mg-demo-poster { display: none; position: relative; width: min(300px, 82%); margin-inline: auto; text-decoration: none !important; }
.mg-demo-poster img { display: block; width: 100%; height: auto; border-radius: 30px; border: 6px solid #1d1b18; outline: 1px solid var(--mg-line2);
	box-shadow: 0 30px 80px -30px rgba(236, 211, 159, .35); }
.mg-demo-poster .wp-element-button { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.mg-demo-full { text-align: center; margin-top: 1rem; font-size: var(--wp--preset--font-size--small); }
.mg-demo-full a::before { content: "⤢ "; }
@media (max-width: 781px) {   /* WordPress stacks the columns below 782 px */
	.mg-demo, .mg-demo-full { display: none; }   /* a hidden lazy iframe is not even loaded */
	.mg-demo-poster { display: block; }
}
.mg-app { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; background: #050505; }
.mg-app-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: calc(.4rem + env(safe-area-inset-top)) max(.6rem, env(safe-area-inset-right)) .4rem max(.6rem, env(safe-area-inset-left));
	background: #0d0c0b; border-bottom: 1px solid var(--mg-line); }
.mg-app-back { font: 600 .78rem/1 var(--wp--preset--font-family--sans); letter-spacing: .08em; color: var(--wp--preset--color--or-clair); cursor: pointer;
	background: rgba(236, 211, 159, .08); border: 1px solid var(--mg-line2); border-radius: 999px; padding: .6rem .95rem; }
.mg-app-back:hover { border-color: var(--wp--preset--color--or); }
.mg-app-note { font-size: .72rem; color: var(--wp--preset--color--sable); }
.mg-app iframe { flex: 1; display: block; width: 100%; max-width: 480px; margin: 0 auto; border: 0; background: #090909; }
@media (min-width: 782px) {
	.mg-app iframe { max-width: 430px; margin: 1.2rem auto; border-radius: 34px; border: 8px solid #1d1b18; outline: 1px solid var(--mg-line2); }
}
html.mg-app-open, html.mg-app-open body { overflow: hidden; }
.mg-phone img { border-radius: 28px; border: 6px solid #1d1b18; outline: 1px solid var(--mg-line2); width: 100%; height: auto; display: block; }
.mg-phone figcaption { text-align: center; margin-top: .8rem; }

/* ---- order ---- */
.mg-steps-list { padding-left: 0; list-style: none; counter-reset: mg; display: grid; gap: .9rem; }
.mg-steps-list li { counter-increment: mg; position: relative; padding: 1.1rem 1.3rem 1.1rem 4rem; background: var(--wp--preset--color--ardoise);
	border: 1px solid var(--mg-line); border-radius: 16px; color: var(--mg-texte); }
.mg-steps-list li::before { content: counter(mg, decimal-leading-zero); position: absolute; left: 1.2rem; top: .85rem;
	font-family: var(--wp--preset--font-family--serif); font-size: 1.6rem; color: var(--wp--preset--color--or); }
.mg-steps-list strong { color: var(--wp--preset--color--ivoire); font-weight: 600; }
.mg-faq { border-bottom: 1px solid var(--mg-line); padding: 1.1rem 0; }
.mg-faq summary { cursor: pointer; font-family: var(--wp--preset--font-family--serif); font-size: 1.4rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.mg-faq summary::-webkit-details-marker { display: none; }
.mg-faq summary::after { content: "+"; color: var(--wp--preset--color--or); font-family: var(--wp--preset--font-family--sans); font-weight: 300; transition: transform .2s; }
.mg-faq[open] summary::after { transform: rotate(45deg); }
.mg-faq p { color: var(--mg-texte); margin: .7rem 0 0; }

/* ---- order configurator (assets/js/commande.js) ---- */
.mg-cfg { --mg-cfg-top: 90px; }
.mg-cfg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.mg-cfg-side { position: sticky; top: var(--mg-cfg-top); }
.mg-cfg-preview { background: radial-gradient(70% 60% at 50% 45%, rgba(236, 211, 159, .08), rgba(236, 211, 159, 0)), var(--wp--preset--color--nuit);
	border: 1px solid var(--mg-line); border-radius: var(--mg-radius); padding: clamp(.8rem, 3vw, 2rem); }
.mg-cfg-preview svg { display: block; width: 100%; height: auto; max-height: 62vh; }
.mg-lieu-carte .mg-lieu-map { position: absolute; inset: 0; }   /* beats .maplibregl-map { position: relative }, loaded later */
.mg-cfg-3d-tabs { display: flex; justify-content: center; gap: .4rem; margin: -.4rem 0 1.1rem; }
.mg-cfg-3d-tabs button { font: 600 .68rem/1 var(--wp--preset--font-family--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
	padding: .55rem .95rem; border-radius: 999px; border: 1px solid var(--mg-line2); background: transparent; color: var(--wp--preset--color--sable); }
.mg-cfg-3d-tabs button[aria-pressed="true"] { background: var(--mg-gold); color: #1b150c; border-color: transparent; }
.mg-cfg-3d-note { margin: .8rem auto 0; max-width: 34em; text-align: center; font-size: .8rem; line-height: 1.5; color: var(--wp--preset--color--sable); }
/* a printed catalogue relief: the drawing or the 3D view (assets/js/vitrine3d.js) */
.mg-cfg-vues { margin: 0 0 .8rem; }
.mg-cfg-vues[hidden] { display: none; }
.mg-cfg-vitrine { background: radial-gradient(70% 60% at 50% 45%, rgba(236, 211, 159, .08), rgba(236, 211, 159, 0)), #0f0e0d;
	border: 1px solid var(--mg-line); border-radius: var(--mg-radius); padding: 0 0 1rem; }
.mg-cfg-vitrine-vue { width: min(100%, 62vh); aspect-ratio: 1; margin: 0 auto; }

.mg-lieu { margin-bottom: 1rem; }
.mg-lieu-cherche { display: flex; gap: .5rem; }
.mg-lieu-cherche input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; color: var(--wp--preset--color--ivoire); background: var(--wp--preset--color--noir);
	border: 1px solid var(--mg-line2); border-radius: 999px; padding: .65rem 1rem; }
.mg-lieu-cherche input:focus { outline: none; border-color: var(--wp--preset--color--or-clair); box-shadow: 0 0 0 3px rgba(236, 211, 159, .15); }
.mg-lieu-cherche .wp-element-button { border: 0; cursor: pointer; padding: .7em 1.2em; font-size: .72rem; }
.mg-lieu-res { list-style: none; margin: .5rem 0 0; padding: .3rem; border: 1px solid var(--mg-line2); border-radius: 12px; background: var(--wp--preset--color--noir); }
.mg-lieu-res button { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; padding: .5rem .7rem; border: 0; border-radius: 8px; background: transparent; color: var(--wp--preset--color--ivoire); }
.mg-lieu-res button:hover, .mg-lieu-res button:focus-visible { background: rgba(236, 211, 159, .1); outline: none; }
.mg-lieu-res small { display: block; font-size: .75rem; color: var(--wp--preset--color--sable); }
.mg-lieu-wait { padding: .5rem .7rem; font-size: .85rem; color: var(--wp--preset--color--sable); }
.mg-lieu-carte { position: relative; aspect-ratio: 4 / 3; margin-top: .8rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--mg-line2); background: #1a1816; }
.mg-lieu-cadre { position: absolute; top: 10%; left: 50%; height: 80%; aspect-ratio: 1; transform: translateX(-50%); pointer-events: none;   /* = the square read by lieu.js */
	border: 2px solid var(--wp--preset--color--or-clair); border-radius: 3px; box-shadow: 0 0 0 100vmax rgba(9, 9, 9, .5); }
.mg-lieu-info { margin: .6rem 0 0; font-size: .82rem; color: var(--wp--preset--color--sable); }
.mg-lieu-info strong { color: var(--wp--preset--color--ivoire); }
.mg-lieu-info .mg-lieu-warn { color: #ffb4a6; }
.mg-lieu-gpx { display: block; position: relative; margin-top: .8rem; cursor: pointer; }
.mg-lieu-gpx input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mg-lieu-gpx span { display: block; padding: .7rem 1rem; border: 1px dashed var(--mg-line2); border-radius: 12px; text-align: center; font-size: .9rem; color: var(--wp--preset--color--or-clair); }
.mg-lieu-gpx span small { color: var(--wp--preset--color--sable); }
.mg-lieu-gpx:hover span, .mg-lieu-gpx input:focus-visible + span { border-color: var(--wp--preset--color--or); }
.mg-lieu.sans-gpx .mg-lieu-gpx { display: none; }
.mg-cfg-dim line { stroke: var(--wp--preset--color--sable); stroke-width: 1; opacity: .5; }
.mg-cfg-dim text { fill: var(--wp--preset--color--sable); font: 600 9px/1 var(--wp--preset--font-family--sans); letter-spacing: .2em; text-transform: uppercase; }
.mg-cfg-led { opacity: .6; stroke: #f6cf8a; animation: mg-led-svg 5s ease-in-out infinite alternate; }
@keyframes mg-led-svg { to { opacity: 1; stroke: #f2a866; } }
.mg-cfg-pulse { transform-origin: 128px 86px; animation: mg-pulse 2s ease-out infinite; }
@keyframes mg-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.mg-cfg-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding: 0 .4rem; }
.mg-cfg-total small, .mg-cfg-bar small, .mg-cfg-sum span { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--sable); }
.mg-cfg-total strong, .mg-cfg-sum strong { font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 2.6rem; line-height: 1;
	background: var(--mg-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

.mg-cfg-form { display: grid; gap: 1.1rem; }
.mg-cfg-step { margin: 0; padding: 1.2rem 1.3rem 1.3rem; border: 1px solid var(--mg-line); border-radius: 18px; background: var(--wp--preset--color--nuit); min-width: 0; }
.mg-cfg-step legend { float: left; width: 100%; padding: 0; margin-bottom: .9rem; display: flex; align-items: baseline; gap: .7rem;
	font-family: var(--wp--preset--font-family--serif); font-size: 1.45rem; font-weight: 500; color: var(--wp--preset--color--ivoire); }
.mg-cfg-step legend small { font-family: var(--wp--preset--font-family--sans); font-size: .75rem; color: var(--wp--preset--color--sable); }
.mg-cfg-step legend + * { clear: both; }
.mg-cfg-n { font-size: 1rem; color: var(--wp--preset--color--or); }
.mg-cfg-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.mg-cfg-choice { position: relative; cursor: pointer; }
.mg-cfg-choice input, .mg-cfg-check input { position: absolute; opacity: 0; pointer-events: none; }
.mg-cfg-choice > span { display: flex; flex-direction: column; gap: .15rem; height: 100%; box-sizing: border-box; padding: .75rem .9rem; border: 1px solid var(--mg-line2); border-radius: 12px;
	background: var(--wp--preset--color--ardoise); transition: border-color .15s, box-shadow .2s, background .2s; }
.mg-cfg-choice.has-swatch > span { padding-left: 2.9rem; justify-content: center; }
.mg-cfg-choice b, .mg-cfg-check b { font-weight: 600; font-size: .92rem; color: var(--wp--preset--color--ivoire); }
.mg-cfg-choice small, .mg-cfg-check small { font-size: .78rem; line-height: 1.4; color: var(--wp--preset--color--sable); }
.mg-cfg-choice:hover > span { border-color: var(--wp--preset--color--or); }
.mg-cfg-choice input:checked + span { border-color: var(--wp--preset--color--or-clair); background: rgba(236, 211, 159, .08); box-shadow: 0 0 0 1px var(--wp--preset--color--or-clair), 0 0 24px -8px rgba(236, 211, 159, .5); }
.mg-cfg-choice input:focus-visible + span, .mg-cfg-check input:focus-visible + span { outline: 2px solid var(--wp--preset--color--or-clair); outline-offset: 2px; }
.mg-swatch { position: absolute; left: .85rem; top: 50%; width: 1.5rem; height: 1.5rem; margin-top: -.75rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); }
.mg-cfg-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.mg-cfg-tabs button, .mg-cfg-chips button { font: inherit; cursor: pointer; border-radius: 999px; transition: all .15s; }
.mg-cfg-tabs button { padding: .4rem .9rem; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	background: transparent; color: var(--wp--preset--color--sable); border: 1px solid var(--mg-line2); }
.mg-cfg-tabs button[aria-selected="true"] { background: var(--mg-gold); color: #1b150c; border-color: transparent; }
.mg-cfg-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.mg-cfg-chips button { padding: .45rem .95rem; font-size: .9rem; background: var(--wp--preset--color--ardoise); color: var(--mg-texte-fort); border: 1px solid var(--mg-line); }
.mg-cfg-chips button:hover { border-color: var(--wp--preset--color--or); }
.mg-cfg-chips button[aria-pressed="true"] { color: var(--wp--preset--color--or-clair); border-color: var(--wp--preset--color--or-clair); background: rgba(236, 211, 159, .1); }
.mg-cfg-check { display: block; position: relative; cursor: pointer; margin-top: .7rem; }
.mg-cfg-check:first-child { margin-top: 0; }
.mg-cfg-check > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; padding-left: 2rem; }
.mg-cfg-check > span::before { content: ""; position: absolute; left: 0; top: .15rem; width: 1.2rem; height: 1.2rem; border-radius: 5px; border: 1px solid var(--mg-line2); background: var(--wp--preset--color--ardoise); }
.mg-cfg-check input:checked + span::before { background: var(--mg-gold); border-color: transparent; }
.mg-cfg-check input:checked + span::after { content: ""; position: absolute; left: .42rem; top: .3rem; width: .35rem; height: .7rem; border: solid #1b150c; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mg-cfg-field { display: block; margin-top: .8rem; }
.mg-cfg-field > span, .mg-cfg-label { display: block; font-size: .82rem; color: var(--wp--preset--color--sable); margin: 0 0 .35rem; }
.mg-cfg-label { margin-top: 1rem; }
.mg-cfg-fixed { margin: .9rem 0 0; padding: .7rem .9rem; border-radius: 8px; background: #141312; border: 1px solid #8a6d3f;   /* the catalogue label, as printed */
	font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--wp--preset--color--or-clair); text-align: center; }
.mg-cfg-field input, .mg-cfg-field textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--wp--preset--color--ivoire); color-scheme: dark;
	background: var(--wp--preset--color--noir); border: 1px solid var(--mg-line2); border-radius: 10px; padding: .7rem .85rem; }
.mg-cfg-field input:focus, .mg-cfg-field textarea:focus { outline: none; border-color: var(--wp--preset--color--or-clair); box-shadow: 0 0 0 3px rgba(236, 211, 159, .15); }
.mg-cfg-field input::placeholder, .mg-cfg-field textarea::placeholder { color: #6f685d; }

.mg-cfg-recap { max-width: 760px; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; padding: clamp(1.4rem, 4vw, 2.4rem); border: 1px solid var(--mg-line2); border-radius: var(--mg-radius);
	background: var(--wp--preset--color--nuit); box-shadow: 0 0 60px -20px rgba(236, 211, 159, .25); scroll-margin-top: var(--mg-cfg-top); }
.mg-cfg-recap h2 { margin-top: 0; }
.mg-cfg-lines { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 1.2rem 0; }
.mg-cfg-lines dt, .mg-cfg-lines dd { margin: 0; padding: .6rem 0; border-bottom: 1px solid var(--mg-line); }
.mg-cfg-lines dt { color: var(--wp--preset--color--sable); font-size: .9rem; padding-right: 1.5rem; }
.mg-cfg-lines dd { color: var(--wp--preset--color--ivoire); text-align: right; overflow-wrap: anywhere; }
.mg-cfg-sum { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.mg-cfg-msg { margin: 1rem 0 1.4rem; }
.mg-cfg-msg summary { cursor: pointer; color: var(--wp--preset--color--or-clair); font-size: .9rem; }
.mg-cfg-msg pre { white-space: pre-wrap; font: .88rem/1.6 var(--wp--preset--font-family--sans); color: var(--mg-texte-fort); background: var(--wp--preset--color--noir);
	border: 1px solid var(--mg-line); border-radius: 12px; padding: 1rem 1.1rem; margin: .8rem 0 0; }
.mg-cfg-warn { color: #ffb4a6; margin: 0 0 1rem; }
.mg-cfg-actions button { cursor: pointer; border: 0; }
.mg-cfg-actions button:disabled { opacity: .4; cursor: not-allowed; }
.mg-cfg-how { margin: 0 0 1rem; }   /* read before clicking */
.mg-cfg-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 90; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; transition: all .25s;
	padding: .8rem 1.2rem; border-radius: 999px; background: var(--wp--preset--color--ivoire); color: #1b150c; font-size: .9rem; font-weight: 500; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.mg-cfg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* day mode: the toast, the warnings, the printed label and the date field stay readable */
:root[data-mode="jour"] .mg-cfg-toast { background: #1f1b16; color: #f6f1e7; }
:root[data-mode="jour"] .mg-cfg-warn, :root[data-mode="jour"] .mg-lieu-info .mg-lieu-warn { color: #a8402f; }
:root[data-mode="jour"] .mg-cfg-fixed { color: #ecd39f; }
:root[data-mode="jour"] .mg-cfg-field input, :root[data-mode="jour"] .mg-cfg-field textarea { color-scheme: light; }
.mg-cfg-bar { display: none; }

@media (max-width: 860px) {
	.mg-cfg-grid { grid-template-columns: 1fr; }
	.mg-cfg-side { position: relative; top: 0; }
	.mg-cfg-preview svg { max-height: 46vh; }
	.mg-cfg-side .mg-cfg-total { display: none; }   /* the bottom bar carries the total */
	.mg-cfg-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
		padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: var(--mg-voile); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		border-top: 1px solid var(--mg-line); transition: transform .25s; }
	.mg-cfg-bar span { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; }
	.mg-cfg-thumb { display: block; width: 3.2rem; flex: none; }   /* the preview, small, while the options are being chosen */
	.mg-cfg-thumb svg { display: block; width: 100%; height: auto; }
	.mg-cfg-thumb .mg-cfg-dim { display: none; }
	.mg-cfg-bar strong { font-family: var(--wp--preset--font-family--serif); font-size: 1.8rem; font-weight: 500; color: var(--wp--preset--color--or-clair); }
	.mg-cfg-bar .wp-element-button { background: var(--mg-gold); color: #1b150c; border-radius: 999px; padding: .85em 1.4em; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
	.mg-cfg.recap-visible .mg-cfg-bar { transform: translateY(110%); }
	.mg-cfg-toast { bottom: 5.5rem; }
}
@media (max-width: 520px) {
	.mg-cfg-step { padding: 1rem; }
	.mg-cfg-choices { grid-template-columns: 1fr; }
	.mg-cfg-lines { grid-template-columns: 1fr; }
	.mg-cfg-lines dt { border-bottom: 0; padding-bottom: 0; }
	.mg-cfg-lines dd { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
	.mg-cfg-led, .mg-cfg-pulse { animation: none !important; }
}

/* the hidden map of "Le lieu de votre choix" (assets/js/lieu.js): out of sight but drawn, 1024 px so that the buildings load */
.mg-lieu-source { position: fixed; left: -10000px; top: 0; width: 1024px; height: 1024px; overflow: hidden; pointer-events: none; }
.mg-lieu-source .mg-lieu-3d { position: absolute; inset: 0; }
/* an element hidden by a script stays hidden, whatever its display (the 3D toggle, the view tabs…) */
.mg-cfg [hidden] { display: none !important; }
/* the preparation of "Le lieu de votre choix": its percentage and a thin gold bar */
.mg-cfg-prepa b { color: var(--wp--preset--color--or-clair); font-variant-numeric: tabular-nums; }
.mg-cfg-barre { display: block; height: 3px; margin: .5rem auto 0; max-width: 16rem; border-radius: 2px; background: var(--mg-line); overflow: hidden; }
.mg-cfg-barre span { display: block; height: 100%; width: 0; background: var(--mg-gold); transition: width .3s; }
/* in 3D: the chosen frame shown around the relief, or not */
.mg-cfg-bascule { display: block; margin: .9rem auto 0; font: 600 .68rem/1 var(--wp--preset--font-family--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
	padding: .55rem .95rem .55rem 2.2rem; border-radius: 999px; border: 1px solid var(--mg-line2); background: transparent; color: var(--wp--preset--color--sable); position: relative; }
.mg-cfg-bascule::before { content: ""; position: absolute; left: .8rem; top: 50%; width: .8rem; height: .8rem; margin-top: -.4rem; border-radius: 3px; border: 1px solid var(--mg-line2); }
.mg-cfg-bascule[aria-pressed="true"] { color: var(--wp--preset--color--or-clair); border-color: var(--wp--preset--color--or-clair); }
.mg-cfg-bascule[aria-pressed="true"]::before { background: var(--mg-gold); border-color: transparent; }
.mg-cfg-bascule[hidden] { display: none; }   /* the frame alone, or a relief without its frame: nothing to show or hide */
/* the summary: what the parcel holds; the two ways to send, the copy apart */
.mg-cfg-boite { margin: 1.4rem 0; padding: 1rem 1.2rem; border: 1px dashed var(--mg-line2); border-radius: 14px; }
.mg-cfg-boite .mg-kicker { margin: 0 0 .3rem; }
.mg-cfg-boite .mg-check li { margin: .35rem 0; }
.mg-cfg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1rem !important; }   /* Instagram and e-mail side by side, apart */
.mg-cfg-copie { margin: 1.6rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--mg-line); font-size: .9rem; }
.mg-cfg-lien { font: inherit; font-weight: 600; cursor: pointer; padding: 0; border: 0; background: none; color: var(--wp--preset--color--or-clair); text-decoration: underline; text-underline-offset: .2em; }
.mg-cfg-lien:disabled { opacity: .4; cursor: not-allowed; }

/* a button that follows "Dans la boîte" (patterns/creations.php): the same band, no line between */
.mg-band:has(+ .mg-suite) { border-bottom: 0; padding-bottom: 0 !important; }
.mg-section.mg-suite { border-top: 0; margin-block-start: 0; padding-top: var(--wp--preset--spacing--50) !important; }   /* no gap: the band goes on */

/* ---- call to action ---- */
.mg-cta { margin-block-start: 0; }   /* no gap, a single line above it */
.mg-band + .mg-cta { border-top: 0; }
.mg-cta { text-align: center; background: radial-gradient(60% 80% at 50% 100%, rgba(236, 211, 159, .12), rgba(236, 211, 159, 0)), var(--wp--preset--color--noir); border-top: 1px solid var(--mg-line); }
.mg-cta-logo img { filter: drop-shadow(0 0 18px rgba(236, 211, 159, .35)); }

/* ---- legal ---- */
.mg-legal h2 { font-size: 1.7rem; margin-top: 2.4rem; }
.mg-legal p { color: var(--mg-texte); }
mark.mg-todo { background: rgba(214, 90, 70, .22); color: #ffb4a6; padding: 0 .3em; border-radius: 4px; }

/* ---- footer ---- */
.mg-footer { padding-block: var(--wp--preset--spacing--50) 1.5rem !important; border-top: 1px solid var(--mg-line); background: var(--wp--preset--color--nuit); }
.mg-footer .mg-kicker { margin-top: .4rem; }
.mg-links { list-style: none; padding: 0; margin: 0; }
.mg-links li { margin: .35rem 0; }
.mg-links a { color: var(--mg-texte); }
.mg-links a:hover { color: var(--wp--preset--color--or-clair); }
.mg-copy { border-top: 1px solid var(--mg-line); padding-top: 1.2rem; margin-top: 2rem !important; }

@media (prefers-reduced-motion: reduce) {
	.wp-element-button, .mg-faq summary::after { transition: none; }
}

/* ---- home: the app drives the relief (a tap on a card, the light changes) ---- */
.mg-pilote { position: relative; max-width: 520px; margin-inline: auto; padding: 0 0 6% 0; }
.mg-pilote-relief { position: relative; aspect-ratio: 4 / 5; width: 82%; border-radius: var(--mg-radius); overflow: hidden; border: 1px solid var(--mg-line);
	box-shadow: 0 30px 80px -20px rgba(236, 160, 90, .35); background: #0c0b0a; }
.mg-pilote-relief img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: mg-pilote 12s infinite; }
.mg-pilote-relief img:nth-child(2) { animation-delay: 4s; }
.mg-pilote-relief img:nth-child(3) { animation-delay: 8s; }
@keyframes mg-pilote { 0% { opacity: 0; } 5% { opacity: 1; } 33.3% { opacity: 1; } 38.3% { opacity: 0; } 100% { opacity: 0; } }   /* one light every 4 s, cross-faded */
.mg-pilote-tel { position: absolute; right: 0; bottom: 0; width: 38%; aspect-ratio: 780 / 1688; border-radius: 1.4rem; border: 5px solid #1d1b18;
	outline: 1px solid var(--mg-line2); overflow: hidden; background: #090909; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .8); }
.mg-pilote-tel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-pilote-doigt { position: absolute; width: 16%; aspect-ratio: 1; margin: -8% 0 0 -8%; border-radius: 50%; background: rgba(255, 255, 255, .55);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); animation: mg-doigt 12s infinite; }
.mg-pilote-doigt::after { content: ""; position: absolute; inset: -40%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); opacity: 0; animation: mg-tap 4s infinite; }
@keyframes mg-doigt {   /* the finger goes from card to card: clear sky, sunset, sunrise (positions on the app screenshot) */
	0%, 28% { left: 22%; top: 84%; } 33.3%, 61.6% { left: 60%; top: 55%; } 66.6%, 95% { left: 22%; top: 55%; } 100% { left: 22%; top: 84%; } }
@keyframes mg-tap { 0% { transform: scale(.5); opacity: .9; } 25% { transform: scale(1.4); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.mg-pilote-relief img, .mg-pilote-doigt, .mg-pilote-doigt::after { animation: none; }
	.mg-pilote-relief img:first-child { opacity: 1; }
	.mg-pilote-doigt { left: 60%; top: 55%; }
}
.mg-portrait img { max-width: 380px; margin-inline: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---- the relief lit by its LEDs (assets/js/ciel.js): a day over Lyon (Le produit), the two sizes (La gamme) ---- */
.mg-ciel { width: 100%; max-width: 620px; margin: 0 auto; }
.mg-ciel canvas { display: block; width: 100%; aspect-ratio: 1; }
.mg-ciel .mg-chips { margin-top: .6rem; }
.mg-ciel-heure { min-height: 1.5em; margin-top: .4rem; text-align: center; font: 600 .7rem/1.5 var(--wp--preset--font-family--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mg-gold); }
.mg-tailles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(1rem, 4vw, 3rem); margin-top: var(--wp--preset--spacing--40); }
.mg-tailles .mg-ciel { margin: 0; justify-self: center; }
.mg-tailles figcaption { margin-top: .4rem; text-align: center; color: var(--wp--preset--color--sable); }
.mg-tailles .mg-ciel-heure { display: block; }
.mg-relief3d { width: 100%; aspect-ratio: 1; border-radius: var(--mg-radius); border: 1px solid var(--mg-line);   /* a relief alone, in 3D, on its dark table */
	background: radial-gradient(70% 60% at 50% 45%, rgba(236, 211, 159, .08), rgba(236, 211, 159, 0)), #0f0e0d; }
.mg-relief3d-fig { margin: 0; }
/* Le produit (1.7.9): the hero product with its 3D, three tiles, the comparison, the two other products, the phone bar */
.mg-hero-produit .mg-cadre3d { margin: 0; }
.mg-tuiles .mg-tuile { position: relative; display: flex; flex-direction: column; }
.mg-tuiles .mg-tuile > .wp-block-buttons { margin-top: auto; padding-top: 1.2rem; }
.mg-tuiles .mg-tuile .wp-block-button__link::after { content: ""; position: absolute; inset: 0; }   /* the whole tile leads to its section */
.mg-compare { max-width: 860px; margin: var(--wp--preset--spacing--40) auto 1.5rem; }
.mg-prices.mg-compare td, .mg-prices.mg-compare th { white-space: normal; text-align: left; padding-right: 1rem; }
.mg-prices.mg-compare td:not(:first-child) { color: var(--mg-texte); }
.mg-prices.mg-compare td:first-child { color: var(--wp--preset--color--or-clair); width: 30%; }
.mg-prices.mg-compare tr:last-child td:not(:first-child), .mg-prices.mg-compare tr:nth-last-child(2) td:not(:first-child) { color: var(--wp--preset--color--or-clair); }   /* the prices stand out */
.mg-formules .mg-formule > summary::after { margin-left: auto; }
.mg-hero-produit .mg-price { margin-top: 1.4rem !important; }
.mg-prices.mg-compare th { color: var(--wp--preset--color--or-clair) !important; }
.mg-produits2 { margin-top: var(--wp--preset--spacing--40) !important; }
.mg-produit2 { display: flex; flex-direction: column; }
.mg-produit2 > .wp-block-buttons { margin-top: auto; padding-top: 1rem; }
.mg-produit2 .mg-tailles { margin: 1rem 0; gap: .8rem; }
.mg-produit2 .mg-formule-photo { margin: 1rem 0; }
:target { scroll-margin-top: 90px; }
.mg-nav-cta > a { background: var(--wp--preset--gradient--or); color: #1b150c !important; border-radius: 999px; padding: .55em 1.1em !important; }
.is-menu-open .mg-nav-cta > a { background: none; color: var(--wp--preset--color--or-clair) !important; padding: 1rem 0 !important; }
.mg-annonce-prix { margin: 1.2rem 0 1.6rem; }   /* home: the three formulas and their prices */
.mg-annonce-prix td { vertical-align: baseline; padding: .75rem 0; }
.mg-prices.mg-annonce-prix td:last-child { font-family: var(--wp--preset--font-family--serif); font-size: 1.9rem; line-height: 1; }
.mg-annonce-prix td:last-child small { font: 600 .68rem/1 var(--wp--preset--font-family--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--sable); margin-right: .3em; }
.mg-barre-produit { display: none; }
/* 1.7.12: the price of the hero, the links under it, the places ready to order, who makes them */
.mg-price-des small { margin-top: .5rem; }
.mg-ancres-section { padding-top: 0 !important; }
.mg-ancres { gap: .5rem; }
.mg-chips a { font: 600 .72rem/1 var(--wp--preset--font-family--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; min-height: 2.6rem;
	padding: .7em 1.1em; border-radius: 999px; border: 1px solid var(--mg-line2); color: var(--wp--preset--color--or-clair); transition: background .2s, color .2s; }
.mg-chips a:hover, .mg-chips a:focus-visible { background: var(--mg-gold); color: #1b150c; border-color: transparent; }
.mg-pastilles { display: grid; gap: 1.1rem; width: fit-content; max-width: 100%; margin: var(--wp--preset--spacing--40) auto 1.5rem !important; }
.mg-pastilles-famille { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: 1rem; }
.mg-pastilles-famille > span { font: 600 .72rem/1.3 var(--wp--preset--font-family--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--sable); text-align: right; }
.mg-pastilles .mg-chips { justify-content: flex-start; }
.mg-catalogue p a { color: inherit; text-decoration: underline; text-decoration-color: var(--mg-line2); text-underline-offset: 3px; }
.mg-catalogue p a:hover { color: var(--wp--preset--color--or-clair); text-decoration-color: currentColor; }
.mg-qui-carte { display: flex; align-items: center; gap: 1.2rem; max-width: 640px; margin: 0 auto; }
.mg-qui-carte img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--mg-line2); }
.mg-qui-carte p { margin: 0; }
.mg-qui-carte .mg-kicker { margin-bottom: .3rem; }
@media (max-width: 700px) {
	.mg-pastilles-famille { grid-template-columns: 1fr; gap: .5rem; }
	.mg-pastilles-famille > span { text-align: left; }
	.mg-qui-carte img { width: 72px; height: 72px; }
}
@media (max-width: 600px) { .mg-agrandir { display: none; } }   /* a phone: the view already takes the width */
@media (max-width: 781px) {   /* a phone: the picture right under the title, before the text */
	.mg-hero-media .wp-block-columns.mg-split { flex-direction: column; gap: 0 !important; }
	.mg-hero-media .mg-split > .wp-block-column:first-child { display: contents; }
	.mg-hero-media .mg-split > .wp-block-column:first-child > * { order: 3; margin: 0 0 1.3rem !important; }
	.mg-hero-media .mg-split > .wp-block-column:first-child > .mg-kicker, .mg-hero-media .mg-split > .wp-block-column:first-child > h1 { order: 1; }
	.mg-hero-media .mg-split > .wp-block-column:first-child > .mg-kicker { margin-bottom: .6rem !important; }
	.mg-hero-media .mg-split > .wp-block-column:first-child > :last-child { margin-bottom: 0 !important; }
	.mg-ancres a { font-size: .64rem; min-height: 2.3rem; padding: .6em .95em; }
	.mg-hero-media .mg-split > .wp-block-column:last-child { order: 2; margin: .4rem 0 1.6rem !important; }
}
@media (max-width: 700px) {   /* the three tiles, compact on a phone: the name, the price, and the way to it */
	.mg-tuiles .mg-tuile { padding: 1rem 1.2rem !important; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; }
	.mg-tuiles .mg-tuile > .mg-kicker, .mg-tuiles .mg-tuile > p:not(.mg-price) { display: none; }
	.mg-tuiles .mg-tuile > h3 { grid-column: 1; margin: 0 !important; font-size: 1.15rem; }
	.mg-tuiles .mg-tuile > .mg-price { grid-column: 1; margin: .2rem 0 0 !important; font-size: 1.5rem !important; }
	.mg-tuiles .mg-tuile > .mg-price small { display: inline; margin-right: .4em; letter-spacing: .08em; white-space: nowrap; }
	.mg-tuiles .mg-tuile > .wp-block-buttons { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; }
}
@media (max-width: 781px) {
	.mg-ciel-duo { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; }   /* the two days: swipe from one to the other */
	.mg-ciel-duo > .mg-ciel { flex: 0 0 86%; scroll-snap-align: center; }
	.mg-barre-produit:not([hidden]) { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
		padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: var(--mg-voile); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--mg-line); font-size: .85rem; }
	.mg-barre-produit .wp-element-button { padding: .8em 1.3em; font-size: .72rem; }
	.mg-barre-produit b { white-space: nowrap; }
}
/* Le produit: the three formulas, panels that unfold (core Details blocks); one open at a time (functions.php) */
.mg-formules { max-width: 980px; margin: var(--wp--preset--spacing--40) auto 0 !important; }
.mg-formule { border: 1px solid var(--mg-line); border-radius: var(--mg-radius); background: var(--wp--preset--color--ardoise); margin: 0 0 1rem; overflow: hidden; }
.mg-formule[open] { border-color: var(--mg-line2); box-shadow: 0 0 60px -25px rgba(236, 211, 159, .25); }
.mg-formule > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 1rem; padding: 1.15rem 1.5rem;
	font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.mg-formule > summary::-webkit-details-marker { display: none; }
.mg-formule > summary em { font-style: normal; margin-left: auto; font: 600 .78rem/1 var(--wp--preset--font-family--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--or-clair); }
.mg-formule > summary::after { content: "+"; color: var(--wp--preset--color--or); font: 300 1.6rem/1 var(--wp--preset--font-family--sans); transition: transform .2s; }
.mg-formule[open] > summary::after { transform: rotate(45deg); }
.mg-formule > :not(summary) { margin-inline: 1.5rem; }
.mg-formule > :last-child { margin-bottom: 1.5rem; }
.mg-formule .mg-cadre3d { margin-top: .5rem; }
.mg-formule .mg-tailles { margin-top: .5rem; }
.mg-formule-photo img { max-height: 420px; object-fit: cover; }
/* a row of photos that scrolls by itself, slowly; a finger or the mouse takes over (La lumière, en vrai) */
.mg-defile { display: flex !important; gap: 1rem; overflow-x: auto; margin-top: var(--wp--preset--spacing--40) !important; padding-bottom: .6rem;
	scrollbar-width: thin; scrollbar-color: var(--mg-line2) transparent; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.mg-defile > * { flex: 0 0 clamp(170px, 22vw, 250px); margin: 0 !important; }
.mg-defile figcaption { font-size: .78rem; }
.mg-fiche { max-width: 820px; margin: var(--wp--preset--spacing--40) auto 0; }   /* the technical sheet: label, then its value */
.mg-fiche td:first-child { width: 11rem; color: var(--wp--preset--color--or-clair); }
.mg-prices.mg-fiche td:not(:first-child) { white-space: normal; text-align: left; color: var(--mg-texte); }   /* under the name of the place, the hour of the day going by */
.mg-tailles figcaption strong { display: block; font: 500 1.6rem/1.2 var(--wp--preset--font-family--serif, Georgia, serif); color: var(--mg-gold); }
@media (max-width: 640px) { .mg-tailles { grid-template-columns: 1fr; } }

/* ---- Sur mesure: the lit frame in 3D ---- */
.mg-cadre3d { margin-top: var(--wp--preset--spacing--40); }
.mg-cadre3d-vue { width: min(100%, 560px); aspect-ratio: 1; margin: 1rem auto; border-radius: var(--mg-radius);
	background: radial-gradient(70% 60% at 50% 45%, rgba(236, 211, 159, .08), rgba(236, 211, 159, 0)), #0f0e0d; border: 1px solid var(--mg-line); }
.mg-vitrine-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }   /* sideways: turn; up and down: the page scrolls */
.mg-vitrine-canvas:active { cursor: grabbing; }
/* the 3D views: a button to see them bigger, in the middle of the screen, not full screen (vitrine3d.js) */
.mg-relief3d, .mg-cadre3d-vue, .mg-cfg-vitrine-vue { position: relative; }
.mg-agrandir { position: absolute; top: .6rem; right: .6rem; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; cursor: pointer;
	border-radius: 50%; border: 1px solid var(--mg-line2); background: rgba(15, 14, 13, .72); color: #ecd39f; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, color .2s; }
.mg-agrandir:hover, .mg-agrandir:focus-visible { background: var(--mg-gold); color: #1b150c; }
.is-grand .mg-agrandir { display: none; }
.mg-vue3d { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; overflow: auto;
	background: rgba(5, 5, 5, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: mg-vue3d .2s ease-out; }
@keyframes mg-vue3d { from { opacity: 0; } }
.mg-vue3d-fenetre { width: min(94vw, 1000px); }
.mg-vue3d-fermer { position: fixed; top: 1rem; right: 1rem; z-index: 2; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; padding: 0; cursor: pointer;
	border-radius: 50%; border: 1px solid rgba(236, 211, 159, .35); background: rgba(15, 14, 13, .8); color: #ecd39f; }
.mg-vue3d-fermer:hover, .mg-vue3d-fermer:focus-visible { background: var(--mg-gold); color: #1b150c; }
.mg-relief3d.is-grand { width: min(94vw, 84vh, 860px); margin: 0 auto; }
.mg-cadre3d.is-grand { margin: 0; }
.mg-cadre3d.is-grand .mg-cadre3d-vue { width: min(100%, calc(94vh - 11rem)); margin: .8rem auto; }
.mg-cfg-vitrine.is-grand .mg-cfg-vitrine-vue { width: min(100%, calc(94vh - 8rem)); }
.mg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.mg-chips button { font: 600 .72rem/1 var(--wp--preset--font-family--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; min-height: 2.6rem;   /* a finger-sized target */
	padding: .7em 1.1em; border-radius: 999px; border: 1px solid var(--mg-line2); background: transparent; color: var(--wp--preset--color--or-clair); }
.mg-chips button[aria-pressed="true"] { background: var(--mg-gold); color: #1b150c; border-color: transparent; }