/* ============================================================
   Oguey Gallery — feuille de style du widget Elementor
   Layout fidèle au Figma OGUEY V1, node 57:1570.

   Approche FLUIDE : largeurs de colonnes en %, hauteurs d'images
   en aspect-ratio. La galerie s'adapte à la largeur du conteneur
   Elementor sans jamais déborder, tout en conservant exactement
   les proportions de la maquette.
   ============================================================ */

.oguey-gallery {
	display: flex;
	align-items: flex-start;
	/* gap horizontal fluide : 18/1923 de la largeur de la section (Figma) */
	gap: 0.936%;
	width: 100%;
	max-width: 1923px;         /* plafond = largeur Figma, jamais au-delà */
	margin-inline: auto;
	box-sizing: border-box;
}

.oguey-gallery * {
	box-sizing: border-box;
}

.oguey-gallery__col {
	display: flex;
	flex-direction: column;
	/* gap vertical : clamp() pour rester visuellement constant entre les
	   colonnes (un gap en % se calcule sur la largeur de CHAQUE colonne,
	   qui diffère — d'où le clamp). ~23px à la taille Figma. */
	gap: clamp(10px, 1.2vw, 23px);
	flex: 0 0 auto;
	min-width: 0;              /* autorise la colonne à rétrécir sous sa largeur intrinsèque */
}

/* Largeurs de colonnes en % — proportions Figma, ajustées pour que
   colonnes + 3 gaps horizontaux = exactement 100% (sinon flexbox écrase
   le gap pour faire rentrer les colonnes). */
.oguey-gallery__col--1 { width: 26.3131%; }
.oguey-gallery__col--2 { width: 26.3651%; }
.oguey-gallery__col--3 { width: 23.1929%; }
.oguey-gallery__col--4 { width: 21.3209%; }

.oguey-gallery__item {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: var(--ar);   /* ratio largeur/hauteur fixé par emplacement, injecté en inline */
	overflow: hidden;
	cursor: pointer;
}

.oguey-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;         /* recadrage propre, ratio préservé */
	display: block;
	border-radius: 0;          /* reset : la maquette n'a aucun arrondi sur les images */
	transition: transform .45s ease;
}

/* Overlay bleu marine au survol — token primary/950 du design system */
.oguey-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(8, 35, 81, 0);
	transition: background .35s ease;
	pointer-events: none;
}
.oguey-gallery__item:hover img    { transform: scale(1.04); }
.oguey-gallery__item:hover::after { background: rgba(8, 35, 81, .22); }

.oguey-gallery__item:focus-visible {
	outline: 2px solid #143F84; /* primary/900 */
	outline-offset: 2px;
}

/* -------- Mobile uniquement : une seule colonne -------- */
/* Tablette et desktop conservent la mise en page 4 colonnes du Figma. */
@media (max-width: 767px) {
	.oguey-gallery {
		flex-direction: column;
		gap: 12px;
		max-width: 100%;
	}
	.oguey-gallery__col {
		width: 100%;
		gap: 12px;
	}
	/* en colonne unique, on uniformise sur un ratio 4/3 lisible */
	.oguey-gallery__item { aspect-ratio: 4 / 3; }
}

/* -------- Avertissement éditeur (visible uniquement dans Elementor) -------- */
.oguey-gallery__notice {
	padding: 20px 24px;
	border: 1px dashed #c0392b;
	background: #fdf3f2;
	color: #922b21;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 4px;
	text-align: center;
}