/* ==========================================================================
   Page shell & container
   ========================================================================== */

body {
	background: var(--pi-color-background) url('../images/Fond.png') center center no-repeat fixed;
	background-size: contain;
	color: var(--pi-color-text);
	font-family: var(--pi-font-family);
	font-size: var(--pi-font-size-base);
	line-height: var(--pi-line-height-base);
	text-align: justify;
}

/* Sticky footer: on a page short enough that header + content don't fill
   the viewport (login, a near-empty search, etc.), .pi-main grows to push
   the footer down to the bottom instead of leaving a gap below it. On a
   normal, taller page this has no visible effect - main is already past
   its minimum size. */
#pi-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.pi-container {
	max-width: var(--pi-container-max-width);
	margin-inline: auto;
	padding-inline: var(--pi-space-5);
}

@media (min-width: 992px) {
	.pi-container {
		padding-inline: var(--pi-container-gutter);
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

.pi-header {
	background: var(--pi-color-background);
	border-bottom: 2px solid var(--pi-color-header-border);
	box-shadow: var(--pi-shadow-header);
	position: relative;
	z-index: 100;
}

.pi-header.is-stuck {
	position: fixed;
	inset-inline: 0;
	top: 0;
}

/* Only added when the homepage hero is actually rendering (see index.php) -
   floats the header over the hero instead of pushing it down the page, so
   the background image fills the whole viewport including behind the bar.
   Fully transparent while at the top so the hero shows through, then fades
   to the normal solid header once .is-stuck takes over on scroll. */
.pi-header--overlay {
	position: absolute;
	inset-inline: 0;
	top: 0;
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
	transition: background-color .3s ease, border-bottom-color .3s ease, box-shadow .3s ease, color .3s ease;
}

/* White text while the header is transparent over the hero, so it stays
   readable against a busy background image. This cascades to anything that
   doesn't set its own color (e.g. the mobile nav toggle glyph); elements
   below with their own explicit color need overriding individually. Both
   revert to the normal palette once .is-stuck makes the header solid. */
.pi-header--overlay:not(.is-stuck) {
	color: #ffffff;
}

.pi-header--overlay:not(.is-stuck) .pi-logo-text,
.pi-header--overlay:not(.is-stuck) .pi-header__logo-tagline,
.pi-header--overlay:not(.is-stuck) .pi-header__cart a,
.pi-header--overlay:not(.is-stuck) .pi-header__lang a,
.pi-header--overlay:not(.is-stuck) .pi-nav__menu > ul > li > a {
	color: #ffffff;
}

/* The header-left module's content (e.g. a phone number) is authored
   in-editor and typically carries its own inline color style, which nothing
   short of !important can override from here. */
.pi-header--overlay:not(.is-stuck) .pi-header__cart,
.pi-header--overlay:not(.is-stuck) .pi-header__cart * {
	color: #ffffff !important;
}

.pi-header--overlay.is-stuck {
	background: var(--pi-color-background);
	border-bottom-color: var(--pi-color-header-border);
	box-shadow: var(--pi-shadow-header);
}

.pi-header__spacer {
	display: none;
}

.pi-header__spacer.is-active {
	display: block;
}

.pi-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	gap: var(--pi-space-4);
	padding-block: var(--pi-space-3);
	/* Overrides .pi-container's 10% gutter - fine for body copy, but far too
	   narrow here: it left barely enough room for logo + nav + cart before
	   the language switcher had nowhere left to go but its own row. */
	padding-inline: var(--pi-space-6);
}

.pi-header__logo {
	flex: 0 0 auto;
	max-width: 100%;
}

.pi-header__logo img {
	display: block;
	/* No fixed size otherwise - caps whatever the backend's Logo image param
	   points to at a sane header height instead of however large the
	   uploaded file happens to be; width follows automatically to keep the
	   logo's own aspect ratio. */
	max-height: 56px;
	width: auto;
}

.pi-header__logo-tagline {
	color: var(--pi-color-highlight);
	font-size: 1.125rem;
	text-align: center;
	margin-top: var(--pi-space-1);
	transition: color .3s ease;
}

.pi-header__cart,
.pi-header__lang {
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	.pi-header__inner {
		align-items: center;
	}

	/* Row 1: centered logo, full width so row 2 wraps below it */
	.pi-header__logo {
		order: 1;
		flex: 1 0 100%;
		text-align: center;
	}

	.pi-header__logo img {
		margin-inline: auto;
	}

	/* Let #pi-nav's children (toggle label + expandable menu) become
	   direct flex items of .pi-header__inner, so the toggle label can
	   sit in row 2 next to cart/lang while the menu itself still drops
	   to its own full-width row below when opened. */
	#pi-nav {
		display: contents;
	}

	/* Row 2: cart, language and the hamburger toggle, side by side.
	   Cart/lang are allowed to shrink (and their content to wrap) so the
	   three always fit on one row instead of the toggle overflowing to
	   its own line. */
	.pi-header__cart {
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
	}

	.pi-header__lang {
		order: 3;
		flex: 1 1 auto;
		min-width: 0;
	}

	.pi-nav__toggle-label {
		order: 4;
		flex: 0 0 auto;
	}

	/* Module content (e.g. a phone-number icon) can be sized for a full
	   header row on desktop; shrink it so cart+lang+toggle reliably fit
	   on one row at phone widths instead of pushing the toggle to wrap
	   onto its own line. Language icons are sized by .pi-lang__icon
	   instead (components.css), which already accounts for phone widths. */
	.pi-header__cart img {
		width: 24px;
		height: 24px;
	}

	.pi-header__cart,
	.pi-header__lang {
		font-size: 0.8125rem;
	}

	/* Row 3 (when open): the menu itself, full width below row 2 */
	.pi-nav__menu {
		order: 5;
		flex: 1 0 100%;
	}
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.pi-nav {
	/* No flex-grow - letting nav grow to fill the row swallows all the free
	   space meant to be shared evenly between logo/nav/cart/lang (see
	   justify-content: space-evenly on .pi-header__inner), and can even
	   force the language switcher to wrap onto its own row. */
	flex: 0 1 auto;
	min-width: 0;
}

.pi-nav__toggle-label {
	display: none;
	font-size: 2rem;
	line-height: 1;
	text-align: end;
	padding: var(--pi-space-2);
	cursor: pointer;
}

.pi-nav__toggle {
	display: none;
}

@media (max-width: 767px) {
	.pi-nav__toggle-label {
		display: block;
	}

	.pi-nav__menu {
		display: none;
	}

	.pi-nav__toggle:checked ~ .pi-nav__menu {
		display: block;
	}
}

/* ==========================================================================
   Secondary header module row (header-left / header-right)
   ========================================================================== */

.pi-top-row {
	padding-block: var(--pi-space-4);
}

.pi-top-row__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pi-space-5);
}

.pi-top-row__col {
	flex: 1 1 0;
	min-width: 260px;
}

/* ==========================================================================
   Main content
   ========================================================================== */

.pi-main {
	flex: 1 0 auto;
	padding-block: var(--pi-space-6);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.pi-footer {
	position: relative;
	overflow: hidden;
	background: var(--pi-color-primary);
	background-image: linear-gradient(to left, var(--pi-color-primary), var(--pi-color-secondary));
	color: #adadad;
	font-size: 0.875rem;
	/* No margin-top - that was a transparent gap, letting the body's
	   background image show through above the footer. .pi-main's own
	   (solid) padding-bottom already provides the breathing room. */
}

/* Soft, irregular (not perfectly round) blurred blobs standing in for the
   old flat gradient rectangle - same blue palette as everywhere else, just
   organic instead of straight-edged. Purely decorative and behind
   everything else (see z-index on .pi-footer__inner/__wave below), so they
   never interfere with reading the footer's own content. */
.pi-footer::before,
.pi-footer::after {
	content: '';
	position: absolute;
	z-index: 0;
	border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
	filter: blur(32px);
	pointer-events: none;
}

.pi-footer::before {
	width: 460px;
	height: 380px;
	top: -160px;
	left: -120px;
	background: var(--pi-color-accent);
	opacity: .55;
}

.pi-footer::after {
	width: 380px;
	height: 340px;
	bottom: -150px;
	right: -90px;
	border-radius: 58% 42% 35% 65% / 55% 60% 40% 45%;
	background: var(--pi-color-link);
	opacity: .6;
}

.pi-footer .pi-module {
	padding: var(--pi-space-5);
}

@media (min-width: 768px) {
	/* Columns sit side by side in a row here, not stacked - the full
	   padding-bottom (matching the other three sides) just adds
	   unnecessary empty space below the row before the footer ends. */
	.pi-footer .pi-module {
		padding-bottom: var(--pi-space-3);
	}
}

.pi-footer__wave {
	position: relative;
	z-index: 1;
	line-height: 0;
}

.pi-footer__wave svg {
	display: block;
	width: 100%;
	height: 80px;
}

.pi-footer__inner {
	/* Full width, independent of --pi-container-max-width - the footer
	   is meant to always run edge to edge even if the main content
	   container is capped. */
	position: relative;
	z-index: 1;
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--pi-space-6);
	padding-inline: 0;
}

.pi-footer__col {
	flex: 1 1 0;
	min-width: 240px;
}

.pi-footer__col h3 {
	color: #ffffff;
}

.pi-footer a {
	color: #bfbfbf;
}

.pi-footer a:hover,
.pi-footer a:focus {
	color: #ffffff;
}

@media (max-width: 767px) {
	.pi-footer {
		text-align: center;
	}

	.pi-footer__inner {
		flex-direction: column;
		/* Stacked modules already get breathing room from their own
		   padding (.pi-footer .pi-module) - an additional flex gap on
		   top of that just doubles up the space between them. */
		gap: 0;
	}

	/* Each module's own padding is on all four sides, so two stacked
	   modules add up to double this value between them (e.g. 24px + 24px
	   at the base --pi-space-5) - cut it down so blocks don't end up so
	   far apart. */
	.pi-footer .pi-module {
		padding-block: var(--pi-space-3);
	}
}

/* ==========================================================================
   Generic column/grid utility (in-content use)
   ========================================================================== */

.pi-cols {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pi-space-4);
}

.pi-cols-2 > * {
	flex: 1 1 calc(50% - var(--pi-space-4));
}

.pi-cols-3 > * {
	flex: 1 1 calc(33.333% - var(--pi-space-4));
}

.pi-cols-4 > * {
	flex: 1 1 calc(25% - var(--pi-space-4));
}

@media (max-width: 767px) {
	.pi-cols-2 > *,
	.pi-cols-3 > *,
	.pi-cols-4 > * {
		flex: 1 1 100%;
	}
}