/*******************
  PAGE REFERENCES
*******************/

.page-template-page-references .page-color,
.page-template-page-references .footer-menu a:hover {
	color: var(--orange);
}

.page-template-page-references .big-intro {
	min-height: 60vh;
}
body.page-template-page-references.scrolled header,
.page-template-page-references .big-intro {
	background: var(--orange);
}

.page-template-page-references footer .mentions .logo {
	background-image: url(../../img/logo-amagar-orange.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.page-template-page-references footer .mentions .logo img { opacity: 0; }

.page-template-page-references .big-intro .content {
	max-width: 70em;
}

.page-template-page-references .big-intro .action {
	margin-top: calc(var(--gutter) * 2);
}

.page-template-page-references .big-intro .action .btn-am-icon {
	font-size: 18px;
}
.page-template-page-references .big-intro .action .btn-am-icon::after {
	transform: rotate(90deg);
}
.page-template-page-references .big-intro .action .btn-am-icon:hover::after {
	transform: rotate(135deg);
}

@media screen and (max-width: 1200px) {
	.page-template-page-references .big-intro .quote { max-width: 100%; }
}
@media screen and (max-width: 900px) {
	.page-template-page-references .big-intro .content { max-width: 100%; }
}


.reference-layout {
	position: relative;
	min-height: 100vh;
}
.reference-layout::after {
	content: '';
	z-index: 5;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	transition: 1.5s 0.5s;
}
main > section:nth-child(even) .reference-layout::after {
	right: auto;
	left: 0;
}
.reveal .reference-layout::after {
	width: 0;
}
.reference-layout .ill {
	flex: 0 0 35%;
	position: sticky;
	top: 10px;
	height: 100%;
}
.reference-layout .ill img {
	display: block;
	width: 100%;
	min-height: 100vh;
	object-fit: cover;
	object-position: center;
}
.reference-layout .content {
	flex: 1;
	max-width: 1200px;
	padding: 30vh calc(var(--gutter) * 2);
	text-align: left;
}
.reference-layout .category {
	margin-bottom: calc(var(--gutter) * 1.5);
	font-size: 0.9em;
}
.reference-layout .slogan {
	margin-bottom: var(--gutter);
	font-size: 0.9em;
}
.reference-layout .signature {
	margin-top: var(--gutter);
	font-size: 0.9em;
}
.reference-layout .text {
	margin-top: calc(var(--gutter) * 1.5);
	margin-bottom: calc(var(--gutter) * 1.25);
	font-size: 1.25em;
}

.reference-layout .text blockquote {
	display: block;
	padding-left: 1.5em;
	border-left: var(--lightGrey) 5px solid;
}
.reference-layout .text blockquote > *:not(:last-child) {
	margin-bottom: 1em;
}

.reference-layout .action .btn-am::after {
	background-image: url(../../img/icon-arrow-btn-orange.svg);
}

.reference-layout .logos {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: calc(100% + 2em);
    margin: -1em;
}
.reference-layout .logos.right {
	flex-direction: row-reverse;
}
.reference-layout .logos.center {
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.reference-layout .logos > div {
	padding: 1em;
}
.reference-layout .logos img {
	width: 12em;
	height: 6em;
	object-fit: contain;
	object-position: center;
}


@media screen and (max-width: 1200px) {
	.reference-layout .content {
		padding: 15vh calc(var(--gutter) * 1.25);
	}
}
@media screen and (max-width: 750px) {
	.reference-layout .content {
		padding: calc(var(--gutter) * 1.25);
	}
}
@media screen and (max-width: 600px) {
	.reference-layout .ill {
		flex: 0 0 100%;
	}
	.reference-layout .ill img {
		height: 50vh;
		min-height: 1px;
		object-fit: cover;
		object-position: center;
	}
}


.page-template-page-reference .small-intro,
.scrolled.page-template-page-reference header {
	background: var(--orange);
	margin-bottom: 0;
}
@media screen and (min-width: 1201px) {
	.page-template-page-reference .reference-layout .content {
		padding: 15vh calc(var(--gutter) * 2) 20vh calc(var(--gutter) * 2);
	}
}
.page-template-page-reference .reference-layout .ill {
	position: relative;
	top: 0;
	height: auto;
}
.page-template-page-reference .reference-layout .ill img {
	min-height: 1px;
	width: unset;
}
.page-template-page-reference footer {
	padding-top: calc(var(--gutter) * 1.5);
	box-shadow: rgba(0, 0, 0, 0.15) 0 0 5px 1px;
}
/*
 * Fiche d'un cas client, sous 600 px (21/09/2026) : l'image (picture.fulldiv, en absolu) ne donnait aucune hauteur
 * à sa colonne .ill, passée au-dessus du texte ; elle débordait donc sur le début du texte. Et « width: unset »
 * ci-dessus lui donnait la largeur de son format : une photo portrait ne couvrait plus la largeur de l'écran.
 * La colonne prend la hauteur du bandeau (50vh) et l'image la couvre.
 */
@media screen and (max-width: 600px) {
	.page-template-page-reference .reference-layout .ill {
		height: 50vh;
	}
	.page-template-page-reference .reference-layout .ill img {
		width: 100%;
		height: 100%;
	}
}