/**
 * 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;
}

/* ── 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;
	}

	.artiste-box-images.order-lg-2 + .artiste-box-content {
		padding-left: 0;
		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;
}

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

/* 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;
}

/* ── 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);
}

.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;
}

/* 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. */
.widget-area .widget_popular_products .item .info .reco-btn {
	display: inline-block;
	margin-top: 4px;
	padding: 4px 14px;
	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 .item .info .reco-btn:hover {
	background-color: var(--blackColor);
	color: var(--whiteColor);
}

/* ── 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. */
.products-details-desc a,
.article-content a,
.article-footer a:not(.badge),
.artiste-bio-magazine a,
.artiste-box-content a,
.activite-content a,
.concert-content a,
.concert-widget-content a,
.products-details-tabs a {
	color: var(--mainColor);
	text-decoration: underline;
}

.products-details-desc a:hover,
.article-content a:hover,
.article-footer a:not(.badge):hover,
.artiste-bio-magazine a:hover,
.artiste-box-content a:hover,
.activite-content a:hover,
.concert-content a:hover,
.concert-widget-content a:hover,
.products-details-tabs a:hover {
	color: var(--blackColor);
}

/* 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;
}

.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);
}