/* ============================================================================
   minecraft.fr — Flux masonry : affichage immédiat des cartes (public)
   ----------------------------------------------------------------------------
   Deux problèmes traités ici, tous deux dus au thème parent Extra.

   1) LE FLUX EST INVISIBLE TANT QUE LE JS N'A PAS TOURNÉ
      Extra pose `opacity: 0` sur toutes les cartes :
          .js .posts-blog-feed-module.masonry .hentry { opacity: 0 }
      Elles ne redeviennent visibles qu'une fois rangées dans les colonnes
      créées en JS par salvattore (`.column.size-1of2`), via l'animation
      `gridFadeIn`. Tant que salvattore n'a pas tourné — et il est différé par
      le Delay JS de WP Rocket, donc il attend la première interaction du
      visiteur — la zone d'articles est complètement VIDE (constaté le
      31/07/2026 sur /categorie/mods/shaders/ : 36 cartes, toutes à opacity 0).

      Correctif : tant que les cartes sont encore enfants DIRECTS de
      `.paginated_page` (= salvattore n'est pas passé), on les rend visibles et
      on les dispose nous-mêmes en colonnes, aux mêmes proportions qu'Extra
      (2 colonnes avec sidebar, 3 sans, 1 sous 768px — cf. les valeurs
      `content: "N .column.size-1ofN"` du CSS d'Extra). Dès que salvattore
      passe, les cartes ne sont plus enfants directs : ces règles se
      désactivent d'elles-mêmes et le rendu natif reprend la main.

   2) L'ANIMATION D'ENTRÉE DURAIT 1 s SUR DU CONTENU DÉJÀ VISIBLE
      `gridFadeIn` (1 s, opacity 0 → 1 + translateY(-5%)) rejoue au moment où
      salvattore déplace les cartes. Sur le premier écran, c'est du LCP perdu.
      Correctif : aucune animation pour la 1re carte de chaque colonne
      (2 en desktop, 1 en mobile), fondu raccourci à 0,35 s pour les autres.

   Le préfixe #content-area donne la spécificité nécessaire pour battre Extra
   sans !important.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) Avant salvattore : cartes visibles + grille de secours en CSS
   --------------------------------------------------------------------------- */

/* Le conteneur ne joue le rôle de grille que s'il contient encore des cartes
   en enfants directs (donc uniquement avant le passage de salvattore). */
#content-area .posts-blog-feed-module.masonry .paginated_page:has(> .hentry) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: .833%; /* 3 colonnes : cartes à 32,5 %, colonnes à 33,33 % */
}

/* NB : .with_sidebar est porté par #content-area lui-même (pas par un
   ancêtre), d'où l'absence d'espace dans le sélecteur. */
#content-area.with_sidebar .posts-blog-feed-module.masonry .paginated_page:has(> .hentry) {
	column-gap: 1.25%; /* 2 colonnes : cartes à 48,75 %, colonnes à 50 % */
}

/* Les cartes elles-mêmes : visibles tout de suite, pas d'animation d'entrée
   (elles seront de toute façon redessinées par salvattore). */
#content-area .posts-blog-feed-module.masonry .paginated_page > .hentry {
	opacity: 1;
	animation: none;
	vertical-align: top;
	width: 32.5%;
}

#content-area.with_sidebar .posts-blog-feed-module.masonry .paginated_page > .hentry {
	width: 48.75%;
}

@media only screen and (max-width: 768px) {

	#content-area .posts-blog-feed-module.masonry .paginated_page > .hentry,
	#content-area.with_sidebar .posts-blog-feed-module.masonry .paginated_page > .hentry {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   2) Après salvattore : animation d'entrée raccourcie, nulle en haut de page
   --------------------------------------------------------------------------- */

body.archive #content-area .posts-blog-feed-module.masonry .column .hentry,
body.blog #content-area .posts-blog-feed-module.masonry .column .hentry,
body.home #content-area .posts-blog-feed-module.masonry .column .hentry {
	animation-duration: .35s;
	animation-timing-function: cubic-bezier(.2, .7, .3, 1);
}

/* Premier écran : instantané, pas de fondu, pas de glissement. */
body.archive #content-area .posts-blog-feed-module.masonry .column .hentry:first-child,
body.blog #content-area .posts-blog-feed-module.masonry .column .hentry:first-child,
body.home #content-area .posts-blog-feed-module.masonry .column .hentry:first-child {
	animation: none;
	opacity: 1;
	transform: none;
}

/* Accessibilité : aucune animation si l'utilisateur la refuse. */
@media (prefers-reduced-motion: reduce) {

	#content-area .posts-blog-feed-module.masonry .hentry,
	#content-area .posts-blog-feed-module.masonry .column .hentry {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}