/*
 * Jumeau numérique BIM (accueil) : en-tête texte + trois niveaux de livrable, grand comparateur
 * nuage de points / maquette 3D (bloc acf/compare), paragraphe et bouton.
 * Le comparateur est réutilisable ailleurs : ses règles ne dépendent pas de la section.
 */

.cp-main > .cp-twin-part { margin-block: 0; }

.cp-twin {
	--cp-twin-navy: var(--wp--preset--color--navy, #000033);
	--cp-twin-orange: var(--wp--preset--color--orange, #FF9900);
	--cp-twin-mute: var(--wp--preset--color--mute, #555B6B);
	--cp-twin-line: var(--wp--preset--color--line, #E3E5EC);
	margin: 0 !important;
	padding-block: clamp(72px, 9vw, 120px);
	background: #fff;
}
.cp-twin,
.cp-twin * { box-sizing: border-box; }
.cp-twin > *,
.cp-twin__head > *,
.cp-twin__intro > *,
.cp-twin__foot > * { margin-block: 0 !important; }

.cp-twin__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px clamp(40px, 6vw, 96px); margin-bottom: clamp(36px, 4vw, 56px) !important; }
.cp-twin .cp-twin__title { margin-bottom: 18px !important; color: var(--cp-twin-navy); font-size: clamp(32px, 3.2vw, 46px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.cp-twin__text { color: var(--cp-twin-mute); font-size: 17px; }

/* Trois niveaux de détail, du plus simple au plus complet : numéro et jauge à 1, 2 ou 3 barres. */
.cp-twin .cp-levels { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: cp-lvl; }
.cp-levels li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 18px; margin: 0; padding: 18px 70px 18px 0; border-top: 1px solid var(--cp-twin-line); color: var(--cp-twin-mute); font-size: 15.5px; line-height: 1.5; counter-increment: cp-lvl; }
.cp-levels li:last-child { border-bottom: 1px solid var(--cp-twin-line); }
.cp-levels li::before { content: "0" counter(cp-lvl); grid-row: span 2; color: var(--cp-twin-orange); font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cp-levels li strong { grid-column: 2; display: block; color: var(--cp-twin-navy); font-size: 19px; font-weight: 700; line-height: 1.25; }
.cp-levels li::after {
	content: "";
	position: absolute;
	right: 0;
	top: 24px;
	width: 62px;
	height: 4px;
	border-radius: 2px;
	background:
		linear-gradient(90deg, var(--cp-lvl-1, var(--cp-twin-line)) 0 18px, transparent 18px 22px, var(--cp-lvl-2, var(--cp-twin-line)) 22px 40px, transparent 40px 44px, var(--cp-lvl-3, var(--cp-twin-line)) 44px 62px);
}
.cp-levels li:nth-child(n) { --cp-lvl-1: var(--cp-twin-orange); }
.cp-levels li:nth-child(n + 2) { --cp-lvl-2: var(--cp-twin-orange); }
.cp-levels li:nth-child(n + 3) { --cp-lvl-3: var(--cp-twin-orange); }

.cp-twin__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; margin-top: clamp(28px, 3vw, 40px) !important; }
.cp-twin__foot .cp-twin__text { flex: 1 1 520px; }
.cp-twin__cta .wp-block-button__link { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; }
.cp-twin__cta .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s;
}
.cp-twin__cta .wp-block-button__link:hover::after { transform: translateX(3px); }
.cp-twin a:focus-visible { outline: 2px solid var(--cp-twin-orange); outline-offset: 3px; }

/* ---------- Comparateur (bloc acf/compare) ---------- */
.cp-compare {
	--cp-split: 100%;
	position: relative;
	aspect-ratio: var(--cp-ratio, 16 / 9);
	max-width: 100%;
	overflow: hidden;
	border-radius: 8px;
	background: var(--wp--preset--color--mist, #F3F4F8);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 51, .35);
	touch-action: pan-y;
	cursor: ew-resize;
	user-select: none;
}
.cp-compare img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.cp-compare .cp-compare__after { clip-path: inset(0 0 0 var(--cp-split)); }
.cp-compare__line { position: absolute; top: 0; bottom: 0; left: var(--cp-split); z-index: 2; width: 2px; margin-left: -1px; background: var(--wp--preset--color--orange, #FF9900); box-shadow: 0 0 14px 2px rgba(255, 153, 0, .7); pointer-events: none; }
.cp-compare__knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--wp--preset--color--orange, #FF9900); color: var(--wp--preset--color--navy, #000033); box-shadow: 0 10px 24px rgba(0, 0, 51, .3); }
.cp-compare__knob svg { width: 26px; height: 26px; }
.cp-compare__tag { position: absolute; top: 18px; z-index: 2; padding: 6px 12px; border-radius: 8px; background: rgba(0, 0, 51, .82); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.4; pointer-events: none; }
.cp-compare__tag--a { left: 18px; }
.cp-compare__tag--b { right: 18px; background: rgba(255, 255, 255, .92); color: var(--wp--preset--color--navy, #000033); }
.cp-compare__range { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cp-compare__range:focus-visible ~ .cp-compare__line .cp-compare__knob { outline: 3px solid var(--wp--preset--color--navy, #000033); outline-offset: 3px; }
/* Points d'information : visibles quand l'image d'après les découvre. */
.cp-spot { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 0; height: 0; opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.cp-spot.is-on { opacity: 1; transform: none; pointer-events: auto; }
.cp-spot button { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--wp--preset--color--navy, #000033); color: #fff; font: 700 16px/1 var(--wp--preset--font-family--titillium, sans-serif); cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 51, .35); }
.cp-spot button::before { content: ""; position: absolute; inset: -8px; border: 2px solid var(--wp--preset--color--orange, #FF9900); border-radius: 50%; opacity: .8; animation: cp-spot-ping 2.2s ease-out infinite; }
@keyframes cp-spot-ping { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.cp-spot span { position: absolute; left: 22px; top: -14px; width: max-content; max-width: 220px; padding: 7px 12px; border-radius: 8px; background: #fff; color: var(--wp--preset--color--navy, #000033); font-size: 13.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 10px 24px rgba(0, 0, 51, .18); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; pointer-events: none; }
.cp-spot span small { display: block; color: var(--wp--preset--color--mute, #555B6B); font-size: 13px; font-weight: 400; }
.cp-spot.is-left span { left: auto; right: 22px; transform: translateX(6px); }
.cp-spot:hover span,
.cp-spot button:focus-visible + span,
.cp-spot.is-open span { opacity: 1; transform: none; }
.cp-spot button:focus-visible { outline: 2px solid var(--wp--preset--color--orange, #FF9900); outline-offset: 3px; }

/* Éditeur : on montre l'image d'après à moitié et tous les points. */
.editor-styles-wrapper .cp-compare { --cp-split: 50%; }
.editor-styles-wrapper .cp-spot { opacity: 1; transform: none; }

@media (max-width: 900px) {
	.cp-twin__head { grid-template-columns: minmax(0, 1fr); }
	.cp-compare { aspect-ratio: 4 / 3; }
	.cp-spot span { max-width: 160px; }
	.cp-compare__knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-spot,
	.cp-spot span { transition: none; }
	.cp-spot button::before { animation: none; }
}