/* =================================================================
   Permisdelouer — Page « Demander une démo » (blocs natifs)
   Colonne éditoriale (blocs natifs) + planificateur Cal.com (îlot html).
   S'appuie sur les variables de landing.css.
   ================================================================= */

/* ---------- Colonne éditoriale ----------------------------------- */
.pdl-demo-aside { position: sticky; top: 92px; }
.pdl-demo-aside h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); font-weight: 800; }
.pdl-demo-lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 32rem; }

.pdl-demo-points { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 1.1rem; }
.pdl-demo-points li { display: flex; gap: 0.9rem; align-items: flex-start; font-size: 0.98rem; color: var(--ink-soft); }
.pdl-demo-points strong { color: var(--ink); font-weight: 600; }
.pdl-demo-points .dp-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-100); }
.pdl-demo-points .dp-ico svg { width: 20px; height: 20px; }

.pdl-demo-reassure { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 1rem; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); }
.pdl-demo-reassure .live { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-400); box-shadow: 0 0 0 0 var(--mint-400); animation: pulse-live 2.4s var(--ease-out) infinite; }
@keyframes pulse-live {
	0% { box-shadow: 0 0 0 0 oklch(75% 0.15 160 / 0.55); }
	70%, 100% { box-shadow: 0 0 0 8px oklch(75% 0.15 160 / 0); }
}

/* ---------- Colonne planificateur (embed Cal.com) ---------------- */
.pdl-demo-booking { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: clamp(0.75rem, 1.5vw, 1.25rem); overflow: hidden; }
/* Cal a besoin d'une hauteur explicite sur le parent de l'embed. */
#my-cal-inline-rdv-permis-de-louer { width: 100%; min-height: 640px; height: 72vh; max-height: 860px; border-radius: var(--r-md); }
.pdl-demo-noscript { padding: 1.5rem; color: var(--ink-soft); font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
	.pdl-demo-reassure .live { animation: none; }
}

@media (max-width: 900px) {
	.pdl-demo-aside { position: static; }
	#my-cal-inline-rdv-permis-de-louer { min-height: 560px; height: auto; }
}