.amaranth-regular {
	font-family : "Amaranth", sans-serif;
	font-weight : 400;
	font-style  : normal;
}

.amaranth-bold {
	font-family : "Amaranth", sans-serif;
	font-weight : 700;
	font-style  : normal;
}

.amaranth-regular-italic {
	font-family : "Amaranth", sans-serif;
	font-weight : 400;
	font-style  : italic;
}

.amaranth-bold-italic {
	font-family : "Amaranth", sans-serif;
	font-weight : 700;
	font-style  : italic;
}

html {
	font-size : min( 1px, 0.13vw );
}

body {
	font-family : "Amaranth", sans-serif;
	color       : var( --bleu );
	margin      : 0 auto;
	font-size   : 16px;
	overflow-x  : hidden;

	--jaune  : #f6a24e;
	--orange : #ec672a;
	--vert   : #009c91;
	--bleu   : #1a495c; /* le texte est en bleu pas en noir */
	--footer : #007f8a;
}

.bouton {
	box-sizing       : border-box;
	padding          : 10px 20px;
	height           : 40px;
	border-radius    : 20px;
	border           : none;
	color            : white;
	background-color : var( --orange );
	font-family      : "Amaranth", sans-serif;
	font-weight      : bold;
	font-size        : 15px;
	cursor           : pointer;
	transition       : box-shadow 150ms ease;
	outline          : 0 solid var( --orange );
	text-decoration  : none;
	
	&.style_orange {
		background-color : var( --orange );
		outline-color    : var( --orange );
	}

	&.style_vert {
		background-color : var( --vert );
		outline-color    : var( --vert );
	}
	&:hover {
		box-shadow : 0 0 10px #000000c0;
	}
}

.sr-only {
	position    : absolute;
	width       : 1px;
	height      : 1px;
	padding     : 0;
	margin      : -1px;
	overflow    : hidden;
	clip        : rect(0, 0, 0, 0);
	white-space : nowrap;
	border      : 0;
}

.saut_ligne {
	display : block;
}

.page {
	--width_reference : 800px;
	padding           : 0 max( calc( (100vw - var( --width_reference )) / 2 ), 5vw );
	width             : 100vw;
	box-sizing        : border-box;
}

.entete {
	display         : flex;
	justify-content : center;
	margin          : 0;
	margin-top      : 30px;
	gap             : 20px;

	img {
		height : 110px;
	}
	h1 {
		display        : flex;
		flex-direction : column;
	}

	.partie_1 {
		font-size   : 27px;
		line-height : 27px;
	}

	.partie_2 {
		font-size   : 38px;
		transform   : translateX(-10px);
		color       : var( --vert );
		line-height : 38px;
	}

	.partie_3 {
		font-size   : 38px;
		transform   : translateX(-65px);
		color       : var( --jaune );
		line-height : 38px;
	}
}

@media ( max-width: 750px ) {
	.page_description {
		text-align : center ! important;
		position   : relative;
	}

	.page_description img {
		/* position : absolute;
		right    : 5vw;
		opacity  : 0.5; */

		display : none;
	}
	
	.page_description .boutons {
		justify-content : center ! important;
	}

	.bandeau {
		text-align : center;
	}
}

@media ( max-width: 500px ) {
	.bas_de_page {
		flex-direction : column;
		align-items    : center;

		img {
			margin-bottom : 30rem;
			max-width     : 50vw;
		}

		.contact > * {
			text-align : center ! important;
		}
	}
}

.page_description {
	background-image    : url( "fond.png" );
	background-size     : cover;
	background-position : top;
	background-repeat   : no-repeat;
	display             : flex;
	gap                 : 50px;
	padding-top         : 20px;
	padding-bottom      : 20px;
	text-align          : right;
	
	.titre {
		color         : var( --orange );
		font-style    : italic;
		font-size     : 25px;
		margin        : 0;
		margin-top    : 10px;
		margin-bottom : 20px;
	}
	
	p {
		font-size   : 19px;
		line-height : 23px;
		margin      : 5px 0;
	}

	.boutons {
		margin          : 30px 0;
		display         : flex;
		gap             : 30px;
		justify-content : flex-end;
		flex-wrap       : wrap;
	}

	img {
		width      : 206px;
		object-fit : contain;
	}
}

.badges {
	--width_reference : 1000px;
	display           : flex;
	justify-content   : center;
	flex-wrap         : wrap;

	.badge {
		margin          : 30px 0;
		display         : flex;
		flex-direction  : column;
		justify-content : center;
		text-align      : center;
		width           : 230px;
	}
	.badge img {
		height     : 50px;
		object-fit : contain;
	}

	.gras_vert {
		color       : var( --vert );
		font-weight : bold;
		font-size   : 19px;
		margin      : 0;
		margin-top  : 10px;
	}

	.normal {
		margin    : 0;
		font-size : 16px;
	}
}

.bandeau {
	background-color : var( --orange );
	padding-top      : 10px;
	padding-bottom   : 10px;
	display          : flex;
	justify-content  : center;
	align-items      : center;
	gap              : 25px;
	color            : white;
	font-size        : 23px;
	font-weight      : bold;
	flex-wrap        : wrap;

	.style_orange_pale {
		background-color : var( --jaune );
	}
}

.page_temoignages {
	--width_reference : 630px;
	background-color  : var( --vert );
	color             : white;
	padding-top       : 10px;
	padding-bottom    : 10px;

	h2 {
		text-align : center;
		font-style : italic;
		font-size  : 25px;
	}

	p {
		text-align : justify;
		margin     : 5px 0;
		font-style : italic;
		font-size  : 18px;
	}

	.navigation {
		display         : flex;
		justify-content : center;
		gap             : 10px;
		margin          : 20px 0;

		button {
			border           : none;
			background-color : white;
			height           : 13px;
			width            : 13px;
			border-radius    : 50%;
			outline          : none ! important;
			padding          : 0;
			cursor           : pointer;
			transition       : box-shadow 150ms ease;

			&.actif {
				opacity : 0.7;
				cursor  : default;
			}

			&:hover:not(.actif) {
				box-shadow : 0 0 10px #000000c0;
			}
		}
	}
}

.profil {
	--width_reference : 630px;

	.qui_suis_je {
		display     : flex;
		margin      : 25px 0;
		gap         : 25px;
		align-items : center;
	}

	.qui_suis_je .template_image,
	.qui_suis_je img {
		height : 150px;
		width  : 150px ! important;

		background-color : var( --vert );
		border-radius    : 50%;
	}

	.right {
		flex : 1;
	}

	.right h2 {
		color      : var( --orange );
		font-style : italic;
		margin     : 10px 0;
	}

	.right p {
		margin : 0;
	}

	.devise {
		margin     : 30px;
		text-align : center;
		color      : var( --vert );
		font-size  : 25px;
	}

	.paragraphe {
		text-align : center;
		margin     : 15px 0;
		font-size  : 16px;
	}

	.paragraphe p {
		margin : 0;
	}

	.gras_orange {
		font-weight : bold;
		color       : var( --jaune );
		font-size   : 25px;

		sup {
			font-size : 15px;
		}
	}

	.boutons {
		margin          : 30px 0;
		display         : flex;
		gap             : 30px;
		justify-content : center;
		flex-wrap       : wrap;
	}
}

.bas_de_page {
	background-color : var( --footer );
	display          : flex;
	justify-content  : space-between;
	padding-top      : 20px;
	padding-bottom   : 20px;

	img {
		height     : 70px;
		object-fit : contain;
	}

	.contact > * {
		color           : white;
		margin          : 0;
		text-align      : right;
		font-size       : 19px;
		text-decoration : none;
	}
}

.gras {
	font-weight : bold;
}

.page_temoignages {
	.liste {
		display                    : flex;
		column-gap                 : 40px;
		overflow                   : hidden;
		--temoignage-decalage      : 0%;

		.temoignage {
			box-sizing    : border-box;
			flex          : 0 0 100%;
			transform     : translateX( var( --temoignage-decalage ) );
			transition    : transform 500ms ease;

			&.actif {
				pointer-events : auto;
			}

			&:not( .actif ) {
				pointer-events : none;
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.page_temoignages .temoignage {
		transition : none;
	}
}