/* ============================================================================
 * JSL — Blog & Single
 * Identité visuelle :
 *   - Jaune signature : #FFD000
 *   - Noir           : #000
 *   - Blanc          : #fff
 *   - Police         : Barlow
 * ========================================================================= */

:root {
	--jsl-yellow: #FFD000;
	--jsl-black: #000;
	--jsl-white: #fff;
	--jsl-gray-100: #f7f7f7;
	--jsl-gray-300: #e5e5e5;
	--jsl-gray-500: #888;
	--jsl-gray-700: #333;
	--jsl-radius: 0.25vw;
}

/* ========== HERO en haut des pages blog / archives ========== */

.jsl-page-hero {
	background: var(--jsl-black);
	color: var(--jsl-white);
	/* padding-top compense la hauteur du header.main fixed (header_top + header_bottom). */
	padding: 14vw 5vw 7vw;
	margin-bottom: 2.5vw;
}

/* Variante avec image de fond (ACF opt_blog_hero_bg) */
.jsl-page-hero--with-bg {
	background-color: var(--jsl-black);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	isolation: isolate;
}

.jsl-page-hero--with-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.8) 100%);
	z-index: 0;
	pointer-events: none;
}

.jsl-page-hero--with-bg > * {
	position: relative;
	z-index: 1;
}



.jsl-page-hero .container {
	max-width: 1140px;
}

.jsl-page-hero__eyebrow {
	display: inline-block;
	font-size: 0.75vw;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jsl-yellow);
	margin-bottom: 0.5vw;
}

.jsl-page-hero__title {
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 4vw;
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 0.75vw;
	color: var(--jsl-white);
}

.jsl-page-hero__intro {
	font-size: 1vw;
	line-height: 1.6;
	max-width: 720px;
	color: rgba(255, 255, 255, 0.85);
}

.jsl-page-hero__intro p {
	font-size: inherit;
	margin: 0 0 0.75vw;
}

/* ========== Fil d'Ariane ========== */

.jsl-breadcrumbs {
	margin-bottom: 1.25vw;
	font-size: 0.75vw;
}

.jsl-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5vw;
	align-items: center;
}

.jsl-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.6);
}

.jsl-breadcrumbs li + li::before {
	content: '›';
	margin-right: 0.5vw;
	color: var(--jsl-yellow);
}

.jsl-breadcrumbs a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.2s ease;
}

.jsl-breadcrumbs a:hover {
	color: var(--jsl-yellow);
	opacity: 1;
}

.jsl-breadcrumbs [aria-current='page'] {
	color: var(--jsl-yellow);
	font-weight: 600;
}

/* Sur fond blanc (single body) */
.jsl-single__body .jsl-breadcrumbs li,
.jsl-single__body .jsl-breadcrumbs a {
	color: var(--jsl-gray-700);
}

/* ========== Grille des cartes ========== */

.jsl-blog-grid {
	padding: 1.75vw 5vw 4.25vw;
	background: var(--jsl-white);
}

.jsl-blog-grid__row {
	margin-bottom: 2.5vw;
}


/* Groupes de badges catégorie (cartes + single) */
.jsl-card__cats,
.jsl-single__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5vw;
	align-items: center;
}

/* ========== Carte d'article ========== */

.jsl-blog-item {
	display: flex;
}

.jsl-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--jsl-white);
	border-radius: var(--jsl-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--jsl-black);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	box-shadow: 0 2px 0.5vw rgba(0, 0, 0, 0.04);
}

.jsl-card:hover,
.jsl-card:focus-visible {
	transform: translateY(-0.25vw);
	box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.12);
	color: var(--jsl-black);
	opacity: 1;
}

.jsl-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--jsl-gray-100);
}

.jsl-card__img,
.jsl-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.jsl-card:hover .jsl-card__img,
.jsl-card:hover .jsl-card__media img {
	transform: scale(1.05);
}

.jsl-card__body {
	padding: 1.25vw;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.5vw;
}

.jsl-card__cat {
	display: inline-block;
	align-self: flex-start;
	background: var(--jsl-yellow);
	color: var(--jsl-black);
	font-size: 0.5vw;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25vw 0.5vw;
	border-radius: 999px;
}

.jsl-card__title {
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 1.25vw;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	color: var(--jsl-black);
	transition: color 0.2s ease;
}

.jsl-card:hover .jsl-card__title {
	color: var(--jsl-black);
}

.jsl-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5vw;
	color: var(--jsl-gray-500);
	font-size: 0.75vw;
}

.jsl-card__excerpt {
	color: var(--jsl-gray-700);
	font-size: 0.75vw;
	line-height: 1.55;
	margin: 0;
}

.jsl-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5vw;
	font-weight: 700;
	color: var(--jsl-black);
	border-bottom: 2px solid var(--jsl-yellow);
	padding-bottom: 0.25vw;
	align-self: flex-start;
	transition: gap 0.2s ease;
}

.jsl-card:hover .jsl-card__cta {
	gap: 0.75vw;
}

/* ========== Single article ========== */

.jsl-single {
	background: var(--jsl-white);
}

/* Hero du single */
.jsl-single__hero {
	position: relative;
	min-height: 75vh;
	color: var(--jsl-white);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding: 0;
}

.jsl-single__hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--jsl-black);
}

.jsl-single__hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jsl-single__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.85) 100%);
	z-index: 1;
}

.jsl-single__hero-content {
	position: relative;
	z-index: 2;
	padding: 14vw 5vw 7vw;
	width: 100%;
}

.jsl-single__cat {
	display: inline-block;
	background: var(--jsl-yellow);
	color: var(--jsl-black);
	font-size: 0.75vw;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.25vw 0.75vw;
	border-radius: 999px;
	text-decoration: none;
	margin-bottom: 0.75vw;
}

.jsl-single__cat:hover {
	color: var(--jsl-black);
	background: var(--jsl-white);
	opacity: 1;
}

.jsl-single__title {
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 4.5vw;
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 1.25vw;
	color: var(--jsl-white);
}

.jsl-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5vw;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.75vw;
}

.jsl-single__author {
	display: inline-flex;
	align-items: center;
	gap: 0.5vw;
}

.jsl-single__avatar {
	width: 1.75vw;
	height: 1.75vw;
	border-radius: 50%;
	overflow: hidden;
}

/* Corps du single */
.jsl-single__body {
	padding: 3.25vw 5vw;
}

.jsl-single__inner {
	width: 100%;
}

.jsl-single__chapo {
	font-size: 1vw;
	font-weight: 500;
	line-height: 1.5;
	color: var(--jsl-gray-700);
	padding: 1vw 0 1.25vw;
	border-left: 0.25vw solid var(--jsl-yellow);
	padding-left: 1vw;
	margin: 0 0 1.75vw;
}

.jsl-single__content {
	font-size: 1vw;
	line-height: 1.7;
	color: var(--jsl-gray-700);
}

.jsl-single__content h2,
.jsl-single__content h3,
.jsl-single__content h4 {
	font-family: 'Barlow', system-ui, sans-serif;
	color: var(--jsl-black);
	font-weight: 700;
	line-height: 1.2;
	margin-top: 2vw;
}

.jsl-single__content h2 { font-size: 1.5vw; }
.jsl-single__content h3 { font-size: 1.25vw; }
.jsl-single__content h4 { font-size: 1vw; }

.jsl-single__content p {
	font-size: inherit;
	margin: 0 0 1.25vw;
}

.jsl-single__content a {
	color: var(--jsl-black);
	border-bottom: 2px solid var(--jsl-yellow);
}

.jsl-single__content a:hover {
	background: var(--jsl-yellow);
}

.jsl-single__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--jsl-radius);
	margin: 1.25vw 0;
}

.jsl-single__content blockquote {
	border-left: 0.25vw solid var(--jsl-yellow);
	padding: 0.5vw 0 0.5vw 1.25vw;
	margin: 1.75vw 0;
	font-style: italic;
	color: var(--jsl-gray-700);
}

/* Tags */
.jsl-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5vw;
	margin: 2vw 0 1.25vw;
}

.jsl-single__tag {
	background: var(--jsl-gray-100);
	color: var(--jsl-gray-700);
	font-size: 0.75vw;
	font-weight: 500;
	padding: 0.25vw 0.75vw;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.jsl-single__tag:hover {
	background: var(--jsl-yellow);
	color: var(--jsl-black);
	opacity: 1;
}

/* ========== Boutons de partage ========== */

.jsl-share {
	margin: 1.75vw 0 2.5vw;
	padding: 1.25vw 0;
	border-top: 1px solid var(--jsl-gray-300);
	border-bottom: 1px solid var(--jsl-gray-300);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75vw;
}

.jsl-share__label {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.75vw;
	letter-spacing: 0.08em;
	color: var(--jsl-black);
}

.jsl-share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.5vw;
}

.jsl-share__list a,
.jsl-share__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2vw;
	height: 2vw;
	border-radius: 50%;
	background: var(--jsl-black);
	color: var(--jsl-white);
	border: none;
	cursor: pointer;
	font-size: 0.75vw;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.jsl-share__list a:hover,
.jsl-share__copy:hover {
	background: var(--jsl-yellow);
	color: var(--jsl-black);
	transform: translateY(-2px);
	opacity: 1;
}

.jsl-share__copy.is-copied {
	background: var(--jsl-yellow);
	color: var(--jsl-black);
}

/* ========== Bloc auteur ========== */

.jsl-author {
	display: flex;
	gap: 1.25vw;
	background: var(--jsl-gray-100);
	border-radius: var(--jsl-radius);
	padding: 1.75vw;
	margin-top: 2.5vw;
}

.jsl-author__avatar {
	flex-shrink: 0;
}

.jsl-author__img {
	width: 5vw;
	height: 5vw;
	border-radius: 50%;
	object-fit: cover;
}

.jsl-author__eyebrow {
	display: inline-block;
	font-size: 0.5vw;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jsl-gray-500);
	margin-bottom: 0.5vw;
}

.jsl-author__name {
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 1vw;
	font-weight: 700;
	margin: 0 0 0.5vw;
	color: var(--jsl-black);
}

.jsl-author__desc {
	font-size: 0.75vw;
	line-height: 1.6;
	color: var(--jsl-gray-700);
	margin: 0 0 0.75vw;
}

.jsl-author__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5vw;
}

.jsl-author__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25vw;
	padding: 0.5vw 0.75vw;
	background: var(--jsl-white);
	border-radius: var(--jsl-radius);
	color: var(--jsl-black);
	font-size: 0.75vw;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.jsl-author__link:hover {
	background: var(--jsl-yellow);
	color: var(--jsl-black);
	opacity: 1;
}

.jsl-author__link--icon {
	width: 2vw;
	height: 2vw;
	padding: 0;
	justify-content: center;
}

/* ========== Commentaires du single ========== */

.jsl-single-comments {
	padding: 2.5vw 5vw 3.25vw;
	background: var(--jsl-white);
}

/* ========== Articles connexes ========== */

.jsl-related {
	background: var(--jsl-gray-100);
	padding: 4.25vw 5vw;
}

.jsl-related__title {
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 3vw;
	font-weight: 800;
	color: var(--jsl-black);
	margin: 0 0 2vw;
	text-align: center;
}

.jsl-related__title::after {
	content: '';
	display: block;
	width: 3vw;
	height: 0.25vw;
	background: var(--jsl-yellow);
	margin: 0.75vw auto 0;
}

/* Liens dans .jsl-related — réutilise .jsl-card */
.jsl-related .jsl-card {
	background: var(--jsl-white);
}

/* ========== Lien Modifier (admin) ========== */

.jsl-single__edit {
	margin-top: 1.75vw;
	font-size: 0.75vw;
}

.jsl-single__edit a {
	background: var(--jsl-black);
	color: var(--jsl-white);
	padding: 0.25vw 0.5vw;
	border-radius: var(--jsl-radius);
	text-decoration: none;
}

/* ========== Animations (fade-in via classes JS/ScrollTrigger) ==========
 * Note : les règles responsive (mobile / tablette) sont dans assets/css/responsive.css
 * pour respecter la convention du thème (vw en desktop, rem/em/px en responsive).
 * ========================================================================= */

.jsl-fade-in {
	opacity: 0;
	transform: translateY(1vw);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.jsl-fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}