/* 
	Theme Name: Atelier f28
	Text Domain: atelierf28
	Domain Path: /languages
	Version: 2.0
	Last update : 31.8.26

	This theme serves several sites
	Any change here means rechecking the other sites before they go live.
 */

/* === BASE === */

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;   /* iOS still inflates text in landscape */
}

body { margin: 0; }

abbr[title] { text-decoration: underline dotted; }

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* Form controls — kept as normalize had them. Browsers still fall back to
   the system font here, and Gravity Forms outputs fieldset/legend. */
button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button, select { text-transform: none; }

[type="button"], [type="reset"], [type="submit"], button {
	-webkit-appearance: button;
}

fieldset { padding: 0.35em 0.75em 0.625em; }

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

textarea { overflow: auto; }

[type="checkbox"], [type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}


/* === VARIABLES === */

:root {
	/* === Colors === */
	--color-main: #333333;
	--color-primary: #888888;
	--color-secondary: #666666;
	--color-lightgray: #f0f0f0;	
	--color-light: #ffffff;
	--color-dark: #111111;
	--color-error: #b3261e;

	--color-light-op2: color-mix(in srgb, var(--color-light) 20%, transparent);
	--color-light-op9: color-mix(in srgb, var(--color-light) 90%, transparent);
	--color-dark-op8:  color-mix(in srgb, var(--color-dark)  80%, transparent);
	--color-dark-op9:  color-mix(in srgb, var(--color-dark)  90%, transparent);

	/* === Typography === */
	--typo-title: sans-serif;
	--fw-title-medium : 500;
	--fw-title-bold : 700;
	--fw-title-extrabold : 800;

	--typo-main: sans-serif;
	--fw-light : 300;
	--fw-regular : 400;
	--fw-medium : 500;
	--fw-semibold : 600;
	--fw-bold : 700;
	--fw-extrabold : 800;

	--fs-title-xxl : clamp(2rem, 6vw, 4rem);			/* h1 — scale 533px–1333px */
	--fs-title-xl  : clamp(1.2rem, 3vw, 2.5rem);	/* h2 — scale 640px–1333px */
	--fs-title-lg  : clamp(1.1rem, 2.5vw, 2rem);	/* h3 — scale 704px–1280px */
	--fs-title-md  : clamp(1rem, 2vw, 1.5rem);		/* h4 — scale 800px–1200px */

	--fs-xl  : clamp(1.2rem, 3vw, 2.5rem);				/* big big p — scale 640px–1333px */
	--fs-lg  : clamp(1.1rem, 2.2vw, 1.8rem);			/* big p */
	--fs-md  : clamp(1rem, 2vw, 1.4rem);					/* p */
	--fs-sm  : clamp(0.9rem, 1.5vw, 1.2rem);			/* type meta */
	--fs-xs  : clamp(0.8rem, 1.3vw, 1rem);				/* type ui */
	--fs-xxs : clamp(0.7rem, 1.1vw, 0.85rem);			/* type micro-label */

	--letter-spacing-md : 0.08em;
	--letter-spacing-lg : 0.12em;

	--line-height-md : 1.7;
	--line-height-sm : 1.5;
	--line-height-xs : 1;

	/* === width & height === */
	--width-inner-xl : 1400px;
	--width-inner-lg : 1200px;
	--width-inner-md : 950px;
	--width-inner-sm : 500px;

	--width-logo-header : clamp(70px, 25vw, 250px);
	--width-logo-header-small : clamp(40px, 4vw, 65px);
	--width-logo-hero : clamp(300px, 40vw, 500px);
	--width-logo-footer: clamp(60px, 5vw, 80px);

	--height-lg : 70vh;
	--height-md : 50vh;
	--height-sm : 40vh;
	--height-xs : auto;

	/* === padding === */
	--padding-xl : clamp(3rem, 9vw, 7rem);				/* type big slider */
	--padding-lg : clamp(2rem, 6vw, 5rem);				/* type section top / botttom */
	--padding-md : clamp(1.5rem, 2.5vw, 2rem);		/* type container */
	--padding-sm : clamp(0.8rem, 1vw, 1rem);			/* type ui */
	--padding-xs : clamp(0.4rem, 1vw, 0.6rem);		/* type small scroll */

	/* === margin === */
	--margin-xl : clamp(2.5rem, 5vw, 4rem);				/* type section header — scale 800px–1280px */
	--margin-lg : clamp(1.2rem, 3vw, 3rem);				/* type section header — scale 640px–1600px */
	--margin-md : clamp(1rem, 2vw, 1.5rem);				/* type title h2, h3 — scale 800px–1200px */
	--margin-sm : clamp(0.8rem, 1.5vw, 1rem);			/* type title h3 */
	--margin-xs : clamp(0.5rem, 1.5vw, 0.8rem);		/* type title h4 */
	
	/* === ratio === */
	--ratio-horizontal: 3 / 1;
	--ratio-landscape: 16 / 9;
	--ratio-square: 1 / 1;
	--ratio-tall: 5 / 4;
	--ratio-portrait: 4 / 5;

	/* === border radius === */
	--br-xl : 2rem;
	--br-lg : 1rem;
	--br-md: 0.5rem;
	--br-sm : 0.3rem;
	--br-round : 50%;

	/* === shadow === */
	--shadow : 1px 3px 15px rgba(0, 0, 0, 0.6);
	--shadow-light : 1px -2px 12px rgba(0, 0, 0, 0.2);
	--shadow-bottom : 1px 1px 5px rgba(0, 0, 0, 0.3);
	--shadow-inset : inset 2px 2px 20px rgba(0, 0, 0, 0.8);

	/* === transition === */
	--transition-fast: 0.2s ease;
	--transition-medium: 0.3s ease;
	--transition-slow: 0.5s ease;
}

/* === TYPOGRAPHY === */
html,
body {
	font-family: var(--typo-main);
	font-size: 1em;
	color: var(--color-main);
	font-weight: var(--fw-light);
	background-color: var(--color-light);
	margin: 0;
}
a,
a:focus,
a:active {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}
main a {
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
}
a:hover {
	color: var(--color-main);
	text-decoration: none;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-focus, currentColor);
	outline-offset: 4px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-focus, currentColor);
	outline-offset: 0;
	border-radius: var(--br-md);
}
h1, h2, h3, h4,
span.h1-title {
	display: block;
	position: relative;
	margin: 0;
}
h1 a, h2 a, h3 a, h4 a {
	text-decoration: none;
}
h1,
span.h1-title {
	font-family: var(--typo-title);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-title-xxl);
	line-height: var(--line-height-sm);
}
.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	margin-left: 0.2em;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	vertical-align: middle;
}
.submenu-toggle::before {
	content: '';
	width: 0.45em;
	height: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.1em);
	transition: transform 0.2s ease;
}
.submenu-toggle[aria-expanded="true"]::before {
	transform: rotate(-135deg) translateY(-0.1em);
}

/* Skip link — off-screen until it takes focus */
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	padding: var(--padding-sm) var(--padding-md);
	background: var(--color-light);
	color: var(--color-main);
	font-size: var(--fs-xs);
	text-decoration: none;
	transform: translateY(-150%);
	transition: transform 0.2s ease;
}
.skip-link:focus {
	transform: translateY(0);
}
.sr-only,
h1.h1-hidden {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
h2,
h2.title {
	font-family: var(--typo-title);
	font-weight: var(--fw-title-bold);
	font-size: var(--fs-title-xl);
	margin: 0 0 var(--padding-md) 0;
}
h3 {
	font-family: var(--typo-main);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-title-lg);
	margin: 0 0 var(--padding-sm) 0;
}
h3.surtitle {
	font-weight: var(--fw-light);
	font-size: var(--fs-title-md);
	text-transform: uppercase;
	margin: 0 0 var(--padding-sm) 0;
	letter-spacing: var(--letter-spacing-md);
}
h4 {
	font-weight: var(--fw-bold);
	font-size: var(--fs-title-md);
	margin: var(--margin-xs) 0;
}
p { 
	line-height: var(--line-height-md);
	font-size: var(--fs-md);
	margin: 0 0 var(--margin-sm) 0;
}

.text-content {
	width: 100%;

	& h2, & h3, & h4 { margin: var(--margin-md) 0 var(--margin-sm) 0; }

	> *:first-child { margin-top: 0; }
	> *:last-child  { margin-bottom: 0; }

	& ul, & ol {
		line-height: var(--line-height-md);
		font-size: var(--fs-md);
		margin: 0 0 var(--margin-sm) 0;
		padding-left: 1rem;

		& li {
			position: relative;
			list-style: none;
			padding-left: 1rem;
		}
	}

	& ul li::before {
		position: absolute;
		left: 0;
		content: "\2022";
		color: var(--color-primary);
		display: inline-block;
		width: 1rem;
		margin-left: -1rem;
		font-weight: var(--fw-title-extrabold);
	}
}
strong,
.strong {
	font-weight: var(--fw-bold);
}
em {
	font-style: italic;
}
/* === BASE ELEMENTS === */
hr {
	border-top: 1px solid var(--color-primary);
	border-bottom: 0;
	height: 1px;
	margin: 1rem 0 2rem 0;
}
pre {
	background-color: var(--color-secondary);
	border: 1px solid var(--color-primary);
	font-family: monospace;
	padding: 0.5rem;
	margin: 1rem 0;
	font-size: var(--fs-xs);
}
blockquote {
	background-color: var(--color-primary);
	padding: var(--padding-md);
	margin: var(--margin-sm) 0;
	border-radius: var(--br-md);
}
blockquote p:last-of-type {
	margin: 0;
}
iframe {
	border: 0;
}
.compensate-for-scrollbar {
  margin-right: 0 !important;
}

/* === LAYOUT UTILITIES === */
*,
*::before,
*::after {
  box-sizing: border-box;
}
main {
	position: relative;
}
section {
	position: relative;
	padding-top: var(--padding-lg);
	padding-bottom: var(--padding-lg);
	text-align: left;
}
section.section-sm {
	padding-top: var(--padding-md);
	padding-bottom: var(--padding-md);
}
section.section-sm.flush,
.flush {
	padding-top: 0;
	padding-bottom: 0;
}
section.section-sm.flush-top,
.flush-top {
	padding-top: 0;
}
section.section-sm.flush-bottom,
.flush-bottom {
	padding-bottom: 0;
}
.section-header {
	margin-bottom: var(--margin-xl);
}
.section-header > *:last-child {
	margin-bottom: 0;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
.media-size-width {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	border-radius: var(--br-md);
	overflow: hidden;
}
.coverfit,
.coverfit img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.height_full,
.height_full .swiper {
	height: 100vh;
	height: 100dvh;
	scroll-snap-align: start;
}
.height_lg,
.height_lg .swiper {
	height: var(--height-lg);
}
.height_md,
.height_md .swiper {
	height: var(--height-md);
}
.height_sm,
.height_sm .swiper {
	height: var(--height-sm);
}
.height_xs,
.height_xs .swiper {
	height: var(--height-xs);
}
.horizontal {
  --size-ratio: var(--ratio-horizontal);
  aspect-ratio: var(--size-ratio);
}
.landscape {
  --size-ratio: var(--ratio-landscape);
  aspect-ratio: var(--size-ratio);
}
.square {
  --size-ratio: var(--ratio-square);
  aspect-ratio: var(--size-ratio);
}
.tall {
  --size-ratio: var(--ratio-tall);
  aspect-ratio: var(--size-ratio);
}
.portrait {
  --size-ratio: var(--ratio-portrait);
  aspect-ratio: var(--size-ratio);
}
.padded {
	padding-left: var(--padding-md);
	padding-right: var(--padding-md);
}
.inner,
.force-inner {
	position: relative;
	display: block;
	width: 100%;
	max-width: var(--width-inner-lg);
	margin: 0 auto;
}
.inner-md {
	display: block;
	width: 100%;
	max-width: var(--width-inner-md);
	position: relative;
	margin: 0 auto;
}
.inner-sm {
	display: block;
	width: 100%;
	max-width: var(--width-inner-sm);
	position: relative;
	margin: 0 auto;
}
.breakout,
.breakout .inner {
	width: 100%;
	max-width: 100%;
}
.breakout .inner-sm,
.breakout .inner .inner-sm {
	width: 100%;
	max-width: 100%;
}
.breakout .force-inner {
	padding-left: var(--padding-md);
	padding-right: var(--padding-md);
}
/* ── Utility grid (responsive, no media queries) ──────────────── */
.grid {
	display: grid;
	gap: var(--grid-gap, var(--padding-md));
	align-content: start;
	grid-template-columns: repeat(
		auto-fill,
		minmax(min(100%, var(--grid-min, 18rem)), 1fr)
	);
}
.grid-sm  { --grid-min: 14rem; }
.grid-md  { --grid-min: 18rem; }
.grid-lg  { --grid-min: 24rem; }
.grid-xl  { --grid-min: 32rem; }
.grid-flush { --grid-gap: 2px; }

/* ── Count-based grids ────────────────────────────────────────── */
/* .grid + size modifier : list of unknown length.
   .grid-N : fixed count that carries meaning. Never both on one element. */
.grid-2,
.grid-3 {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--padding-md);
	align-content: start;
}
.no-gap {
	gap: 0;
}
.is-centered,
section.text-image .content-text.is-centered {
	text-align: center;
	align-items: center !important;
}
section.layout-columns .column-box .is-centered .column-img.picto.inline {
	justify-content: center;
}
.grayscale,
.grayscale img {
	filter: grayscale(100%);
}
.wp-caption-text {
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.6);
	font-size: 0.8rem;
	font-style: italic;
	padding: 0 0.3rem !important;
	color: var(--color-main);
}
.copyright {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	padding: 0.3rem 0.5rem;
	line-height: var(--line-height-xs);
	background: rgba(255, 255, 255, 0.6);
	font-size: clamp(0.6rem, 2vw, 0.8rem);
	font-weight: var(--fw-medium);
	color: var(--color-main);
	border-radius: var(--br-md);
}
.no-image {
	background-color: var(--color-primary);
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: var(--fw-bold);
	width: 100%;
	height: 200px;
	padding: var(--padding-md);
}
/* close button */
.close-btn {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 30px;
	height: 30px;
	border-radius: var(--br-round);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.3rem;
	background-color: var(--color-primary);
	z-index: 10;

	& svg { fill: var(--color-light); width: 25px; height: 25px; }
	&:hover { background-color: var(--color-main); }
}

/* === COLORS === */
.bg-light     { background-color: var(--color-light); }
.bg-gray      { background-color: var(--color-lightgray); }
.bg-primary   { background: var(--color-primary); }
.bg-secondary { background: var(--color-secondary); }
.bg-dark      { background-color: var(--color-dark); }

/* text & links on coloured backgrounds */
:is(.bg-primary, .bg-secondary) {
	:is(h2, h3, h4, p, ul li, ul li::before, a, a:focus, a:active, a:hover),
	& section.ui-faq .faq-list-item .plus::before,
	& section.content-animator span.animated-text { color: var(--color-light); }

	& a.button-link {
		background-color: var(--color-light);

		&, &:focus, &:active { color: var(--color-primary); }
	}
}
.bg-dark {
	:is(h2, h3, h4, p, ul li, ul li::before, a:hover),
	& section.ui-faq .faq-list-item .plus::before,
	& section.content-animator span.animated-text { color: var(--color-light); }

	& a.button-link:hover { background-color: var(--color-light); color: var(--color-primary); }
}

/* === ICONS === */
.icon-block {
	display: block;
}
.icon-wrap {
	margin: 0 1.3rem 0 0;

	&:last-of-type { margin: 0; }
}
.icon {
	display: inline-block;
	height: auto;
	opacity: 1;

	&.sm { width: clamp(15px, 2vw, 25px); }
	&.md { width: clamp(20px, 3vw, 35px); }
	&.lg { width: clamp(25px, 4vw, 45px); }
}

/* === HEADER === */
.header {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: auto;
	padding: var(--padding-sm) var(--padding-md);
	z-index: 11;
	transition: var(--transition-medium);

	&.fullheight {
		position: fixed;
		background-color: transparent;
	}

	/* small header */
	&.smallscroll {
		position: fixed;
		align-items: center;
		padding: var(--padding-sm) var(--padding-md);

		.header-logo.lbig { opacity: 0; visibility: hidden; display: none; }
		.header-logo.lsmall { opacity: 1; visibility: visible; display: block; }
	}

	.logo { z-index: 40; }

	.header-logo {
		position: relative;
		z-index: 15;

		&.lbig img { width: var(--width-logo-header); height: auto; }

		&.lsmall {
			opacity: 0;
			visibility: hidden;
			display: none;
			transition: var(--transition-medium);

			& img { width: var(--width-logo-header-small); height: auto; }
		}
	}
}

/* home: logo hidden, replaced by the tagline logo in the hero */
.home .header .header-logo { display: none; }

/* menus */
.header-menu {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	align-items: center;
	z-index: 30;
}

/* menu item lang & icons */
.nav-item {
	margin-right: var(--margin-lg);

	/* lang */
	&.lang {
		font-size: var(--fs-md);
		font-weight: var(--fw-bold);
		line-height: var(--line-height-sm);
		color: var(--color-light);
	}
}

/* === TOGGLE === */
.menu-toggle {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	background-color: transparent;
	border: 0;
	border-radius: var(--br-round);
	padding: 0;
	z-index: 30;
	cursor: pointer;
	transition: var(--transition-medium);

	&.active,
	.smallscroll &,
	&:hover {
		background-color: var(--color-primary);
	}

	.menu_open {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: 30px;
		height: 20px;

		& span {
			display: block;
			width: 100%;
			height: 3px;
			background: var(--color-light);
			border-radius: var(--br-sm);
			position: absolute;
			left: 0;
			transition: var(--transition-medium);

			&:nth-child(1) { top: 0; }
			&:nth-child(2) { top: 8px; margin-left: 3px; }
			&:nth-child(3) { top: 16px; }
		}
	}

	/* active state (menu open) */
	&.active .menu_open {
		& span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
		& span:nth-child(2) { opacity: 0; transform: scale(0); }
		& span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
	}
}

/* === MAIN MENU === */

/* full-screen overlay, dropped from the top */
div.menu-wrap {
	position: fixed;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	gap: var(--padding-lg);
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	padding: var(--padding-xl) var(--padding-md);
	margin: 0;
	background-color: var(--color-light);
	z-index: 8;
	overflow-x: hidden;
	overflow-y: auto;
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform var(--transition-slow), visibility 0s linear 0.5s;

	&.active {
		transform: translateY(0);
		visibility: visible;
		transition: transform var(--transition-slow), visibility 0s;

		/* staggered reveal */
		& nav.main-menu ul.menu > li,
		.menu-social { opacity: 1; transform: translateY(0); }

		& nav.main-menu ul.menu > li:nth-child(1) { transition-delay: .14s; }
		& nav.main-menu ul.menu > li:nth-child(2) { transition-delay: .20s; }
		& nav.main-menu ul.menu > li:nth-child(3) { transition-delay: .26s; }
		& nav.main-menu ul.menu > li:nth-child(4) { transition-delay: .32s; }
		& nav.main-menu ul.menu > li:nth-child(5) { transition-delay: .38s; }
		& nav.main-menu ul.menu > li:nth-child(6) { transition-delay: .44s; }
		& nav.main-menu ul.menu > li:nth-child(7) { transition-delay: .50s; }
		& nav.main-menu ul.menu > li:nth-child(8) { transition-delay: .56s; }
		.menu-social { transition-delay: .62s; }
	}

	.social-icon {
		background-color: rgba(0, 0, 0, 0.08);

		& img { filter: brightness(0); }

		&:hover,
		&:focus-visible {
			background-color: var(--color-primary);
			& img { filter: brightness(0) invert(1); }
		}
	}
}

/* menu open: header pinned, background neutralised, dark logo visible on the light overlay */
body.menu-open {
	overflow: hidden;

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: transparent;

		.header-logo.lbig { display: block; opacity: 1; visibility: visible; }
		.header-logo.lsmall { display: none; }
	}

	&.home .header .header-logo.lbig { display: block; opacity: 1; visibility: visible; }
}

ul.menu {
	padding: 0;
	margin: 0;

	& li {
		list-style: none;

		& a {
			position: relative;
			color: var(--color-main);

			&:hover { color: var(--color-primary); }
		}

		/* item actif / courant */
		&.current-menu-parent a:not(ul.sub-menu li a),
		&.current-page-parent a:not(ul.sub-menu li a),
		& ul.sub-menu li.current-menu-item a,
		&.current-menu-item a {
			color: var(--color-primary);
			text-decoration: none;
			font-weight: var(--fw-extrabold);
		}

		/* CTA button inside the menu */
		&.btnMenuLink {
			display: inline-block;
			margin-top: 2rem;
			background-color: var(--color-light);
			border: 0.05rem solid var(--color-primary);
			border-radius: var(--br-md);
			padding: 0.3rem 0.8rem;

			&:hover { border: 0.05rem solid var(--color-main); }

			& a { color: var(--color-primary); font-weight: var(--fw-regular); }
			&:hover a { color: var(--color-main); }
		}
	}
}
header.fullheight.smallscroll ul.menu li.current-menu-item a:not(ul.sub-menu li a) {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: var(--fw-extrabold);
}
.smallscroll ul.menu li.btnMenuLink { border: 0; padding: 0; }

/* nav principale — overlay burger */
nav.main-menu {
	width: 100%;
	max-width: var(--width-inner-md);
	margin: 0 auto;
	padding: 0 var(--padding-md);
	text-align: center;

	& ul li {
		margin-bottom: var(--margin-md);
		padding-bottom: 0;

		& a {
			font-size: var(--fs-title-xxl);
			font-weight: var(--fw-extrabold);
			line-height: var(--line-height-sm);
			width: 100%;
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
			gap: 0.5rem;
		}
	}

	/* disabled link (sub-menu parent) */
	& ul.menu li.disabled-link {
		& a { pointer-events: none; }
		.sub-menu li a { pointer-events: all; }
	}

	/* sous-menu */
	& ul.menu li {
		.sub-menu { display: none; }
		.sub-menu:not([hidden]) { display: block; }

		& ul.sub-menu {
			padding: 1rem 0 0 0;

			& li {
				margin-bottom: var(--margin-sm);
				padding-bottom: 0;
				border-bottom: 0;

				& a { font-size: var(--fs-md); text-transform: none; font-weight: var(--fw-regular); }
			}
		}
	}

	/* chevron on items that have children */
	& ul.menu li.menu-item-has-children {
		& a::after {
			content: "";
			display: inline-block;
			width: 10px;
			height: 10px;
			border: solid var(--color-main);
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
			margin-left: 0.5rem;
			vertical-align: text-top;
			margin-top: 5px;
			transform-origin: center;
		}

		&.active a::after { transform: rotate(225deg); margin-top: 10px; }

		&.current-menu-parent a::after,
		&.current-menu-parent.active a::after {
			border: solid var(--color-main);
			border-width: 0 2px 2px 0;
		}

		.sub-menu li a::after { content: none; }
	}

/* Current-item indicators are handled by child themes.
   The parent only provides the state classes and positioning context:
   WordPress uses `current-menu-item` / `current-menu-parent`,
   while one-page navigation uses `.is-current` via JS. */
	& ul.menu > li > a { position: relative; }

	& ul.menu > li {
		/* initial reveal state, hidden before opening */
		opacity: 0;
		transform: translateY(14px);
		transition: opacity var(--transition-medium), transform var(--transition-medium);
	}
}

/* social links */
.menu-social {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: var(--padding-sm);

	/* initial reveal state */
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--transition-medium), transform var(--transition-medium);
}

/* chevron langue */
.lang span::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border: solid var(--color-main);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	margin-left: 0.5rem;
	vertical-align: text-top;
	margin-top: 5px;
	transform-origin: center;
	border-color: var(--color-light);
}

@media (prefers-reduced-motion: reduce) {
	div.menu-wrap,
	div.menu-wrap.active { transition: visibility 0s; }

	nav.main-menu ul.menu > li,
	.menu-wrap .menu-social { opacity: 1; transform: none; transition: none; }
}

/* === VIDEO BACKGROUND === */
.video-bg {
	.inner { display: flex; justify-content: center; align-items: center; }

	/* fullwidth */
	&.mode-fullwidth {
		position: relative;
		overflow: hidden;

		.video-fw iframe {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100vw;
			height: auto;
			aspect-ratio: 16 / 9;
			transform: translate(-50%, -50%);
			pointer-events: none;

			/* avoids black bars depending on the screen ratio */
			@media (min-aspect-ratio: 16/9) { width: 100vw; height: auto; }
			@media (max-aspect-ratio: 16/9) { width: auto; height: 100vh; }
		}
	}

	/* contained */
	&.mode-contained .video-contained {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: var(--br-md);

		& iframe {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			border: none;
			pointer-events: none;
		}
	}
}

/* video embed inside text-image */
.content-video .embed-video {
	position: relative;
	padding-bottom: 56.25%;
	overflow: hidden;
	width: 100%;
	height: auto;
	margin: 0;

	& iframe, & object, & embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/* embed via shortcode paragraphe */
p.embed-video {
	max-width: 600px;
	width: 100%;
	margin: var(--padding-md) 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--br-sm);

	& iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: none;
	}
}
/* video embedded in the WYSIWYG (text-content) */
.text-content iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: none;
	border-radius: var(--br-md);
	margin: 1.5em 0;
}

/* === ANIMATIONS TEXTE === */
.home .text_img.breakout .content-text:not(.is-centered) h2.title-shift {
	font-size: var(--fs-title-xxl);
	margin-bottom: var(--margin-lg);
	width: 100%;
	z-index: 3;
	opacity: 0.8;
	transform: translateX(0);
	transition: transform 1.8s ease, opacity 1s ease;
}
.home .text_img.breakout.left .content-text:not(.is-centered) h2.title-shift.inview {
	transform: translateX(-23%);
	opacity: 1;
}
.home .text_img.breakout.right .content-text:not(.is-centered) h2.title-shift.inview {
	text-align: right;
	transform: translateX(20%);
	opacity: 1;
}

.text_img.breakout .content-text:not(.is-centered) h2.title-shift,
.post-header .left .h1-title.title-shift {
	font-size: var(--fs-title-xxl);
	margin-bottom: var(--margin-lg);
	width: 100%;
	z-index: 3;
	opacity: 0.5;
	transform: translateX(13%);
	transition: transform 1.8s ease, opacity 1s ease;
}
.post-header .left .h1-title.title-shift.inview,
.text_img.breakout .content-text:not(.is-centered) h2.title-shift.inview  {
	transform: translateX(0);
	opacity: 1;
}

/* === HERO === */
section.hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;

	.swiper,
	.hero-media { width: 100%; }

	.hero-static,
	.swiper-slide {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.hero-img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
		z-index: 0;
	}

	.tagline-logo {
		width: var(--width-logo-hero);
		height: auto;
		max-height: 35vh;
	}
}

/* home : overlay sombre + fondu d'apparition */
.home section.hero {
	.swiper-slide,
	.hero-static {
		position: relative;
		opacity: 1;
		transition: opacity 3s ease-in-out;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: rgba(0, 0, 0, 0.3);
			opacity: 0;
			transition: opacity 3s ease-in-out;
		}

		.tagline {
			opacity: 0;
			transform: translateY(20px);
			transition: opacity 1s ease-out 1s, transform 1s ease-out 1s;
		}
	}

	.swiper-slide.hero-loaded {
		&::after { opacity: 1; }
		.tagline { opacity: 1; transform: translateY(0); }
	}

	.hero-static {
		&::after { opacity: 1; }
		.tagline { opacity: 1; transform: translateY(0); }
	}
}

.header.smallscroll + main section.hero .tagline {
	opacity: 0;
}

/* tagline */
.tagline {
	z-index: 2;
	text-align: center;
	opacity: 1;
	transition: opacity 1s ease;

	&:not(.choice-no_bg) > *,
	&:not(.choice-no_bg) h2,
	&:not(.choice-no_bg) h3 { color: var(--color-light); margin: 0; }

	& h1,
	& span.h1-title { margin: 0; padding: 0; }

	& h2 { margin: var(--margin-sm) 0 0 0; }

	.hero-text { margin-top: var(--margin-xl); }

	&.choice-no_bg .hero-text { margin-bottom: var(--margin-xl); }
}

/* wiggle — indicateur scroll-down, hero fullheight uniquement */
.wiggle {
	position: absolute;
	bottom: 50px;
	width: 100%;
	display: flex;
	justify-content: center;
	z-index: 5;
	animation: wiggleFloat 2.8s ease-in-out infinite;

	& a {
		display: block;
		width: 40px;
		height: 40px;
		border: 0;
		background: transparent;
		position: relative;
		cursor: pointer;

		&::before,
		&::after {
			content: '';
			position: absolute;
			inset: 0;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			transition: opacity 0.4s ease;
		}

		&::before {
			background-image: url(assets/img/icons/icon-wiggle-1.svg);
			animation: clefFade 2.8s ease-in-out infinite;
		}

		&::after {
			background-image: url(assets/img/icons/icon-wiggle-2.svg);
			animation: arrowFade 2.8s ease-in-out infinite;
		}
	}
}

@keyframes wiggleFloat {
	0%   { bottom: 50px; }
	40%  { bottom: 64px; }
	100% { bottom: 50px; }
}
@keyframes clefFade {
	0%, 35%  { opacity: 1; }
	50%, 80% { opacity: 0; }
	100%     { opacity: 1; }
}
@keyframes arrowFade {
	0%, 35%  { opacity: 0; }
	50%, 80% { opacity: 1; }
	100%     { opacity: 0; }
}

/* === BLOCS FLEXIBLES === */

/* section.CONTENT-ANIMATOR */
section.content-animator {
	display: flex;
	align-items: center;

	.animated-text-wrapper { position: relative; display: inline-block; }

	& span.animated-text {
		font-size: var(--fs-title-xxl);
		font-weight: var(--fw-medium);

		& strong { font-weight: var(--fw-extrabold); }
	}

	.cursor { display: inline-block; animation: blink 0.7s steps(2, start) infinite; }
}
@keyframes blink {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* section.CONTENT-TEXT */
section.content-text .inner > *:last-child { margin-bottom: 0; }

/* section.CONTENT-DUO */
section.content-duo {
	.duo-content {
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: flex-start;

		.duo-header {
			display: flex;
			flex-flow: column wrap;
			justify-content: flex-start;
			align-items: flex-start;
			gap: var(--padding-xs);
			width: 100%;

			/* Inline: picto and title side by side */
			&.inline {
				flex-direction: row;
				align-items: center;
				gap: var(--margin-sm);
				margin-bottom: var(--margin-sm);

				& h3 { margin: 0; }
			}
		}

		/* Colored/dark backgrounds: picto becomes white to match text */
		&.bg-color:is(.bg-primary, .bg-secondary, .bg-dark) {
			--f28-duo-picto-filter: brightness(0) invert(1);
		}

		&.bg-color { padding: var(--padding-lg); border-radius: var(--br-md); }

		&.is-centered .duo-header { align-items: center; }
		&.is-centered .duo-header.inline { justify-content: center; }
	}

	&.breakout {
		.duo-content.bg-color { border-radius: 0; }
		/* Significantly more breathing room between columns in edge-to-edge mode */
		.duo-content:not(.bg-color) { padding: var(--padding-lg); }
	}

}
section.content-duo.padded + section.content-duo.padded {
	padding-top: var(--padding-lg);
}
/* Duo crossfade: two images stacked, color fades in on hover/touch */
.duo-crossfade {
	position: relative;
	display: block;
	overflow: hidden;
	grid-column: 1 / -1;

	.duo-cf-base,
	.duo-cf-top {
		display: block;
		width: 100%;
		height: 100%;
	}

	&.coverfit {
		.duo-cf-base,
		.duo-cf-top {
			position: absolute;
			inset: 0;
			object-fit: cover;
		}
		.duo-cf-base { position: static; }
	}

	.duo-cf-top {
		position: absolute;
		inset: 0;
		object-fit: cover;
		opacity: 0;
		transition: opacity 0.7s ease;
	}

	&:hover .duo-cf-top,
	&.is-touched .duo-cf-top {
		opacity: 1;
	}
}

/* Two adjacent padded content-duo sections: make vertical gap = column gap */
section.content-duo.padded:has(+ section.content-duo.padded) {
	padding-bottom: 0;
}
section.content-duo.padded + section.content-duo.padded {
	padding-top: var(--padding-md);
}

/* Duo picto — direct img rules, no wrapper element needed */
section.content-duo .duo-content .duo-header img {
	width: 90px;
	height: auto;
	display: block;
	filter: var(--f28-duo-picto-filter, none);
}
section.content-duo .duo-content .duo-header.inline img {
	width: auto;
	height: clamp(24px, 4vw, 36px);
	flex-shrink: 0;
}

/* section.MEDIA-VISUAL (img / parallax / video) */
section.media-visual {
	&.breakout img { width: 100%; }

	/* parallax */
	&.parallax {
		padding: 0;
		display: block;
		position: relative;
		width: 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;

		&.with-content { background-color: rgba(0, 0, 0, 0.6); background-blend-mode: overlay; }
		&.no-content   { background-color: transparent; background-blend-mode: normal; }

		.bloc-wrap {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;

			.inner {
				transform: translateY(300px);
				opacity: 0;
				transition-property: transform, opacity;
				transition-duration: 1s;
				text-align: center;
				padding: 0 2rem;

				&.inview { transform: translateY(0); opacity: 1; }
				* { color: var(--color-light); }
				& p { font-size: var(--fs-lg); }
			}
		}
	}
}

/* section.LAYOUT-TEXT-IMAGE (slider) */
section.text-image.slider {
	width: 100%;

	.bloc-wrap {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: stretch;
		gap: 0;
	}

	.slider-img {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		height: 100%;
	}

	.slider-content,
	.slider-wrap.with-content { width: 100%; }

	.slider-content {
		display: flex;
		flex-flow: column wrap;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0 0 2rem 0;
		order: 1;
	}

	&.breakout .slider-content { padding: 4rem 2rem; }

	.slider-wrap {
		max-height: 75vh;

		&.with-content { position: relative; overflow: hidden; order: 2; margin: 0; }
	}

	.swiper-wrapper img { width: 100% !important; height: 100%; object-fit: cover; }
}

/* section.LAYOUT-COLUMNS */
section.layout-columns {
	.bloc-wrap {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		gap: var(--padding-md);

		.column-box { width: 100%; }
	}

	.column-box {
		.column-img {
			border-radius: var(--br-md);
			overflow: hidden;

			&.picto {
				& img { height: clamp(24px, 5vw, 40px); width: auto; margin: 0 0 var(--margin-xs) 0; }

				&.inline {
					display: flex;
					flex-flow: row;
					justify-content: flex-start;
					align-items: center;

					& img { margin: 0 var(--margin-xs) 0 0; }
					.title-inline { margin: 0; }
				}
			}
		}

		.column-content {
			margin-top: var(--margin-md);
			&.medium-text p { font-size: var(--fs-sm); }
		}

		.button-container { margin-top: var(--padding-md); }
	}

	/* variante fond gris : cards blanches */
	&.bg-gray .column-box {
		box-shadow: var(--shadow-light);
		border-radius: var(--br-md);
		background-color: var(--color-light);
		overflow: hidden;

		.column-img { border-radius: 0; }
		.column-content { margin-top: 0; padding: var(--padding-md); }
	}
}

/* section.MEDIA-GALLERY */
section.media-gallery {
	.gallery-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--padding-md);
		padding: var(--padding-md) 0;

		/* masonry-grid — overrides flex so CSS columns can take effect */
		&.masonry-grid {
			display: block;
			gap: 0;
			padding: 0;
		}
	}

	.gallery-item {
		flex: 1 1 calc(50% - var(--padding-md));
		max-width: calc(50% - var(--padding-md));
		text-align: center;
		overflow: hidden;

		& img { border-radius: var(--br-md); }

		&.img-border img { border: 1px solid var(--color-lightgray); }
	}
}

/*  MASONRY GRID */
.masonry-grid {
	display: block;
	columns: 1;
	column-gap: 3px;
}
.masonry-item {
	break-inside: avoid;
	margin-bottom: 3px;
	position: relative;
}
.masonry-item a {
	display: block;
	position: relative;
	overflow: hidden;
}
.masonry-item img,
.masonry-img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--card-transition);
}
.masonry-item:hover img,
.masonry-item:hover .masonry-img {
	transform: scale(1.03);
}
.masonry-caption {
	position: absolute;
	bottom: var(--padding-sm);
	left: 0;
	background: var(--color-light);
	padding: var(--padding-xs) var(--padding-md) var(--padding-xs) var(--padding-sm);
	border-radius: 0 var(--br-lg) var(--br-lg) 0;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--letter-spacing-md);
	color: var(--color-main);
	box-shadow: var(--shadow-light);
	pointer-events: none;
	z-index: 2;
	max-width: 82%;
	line-height: var(--line-height-sm);
}

/* single-gallery: 1 image (full inner width) — no extra CSS needed, masonry-item img fills it */

/* single-gallery: 2 images side by side */
section.single-gallery.single-gallery--2 .inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
}

@media (max-width: 575px) {
	section.single-gallery.single-gallery--2 .inner {
		grid-template-columns: 1fr;
	}
}

/* section.LAYOUT-TEXT-IMAGE */
section.text-image {
	.bloc-wrap { display: grid; gap: var(--padding-md); width: 100%; }

	.content-text,
	.content-img { width: 100%; }

	.content-text {
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		justify-content: center;
		margin: 0;
		order: 1;
	}

	.content-img {
		position: relative;
		overflow: hidden;
		order: 2;
		margin: 0 auto;
		max-height: clamp(400px, 50vh, 1000px);

		&.full-pad { padding: 0 var(--padding-md) var(--padding-md) var(--padding-md); }
		&.whole { display: flex; justify-content: center; align-items: center; }
		&.cover img { width: 100%; height: 100%; object-fit: cover; }
	}

	&:not(.breakout) .content-img { border-radius: var(--br-md); }
	&[class*="flush"] .content-img { border-radius: 0; }

	&.thumbnail .content-img { max-width: 200px; margin: 0 auto; }

	&.flush-top {
		.content-text { padding: var(--padding-lg) 0; }
		&.breakout .content-text { padding: var(--padding-lg) var(--padding-md); }
	}

	/* fullwidth */
	&.breakout {
		padding-bottom: 0;
		.content-text { padding: var(--padding-lg) var(--padding-md); }
	}

	/* variante slider */
	&.slider {
		.content-slider {
			max-height: 75vh;

			&:not(.with-text) { grid-column: 1 / -1; width: 100%; }

			&.with-text { width: 100%; position: relative; overflow: hidden; order: 2; margin: 0; }

			.slider-img {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				overflow: hidden;
				height: 100%;
			}

			.swiper-wrapper { position: relative; }
			.swiper-wrapper img { width: 100% !important; height: 100%; object-fit: cover; }
		}

		.swiper-button-prev,
		.swiper-button-next {
			background-color: rgba(0, 0, 0, 0.3);
			border-radius: var(--br-sm);
			padding: var(--padding-xs);

			&::after { color: var(--color-light); }
		}
	}

	/* video variant */
	.content-video {
		width: 100%;
		order: 2;

		.video { width: 100%; height: 100%; }
	}
}

/* section.UI-FAQ */
section.ui-faq {
	.faq-list-item {
		margin-bottom: var(--margin-xs);
		border-radius: var(--br-md);
		background-color: rgba(0, 0, 0, .05);

		&:hover,
		&.active { background-color: rgba(0, 0, 0, .08); }

		& h3 { margin: 0; width: 100%; font-weight: var(--fw-semibold); }

		.plus {
			width: 100%;
			padding: 0.8rem 1rem;
			cursor: pointer;
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;
			align-items: center;
			background: transparent;
			border: 0;
			color: inherit;
			text-align: left;
			font: inherit;

			& span { width: calc(100% - 2rem); font-size: var(--fs-title-lg); font-weight: var(--fw-semibold); }

			&::before {
				content: "\002B";
				display: inline-block;
				width: 2rem;
				font-size: 1.5rem;
				font-weight: var(--fw-medium);
				color: var(--color-main);
			}
		}

		&.active .plus::before { content: "\2212"; }

		.faq-content {
			overflow: hidden;
			max-height: 0;
			transition: max-height 0.4s ease;

			.wrap-content {
				padding: 0.5rem 2rem 2rem 2.5rem;

				& img { margin: var(--margin-sm) 0 0 0; }
			}
		}

		&.active .faq-content {
			max-height: 800px;
		}
	}
}

/* section.UI-FORM */
section.ui-form .button-container.modal-btn.is-centered { text-align: center; }

/* section.UI-EMBED */
section.ui-embed iframe { 
	display: block;
	width: 100%;
	border: 0;
	vertical-align: bottom;
}

/* section.MEDIA-MINI-SLIDER */
section.media-mini-slider {
	.swiper-wrapper {
		.swiper-img { width: 100%; }
		.swiper-content { padding: var(--padding-sm) var(--padding-md) 0 var(--padding-md); }
	}

	.swiper-minislider-logos {
		.swiper-slide { display: flex; align-items: center; justify-content: center; }

		& img { height: 60px; width: auto; max-width: 100%; object-fit: contain; }
	}
}

/* section.MEDIA-SLIDER */
section.media-slider {
	padding: 0;

	.swiper-slide {
		display: flex;
		flex-flow: column;
		justify-content: center;
		padding: var(--padding-lg);

		.swiper-img { text-align: center; }

		.swiper-content {
			display: flex;
			flex-flow: column;
			justify-content: center;
			padding: 0 var(--padding-lg);

			& h2 { font-size: var(--fs-title-xl); }
			& p  { font-size: var(--fs-lg); }
			.button-container { margin: var(--margin-lg) 0 0 0; }
		}
	}

	/* variante statique */
	.static-slider {
		display: flex;
		flex-flow: row wrap;

		.bloc-wrap { width: 100%; }

		.static-img {
			display: none;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: right center;
		}
	}
}

/* === BUTTONS === */
.button-group {
	display: flex;
	gap: var(--padding-md);
	margin-top: 1.5rem;

	&.is-centered { justify-content: center; }
	&.only-buttons { margin-top: 0; }
}
ul + .button-container { margin-top: var(--margin-sm); }
.button-container {
	position: relative;
	margin: var(--margin-md) 0 0 0;
	overflow: hidden;
}
a.button-link,
button.button-link,
input[type="submit"],
input[type=button],
.gform_wrapper input[type="submit"],
.gform_wrapper input[type=button],
/* Gravity Forms 3.0 renders <button class="gform_button">: without these three
   selectors the submit button ships unstyled on every site of the parent. */
.gform_wrapper button.gform_button,
.gform_wrapper .gform_footer button[type="submit"],
.gform_wrapper .gform_page_footer button[type="submit"] {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-align: center;
	font-family: var(--typo-title);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	padding: var(--padding-sm) var(--padding-md);
	letter-spacing: var(--letter-spacing-md);
	text-transform: uppercase;
	border: 0;
	background-color: var(--color-primary);
	border-radius: var(--br-lg);
	color: var(--color-light);
	cursor: pointer;
	overflow: hidden;
	transition: background-color var(--transition-slow), color var(--transition-slow), box-shadow var(--transition-slow);
}
a.button-link,
a.button-link:focus,
a.button-link:active {
	text-decoration: none;
}

/* animated arrow icon - links and modal buttons only, never inputs */
a.button-link::after,
button.button-link::after {
	content: '→';
	display: inline-block;
	font-style: normal;
	line-height: 1;
	transform: translateX(0);
	transition: transform var(--transition-medium);
}

a.button-link:hover,
button.button-link:hover,
input[type="submit"]:hover,
input[type=button]:hover,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper input[type=button]:hover,
.gform_wrapper button.gform_button:hover,
.gform_wrapper .gform_footer button[type="submit"]:hover,
.gform_wrapper .gform_page_footer button[type="submit"]:hover {
	background-color: var(--color-main);
	color: var(--color-light);
	box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}
a.button-link:hover::after,
button.button-link:hover::after {
	transform: translateX(0.4em);
}

/* === section.DATA-POSTLIST === */
section.data-posts .post-container {
	/* layout handled by .grid (child theme or data-cpt.php) */
	gap: var(--padding-md);
}

/* === CPT FILTER === */
/* Sober baseline for the bar data-cpt.php emits. Children override freely.
   Active state uses border-bottom, not text-decoration: a child's
   `border: none` then clears it — an undeclared decoration would leak. */
.cpt-filter-wrap .inner {
	max-width: var(--width-inner-lg);
}

/* Mobile : select natif, remplacé par des boutons dès qu'il y a la place */
.cpt-filter-select {
	display: block;
	width: 100%;
	max-width: var(--width-inner-sm);
	padding: var(--padding-xs) var(--padding-sm);
	font-family: var(--typo-main);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-main);
	background-color: var(--color-light);
	border: 2px solid var(--color-main);
	cursor: pointer;
}
.cpt-filter-btns {
	display: none;
}

@media (min-width: 576px) {
	.cpt-filter-select { display: none; }

	.cpt-filter-btns {
		display: flex;
		flex-wrap: wrap;
		gap: var(--padding-md);
	}
}

.cpt-filter-btn {
	padding: 0;
	border: none;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: color-mix(in srgb, var(--color-main) 50%, transparent);
	font-family: var(--typo-main);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: var(--line-height-xs);
	cursor: pointer;
	transition: color var(--transition-fast);

	&:hover { color: var(--color-main); }

	&.is-active {
		color: var(--color-main);
		border-bottom-color: currentColor;
	}
}

/* === POSTS  === */
.post-item {
	position: relative;
	display: flex;
	flex-flow: column;
	width: 100%;
	min-height: 100%;
	border-radius: var(--br-md);
	overflow: hidden;
	box-shadow: var(--shadow-light);
	transition: var(--transition-medium);

	&:hover { box-shadow: var(--shadow); }

	.post-img {
		position: relative;
		background-color: var(--color-light);
		overflow: hidden;

	}

	.post-content {
		display: flex;
		flex-flow: column;
		flex-grow: 1;
		justify-content: flex-start;
		width: 100%;
		padding: var(--padding-md);
		background-color: var(--color-light);

		.button-container { margin-top: auto; }
	}
}

/* couleurs post-item selon bg parent */
.bg-gray .post-item {
	.post-content { background-color: var(--color-primary); }
	.post-content > *, .post-content a { color: var(--color-light); }
	& a.button-link { background-color: var(--color-light); }
	& a.button-link, & a.button-link:focus, & a.button-link:active { color: var(--color-primary); }
	& a.button-link:hover { background-color: var(--color-main); color: var(--color-light); }
}
.bg-primary .post-item {
	.post-content { background-color: var(--color-lightgray); }
	.post-content > *, .post-content a { color: var(--color-main); }
	& a.button-link { background-color: var(--color-primary); }
	& a.button-link, & a.button-link:focus, & a.button-link:active { color: var(--color-light); }
	& a.button-link:hover { background-color: var(--color-main); color: var(--color-light); }
}
.bg-dark .post-item {
	.post-content { background-color: var(--color-primary); }
	.post-content > *, .post-content a { color: var(--color-light); }
	& a.button-link { background-color: var(--color-light); }
	& a.button-link, & a.button-link:focus, & a.button-link:active { color: var(--color-primary); }
	& a.button-link:hover { background-color: var(--color-main); color: var(--color-light); }
}
section.bg-light .post-item .post-content { background-color: var(--color-lightgray); }

/* Blog card meta row — scoped to .news so CPT cards keep their own styling */
.news .post-entry {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--padding-sm);
	margin-bottom: var(--margin-sm);
}
.news .post-term,
.news .post-date {
	font-size: var(--fs-xs);
	line-height: var(--line-height-sm);
}
.news .post-term {
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-md);
}
.news .post-date {
	opacity: 0.7;
}
.news .post-content h3 {
	margin-bottom: var(--margin-sm);
}

/* WordPress pagination — index.php fallback (search, blog index) */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--padding-sm);
	justify-content: center;
	margin-top: var(--margin-xl);
}
.pagination .page-numbers {
	padding: 0.4em 0.8em;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	text-decoration: none;
	font-size: var(--fs-xs);
}
.pagination .page-numbers.current {
	border-color: currentColor;
	font-weight: var(--fw-semibold);
}

/* post-1 */
.post-1 .post-item {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 0;
}

/* === SINGLE POST === */
.single .post-header {
	.inner { display: flex; flex-flow: column; }

	.post-title-block { margin-bottom: var(--margin-md); order: 1; padding: var(--padding-md); }

	.post-img {
		position: relative;
		margin: 0 auto;
		order: 2;
		border-radius: var(--br-md);
		overflow: hidden;
	}

	&.breakout .post-img { border-radius: 0; }

	.long-description { width: 100%; margin-top: var(--margin-md); order: 3; }
}

/* === FOOTER === */
footer {
	position: relative;
	width: 100%;
	background-color: var(--color-dark);
	padding: var(--padding-xl) 0;

	.footer-content {
		padding-bottom: var(--padding-md);
		margin-bottom: var(--padding-md);

		&:last-of-type { padding-bottom: 0; margin-bottom: 0; }

		&.columns,
		&.bottom {
			border-top: var(--footer-rule, 1px solid rgba(255, 255, 255, 0.1));
			padding-top: var(--padding-md);
		}
	}

	.wrap {
		width: 100%;
		max-width: var(--width-inner-lg);
		margin: 0 auto;
	}

	.top .wrap {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
		gap: var(--padding-md);

		.logo img { width: var(--width-logo-footer); height: auto; }
	}

	/* auto-fit columns - adapts to any count */
	.columns .wrap {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: var(--padding-md);
		align-items: start;
	}

	.footer-item {
		display: flex;
		flex-flow: column wrap;
		justify-content: flex-start;

		& p { margin: 0; }
		&.add p { font-size: var(--fs-xs); }
		&.credits p { font-size: var(--fs-xs); }
	}

	/* Bottom : copyright gauche, lien protection droite */
	.bottom .wrap {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
		gap: var(--padding-sm);
	}

	& h4, & p { color: var(--color-lightgray); font-size: var(--fs-sm); }
	& p, & p a { font-weight: var(--fw-regular); line-height: var(--line-height-md); }
	& a { text-decoration: none; color: var(--color-primary); }
	& p a:hover { color: var(--color-lightgray); }

	/* breakout */
	&.breakout .wrap { max-width: 100%; }

	/* centered */
	&.is-centered {
		.top .wrap { flex-direction: column; align-items: center; }
		.columns .wrap { justify-items: center; }
		.columns .footer-item { align-items: center; text-align: center; }
		.footer-content { padding-top: var(--padding-md); padding-bottom: var(--padding-md); }
		.bottom .wrap { flex-direction: column; align-items: center; }
	}
}

/* === SOCIAL ICONS footer & overlay menu === */
.social-icons {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: var(--padding-sm);
}
.social-icon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--br-round);
	background-color: rgba(255, 255, 255, 0.12);
	transition: background-color var(--transition-medium), transform var(--transition-medium);
	flex-shrink: 0;

	&:hover,
	&:focus-visible { background-color: var(--color-primary); transform: translateY(-3px); }

	& img { width: 1.15rem; height: 1.15rem; object-fit: contain; filter: brightness(0) invert(1); }
}

/* === 404 === */
.error404 section,
.blank {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	background-image: url(assets/img/lost.webp);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color: rgba(0, 0, 0, 0.45);
	background-blend-mode: multiply;
}
.error404 {
	.error-number {
		position: absolute;
		font-size: clamp(10rem, 32vw, 26rem);
		font-weight: var(--fw-extrabold);
		color: var(--color-light);
		letter-spacing: 0.12em;
		line-height: 1;
		pointer-events: none;
		user-select: none;
		opacity: 0;
		animation: errorNumberIn 2.5s ease forwards;
	}

	.error-content {
		position: relative;
		z-index: 2;
		text-align: center;
		padding: 0 var(--padding-md);
		opacity: 0;
		animation: errorContentIn 1s ease 0.5s forwards;

		& h1 {
			font-size: var(--fs-title-xl);
			font-weight: var(--fw-light);
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: var(--color-light);
			margin-bottom: var(--margin-sm);
		}

		& p { font-size: var(--fs-sm); color: var(--color-light); opacity: 0.75; margin: 0; }

		.button-container { margin-top: var(--margin-xl); }
	}
}
@keyframes errorNumberIn {
	0%   { opacity: 0; transform: scale(1.04); }
	100% { opacity: 0.07; transform: scale(1); }
}
@keyframes errorContentIn {
	0%   { opacity: 0; transform: translateY(14px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* === COOKIE BANNER === */
.cc-revoke.cc-bottom {
  background-image: url(assets/img/cookie.svg);
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  color: rgba(0, 0, 0, 0) !important;
  background-color: var(--color-dark) !important;
  bottom: 1rem !important;
  left: 0 !important;
  font-size: 0.7rem;
  font-weight: var(--fw-light);
  margin: 0;
  font-style: italic;
	border-top-left-radius: 0 !important;
  border-top-right-radius: 0.3em !important;
  border-bottom-right-radius: 0.3em  !important;
	border-bottom-left-radius: 0 !important;
}

/* === GRAVITY FORMS === */

/* After an ajax submit, GF scrolls #gf_{id} to viewport 0 — under the fixed
   header. `scroll-margin-top` is useless here: GF uses scrollTop() from
   offset().top, so the anchor's own box is what we shift. Same
   `--scroll-offset` as global.js anchorOffset, same 120px fallback. */
.gform_anchor {
	position: relative;
	top: calc(-1 * var(--scroll-offset, 120px));
	display: block;
}

.bg-light .form-box {
	background-color: var(--color-lightgray);
	border-radius: var(--br-lg);
	padding: var(--padding-md);
}

/* dark bg */
.bg-dark .gform-theme--framework label,
.bg-dark .gform-theme--framework legend,
.bg-dark .gform-theme--framework .gfield_description,
.bg-dark .gsection_description,
.bg-dark .gform-theme--framework .gform_confirmation_message,
.bg-dark .gform-theme--framework input[type].gform-text-input-reset,
.bg-dark .gfield_description,
.bg-dark .gform_confirmation_message,
.bg-dark .gform_wrapper .ginput_product_price_wrapper span,
.bg-dark .gform_wrapper .ginput_container_total input,
.bg-primary .gform-theme--framework label,
.bg-primary .gform-theme--framework legend,
.bg-primary .gform-theme--framework .gfield_description,
.bg-primary .gsection_description,
.bg-primary .gform-theme--framework .gform_confirmation_message,
.bg-primary .gform-theme--framework input[type].gform-text-input-reset,
.bg-primary .gfield_description,
.bg-primary .gform_confirmation_message,
.bg-primary .gform_wrapper .ginput_product_price_wrapper span,
.bg-primary .gform_wrapper .ginput_container_total input {
	color: var(--color-light);
}
.bg-gray .gfield_consent_description {
	background-color: var(--color-light) !important;
}

/* typo (legend, description) */
.gform_wrapper .gform_required_legend,
.gsection_description,
.gfield--type-html,
.gfield--type-html p,
.gfield--type-html li,
.char_count {
	font-size: var(--fs-sm);
	font-weight: var(--fw-light);
  line-height: var(--line-height-md);
}

/* datepicker */
.gform-datepicker-calendar p {
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

/* hide product fields used to calculate total in voucher form */
.not-show {
	visibility: hidden !important; /* hides it visually */
	height: 0 !important;          /* no height */
	width: 0 !important;           /* no width */
	margin: 0 !important;          /* no margins */
	padding: 0 !important;         /* no padding */
	border: 0 !important;          /* no borders */
	overflow: hidden !important;   /* nothing can overflow */
	position: absolute !important; /* out of the normal flow */
}
/* modale */
.animated-modal .gform_wrapper {
	margin: var(--margin-sm) auto 0 !important;
}
.form-text {
	padding-bottom: var(--padding-sm);
}
/* required legend */
.gform_wrapper .gform_required_legend {
	margin-bottom: var(--margin-sm);
}
/* section */
h3.gsection_title {
	font-size: var(--fs-lg);
	margin: var(--margin-sm) 0 0 0;
}
.gsection_description {
	margin: var(--margin-xs) 0 0 0;
}
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
	line-height: var(--line-height-md);
	font-size: var(--fs-xs) !important;
	font-weight: var(--fw-regular) !important;
	padding-left: 0.3rem;
}
/* consent */
.gfield_consent_description {
	background-color: var(--color-lightgray) !important;
	color: var(--color-main) !important;
	border-radius: var(--br-md) !important;
	border: 0 !important;
}
/* read only */
.gform_wrapper .readonly {
	background-color: var(--color-lightgray);
	border-radius: var(--br-sm);
	padding: 0.5rem;
}
.read-only input {
	padding: 0 !important;
	border: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	font-weight: var(--fw-medium) !important;
	cursor: default;
}

/* ── Gravity Forms 2.5 theme (.gravity-theme) ─────────────────
   The rules above target .gform-theme--framework, i.e. Orbital. A form set to
   the 2.5 theme receives none of them and ships with raw Gravity Forms type.

   ⚠️ **!important is not laziness here.** Gravity Forms loads its own
   stylesheet after the theme's and targets its fields with selectors at least
   as specific as ours. Without it, none of these rules apply. */
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme .gform-field-label {
	font-weight: var(--fw-medium) !important;
}

.gform_wrapper.gravity-theme .gfield_description,
.gform_wrapper.gravity-theme .gform_required_legend {
	font-size: var(--fs-xs) !important;
	line-height: var(--line-height-sm) !important;
}

/* Vertical rhythm between fields. The 2.5 theme's row gap is calibrated for
   three-field contact forms; past six or seven, the labels run together. The
   gutter follows the text size rather than a fixed pixel value. */
.gform_wrapper.gravity-theme .gform_fields {
	row-gap: clamp(1.2rem, 2.2vw, 2rem) !important;
}

/* ── Validation errors ────────────────────────────────────────
   Gravity Forms boxes every message: a red bordered banner at the top, then a
   bordered block under each field. On a seven-field form with everything
   empty, nothing stands out any more. The failing field is already marked by
   its label and border, so the text only has to be readable. */

.gform_wrapper.gravity-theme .gform_validation_errors {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 0 var(--margin-sm) 0 !important;
}

/* The banner AND its heading: Gravity Forms puts the border on the <h2>, not on
   the container. Stripping only the container left the red frame in place. */
.gform_wrapper.gravity-theme .gform_validation_errors > h2,
.gform_wrapper.gravity-theme .gform_submission_error {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-weight: var(--fw-medium) !important;
	line-height: var(--line-height-sm) !important;
	color: var(--color-error) !important;
}

/* The alert icon: a pseudo-element in some versions, an <svg> in others. Both
   are targeted. */
.gform_wrapper.gravity-theme .gform_validation_errors > h2::before,
.gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon,
.gform_wrapper.gravity-theme .gform_validation_errors > h2 svg {
	display: none !important;
}

.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0.4em 0 0 0 !important;
	font-size: var(--fs-xs) !important;
	font-style: italic !important;
	font-weight: var(--fw-regular) !important;
	color: var(--color-error) !important;
}

/* confirmation message */
.gform_confirmation_message {
	font-size: var(--fs-md) !important;
	font-weight: var(--fw-medium) !important;
	color: var(--color-primary) !important;
	line-height: var(--line-height-sm);
}

/* === MEDIA QUERIES === */

/* parallax — souris/trackpad uniquement */
@media (hover: hover) and (pointer: fine) {
	article.post-single section.main-pic,
	section.media-visual.parallax {
		background-attachment: fixed;
	}
}

/* === MIN WIDTH === */

@media screen and (min-width: 415px) {

	/* menu */
	.main-menu.active {
		width: auto;
		min-width: 300px;
	}
	/* text-image */
	section.text-image .content-img.whole img {
		max-width:  400px;
	}
}

@media (min-width: 576px) {

	/* global */
	.media-size-width.size-25 {
		max-width: 50%;
	}
	/* columns */
	section.layout-columns .bloc-wrap .column-box {
		flex: 1 1 calc(50% - var(--padding-lg));
	}
	/* gallery */
	.masonry-grid { columns: 2; }
  section.media-gallery .gallery-item {
    flex: 1 1 calc(33.33% - var(--padding-md));
  }
	/* postlist */
	.post-item {
		width: calc(50% - var(--padding-md));
	}
}

@media (min-width: 680px) {

	/* reset */
	.alignleft {
	  float: left;
	  margin: 0 1.5em 1em 0;
	}
	.alignright {
	  float: right;
	  margin: 0 0 1em 1.5em;
	}
	.aligncenter {
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	}
	.alignnone {
	  margin: 0 0 1em 0;
	}
	/* global */
	.grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}
	.media-size-width.size-50 {
		max-width: 75%;
	}
	.media-size-width.size-25 {
		max-width: 33%;
	}
	/* media-slider */
	section.media-slider .static-slider .bloc-wrap {
		width: 70%;
	}
	section.media-slider .static-slider .swiper-slide {
		padding: var(--padding-lg) var(--padding-md) var(--padding-lg) var(--padding-lg);
	}
	section.media-slider .static-slider .swiper-slide .swiper-content {
	  padding: 0;
	}
	section.media-slider .static-slider .static-img {
		display: block;
		width: 30%;
	}
	/* postlist */
	.post-1 .post-item {
		width: 100%;
	}

}

@media (min-width: 768px) {

	/* global */
	.grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	/* faq */
	section.ui-faq .faq-list-item .faq-content .wrap-content.hasImage {
    display: grid;
    grid-template-columns: 26% auto;
    gap: var(--padding-md);
	}
	section.ui-faq .faq-list-item .faq-content .wrap-content.noImage {
    display: grid;
    grid-template-columns: 100%;
	}
	section.ui-faq .faq-list-item .faq-content .wrap-content img {
		order: 1;
		margin: 0;
	}
	section.ui-faq .faq-list-item .faq-content .wrap-content .faq-text {
		order: 2;
	}
	/* postlist */
	.post-1 .post-item {
		grid-template-columns: repeat(2, 1fr);
	}
	/* footer */
	footer.is-centered .top .wrap {
		flex-flow: column wrap;
		justify-content: center;
	}
	footer .columns .footer-item:not(.is-centered):last-of-type {
		align-items: flex-end;
		text-align: right;
	}
	/* postlist */
	.post-item {
		width: calc(33% - var(--padding-md));
	}
}

@media (min-width: 880px) {

	/* text-image */
	section.text-image .content-img {
		max-height: inherit;
	}
	section.text-image .content-img.whole img {
		max-width:  100%;
	}
	section.text-image.left .content-text {
		order: 2;
	}
	section.text-image.right .content-text {
		order: 1;
	}
	section.text-image.left .content-img,
	section.text-image.left .content-slider.with-text,
	section.text-image.left .content-video {
		order: 1;
	}
	section.text-image.right .content-img,
	section.text-image.right .content-slider.with-text,
	section.text-image.right .content-video {
		order: 2;
	}
	section.text-image.left .content-img.full-pad {
		padding: 0 0 0 var(--padding-md);
	}
	section.text-image.right .content-img.full-pad {
		padding: 0 var(--padding-md) 0 0;
	}
	section.text-image.flush-top .content-text {
	  padding: inherit;
	}
	section.text-image.flush-top.breakout .content-text {
		padding: var(--padding-lg);
	}
	section.text-image .content-img {
		max-height: none;
	}
	/* fullwidth */
	section.text-image.breakout {
		padding-bottom: var(--padding-lg);
	}
	section.text-image.flush-bottom.breakout {
		padding-bottom: 0;
	}
	/* big text 30 img 70 */
	section.text-image.big .bloc-wrap {
		grid-template-columns: auto 70%;
	}
	section.text-image.big.left .bloc-wrap {
		grid-template-columns: 70% auto;
	}
	/* demi text 50 img 50 */
	section.text-image.demi .bloc-wrap {
		grid-template-columns: auto 50%;
	}
	section.text-image.demi.left .bloc-wrap {
		grid-template-columns: 50% auto;
	}
	/* tiers text 70 img 30 */
	section.text-image.tiers .bloc-wrap {
		grid-template-columns: auto 30%;
	}
	section.text-image.tiers.left .bloc-wrap {
		grid-template-columns: 30% auto;
	}
	/* thumbnail text 85 img 15 */
	section.text-image.thumbnail .bloc-wrap {
		grid-template-columns: auto 15%;
	}
	section.text-image.thumbnail.left .bloc-wrap {
		grid-template-columns: 15% auto;
	}
	/* gallery */
	.masonry-grid { columns: 3; }
  section.media-gallery .gallery-item {
    flex: 1 1 calc(25% - var(--padding-md));
  }
	/* media-slider */
	section.media-slider .static-slider .bloc-wrap {
		width: 60%;
	}
	section.media-slider .static-slider .static-img {
		display: block;
		width: 40%;
	}
	/* single post */
	.single .post-header .inner {
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
	}
	.single .post-header .post-img {
		order: 1;
		margin: 0;
		max-width: 45%;
	}
	.single .post-header .post-title-block {
		margin-bottom: 0;
		order: 2;
		width: 55%;
	}
	/* button */
	.button-container {
	  margin: var(--margin-lg) 0 0 0;
	}

}

@media (min-width: 992px) {

	/* global */
	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.media-size-width.size-75 {
		max-width: 75%;
	}
	.media-size-width.size-50 {
		max-width: 50%;
	}
	.media-size-width.size-25 {
		max-width: 25%;
	}
	/* columns - --col-max set as an inline style on .bloc-wrap (from ACF columns_number) */
	section.layout-columns .bloc-wrap .column-box {
		flex: 1 1 calc(100% / var(--col-max, 3) - var(--padding-lg));
		max-width: calc(100% / var(--col-max, 3) - var(--padding-lg));
  }
	/* footer */
	footer .bottom .wrap {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: flex-end;
	}
	footer .credits {
		margin: 0;
	}
	/* burger desktop */
	.menu-toggle {
		width: 65px;
		height: 65px;
	}
	.menu-toggle .menu_open {
		width: 38px;
		height: 26px;
	}
	.menu-toggle .menu_open span:nth-child(2) {
		top: 11px;
	}
	.menu-toggle .menu_open span:nth-child(3) {
		top: 22px;
	}
	.menu-toggle.active .menu_open span:nth-child(1) {
		transform: translateY(11px) rotate(45deg);
	}
	.menu-toggle.active .menu_open span:nth-child(3) {
		transform: translateY(-11px) rotate(-45deg);
	}

}

@media (min-width: 1200px) {
	
 	/* text img */
	section.text-image.left .content-img.full-pad {
		padding: 0 0 0 var(--padding-lg);
	}
	section.text-image.right .content-img.full-pad {
		padding: 0 var(--padding-lg) 0 0;
	}
	/* gallery */
	section.media-gallery .gallery-wrap.masonry-grid.many-images {
		column-count: 5;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}