@font-face { font-family: "Outfit"; src: url("fonts/outfit-latin-wght.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
/* Maison 3D — interface sombre (bleu nuit, blanc, orange). Toutes les règles sont préfixées .m3d. */


.m3d {
	--navy: #001167;
	--navy-2: #0b1d6e;
	--glass: rgba(4, 16, 74, .92);
	--line: rgba(255, 255, 255, .12);
	--orange: #7cc900;
	--orange-2: #a3dc52;
	--text: #f4f6fb;
	--muted: #b4bde0;
	--ease: cubic-bezier(.2, .75, .2, 1);
	position: relative;
	height: 100svh;
	min-height: 620px;
	overflow: hidden;
	isolation: isolate;
	background: radial-gradient(120% 90% at 50% 10%, #22307a 0%, #001167 60%, #000a3d 100%);
	color: var(--text);
	font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}
.m3d *, .m3d *::before, .m3d *::after { box-sizing: border-box; }
.m3d svg { width: 100%; height: 100%; display: block; }
.m3d :focus-visible { outline: 2px solid var(--orange-2); outline-offset: 3px; }

.m3d-stage { position: absolute; inset: 0; }
.m3d-stage canvas { width: 100% !important; height: 100% !important; display: block; touch-action: pan-y; opacity: 0; transition: opacity 1.2s var(--ease); }
.m3d.is-ready .m3d-stage canvas { opacity: 1; }

/* Titre */
.m3d-intro { position: absolute; z-index: 3; top: clamp(1.25rem, 4vh, 2.75rem); left: clamp(1rem, 3.2vw, 3.25rem); max-width: min(30rem, 40vw); pointer-events: none; }
.m3d-kicker { margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.m3d .m3d-title, .m3d h3 { color: var(--text); }
.m3d-title { margin: 0; font-family: "Outfit", sans-serif; font-weight: 700; font-size: clamp(1.8rem, 3.1vw, 2.9rem); line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.m3d-title span { color: var(--orange); text-shadow: 0 0 28px rgba(122, 197, 17, .45); }
.m3d-lead { margin: .9rem 0 0; color: #d3dbea; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.55; max-width: 32rem; }
.m3d-intro > * { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.m3d.is-ready .m3d-intro > * { opacity: 1; transform: none; }
.m3d.is-ready .m3d-intro > :nth-child(2) { transition-delay: .12s; }
.m3d.is-ready .m3d-intro > :nth-child(3) { transition-delay: .24s; }

/* Navigation des prestations */
.m3d-nav {
	position: absolute; z-index: 4; left: clamp(1rem, 3.2vw, 3.25rem); top: 50%; transform: translateY(-50%); /* centré verticalement */
	display: flex; flex-direction: column; gap: 2px; padding: .45rem; width: 13.5rem;
	background: var(--glass); border: 1px solid var(--line); border-radius: 18px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.m3d-nav button {
	display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 44px; padding: .55rem .8rem;
	border: 0; border-radius: 12px; background: transparent; color: #dbe2ef; font: 500 .92rem/1.2 "Outfit", sans-serif; text-align: left; cursor: pointer;
	transition: background-color .25s, color .25s;
}
.m3d-nav button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.m3d-nav button[aria-pressed="true"] { background: linear-gradient(135deg, #3b247e, #3667b3); color: #fff; box-shadow: 0 10px 24px -10px rgba(59, 36, 126, .9); }
.m3d-ico { width: 20px; height: 20px; flex: none; }

/* Points interactifs */
.m3d-hotspots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.m3d-hs {
	position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; pointer-events: auto;
	transition: opacity .35s var(--ease); will-change: transform;
}
.m3d-hs__dot { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.m3d-hs__dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 24px 6px rgba(122, 197, 17, .7); transition: transform .3s var(--ease); }
.m3d-hs__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--orange-2); animation: m3d-pulse 2.2s var(--ease) infinite; }
.m3d-hs__dot span { position: relative; width: 14px; height: 14px; }
.m3d-hs__dot span::before, .m3d-hs__dot span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease); }
.m3d-hs__dot span::after { transform: rotate(90deg); }
.m3d-hs:hover .m3d-hs__dot::before, .m3d-hs.is-active .m3d-hs__dot::before { transform: scale(1.15); }
.m3d-hs.is-active .m3d-hs__dot span::after { transform: rotate(0deg); }
.m3d-hs__label {
	position: absolute; top: -4px; display: flex; align-items: center; gap: .55rem; white-space: nowrap; height: 42px; padding: 0 .95rem 0 .7rem;
	background: rgba(0, 12, 70, .82); border: 1px solid var(--line); border-radius: 12px; font: 600 .86rem/1.15 "Outfit", sans-serif; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8);
	transition: border-color .25s, background-color .25s, transform .35s var(--ease);
}
.m3d-hs__label .m3d-ico { color: var(--orange); }
.m3d-hs.is-right .m3d-hs__label { left: 47px; }
.m3d-hs.is-left .m3d-hs__label { right: 47px; }
.m3d-hs.is-left .m3d-hs__label { flex-direction: row; }
.m3d-hs:hover .m3d-hs__label, .m3d-hs.is-active .m3d-hs__label { border-color: rgba(163, 220, 82, .7); background: rgba(20, 16, 70, .92); }
.m3d-hs.is-active .m3d-hs__label { background: linear-gradient(135deg, #8ad11f, #6ab00c); border-color: transparent; color: #fff; text-shadow: 0 1px 2px rgba(0, 40, 0, .25); }
.m3d-hs.is-active .m3d-hs__label .m3d-ico { color: #fff; }
.m3d-hs.is-hidden { opacity: 0; pointer-events: none; }
.m3d:not(.is-ready) .m3d-hs { opacity: 0; }
@keyframes m3d-pulse { 0% { transform: scale(.75); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

/* Fiche prestation */
.m3d-panel {
	position: absolute; z-index: 5; right: clamp(1rem, 2.6vw, 2.75rem); top: 50%; width: min(23rem, 32vw);
	max-height: calc(100% - 2rem); overflow: auto; overscroll-behavior: contain; scrollbar-width: none;
	padding: 1.15rem; border-radius: 22px; background: var(--glass); border: 1px solid var(--line);
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
	opacity: 0; visibility: hidden; transform: translate(24px, -50%) scale(.98);
	transition: opacity .5s var(--ease), transform .6s var(--ease), visibility .5s;
}
.m3d-panel.is-open { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.m3d-panel__close { position: absolute; top: .85rem; right: .85rem; width: 36px; height: 36px; padding: 9px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--muted); cursor: pointer; }
.m3d-panel__close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.m3d-panel__head { display: flex; align-items: center; gap: .8rem; padding-right: 2.5rem; }
.m3d-panel__ico { width: 46px; height: 46px; padding: 11px; border-radius: 13px; background: linear-gradient(135deg, #3b247e, #3667b3); color: #fff; flex: none; box-shadow: 0 10px 24px -8px rgba(59, 36, 126, .9); }
.m3d-panel h3 { margin: 0; font: 600 1.3rem/1.15 "Outfit", sans-serif; }
.m3d-panel__media { margin: .9rem 0 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 8; background: var(--navy-2); }
.m3d-panel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m3d-panel p { margin: 1rem 0 0; color: #d3dbea; font-size: .93rem; line-height: 1.55; }
.m3d-panel ul { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.m3d-panel li { position: relative; padding-left: 1.75rem; font-size: .9rem; color: #e9edf5; }
.m3d-panel li::before { content: ""; position: absolute; left: 0; top: .05rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.m3d-btn { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.15rem; min-height: 48px; padding: .8rem 1.1rem; border-radius: 13px; background: linear-gradient(135deg, #8ad11f, #6ab00c); color: #fff; text-shadow: 0 1px 2px rgba(0, 40, 0, .25); font: 600 .98rem/1 "Outfit", sans-serif; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(122, 197, 17, .6); transition: transform .25s var(--ease), box-shadow .25s; }
.m3d-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(122, 197, 17, .8); }
.m3d-btn span { transition: transform .25s var(--ease); }
.m3d-btn:hover span { transform: translateX(4px); }
.m3d-link { display: block; margin-top: .7rem; text-align: center; color: var(--muted); font-size: .88rem; }
.m3d-link:hover { color: #fff; }

/* Schéma des couches (quand il n'y a pas de photo) */
.m3d-layers { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 1rem; background: linear-gradient(160deg, #0b1d6e, #000f55); }
.m3d-layers div { display: flex; align-items: center; gap: .7rem; font-size: .82rem; color: #e9edf5; opacity: 0; transform: translateX(-12px); animation: m3d-layer .6s var(--ease) forwards; animation-delay: calc(var(--i) * 110ms + .2s); }
.m3d-layers span { width: 64px; height: 20px; border-radius: 5px; background: var(--c); flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
@keyframes m3d-layer { to { opacity: 1; transform: none; } }

.m3d-hint { position: absolute; z-index: 3; left: 50%; bottom: 1.1rem; transform: translateX(-50%); margin: 0; padding: .45rem .9rem; border-radius: 999px; background: rgba(0, 12, 70, .6); border: 1px solid var(--line); color: var(--muted); font-size: .78rem; white-space: nowrap; pointer-events: none; transition: opacity .6s; }
.m3d:not(.is-global) .m3d-hint { opacity: 0; }

/* Chargement */
.m3d-loader { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 1rem; color: var(--muted); font-size: .9rem; background: radial-gradient(80% 60% at 50% 45%, #1a2a7a, #000a3d); transition: opacity .9s var(--ease), visibility .9s; }
.m3d-loader span { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .1); border-top-color: var(--orange); animation: m3d-spin 1s linear infinite; }
.m3d-loader.is-done { opacity: 0; visibility: hidden; }
@keyframes m3d-spin { to { transform: rotate(360deg); } }

/* Version de secours (sans 3D) */
.m3d.is-fallback { height: auto; min-height: 0; padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 3.2vw, 3.25rem); }
.m3d.is-fallback .m3d-intro { position: static; max-width: 40rem; margin-bottom: 2rem; }
.m3d.is-fallback .m3d-intro > * { opacity: 1; transform: none; }
.m3d.is-fallback .m3d-nav, .m3d.is-fallback .m3d-panel, .m3d.is-fallback .m3d-hint { display: none; }
.m3d-fallback ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.m3d-fallback a { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1rem; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color .25s, transform .25s var(--ease); }
.m3d-fallback a:hover { border-color: var(--orange); transform: translateY(-3px); }
.m3d-fallback img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 12px; }
.m3d-fallback__ico { width: 46px; height: 46px; padding: 11px; border-radius: 13px; background: linear-gradient(135deg, var(--orange), #6ab00c); }
.m3d-fallback strong { font: 600 1.1rem/1.2 "Outfit", sans-serif; }
.m3d-fallback span:last-child { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* Tablettes et téléphones */
@media (max-width: 900px) {
	.m3d { height: 100svh; min-height: 560px; }
	.m3d-intro { left: 1rem; right: 1rem; top: 1rem; max-width: none; }
	.m3d-title { font-size: clamp(1.6rem, 7vw, 2.3rem); }
	.m3d-lead { display: none; }
	.m3d-nav {
		top: auto; bottom: .75rem; left: .75rem; right: .75rem; transform: none; width: auto;
		flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px;
	}
	.m3d-nav::-webkit-scrollbar { display: none; }
	.m3d-nav button { width: auto; flex: none; scroll-snap-align: start; white-space: nowrap; }
	.m3d-panel { left: .75rem; right: .75rem; top: auto; bottom: 5.1rem; width: auto; max-height: 52svh; transform: translateY(24px); padding: 1rem; }
	.m3d-panel.is-open { transform: none; }
	.m3d-panel__media { display: none; }
	.m3d-hint { display: none; }
	.m3d-hs__label { display: none; }
	.m3d-hs.is-active .m3d-hs__label { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.m3d *, .m3d *::before, .m3d *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Vues de détail : la scène prend toute la place. */
.m3d-intro { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.m3d.is-ready:not(.is-global) .m3d-intro { opacity: 0; transform: translateY(-10px); }
.m3d:not(.is-global) .m3d-hs:not(.is-active) .m3d-hs__label { opacity: 0; pointer-events: none; transform: scale(.9); }
.m3d:not(.is-global) .m3d-hs:not(.is-active) { opacity: .7; }
.m3d:not(.is-global) .m3d-hs:not(.is-active) .m3d-hs__dot { transform: scale(.75); }

.m3d-panel::-webkit-scrollbar { display: none; }
@media (max-height: 760px) { .m3d-panel__media { display: none; } }
/* Vue globale : seules les étiquettes des points visibles s'affichent (pas de chevauchement). */
.m3d-hs.is-occluded .m3d-hs__label { opacity: 0; pointer-events: none; }
/* Point masqué par la maison (derrière un mur ou le toit) : invisible et non cliquable, pas de bouton « dans » la maison. */
.m3d .m3d-hs.is-occluded:not(.is-active) { opacity: 0; pointer-events: none; }
/* Duda impose ses couleurs et polices aux titres : on rend la main aux styles de la 3D. */
.m3d h3, .m3d .m3d-panel h3 { color: #fff !important; font: 600 1.3rem/1.15 "Outfit", sans-serif !important; letter-spacing: normal !important; text-transform: none !important; margin: 0 !important; }
.m3d p, .m3d li { letter-spacing: normal; }
/* Pleine largeur dans la colonne Duda (sortie de la marge du conteneur). */
html, body { overflow-x: clip; }
.m3d { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; border-radius: 0 !important; }