/*
 * Photogrammétrie par drone (accueil) : bande pleine largeur sous un ciel pâle, le modèle du
 * Manoir des Roches en grand à droite, encart de texte blanc à gauche. drone.js ajoute le drone
 * qui tourne autour de la villa, sa trajectoire, le fondu de l'encart et une légère parallaxe.
 * Sous 1 180 px : l'encart, puis l'image, puis la légende.
 */

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

.cp-sky {
	--cp-sky-navy: var(--wp--preset--color--navy, #000033);
	--cp-sky-orange: var(--wp--preset--color--orange, #FF9900);
	--cp-sky-mute: var(--wp--preset--color--mute, #555B6B);
	--cp-sky-line: var(--wp--preset--color--line, #E3E5EC);
	--cp-sky-ease: cubic-bezier(.2, .7, .2, 1);
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(640px, 88vh, 860px);
	margin: 0 !important;
	overflow: hidden;
	background: linear-gradient(180deg, #DDE6F3 0%, var(--wp--preset--color--mist, #F3F4F8) 72%);
}
.cp-sky,
.cp-sky * { box-sizing: border-box; }
.cp-sky > *,
.cp-sky__card > * { margin-block: 0 !important; }

/* Image : le fond blanc se fond dans le ciel par multiplication ; ancrée en bas à droite. */
.cp-sky .cp-sky__img {
	position: absolute;
	right: -10vw;
	bottom: 0;
	height: 100%;
	max-width: none;
	mix-blend-mode: multiply;
	transform: translateY(var(--cp-sky-py, 0px));
	pointer-events: none;
}
.cp-sky .cp-sky__img img { display: block; width: auto; max-width: none; height: 100%; }
.cp-sky__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(56px, 8vw, 104px); }

/* La mise en page « contrainte » de WordPress centre ses enfants : l'encart reste à gauche. */
.cp-sky__inner > .cp-sky__card { margin-left: 0 !important; margin-right: auto !important; }
.cp-sky__card {
	max-width: 600px;
	padding: clamp(28px, 3.5vw, 48px);
	border-radius: 8px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 51, .35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.cp-sky.is-armed .cp-sky__card { opacity: 0; transform: translateY(28px); }
.cp-sky.is-in .cp-sky__card { opacity: 1; transform: none; transition: opacity .9s var(--cp-sky-ease), transform .9s var(--cp-sky-ease); }
.cp-sky .cp-sky__title { margin-bottom: 18px !important; color: var(--cp-sky-navy); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.cp-sky__text { margin-bottom: 16px !important; color: var(--cp-sky-mute); font-size: 17px; }
.cp-sky .cp-sky__uses { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px !important; padding: 0; list-style: none; }
.cp-sky__uses li { margin: 0; padding: 5px 12px; border: 1px solid var(--cp-sky-line); border-radius: 8px; color: var(--cp-sky-navy); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.cp-sky__actions { margin-top: 8px !important; }
.cp-sky__cta .wp-block-button__link { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; }
.cp-sky__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-sky__cta .wp-block-button__link:hover::after { transform: translateX(3px); }
.cp-sky a:focus-visible { outline: 2px solid var(--cp-sky-orange); outline-offset: 3px; }
.cp-sky__caption { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 18px; z-index: 2; color: var(--cp-sky-mute); font-size: 13.5px; }
.cp-sky__caption strong { color: var(--cp-sky-navy); font-weight: 600; }

/* ---------- Drone et trajectoire (ajoutés par drone.js) ---------- */
.cp-sky__flight { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cp-sky__trail { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-sky__trail path { fill: none; stroke: var(--cp-sky-navy); stroke-opacity: .28; stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; }
.cp-sky__drone { position: absolute; left: 0; top: 0; width: clamp(96px, 9vw, 140px); filter: drop-shadow(0 22px 16px rgba(0, 0, 51, .22)); will-change: transform; }
.cp-sky__drone img { display: block; width: 100%; height: auto; }
/* Éclair de prise de vue. */
.cp-sky__drone::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 62%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 18px 8px rgba(255, 255, 255, .9);
	opacity: 0;
}
.cp-sky__drone.is-shot::after { animation: cp-sky-shot .5s ease-out; }
@keyframes cp-sky-shot { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.4); } }

/* ---------- Éditeur : image sous le texte, sans position absolue ---------- */
.editor-styles-wrapper .cp-sky { display: block; min-height: 0; }
.editor-styles-wrapper .cp-sky .cp-sky__img { position: static; height: auto; max-width: 640px; margin: 24px auto 0 !important; transform: none; }
.editor-styles-wrapper .cp-sky .cp-sky__img img { width: 100%; height: auto; }
.editor-styles-wrapper .cp-sky__caption { position: static; padding: 12px 24px; }

/* ---------- Points de rupture ---------- */
@media (min-width: 1181px) and (max-width: 1320px) {
	.cp-sky .cp-sky__img { height: 86%; right: -16vw; }
}
@media (max-width: 1180px) {
	.cp-sky { flex-direction: column; align-items: stretch; min-height: 0; }
	.cp-sky__inner { order: 1; padding-block: 56px 0; }
	.cp-sky .cp-sky__img { order: 2; position: relative; right: auto; width: 100%; height: auto; margin-top: 24px !important; transform: none; }
	.cp-sky .cp-sky__img img { width: 100%; height: auto; }
	.cp-sky__caption { order: 3; position: static; padding: 0 clamp(16px, 3vw, 40px) 20px; }
	.cp-sky__card { max-width: none; }
}
@media (max-width: 640px) {
	.cp-sky .cp-sky__title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-sky.is-armed .cp-sky__card { opacity: 1; transform: none; }
	.cp-sky .cp-sky__img { transform: none; }
	.cp-sky__drone::after { display: none; }
}