/**
 * Spediteur — CSS des images responsives.
 *
 * Chargee sur les pages publiques uniquement si l'option correspondante est
 * activee dans la configuration du plugin (formulaire configurer_spediteur).
 *
 * Toutes les dimensions derivent de la variable --spediteur-img-max ci-dessous,
 * facilement surchargeable dans le squelette du site :
 *
 *   :root { --spediteur-img-max: 60rem; }
 *
 * Comportement :
 *   - <imgN>          : pleine largeur sur tous les ecrans (aucun align).
 *   - <imgN|left>     : aligne a gauche ; au plus la moitie de la largeur sur
 *                       grands ecrans (deux images left+right tiennent sur une
 *                       ligne), pleine largeur sur petits ecrans.
 *   - <imgN|right>    : idem, aligne a droite.
 *   - <imgN|center>   : centre, 80% de largeur (borne par la taille reelle de
 *                       l'image) sur tous les ecrans.
 */

:root {
	/* Base de reference pour toutes les dimensions. Surchargeable. */
	--spediteur-img-max: 48rem;
	/* Largeur relative appliquee aux images alignees (left/right/center). */
	--spediteur-img-ratio: 80%;
	/* Marge entre deux images flottantes cote a cote. */
	--spediteur-img-gap: 1rem;
	/* Largeur des images flottantes (left/right) sur grand ecran : au plus 50 %
	   moins la marge, pour que deux images tiennent sur une meme ligne. */
	--spediteur-img-float-ratio: calc(50% - var(--spediteur-img-gap));
}

/* Point de rupture entre petits et grands ecrans : 40rem. Les regles @media ne
   pouvant pas utiliser de variable CSS, cette valeur est ecrite en dur ci-dessous. */

/* Sans attribut d'alignement : pleine largeur sur tous les ecrans, sans borne.
   Seul l'alignement center limite la largeur (voir plus bas). */
.spip_documents {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}
.spip_documents img,
.spip_documents .spip_doc_inner img {
	width: 100%;
	height: auto;
}

/* Alignement centre : ratio de la largeur du conteneur, sur tous les ecrans,
   sans jamais depasser la taille reelle de l'image. */
.spip_documents_center,
.spip_document_center,
.spip_doc_center {
	display: block;
	width: var(--spediteur-img-ratio);
	max-width: var(--spediteur-img-max);
	margin-inline: auto;
}
.spip_documents_center img,
.spip_document_center img,
.spip_doc_center img {
	width: 100%;
	height: auto;
}

/* Petits ecrans : les images alignees a gauche/droite passent en pleine
   largeur pour rester lisibles. */
.spip_documents_left,
.spip_document_left,
.spip_doc_left,
.spip_documents_right,
.spip_document_right,
.spip_doc_right {
	display: block;
	width: 100%;
	max-width: var(--spediteur-img-max);
}
.spip_documents_left img,
.spip_document_left img,
.spip_doc_left img,
.spip_documents_right img,
.spip_document_right img,
.spip_doc_right img {
	width: 100%;
	height: auto;
}

/* Grands ecrans : gauche/droite flottent et occupent au plus la moitie de la
   largeur (moins la marge), afin qu'une image a gauche et une a droite tiennent
   sur une meme ligne. */
@media (min-width: 40rem) {
	.spip_documents_left,
	.spip_document_left,
	.spip_doc_left {
		float: left;
		width: var(--spediteur-img-float-ratio);
		max-width: var(--spediteur-img-max);
		margin-right: var(--spediteur-img-gap);
		margin-inline-end: var(--spediteur-img-gap);
	}
	.spip_documents_right,
	.spip_document_right,
	.spip_doc_right {
		float: right;
		width: var(--spediteur-img-float-ratio);
		max-width: var(--spediteur-img-max);
		margin-left: var(--spediteur-img-gap);
		margin-inline-start: var(--spediteur-img-gap);
	}
}