/* LBID Comptines Paroles — rendu front
   Variables surchargeables depuis le thème ou Elementor (CSS personnalisé). */

.lbid-comptines {
	--lbid-pilule: #fce3ba;          /* fond des boutons */
	--lbid-titre: #d97a2b;           /* couleur des titres */
	--lbid-police: 'Caveat', cursive;/* police cursive des titres */
	--lbid-recherche-fond: #ffffff;
	--lbid-recherche-accent: #db6219;/* pastille loupe */
	--lbid-icone-taille: 58px;
	max-width: 1300px;
	margin: 0 auto;
}

/* ---- Barre de recherche ---- */
.lbid-comptines-recherche {
	display: flex;
	align-items: center;
	max-width: 340px;
	margin: 0 auto 44px;
	background: var(--lbid-recherche-fond);
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(140, 90, 30, 0.10);
	padding: 5px;
}

.lbid-comptines-loupe {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--lbid-recherche-accent);
	color: #fff;
}

.lbid-comptines-recherche input {
	flex: 1;
	border: 0;
	outline: none;
	background: transparent;
	padding: 8px 16px;
	font-family: var(--lbid-police);
	font-size: 1.15rem;
	color: var(--lbid-titre);
	box-shadow: none;
}

.lbid-comptines-recherche input::placeholder {
	color: var(--lbid-titre);
	opacity: 0.6;
}

.lbid-comptines-recherche input:focus-visible {
	outline: 2px solid var(--lbid-recherche-accent);
	outline-offset: 2px;
	border-radius: 999px;
}

/* ---- Grille ---- */
.lbid-comptines-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 34px 30px;
	padding-left: calc(var(--lbid-icone-taille) / 2);
}

/* ---- Bouton comptine ---- */
.lbid-comptine {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 8px 22px 8px calc(var(--lbid-icone-taille) / 2 + 20px);
	margin-left: calc(var(--lbid-icone-taille) / 2);
	background: var(--lbid-pilule);
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* (1.0.1) CORRECTIF : « display: flex » ci-dessus, posé par une feuille auteur,
   prenait le pas sur la règle « [hidden] { display: none } » du navigateur.
   Les éléments masqués par la recherche restaient donc visibles. */
.lbid-comptine[hidden],
.lbid-comptines-vide[hidden] {
	display: none !important;
}

.lbid-comptine:hover,
.lbid-comptine:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(140, 90, 30, 0.18);
}

.lbid-comptine:focus-visible {
	outline: 2px solid var(--lbid-recherche-accent);
	outline-offset: 2px;
}

.lbid-comptine-icone {
	position: absolute;
	left: calc(var(--lbid-icone-taille) / -2);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lbid-icone-taille);
	height: calc(var(--lbid-icone-taille) + 8px);
	border-radius: 20px 20px 24px 20px;
	box-shadow: 0 2px 5px rgba(140, 90, 30, 0.15);
}

.lbid-comptine-icone img {
	max-width: 60%;
	max-height: 60%;
	object-fit: contain;
	display: block;
}

.lbid-comptine-titre {
	font-family: var(--lbid-police);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--lbid-titre);
	text-align: center;
}

/* ---- Message « aucun résultat » ---- */
.lbid-comptines-vide {
	margin-top: 32px;
	text-align: center;
	font-family: var(--lbid-police);
	font-size: 1.3rem;
	color: var(--lbid-titre);
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
	.lbid-comptines-grille {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lbid-comptine {
		transition: none;
	}
}