.grid {
	position: relative;
	margin: 0 auto;
}

.js .grid::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	background: #252323 url(../img/loading.svg) no-repeat 50% 75px;
	background-size: 60px auto;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.js .grid--loaded::after {
	opacity: 0;
}

.grid__item {
	width: 270px;
	padding: 10px;
}

.grid__item--current {
	opacity: 0 !important;
}

.img-wrap {
	display: block;
}

.img-wrap:focus,
.img-wrap:hover {
	outline: none;
    filter: opacity(0.5);
}

.img-wrap img {
	display: block;
	max-width: 100%;
}

.preview {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-ms-flex-line-pack: center;
	-webkit-align-content: center;
	align-content: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.preview--open {
	pointer-events: auto;
}


/* circle overlay (generated SVG) */

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.overlay circle {
	-webkit-transition: fill-opacity 0.3s, -webkit-transform 0s 0.3s;
	transition: fill-opacity 0.3s, transform 0s 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transform: scale3d(0, 0, 1);
	transform: scale3d(0, 0, 1);
	fill: #1f1d1d;
	fill-opacity: 0;
}

.preview--open .overlay circle {
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	fill-opacity: 1;
}

.clone {
	position: fixed;
	z-index: 110;
	-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.5, 1, 0.2, 1);
	transition: transform 0.6s cubic-bezier(0.5, 1, 0.2, 1);
	-webkit-backface-visibility: hidden;
}

.original {
	position: relative;
	z-index: 120;
	display: block;
	object-fit: contain;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	-webkit-backface-visibility: hidden;
}

.preview--open .animate {
	/* open */
	-webkit-transition: -webkit-transform 0.6s, opacity 0.2s;
	transition: transform 0.6s, opacity 0.2s;
}

.animate {
	/* close */
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.description {
	font-size: 1.3em;
	color: var(--secondary-red);
    display: none;
}

.js .description--grid {
	display: none;
}

.description--preview {
	position: fixed;
	z-index: 140;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 2em 1em;
	text-align: center;
	opacity: 0;
	background: linear-gradient(180deg, transparent, #1f1d1d);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}

.preview--open .description--preview {
	opacity: 1;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}


/* Close button */

.action {
	font-size: 1.5em;
	margin: 0;
	padding: 0;
	cursor: pointer;
	vertical-align: top;
	color: var(--grey-clear-color);
	border: none;
	background: none;
}

.action:hover,
.action:focus {
	color: whitesmoke;
	outline: none;
}

.action--close {
	position: fixed;
	z-index: 150;
	top: 0;
	right: 0;
	padding: 1em;
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: scale3d(0.6, 0.6, 1);
	transform: scale3d(0.6, 0.6, 1);
}

.preview--image-loaded .action--close {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

.text-hidden {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 0;
	height: 0;
	color: transparent;
}
/*Menu de la page*/
/* 1. Conteneur Global du Menu (UL) */
/* 1. Conteneur Global du Menu (UL) */
.gallery-menu {
    /* Disposition en ligne (Flexbox) */
    display: flex; 
    
    /* ************************************************* */
    /* NOUVELLE LIGNE POUR LE CENTRAGE HORIZONTAL */
    justify-content: center; 
    /* ************************************************* */
    
    flex-wrap: wrap; 
    
    list-style: none; 
    padding: 0;
    margin: var(--standartspace) 0; 
    gap: var(--standartspace);
}

/* Le reste du CSS pour .gallery-item et a reste inchangé. */

/* 2. Élément de Menu Individuel (LI) */
/*
Note: Avec gap sur le UL, nous n'avons plus besoin de margin-right sur le LI,
ce qui simplifie la gestion des marges.
*/
.gallery-item {
    /* Le LI est défini par son contenu */
}

/* 3. Style du Lien (A) - L'élément cliquable */
.gallery-item a {
    display: block;
    
    /* Padding basé sur la variable d'espacement */
    padding: var(--content-padding) calc(var(--standartspace) * 1.5); 
    
    text-decoration: none;
    
    /* Couleurs de base du bouton */
    color: var(--main-dark-color); /* Texte sombre */
    background-color: var(--first-color); /* Couleur claire de fond (premier plan) */
    
    border: 1px solid var(--first-color); /* Bordure basée sur la première couleur */
    border-radius: 4px; 
    font-family: "myFirstFont"; /* Utilisation d'une police plus lisible pour les options */
    white-space: nowrap; /* Empêche les noms de galerie de se couper */
    transition: background-color 0.2s, color 0.2s; /* Transition douce pour le survol */
}

/* 4. Style de l'Élément Actuellement Sélectionné */
.gallery-item.selected-item a {
    font-weight: bold;
    
    /* Couleur d'accentuation pour l'élément actif */
    background-color: var(--secondary-blue-color); 
    color: var(--main-clear-color); /* Texte clair sur fond bleu */
    border-color: var(--secondary-blue-color);
}

/* 5. Effet au Survol (Hover) */
/* S'applique uniquement aux éléments NON sélectionnés */
.gallery-item a:hover:not(.selected-item a) {
    /* Un léger changement de couleur au survol */
    background-color: var(--grey-clear-color); 
    border-color: var(--grey-clear-color);
}