/* ===========================================================================
   Mise en page « collage / journal » — grille souple + classes utilitaires.

   Principe : un conteneur .gl-collage (un bloc Groupe auquel on ajoute cette
   classe via « Avancé → classe(s) CSS additionnelle(s) ») devient une GRILLE de
   12 colonnes. Chaque bloc enfant DIRECT (image, titre, paragraphe, sous-groupe)
   se place et se dimensionne avec les classes ci-dessous :

     largeur      .gl-span-1 … .gl-span-12   (nombre de colonnes occupées /12)
     position     .gl-start-1 … .gl-start-12 (colonne de départ)
     décalage V.  .gl-up-1/2/3  .gl-down-1/2/3 (remonte / descend → superposition)
     rotation     .gl-rotate-l  .gl-rotate-r   (légère inclinaison « papier »)
     alignement   .gl-mid  .gl-bottom          (vertical dans la rangée)
     premier plan .gl-front                    (passe au-dessus en cas de chevauchement)

   Sur mobile (≤ 900px) : une seule colonne, aucun décalage ni rotation → tout se
   réempile proprement (la liberté du collage est une mise en valeur desktop).
   =========================================================================== */

.gl-collage {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 2rem;
	align-items: start;
	grid-auto-flow: row dense; /* remplit les trous → mosaïque éditoriale */
	margin: 2.5rem 0;
}

/* Chaque enfant DIRECT est un élément de grille : on neutralise les contraintes de
   mise en page WordPress (largeur de contenu, centrage, marges verticales de flux). */
.gl-collage > * {
	max-width: none;
	margin: 0;
}

/* Largeur en colonnes (sur 12). On ne fixe que la FIN (span) → combinable avec un
   départ explicite (.gl-start-*). Sans span, l'élément fait 1 colonne. */
.gl-collage > .gl-span-1  { grid-column-end: span 1; }
.gl-collage > .gl-span-2  { grid-column-end: span 2; }
.gl-collage > .gl-span-3  { grid-column-end: span 3; }
.gl-collage > .gl-span-4  { grid-column-end: span 4; }
.gl-collage > .gl-span-5  { grid-column-end: span 5; }
.gl-collage > .gl-span-6  { grid-column-end: span 6; }
.gl-collage > .gl-span-7  { grid-column-end: span 7; }
.gl-collage > .gl-span-8  { grid-column-end: span 8; }
.gl-collage > .gl-span-9  { grid-column-end: span 9; }
.gl-collage > .gl-span-10 { grid-column-end: span 10; }
.gl-collage > .gl-span-11 { grid-column-end: span 11; }
.gl-collage > .gl-span-12 { grid-column-end: span 12; }

/* Colonne de départ (placement horizontal explicite). */
.gl-collage > .gl-start-1  { grid-column-start: 1; }
.gl-collage > .gl-start-2  { grid-column-start: 2; }
.gl-collage > .gl-start-3  { grid-column-start: 3; }
.gl-collage > .gl-start-4  { grid-column-start: 4; }
.gl-collage > .gl-start-5  { grid-column-start: 5; }
.gl-collage > .gl-start-6  { grid-column-start: 6; }
.gl-collage > .gl-start-7  { grid-column-start: 7; }
.gl-collage > .gl-start-8  { grid-column-start: 8; }
.gl-collage > .gl-start-9  { grid-column-start: 9; }
.gl-collage > .gl-start-10 { grid-column-start: 10; }
.gl-collage > .gl-start-11 { grid-column-start: 11; }
.gl-collage > .gl-start-12 { grid-column-start: 12; }

/* Décalage vertical (négatif = remonte et superpose au bloc du dessus). */
.gl-collage > .gl-up-1   { margin-block-start: -1.5rem; }
.gl-collage > .gl-up-2   { margin-block-start: -3rem; }
.gl-collage > .gl-up-3   { margin-block-start: -5rem; }
.gl-collage > .gl-down-1 { margin-block-start: 1.5rem; }
.gl-collage > .gl-down-2 { margin-block-start: 3rem; }
.gl-collage > .gl-down-3 { margin-block-start: 5rem; }

/* Rotation « papier » discrète. */
.gl-collage > .gl-rotate-l { transform: rotate(-2.5deg); }
.gl-collage > .gl-rotate-r { transform: rotate(2.5deg); }

/* Alignement vertical de l'élément dans sa rangée. */
.gl-collage > .gl-mid    { align-self: center; }
.gl-collage > .gl-bottom { align-self: end; }

/* Passe au premier plan quand des éléments se chevauchent. */
.gl-collage > .gl-front { position: relative; z-index: 2; }

/* Mobile : pile unique, sans décalage ni rotation (la grille libre est desktop). */
@media (max-width: 900px) {
	.gl-collage {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.gl-collage > * {
		grid-column: 1 / -1 !important;
		margin-block-start: 0 !important;
		transform: none !important;
	}
}