/*
 * Bloc produit d'affiliation inséré au rendu.
 * Jetons du thème (base.css) ; repli explicite pour rester lisible si le bloc
 * est rendu hors contexte (aperçu d'administration).
 */

.aqua-aff {
	display: grid;
	grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
	margin: 2.5rem 0;
	padding: 1.25rem;
	border: 1px solid var(--color-accent, #74c69d);
	border-left: 4px solid var(--color-primary, #2d7d46);
	border-radius: 10px;
	background: var(--vert-ultra-clair, #f0f9f4);
}

.aqua-aff__media {
	margin: 0;
}

.aqua-aff__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.aqua-aff__corps {
	min-width: 0;
}

.aqua-aff__nom {
	margin: 0 0 0.35rem;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--color-dark, #1b4332);
}

.aqua-aff__texte {
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--color-text, #2c3e50);
}
/* Extrait sur plusieurs lignes : une puce par ligne (1.8.6). */
.aqua-aff__texte--liste { padding-left: 1.2rem; }

/*
 * Deux classes : le contenu d'article pose « .article-body a { color: … } »,
 * plus spécifique qu'une classe seule. Sans ce doublement, le libellé du bouton
 * s'affiche en vert sur vert, donc invisible.
 */
.aqua-aff .aqua-aff__lien {
	display: inline-block;
	padding: 0.65rem 1.15rem;
	border-radius: 6px;
	background: var(--color-primary, #2d7d46);
	color: var(--color-white, #fff);
	font-weight: 600;
	text-decoration: none;
}

.aqua-aff .aqua-aff__lien:hover,
.aqua-aff .aqua-aff__lien:focus-visible {
	background: var(--color-primary-hover, #235f35);
	color: var(--color-white, #fff);
	text-decoration: none;
}

.aqua-aff__mention {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--color-text-light, #5a6c7d);
}

/* Emplacement d'un gabarit : conteneur des blocs rendus par
   aqua_aff_emplacement(). Il n'existe dans le HTML que s'il porte au moins un
   produit, donc il ne peut pas laisser d'espace vide. Plusieurs produits
   affectés au même emplacement s'empilent avec un intervalle régulier. */
.aqua-aff-emplacement {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 2rem 0;
}

/* Affectation encore en brouillon : visible des seuls rédacteurs connectés. */
.aqua-aff--apercu {
	border-style: dashed;
	border-left-color: #b58900;
	background: #fffbea;
}

.aqua-aff__apercu {
	grid-column: 1 / -1;
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #8a6d00;
}

@media (max-width: 600px) {
	.aqua-aff {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.9rem;
		padding: 1rem;
	}

	.aqua-aff__media {
		max-width: 180px;
	}

	.aqua-aff__lien {
		display: block;
		text-align: center;
	}
}