/**
 * Les deux blocs de compatibilité de la fiche produit.
 *
 * Les couleurs viennent des jetons du thème (--lupeo-*), avec une valeur de
 * repli : la feuille reste juste même si la charte n'est pas encore posée.
 *
 * @package Lupeo
 */

/* =========================================================
   1. Haut de fiche — « Compatible avec : … »
   ========================================================= */
.lupeo-compat-tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0 0 14px;
}

.lupeo-compat-tete__lab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-compat-tete__lab .lupeo-i {
	width: 15px;
	height: 15px;
	color: var(--lupeo-teal, #007C75);
}

.lupeo-compat-tete__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

/* La pastille dit le modèle ET mène à sa page : le client vérifie, puis
   repart avec un chemin au lieu d'une impasse. */
.lupeo-compat-tete__p {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 999px;
	border: 1px solid var(--lupeo-teal-soft, #E2EFEE);
	background: var(--lupeo-teal-soft, #E2EFEE);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--lupeo-teal-deep, #005A55);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

a.lupeo-compat-tete__p:hover,
a.lupeo-compat-tete__p:focus-visible {
	border-color: var(--lupeo-teal, #007C75);
	background: #fff;
	text-decoration: none;
}

/* Modèle sans page dédiée : même lecture, mais rien à cliquer. */
.lupeo-compat-tete__p--fixe {
	background: var(--lupeo-cream, #FAF7F2);
	border-color: var(--lupeo-line, #E6DFD4);
	color: var(--lupeo-ink-2, #4A453E);
	font-weight: 500;
}

/* =========================================================
   2. Bas de fiche — les autres références du même modèle
   ========================================================= */
.lupeo-compat-bloc {
	width: var(--theme-container-width, 100%);
	max-width: var(--theme-normal-container-max-width, 1290px);
	margin: 0 auto;
	padding: 34px 0 10px;
	border-top: 1px solid var(--lupeo-line, #E6DFD4);
}

.lupeo-compat-bloc__t {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
	font-family: var(--theme-font-family-heading, Manrope, Inter, sans-serif);
	font-weight: 700;
	letter-spacing: -.025em;
	font-size: 22px;
	line-height: 1.25;
	color: var(--lupeo-ink, #1A1A1A);
}

/* Le compteur, repris à l'identique des blocs de « Ma trottinette ». */
.lupeo-compat-bloc__t span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 26px;
	padding: 0 9px;
	font-family: var(--lupeo-sans, Inter, sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--lupeo-teal-deep, #005A55);
	background: var(--lupeo-teal-soft, #E2EFEE);
	border-radius: 999px;
}

.lupeo-compat-bloc__chapo {
	max-width: 70ch;
	margin: 0 0 22px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--lupeo-ink-2, #4A453E);
}

.lupeo-compat-bloc__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 0 0 22px;
}

.lupeo-compat-bloc__plus {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
}

.lupeo-compat-bloc__plus-lab {
	font-size: 14px;
	font-weight: 600;
	color: var(--lupeo-ink-2, #4A453E);
}

.lupeo-compat-bloc__plus a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lupeo-teal, #007C75);
	text-decoration: none;
}

.lupeo-compat-bloc__plus a:hover,
.lupeo-compat-bloc__plus a:focus-visible {
	color: var(--lupeo-teal-deep, #005A55);
	text-decoration: underline;
}

.lupeo-compat-bloc__plus .lupeo-i {
	width: 16px;
	height: 16px;
}

/* =========================================================
   3. Adaptations
   ========================================================= */
@media (max-width: 1080px) {
	.lupeo-compat-bloc__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.lupeo-compat-bloc {
		padding-top: 26px;
	}

	.lupeo-compat-bloc__t {
		font-size: 19px;
	}

	/* Deux colonnes serrées valent mieux qu'une seule : sur téléphone, une
	   grille à une colonne pousse le reste de la page hors de portée. */
	.lupeo-compat-bloc__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}