/*
 * JDP Theme — Sections home contenu SEO live (réhabillées V2).
 *
 * Sections ajoutées pour porter le contenu indexé de la home live :
 *  - .jdp-services : "Nos services" (5 plateformes)
 *  - .jdp-longform : blocs prose (crédibilité, conseils, etc.) [ajout ultérieur]
 *
 * Valeurs sur tokens du theme (typo --fs-h2 / --fs-h3 / --fs-body).
 *
 * @since 0.4.4
 */

/* ====================================================================
   NOS SERVICES (5 plateformes)
   ==================================================================== */
.jdp-services {
	background: var(--bg-soft);
}
.jdp-services-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-6);
}
.jdp-service-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--sp-8);
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur-normal) var(--ease-out-quart), box-shadow var(--dur-normal) var(--ease-out-quart);
}
.jdp-service-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}
/* Quand le nombre de cards est impair, la dernière occupe toute la largeur. */
.jdp-service-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
.jdp-service-card-title {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--fg1);
}
.jdp-service-dot {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: 7px;
	border-radius: var(--radius-full);
	background: var(--svc-color, var(--accent));
}
.jdp-service-intro,
.jdp-service-outro {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--fg2);
}
.jdp-service-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.jdp-service-list li {
	display: flex;
	gap: 10px;
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--fg2);
}
.jdp-service-check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: var(--radius-full);
	background: var(--accent-soft);
	color: var(--accent);
}
.jdp-service-check svg {
	width: 12px;
	height: 12px;
}
.jdp-service-list a {
	color: var(--fg1);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--accent);
	transition: color var(--dur-fast) var(--ease-out);
}
.jdp-service-list a:hover {
	color: var(--accent);
}

/* Couleurs plateformes (petit point identitaire) */
.jdp-service-card--instagram { --svc-color: var(--jdp-instagram); }
.jdp-service-card--tiktok    { --svc-color: var(--jdp-tiktok); }
.jdp-service-card--facebook  { --svc-color: var(--jdp-facebook); }
.jdp-service-card--youtube   { --svc-color: var(--jdp-youtube); }
.jdp-service-card--spotify   { --svc-color: var(--jdp-spotify); }
.jdp-service-card--x-twitter { --svc-color: var(--jdp-twitter); }
.jdp-service-card--twitch    { --svc-color: var(--jdp-twitch); }
.jdp-service-card--soundcloud { --svc-color: var(--jdp-soundcloud); }

@media (max-width: 860px) {
	.jdp-services-grid {
		grid-template-columns: 1fr;
	}
	.jdp-service-card {
		padding: var(--sp-6);
	}
}

/* ====================================================================
   LONGFORM SEO (blocs prose : crédibilité, conseils, closers)
   ==================================================================== */
/* element+classe pour battre responsive.css .jdp-section { padding:96px } (sinon padding-bottom transparent = bande blanche sous le longform). */
section.jdp-longform {
	padding: 0;
}
.jdp-longform-block {
	padding: var(--sp-16) 0;
}
.jdp-longform-block--soft {
	background: var(--bg-soft);
}
.jdp-longform .jdp-longform-inner {
	max-width: 760px;
}
.jdp-longform-block h2 {
	margin: 0 0 var(--sp-6);
}
.jdp-longform-h2-spaced {
	margin-top: var(--sp-12) !important;
}
.jdp-longform-block p {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-body);
	line-height: var(--lh-loose);
	color: var(--fg2);
}
.jdp-longform-block p:last-child {
	margin-bottom: 0;
}
.jdp-longform-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-5);
	padding: 0;
	list-style: none;
}
.jdp-longform-list li {
	display: flex;
	gap: 12px;
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--fg2);
}
.jdp-longform-list strong {
	color: var(--fg1);
	font-weight: 600;
}
.jdp-lf-check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: var(--radius-full);
	background: var(--accent-soft);
	color: var(--accent);
}
.jdp-lf-check svg {
	width: 13px;
	height: 13px;
}
.jdp-longform-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin: var(--sp-6) 0 0;
	padding: 0;
	list-style: none;
}
.jdp-longform-badges li {
	padding: 8px 16px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--fg1);
	box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) {
	.jdp-longform-block {
		padding: var(--sp-12) 0;
	}
}

/* Bandes media longform : illustration 3D + texte, alternees gauche / droite.
   Reprend l esprit du split hub (.jdp-lf-band--media) mais scope home. */
.jdp-lf-home-split {
	display: flex;
	align-items: center;
	gap: clamp(var(--sp-6), 4vw, var(--sp-10));
}
.jdp-lf-home-split--right {
	flex-direction: row-reverse;
}
.jdp-lf-home-fig {
	flex: 0 0 42%;
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 16px 36px -22px rgba(17, 12, 10, 0.4);
}
.jdp-lf-home-fig img {
	width: 100%;
	height: auto;
	display: block;
}
.jdp-lf-home-split .jdp-longform-inner {
	flex: 1;
	min-width: 0;
	max-width: none;
	margin: 0;
}
.jdp-lf-home-split .jdp-longform-badges {
	justify-content: flex-start;
}
@media (max-width: 860px) {
	.jdp-lf-home-split,
	.jdp-lf-home-split--right {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-6);
	}
	.jdp-lf-home-fig {
		flex: 1 1 auto;
	}
}

/* ====================================================================
   MEILLEURES VENTES (grille produits WC)
   ==================================================================== */
.jdp-bestsellers-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-5);
}
.jdp-product-card {
	display: flex;
	flex-direction: column;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur-normal) var(--ease-out-quart), box-shadow var(--dur-normal) var(--ease-out-quart);
}
.jdp-product-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}
.jdp-product-card-media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.jdp-product-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jdp-product-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	background: var(--accent);
	color: var(--jdp-black);
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--radius-full);
	z-index: 1;
}
.jdp-product-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--sp-4);
	flex: 1;
}
.jdp-product-card-name {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-snug);
	color: var(--fg1);
}
.jdp-product-card-price {
	margin-top: auto;
	font-size: var(--fs-h4);
	font-weight: 700;
	color: var(--fg1);
}
.jdp-product-card-price del {
	margin-right: 6px;
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--fg3);
}
.jdp-product-card-price ins {
	text-decoration: none;
	color: var(--accent);
}
@media (max-width: 980px) {
	.jdp-bestsellers-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 480px) {
	.jdp-bestsellers-grid {
		grid-template-columns: 1fr;
	}
}