/* -----------------------------------------------------------------------------
 * Classes utilitaires (mise en page, espacements, typographie, médias, formes)
 *
 * Chargées sur tout le site et dans l'éditeur (inc/enqueue.php) : les gabarits PHP
 * des stacks et le contenu des pages les utilisent.
 *
 * L'ordre compte : sur un même élément, les variantes --mobile doivent suivre
 * la règle de base qu'elles annulent (ex. margin-left-2-xl margin-left-0--mobile).
 * -------------------------------------------------------------------------- */

/* Conteneurs ----------------------------------------------------------------- */

.wrapper {
	position: relative;
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
}

.wrapper--narrow {
	position: relative;
	max-width: 1060px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
}

.wrapper--left {
	position: relative;
	max-width: calc(var(--wp--style--global--content-size) - var(--wp--preset--spacing--gutter) * 2);
	margin-left: auto;
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
}

.wrapper--right {
	position: relative;
	max-width: 1112px;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
}

/* Sections collées à un bord de l'écran, arrondies de l'autre côté */
.section-lean-left {
	max-width: min(100%, calc(100% - ((100% - var(--wp--style--global--content-size)) / 2 + var(--wp--preset--spacing--gutter) * 2)));
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}

.section-lean-right {
	max-width: calc(1112px + (100% - var(--wp--style--global--content-size)) / 2);
	margin-left: auto;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}

/* Grilles -------------------------------------------------------------------- */

.grid-two-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--gutter);
	row-gap: var(--wp--preset--spacing--xl);

	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

.grid-three-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--gutter);
	row-gap: var(--wp--preset--spacing--l);

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

	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

.grid-one-three {
	display: grid;
	grid-template-columns: 1fr 3fr;
	column-gap: var(--wp--preset--spacing--gutter);
	row-gap: var(--wp--preset--spacing--xl);

	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

/* Placement ------------------------------------------------------------------ */

.split-third {
	width: 37.5%;

	@media (max-width: 767px) {
		width: unset;
	}
}

.float-right {
	float: right;

	@media (max-width: 767px) {
		float: none;
	}
}

.position-relative {
	position: relative;
}

.has-overflow-content {
	overflow-x: clip;
}

/* Espacements ---------------------------------------------------------------- */

.margin-top-l {
	margin-top: var(--wp--preset--spacing--l);
}

.margin-top-xl {
	margin-top: var(--wp--preset--spacing--xl);
}

.margin-top-2-xl {
	margin-top: var(--wp--preset--spacing--2-xl);
}

.margin-top-5-xl {
	margin-top: var(--wp--preset--spacing--5-xl);
}

.margin-bottom-3-xl {
	margin-bottom: var(--wp--preset--spacing--3-xl);
}

.margin-bottom-6-xl {
	margin-bottom: var(--wp--preset--spacing--6-xl);
}

.margin-left-xl {
	margin-left: var(--wp--preset--spacing--xl);
}

.margin-left-2-xl {
	margin-left: var(--wp--preset--spacing--2-xl);
}

.margin-right-gutter {
	margin-right: var(--wp--preset--spacing--gutter);
}

.padding-m {
	padding: var(--wp--preset--spacing--m);
}

.padding-top-xl {
	padding-top: var(--wp--preset--spacing--xl);
}

.padding-bottom-xl {
	padding-bottom: var(--wp--preset--spacing--xl);
}

.padding-bottom-2-xl {
	padding-bottom: var(--wp--preset--spacing--2-xl);
}

.padding-block-2-xl {
	padding-top: var(--wp--preset--spacing--2-xl);
	padding-bottom: var(--wp--preset--spacing--2-xl);
}

.padding-inline-m {
	padding-left: var(--wp--preset--spacing--m);
	padding-right: var(--wp--preset--spacing--m);
}

.padding-inline-xl {
	padding-left: var(--wp--preset--spacing--xl);
	padding-right: var(--wp--preset--spacing--xl);
}

/* Variantes mobiles : après les règles de base */
@media (max-width: 767px) {
	.margin-top-xl--mobile {
		margin-top: var(--wp--preset--spacing--xl);
	}

	.margin-bottom-3-xl--mobile {
		margin-bottom: var(--wp--preset--spacing--3-xl);
	}

	.margin-left-0--mobile {
		margin-left: 0;
	}

	.padding-inline-0--mobile {
		padding-left: 0;
		padding-right: 0;
	}

	.padding-inline-gutter--mobile {
		padding-left: var(--wp--preset--spacing--gutter);
		padding-right: var(--wp--preset--spacing--gutter);
	}
}

/* Typographie ---------------------------------------------------------------- */

.text-full {
	max-width: 65ch;
}

.text-columns-30ch {
	columns: 30ch;
}

.font-weight-bold {
	font-weight: 700;
}

/* Médias et boîtes ----------------------------------------------------------- */

.image {
	max-width: 100%;
	height: auto;
	border-radius: 20px;
}

@media (max-width: 767px) {
	.image-portrait-to-landscape-mobile {
		width: 100%;
		height: 150px;
		object-fit: cover;
	}

	/* Image placée avec ces marges : recadrée plutôt que déformée */
	.margin-left-xl,
	.margin-left-2-xl {
		object-fit: cover;
	}
}

.box-border-cafe {
	border: 1px solid var(--wp--preset--color--cafe, #351203);
	border-radius: 20px;
}

/* Formes décoratives (SVG) --------------------------------------------------- */

.triangle--image-corner {
	position: absolute;
	right: -3.7em;
	bottom: -3.7em;
	display: inline-flex;

	& svg {
		width: 7.5em;
		height: 7.5em;
		fill: currentColor;
	}
}

.circle-corner-top-left {
	position: absolute;
	top: -3.694em;
	left: -3.694em;
	z-index: -1;

	& svg {
		width: 7.38em;
		height: 7.38em;
		fill: currentColor;
	}
}

.triangle--wrapper-bottom-right {
	position: absolute;
	right: 0;
	bottom: -10.27em;

	& svg {
		width: 10.27em;
		height: 10.27em;
		fill: currentColor;
	}
}

.rectangle--center-left {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1.94em;
	z-index: -1;
	width: fit-content;
	height: min-content;
	margin-top: auto;
	margin-bottom: auto;

	& svg {
		width: 7.78em;
		height: 7.78em;
		fill: currentColor;
	}
}

/* Parallaxe au défilement (images clés : assets/css/style.css) ---------------- */

.parallax-animation-close {
	animation: parallaxEffectClose 1ms linear;
	animation-timeline: --parallax-close;
	view-timeline-name: --parallax-close;
}

.parallax-animation-medium {
	animation: parallaxEffectMedium 1ms linear;
	animation-timeline: --parallax-medium;
	view-timeline-name: --parallax-medium;
}

.parallax-animation-far {
	animation: parallaxEffectFar 1ms linear;
	animation-timeline: --parallax-far;
	view-timeline-name: --parallax-far;
}