/**
 * Zones de remplissage visuel.
 *
 * Le brief impose un placeholder qui se voit comme tel : pas de banque
 * d’images, pas de rendu genere. Un bloc plein aux bonnes proportions, avec
 * le format inscrit dessus, se remarque en relecture et ne peut pas passer
 * en production par inadvertance.
 *
 * Le client remplace le groupe par un bloc image : rien a defaire en CSS.
 */

.placeholder-media {
	--placeholder-ratio: 16 / 9;
	display: grid;
	place-items: center;
	aspect-ratio: var(--placeholder-ratio);
	padding: var(--space-md);
	background-color: var(--color-surface-alt);
	/* Tirets plutot qu’un filet plein : le provisoire doit se lire de loin. */
	border: var(--line-width) dashed var(--color-line);
	/* Force le texte clair : sur fond sombre, une section inversee ferait
	   heriter une couleur sombre et le libelle deviendrait illisible. */
	color: var(--color-text);
	text-align: center;
}

.placeholder-media > * {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	letter-spacing: 0.04em;
	opacity: 0.72;
}

.placeholder-media--square {
	--placeholder-ratio: 1;
}

.placeholder-media--portrait {
	--placeholder-ratio: 3 / 4;
}

.placeholder-media--4x3 {
	--placeholder-ratio: 4 / 3;
}

.placeholder-media--wide {
	--placeholder-ratio: 21 / 9;
}

/* Texte de remplissage : meme logique, marquage discret mais reperable. */
.placeholder-copy {
	opacity: 0.86;
}