/*
 * Visites virtuelles 360° (accueil) : titre, texte en deux colonnes, fenêtre panoramique, options.
 * tour.js transforme l'image du panorama en fenêtre qui tourne (glisser, flèches du clavier) et
 * charge la vraie visite au clic sur « Entrer dans la visite ». Sans script : image, légende, lien.
 */

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

.cp-tour {
	--cp-tour-navy: var(--wp--preset--color--navy, #000033);
	--cp-tour-navy-2: #0a0a45;
	--cp-tour-orange: var(--wp--preset--color--orange, #FF9900);
	--cp-tour-soft: #C6C8DC;
	--cp-tour-line: rgba(255, 255, 255, .14);
	--cp-tour-ease: cubic-bezier(.2, .7, .2, 1);
	margin: 0 !important;
	padding-block: clamp(72px, 9vw, 120px);
	overflow: hidden;
	background: var(--cp-tour-navy);
	color: #fff;
}
.cp-tour,
.cp-tour * { box-sizing: border-box; }
.cp-tour > *,
.cp-tour__intro > *,
.cp-tour__opts > *,
.cp-tour__side > *,
.cp-tour__list > * { margin-block: 0 !important; }

/* Textes : couleurs déclarées, les titres héritent sinon du bleu nuit global. */
.cp-tour .cp-tour__title { color: #fff; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.cp-tour .cp-tour__intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 64px); margin-top: 22px !important; }
.cp-tour__intro p,
.cp-tour__side p { color: var(--cp-tour-soft); font-size: 17px; line-height: 1.6; }

/* ---------- Fenêtre panoramique ---------- */
.cp-tour .cp-tour__img { margin-top: clamp(36px, 4vw, 56px) !important; }
.cp-tour__img img { display: block; width: 100%; height: auto; border-radius: 8px; }
.cp-tour__img figcaption { margin: 12px 0 0; color: var(--cp-tour-soft); font-size: 15px; text-align: left; }
.cp-tour .cp-tour__go { margin-top: 18px !important; font-weight: 700; }
.cp-tour__go a { color: var(--cp-tour-orange); }

.cp-tour .cp-tour__img.is-pano { position: relative; height: clamp(380px, 44vw, 640px); overflow: hidden; border-radius: 8px; background: #1b1b3a; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .8); }
.cp-tour__img.is-pano:focus-visible { outline: 3px solid var(--cp-tour-orange); outline-offset: 4px; }
.cp-tour__img.is-drag { cursor: grabbing; }
.cp-tour__img.is-pano::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 51, .35) 0%, rgba(0, 0, 51, 0) 22%, rgba(0, 0, 51, 0) 58%, rgba(0, 0, 51, .82) 100%), radial-gradient(ellipse 34% 40% at 50% 50%, rgba(0, 0, 51, .38), rgba(0, 0, 51, 0)); }
.cp-tour__track { position: absolute; inset: 0 auto 0 0; display: flex; height: 100%; will-change: transform; }
.cp-tour .cp-tour__track img { flex: none !important; width: auto !important; max-width: none !important; height: 100% !important; border-radius: 0; pointer-events: none; -webkit-user-drag: none; }

.cp-tour .cp-tour__launch { position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; transform: translate(-50%, -50%); color: #fff; text-decoration: none; text-align: center; }
.cp-tour__ring { position: relative; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: var(--cp-tour-orange); color: var(--cp-tour-navy); transition: transform .4s var(--cp-tour-ease); }
.cp-tour__ring svg { width: 46px; height: 46px; }
.cp-tour__ring::before,
.cp-tour__ring::after { content: ""; position: absolute; inset: -12px; border: 2px solid rgba(255, 153, 0, .7); border-radius: 50%; animation: cp-tour-ping 2.8s ease-out infinite; }
.cp-tour__ring::after { animation-delay: 1.4s; }
.cp-tour__launch:hover .cp-tour__ring,
.cp-tour__launch:focus-visible .cp-tour__ring { transform: scale(1.07); }
.cp-tour__launch:focus-visible { outline: none; }
.cp-tour__launch:focus-visible .cp-tour__ring { box-shadow: 0 0 0 4px #fff; }
.cp-tour__launch strong { padding: 8px 18px; border-radius: 8px; background: rgba(0, 0, 51, .72); color: #fff; font-size: 18px; font-weight: 700; line-height: 1.3; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes cp-tour-ping { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

.cp-tour__hint { position: absolute; left: 50%; top: 22px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 8px; background: rgba(0, 0, 51, .6); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; transform: translateX(-50%); pointer-events: none; transition: opacity .5s; }
.cp-tour__hint svg { width: 20px; height: 20px; }
.cp-tour__img.is-touched .cp-tour__hint { opacity: 0; }

.cp-tour__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 24px 20px; pointer-events: none; }
.cp-tour .cp-tour__foot figcaption { margin: 0; color: var(--cp-tour-soft); font-size: 15px; line-height: 1.4; }
.cp-tour__foot figcaption::first-line { color: #fff; font-size: 17px; font-weight: 700; }
.cp-tour__yaw { flex: none; margin: 0; color: #fff; font-size: 30px; font-weight: 700; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.cp-tour__yaw small { margin-left: 6px; color: var(--cp-tour-orange); font-size: 14px; font-weight: 600; letter-spacing: .06em; }
/* Règle des angles : un trait tous les 10°, l'aiguille orange reste au centre. */
.cp-tour__rule { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 10px; overflow: hidden; pointer-events: none; }
.cp-tour__rule i { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px var(--cp-tour-tick, 40px)); will-change: transform; }
.cp-tour__rule::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 3px; height: 16px; margin-left: -1px; background: var(--cp-tour-orange); }

/* Visite chargée : la vraie visite recouvre la fenêtre, avec deux commandes en haut à droite. */
.cp-tour__frame { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; border: 0; background: #1b1b3a; }
.cp-tour__bar { position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; gap: 8px; }
.cp-tour .cp-tour__bar a,
.cp-tour .cp-tour__bar button { padding: 8px 14px; border: 0; border-radius: 8px; background: rgba(0, 0, 51, .8); color: #fff; font: 600 14px/1.2 var(--wp--preset--font-family--titillium, sans-serif); text-decoration: none; cursor: pointer; }
.cp-tour .cp-tour__bar a:hover,
.cp-tour .cp-tour__bar button:hover { background: var(--cp-tour-orange); color: var(--cp-tour-navy); }
.cp-tour__bar :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cp-tour__img.is-live { cursor: auto; }
.cp-tour__img.is-live > :not(.cp-tour__frame):not(.cp-tour__bar) { visibility: hidden; }

/* ---------- Options ---------- */
.cp-tour .cp-tour__opts { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(48px, 6vw, 88px) !important; }
.cp-tour .cp-tour__sub { margin-bottom: 14px !important; color: #fff; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; font-weight: 700; }
.cp-tour .cp-tour__side .cp-tour__actions { margin-top: 28px !important; }
.cp-tour .cp-tour__cta .wp-block-button__link { display: inline-flex; align-items: center; gap: 12px; padding: 13px 24px; border: 2px solid var(--cp-tour-orange); border-radius: 8px; background: transparent; color: #fff; font-weight: 700; text-decoration: none; transition: background .2s, color .2s; }
.cp-tour .cp-tour__cta .wp-block-button__link:hover { background: var(--cp-tour-orange); color: var(--cp-tour-navy); }
.cp-tour .cp-tour__cta .wp-block-button__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cp-tour__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-tour__cta .wp-block-button__link:hover::after { transform: translateX(3px); }

.cp-tour .cp-tour__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-top: 1px solid var(--cp-tour-line); border-left: 1px solid var(--cp-tour-line); border-radius: 8px; }
.cp-tour__opt { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px 20px 24px; border-right: 1px solid var(--cp-tour-line); border-bottom: 1px solid var(--cp-tour-line); transition: background .35s; }
.cp-tour__opt > * { margin: 0 !important; }
.cp-tour__opt::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cp-tour-orange); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--cp-tour-ease); }
.cp-tour__opt:hover { background: var(--cp-tour-navy-2); }
.cp-tour__opt:hover::after { transform: scaleX(1); }
.cp-tour__opt .cp-icon { width: 34px; height: 34px; color: var(--cp-tour-orange); }
.cp-tour__opt .cp-icon * { stroke-dasharray: var(--cp-tour-len, none); }
.cp-tour__opt:hover .cp-icon * { animation: cp-tour-draw .9s var(--cp-tour-ease); }
@keyframes cp-tour-draw { from { stroke-dashoffset: var(--cp-tour-len, 0); } to { stroke-dashoffset: 0; } }
.cp-tour .cp-tour__opt-name { color: #fff; font-size: 18px; font-weight: 700; line-height: 1.25; }
.cp-tour .cp-tour__opt-text { color: var(--cp-tour-soft); font-size: 15px; line-height: 1.5; }

@media (max-width: 1100px) {
	.cp-tour .cp-tour__opts { grid-template-columns: minmax(0, 1fr); }
	.cp-tour .cp-tour__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.cp-tour .cp-tour__intro { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
	.cp-tour .cp-tour__img.is-pano { height: 500px; border-radius: 8px; }
	/* La légende passe sur quatre lignes et remonte : le voile du bas commence plus haut. */
	.cp-tour__img.is-pano::before { background: linear-gradient(180deg, rgba(0, 0, 51, .35) 0%, rgba(0, 0, 51, 0) 18%, rgba(0, 0, 51, 0) 40%, rgba(0, 0, 51, .74) 68%, rgba(0, 0, 51, .9) 100%), radial-gradient(ellipse 50% 30% at 50% 42%, rgba(0, 0, 51, .38), rgba(0, 0, 51, 0)); }
	.cp-tour .cp-tour__launch { top: 42%; }
	.cp-tour__ring { width: 88px; height: 88px; }
	.cp-tour__hint { top: 16px; }
	.cp-tour__foot { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 16px 20px; }
	.cp-tour__yaw { font-size: 24px; text-align: left; }
	.cp-tour__opt { padding: 18px 14px 20px; }
	.cp-tour .cp-tour__opt-name { font-size: 16px; }
	.cp-tour .cp-tour__opt-text { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-tour__ring::before,
	.cp-tour__ring::after,
	.cp-tour__opt:hover .cp-icon * { animation: none; }
	.cp-tour__opt::after { transition: none; }
}