/*
 * JDP Theme - Hub Plateforme (archive-product.php pour catégorie WC platform).
 * @since 0.2.0
 */

/* Breadcrumb */
.jdp-hub-breadcrumb {
	background: var(--bg-soft);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: var(--sp-3) 0;
	font-size: 12px;
	color: var(--fg2);
}
.jdp-hub-breadcrumb .jdp-container {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-wrap: wrap;
}
.jdp-hub-breadcrumb-link {
	color: var(--fg2);
	text-decoration: none;
	transition: color var(--dur-fast);
}
.jdp-hub-breadcrumb-link:hover,
.jdp-hub-breadcrumb-link:focus-visible {
	color: var(--accent);
	text-decoration: underline;
}
.jdp-hub-breadcrumb-sep {
	color: var(--fg3);
}
.jdp-hub-breadcrumb-current {
	color: var(--fg1);
	font-weight: 600;
}

/* Hub Hero (variant du hero principal) */
.jdp-hub-hero {
	background: var(--bg-soft);
}
.jdp-hub-hero-icon {
	width: 240px;
	height: 240px;
	color: var(--platform-color, var(--accent));
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	filter: drop-shadow(var(--shadow-md));
}
.jdp-hub-hero-icon svg {
	width: 100%;
	height: 100%;
}

/* Products grid (WC archive loop override) */
.jdp-hub-products .products,
.jdp-hub-products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-5);
	list-style: none;
	padding: 0;
	margin: var(--sp-8) 0;
}
.jdp-hub-products li.product {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--sp-4);
	text-align: left;
	margin: 0;
	transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}
.jdp-hub-products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}
.jdp-hub-products li.product a {
	text-decoration: none;
	color: inherit;
	display: block;
}
.jdp-hub-products li.product img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	margin-bottom: var(--sp-3);
}
.jdp-hub-products li.product h2,
.jdp-hub-products li.product .woocommerce-loop-product__title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 var(--sp-2);
	color: var(--fg1);
	line-height: 1.3;
}
.jdp-hub-products .price {
	font-weight: 700;
	color: var(--accent);
	font-size: 18px;
	margin-top: var(--sp-2);
}
.jdp-hub-products .price del {
	color: var(--fg3);
	font-size: 14px;
	font-weight: 400;
	margin-right: var(--sp-1);
}
.jdp-hub-products .price ins {
	background: transparent;
	text-decoration: none;
}
.jdp-hub-products .button {
	margin-top: var(--sp-3);
	background: var(--accent);
	color: var(--jdp-white);
	border: 0;
	border-radius: var(--radius-sm);
	padding: 10px 16px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background var(--dur-fast);
}
.jdp-hub-products .button:hover {
	background: var(--accent-hover);
}

.jdp-hub-empty {
	text-align: center;
	padding: var(--sp-12) var(--sp-4);
	color: var(--fg2);
	font-size: var(--fs-h4);
}

/* WC pagination */
.jdp-hub-products .woocommerce-pagination {
	margin-top: var(--sp-8);
	text-align: center;
}

/* Related blog section */
.jdp-hub-related-blog-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}
.jdp-hub-related-blog-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: 700;
	font-size: var(--fs-small);
	color: var(--accent);
	text-decoration: none;
	transition: gap var(--dur-fast);
}
.jdp-hub-related-blog-link:hover,
.jdp-hub-related-blog-link:focus-visible {
	gap: var(--sp-3);
}

/* Responsive */
@media (max-width: 1100px) {
	.jdp-hub-products .products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.jdp-hub-products .products { grid-template-columns: repeat(2, 1fr); }
	.jdp-hub-hero-icon { width: 180px; height: 180px; }
}
@media (max-width: 600px) {
	.jdp-hub-products .products { grid-template-columns: 1fr; }
	.jdp-hub-hero-icon { width: 140px; height: 140px; }
}

/* ===================================================================
   Correctifs /impeccable du 2026-07-31.
   Trois défauts mesurés sur les 8 hubs, corrigés ici plutôt que dans
   v3-additions.css (291 Ko) pour rester lisibles et réversibles.
   =================================================================== */

/* 1. Couleur de réseau en TEXTE : la couleur vive de marque descend sous le
   seuil de lisibilité AA quand elle sert de texte (mesuré : Spotify 2,59:1,
   X 3,00:1, SoundCloud 3,21:1, seuil 4,5:1). On garde la couleur vive pour
   les aplats et les bordures, et on introduit une variante encre, assombrie
   juste assez pour passer AA sur fond clair. Twitch (4,64:1) reste intact. */
.jdp-hub-wrap { --platform-ink: var(--platform-color, var(--accent)); }
.jdp-hub-wrap[data-hub-platform="spotify"]    { --platform-ink: #15873D; }
.jdp-hub-wrap[data-hub-platform="x-twitter"]  { --platform-ink: #177ABE; }
.jdp-hub-wrap[data-hub-platform="soundcloud"] { --platform-ink: #D14600; }
.jdp-hub-wrap[data-hub-platform="tiktok"]     { --platform-ink: #E0274B; }
.jdp-hub-wrap[data-hub-platform="youtube"]    { --platform-ink: #ED0000; }
.jdp-hub-wrap[data-hub-platform="instagram"]  { --platform-ink: #DA2F69; }
.jdp-hub-wrap[data-hub-platform="facebook"]   { --platform-ink: #1772E8; }

/* Textes qui portaient la couleur vive : ils passent à l'encre. */
.jdp-hub-wrap .jdp-hub-product-amount,
.jdp-hub-wrap .jdp-hub-product-amount .woocommerce-Price-amount,
.jdp-hub-wrap .jdp-hub-product-card:hover .jdp-hub-product-cta,
.jdp-hub-wrap .jdp-hub-hero .jdp-eyebrow,
.jdp-hub-wrap .jdp-eyebrow {
	color: var(--platform-ink, var(--accent));
}

/* 2. Titre des cartes produit : il s'affichait à 15px, soit exactement la
   taille du texte courant, alors que ce sont les liens vers les fiches.
   Rien ne les distinguait à l'oeil. */
.jdp-hub-wrap .jdp-hub-product-title {
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* 3. Longueur de ligne : .jdp-section-sub tient sa largeur maximale de
   home.css, qui n'est PAS chargé sur les hubs. Les paragraphes s'étiraient
   donc jusqu'à 1232px. On rétablit la contrainte ici, avec la valeur
   EXACTE de la page d'accueil (home.css, .jdp-section-sub) et non une
   mesure en ch : choix de Sofian le 2026-08-04, les hubs doivent avoir la
   même largeur de texte que l'accueil. */
.jdp-hub-wrap .jdp-section-sub,
.jdp-hub-wrap .jdp-hub-intro p,
.jdp-hub-wrap .jdp-lf-wrap > p {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* 4. Cibles tactiles sur mobile.
   Mesure faite avant correction : 45 à 50 éléments cliquables sous 44px par
   hub. La majorité sont des liens INLINE dans du texte (listes, paragraphes),
   que la règle WCAG 2.5.8 exempte explicitement : les agrandir casserait le
   rythme typographique. On ne reprend donc que les vraies cibles de
   navigation, celles qu'on vise au pouce. */
@media (max-width: 900px) {
	.jdp-hub-breadcrumb-link,
	.jdp-utilbar-nav a,
	.jdp-hub-wrap .jdp-hub-product-cta {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	.jdp-footer-social {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* 5. Colonne de lecture de la prose longform.
   La contrainte porte sur les BLOCS, pas sur leur conteneur. C'était le vrai
   défaut : le conteneur était plafonné à 600px, donc les blocs à deux colonnes
   (illustration + texte) devaient tenir à deux dans ces 600px. La colonne de
   texte tombait à 251px et les titres se coupaient tous les deux mots
   (constaté sur le hub Facebook le 2026-08-04).
   Règle : chaque bloc prend la largeur de lecture de la page d'accueil
   (.jdp-longform-inner, 760px), sauf les blocs deux colonnes qui prennent
   toute la largeur du bandeau. Une seule valeur pour tous les hubs, Instagram
   compris (son ancienne exception à 880px tombe). */
.jdp-hub-wrap .jdp-lf-body,
.jdp-hub-wrap .jdp-longform-body {
	max-width: none;
}

.jdp-hub-wrap .jdp-lf-body > *,
.jdp-hub-wrap .jdp-longform-body > * {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.jdp-hub-wrap .jdp-lf-body > .jdp-lf-media,
.jdp-hub-wrap .jdp-longform-body > .jdp-lf-media {
	max-width: none;
}

/* 6. Alignement des titres du longform.
   Les H2 des blocs deux colonnes étaient calés à gauche alors que tous les
   autres titres du longform sont centrés : deux axes de lecture sur la même
   page. Demande de Sofian le 2026-08-04, on centre partout. Sélecteur à quatre
   classes pour passer devant la règle de v3-additions.css quel que soit
   l'ordre de chargement. */
.jdp-hub-wrap .jdp-lf-band--media .jdp-lf-media-text .jdp-lf-h2 {
	text-align: center;
}