/* GEM STYLES */


/* GEM FONT */
@font-face {
	font-family: 'Montserrat';
	src: url(webfonts/montserrat.woff2);
}

@font-face {
	font-family: 'Millionaire-Roman';
	src: url(webfonts/Millionaire-Roman.woff);
}

@font-face {
	font-family: 'Millionaire-Italic';
	src: url(webfonts/Millionaire-Italic.woff);
}

@font-face {
	font-family: 'Millionaire-Script';
	src: url(webfonts/Millionaire-Script.woff);
}

html {
	scroll-behavior: smooth;
}


body {
	padding-top: 200px;
	font-family: 'Montserrat';
	background-color: #fffffb;
	overflow-x: hidden;
}

.alignwide {
	margin-left: -80px;
	margin-right: -80px;
}

.alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
}

a {
	text-decoration: none;
}

.alignfull img {
	width: 100vw;
}

a,
a:visited {
	color: black;
}

a:hover {
	color: black;
}

a.wp-block-button__link {
	color: white;
	font-size: inherit;
}

.wp-block-buttons .wp-block-button__link {
	color: black;
	background-color: white;
	padding: 10px;
	border-radius: 30px;
	border: black 1px solid;
}

.main-navigation .primary-menu li.cta a {
	background-color: white;
	padding: 2px 8px;
	border-radius: 30px;
	color: black;
}

.wp-block-buttons .wp-block-button__link:hover {
	background-color: black;
	color: white;
}

/* TYPOGRAPHY */

h1 {
	font-family: 'Millionaire-Roman';
}

h2 {
	font-family: 'Millionaire-Roman';
}

.posted-on,
.posted-on a {
	font-weight: bold;
	text-decoration: none;
}

.entry-meta+h1 {
	margin-top: 0;
}

.site-main section {
	padding: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.site-main section:last-of-type {
	border: 0;
}




.home .entry-title {
	display: none;
}

.site-header .nav-container {
	background-color: rgb(24, 24, 24);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column
}



.site-branding {}

.main-navigation {
	display: flex;
}

.header-widget {}



.nav-group {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.widget {}

.site-main {
	padding: 0 2rem;
}



#secondary.widget-area {
	border-top: 1px solid;
	padding: 2rem;
}

/* WORDPRESS BLOCKS */


/* On force chaque élément de la boucle à occuper toute la largeur disponible */
.wp-block-post-template>* {
	width: 100%;
	display: block;
	/* On évite que flexbox ne casse la structure interne */
	clear: both;
}

/* classe personnalisée */
.article-close {
	width: 80%;
	/* Ou la largeur de ton choix, mais pas 100% pour permettre le mouvement */
	max-width: 1500px;
	margin-left: 8%;
	margin-right: auto;
	/* Space */
	margin-top: 150px;
	margin-bottom: 150px;
	/* Pousse l'élément vers la gauche par défaut */
}

/* 3. L'astuce du zig-zag : marge gauche automatique pour les éléments pairs */
.wp-block-post-template>*:nth-child(even) .article-close {
	margin-left: auto;
	margin-right: 0;
}


/* Customs - article-close */
.article-close h2 {
	/* transform: translate(-1.3em, -4.8em); */
	margin-bottom: 50px;
	mix-blend-mode: difference;
	color: white;
	position: relative;
	z-index: 10;
}

.article-close h2 a {
	color: white;
}


.infoAr {
	width: 580px;
	margin-left: 100px;
}

.more {
	padding: 10px;
	border-radius: 30px;
	border: black 1px solid;
}



.more :hover {
	color: #F7F3ED;
	background-color: black;
}


/* 1. Configuration pour les mobiles (écrans de moins de 1024px) */
@media (max-width: 1024px) {

	/* On force l'article à prendre toute la largeur sur mobile */
	.article-close {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	/* On réinitialise le décalage du titre pour qu'il ne sorte pas de l'écran */
	.article-close h2 {
		transform: translate(0, -2em);
		/* Ajuste selon tes besoins sur mobile */
		text-align: center;
		/* Optionnel: centrer le texte sur mobile */
	}

	/* On annule l'effet zig-zag pour les éléments pairs sur mobile */
	.wp-block-post-template>*:nth-child(even) .article-close {
		margin-left: 0;
		margin-right: 0;
	}
}

/* 2. Configuration pour les grands écrans (ce que nous avons fait avant) */
@media (min-width: 1025px) {
	.wp-block-post-template>* {
		width: 100%;
		display: block;
		clear: both;
	}

	.article-close {
		width: 80%;
		max-width: 1500px;
		margin-left: 8%;
		margin-right: auto;
	}

	.wp-block-post-template>*:nth-child(even) .article-close {
		margin-left: auto;
		margin-right: 0;
	}
}


/* --- SECTION SPÉCIFIQUE POUR LES BOÎTES --- */

/* 1. Le conteneur parent qui définit la grille */
.contenedor-boites {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
	padding: 20px;
	/* Perspective placée ici pour un effet 3D plus naturel sur l'ensemble */
	perspective: 1500px;
}

/* 2. La boîte qui sert de pivot (Le cadre) */
.MT {
	width: 440px;
	height: 600px;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	border: none;
	/* On enlève la bordure ici pour la mettre sur les faces */
}

/* 3. L'action de rotation */
.MT:hover {
	transform: rotateY(180deg);
}

/* 4. Style commun aux deux faces (Image et Texte) */
.MT .wp-block-media-text__media,
.MT .wp-block-media-text__content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	/* Force la largeur */
	height: 100% !important;
	/* Force la hauteur */
	margin: 0 !important;
	backface-visibility: hidden;
	/* INDISPENSABLE : cache le dos */
	-webkit-backface-visibility: hidden;
	border: 1px solid #000;
	overflow: hidden;
	display: block;
}










/* 5. La face AVANT (L'image) */
.MT .wp-block-media-text__media {
	z-index: 2;
	transform: rotateY(0deg);
}

.MT .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 6. La face ARRIÈRE (Le texte) */
.MT .wp-block-media-text__content {
	background-color: #fff;
	transform: rotateY(180deg);
	/* Déjà retournée par défaut */
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Centre le texte verticalement */
	align-items: center;
	/* Centre le texte horizontalement */
	padding: 40px;
	text-align: center;
	box-sizing: border-box;
}

/* Petit fix pour WordPress : on enlève les styles par défaut qui pourraient gêner */
.wp-block-media-text.MT {
	grid-template-columns: 100% !important;
	display: block;
}



/* PAGE-NEWS --------------------------------*/

.archive-article-columns {
	display: flex;
	justify-content: center;
	padding-bottom: 100px;
}

.archive-article-columns a {
	text-decoration: none;
}

.archive-article-column:first-of-type {
	width: 45%;
	padding-right: 2%;
}

.archive-article-column:last-of-type {
	width: 55%;
}

.archive-article-column img {
	/* 1. Force l'image à garder ses proportions sans s'étirer */
	object-fit: cover;
	/* 2. Centre la partie visible de l'image (recadrage intelligent) */
	object-position: center;
	/* 3. Optionnel : assure que l'image ne dépasse pas sur mobile */
	max-width: 100%;
}


/* CATALOGUE----------------------------- */

/* --- EFFET FLOU POUR LE COVER "CATAL" --- */

/* On cible l'image d'arrière-plan à l'intérieur de ton bloc .catal */
.catal .wp-block-cover__image-background {
	/* 1. L'effet de flou.(ex: 4px = léger, 20px = très flou) */
	filter: blur(8px);

	/* zoome très légèrement (105%) pour cacher les bords nets qui deviennent moches avec le flou */
	transform: scale(1.05);
}

/* Important : On s'assure que le zoom ne dépasse pas du cadre du bloc */
.catal {
	overflow: hidden;
}

.titre-carte {
	max-width: 390px;
}




/* HEADER */

.site-header {
	/* border-bottom: 1px solid black; */
	/* position: absolute; */
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2000;
	transition: transform 0.4s ease-in-out;
	/* Animation fluide */
	background-color: rgb(24, 24, 24);
	/* Assure-toi qu'il a un fond */
}


.nav-up {
	transform: translateY(-100%);
}



h1.site-title a,
p.site-title a {
	margin-top: 20px;
	display: block;
	width: 250px;
	height: 80px;
	background: url(images/gem-geneve-logo-blanc.svg) no-repeat center center;
	background-size: contain;
	text-indent: -5000px;

}

h1.site-title,
p.site-title {
	margin: 0 0 0.5rem 0;
	padding: 0;
	line-height: 1;
	font-size: 1rem;
}

.site-description {
	display: none;
}

/* NAVIGATION */
.main-navigation {
	width: auto;
}

.main-navigation li {}

.main-navigation .primary-menu li a {
	padding: 0.5em 1.2em;
	color: rgb(255, 255, 255);
	font-size: 1.05rem;
	text-transform: uppercase;
	border-bottom: 1px solid transparent;
}

.main-navigation .primary-menu li.main-navigation-external a {}

.main-navigation .primary-menu li.main-navigation-external a:after {
	content: " ➤";
}

.main-navigation ul {
	align-items: center;
}

.main-navigation ul.primary-menu ul {
	display: block;
	background-color: white;
	border-top: 1px solid black;
	margin-top: -1px;
}

.main-navigation ul.primary-menu ul li a {
	color: black;
	border: 0;
	border-right: 1px solid black;
	border-left: 1px solid black;
	border-bottom: 1px solid transparent;
	width: auto;
	font-size: 1rem;
	text-transform: none;
	white-space: nowrap;
}

.main-navigation ul.primary-menu ul li:last-of-type a {
	border-bottom: 1px solid black;
}

/* .main-navigation ul ul li:last-of-type{
	border-right: 0;
} */

.main-navigation ul.primary-menu li a:hover,
.main-navigation ul.primary-menu li.current-menu-item>a,
.main-navigation ul.primary-menu li.current-menu-ancestor>a {
	border-bottom: 1px solid black;
}

/* SECONDARY NAVIGATION */
.header-widget {
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	padding-top: 0.5rem;
}

.header-widget .widget {
	border-left: 1px solid rgb(255, 255, 255);
	padding-left: 1rem;
	margin-left: 1rem;
	margin-bottom: 0;
	display: flex;
	align-items: center;
}

.header-widget .menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

.header-widget .menu li a {
	display: inline-block;
	padding: 0.25em 1em;
	color: rgb(255, 255, 255);
	text-decoration: none;
	font-size: 0.8rem;
}

.wp-block-social-links {
	margin-bottom: 0;
}

.header-widget .widget h4 {
	margin: 0;
}

.header-widget .wp-block-button__link {
	font-size: 0.9rem;
}

/* RESPONSIVE NAVIGATION */
.menu-toggle {
	background-color: transparent;
	background: url(images/burger-off.svg) no-repeat center center;
	background-size: contain;
	width: 60px;
	height: 60px;
	border: 0;
	text-indent: -50000px;
	position: absolute;
	right: 1rem;
	top: 1rem;
	z-index: 1500;
}

.main-navigation.toggled .menu-toggle {
	position: fixed;
}

.toggled .menu-toggle {
	background-image: url(images/burger-on.svg);
}

.main-navigation.toggled ul,
.main-navigation.toggled .header-widget {
	display: block;
}

.main-navigation.toggled {
	display: block;
	position: fixed;
	padding: 1rem;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1200;
	background-color: white;
	overflow-y: auto;
}

@media screen and (max-width: 1200px) {
	.menu-toggle {
		display: block;
	}

	.nav-group {
		flex-direction: column-reverse;
	}

	.main-navigation ul,
	.header-widget {
		display: none;
	}

	.main-navigation .primary-menu li a {
		border: 0;
		padding: 0.5em 0;
	}

	.main-navigation .primary-menu {
		margin-bottom: 2rem;
	}

	.header-widget .widget {
		border-left: 0px solid black;
		padding-left: 0rem;
		margin-left: 0rem;
		margin-bottom: 2rem;
	}

	.header-widget .menu li a {
		padding: 0.5em 0;
	}

	.main-navigation ul ul {
		position: static;
		float: none;
		box-shadow: none;
		padding-left: 1rem;
	}

	.main-navigation ul.primary-menu ul {
		border-top: 0;
	}

	.main-navigation ul.primary-menu ul li a {
		padding: 0.2em 0;
		font-size: 0.85em;
	}

	h1.site-title a,
	p.site-title a {
		width: 150px;
		height: 70px;
	}
}

/* WORDPRESS BLOCKS -----------------------------------------------------------------*/


ul.wp-block-post-template {
	margin: 0;
	padding: 0;
}

.wp-block-cover.half-glass {
	align-items: stretch;
	/* background-color: rgba(255, 255, 0, 0.404); */
	padding: 0;
	transform: translate(0em, -12em);
}

.wp-block-cover.half-glass .wp-block-cover__inner-container {
	display: flex;
	align-items: stretch;
}

.wp-block-cover.half-glass .wp-block-cover__inner-container .wp-block-columns {
	gap: 0;
	flex: 1;
}

.wp-block-cover.half-glass .wp-block-cover__inner-container .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem;
	align-items: center;
}

.wp-block-cover.half-glass .wp-block-cover__inner-container .wp-block-column .wp-block-heading {
	width: 450px;
}

.wp-block-cover.half-glass .wp-block-cover__inner-container .wp-block-column:first-of-type {
	/* From https://css.glass */
	background: rgba(50, 50, 50, 0.26);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(17px);
	-webkit-backdrop-filter: blur(17px);
	border: 0.1px solid rgba(255, 255, 255, 0.29);
}

.text-bas-half-glass {
	margin: 0px auto;
	max-width: 1500px;
	color: white;
	transform: translate(0em, -23em);
}



/* ARTICLE OPEN ------------------------------------------------------------------ */



.single.category-news .entry-header {
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
}


.single.category-news .entry-header .custom-columns {
	display: flex;
	align-items: stretch;
}

.single.category-news .entry-header .custom-column {
	width: 50%;
}

.single.category-news .entry-header .custom-column :first-child {
	background: rgba(50, 50, 50, 0.26);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(17px);
	-webkit-backdrop-filter: blur(17px);
	border: 0.1px solid rgba(255, 255, 255, 0.29);
	height: 100%;

	padding-left: 1em;
	margin: 0;
}

.single.category-news .entry-header .entry-title {
	min-height: 50vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: white;
}


.single.category-news .entry-header .entry-meta {
	position: absolute;
}


.single.category-news .entry-header .entry-meta .entry-date {
	color: rgb(255, 255, 255);
	bottom: 0px;
	position: absolute;
}




/* CATEGORY NEWS ------------------------------------*/
/* 1. Configuration de la grille (Desktop : 2 colonnes) */
.archive-grid {
	display: grid;
	/* On force exactement 2 colonnes de taille égale */
	grid-template-columns: repeat(2, 1fr);
	gap: 60px 40px;
	/* Espace vertical important pour l'élégance */
	padding: 40px 8%;
	/* On aligne avec les marges de ton site */
	width: 100%;
	box-sizing: border-box;
}

/* 2. Style des articles */
.archive-grid article {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.archive-grid article img {
	width: 100%;
	height: 450px;
	object-fit: cover;
	margin-bottom: 20px;
}

/* 3. RESPONSIVE : Passage à 1 colonne */
@media (max-width: 900px) {
	.archive-grid {
		/* On passe à une seule colonne */
		grid-template-columns: 1fr;
		padding: 20px 5%;
		gap: 40px;
	}

	.archive-grid article img {
		height: 350px;
		/* On réduit un peu la hauteur sur mobile */
	}
}



/* ARCHIVE EXHIBITORS ----------------------*/
.archive-grid-exhibitors {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));
	grid-area: auto;
	gap: 1%;
}

.archive-grid-exhibitors a :hover {
	text-decoration: underline;
}

.alphabetical-group {
	margin-bottom: 2rem;
}

.alphabetical-group-letter {
	font-size: 3rem;
	border-bottom: 1px solid black;
}

.alphabetical-group h2 {
	margin-top: 0;
	margin-bottom: 0;
}

.post-type-archive-exhibitor .archive-grid {}

.post-type-archive-exhibitor .archive-grid article {

	margin-bottom: 3rem;
	position: relative;
}

.post-type-archive-exhibitor .archive-grid article img {
	width: 100%;
}

.post-type-archive-exhibitor .archive-grid article .entry-header {

	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 0.5rem;
}

/* SINGLE EXHIBITORS */
.exhibitor-info-box {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding: 1rem 0;
	margin-bottom: 3rem;
}

.exhibitor-info-box h4 {
	margin-top: 0;
}

.exhibitor-info-line .exhibitor-info-line-legend {
	font-weight: bold;
}

.single-exhibitor-layout-col-media img {
	width: 100%;
}

@media only screen and (min-width: 960px) {
	.single-exhibitor-layout {
		display: flex;
		justify-content: space-between;
	}

	.single-exhibitor-layout-col {
		width: 48%;
	}
}


/* FOOTER */

.site-footer {
	padding: 2rem;
	border-top: 1px solid;
}

.site-footer .menu {
	margin: 0;
	padding: 0;
}

.site-footer .menu li {
	list-style: none;
	padding: 0;
	margin: 0 0 0.5em 0;
}

.site-footer .menu li a {
	text-decoration: none;
}

.site-info {
	font-size: 0.8rem;
	font-weight: bold;
}