/* Vignette produit à titre en texte (#2583).
 * Toutes les cotes sont en cqw (1 cqw = 1 % de la largeur de la vignette), mesurées sur les
 * images d'origine de 2083 px (outils/mesurer_bandeau.py) : le bandeau se superpose à l'ancien
 * à toute taille d'affichage. Police : Nimbus Sans Bold (clone libre d'Helvetica Bold, URW),
 * auto-hébergée. line-height: 1 → ligne de base à 0,729 em du haut de la ligne (hhea Nimbus). */
@font-face {
	font-family: "MTVP Vignette";
	src: url("nimbus-sans-bold.woff2") format("woff2");
	font-weight: 700;
	font-display: block;
}
.mtvp-vignette {
	container-type: inline-size;
	display: inline-block; /* bloc atomique : le soulignement du lien parent ne descend pas jusqu'au titre */
	vertical-align: top;
	width: 100%;
	background: #fff;
	overflow: hidden;
}
.mtvp-vignette__bandeau {
	display: flow-root; /* la marge basse négative du titre ne traverse pas le bandeau (pas de fusion des marges) */
	position: relative;
	box-sizing: border-box;
	/* le titre occupe 0 → 65,9 cqw, le logo commence à 67,98 cqw ; les séries au titre plus large ou au logo
	 * placé ailleurs (rayons) règlent --mtvp-pl / --mtvp-pr / --mtvp-lx / --mtvp-ly */
	padding: 0 var(--mtvp-pr, 34.1cqw) 0 var(--mtvp-pl, 0cqw);
	/* hauteur de l'ancien bandeau (photo_y / 2083) : fixée, car les hauteurs de ligne arrondies au pixel par le
	 * navigateur la faisaient grandir de 2 à 3 px aux petites tailles ; une traduction qui passe à la ligne l'agrandit */
	min-height: var(--mtvp-hb, 22cqw);
	z-index: 1; /* un jambage (p, g) de la dernière ligne passe devant la photo au lieu d'être coupé */
}
.mtvp-vignette__titre {
	display: block;
	margin: 0;
	/* le bloc du titre s'arrête 1 cqw avant le bas du bandeau (jambages compris, ils débordent sur la photo) */
	margin-bottom: calc(var(--mtvp-bas, 1.683cqw) - 0.271 * var(--mtvp-t2, 10.898cqw) - 1cqw);
	text-align: center;
	font-family: "MTVP Vignette", "Nimbus Sans", Helvetica, Arial, sans-serif;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .004em;
	/* traduction plus longue : passage à la ligne entre les mots, puis césure par syllabes (lang= posé par l'extension) */
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
	user-select: text;
	text-decoration: none !important;
}
.mtvp-vignette__l1,
.mtvp-vignette__l2 { display: block; }
.mtvp-vignette__l2:empty { display: none; } /* titre d'une seule ligne (rayons) : --mtvp-t2 = --mtvp-t1 */
.mtvp-vignette__l1 {
	color: #f29200;
	letter-spacing: var(--mtvp-ls1, .004em);
	position: relative;
	left: var(--mtvp-dx1, 0cqw); /* recentrage d'une ligne que l'image d'origine n'a pas centrée exactement */
	font-size: var(--mtvp-t1, 9.026cqw);
	padding-top: var(--mtvp-h1, 2.541cqw);
}
.mtvp-vignette__l2 {
	color: #ea4e1b;
	letter-spacing: var(--mtvp-ls2, .004em);
	position: relative;
	left: var(--mtvp-dx2, 0cqw);
	font-size: var(--mtvp-t2, 10.898cqw);
	margin-top: var(--mtvp-e2, 0.747cqw);
}
/* !important : les feuilles de WooCommerce et des blocs imposent aux images des listes width:100 %, marges,
 * aspect-ratio et object-fit (rognage carré) ; le logo et la photo gardent ici leurs cotes mesurées. */
.mtvp-vignette img.mtvp-vignette__logo {
	position: absolute !important;
	left: var(--mtvp-lx, 67.98cqw) !important;
	top: var(--mtvp-ly, 3.36cqw) !important;
	width: 29.14cqw !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	pointer-events: none;
}
.mtvp-vignette img.mtvp-vignette__photo {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important; /* la photo commence au bas du bandeau, dont la hauteur est celle de l'ancien */
	position: relative;
	object-fit: fill !important; /* proportions de la photo : celles des attributs width/height (pas d'aspect-ratio imposé) */
}
.mtvp-vignette-galerie { overflow: hidden; }
