/**
 * Rendu du flux.
 *
 * Toutes les classes sont prefixees `pif-`, et aucun selecteur ne vise un element nu :
 * le plugin s'installe dans des themes qu'il ne connait pas, et il n'a pas a decider de
 * l'apparence de leurs images ou de leurs liens.
 *
 * Le theme cible, hello-elementor, n'apporte presque aucun style. Le rendu est donc
 * autonome : espacements, format, typographie de legende.
 *
 * Aucun JavaScript n'accompagne cette feuille.
 */

.pif-feed {
	--pif-columns: 4;
	--pif-columns-tablet: 3;
	--pif-columns-mobile: 3;
	--pif-gap: 8px;

	/*
	 * L'espace sous l'en-tete de profil ne suit pas celui de la grille. Une gouttiere de
	 * quatre pixels entre deux vignettes est juste, la meme valeur entre le nom du compte
	 * et la premiere rangee d'images colle les deux blocs l'un a l'autre.
	 */
	--pif-profile-gap: 16px;

	/*
	 * La marque et la photo de profil partagent cette taille : « la meme taille que la
	 * photo » est une contrainte, pas une coincidence entre deux nombres ecrits a deux
	 * endroits, qui finiraient par diverger.
	 */
	--pif-avatar-size: 56px;

	/* Espace propre a la marque, en plus de la gouttiere de l'en-tete. */
	--pif-brand-gap: 0.6em;

	/*
	 * Couleurs du bouton Suivre, sorties en variables : c'est le seul aplat du plugin, et
	 * un site qui a sa propre charte doit pouvoir le reprendre sans toucher a la feuille.
	 */
	--pif-follow-bg: #0095f6;
	--pif-follow-color: #fff;
	--pif-follow-radius: 8px;
	--pif-ratio: 1 / 1;
	--pif-radius: 4px;

	display: block;
	width: 100%;
}

.pif-feed__grid {
	display: grid;
	grid-template-columns: repeat(var(--pif-columns), minmax(0, 1fr));
	gap: var(--pif-gap);
}

/* Profil */

/*
 * L'en-tete porte deux liens cote a cote : l'identite du compte, et le bouton Suivre. Ce
 * dernier est un frere et non un enfant, le HTML interdisant un lien dans un lien.
 */
.pif-profile {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: var(--pif-profile-gap);
}

/*
 * L'espace demande entre la description et le bouton. Une marge automatique plutot qu'un
 * `justify-content` : elle pousse le bouton au bord sans dependre du nombre d'elements
 * presents, et l'en-tete reste correct quand la photo ou les abonnes sont masques.
 */
.pif-profile__follow {
	flex: 0 0 auto;
	margin-inline-start: auto;
	padding: 0.45em 1.1em;
	border-radius: var(--pif-follow-radius);
	background-color: var(--pif-follow-bg);
	color: var(--pif-follow-color);
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.pif-profile__link {
	display: flex;
	align-items: center;
	gap: 0.75em;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

/*
 * Le soulignement des liens venait du theme, pas du plugin. hello-elementor pose
 * `.page-content a { text-decoration: underline }`, de specificite (0,1,1), qui l'emporte
 * sur `.pif-profile__link` (0,1,0) : le nom du compte, son identifiant et le nombre
 * d'abonnes s'affichaient soulignes malgre la regle ci-dessus.
 *
 * La reponse n'est ni `!important`, qui interdirait au theme de reprendre la main, ni un
 * selecteur d'element nu, que la feuille s'interdit. Les regles de lien du plugin sont
 * portees a (0,2,0) en les rattachant a `.pif-feed`, qui contient tout le rendu. Cela
 * suffit a passer devant un theme, sans rien lui imposer ailleurs sur la page.
 *
 * La couleur relevait de la meme cause : `a:active, a:hover { color: #336 }` dans la
 * feuille du theme, toujours (0,1,1) contre (0,1,0). Au survol, l'en-tete entier virait
 * au bleu, et la marque Instagram avec lui, puisqu'elle est tracee en `currentColor`. Le
 * lien garde desormais la couleur du texte qui l'entoure, au repos comme au survol, ce
 * que la declaration `color: inherit` ci-dessus voulait dire depuis le debut.
 */
.pif-feed .pif-profile__link,
.pif-feed .pif-profile__link:hover,
.pif-feed .pif-profile__link:focus,
.pif-feed .pif-post__link,
.pif-feed .pif-post__link:hover,
.pif-feed .pif-post__link:focus {
	text-decoration: none;
	color: inherit;
}

/*
 * La marque garde sa taille quoi qu'il arrive : `flex-shrink` a zero, faute de quoi un
 * nom de compte long la comprimerait jusqu'a la rendre meconnaissable, ce qui est
 * exactement le contraire de ce qu'on lui demande.
 */
.pif-profile__brand {
	flex: 0 0 auto;
	width: var(--pif-avatar-size);
	height: var(--pif-avatar-size);
	margin-inline-end: var(--pif-brand-gap);
}

/*
 * Troisieme regle du plugin qu'un voisin emportait par la specificite, apres le
 * soulignement corrige en 1.0.1 et la couleur de survol en 1.0.3.
 *
 * Elementor pose `.elementor img { border: none; border-radius: 0; height: auto }`, de
 * specificite (0,1,1), contre `.pif-profile__avatar` en (0,1,0). Sur une page construite
 * avec Elementor, et la page d'accueil du lycee en est une, la photo de profil s'affichait
 * donc **carree** : `border-radius` calcule a `0px`, mesure dans le navigateur.
 *
 * Le `border-radius` des vignettes, lui, survivait, parce qu'il porte sur un `span` et non
 * sur une balise `img` : la regle d'Elementor ne l'atteint pas.
 *
 * Meme reponse que les deux fois precedentes : rattacher la regle a `.pif-feed`, qui
 * contient tout le rendu, la porte a (0,2,0). Ni `!important`, qui interdirait a un theme
 * de reprendre la main, ni selecteur d'element nu, que la feuille s'interdit.
 */
.pif-feed .pif-profile__avatar {
	width: var(--pif-avatar-size);
	height: var(--pif-avatar-size);
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.pif-profile__identity {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}

.pif-profile__name {
	font-weight: 600;
}

.pif-profile__handle,
.pif-profile__followers {
	font-size: 0.875em;
	opacity: 0.75;
}

/* Publications */

.pif-post {
	margin: 0;
	min-width: 0;
}

.pif-post__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.pif-post__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--pif-radius);
	aspect-ratio: var(--pif-ratio);
	background-color: rgba(0, 0, 0, 0.04);
}

.pif-post__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

/*
 * Le survol reste discret et ne deplace rien : un agrandissement de l'image dans un
 * conteneur qui ne bouge pas, donc aucun decalage de mise en page.
 */
.pif-post__link:hover .pif-post__image,
.pif-post__link:focus-visible .pif-post__image {
	transform: scale(1.04);
}

.pif-post__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/*
 * Pastilles de type. Elles sont decoratives : le type est aussi annonce en texte, lu par
 * les lecteurs d'ecran, parce qu'une information portee par une seule icone est une
 * information perdue pour une partie des visiteurs.
 */
.pif-post__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	background-color: rgba(0, 0, 0, 0.55);
	border-radius: 3px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

.pif-post__badge--video {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M4 2l10 6-10 6z'/%3E%3C/svg%3E");
}

.pif-post__badge--carousel {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Crect x='5' y='2' width='9' height='9' rx='1.5'/%3E%3Cpath d='M11 13.5H3.5A1.5 1.5 0 012 12V4.5'/%3E%3C/svg%3E");
}

.pif-post__caption {
	display: block;
	margin-top: 0.5em;
	font-size: 0.875em;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.pif-post__date {
	display: block;
	margin-top: 0.25em;
	font-size: 0.75em;
	opacity: 0.7;
}

/* Etat vide, visible des seuls administrateurs. */

.pif-feed__notice {
	margin: 0;
	padding: 1em;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: var(--pif-radius);
	font-size: 0.875em;
}

/* Points de rupture alignes sur ceux d'Elementor. */

@media (max-width: 1024px) {

	.pif-feed__grid {
		grid-template-columns: repeat(var(--pif-columns-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	.pif-feed__grid {
		grid-template-columns: repeat(var(--pif-columns-mobile), minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {

	.pif-post__image {
		transition: none;
	}

	.pif-post__link:hover .pif-post__image,
	.pif-post__link:focus-visible .pif-post__image {
		transform: none;
	}
}

/*
 * Tenue face a un theme inconnu.
 *
 * Ce bloc reprend les seules proprietes sans lesquelles le rendu n'est pas degrade mais
 * casse, et les reaffirme sous `.pif-feed`, ce qui les porte a (0,2,0). Trois regles du
 * plugin ont deja ete emportees par un voisin en (0,1,1) : le soulignement des liens par
 * le theme, la couleur de survol par le theme, l'arrondi de la photo par Elementor. La
 * quatrieme se produira, et elle trouvera la place prise.
 *
 * Ni `!important`, qui interdirait a un theme de reprendre la main sur une couleur ou une
 * police, ni selecteur d'element nu, que cette feuille s'interdit depuis sa premiere
 * ligne. La specificite suffit, et elle laisse la porte ouverte a qui vise plus precis.
 *
 * Les points de rupture sont repris ici pour la meme raison : declares plus haut en
 * (0,1,0), ils perdraient contre une regle de theme sur la grille.
 */

.pif-feed {
	/* Ne jamais elargir la page qui nous accueille, quel que soit le conteneur. */
	max-width: 100%;
	box-sizing: border-box;
}

.pif-feed *,
.pif-feed *::before,
.pif-feed *::after {
	box-sizing: border-box;
}

.pif-feed .pif-feed__grid {
	display: grid;
	grid-template-columns: repeat(var(--pif-columns), minmax(0, 1fr));
	gap: var(--pif-gap);
}

.pif-feed .pif-post {
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
}

.pif-feed .pif-post__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--pif-ratio);
}

/*
 * `height` autant que `width` : Elementor pose `.elementor img { height: auto }`, en
 * (0,1,1). Sans cette reaffirmation, la vignette perd sa hauteur et le carre se defait.
 */
.pif-feed .pif-post__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/*
 * Un nom de compte long poussait la page : rien n'autorisait le texte a se replier, et
 * l'en-tete debordait de quarante pixels sur un telephone. Le repli conserve le texte
 * entier, la troncature l'aurait ampute.
 */
.pif-feed .pif-profile__identity {
	min-width: 0;
	max-width: 100%;
}

.pif-feed .pif-profile__name,
.pif-feed .pif-profile__handle,
.pif-feed .pif-profile__followers {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/*
 * Le bouton doit rester lisible : un theme qui impose sa couleur de lien retournerait du
 * texte blanc sur fond clair, ou l'inverse. Sa couleur et son fond vont ensemble, et se
 * reaffirment ensemble.
 */
.pif-feed .pif-profile__follow,
.pif-feed .pif-profile__follow:hover,
.pif-feed .pif-profile__follow:focus {
	background-color: var(--pif-follow-bg);
	color: var(--pif-follow-color);
	text-decoration: none;
}

.pif-feed .pif-profile__follow:hover {
	filter: brightness(0.94);
}

/*
 * Le texte reserve aux lecteurs d'ecran etait masque par une classe que le plugin
 * n'ecrit nulle part : il comptait sur le theme. Un theme qui ne la definit pas affichait
 * donc « Plusieurs images » en clair sous chaque vignette.
 */
.pif-feed .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 1024px) {

	.pif-feed .pif-feed__grid {
		grid-template-columns: repeat(var(--pif-columns-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	.pif-feed .pif-feed__grid {
		grid-template-columns: repeat(var(--pif-columns-mobile), minmax(0, 1fr));
	}
}