/* =================================================================
   Permisdelouer — Landing « blocs natifs » (finitions)
   Complète landing.css pour la page construite en blocs Gutenberg
   natifs. Ne définit QUE ce que les blocs natifs ne savent pas
   exprimer : pseudo-éléments, puces personnalisées, hovers,
   connecteurs, rythme vertical fin, breakpoints du modèle.
   Les couleurs / tailles éditables restent portées par les attributs
   de blocs (presets theme.json) ; les valeurs ici s'appuient sur les
   variables de landing.css (--ink-soft, --shadow-*, --r-lg…).
   ================================================================= */

/* ---------- Typo utilitaire --------------------------------------- */
.pdl-eyebrow {
	display: inline-block;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.pdl-section-head > * { max-width: 46rem; }
.pdl-section-head h2 { margin-top: 0.9rem; }
.pdl-section-head .has-sub-font-size { margin-top: 1rem; max-width: 42rem; color: var(--ink-soft); }

/* ---------- Boutons (complète styles.elements.button) ------------- */
.wp-block-button__link {
	box-shadow: var(--shadow-sm);
	transition: transform 0.35s var(--ease-out), background-color 0.2s, box-shadow 0.3s, border-color 0.2s;
	white-space: nowrap;
}
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--brand-700);
	border: 1.5px solid var(--brand-200);
	box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--brand-50);
	border-color: var(--brand-300);
}

.pdl-btn-lg .wp-block-button__link { padding: 1rem 1.7rem; font-size: 1.02rem; }
.pdl-btn-block { width: 100%; }
.pdl-btn-block .wp-block-button__link { width: 100%; }
.pdl-btn-invert .wp-block-button__link:hover { box-shadow: var(--shadow-lg); background-color: #fff; }

/* ---------- Hero --------------------------------------------------- */
.pdl-hero { position: relative; overflow: hidden; }
.pdl-hero::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 120%;
	background:
		radial-gradient(60% 55% at 78% 12%, oklch(88% 0.11 160 / 0.5), transparent 70%),
		radial-gradient(55% 55% at 12% 8%, oklch(85% 0.09 264 / 0.55), transparent 70%);
	filter: blur(10px);
	z-index: 0;
	animation: heroDrift 18s ease-in-out infinite alternate;
}
.pdl-hero > * { position: relative; z-index: 1; }

.pdl-hero h1 { margin-top: 0.9rem; }
p.pdl-lead { margin-top: 1.4rem; max-width: 34rem; color: var(--ink-soft); }
.pdl-hero .pdl-hero-cta { margin-top: 2rem; }
p.pdl-hero-note { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.8rem; }
p.pdl-hero-note::before { content: "✓"; color: var(--mint-500); font-weight: 700; flex: none; }

/* ---------- Bandeau confiance -------------------------------------- */
.pdl-trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pdl-trust p + p::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--brand-300);
	margin-right: 1.4rem;
	vertical-align: middle;
}

/* La feuille core impose `.wp-block-columns { align-items: normal !important }`
   (l'alignement est normalement émis par le moteur de layout, absent ici
   car le markup ne porte pas l'attribut layout) : on rétablit le centrage. */
.wp-block-columns.are-vertically-aligned-center { align-items: center !important; }

/* ---------- Cartes (utilitaires) ----------------------------------- */
.pdl-card { border: 1px solid var(--line); border-radius: var(--r-lg); }
.pdl-shadow-sm { box-shadow: var(--shadow-sm); }
.pdl-shadow-md { box-shadow: var(--shadow-md); }
.pdl-shadow-lg { box-shadow: var(--shadow-lg); }
.pdl-hoverable { transition: transform 0.4s var(--ease-out), box-shadow 0.3s, border-color 0.3s; }
.pdl-hoverable:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }

/* Rythme interne des cartes : les règles de blockGap générées par WP
   annulent les margin-bottom (spécificité 0,1,0 imprimée dans le body),
   d'où des sélecteurs élément+classe pour reprendre la main. */
.pdl-card span.feature-ico { margin-bottom: 1.1rem; }
.pdl-card span.role-ico { margin-bottom: 1.2rem; }

/* Carte translucide des sections sombres */
.pdl-card-dark {
	background: oklch(100% 0.001 264 / 0.06);
	border: 1px solid oklch(100% 0.001 264 / 0.14);
	border-radius: var(--r-lg);
	transition: transform 0.4s var(--ease-out), background-color 0.3s;
}
.pdl-card-dark:hover { transform: translateY(-4px); background: oklch(100% 0.001 264 / 0.1); }

/* ---------- Problème → Solution ------------------------------------ */
.pdl-versus-label { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.pdl-versus-after { border-color: var(--brand-800); }
.pdl-versus-after strong { color: #fff; }
.pdl-versus-arrow { display: flex; align-items: center; justify-content: center; color: var(--brand-400); }

.pdl-list-square, .pdl-list-check, .pdl-list-dot, .pdl-list-checkbox {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.pdl-list-square li, .pdl-list-check li {
	position: relative;
	padding-left: 1.7rem;
	margin-bottom: 0.85rem;
	font-size: 0.98rem;
	color: var(--ink-soft);
}
.pdl-list-square li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--ink-mute);
	transform: rotate(45deg);
}
.pdl-list-check li { color: var(--brand-100); }
.pdl-list-check li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--mint-400);
	font-weight: 700;
}

/* ---------- Étapes -------------------------------------------------- */
p.pdl-step-num {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--brand-50);
	color: var(--brand-700);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 1rem;
}
/* Le modèle est un <ol> qui conserve son padding-inline-start et sa
   margin-bottom par défaut (le reset global ne couvre que ul) :
   on reproduit ce retrait de 40px et l'espace bas de 1em. */
div.pdl-steps { padding-left: 40px; margin-bottom: 1em !important; }
.pdl-steps > .wp-block-column { position: relative; }
.pdl-steps > .wp-block-column:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 42px;
	right: -0.75rem;
	width: 1.5rem;
	height: 2px;
	background: linear-gradient(90deg, var(--brand-300), transparent);
}
.pdl-steps h3 { font-size: 1.12rem; }
.pdl-steps p:not(.pdl-step-num) { font-size: 0.93rem; color: var(--ink-soft); }

/* ---------- Fonctionnalités ----------------------------------------- */
.pdl-feature-lead { border: 1px solid var(--brand-100); border-radius: var(--r-lg); }
.pdl-feature-lead h3 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.pdl-feature-lead p { font-size: 1.02rem; color: var(--ink-soft); }

/* Dans le modèle, l'écart encadré → grille est plus court que le
   blockGap de section (clamp 2-3rem au lieu de 2.5-4rem). */
div.pdl-grid-4 { margin-top: clamp(2rem, 4vw, 3rem); }
.pdl-grid-4 h3 { font-size: 1.08rem; }
.pdl-grid-4 p { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Fonctionnalités avancées (bande sombre) ----------------- */
p.pdl-tag {
	display: inline-block;
	/* inline-block : pas de fusion avec le blockGap 0.55rem du h3 suivant
	   → 0.45rem + 0.55rem = 1rem comme le modèle. */
	margin-bottom: 0.45rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.28rem 0.7rem;
	border-radius: var(--r-pill);
}
.pdl-card-dark h3 { color: #fff; font-size: 1.2rem; }
.pdl-card-dark p:not(.pdl-tag) { color: var(--brand-100); font-size: 0.95rem; }

/* ---------- Confiance & conformité ----------------------------------- */
.pdl-confiance-intro .has-sub-font-size { margin-top: 1rem; max-width: 42rem; color: var(--ink-soft); }
.pdl-confiance-intro h2 { margin-top: 0.9rem; }
.pdl-confiance-intro .pdl-assur { margin-top: 1.75rem; }
.pdl-confiance-intro .wp-block-buttons { margin-top: 1.75rem; }
.pdl-assur h3 { font-size: 1rem; margin-bottom: 0.15rem; }
.pdl-assur p { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Bénéfices par rôle ---------------------------------------- */
.pdl-grid-3 h3 { font-size: 1.22rem; }
.pdl-list-dot li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.7rem;
	font-size: 0.95rem;
	color: var(--ink-soft);
}
.pdl-list-dot li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brand-400);
}

/* ---------- Tarifs ------------------------------------------------------ */
.pdl-pricing { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.pdl-pricing h2 { margin-top: 0.9rem; }
.pdl-pricing .has-sub-font-size { margin-top: 1rem; max-width: 42rem; color: var(--ink-soft); }
ul.pdl-list-checkbox { margin-top: 1.5rem; }
.pdl-list-checkbox li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.75rem;
	font-size: 1rem;
	color: var(--ink-soft);
}
.pdl-list-checkbox li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: var(--brand-50);
	border: 1.5px solid var(--brand-200);
}
.pdl-list-checkbox li::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 0.62em;
	width: 6px;
	height: 10px;
	border: solid var(--brand-600);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.pdl-pricing-aside { border-radius: var(--r-md); text-align: center; }
.pdl-pricing-note { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.pdl-pricing-aside .wp-block-buttons { margin-top: 1.1rem; }
p.pdl-pricing-fine { margin-top: 1rem; font-size: 0.82rem; color: var(--brand-200); }

/* ---------- FAQ (core/details) ------------------------------------------- */
.pdl-faq { border-top: 1px solid var(--line); }
.pdl-faq .wp-block-details { border-bottom: 1px solid var(--line); margin: 0; }
.pdl-faq .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.3rem 0.25rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.08rem;
	cursor: pointer;
	list-style: none;
	color: var(--ink);
}
.pdl-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.pdl-faq .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background:
		linear-gradient(var(--brand-600), var(--brand-600)) center/2px 12px no-repeat,
		linear-gradient(var(--brand-600), var(--brand-600)) center/12px 2px no-repeat;
	transition: transform 0.35s var(--ease-out);
}
.pdl-faq .wp-block-details[open] summary::after { transform: rotate(135deg); }
.pdl-faq .wp-block-details > p {
	color: var(--ink-soft);
	font-size: 0.98rem;
	max-width: 60ch;
	margin: 0;
	padding: 0 0.25rem 1.4rem;
}

/* ---------- CTA final ------------------------------------------------------ */
.pdl-cta h2 { color: #fff; }
.pdl-cta p { margin-top: 1rem; margin-left: auto; margin-right: auto; font-size: 1.1rem; color: var(--brand-100); max-width: 34rem; }
.pdl-cta .wp-block-buttons { margin-top: 2rem; }

/* ---------- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pdl-hero::before { animation: none; }
	.pdl-hoverable, .pdl-card-dark, .wp-block-button__link { transition: none; }
}

/* ---------- Responsive (breakpoints du modèle) ------------------------------- */
/* flex-wrap : la feuille core impose
   `.wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap !important }`
   (0,2,0) — il faut la battre en spécificité ET en priorité. */
@media (max-width: 960px) {
	.wp-block-columns.is-not-stacked-on-mobile.pdl-hero-cols { flex-wrap: wrap !important; }
	.pdl-hero-cols > .wp-block-column { flex-basis: 100% !important; }
	.pdl-hero-cols > .hero-visual { order: -1; max-width: 480px; }

	.wp-block-columns.is-not-stacked-on-mobile.pdl-grid-4,
	.wp-block-columns.is-not-stacked-on-mobile.pdl-steps { flex-wrap: wrap !important; }
	.pdl-grid-4 > .wp-block-column,
	.pdl-steps > .wp-block-column { flex-basis: calc(50% - 0.625rem) !important; }
	.pdl-steps > .wp-block-column:not(:last-child)::after { display: none; }

	.wp-block-columns.is-not-stacked-on-mobile.pdl-grid-3,
	.wp-block-columns.is-not-stacked-on-mobile.pdl-cols-2 { flex-wrap: wrap !important; }
	.pdl-grid-3 > .wp-block-column,
	.pdl-cols-2 > .wp-block-column { flex-basis: 100% !important; }
}
@media (max-width: 820px) {
	.wp-block-columns.is-not-stacked-on-mobile.pdl-versus { flex-wrap: wrap !important; }
	.pdl-versus > .wp-block-column { flex-basis: 100% !important; }
	.pdl-versus-arrow svg { transform: rotate(90deg); }
}
@media (max-width: 560px) {
	.pdl-grid-4 > .wp-block-column { flex-basis: 100% !important; }
}