/* Page « Liens » (inc/liens.php, template-parts/liens.php) : lien de la bio des réseaux, pensée pour le téléphone. */

body.exo-liens {
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	overflow-x: hidden;
}
body.exo-liens::before,
body.exo-liens::after { display: none !important; } /* pas de motif ni d'animation de saison ici */

.exo-liens__fond {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 70% 30% at 50% 0%, color-mix(in srgb, var(--jaune) 14%, transparent), transparent 70%),
		radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .45));
}

.exo-liens__page {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	padding: 44px 16px 40px;
}

/* Logo */
.exo-liens__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.exo-liens__logo .exo-logo__svg { width: 230px; height: auto; display: block; overflow: visible; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--jaune) 30%, transparent)); }
.exo-liens__logo .exo-logo__phrase { display: block; font-size: 10px; }
.exo-liens__accroche { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--texte-2); }

/* Recherche par référence */
.exo-liens__ref { margin: 28px 0 0; }
.exo-liens__ref label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--texte); text-align: center; }
.exo-liens__ref-champ { display: flex; gap: 8px; }
.exo-liens__ref input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid var(--bordure);
	border-radius: 12px;
	background: var(--surface, var(--carte));
	color: var(--texte);
	font-family: "Chakra Petch", var(--f-texte), sans-serif;
	font-size: 18px;
	letter-spacing: .08em;
	text-transform: uppercase;
	-webkit-appearance: none;
	appearance: none;
}
.exo-liens__ref input[type="search"]::placeholder { color: color-mix(in srgb, var(--texte-2) 60%, transparent); }
.exo-liens__ref input[type="search"]:focus { outline: none; border-color: var(--jaune); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jaune) 22%, transparent); }
.exo-liens__ref button {
	height: 50px;
	padding: 0 22px;
	border: 0;
	border-radius: 12px;
	background: var(--jaune);
	color: var(--sur-jaune, #171204);
	font-family: var(--f-texte);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.exo-liens__ref button:hover { background: var(--jaune-clair, var(--jaune)); }

/* Raccourcis : une liste, chaque ligne avec un liseré de couleur à gauche */
.exo-liens__raccourcis { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.exo-liens__titre--explorer { margin-top: 34px; }
.exo-liens__lien {
	--lis: var(--bordure);
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 12px;
	padding: 11px 16px 11px 18px;
	border: 1px solid var(--bordure);
	border-left: 4px solid var(--lis);
	border-radius: 12px;
	background: color-mix(in srgb, var(--carte) 88%, transparent);
	color: var(--texte);
	text-decoration: none;
	transition: border-color .2s, transform .15s, background .2s;
}
.exo-liens__lien:hover,
.exo-liens__lien:focus-visible { border-color: var(--lis); transform: translateY(-1px); background: var(--carte); }
.exo-liens__lien-nom { grid-column: 1; font-size: 15px; font-weight: 700; }
.exo-liens__lien-txt { grid-column: 1; margin-top: 1px; font-size: 12px; color: var(--texte-2); }
.exo-liens__fleche { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; color: var(--texte-2); transition: color .2s, transform .2s; }
.exo-liens__lien:hover .exo-liens__fleche { color: var(--lis); transform: translateX(3px); }
.exo-liens__lien--principal { --lis: var(--jaune); background: color-mix(in srgb, var(--jaune) 12%, var(--carte)); }
.exo-liens__lien--preco { --lis: var(--pre-a, var(--jaune)); }
.exo-liens__lien--nouveau { --lis: var(--nouv-a, #4db8ff); }
.exo-liens__lien--demande { --lis: var(--dem-a, #a78bfa); }
.exo-liens__lien--promo { --lis: var(--promo, #e5232f); }

/* Dernières figurines : liste (pas de tuiles), photo, nom, référence, statut, prix */
.exo-liens__derniers { margin: 30px 0 0; }
.exo-liens__titre {
	margin: 0 0 12px;
	font-family: var(--f-titre);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: center;
}
.exo-liens__produits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordure); }
.exo-liens__produits li { border-bottom: 1px solid var(--bordure); }
.exo-liens__produit {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 12px 4px;
	color: var(--texte);
	text-decoration: none;
}
.exo-liens__produit:hover .exo-liens__nom { color: var(--jaune); }
.exo-liens__photo { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--carte); }
.exo-liens__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.exo-liens__infos { min-width: 0; }
.exo-liens__nom { display: block; font-family: var(--f-carte, var(--f-texte)); font-size: 14px; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color .2s; }
.exo-liens__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 5px; font-size: 11.5px; }
.exo-liens__num { font-family: "Chakra Petch", monospace; font-weight: 700; letter-spacing: .06em; color: var(--texte-2); }
.exo-liens__statut { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: #35e08a; }
.exo-liens__statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.exo-liens__statut--precommande { color: var(--pre-a, var(--jaune)); }
.exo-liens__statut--nouveau { color: var(--nouv-a, #4db8ff); }
.exo-liens__statut--sur-demande { color: var(--dem-a, #a78bfa); }
.exo-liens__statut--epuise { color: var(--texte-2); }
.exo-liens__prix { font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; }
.exo-liens__prix del { display: block; font-size: 11.5px; font-weight: 500; color: var(--texte-2); }
.exo-liens__prix ins { text-decoration: none; }

/* Réseaux et bas */
.exo-liens__reseaux { display: flex; justify-content: center; gap: 14px; list-style: none; margin: 30px 0 0; padding: 0; }
.exo-liens__reseaux a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--bordure); border-radius: 50%; color: var(--texte); transition: border-color .2s, color .2s; }
.exo-liens__reseaux a:hover { border-color: var(--jaune); color: var(--jaune); }
.exo-liens__pied { margin: 28px 0 0; text-align: center; font-size: 12.5px; color: var(--texte-2); }
.exo-liens__pied a { color: var(--texte-2); }
.exo-liens__pied a:hover { color: var(--jaune); }

@media (max-width: 380px) {
	.exo-liens__logo .exo-logo__svg { width: 200px; }
	.exo-liens__produit { grid-template-columns: 56px 1fr auto; gap: 12px; }
	.exo-liens__photo { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
	.exo-liens__lien, .exo-liens__fleche { transition: none; }
}