/* Sansolia – Prêt à louer / Prêt à vendre
   Tout est préfixé .spl pour ne pas interférer avec le thème. */

.spl {
	--spl-ink: #2b2a26;
	--spl-gold: #b8913a;
	--spl-gold-deep: #8f6d24;
	--spl-gold-soft: #f3ead3;
	--spl-paper: #ffffff;
	--spl-muted: #5c5a53;
	--spl-display: "Archivo", "Arial Narrow", Arial, sans-serif;
	--spl-script: "Caveat", "Segoe Print", cursive;
	--spl-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

	font-family: var(--spl-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--spl-ink);
	max-width: 1100px;
	margin: 0 auto;
	box-sizing: border-box;
}
.spl *, .spl *::before, .spl *::after { box-sizing: inherit; }
.spl p { margin: 0 0 1em; }
.spl h1, .spl h2, .spl h3 { margin: 0; padding: 0; border: 0; }

/* ---------- En-tête ---------- */
.spl .spl-hero { padding: 1rem 0 2rem; max-width: 46rem; }

.spl .spl-hero__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
	font-family: var(--spl-display);
	font-stretch: 82%;
	font-weight: 900;
	font-size: clamp(2.4rem, 7vw, 4.6rem);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .01em;
	margin-bottom: 1.25rem;
}

/* Bandes « coup de pinceau », comme sur l'affiche */
.spl .spl-brush {
	display: inline-block;
	padding: .18em .5em .14em;
	color: #fff;
	clip-path: polygon(2% 8%, 12% 2%, 30% 6%, 52% 0, 74% 5%, 92% 1%, 100% 12%, 98% 40%, 100% 72%, 97% 94%, 80% 99%, 60% 95%, 38% 100%, 18% 96%, 4% 100%, 0 78%, 2% 50%, 0 24%);
}
.spl .spl-brush--dark { background: var(--spl-ink); transform: rotate(-1.5deg); }
.spl .spl-brush--gold {
	background: linear-gradient(100deg, var(--spl-gold-deep), var(--spl-gold) 45%, #cfa956);
	transform: rotate(-1.5deg) translateX(.6em);
}

.spl .spl-hero__script,
.spl .spl-script {
	font-family: var(--spl-script);
	font-weight: 700;
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	line-height: 1.2;
	color: var(--spl-ink);
	transform: rotate(-2deg);
	transform-origin: left center;
}
.spl .spl-hero__script { margin: .5rem 0 1.25rem; }
.spl .spl-hero__lead { font-size: 1.15rem; color: var(--spl-muted); max-width: 40rem; }

/* ---------- Boutons ---------- */
.spl .spl-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.spl .spl-actions--center { justify-content: center; }
.spl a.spl-btn {
	display: inline-block;
	padding: .8em 1.5em;
	font-family: var(--spl-display);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border: 2px solid var(--spl-gold);
	border-radius: 999px;
	background: var(--spl-gold);
	color: #fff;
	transition: background-color .15s, color .15s;
}
.spl a.spl-btn:hover { background: var(--spl-gold-deep); border-color: var(--spl-gold-deep); color: #fff; }
.spl a.spl-btn--ghost { background: transparent; color: var(--spl-ink); }
.spl a.spl-btn--ghost:hover { background: var(--spl-gold-soft); color: var(--spl-ink); }
.spl a.spl-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.spl a.spl-btn--ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.spl a.spl-btn:focus-visible { outline: 3px solid var(--spl-ink); outline-offset: 3px; }

/* ---------- Visuel ---------- */
.spl .spl-visual { margin: 0 0 3.5rem; }
.spl .spl-visual img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 6px;
	box-shadow: 0 18px 40px -22px rgba(43, 42, 38, .55);
}

/* ---------- Sections ---------- */
.spl .spl-section { margin: 0 0 3.5rem; }
.spl .spl-h2 {
	font-family: var(--spl-display);
	font-stretch: 88%;
	font-weight: 800;
	font-size: clamp(1.6rem, 3.6vw, 2.3rem);
	line-height: 1.15;
	color: var(--spl-ink);
	margin-bottom: .6rem;
}
.spl .spl-h2::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 4px;
	margin-top: .5rem;
	background: var(--spl-gold);
	border-radius: 2px;
	transform: rotate(-2deg);
}
.spl .spl-intro { color: var(--spl-muted); max-width: 40rem; margin-bottom: 2rem; }

/* Étapes 1-2-3 : relié par un trait doré */
.spl .spl-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	position: relative;
}
.spl .spl-steps::before {
	content: "";
	position: absolute;
	top: 1.75rem;
	left: 1.75rem;
	right: 1.75rem;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--spl-gold) 0 10px, transparent 10px 18px);
	z-index: 0;
}
.spl .spl-step { position: relative; z-index: 1; margin: 0; }
.spl .spl-step__num {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--spl-gold);
	color: #fff;
	font-family: var(--spl-display);
	font-weight: 900;
	font-size: 1.5rem;
	box-shadow: 0 0 0 6px var(--spl-paper);
	margin-bottom: 1rem;
}
.spl .spl-step__title {
	font-family: var(--spl-display);
	font-weight: 800;
	font-size: 1.3rem;
	margin-bottom: .1rem;
}
.spl .spl-step__by {
	font-family: var(--spl-script);
	font-size: 1.35rem;
	color: var(--spl-gold-deep);
	margin-bottom: .5rem;
}
.spl .spl-step p:last-child { color: var(--spl-muted); margin: 0; }

/* Pour qui */
.spl .spl-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 2.5rem;
	align-items: start;
}
.spl .spl-split .spl-script { margin-top: 1rem; color: var(--spl-gold-deep); }
.spl .spl-list { list-style: none; margin: 0; padding: 0; }
.spl .spl-list li {
	position: relative;
	padding: .9rem 0 .9rem 2rem;
	border-bottom: 1px solid var(--spl-gold-soft);
	margin: 0;
}
.spl .spl-list li:last-child { border-bottom: 0; }
.spl .spl-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.35rem;
	width: 1.1rem;
	height: .55rem;
	border-left: 3px solid var(--spl-gold);
	border-bottom: 3px solid var(--spl-gold);
	transform: rotate(-45deg);
}

/* Bénéfices : bandeau sombre, écho à la barre du bas de l'affiche */
.spl .spl-benefits {
	background: var(--spl-ink);
	color: #fff;
	border-radius: 6px;
	padding: clamp(1.75rem, 4vw, 3rem);
	margin: 0 0 3.5rem;
}
.spl .spl-h2--light { color: #fff; }
.spl .spl-benefits__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem 2.5rem;
	margin: 1.5rem 0 0;
}
.spl .spl-benefits__grid dt {
	font-family: var(--spl-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: #e3c47e;
	margin-bottom: .25rem;
	padding-left: 2rem;
	position: relative;
}
.spl .spl-benefits__grid dt::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid #e3c47e;
	border-radius: 50%;
}
.spl .spl-benefits__grid dd { margin: 0; padding-left: 2rem; color: rgba(255,255,255,.82); }

/* Déroulement */
.spl .spl-timeline {
	counter-reset: spl;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	max-width: 44rem;
}
.spl .spl-timeline li {
	counter-increment: spl;
	position: relative;
	padding: 0 0 1.5rem 3.25rem;
	margin: 0;
	border-left: 2px solid var(--spl-gold-soft);
	margin-left: 1rem;
}
.spl .spl-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.spl .spl-timeline li::before {
	content: counter(spl);
	position: absolute;
	left: -1rem;
	top: -.1rem;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--spl-paper);
	border: 2px solid var(--spl-gold);
	color: var(--spl-gold-deep);
	font-family: var(--spl-display);
	font-weight: 800;
	font-size: .95rem;
}

/* Appel à l'action */
.spl .spl-cta {
	text-align: center;
	padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
	border-radius: 6px;
	background: linear-gradient(115deg, var(--spl-gold-deep), var(--spl-gold) 55%, #cfa956);
	color: #fff;
	margin-bottom: 2rem;
}
.spl .spl-script--light { color: #fff; transform-origin: center; }
.spl .spl-cta__title {
	font-family: var(--spl-display);
	font-stretch: 85%;
	font-weight: 900;
	font-size: clamp(1.8rem, 4.5vw, 2.8rem);
	text-transform: uppercase;
	color: #fff;
	margin: .5rem 0 .6rem;
}
.spl .spl-cta a.spl-btn:not(.spl-btn--ghost-light) { background: var(--spl-ink); border-color: var(--spl-ink); }
.spl .spl-cta a.spl-btn:not(.spl-btn--ghost-light):hover { background: #000; border-color: #000; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
	.spl .spl-steps { grid-template-columns: 1fr; gap: 1.75rem; }
	.spl .spl-steps::before { top: 1.75rem; bottom: 1.75rem; left: 1.75rem; right: auto; width: 2px; height: auto;
		background: repeating-linear-gradient(180deg, var(--spl-gold) 0 10px, transparent 10px 18px); }
	.spl .spl-step { padding-left: 5rem; }
	.spl .spl-step__num { position: absolute; left: 0; top: 0; }
	.spl .spl-split { grid-template-columns: 1fr; gap: 1rem; }
	.spl .spl-benefits__grid { grid-template-columns: 1fr; }
	.spl .spl-brush--gold { transform: rotate(-1.5deg) translateX(.3em); }
}

@media (prefers-reduced-motion: reduce) {
	.spl a.spl-btn { transition: none; }
}

/* Tarifs : contact direct */
.spl .spl-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	max-width: 44rem;
}
.spl a.spl-contact__item {
	display: block;
	padding: 1.1rem 1.4rem;
	border: 2px solid var(--spl-gold);
	border-radius: 6px;
	background: var(--spl-gold-soft);
	color: var(--spl-ink);
	text-decoration: none;
	transition: background-color .15s;
}
.spl a.spl-contact__item:hover { background: #ecdcb4; color: var(--spl-ink); }
.spl a.spl-contact__item:focus-visible { outline: 3px solid var(--spl-ink); outline-offset: 3px; }
.spl .spl-contact__label {
	display: block;
	font-family: var(--spl-script);
	font-size: 1.35rem;
	color: var(--spl-gold-deep);
	line-height: 1.1;
}
.spl .spl-contact__value {
	display: block;
	font-family: var(--spl-display);
	font-weight: 800;
	font-size: 1.3rem;
	overflow-wrap: anywhere;
}

/* Sous-titre du H1 (mots-clés) */
.spl .spl-hero__kw {
	display: block;
	margin-top: 1rem;
	font-family: var(--spl-body);
	font-stretch: 100%;
	font-weight: 600;
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
	color: var(--spl-muted);
	max-width: 36rem;
}

/* FAQ */
.spl .spl-faq { max-width: 48rem; }
.spl .spl-faq__item { border-bottom: 1px solid var(--spl-gold-soft); }
.spl .spl-faq__item summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: 1rem 2.5rem 1rem 0;
	font-family: var(--spl-display);
	font-weight: 700;
	font-size: 1.1rem;
}
.spl .spl-faq__item summary::-webkit-details-marker { display: none; }
.spl .spl-faq__item summary::after {
	content: "+";
	position: absolute;
	right: .25rem;
	top: .8rem;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--spl-gold-deep);
}
.spl .spl-faq__item[open] summary::after { content: "–"; }
.spl .spl-faq__item summary:focus-visible { outline: 3px solid var(--spl-ink); outline-offset: 2px; }
.spl .spl-faq__item p { color: var(--spl-muted); margin: 0 0 1rem; max-width: 42rem; }

/* Phrase d'accroche commerciale */
.spl .spl-hook {
	font-family: var(--spl-display);
	font-stretch: 90%;
	font-weight: 800;
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	line-height: 1.25;
	color: var(--spl-ink);
	max-width: 38rem;
	margin: .25rem 0 .5rem;
	padding-left: 1rem;
	border-left: 5px solid var(--spl-gold);
}