/* ==========================================================================
   ITF – compléments aux modèles Bricks
   1. Menu : page active + survol
   2. Responsive (991 / 767 / 478 px, mêmes paliers que Bricks)
   3. Animations (actives seulement si html.itf-anim, posée dans le <head>)
   ========================================================================== */

:root {
	--itf-mint: #9fdcae;
	--itf-teal: #50b5a6;
	--itf-ease: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   1. Menu
   -------------------------------------------------------------------------- */
#brx-header #brxe-qiymee .bricks-nav-menu > li > a {
	position: relative;
	padding-block: 6px;
	transition: color .25s ease;
}
#brx-header #brxe-qiymee .bricks-nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background: var(--itf-mint);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s var(--itf-ease);
}
#brx-header #brxe-qiymee .bricks-nav-menu > li > a:hover,
#brx-header #brxe-qiymee .bricks-nav-menu > li > a:focus-visible {
	color: var(--itf-mint);
}
#brx-header #brxe-qiymee .bricks-nav-menu > li > a:hover::after,
#brx-header #brxe-qiymee .bricks-nav-menu > li > a:focus-visible::after {
	transform: scaleX(1);
}
#brx-header #brxe-qiymee .bricks-nav-menu > li:is(.current-menu-item, .current-menu-ancestor, .current_page_parent) > a,
#brx-header #brxe-qiymee .bricks-nav-menu > li > a[aria-current="page"] {
	color: var(--itf-mint);
}
#brx-header #brxe-qiymee .bricks-nav-menu > li:is(.current-menu-item, .current-menu-ancestor, .current_page_parent) > a::after,
#brx-header #brxe-qiymee .bricks-nav-menu > li > a[aria-current="page"]::after {
	transform: scaleX(1);
}

/* Menu mobile */
#brx-header #brxe-qiymee .bricks-mobile-menu-toggle,
#brx-header #brxe-qiymee .bricks-mobile-menu-toggle span {
	color: #fff;
}
#brx-header #brxe-qiymee .bricks-mobile-menu-toggle span {
	background-color: #fff;
}
#brx-header #brxe-qiymee .bricks-mobile-menu > li > a {
	border-left: 3px solid transparent;
	transition: color .25s ease, border-color .25s ease;
}
#brx-header #brxe-qiymee .bricks-mobile-menu > li:is(.current-menu-item, .current-menu-ancestor) > a,
#brx-header #brxe-qiymee .bricks-mobile-menu > li > a[aria-current="page"] {
	color: var(--itf-mint);
	border-left-color: var(--itf-mint);
}

/* --------------------------------------------------------------------------
   2. Responsive
   -------------------------------------------------------------------------- */

/* Rangées image + texte : les images collées gardent leur cadrage */
#brx-content .brxe-block:has(> .brxe-text) > img.brxe-image {
	flex-shrink: 0;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
/* Galeries (2 ou 3 photos) : toujours sur une ligne */
#brx-content .brxe-block:has(> img.brxe-image + img.brxe-image) {
	flex-wrap: nowrap;
}
#brx-content .brxe-block:has(> img.brxe-image + img.brxe-image) > img.brxe-image {
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
#brx-content .brxe-block:has(> img.brxe-image + img.brxe-image):not(:has(> :nth-child(3))) > img.brxe-image {
	aspect-ratio: 4 / 5;
}

/* Le contenu ne touche plus les bords de l'écran */
@media (max-width: 1160px) {
	#brx-content > section > .brxe-container,
	#brx-footer > section > .brxe-container {
		width: calc(100% - 48px);
	}
}

/* Tablette */
@media (max-width: 991px) {
	/* Rangées image + texte empilées */
	#brx-content .brxe-block:has(> .brxe-text) {
		flex-direction: column;
		align-items: stretch;
		row-gap: 28px;
	}
	#brx-content .brxe-block:has(> .brxe-text) > :is(img.brxe-image, .brxe-block) {
		width: 100%;
	}
	#brx-content .brxe-block:has(> .brxe-text) > .brxe-text {
		max-width: 100%;
		margin-left: 0;
	}

	/* Accueil : bandeau sur une colonne, le cadre photo passe dessous */
	#brx-content #brxe-rtrpba {
		flex-direction: column;
		row-gap: 8px;
	}
	#brx-content #brxe-tyuksf,
	#brx-content #brxe-kijsfa {
		width: 100%;
	}
	#brx-content #brxe-kijsfa {
		aspect-ratio: 4 / 3;
		max-height: 70vh;
	}

	/* Accueil : tuiles services sur 2 colonnes */
	#brx-content #brxe-nsvnye {
		flex-wrap: wrap;
	}
	#brxe-nsvnye > div {
		width: 50%;
	}

	/* Accueil : partenaires sur 2 colonnes */
	#brx-content #brxe-sdsolq {
		flex-wrap: wrap;
	}
	#brxe-sdsolq > div {
		width: calc(50% - 2px);
		gap: 24px;
	}

	/* Photos pleine largeur : hauteur limitée */
	#brx-content .brxe-block:has(> .brxe-text) > img.brxe-image {
		max-height: 440px;
	}
}

/* Tablette seulement : menu sur une ligne */
@media (min-width: 768px) and (max-width: 991px) {
	#brx-header #brxe-qiymee {
		font-size: 13px;
	}
	#brx-header #brxe-qiymee .bricks-nav-menu {
		gap: 14px;
	}
	#brx-header #brxe-qiymee .bricks-nav-menu > li > a {
		white-space: nowrap;
	}
}

/* Mobile */
@media (max-width: 767px) {
	#brx-content .brxe-text {
		max-width: 100%;
		margin-left: 0;
	}

	#brx-content > section:not(:first-child) {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	#brx-content > section > .brxe-container {
		row-gap: 32px;
	}
	#brx-content > section > .brxe-container > h2.brxe-heading {
		font-size: 28px;
		line-height: 1.2;
	}

	/* En-tête */
	#brx-header #brxe-fckndf .bricks-site-logo {
		height: 64px;
	}

	/* Bandeaux du haut */
	#brx-content > section:first-child {
		padding-top: 120px;
	}
	#brx-content > section:first-child > .brxe-container > .brxe-div {
		width: 100%;
	}
	#brx-content > section:first-child .brxe-text h2 {
		font-size: 24px;
		line-height: 1.25;
	}
	#brx-content > section:first-child h1.brxe-heading:not(#brxe-cjtzhd):not(#brxe-cltdjb) {
		font-size: 40px;
		line-height: 1.1;
	}
	#brx-content #brxe-cjtzhd,
	#brx-content #brxe-cltdjb {
		width: 100%;
		font-size: 30px;
	}
	#brx-content #brxe-cjtzhd b,
	#brx-content #brxe-cltdjb b {
		font-size: 112px;
		line-height: 1;
	}
	#brx-content #brxe-zvuqam {
		flex-wrap: wrap;
		padding-top: 36px;
		padding-bottom: 36px;
	}

	/* Tuiles services */
	#brxe-nsvnye > div h2 {
		font-size: 21px;
	}
}

/* Petit mobile */
@media (max-width: 478px) {
	#brx-content > section > .brxe-container,
	#brx-footer > section > .brxe-container {
		width: calc(100% - 32px);
	}
	#brx-content > section > .brxe-container > h2.brxe-heading {
		font-size: 25px;
	}
	#brx-content > section:first-child h1.brxe-heading:not(#brxe-cjtzhd):not(#brxe-cltdjb) {
		font-size: 34px;
	}
	#brx-content #brxe-cjtzhd,
	#brx-content #brxe-cltdjb {
		font-size: 25px;
	}
	#brx-content #brxe-cjtzhd b,
	#brx-content #brxe-cltdjb b {
		font-size: 88px;
	}

	/* Tuiles en pleine largeur, moins hautes */
	#brxe-nsvnye > div {
		width: 100%;
		aspect-ratio: auto;
		min-height: 150px;
	}
	#brxe-nsvnye > div > i {
		font-size: 34px;
	}

	#brxe-sdsolq > div {
		width: 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: auto;
		justify-content: flex-start;
		gap: 12px;
	}

	/* Pied de page */
	#brx-footer #brxe-ciwpuh {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* --------------------------------------------------------------------------
   3. Animations
   -------------------------------------------------------------------------- */

/* Tuiles services : lien sur toute la tuile + survol */
.itf-tile-link {
	position: absolute;
	inset: 0;
	z-index: 3;
}
.itf-tile-link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}
#brxe-nsvnye > div > h2,
#brxe-nsvnye > div > i {
	transition: transform .4s var(--itf-ease);
}
@media (hover: hover) {
	#brxe-nsvnye > div.itf-tile:hover > h2 {
		transform: translateX(6px);
	}
	#brxe-nsvnye > div.itf-tile:hover > i {
		transform: translate(5px, -5px);
	}
	#brxe-nsvnye > div.itf-tile {
		transition: filter .35s ease;
	}
	#brxe-nsvnye > div.itf-tile:hover {
		filter: brightness(1.08);
	}
}

/* Le zoom du fond ne déborde pas */
#brx-content > section:first-child {
	overflow: hidden;
}

/* Bandeau du haut : entrée au chargement */
@keyframes itfUp {
	from { opacity: 0; transform: translate3d(0, 24px, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes itfZoom {
	from { opacity: .35; transform: scale(1.08); }
	to   { opacity: 1; transform: none; }
}
@keyframes itfOpen {
	from { opacity: 0; clip-path: inset(50% 50% 50% 50%); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes itfCorner {
	from { opacity: 0; transform: scale(.3); }
	to   { opacity: 1; transform: none; }
}

.itf-anim #brx-content > section:first-child > img.brxe-image {
	animation: itfZoom 2.4s var(--itf-ease) both;
}
.itf-anim #brx-content > section:first-child :is(.brxe-breadcrumbs, .brxe-text-basic, h1, .brxe-text, #brxe-zvuqam, #brxe-xkplxf, .brxe-text-link) {
	animation: itfUp .9s var(--itf-ease) both;
}
.itf-anim #brx-content > section:first-child :is(.brxe-breadcrumbs, .brxe-text-basic) { animation-delay: .1s; }
.itf-anim #brx-content > section:first-child h1 { animation-delay: .22s; }
.itf-anim #brx-content > section:first-child #brxe-xkplxf { animation-delay: .34s; }
.itf-anim #brx-content > section:first-child .brxe-text { animation-delay: .42s; }
.itf-anim #brx-content > section:first-child :is(#brxe-zvuqam, .brxe-text-link) { animation-delay: .55s; }
.itf-anim #brxe-vidcsd {
	animation: itfOpen 1.3s var(--itf-ease) .35s both;
}
.itf-anim #brxe-kijsfa > div {
	animation: itfCorner .7s var(--itf-ease) .8s both;
}

/* Apparition au défilement (le script ajoute .is-in) */
.itf-anim :is(
	#brx-content > section:not(:first-child) > .brxe-container > .brxe-heading,
	#brx-content > section:not(:first-child) > .brxe-container > .brxe-text,
	#brx-content > section:not(:first-child) > .brxe-container > .brxe-block > .brxe-text,
	#brxe-nsvnye > div,
	#brxe-sdsolq > div
) {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity .8s ease var(--itf-delay, 0ms),
		transform 1s var(--itf-ease) var(--itf-delay, 0ms);
}
.itf-anim #brx-content > section:not(:first-child) > .brxe-container > .brxe-block img.brxe-image {
	opacity: 0;
	clip-path: inset(0 0 20% 0);
	transform: scale(1.05);
	transition:
		opacity .9s ease var(--itf-delay, 0ms),
		clip-path 1.2s var(--itf-ease) var(--itf-delay, 0ms),
		transform 1.5s var(--itf-ease) var(--itf-delay, 0ms);
}
.itf-anim :is(
	#brx-content > section:not(:first-child) > .brxe-container > .brxe-heading,
	#brx-content > section:not(:first-child) > .brxe-container > .brxe-text,
	#brx-content > section:not(:first-child) > .brxe-container > .brxe-block > .brxe-text,
	#brxe-nsvnye > div,
	#brxe-sdsolq > div,
	#brx-content > section:not(:first-child) > .brxe-container > .brxe-block img.brxe-image
).is-in {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
	#brx-header #brxe-qiymee .bricks-nav-menu > li > a,
	#brx-header #brxe-qiymee .bricks-nav-menu > li > a::after,
	#brxe-nsvnye > div > h2,
	#brxe-nsvnye > div > i {
		transition: none;
	}
}