/*
 * Literata variable font fix.
 * Elementor's font-weight mapping renders inconsistently across browsers.
 * Keep font-weight at 400 and control the actual weight via the wght axis.
 */
.elementor .display-lg, 
.elementor-counter .elementor-counter-number-wrapper, .elementor .definition-title {
	font-weight: 400 !important;
	font-variation-settings: "wght" 900;
}

.elementor .display-xl, .elementor .weight-700, .elementor-139 .elementor-element.elementor-element-7a89a82 .elementor-nav-menu .elementor-item, .post-type-archive-projet .project-filter, .elementor .cta {
	font-weight: 400 !important;
	font-variation-settings: "wght" 700;
}

.elementor .big-number, .elementor .small-title, .elementor .body-800, .post-type-archive-projet .project-filters__label, .elementor .weight-700 em {
	font-weight: 400 !important;
	font-variation-settings: "wght" 800;
}
.elementor .body-600 {
	font-weight: 400 !important;
	font-variation-settings: "wght" 600;
}
.elementor .weight-700 em { font-style:normal; font-family:'Literata italic'; } 
 
#site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background-color .3s ease;
}

#site-header.is-stuck {
	background-color: #ffffff80; backdrop-filter: blur(3px); margin: 0;
}

.home #site-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}

/* Projects and Atelier grids
--------------------------------------------- */

.elementor :is(.projects-grid.projects-grid),
.elementor .atelier-grid > .e-collection-loop-layout-base {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	grid-auto-rows: 348px;
	padding: 0;
}

.projects-grid > [hidden] {
	display: none !important;
}

:is(.projects-grid) > [data-grid-position="1"],
.atelier-grid > .e-collection-loop-layout-base > [data-grid-position="1"] {
	grid-column: span 3;
	grid-row: span 2;
}

:is(.projects-grid) > [data-grid-position="2"],
.atelier-grid > .e-collection-loop-layout-base > [data-grid-position="2"],
:is(.projects-grid) > [data-grid-position="3"],
.atelier-grid > .e-collection-loop-layout-base > [data-grid-position="3"] {
	grid-column: span 3;
	grid-row: span 1;
}

:is(.projects-grid) > [data-grid-position="4"],
.atelier-grid > .e-collection-loop-layout-base > [data-grid-position="4"],
:is(.projects-grid) > [data-grid-position="5"],
.atelier-grid > .e-collection-loop-layout-base > [data-grid-position="5"],
:is(.projects-grid) > [data-grid-position="6"],
.atelier-grid > .e-collection-loop-layout-base > [data-grid-position="6"] {
	grid-column: span 2;
	grid-row: span 1;
}

:is(.projects-grid) > [data-grid-position="7"],
.atelier-grid > .e-collection-loop-layout-base > [data-grid-position="7"] {
	grid-column: span 4;
	grid-row: span 1;
}

:is(.projects-grid) > [data-grid-position="8"],
.atelier-grid > .e-collection-loop-layout-base > [data-grid-position="8"] {
	grid-column: span 2;
	grid-row: span 1;
}

.atelier-grid > .e-collection-loop-layout-base > [data-grid-position],
.atelier-grid > .e-collection-loop-layout-base > [data-grid-position] :is(a, picture, div):has(img) {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

.atelier-grid > .e-collection-loop-layout-base > [data-grid-position] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* References grid
--------------------------------------------- */

.references-grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.reference-card {
	box-sizing: border-box;
	display: flex;
	min-width: 0;
	min-height: 310px;
	padding: 20px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 8px;
	border: 1px solid #CFBFFE;
	background: #E9E2FF;
}

.reference-card__title {
	margin: 0;
	color: var(--ink, #010018);
	font-family: 'Literata', serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
	overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
	.references-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.references-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Project filters
--------------------------------------------- */

.project-filters {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.post-type-archive-projet .project-filters__label {
	flex: 0 0 auto;
	font-family: var(--e-global-typography-body-font-family, 'Fustat'), sans-serif;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #010018;
}

.post-type-archive-projet .project-filters__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.post-type-archive-projet .project-filter {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	border: 1px solid rgba(1, 0, 24, 0.20);

	border-radius: 999px;

	background: transparent;
	color: #010018;
	font-family: 'Fustat', sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.8px;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color 180ms ease,
		color 180ms ease;
}

.post-type-archive-projet .project-filter:hover,
.post-type-archive-projet .project-filter.is-active {
	background: #010018;
	color: #fff;
}

#contact-right::before {
	content: "";
	position: absolute; left: 0; top: 0; height: 100%; width: 1px;
	background: linear-gradient(90deg, #9EB8FF 0%, #F06CFF 100%);
}

#prefooter::after {
	content: "";
	position: absolute; left: auto; right:-40px; top: 0; height: 100%; width: 1px;
	background: linear-gradient(90deg, #9EB8FF 0%, #F06CFF 100%);
}
footer {overflow: hidden;}
.eclipse { position: absolute; width: 1244px; height: 1244px; border-radius: 1244px;}
.eclipse-footer {
	background: #CFBFFE;
	filter: blur(257px);
	right: -680px;
	top: 50%;
	transform: translateY(-50%)
}
/* Header
--------------------------------------------- */

header {
	position: sticky !important;
	top: 0;
	z-index: 1000;
	width: 100%;
}

/* Main menu numbering
--------------------------------------------- */
.my-main-menu {width: 100%}
/* Main menu numbering
--------------------------------------------- */

.my-main-menu .elementor-nav-menu {
	counter-reset: main-menu;
}

.my-main-menu .elementor-nav-menu > li {
	position: relative;
	counter-increment: main-menu;
}

.my-main-menu .elementor-nav-menu > li::before {
	content: counter(main-menu, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 45%;
	transform: translateY(-50%);

	font-family: 'Literata';
	font-size: 10px;
	font-weight: 400;
	line-height: 1;

	color: #010018;
}

.my-main-menu .elementor-nav-menu > li > a {
	display: block;
	padding-left: 24px;
}

.my-main-menu li {
	border-bottom: 1px solid rgba(1, 0, 24, .12) !important;
}
.my-main-menu ul > li:last-child {border-bottom: 0px solid rgba(1, 0, 24, .12) !important;}
.my-main-menu .elementor-item::before,
.my-main-menu .elementor-item:hover::before,
.my-main-menu .elementor-item:focus::before,
.my-main-menu .elementor-item.elementor-item-active::before {
	opacity: 1;
}


.exp-menu .elementor-nav-menu > li::before {
	content: counter(main-menu, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 24%;
	transform: translateY(0);

	font-family: 'Literata';
	font-size: 10px;
	font-weight: 400;
	line-height: 1;

	color: #010018;
}
#utopies-section::before {
	content: '';
	position: absolute;
	z-index: -1;

	width: max(1200px, 120vw);
	aspect-ratio: 1768 / 939;

	left: -20vw;
	top: 120px;

	background: url('../img/Vector3.avif') center / contain no-repeat;

	pointer-events: none;
}
#utopies-section > * {
	position: relative;
	z-index: 1;
}
body.page-id-45::before {
	content: '';
	position: absolute;
	z-index: -1;

	width: max(1666px, 120vw);
	aspect-ratio: 1768 / 939;

	left: 0vw;
	top: -180px;

	background: url('../img/Vector-about.avif') center / cover no-repeat;

	pointer-events: none;
}
body.page-id-45 main > * {
	position: relative;
	z-index: 1;
}



/* Contact form
--------------------------------------------- */

.icd-contact-form {
	width: 100%;
	color: var(--ink, #010018);
	font-family: var(--body, 'Fustat'), sans-serif;
}

.icd-contact-form__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	transition: opacity 180ms ease;
}

.icd-contact-form__field { grid-column: 1 / -1; min-width: 0; }
.icd-contact-form__field--half { grid-column: auto; }
.icd-contact-form__control { position: relative; }

.icd-contact-form .icd-contact-form__control :is(input, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 72px;
	margin: 0;
	padding:  20px 12px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--white, #fff);
	color: var(--ink, #010018);
	font: inherit;
	line-height: 1.5;
	box-shadow: none;
}

.icd-contact-form .icd-contact-form__control textarea {
	min-height: 190px;
	resize: vertical;
}

.icd-contact-form__control label {
	position: absolute;
	top: 24px;
	left: 20px;
	right: 20px;
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 2px;
	line-height: 1.5;
	text-transform: uppercase;
	pointer-events: none;
	transition: top 150ms ease, font-size 150ms ease;
}

.icd-contact-form__control :is(input, textarea):focus + label,
.icd-contact-form__control :is(input, textarea):not(:placeholder-shown) + label {
	top: 8px;
	font-size: 10px;
}

.icd-contact-form .icd-contact-form__control :is(input, textarea):focus {
	outline: 2px solid var(--ink, #010018);
	outline-offset: 2px;
}

.icd-contact-form .is-invalid :is(input, textarea) { border-color: #a52035; }
.icd-contact-form__error { display: block; color: #8c1930; font-size: 14px; }
.icd-contact-form__error:empty { display: none; }
.icd-contact-form__status { margin: 12px 0 0; font-size: 14px; }
.icd-contact-form__status:empty { display: none; }
.icd-contact-form.is-busy .icd-contact-form__fields { opacity: .55; }
.icd-contact-form :disabled { cursor: wait; }

.icd-contact-form .icd-contact-form__submit,
.icd-contact-dialog button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 64px;
	margin-top: 20px;
	padding: 18px 24px;
	border: 1px solid var(--ink, #010018);
	border-radius: 999px;
	background: var(--ink, #010018);
	color: var(--white, #fff);
	font-family: var(--body, 'Fustat'), sans-serif;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
}
.icd-contact-form .icd-contact-form__submit:hover,
.icd-contact-dialog button:hover {
	background: var(--white, #fff);
	color: var(--ink, #010018);
}
.icd-contact-form .icd-contact-form__submit:disabled { opacity: .65; cursor: wait; }
.icd-contact-form__submit:focus-visible,
.icd-contact-dialog button:focus-visible { outline: 2px solid var(--ink, #010018); outline-offset: 4px; }

.icd-contact-form__loader:not([hidden]) {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: icd-contact-spin .8s linear infinite;
}

@keyframes icd-contact-spin { to { transform: rotate(360deg); } }

.icd-contact-dialog {
	box-sizing: border-box;
	position: fixed;
	inset: 0;
	width: min(440px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	margin: auto;
	padding: 36px;
	border: 0;
	border-radius: 24px;
	background: var(--white, #fff);
	color: var(--ink, #010018);
	font-family: var(--body, 'Fustat'), sans-serif;
	text-align: center;
}

.icd-contact-dialog::backdrop { background: rgba(1, 0, 24, .55); }
.icd-contact-dialog h2 { margin: 0 0 12px; }
.icd-contact-dialog p { margin: 0; }

@media (max-width: 600px) {
	.icd-contact-form__fields { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.icd-contact-form__fields,
	.icd-contact-form__control label { transition: none; }
	.icd-contact-form__loader:not([hidden]) { animation: none; }
}