/* Boutemont — Bandeau labels & partenaires */

.bmt-labels {
	font-family: 'Jost', system-ui, sans-serif;
	color: #16181A;
	box-sizing: border-box;
}

.bmt-labels * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ En-tête */

.bmt-labels__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	margin-bottom: 40px;
}

.bmt-labels--left .bmt-labels__head {
	align-items: flex-start;
	text-align: left;
}

.bmt-labels__kicker {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #A8823C;
}

.bmt-labels__title {
	margin: 0;
	font-family: 'Bodoni Moda', Georgia, serif;
	font-weight: 500;
	font-size: 34px;
	line-height: 1.15;
	color: #0A2E1C;
}

/* --------------------------------------------------------------- Note avis */

.bmt-labels__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-bottom: 32px;
}

.bmt-labels--left .bmt-labels__rating {
	justify-content: flex-start;
}

.bmt-labels__rating-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.bmt-labels__stars {
	display: inline-flex;
	gap: 2px;
	font-size: 17px;
	line-height: 1;
	color: #C9A15A;
}

.bmt-labels__star {
	position: relative;
	display: inline-block;
	color: rgba(201, 161, 90, 0.3);
}

.bmt-labels__star-fill {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	color: #C9A15A;
	white-space: nowrap;
}

.bmt-labels__score {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	font-family: 'Bodoni Moda', Georgia, serif;
	font-size: 22px;
	line-height: 1;
	color: #0A2E1C;
}

.bmt-labels__score small {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 13px;
	opacity: 0.65;
}

.bmt-labels__rating-text {
	font-size: 15px;
	color: #474C48;
}

.bmt-labels__sep {
	width: 1px;
	height: 18px;
	background: rgba(22, 24, 26, 0.2);
	flex: none;
}

/* --------------------------------------------------- Intitulé de catégorie */

.bmt-labels__group-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 18px;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #8FA888;
	text-align: center;
}

.bmt-labels--left .bmt-labels__group-title {
	justify-content: flex-start;
	text-align: left;
}

.bmt-labels__group-title::before,
.bmt-labels__group-title::after {
	content: '';
	width: 42px;
	height: 1px;
	background: currentColor;
	opacity: 0.32;
}

.bmt-labels--left .bmt-labels__group-title::before {
	display: none;
}

.bmt-labels__frame + .bmt-labels__group-title {
	margin-top: 44px;
}

/* ------------------------------------------------- Grille de logos calibrée
   Chaque logo vit dans une boîte de même hauteur ; l'échelle optique
   se règle logo par logo, sans changer la grille. */

/* ------------------------------------------------------------ Les filets

   Aucun calcul, aucun JS, aucune connaissance du nombre de colonnes.
   Le principe : chaque logo porte SYSTÉMATIQUEMENT un filet à gauche et
   un filet en haut. La grille est ensuite décalée de 1px vers la gauche
   et vers le haut à l'intérieur d'un conteneur qui rogne ce qui dépasse.
   Résultat : les filets de la première colonne et de la première rangée
   sortent du cadre et disparaissent d'eux-mêmes, tous les autres
   restent. Ça fonctionne à 2, 3, 5 ou 8 colonnes, à n'importe quelle
   largeur d'écran, sans jamais rien recalculer. */

.bmt-labels__gridwrap {
	overflow: hidden;
}

.bmt-labels__grid {
	display: grid;
	grid-template-columns: repeat(var(--bmt-cols, 4), 1fr);
	align-items: center;
	column-gap: 0;
	row-gap: 0;
	margin-top: -1px;
	margin-left: -1px;
}

/* Filet vertical, hauteur réglable (il ne touche pas les bords). */
.bmt-labels__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: var(--bmt-divider-h, 54%);
	background: var(--bmt-divider, transparent);
}

/* Filet horizontal, sur toute la largeur de la case : les segments se
   rejoignent bout à bout et forment une ligne continue. */
.bmt-labels__item::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--bmt-divider, transparent);
}

.bmt-labels__item {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Hauteur strictement identique : un calibrage individuel ne doit
	   jamais agrandir sa rangée et recréer un affichage en briques. */
	height: var(--bmt-box, calc(var(--bmt-logo, 64px) * 1.9));
	min-height: 0;
	padding: 0 var(--bmt-pad, 28px);
	text-decoration: none;
	position: relative;
	transition: opacity 0.25s ease;
}

/* La scène garde une taille fixe. L'image peut changer de dimensions
   d'un écran à l'autre sans jamais influencer la grille. */
.bmt-labels__logo-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

/* Une seule entrée dans le groupe (ex. un partenaire isolé) : elle se
   pose à sa taille naturelle, alignée comme le reste, jamais étirée ni
   perdue seule au milieu d'une grille vide. */
.bmt-labels__grid--single {
	display: flex;
	justify-content: center;
	margin: 0;
}

/* Un logo seul n'a pas de voisin : aucun filet n'a de sens. */
.bmt-labels__grid--single .bmt-labels__item::before,
.bmt-labels__grid--single .bmt-labels__item::after {
	display: none;
}

.bmt-labels--left .bmt-labels__grid--single {
	justify-content: flex-start;
}

.bmt-labels__grid--single .bmt-labels__item {
	width: auto;
	max-width: 100%;
	height: var(--bmt-box, calc(var(--bmt-logo, 64px) * 1.9));
	overflow: visible;
	flex: none;
}

.bmt-labels__grid--single .bmt-labels__logo {
	height: calc(var(--bmt-logo, 64px) * var(--bmt-scale, 1) / var(--bmt-ink, 1));
	max-width: 100%;
	width: auto;
}

a.bmt-labels__item:hover {
	opacity: 0.68;
}

/* La boîte optique : la hauteur du logo est identique pour tous,
   l'échelle par logo compense les proportions du fichier.
   L'échelle agit sur la hauteur réelle (et non en transform) : ainsi le
   logo occupe vraiment la place qu'il occupe à l'écran, ne peut jamais
   déborder sur ses voisins, et la hauteur commune reste le pilote. */
.bmt-labels__logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	/* Division par --bmt-ink : c'est la part du fichier réellement
	   occupée par le dessin, mesurée au chargement. Un logo noyé dans du
	   vide est agrandi d'autant, si bien que « 100 % » signifie toujours
	   la même chose à l'œil — le dessin visible atteint la hauteur
	   commune — quel que soit le détourage du fichier fourni. */
	height: calc(var(--bmt-logo, 64px) * var(--bmt-scale, 1) / var(--bmt-ink, 1));
	object-fit: contain;
	transform: translateY(var(--bmt-nudge, 0));
}

/* Calibrage manuel : la hauteur réelle de l'image est recalculée. On
   n'utilise plus transform:scale(), qui pouvait rendre les traits mous.
   La scène fixe empêche cette hauteur de modifier celle de la rangée. */
.bmt-labels__item--manual .bmt-labels__logo {
	width: auto;
	height: calc(var(--bmt-logo, 64px) * var(--bmt-manual-scale, 1) / var(--bmt-ink, 1)) !important;
	max-width: 100% !important;
	max-height: 100%;
	flex: none;
	transform: translateY(var(--bmt-manual-nudge, 0));
}

.bmt-labels--mono .bmt-labels__logo {
	filter: grayscale(1) contrast(1.05) opacity(0.78);
}

.bmt-labels--mono a.bmt-labels__item:hover .bmt-labels__logo {
	filter: grayscale(0) contrast(1) opacity(1);
}

.bmt-labels--ink .bmt-labels__logo {
	filter: grayscale(1) brightness(0);
	opacity: 0.82;
}

.bmt-labels--white .bmt-labels__logo {
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 0.9;
}

/* Encadrement facultatif du bandeau */
.bmt-labels__frame {
	border: 1px solid var(--bmt-frame, rgba(10, 46, 28, 0.12));
	padding: var(--bmt-frame-pad, 18px);
	background-color: rgba(255, 255, 255, 0.52);
}

.bmt-labels__frame--partner {
	border-color: var(--bmt-frame, rgba(10, 46, 28, 0.12));
}

.bmt-labels__caption {
	display: block;
	margin-top: 10px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8A9184;
	text-align: center;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.bmt-labels__item--stacked {
	flex-direction: column;
	gap: 12px;
	height: auto;
	min-height: var(--bmt-box, calc(var(--bmt-logo, 64px) * 1.9));
	max-height: none;
	padding: 18px var(--bmt-pad, 28px) 22px;
}

.bmt-labels__item--stacked .bmt-labels__logo-stage {
	height: var(--bmt-box, calc(var(--bmt-logo, 64px) * 1.9));
}

.bmt-labels__item--stacked .bmt-labels__logo {
	height: calc(var(--bmt-logo, 64px) * var(--bmt-scale, 1) / var(--bmt-ink, 1));
}

.bmt-labels__placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--bmt-logo, 64px) * 0.72);
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid rgba(10, 46, 28, 0.16);
	background: rgba(242, 239, 230, 0.5);
	font-size: 10px;
	line-height: 1.35;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
	color: #0A2E1C;
}

.bmt-labels__grid--partner .bmt-labels__item {
	padding-right: max(14px, calc(var(--bmt-pad, 28px) * 0.72));
	padding-left: max(14px, calc(var(--bmt-pad, 28px) * 0.72));
}

/* ------------------------------------------------------------------- Lien */

.bmt-labels__more {
	display: inline-flex;
	align-items: center;
	margin-top: 34px;
	padding: 15px 32px;
	border: 1px solid #A8823C;
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #2A3F16;
	text-decoration: none;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.bmt-labels__more:hover,
.bmt-labels__more:focus-visible {
	color: #A8823C;
}

.bmt-labels__foot {
	display: flex;
	justify-content: center;
}

.bmt-labels--left .bmt-labels__foot {
	justify-content: flex-start;
}

.bmt-labels a:focus-visible {
	outline: 2px solid #A8823C;
	outline-offset: 3px;
}

/* -------------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
	.bmt-labels__grid {
		grid-template-columns: repeat(var(--bmt-cols, 2), minmax(0, 1fr));
	}

	.bmt-labels__title {
		font-size: 28px;
	}

	.bmt-labels__item--manual .bmt-labels__logo {
		height: calc(var(--bmt-logo, 64px) * var(--bmt-manual-scale-tablet, var(--bmt-manual-scale, 1)) / var(--bmt-ink, 1)) !important;
		transform: translateY(var(--bmt-manual-nudge-tablet, var(--bmt-manual-nudge, 0)));
	}
}

@media (max-width: 767px) {
	.bmt-labels__group-title {
		gap: 10px;
		letter-spacing: 0.2em;
	}

	.bmt-labels__group-title::before,
	.bmt-labels__group-title::after {
		width: 24px;
	}

	.bmt-labels__grid {
		grid-template-columns: repeat(var(--bmt-cols, 2), minmax(0, 1fr));
	}

	.bmt-labels__rating {
		gap: 8px 12px;
	}

	.bmt-labels__sep {
		display: none;
	}

	.bmt-labels__head {
		margin-bottom: 28px;
	}

	.bmt-labels__item--manual .bmt-labels__logo {
		height: calc(var(--bmt-logo, 64px) * var(--bmt-manual-scale-mobile, var(--bmt-manual-scale-tablet, var(--bmt-manual-scale, 1))) / var(--bmt-ink, 1)) !important;
		transform: translateY(var(--bmt-manual-nudge-mobile, var(--bmt-manual-nudge-tablet, var(--bmt-manual-nudge, 0))));
	}
}


/* =========================================================
   Bande de labels du pied de page
   ========================================================= */

.bmt-lf {
	--bmt-lf-h: 54px;
	--bmt-lf-gap: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px 40px;
	padding: 34px 0;
	border-style: solid;
	border-color: rgba(242, 239, 230, 0.14);
	border-width: 0;
	font-family: 'Jost', system-ui, sans-serif;
	box-sizing: border-box;
}

.bmt-lf * {
	box-sizing: border-box;
}

.bmt-lf--rules-both   { border-top-width: 1px; border-bottom-width: 1px; }
.bmt-lf--rules-top    { border-top-width: 1px; }
.bmt-lf--rules-bottom { border-bottom-width: 1px; }

.bmt-lf__logos {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px var(--bmt-lf-gap);
}

.bmt-lf__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--bmt-lf-h);
	text-decoration: none;
}

/* Filet vertical facultatif entre les logos */
.bmt-lf--sep .bmt-lf__item + .bmt-lf__item::before {
	content: '';
	position: absolute;
	left: calc(var(--bmt-lf-gap) / -2);
	top: 20%;
	bottom: 20%;
	width: 1px;
	background: currentColor;
	opacity: 0.16;
}

.bmt-lf__logo {
	display: block;
	width: auto !important;
	height: var(--bmt-lf-h) !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	transform-origin: center;
	transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Encre claire uniforme : le traitement qui unifie des logos disparates */
.bmt-lf--light .bmt-lf__logo {
	filter: grayscale(1) brightness(0) invert(1);
}

.bmt-lf--dark .bmt-lf__logo {
	filter: grayscale(1) brightness(0);
}

/* Un logo peut garder ses couleurs, coche par coche */
.bmt-lf__item--color .bmt-lf__logo {
	filter: none !important;
}

a.bmt-lf__item:hover .bmt-lf__logo {
	opacity: 1 !important;
}

.bmt-lf__placeholder {
	padding: 8px 14px;
	border: 1px dashed currentColor;
	opacity: 0.45;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bmt-lf__rating {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	white-space: nowrap;
}

.bmt-lf__stars {
	display: inline-flex;
	gap: 2px;
	font-size: 15px;
	line-height: 1;
	color: #C9A15A;
}

.bmt-lf__star {
	position: relative;
	display: inline-block;
	color: rgba(201, 161, 90, 0.3);
}

.bmt-lf__star-fill {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	color: #C9A15A;
	white-space: nowrap;
}

.bmt-lf__rating-text {
	font-size: 14px;
	color: rgba(242, 239, 230, 0.6);
	transition: color 0.25s ease;
}

a.bmt-lf__rating:hover .bmt-lf__rating-text {
	color: #C9A15A;
}

@media (max-width: 1024px) {
	.bmt-lf {
		justify-content: flex-start;
	}
}

@media (max-width: 600px) {
	.bmt-lf {
		--bmt-lf-gap: 24px;
		gap: 20px;
	}

	.bmt-lf__rating-text {
		font-size: 13px;
	}
}