/* =============================================================================
 * Astrolabe — JXC Design Tokens & Shared Component Styles
 *
 * Ce fichier est chargé UNIQUEMENT quand au moins un widget JXC est présent
 * sur la page (via get_style_depends() de chaque widget).
 *
 * TOKENS (:root)
 *   Les variables --jxc-* centralisent toutes les couleurs et la typographie
 *   du child-theme.  Pour les aligner sur les couleurs globales Elementor du
 *   site, remplacer les valeurs hex par var(--e-global-color-{id}, <fallback>)
 *   une fois les IDs de couleurs globales connus dans le site éditeur.
 *   Exemple : --jxc-accent: var(--e-global-color-accent, #212121);
 *
 * COMPOSANTS PARTAGÉS
 *   Bannières, titres de section ornementés, spinner, états vides, loaders,
 *   cartes d'entrée (série/album) et cartes actualité — communs à ≥ 2 widgets.
 * ============================================================================= */

/* ── 1. Design tokens ────────────────────────────────────────────────────────── */

:root {
	/* Palette Astrolabe Editions
	 * Pour connecter aux couleurs globales Elementor, remplacer ex :
	 *   --jxc-accent: var(--e-global-color-accent, #212121);
	 */
	--jxc-accent:         #212121;   /* Bordeaux — boutons, accents, titres */
	--jxc-dark:           #212121;   /* Texte principal */
	--jxc-gold:           #F6AD1F;   /* Or — highlights, pourquoi */
	--jxc-purple:         #936EE4;   /* Violet — univers */
	--jxc-ornament:       #AFAEB6;   /* Gris — lignes ornement, meta */
	--jxc-bg-dark:        #1a1a2e;   /* Fond sombre — nouveautés */
	--jxc-border-light:   #DDDDE0;   /* Bordures légères */
	--jxc-text-muted:     #888888;   /* Texte secondaire / vide */

	/* Typographie */
	--jxc-font: 'Jost', sans-serif;
}

/* ── 2. Animation partagée ───────────────────────────────────────────────────── */

@keyframes jxc-spin {
	to { transform: rotate(360deg); }
}

/* ── 3. Bannière — base commune ──────────────────────────────────────────────── */
/*
 * Appliqué aux six variantes de bannière.
 * Chaque module surcharge ensuite uniquement ce qui diffère :
 *   - couleur + opacité de l'overlay (::before)
 *   - min-height si nécessaire (ex. serie = 380px)
 *   - background-color de repli
 */

.jxc-col-banner,
.jxc-genre-banner,
.jxc-sl-banner,
.jxc-univers-banner,
.jxc-ul-banner,
.jxc-serie-banner {
	position: relative;
	background-size: cover;
	background-position: center;
	background-color: #333;
	min-height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Couche overlay — chaque module définit background-color + opacity/blend */
.jxc-col-banner::before,
.jxc-genre-banner::before,
.jxc-sl-banner::before,
.jxc-univers-banner::before,
.jxc-ul-banner::before,
.jxc-serie-banner::before {
	content: '';
	position: absolute;
	inset: 0;
}

/* Contenu centré dans la bannière */
.jxc-col-banner__inner,
.jxc-genre-banner__inner,
.jxc-sl-banner__inner,
.jxc-univers-banner__inner,
.jxc-ul-banner__inner,
.jxc-serie-banner__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 50px 20px;
	text-align: center;
}

/* Grand titre de bannière */
.jxc-col-banner__title,
.jxc-genre-banner__title,
.jxc-sl-banner__title,
.jxc-univers-banner__title,
.jxc-ul-banner__title,
.jxc-serie-banner__title {
	font-family: var(--jxc-font);
	font-size: 70px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #ffffff;
	line-height: 1;
	margin: 0;
}

/* Responsive — titres de bannière */
@media (max-width: 1024px) {
	.jxc-col-banner__title,
	.jxc-genre-banner__title,
	.jxc-sl-banner__title,
	.jxc-univers-banner__title,
	.jxc-ul-banner__title,
	.jxc-serie-banner__title {
		font-size: 50px;
	}
}

@media (max-width: 767px) {
	.jxc-col-banner__title,
	.jxc-genre-banner__title,
	.jxc-sl-banner__title,
	.jxc-univers-banner__title,
	.jxc-ul-banner__title,
	.jxc-serie-banner__title {
		font-size: 36px;
	}
}

/* ── 4. Titre de section avec lignes ornement ─────────────────────────────────
 *
 * Deux variantes :
 *   A. Couleur sombre (collection, genre, univers)
 *   B. Couleur accent bordeaux (catalogue, série)
 * ─────────────────────────────────────────────────────────────────────────── */

/* Titres de section ornement — style unifie dark */
.jxc-col-series-title,
.jxc-col-actu-title,
.jxc-genre-series-title,
.jxc-genre-actu-title,
.jxc-univers-series-title,
.jxc-univers-actu-title,
.jxc-eg-section-title,
.jxc-cat-section-title,
.jxc-serie-section-title,
.jxc-sorties__title,
.jxc-actu-carousel-section__title {
	font-family: var(--jxc-font) !important;
	font-size: 40px !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	line-height: 44px !important;
	color: var(--jxc-dark) !important;
	margin: 0 0 32px !important;
	text-align: center !important;
}


/* Variante lumière (sur fond sombre) — uniquement catalogue */
.jxc-cat-section-title--light,
.jxc-actu-carousel-section__title {
	color: #fff !important;
}


/* Elementor Heading widget — mode titre de section ornemente */
.jxc-section-heading .elementor-heading-title {
	font-family: var(--jxc-font) !important;
	font-size: 40px !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	line-height: 44px !important;
	color: var(--jxc-dark) !important;
	margin: 0 0 32px !important;
}


/* ── Typographie globale des paragraphes (Jost 400) ─────────────────────────── */
body p,
.entry-content p,
.widget-area p,
.elementor-text-editor p {
	font-family: var(--jxc-font, 'Jost', sans-serif);
	font-weight: 400;
}

/* Responsive — titres de section ornementés */
@media (max-width: 767px) {
	.jxc-col-series-title,
	.jxc-col-actu-title,
	.jxc-genre-series-title,
	.jxc-genre-actu-title,
	.jxc-univers-series-title,
	.jxc-univers-actu-title,
	.jxc-eg-section-title,
	.jxc-cat-section-title,
	.jxc-serie-section-title,
	.jxc-sorties__title,
	.jxc-actu-carousel-section__title,
	.jxc-section-heading .elementor-heading-title {
		font-size: 24px;
	}
}

/* ── 5. Loader & Spinner ─────────────────────────────────────────────────────── */

/* Conteneur loader — variante standard (collection, genre, sl, univers, ul) */
.jxc-col-loader,
.jxc-genre-loader,
.jxc-sl-loader,
.jxc-univers-loader,
.jxc-ul-loader,
.jxc-eg-loader,
.jxc-cl-loader {
	text-align: center;
	padding: 20px 0;
}

/* Spinner — variante sombre (collection, genre, series-listing, univers) */
.jxc-col-spinner,
.jxc-genre-spinner,
.jxc-sl-spinner,
.jxc-univers-spinner,
.jxc-eg-spinner,
.jxc-cl-spinner {
	display: inline-block;
	width: 36px;
	height: 36px;
	border: 3px solid var(--jxc-border-light);
	border-top-color: var(--jxc-dark);
	border-radius: 50%;
	animation: jxc-spin 0.7s linear infinite;
}

/* Spinner — variante violette (univers-listing) */
.jxc-ul-spinner {
	display: inline-block;
	width: 36px;
	height: 36px;
	border: 3px solid var(--jxc-border-light);
	border-top-color: var(--jxc-purple);
	border-radius: 50%;
	animation: jxc-spin 0.7s linear infinite;
}

/* ── 6. Sentinel IntersectionObserver ─────────────────────────────────────────── */

.jxc-col-sentinel,
.jxc-genre-sentinel,
.jxc-sl-sentinel,
.jxc-univers-sentinel,
.jxc-ul-sentinel,
.jxc-eg-sentinel,
.jxc-cl-sentinel {
	height: 1px;
	margin-top: 20px;
}

/* ── 7. État vide ────────────────────────────────────────────────────────────── */

.jxc-col-empty,
.jxc-genre-empty,
.jxc-sl-empty,
.jxc-univers-empty,
.jxc-ul-empty,
.jxc-eg-empty,
.jxc-cl-empty {
	font-family: var(--jxc-font);
	font-size: 15px;
	color: var(--jxc-text-muted);
	text-align: center;
	padding: 40px 0;
}

/* ── 8. Grille en chargement ─────────────────────────────────────────────────── */

.jxc-col-grid.is-loading,
.jxc-genre-grid.is-loading,
.jxc-sl-grid.is-loading,
.jxc-univers-grid.is-loading,
.jxc-ul-grid.is-loading,
.jxc-eg-grid.is-loading,
.jxc-cl-grid.is-loading,
.jxc-cat-grid.is-loading,
.jxc-paraitre-grid.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ── 9. Carte entrée — série ou album standalone ──────────────────────────────
 *
 * Partagée entre : collection, genre, series-listing, univers.
 * Définie ICI (et non dans collection.css) pour éviter de dépendre
 * de jxc-collection quand genre ou univers est chargé seul.
 * ─────────────────────────────────────────────────────────────────────────── */

.jxc-col-entry {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.jxc-col-entry__cover-link {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.jxc-col-entry:hover .jxc-col-entry__cover-link {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
	transform: translateY(-3px);
}

.jxc-col-entry__cover {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 7 / 10;
	object-fit: cover;
	border-radius: 3px;
}

/* Badge "Récit complet" */
.jxc-col-entry__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--jxc-dark);
	color: #ffffff;
	font-family: var(--jxc-font);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 3px 7px;
	border-radius: 3px;
	line-height: 1.5;
}

.jxc-col-entry__body {
	width: 100%;
	padding: 10px 4px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.jxc-col-entry__title {
	margin: 0;
	font-family: var(--jxc-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.jxc-col-entry__title a {
	text-decoration: none;
	color: var(--jxc-dark);
	transition: color 0.2s ease;
}

.jxc-col-entry__title a:hover {
	color: var(--jxc-accent);
}

.jxc-col-entry__tomes {
	display: block;
	font-family: var(--jxc-font);
	font-size: 12px;
	font-weight: 400;
	color: var(--jxc-text-muted);
}

/* ── 10. Carte actualité ─────────────────────────────────────────────────────
 *
 * Partagée entre : collection, genre, univers, serie.
 * ─────────────────────────────────────────────────────────────────────────── */

.jxc-col-actu-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.jxc-col-actu-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}

.jxc-col-actu-card__img-link {
	display: block;
	line-height: 0;
	overflow: hidden;
}

.jxc-col-actu-card__img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.jxc-col-actu-card:hover .jxc-col-actu-card__img {
	transform: scale(1.05);
}

.jxc-col-actu-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.jxc-col-actu-card__title {
	margin: 0;
	font-family: var(--jxc-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.jxc-col-actu-card__title a {
	text-decoration: none;
	color: var(--jxc-dark);
	transition: color 0.2s ease;
}

.jxc-col-actu-card__title a:hover {
	color: var(--jxc-accent);
}

.jxc-col-actu-card__date {
	display: block;
	font-family: var(--jxc-font);
	font-size: 12px;
	font-weight: 400;
	color: var(--jxc-text-muted);
}

/* ── 11. Carte item — séries & albums de la page auteur ─────────────────────
 *
 * Partagé entre jxc-auteur-series-widget et jxc-auteur-albums-widget.
 * ─────────────────────────────────────────────────────────────────────────── */

.jxc-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.jxc-item__image-link {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.25s ease, transform 0.25s ease, outline-color 0.25s ease;
}

/* L'outline doit être sur le wrapper (.jxc-item) pour ne pas être coupé par overflow:hidden */
.jxc-item--featured {
	outline: 3px solid #F6AD1F;
	outline-offset: 4px;
	border-radius: 3px;
}

.jxc-item:hover .jxc-item__image-link {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
	transform: translateY(-3px);
}

.jxc-item__image {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 7 / 10;
	object-fit: cover;
	border-radius: 3px;
}

/* Badges positionnés sur l'image */
.jxc-item__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	font-family: var(--jxc-font);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 3px 7px;
	border-radius: 3px;
	line-height: 1.5;
	color: #ffffff;
	z-index: 1;
}

/* Nouveauté — rouge Astrolabe */
.jxc-item__badge--new {
	background-color: #C0392B;
}

/* Dernier titre — bordeaux Astrolabe */
.jxc-item__badge--featured {
	background-color: var(--jxc-accent, #212121);
}

/* Récit complet — gris foncé */
.jxc-item__badge--oneshot {
	background-color: var(--jxc-dark, #212121);
	top: auto;
	bottom: 8px;
	left: 8px;
}

/* Quand deux badges coexistent (nouveau + récit complet) */
.jxc-item__badge--new + .jxc-item__badge--oneshot {
	bottom: 8px;
}

.jxc-item__body {
	width: 100%;
	padding: 10px 4px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.jxc-item__title {
	margin: 0;
	font-family: var(--jxc-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.jxc-item__title a {
	text-decoration: none;
	color: var(--jxc-dark);
	transition: color 0.2s ease;
}

.jxc-item__title a:hover {
	color: var(--jxc-accent);
}

.jxc-item__meta {
	display: block;
	font-family: var(--jxc-font);
	font-size: 12px;
	font-weight: 400;
	color: var(--jxc-text-muted);
}

/* Highlight sur le item featured (dernier titre / dernière série) */
.jxc-item--featured .jxc-item__title a {
	color: var(--jxc-accent, #212121);
}