/**
 * Overrides propios de Juste Une Trace.
 *
 * Todo el CSS nuestro va aquí. No tocar style.css ni responsive.css: son del
 * tema elearniv y se sobrescriben al actualizarlo.
 */

/* ── Accueil : bloc "Services" ─────────────────────────────────────────────── */
/* Reprend le contenu du shortcode [jut_display_services] du site WP
   d'origine (feedback client 2026-09-09), mais avec le style EXACT du thème
   elearniv pour .features-area/.features-box (voir style.css et
   index-11.html) — pas de cercle autour de l'icône, l'icône "fantôme" en
   filigrane derrière (.back-icon) est déjà stylée par le thème, Boxicons
   fonctionne pareil que les icônes flaticon d'origine (même balise <i>). */

/* ── Botón .default-btn: padding simétrico ────────────────────────────────── */
/* El tema (style.css) deja padding-left:55px vs padding-right:30px — pensado
   para dejar sitio al ícono que algunas variantes del tema ponen a la
   izquierda, que este proyecto no usa. Sin ícono, el texto se ve descentrado
   dentro del botón. A pedido del cliente: mismo padding a ambos lados. */
.default-btn {
	padding-left: 30px;
	padding-right: 30px;
}


/* 404 Error page: fondo negro y ocupa toda la pantalla
}*/
.error-area {
	position: fixed;
	top: 0;
	z-index: 9999;
	left: 0;
	width: 100%;
	overflow: hidden;
}
.error-area .d-table {
	height: 100vh !important;
}
.error-content img{
	width: 50%;
   filter: brightness(0) invert(1);	
}
.error-content h2 {
    color: var(--whiteColor);
    margin-bottom: 10px;
    margin-top: 45px;
    font-size: 60px;
    font-weight: 800;
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */

/**
 * El logo es un SVG sin atributos width/height (solo viewBox 598×245), así que
 * no tiene dimensiones intrínsecas: con `width:auto` los navegadores lo colapsan
 * o le aplican el 300×150 por defecto. Hay que darle un ancho explícito y dejar
 * que la altura la calcule la proporción del viewBox.
 */
.logo-jut {
	width: 170px;
	height: auto;
	max-width: 100%;
}

@media only screen and (max-width: 991px) {
	.logo-jut {
		width: 140px;
	}
}

/**
 * El footer tiene fondo casi negro (#100f1f) y el logo es #231F20, así que ahí
 * resulta invisible. Al venir como <img> no se le puede cambiar el fill por CSS:
 * brightness(0) lo lleva a negro puro e invert(1) lo pasa a blanco, respetando
 * la transparencia. Sirve porque el logo es de un solo color plano; si algún día
 * pasa a ser multicolor habrá que subir una versión en blanco aparte.
 */
.footer-area .logo-jut {
	filter: brightness(0) invert(1);
}

/* Fallback mientras no haya imagen de logo configurada */
.logo-text {
	font-size: 24px;
	font-weight: 700;
	color: var(--blackColor, #221638);
	white-space: nowrap;
}

/* ── Botón del carrito en la navbar ───────────────────────────────────────── */

.navbar-area .cart-btn {
	position: relative;
	padding: 0;
	line-height: 1;
	color: var(--blackColor, #221638);
	transition: color .3s ease;
}

.navbar-area .cart-btn:hover {
	color: var(--mainColor, #44ce6f);
}

.navbar-area .cart-btn i {
	font-size: 25px;
}

.navbar-area .cart-btn .badge {
	font-size: 10px;
}

/* ── Panel lateral del carrito ────────────────────────────────────────────── */

#rc-cart .default-btn {
	display: inline-block;
}

/* El título de cada línea del carrito es un link (item.url) pero heredaba el
   mismo color negro que el texto en negrita de al lado — funcionaba pero era
   invisible como link. Mismo criterio que el resto del sitio. */
#rc-cart .fw-bold.text-decoration-none {
	color: var(--mainColor);
}

#rc-cart .fw-bold.text-decoration-none:hover {
	color: var(--blackColor);
	text-decoration: underline;
}

/* Alpine: evita el parpadeo de los bloques x-show antes de inicializarse */
[x-cloak] {
	display: none !important;
}

/* ── Contenido HTML importado de WordPress (CKEditor: bio/about de artiste,
   description/onglets de producto) ──────────────────────────────────────── */
/* WordPress deja sus clases nativas de alineación de imagen (alignleft,
   alignright, aligncenter, alignnone) y <iframe> de video/audio con width/
   height fijos (a veces 2000px de ancho) tal cual en el HTML — el tema no las
   estiliza en absoluto, así que sin esto una imagen de 2000px desborda el
   layout y los iframes quedan pegados al borde, sin responsividad ni centrado. */
#content img {
	max-width: 100%;
	height: auto;
}

#content .alignleft {
	float: left;
	margin: 0 20px 20px 0;
}

#content .alignright {
	float: right;
	margin: 0 0 20px 20px;
}

#content .aligncenter {
	display: block;
	float: none;
	margin: 0 auto 20px;
}

#content .alignnone {
	float: none;
	margin: 0 0 20px;
}

#content iframe {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

/* Página de artista: artiste_bio en 2 columnas tipo revista (feedback cliente 2026-09-08) */
.artiste-bio-magazine {
	/* max-width: 1000px; */
	margin: 0 auto;
	text-align: justify;
}

@media (min-width: 768px) {
	.artiste-bio-magazine {
		column-count: 2;
		column-gap: 50px;
	}
	/* Evita que una imagen o figura quede partida entre dos columnas */
	.artiste-bio-magazine img,
	.artiste-bio-magazine figure {
		break-inside: avoid;
	}
	/* Las imágenes alignleft/alignright de WP ya flotan (ver regla #content
	   .alignleft/.alignright más arriba) — se acotan más en columnas angostas
	   para que el texto siga teniendo espacio real para fluir alrededor. */
	.artiste-bio-magazine .alignleft,
	.artiste-bio-magazine .alignright {
		max-width: 55%;
	}

	/* <figure> (foto con caption) e iframes (vídeos incrustados) no están
	   pensados para caber dentro de una columna angosta — se hacen
	   "full-bleed", ocupando las 2 columnas como una foto/vídeo de revista
	   entre bloques de texto. OJO: no se aplica a .alignnone/.aligncenter en
	   general — WordPress también los usa en <img> sueltas muy chicas (ej.
	   miniaturas de 50x30px usadas como iconito inline en algunas bios), que
	   NO deben forzar un salto de columna completo; esas quedan al ancho de
	   su columna vía #content img{max-width:100%}. */
	.artiste-bio-magazine figure,
	.artiste-bio-magazine iframe {
		column-span: all;
	}

	/* Algunas <figure> de WP traen un style="width: XXXpx" inline (el ancho
	   original de la imagen) que una regla normal no puede vencer (misma
	   especificidad, y el inline gana) — se fuerza con !important a que
	   respete el ancho del contenedor en vez de desbordarlo. */
	.artiste-bio-magazine figure {
		width: auto !important;
		max-width: 100%;
	}
}

/* ── Activités: badge d'icône sur la vignette du listing ──────────────────── */
/* Reprend l'esprit du cercle noir + icône du site WP d'origine (une icône
   par type d'activité, feedback client 2026-09-09) mais intégré au style de
   carte déjà utilisé ici — .products-image a overflow:hidden, donc le badge
   reste À L'INTÉRIEUR de la vignette (pas de moitié qui dépasse). */
.activite-icon-badge {
	position: absolute;
	left: 15px;
	bottom: 15px;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #1e1d2f;
	color: var(--whiteColor);
	font-size: 20px;
	z-index: 2;
}

/* ── Artiste: cajas imagen/texto (izquierda/derecha) ──────────────────────── */
/* Reemplaza artiste-bio-magazine para artistas migrados a artiste_boxes —
   feedback cliente 2026-09-08: varias personas a destacar por separado
   (ej. tríos/cuartetos), cada una con su propio bloque imagen+texto en vez
   de un único bloque de texto en 2 columnas. */
.artiste-box {
	margin-bottom: 50px;
}

/* Espace horizontal entre l'image et le texte : le gutter Bootstrap par
   défaut (24px) laissait le texte trop collé à l'image en vue large,
   surtout sur les biographies longues (feedback client batch 3,
   2026-09-09). Limité au breakpoint lg (où les colonnes sont côte à
   côte) — en mobile, empilées, ça ne s'applique pas. */
@media (min-width: 992px) {
	.artiste-box-images + .artiste-box-content {
		padding-left: 40px;
	}

	/* Image à droite : le texte passe à gauche, il garde le gutter Bootstrap
	   (sinon il sortait de l'alignement du reste de la page, à 12px du bord). */
	.artiste-box-images.order-lg-2 + .artiste-box-content {
		padding-left: calc(var(--bs-gutter-x) * .5);
		padding-right: 40px;
	}
}

.artiste-box:last-child {
	margin-bottom: 0;
}

.artiste-box-images img {
	display: block;
	width: 100%;
	border-radius: 5px;
	margin-bottom: 20px;
}

.artiste-box-images img:last-child {
	margin-bottom: 0;
}

.artiste-box-text-only .artiste-box-content {
	max-width: 800px;
	margin: 0 auto;
}

/* Pages modulaires (À Propos, CGUV, page-modulaire.php) : contenu bien plus
   long qu'une bio d'artiste — le max-width:800px ci-dessus donnait un rendu
   trop étroit/serré pour des pages entières de texte (feedback client
   2026-09-16). Pleine largeur du conteneur ici, comportement inchangé pour
   artiste/activité. */
.page-modulaire-boxes .artiste-box-text-only .artiste-box-content {
	max-width: none;
	margin: 0;
}

/* Crowdfunding (product.php) : la colonne est déjà étroite, le texte seul
   centré à 800px creusait un retrait énorme à gauche par rapport aux autres
   blocs. Alignement sur le bord du conteneur, comme les blocs avec image. */
.cf-boxes .artiste-box-text-only .artiste-box-content {
	max-width: none;
	margin: 0;
}

.artiste-box-content {
	text-align: justify;
}

/* Frise chronologique de la page À Propos (page-modulaire.php) — remplace
   les paragraphes "année : texte" empilés par une vraie timeline visuelle
   (demande client 2026-09-18/19, mockup validé par le client avant
   implémentation). Ligne centrale + cartes alternées, regroupées par
   décennie ; couleurs reprises du reste du site (mainColor/mainColor2),
   police par défaut du thème (feedback client 2026-09-19 : pas besoin
   d'une police à part ici). */
.page-timeline {
	position: relative;
	max-width: 900px;
	margin: 60px auto 0;
}

.page-timeline::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #e6dfe9;
	transform: translateX(-50%);
}

.page-timeline-decade {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 34px 0 26px;
	z-index: 1;
}

.page-timeline-decade-num {
	font-weight: 800;
	font-style: italic;
	font-size: 2.6rem;
	background: #fff;
	padding: 0 18px;
	line-height: 1;
}

/* Le "s" de pluriel (1990s, 2010s…) en <sup> écrasait trop peu à la taille du
   nombre — .page-timeline-decade-num a le style hérité par défaut du <sup>
   du navigateur (font-size:smaller, ~75%) qui restait encore trop grand vu
   la taille déjà imposante du chiffre (feedback client 2026-09-19). */
.page-timeline-decade-num sup {
	font-size: 0.4em;
	top: -1.1em;
	line-height: 1;
}

.page-timeline-decade-sub {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--optionalColor);
	background: #fff;
	padding: 6px 14px 0;
}

.page-timeline-entry {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	margin-block: 6px;
}

.page-timeline-dot {
	position: absolute;
	left: 50%;
	top: 28px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--mainColor);
	transform: translateX(-50%);
	z-index: 2;
}

.page-timeline-right .page-timeline-dot {
	border-color: var(--mainColor2);
}

.page-timeline-card {
	grid-column: 1;
	background: #fff;
	border: 1px solid #e6dfe9;
	border-radius: 14px;
	padding: 20px 24px 22px;
	box-shadow: 0 18px 40px -22px rgba(34, 22, 56, 0.25);
	text-align: justify;
}

.page-timeline-right .page-timeline-card {
	grid-column: 2;
}

.page-timeline-year {
	font-weight: 700;
	font-size: 1.4rem;
	display: block;
	margin-bottom: 6px;
}

/* Image(s)/vidéo optionnelles par ligne (demande client 2026-09-19) —
   empilées au-dessus du texte plutôt qu'à côté comme .artiste-box-images :
   la carte de la timeline est trop étroite pour une mise en page 2
   colonnes. */
.page-timeline-images img {
	display: block;
	width: 100%;
	border-radius: 8px;
	margin-bottom: 24px;
}

/* .page-timeline-images img:last-child {
	margin-bottom: 0;
} */

.page-timeline-video {
	margin-bottom: 24px;
	border-radius: 8px;
	overflow: hidden;
}

.page-timeline-text {
	font-size: 0.94rem;
	line-height: 1.62;
	color: var(--paragraphColor);
}

/* Couleurs/hover: voir la règle commune « liens » en fin de fichier. */
.page-timeline-text a {
	font-weight: 700;
}

/* Sous 992px les colonnes ne sont plus côte à côte nulle part ailleurs sur
   le site (voir .artiste-box-images plus haut) — même seuil ici : une
   colonne, ligne/points ramenés à gauche. */
@media (max-width: 991px) {
	.page-timeline::before {
		left: 19px;
	}

	.page-timeline-decade {
		align-items: flex-start;
		text-align: left;
		padding-left: 44px;
	}

	.page-timeline-decade-num,
	.page-timeline-decade-sub {
		padding-left: 0;
		padding-right: 0;
	}

	.page-timeline-entry {
		grid-template-columns: 1fr;
		column-gap: 0;
		padding-left: 44px;
	}

	.page-timeline-dot {
		left: 19px;
		top: 24px;
	}

	.page-timeline-right .page-timeline-card {
		grid-column: 1;
	}
}

/* Page Équipe — photo carrée recadrée en cercle (le champ image ne force pas
   de ratio, .size(300,300) recadre déjà en carré côté PHP, object-fit assure
   le rendu si jamais une photo source n'est pas parfaitement carrée). */
.equipe-membre-photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.equipe-membre-bio {
	text-align: justify;
}

/* Site web + réseaux sociaux de l'artiste : même look ET même technique de
   centrage que .social-link du footer (icône positionnée en absolute +
   translateY, pas line-height — avec Boxicons, line-height seul laissait le
   glyphe visiblement décentré, feedback client 2026-09-09). Pas nécessaire
   d'être imbriqué dans .single-footer-widget pour avoir ce style. */
.artiste-social-link {
	padding-left: 0;
	list-style-type: none;
	margin-top: 15px;
	margin-bottom: 0;
	display: flex;
	gap: 3px;
}

.artiste-social-link li {
	display: inline-block;
}

.artiste-social-link li a {
	display: block;
	width: 30px;
	height: 30px;
	text-align: center;
	color: var(--whiteColor);
	background-color: #1e1d2f;
	font-size: 18px;
	position: relative;
	border-radius: 2px;
}

.artiste-social-link li a i {
	position: absolute;
	left: 0;
	top: 50%;
	right: 0;
	transform: translateY(-48%);
}

.artiste-social-link li a:hover {
	background-color: var(--mainColor);
	color: var(--whiteColor);
}

/* Los embeds de video (YouTube) traen width/height fijos (ej. 1120x630).
   Sin esto, max-width:100% reduce el ancho pero el alto se queda fijo en el
   valor del atributo HTML — el video queda "achatado"/cuadrado en vez de
   mantener su proporción 16:9. Los embeds de audio (ej. SoundCloud, con
   width=100% y su propio height fijo) no se tocan, esa altura sí es la
   correcta para ese tipo de reproductor. */
#content iframe[src*="youtube.com"],
#content iframe[src*="youtu.be"] {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* Evita que un float (alignleft/alignright) se salga del panel de la pestaña */
.products-details-tabs .tab-pane::after {
	content: "";
	display: table;
	clear: both;
}

/* El tema limita el panel de cada pestaña a 720px fijos, centrado — el
   contenido de WP (imágenes, tablas, iframes) pensado para el ancho real
   del contenedor queda innecesariamente angosto. */
.products-details-tabs .tab-content .tab-pane {
	max-width: 100%;
}

/* ── Imagen de en-tête de las páginas "activité" ──────────────────────────── */
.activite-header-image img {
	max-height: 420px;
	object-fit: cover;
}

/* ── Concert: imagen de en-tête contenida (no a ancho completo) ───────────── */
/* Feedback cliente 2026-09-08: "les images sont clairement pas ok" — varias
   concert_header_image son collages de 2-3 fotos pegadas por el cliente
   (ver ej. "Up the Mississippi"), y a ancho completo (edge-to-edge, como
   tenía antes) las costuras del collage se notan mucho más. Contenida
   dentro del container, con esquinas redondeadas, se ve como una foto de
   portada intencional en vez de un banner desbordado. */
.concert-header-image {
	border-radius: 5px;
	overflow: hidden;
}

.concert-header-image img {
	display: block;
	max-height: 450px;
	object-fit: cover;
	border-radius: 5px;
}

/* ── Activité: intro en 2 columnas (texto corto + foto) ───────────────────── */
/* Reemplaza el antiguo banner a ancho completo (feedback cliente
   2026-09-08: "ne pas mettre une grosse photo pour commencer") — la foto
   queda contenida al lado de un texto breve, en vez de dominar la pantalla
   antes de cualquier contenido. */
.activite-intro-area {
	/* background-color: #f8f8f8; */
	position: relative;
	z-index: 1;
}

.activite-intro-text {
	margin-bottom: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--blackColor);
}

/* L'image d'en-tête (activite_header_image, jusqu'à 2 fichiers) : collage à
   masques SVG "blob" fournis par le client (voir _doc/images-masks/) — chaque
   image a sa propre silhouette organique (pas de rectangle), légère rotation
   opposée entre les deux, drop-shadow qui suit le contour réel du masque (pas
   de box-shadow rectangulaire). .about-img (thème) n'apporte que
   position:relative — les shapes17-23 (déjà dans le HTML) s'y positionnent
   toujours par rapport à ce même conteneur, inchangé. Masques en fichiers
   .svg externes (assets/img/masks/) plutôt qu'en Data URI base64 — le site
   n'est jamais servi en file://, donc pas de souci CORS ; fichiers plus
   lisibles à maintenir et mis en cache par le navigateur séparément du CSS. */
.activite-header-masks {
	width: 100%;
	max-width: 560px;
	aspect-ratio: 560 / 520;
}

.activite-header-masks .mask-img-large {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 78%;
	object-fit: cover;
	transform: rotate(-4deg);
	-webkit-mask-image: url("../../assets/img/masks/activite-header-mask-large.svg");
	mask-image: url("../../assets/img/masks/activite-header-mask-large.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18));
}

.activite-header-masks.single-image .mask-img-large {
	height: 100%;
	transform: rotate(-2deg);
}

.activite-header-masks .mask-img-small {
	position: absolute;
	bottom: 0;
	left: 6%;
	width: 58%;
	height: 46%;
	object-fit: cover;
	transform: rotate(3deg);
	-webkit-mask-image: url("../../assets/img/masks/activite-header-mask-small.svg");
	mask-image: url("../../assets/img/masks/activite-header-mask-small.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22));
}

@media (max-width: 991px) {
	.activite-intro-text {
		margin-bottom: 30px;
	}
}

/* Images dans le corps de la description (activite_content) : même principe
   que les présentations des artistes (artiste-box-images) — largeur pleine,
   coins arrondis, hauteur fixe (object-fit: cover) pour que plusieurs photos
   de tailles d'origine différentes s'affichent avec des dimensions
   uniformes au lieu de sauter d'une taille à l'autre (feedback client
   2026-09-09). */
.activite-content img {
	display: block;
	width: 100%;
	height: 380px;
	object-fit: cover;
	border-radius: 5px;
	margin: 20px 0;
}

/* Texte justifié — même traitement que .artiste-bio-magazine/.artiste-box-content,
   étendu à pedido du client (feedback 2026-09-09) aux descriptions d'activité,
   d'article, de produit et au "about" court de l'artiste. */
.activite-content,
.actu-content-text,
.product-description-text,
.artiste-about-text,
.products-details-tabs .tab-pane {
	text-align: justify;
}

/* ── Actus: carátula de producto al final del artículo a 356×356 ──────────── */
/* WordPress insertó al final de muchos artículos la carátula del disco como
   <img> sin atributos de tamaño, a su tamaño natural (480×480). El marcado
   varía (<p><a><img>, <figure><a><img>) y hay <p> vacíos detrás, así que se
   selecciona por el nombre de archivo (480x480 / 480X480 / 480-X-480). */
.actu-content-text img[src*="480x480" i],
.actu-content-text img[src*="480-x-480" i] {
	width: 356px;
	height: 356px;
	max-width: 100%;
	object-fit: cover;
}

/* ── Actus: bloc « Pour en savoir plus sur … » (artistes/produits en fin d'article) ─ */
.actu-boutique {
	margin-top: 40px;
	padding-top: 25px;
	border-top: 1px solid #eee;
}

.actu-boutique-item + .actu-boutique-item {
	margin-top: 30px;
}

.actu-boutique-title {
	margin-bottom: 20px;
}

.actu-boutique-item a {
	display: block;
	width: 356px;
	max-width: 100%;
}

.actu-boutique-item img {
	display: block;
	width: 356px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	border-radius: 5px;
}

/* ── RockForms: ocultar los campos honeypot (anti-spam) ───────────────────── */
/* Requerido por el propio módulo (ver notas del campo "Honeypot Fields" en
   Admin > Módulos > RockForms) — sin esto, el campo trampa es visible para
   usuarios reales, que lo rellenarían y quedarían bloqueados como si fueran
   spam. */
.rf-hny {
	display: none;
}

/* ── RockForms: campo visible también con foco ────────────────────────────── */
/* .contact-form form input/textarea (style.css:13468) define su propio fondo
   rojo oscuro (#c22b34) y placeholder (#cdcdcd) para esta tarjeta, pero no
   define un :focus propio — así que hereda el .form-control:focus genérico
   (style.css:418), que pone background-color:transparent y el placeholder en
   transparente. Pensado para formularios CON label visible (al estar dentro
   del campo ya no hace falta ver ni el fondo ni el placeholder). El
   formulario de /contact no usa <label> (solo placeholders dentro del
   campo), así que con foco el campo se vuelve transparente y se ve el fondo
   claro de la página detrás: queda "invisible"/blanquecino. Se restaura el
   mismo fondo y color de placeholder que tiene sin foco. */
.contact-form .form-control:focus {
	background-color: #c22b34 !important;
}

/* ── Actus: ícono de fecha pisando el texto en la lista ───────────────────── */
/* El tema espera DOS <li> en .post-content-footer (autor + fecha) y solo le
   da padding-left al segundo (29px) para dejarle lugar al ícono, que está
   posicionado absolute en left:7px — el primero (:first-child) se queda con
   7px, pensado para el avatar del autor, no para un ícono. Como /actus/ no
   tiene autor, el <li> de la fecha es el único (:first-child) y le queda
   sin espacio: el ícono termina superpuesto sobre el primer dígito. */
.single-blog-post-box .post-content .post-content-footer li:first-child:last-child {
	padding-left: 29px;
}

/* El tema fija el ícono con top:0 (pensado para alinear con la primera línea
   del bloque autor+fecha en dos filas); acá el <li> es de una sola línea de
   texto y top:0 lo deja pegado arriba, más alto que el texto. Se centra
   verticalmente en vez de anclarlo arriba. */
.single-blog-post-box .post-content .post-content-footer li i {
	top: 50%;
	transform: translateY(-50%);
}

.contact-form .form-control:focus::-moz-placeholder {
	color: #cdcdcd;
}

/* ── Recommandations (widget_popular_products, product.php) ──────────────── */
/* El tema pone el nombre del artiste (span) más grande (18px) y con
   margin-top negativo que el título del álbum (h4.title, 17px) — queda
   compitiendo visualmente con el título en vez de quedar como un
   subtítulo. El artiste va arriba del álbum (así ya está en el HTML), pero
   más chico, y con márgenes normales (sin negativos) arriba/abajo de cada
   uno. */
.widget-area .widget_popular_products .item .info span {
	font-size: 13px;
	font-weight: 700;
	font-style: normal; /* el tema lo pone en itálica (style.css) — a pedido, mismo look que .products-artiste de products.php */
	text-transform: none; /* el tema lo pone en mayúsculas (style.css) — mismo criterio que .products-artiste: ahora los títulos ya vienen en Title Case real */
	margin-top: 0;
	margin-bottom: 2px;
}

/* El span ya tiene color:mainColor (style.css), pero el <a> adentro no lo
   hereda — un <a> siempre toma su color DIRECTO (style.css: a{color:
   blackColor}) antes que el heredado del padre, así que el nombre del
   artiste se veía negro en vez de rojizo. */
.widget-area .widget_popular_products .item .info span a {
	color: inherit;
}

.widget-area .widget_popular_products .item .info .title {
	margin-top: 2px;
	margin-bottom: 4px;
}

.contact-form .form-control:focus::placeholder {
	color: #cdcdcd;
}

/* ── Recherche (typeahead de la navbar, site/templates/search.php) ────────── */
/* Mismo look que .dropdown-menu del tema (style.css:553-570): caja blanca,
   sombra, borde superior de color — pero por fuera de style.css porque el
   dropdown se abre/cierra por JS (visibility del :hover no aplica acá). */
.search-results-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99;
	width: 380px;
	max-width: calc(100vw - 40px);
	max-height: 420px;
	overflow-y: auto;
	margin-top: 9px;
	padding: 10px 0;
	border-radius: 3px;
	border-top: 3px solid var(--mainColor);
	background: var(--whiteColor);
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
}

/* Panneau mobile/tablette (.others-option-for-responsive, _main.php) : 320px
   de large — le dropdown doit suivre cette largeur au lieu des 380px fixes,
   sinon il déborde du panneau. */
.others-option-for-responsive .search-results-dropdown {
	width: 100%;
	max-width: 100%;
}

/* Le thème positionne le hamburger ("top: 0", style.css) et les trois points
   ("top: -26px") en supposant un logo plus petit que le nôtre (voir .logo-jut
   ci-dessus, 140px de large sur mobile) : chez nous ".elearniv-responsive-nav"
   est plus haute, et les deux tombaient bien au-dessus du centre du logo. On
   les descend tous les deux du même écart pour les aligner sur son centre. */
@media only screen and (max-width: 991px) {
	.elearniv-responsive-nav .mean-container a.meanmenu-reveal {
		top: 14px;
	}
	.others-option-for-responsive .dot-menu {
		top: -43px;
	}
}

/* Entre 992 et 1199px, le thème affiche le logo à 25% de large
   (responsive.css:6790) — avec notre logo (ratio ~2.44:1) la barre devient
   bien plus haute que ce que le thème suppose, et tout le reste (search-box
   clonée, panier, hamburger — voir style.css:1174-1181, 1227-1232, 1266-1273)
   reste positionné en haut de cette barre au lieu d'être centré sur le logo.
   On descend les trois du même écart pour les centrer sur le logo. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.elearniv-responsive-nav .elearniv-responsive-menu.mean-container .search-box {
		top: 10px;
	}
	.elearniv-responsive-nav .elearniv-responsive-menu.mean-container .others-option {
		top: 20px;
	}
	.elearniv-responsive-nav .mean-container a.meanmenu-reveal {
		top: 20px;
	}
}

.search-result-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 15px;
	color: var(--blackColor);
	transition: var(--transition);
}

.search-result-item:hover {
	background-color: #f5f5f5;
}

.search-result-item .thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 5px;
	background-size: cover;
	background-position: center center;
	background-color: #f5f5f5;
}

.search-result-item .thumb.thumb-placeholder {
	background-color: #f0f0f0;
}

.search-result-item .info {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.search-result-item .type {
	font-size: 11px;
	font-weight: 800;
	/* text-transform: uppercase; */
	color: var(--mainColor);
}

.search-result-item .title {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-result-item .excerpt {
	font-size: 12px;
	color: var(--optionalColor, #6b6b6b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-result-viewall {
	display: block;
	margin-top: 5px;
	padding: 10px 15px 0;
	border-top: 1px solid #eeeeee;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--mainColor);
}

.search-result-empty {
	padding: 15px;
	text-align: center;
	color: var(--optionalColor, #6b6b6b);
	font-size: 14px;
}

/* ── Boutique (products.php) ──────────────────────────────────────────────── */

/* Nombre del artiste arriba del título del producto, mismo criterio que
   Recommandations (product.php) pero SIN itálica — a pedido explícito. */
.single-products-box .products-content .products-artiste {
	display: block;
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	color: var(--mainColor);
	/* text-transform: uppercase; */
	margin-bottom: 4px;
}

.single-products-box .products-content .products-artiste a {
	color: inherit;
}

/* Même nom d'artiste, même taille/aspect, sur la carte "Boutique" de la home
   (_card-produit-courses.php, ".single-courses-item-box") — classe
   .products-artiste réutilisée telle quelle, juste re-scopée à
   .courses-content puisque cette carte n'a pas .products-content. */
.single-courses-item-box .courses-content .products-artiste {
	display: block;
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	color: var(--mainColor);
	margin-bottom: 4px;
}

.single-courses-item-box .courses-content .products-artiste a {
	color: inherit;
}

/* Mismo nombre de artiste, ahora en .page-title-content de product.php
   (arriba del <h1> con el título del producto). El título real (h1, ver
   _title-area.php) tiene margin-top:80px para separarlo de las migas de
   pan — con el artiste insertado ENTRE ambos, ese espacio quedaba
   empujando el título lejos del artiste, en vez de quedar los dos juntos.
   Se pasa ese margen al artiste (mismo espacio respecto a las migas de
   pan) y el h1 queda pegado al artiste (solo cuando lo precede — el
   selector `+` no afecta el h1 de páginas sin artiste). */
.page-title-content .products-artiste {
	display: block;
	margin-top: 80px;
	margin-bottom: 5px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	color: var(--mainColor);
	/* text-transform: uppercase; */
}

.page-title-content .products-artiste + h1 {
	margin-top: 0;
}

/* El tema (style.css) solo estiliza el título de página como <h2> — ahora es
   un <h1> real (un solo h1 por página, ver _title-area.php), así que se
   replica acá el mismo visual exacto que tenía como h2. */
.page-title-content h1 {
	text-align: center;
	max-width: 800px;
	margin-top: 80px;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	font-size: 36px;
	font-weight: 800;
}

.page-title-content .products-artiste a {
	color: inherit;
}

/* El tema hace fadeout del precio al pasar el mouse (style.css:11188), para
   dejarle el lugar a un botón .add-to-cart absolute-positioned que este
   proyecto no usa (acá el CTA es .default-btn, posicionado normal, no
   superpuesto) — sin ese swap, el precio simplemente desaparece y no lo
   reemplaza nada. Se mantiene siempre visible. */
.single-products-box:hover .products-content .price {
	opacity: 1;
	visibility: visible;
}

/* "Ajouter au panier"/"Voir le produit" del widget Recommandations eran
   links de texto plano, poco visibles al lado del resto de CTAs del sitio
   (siempre botones .default-btn) — se les da forma de botón chico. Selector
   sin ".item .info" (en vez de calzado a esa estructura puntual) para que
   sirva también en .crowdfunding-reward-card, que no usa .item/.info. */
.widget-area .widget_popular_products .reco-btn {
	display: inline-block;
	margin-top: 4px;
	padding: 4px 14px;
	border: none;
	border-radius: 3px;
	background-color: var(--mainColor);
	color: var(--whiteColor);
	font-size: 12px;
	font-weight: 700;
	/* text-transform: uppercase; */
	transition: var(--transition);
}

.widget-area .widget_popular_products .reco-btn:hover {
	background-color: var(--blackColor);
	color: var(--whiteColor);
}

/* Contreparties (cf_rewards) d'un produit Crowdfunding, dans la colonne
   étroite à côté de l'image principale (voir product.php /
   _crowdfunding-rewards-aside.php) — image pleine largeur, texte de
   description dessous, puis prix et bouton (feedback client 2026-09-19).
   PAS le gabarit .item/.thumb/.info (vignette flottante à gauche) : ce
   dernier ne convient pas à une image pleine largeur. */
.crowdfunding-reward-card {
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid #eeeeee;
}

.crowdfunding-reward-card:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.crowdfunding-reward-card img {
	width: 100%;
	border-radius: 3px;
	margin-bottom: 12px;
}

.crowdfunding-reward-card .title {
	margin-bottom: 6px;
	line-height: 1.4;
	font-size: 17px;
	font-weight: 700;
}

.crowdfunding-reward-description {
	margin-bottom: 8px;
}

/* Nom de l'artiste sous les tags d'un produit Crowdfunding (voir
   product.php) — même couleur/poids que .products-artiste (page-title-content),
   juste re-scopé ici (celui-là est display:block/centré, pas adapté à cette
   rangée avec les icônes sociales à droite). */
.crowdfunding-artiste-link {
	font-size: 16px;
	font-weight: 700;
}

/* Prix + bouton sur la même ligne (au lieu d'empilés) pour prendre moins de
   place verticale — feedback client 2026-09-19. */
.crowdfunding-reward-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.crowdfunding-reward-footer .reco-btn {
	margin-top: 0;
}

/* Campagne terminée / pas encore commencée : les contreparties restent
   visibles mais le bouton est désactivé (voir _crowdfunding-rewards-aside.php). */
.widget-area .widget_popular_products .reco-btn:disabled,
.widget-area .widget_popular_products .reco-btn[aria-disabled="true"] {
	background-color: #b5b5b5;
	color: var(--whiteColor);
	cursor: not-allowed;
	opacity: 0.8;
}

/* ── Feedback cliente 2026-09-08 ("Site JuT / Status") ────────────────────── */

/* Links dentro de texto libre (bios, descripciones, artículos, créditos):
   el <a> global del tema (style.css) es negro sin subrayado — pensado para
   nav/botones, pero dentro de un párrafo de texto corrido lo vuelve
   invisible/imposible de detectar como clickeable. Se resalta solo en las
   zonas de texto libre (CKEditor), sin tocar links de nav/tarjetas/botones. */
/* Excepción: los tags (.badge.bg-secondary, en artiste.php/product.php/
   tags-index.php) que aparecen mezclados en estas mismas zonas de texto
   libre son botones chicos, no texto corrido — la regla de arriba les pone
   letra roja sobre fondo gris (bg-secondary), casi ilegible. Vuelven a su
   estilo de badge normal (texto blanco, sin subrayado), con un :hover que
   antes no tenían (son <a>, así que conviene una señal visual al pasar el
   mouse) pasando el fondo gris a rojizo (mainColor). Selector global
   a.badge.bg-secondary en vez de repetir por cada zona: los 3 templates que
   usan este badge son siempre listados de tags. */
a.badge.bg-secondary {
	color: var(--whiteColor);
	text-decoration: none;
	transition: var(--transition);
}

a.badge.bg-secondary:hover {
	background-color: var(--mainColor) !important;
	color: var(--whiteColor);
}

/* Misma excepción: botones (.default-btn, ej. "Site de l'artiste" en
   artiste.php) dentro de estas zonas de texto libre — sin esto quedaban con
   el texto rojo subrayado de la regla de arriba sobre su propio fondo
   rojizo, ilegibles. Vuelven al texto blanco del tema. */
.products-details-desc a.default-btn,
.article-content a.default-btn,
.artiste-bio-magazine a.default-btn,
.artiste-box-content a.default-btn {
	color: var(--whiteColor);
	text-decoration: none;
}

/* Boutique: separación entre el precio y el botón "Acheter" en las
   tarjetas de producto — el tema no deja margen debajo de .price cuando el
   botón siguiente no es el .add-to-cart absolute-positioned que trae de
   fábrica (ver regla más arriba que lo mantiene siempre visible). */
.single-products-box .products-content .price {
	margin-bottom: 10px;
}

/* Página de concierto: separa los botones de tipo .default-btn del título
   inmediatamente anterior (el tema no deja margen propio ahí). */
.concert-content .default-btn,
.concert-widget-content .default-btn {
	margin-top: 10px;
}

/* Actus: separa el bloque fecha/artiste(s) del inicio del artículo — el
   tema deja margin-bottom:0 en .entry-meta ul, pensado para cuando el tema
   original agregaba su propio espaciado por otro lado que este proyecto no
   usa igual. */
.blog-details-desc .article-content .entry-meta {
	margin-bottom: 20px;
}

/* Artistes/Tags/Búsqueda: tarjetas de artiste de altura pareja aun con
   textos de largo distinto — se estira la tarjeta a la altura de la fila
   (flexbox) y se recorta la descripción a 2 líneas siempre, en vez de
   dejar que el botón "quede flotando" a distinta altura según el texto. */
.shorting .row,
.products-area .row.justify-content-center {
	display: flex;
	flex-wrap: wrap;
}

.shorting .row > [class*="col-"],
.products-area .row.justify-content-center > [class*="col-"] {
	display: flex;
}

/* .features-box (activites.php) n'a pas de width:100% propre comme
   .single-products-box (elle n'en a jamais eu besoin, utilisée seulement
   dans .features-area, jamais flex) — sans ça, en enfant flex ici, elle
   se réduit à la largeur de son contenu au lieu de remplir sa colonne. */
.products-area .features-box {
	width: 100%;
}

.single-products-box {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.single-products-box .products-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.single-products-box .products-content p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex-grow: 1;
}

.single-products-box .products-content .default-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* Actu (detalle): separa el widget "Recommandations" del widget "Derniers
   articles" justo arriba — dos <aside class="widget-area"> seguidas sin
   margen propio entre ellas (cada .widget-area solo tiene margen respecto
   al bloque anterior si el tema lo define, que no es el caso acá). */
.col-lg-4 .widget-area + .widget-area {
	margin-top: 40px;
}

/* Actu (detalle): mismo tamaño de miniatura en "Derniers articles" que en
   "Recommandations" (110x110, ver .widget_popular_products .item .thumb en
   style.css) — el tema deja "Derniers articles" en 80x80, y con las dos
   listas una debajo de otra la diferencia de tamaño se nota. */
.widget-area .widget_elearniv_posts_thumb .item .thumb,
.widget-area .widget_elearniv_posts_thumb .item .thumb .fullimage {
	width: 110px;
	height: 110px;
}

/* Listado de conciertos (activite_concerts.php): el botón "En savoir plus"
   sigue directo al h3 sin ningún párrafo de descripción en el medio (a
   diferencia de products.php/artistes.php) — el tema deja margin-bottom:0
   en ese h3, así que el botón queda pegado al título. */
.single-products-box .products-content h3 + .default-btn {
	margin-top: 15px;
}

/* Widget Google Website Translator (footer, voir _foot.php) : le style par
   défaut de Google dénote fortement avec le thème — bouton natif du
   navigateur, gros texte "Powered by". Simplifié pour s'aligner sur le
   footer (fond sombre #100f1f, voir .footer-area) — pas de reset agressif
   du CSS interne de l'iframe (pas possible, cross-origin), juste le
   conteneur extérieur. Le bandeau de traduction que Google insère en haut
   de la page (iframe qui pousse tout le contenu vers le bas) est neutralisé
   par la règle body classique documentée par Google lui-même pour ce
   widget. */
.google-translate-widget {
	display: flex;
	align-items: center;
}

.google-translate-widget .goog-te-gadget-simple {
	font-family: inherit !important;
	font-size: 13px !important;
	padding: 6px 10px;
	border-radius: 5px;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	background-color: transparent !important;
}

/* La police de langue "Seleccionar idioma" et la flèche ▼ sont des <span>
   avec une couleur en style inline (posée par le JS de Google) — un
   sélecteur normal ne peut pas la vaincre, il faut !important. */
.google-translate-widget .goog-te-gadget-simple a,
.google-translate-widget .goog-te-gadget-simple a span,
.google-translate-widget .goog-te-gadget-simple a span[style] {
	font-family: inherit !important;
	color: var(--whiteColor) !important;
}


/* Posicionar el widget flotando a la derecha */
#google_translate_element {
    position: fixed;
    bottom: 20px;       /* Distancia desde el borde inferior */
    right: 20px;         /* Distancia desde el borde izquierdo */
    z-index: 99999;     /* Asegura que quede por encima de todo el diseño */
    background: #000;   /* Fondo blanco para que no se transparente */
    padding: 5px;       /* Espacio interno */
    border-radius: 4px; /* Bordes ligeramente redondeados */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Sombra suave para darle relieve */
}

/* Opcional: Si quieres ocultar la barra superior que añade Google tras traducir */
.skiptranslate iframe {
    display: none !important;
}

body {
	top: 0 !important;
}

.goog-te-banner-frame {
	display: none !important;
}

/* Carte produit (.single-products-box) : le thème met 13px de margin-top
   sur .price par défaut — avec le type de produit juste au-dessus, ça
   laissait trop d'air entre les deux (feedback client, doivent être
   presque collés). */
.single-products-box .products-content .price {
	margin-top: 2px;
}

/* Bouton "Digital" (streaming_url) sur la fiche produit : lien vers le
   service de streaming/écoute (ex. orcd.co), repris tel quel du bouton
   "DIGITAL" du site WP d'origine (feedback client, capture d'écran) —
   fond sombre, coins arrondis, icône haut-parleur à droite. */
/* Spécificité .products-details-desc a.streaming-btn nécessaire pour
   gagner contre la règle générale .products-details-desc a (texte libre,
   soulignage rouge) plus haut dans ce fichier. */
.products-details-desc a.streaming-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	padding: 10px 20px;
	border-radius: 30px;
	background-color: var(--blackColor);
	color: var(--whiteColor);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: var(--transition);
}

.products-details-desc a.streaming-btn:hover {
	background-color: var(--mainColor);
	color: var(--whiteColor);
}

.streaming-btn i {
	font-size: 18px;
}

/* Sélection de variation (taille) sur la fiche produit — RockCommerce
   applique/retire la classe .rc-active en JS (RcVariationOption.js) au clic,
   le style est à notre charge. Même spécificité que .products-details-desc a
   plus haut pour gagner contre le soulignage rouge du texte libre. */
.products-details-desc a.rc-variation-option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 8px 14px;
	border: 1px solid #ddd;
	border-radius: 5px;
	color: var(--blackColor);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: var(--transition);
}

.products-details-desc a.rc-variation-option:hover {
	border-color: var(--mainColor);
}

.products-details-desc a.rc-variation-option.rc-active {
	background-color: var(--mainColor);
	border-color: var(--mainColor);
	color: var(--whiteColor);
}

/**
 * Carte produit "coups de cœur" (_card-produit-courses.php, bloc home) —
 * le badge de prix du thème (24px) déborde du cercle de 65px avec un prix
 * en euros ("25,83 €" est bien plus large que l'exemple "$39" du thème).
 */
.single-courses-item-box .courses-image .price {
	font-size: 14px;
	letter-spacing: -0.3px;
}

/* Mobile : le thème réduit le badge à 50px (responsive.css) — un prix comme
   "40,80 €" y est à l'étroit, sans marge. Cercle plus grand, texte centré en
   flex (plus de line-height calé à la main), moitié sous l'image comme avant. */
@media only screen and (max-width: 767px) {
	.single-courses-item-box .courses-image .price {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 66px;
		height: 66px;
		bottom: -33px;
		line-height: 1;
		font-size: 14px;
		white-space: nowrap;
	}
}

/* Badge de type de produit (CD/Vinyle/T-Shirt/Streaming…) — même position
   que le badge ".fav" (cœur de favoris) du thème d'origine, jamais utilisé
   ici, réutilisé pour un pictogramme de type au lieu d'un cœur. */
.single-courses-item-box .courses-image .product-type-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--whiteColor);
	color: var(--mainColor);
	font-size: 24px;
	z-index: 2;
}

.single-courses-item-box .courses-image .product-type-badge i {
	line-height: 1;
}

/**
 * Liste de points forts du bloc "Coups de cœur" (home) — contenu venant du
 * repeater home_featured_items. 2 colonnes via CSS column-count plutôt que 2
 * <ul> fixes : le nombre d'items est libre (le client ajoute/retire des
 * lignes dans le repeater), pas de logique de répartition à maintenir.
 */
.home-featured-highlights {
	list-style: none;
	margin: 20px auto 0;
	padding: 0;
	columns: 2;
	column-gap: 30px;
	text-align: left;
	width: fit-content;
	max-width: 100%;
}

.home-featured-highlights li {
	break-inside: avoid;
	margin-bottom: 10px;
	color: var(--paragraphColor);
}

.home-featured-highlights li i {
	color: var(--mainColor);
	margin-right: 6px;
	vertical-align: -2px;
}

/* ── Badge "Épuisé" (rupture de stock) / statut de campagne crowdfunding ──
   Réutilisé sur 3 gabarits différents (.products-image des cartes listing,
   .courses-image de la carte "Boutique"/Crowdfunding, .products-details-image
   de la fiche produit) — auto-suffisant plutôt qu'un simple modificateur de
   .new-tag/.sale-tag (déjà utilisées par le thème mais scopées uniquement à
   ".single-products-box .products-image", donc inapplicables ailleurs).
   .campaign-status-tag (fiche produit crowdfunding — "Campagne terminée" /
   "Bientôt") partage exactement le même style, juste un nom distinct pour
   ne pas prêter à confusion dans le markup (product.php). */
.soldout-tag,
.campaign-status-tag {
	position: absolute;
	left: 20px;
	top: 20px;
	background-color: #1e1d2f;
	color: var(--whiteColor);
	text-align: center;
	z-index: 2;
	padding: 4px 12px;
	border-radius: 3px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 13px;
}

/* .products-details-image (fiche produit) n'a pas de position:relative
   d'origine (contrairement à .products-image/.courses-image des cartes,
   déjà positionnées par le thème) — nécessaire pour ancrer .soldout-tag. */
.products-details-image {
	position: relative;
	display: inline-block;
}

/* Vidéo (premier bloc de cf_boxes) en lieu et place de l'image principale
   d'une campagne Crowdfunding (product.php) — .products-details-image est
   inline-block (shrink-to-fit autour d'un <img>), incompatible avec un enfant
   .ratio qui a besoin de width:100% pour fonctionner (sinon largeur 0). */
.products-details-image--video {
	display: block;
	width: 100%;
}

/* Bouton "Ajouter au panier"/"Épuisé" désactivé — grisé et non cliquable
   (le lien garde href="javascript:void(0)" sans handler @click, ceinture et
   bretelles avec pointer-events pour le cas où quelqu'un cliquerait pareil). */
.default-btn.disabled {
	background-color: #9a9a9a;
	pointer-events: none;
	cursor: not-allowed;
}

/* ── Stats compactes de campagne dans les cards (_campaign-card-stats.php) ──
   "Financé à X% / objectif / récolté / jours restants", affiché entre le
   titre et le bouton d'une card Crowdfunding (_card-produit.php,
   _card-produit-courses.php) — demande client 2026-09-19. */
.campaign-card-stats {
	margin: 10px 0;
}
.campaign-card-percent {
	margin-bottom: 6px;
	font-size: 14px;
}
.campaign-card-percent strong {
	color: var(--mainColor);
}
.campaign-card-progress {
	height: 6px;
	margin-bottom: 10px;
}
.campaign-card-figures {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	text-align: center;
}
.campaign-card-figures > div {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.campaign-card-figures strong {
	font-size: 14px;
	white-space: nowrap;
}
.campaign-card-figures span {
	font-size: 11px;
	color: var(--paraColor);
	line-height: 1.2;
}

/* Espace image/texte réduit UNIQUEMENT sur les cards Crowdfunding (le bloc
   de stats ci-dessus rend le grand espace par défaut du thème superflu) —
   modificateur --crowdfunding ajouté par les 2 partials de card, pour ne
   pas changer l'espacement des autres types de produit. */
.single-products-box--crowdfunding .products-content {
	margin-top: 10px;
}
.single-courses-item-box--crowdfunding .courses-content {
	padding-top: 20px;
}

/**
 * Slider home (.home-slider, repeater home_slider_items) — le style
 * d'origine de ".article-image-slides" (style.css) est scopé à
 * ".blog-details-desc", donc inutilisable ici tel quel ; on reprend juste
 * l'init JS (main.js cible ".article-image-slides" sans scope) avec un
 * style propre. Dans son .container (même largeur que le reste de la
 * page, pas plein écran). aspect-ratio calé sur les vraies dimensions
 * des images du slider (2000×833) — jamais de recadrage ni de bande
 * vide, contrairement à un object-fit:contain dans une hauteur fixe.
 */
.home-slider {
	position: relative;
	margin: 40px 0;
}

.home-slider .article-image {
	position: relative;
	aspect-ratio: 2000 / 833;
	background-color: var(--blackColor);
}

.home-slider .article-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.home-slider .article-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Flèches < > à l'intérieur du slider, sur les côtés — repris de la règle
   d'origine du thème (.blog-details-desc .article-image-slides.owl-theme
   .owl-nav dans style.css), re-scopé à .home-slider (position absolute au
   lieu du bloc sous le carousel par défaut d'owl.theme.default.css). */
.home-slider.owl-theme .owl-nav {
	margin-top: 0;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
}

.home-slider.owl-theme .owl-nav [class*="owl-"] {
	color: #87a1c1;
	font-size: 18px;
	margin: 0;
	padding: 0;
	background: var(--whiteColor);
	width: 45px;
	height: 45px;
	line-height: 40px;
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	padding-left: 5px !important;
	border-radius: 50%;
	border-style: solid;
	border-color: var(--whiteColor);
	border-width: 1.5px;
	transition: var(--transition);
}

.home-slider.owl-theme .owl-nav [class*="owl-"].owl-next {
	left: auto;
	right: 20px;
	padding-left: 3px !important;
}

.home-slider.owl-theme .owl-nav [class*="owl-"]:hover {
	background-color: var(--mainColor);
	color: var(--whiteColor);
	border-color: var(--mainColor);
}

.home-slider.owl-theme:hover .owl-nav {
	opacity: 1;
	visibility: visible;
}

/* Links en texto libre y páginas institucionales: rojos sin subrayado; al
   :hover pasan a negro con subrayado, animados (el subrayado existe siempre
   pero transparente). Se excluyen botones y badges. */
.equipe-area a:not(.default-btn):not(.btn):not(.badge),
.contact-area a:not(.default-btn):not(.btn):not(.badge),
.basic-page-area a:not(.default-btn):not(.btn):not(.badge),
.page-timeline-text a:not(.default-btn):not(.btn):not(.badge),
.products-details-desc a:not(.default-btn):not(.btn):not(.badge),
.article-content a:not(.default-btn):not(.btn):not(.badge),
.article-footer a:not(.default-btn):not(.btn):not(.badge),
.artiste-bio-magazine a:not(.default-btn):not(.btn):not(.badge),
.artiste-box-content a:not(.default-btn):not(.btn):not(.badge),
.activite-content a:not(.default-btn):not(.btn):not(.badge),
.concert-content a:not(.default-btn):not(.btn):not(.badge),
.concert-widget-content a:not(.default-btn):not(.btn):not(.badge),
.products-details-tabs a:not(.default-btn):not(.btn):not(.badge),
.product-description-text a:not(.default-btn):not(.btn):not(.badge),
.crowdfunding-reward-description a:not(.default-btn):not(.btn):not(.badge),
a.crowdfunding-artiste-link {
	color: var(--mainColor);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: color .3s ease, text-decoration-color .3s ease;
}

.equipe-area a:not(.default-btn):not(.btn):not(.badge):hover,
.contact-area a:not(.default-btn):not(.btn):not(.badge):hover,
.basic-page-area a:not(.default-btn):not(.btn):not(.badge):hover,
.page-timeline-text a:not(.default-btn):not(.btn):not(.badge):hover,
.products-details-desc a:not(.default-btn):not(.btn):not(.badge):hover,
.article-content a:not(.default-btn):not(.btn):not(.badge):hover,
.article-footer a:not(.default-btn):not(.btn):not(.badge):hover,
.artiste-bio-magazine a:not(.default-btn):not(.btn):not(.badge):hover,
.artiste-box-content a:not(.default-btn):not(.btn):not(.badge):hover,
.activite-content a:not(.default-btn):not(.btn):not(.badge):hover,
.concert-content a:not(.default-btn):not(.btn):not(.badge):hover,
.concert-widget-content a:not(.default-btn):not(.btn):not(.badge):hover,
.products-details-tabs a:not(.default-btn):not(.btn):not(.badge):hover,
.product-description-text a:not(.default-btn):not(.btn):not(.badge):hover,
.crowdfunding-reward-description a:not(.default-btn):not(.btn):not(.badge):hover,
a.crowdfunding-artiste-link:hover {
	color: var(--blackColor);
	text-decoration-color: var(--blackColor);
}

/* Íconos de redes de la página artiste: siempre blancos (la regla común de
   links en texto libre no debe pisarlos). */
.artiste-social-link li a:not(.default-btn):not(.btn):not(.badge),
.artiste-social-link li a:not(.default-btn):not(.btn):not(.badge):hover {
	color: var(--whiteColor);
	text-decoration: none;
}

/* ── Vidéo principale d'une campagne Crowdfunding (_campaign-video-link.php) ──
   Vignette + bouton lecture, la vidéo s'ouvre en modale (.popup-youtube).
   .card-video-btn repris de AMOC (amoc.css). Sur les cartes, la miniature
   16:9 est recadrée au même ratio que les images de campagne (400x240). */
.cf-video-link {
	position: relative;
}
.cf-video-link--card img {
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
}
.card-video-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--mainColor);
	color: var(--whiteColor);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

/* Bloc "Pour suivre le projet" (réseaux de l'artiste puis logo + réseaux de
   Juste Une Trace) sous la description d'une campagne (product.php). */
.crowdfunding-follow-title {
	margin-bottom: 6px;
	line-height: 1.4;
	font-size: 17px;
	font-weight: 700;
}
.crowdfunding-follow-logo .logo-jut {
	width: 110px;
}

/* Campagnes de crowdfunding en cours sur la fiche artiste (artiste.php) : boîte
   grise au-dessus de la discographie, même gris que .page-title-area. */
.artiste-crowdfunding-box {
	background-color: #f8f9f8;
	border-radius: 6px;
	padding: 30px 20px 0;
}

/* Façade YouTube (voir jut.js) : miniature haute résolution + bouton play,
   l'iframe réel n'est chargé qu'au clic. */
.yt-facade,
.yt-facade-player {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	margin: 0 auto;
	border: 0;
}

.yt-facade {
	position: relative;
	padding: 0;
	cursor: pointer;
	background: #000 center / cover no-repeat;
	border-radius: 4px;
	overflow: hidden;
}

.yt-facade::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.15);
	transition: background-color 0.2s;
}

.yt-facade::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--mainColor, #e62117)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E")
		center / 60% no-repeat;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s;
}

.yt-facade:hover::before,
.yt-facade:focus-visible::before {
	background: rgba(0, 0, 0, 0);
}

.yt-facade:hover::after,
.yt-facade:focus-visible::after {
	transform: translate(-50%, -50%) scale(1.1);
}

/* Dans un wrapper Bootstrap .ratio (vidéo principale d'une campagne, product.php)
   le ratio est déjà réservé par .ratio::before et l'enfant doit rester en
   position:absolute — sans ça la hauteur se double et un grand vide apparaît. */
.ratio > .yt-facade,
.ratio > .yt-facade-player {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

@media (min-width: 768px) {
	.artiste-bio-magazine .yt-facade,
	.artiste-bio-magazine .yt-facade-player {
		column-span: all;
	}
}