/**** NORMALIZE ************************************************************************************/

html, body{
	width: 100%;
	padding: 0;
	margin: 0;
	background: #ffffff;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	position: relative;

	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
*{
	outline: none;
	box-sizing: border-box;
}
img{
	border: 0;
}
a{
	text-decoration: none;
}
h1, h2, h3, h4, h5, h6{
	margin: 0;
	font-weight: normal;
	font-size: 16px;
}
picture{
	display: block;
}

/**** FIN NORMALIZE ********************************************************************************/

:root{

	/* noir */
	--color-1: #000000;
	/* blanc */
	--color-2: #ffffff;
	/* gris */
	--color-3: #cccccc;
	--color-3-dark: #999999;
	--color-3-light: #eeeeee;
	--color-3-lighter: #f6f6f6;

	--font-1: 'Open Sans', sans-serif;

    --global-offset-top: 0px;
	--global-padding: 60px;
	--global-spacing: 40px;

	--content-offset-top: 0px;
	--content-width-normal: 1024px;
	--content-width-large: 1400px;

}

@media (max-width: 1024px) {

	:root{

		--global-padding: 30px;

	}

}

@media (max-width: 768px) {

	:root{

		--global-padding: 0;
		--global-spacing: 30px;

	}

}

/***************************************************************************************************/

body{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	color: var(--color-1);
	font-family: var(--font-1);
	font-size: 16px;
    line-height: 1.5;
}

a{
	color: var(--color-theme-1);
}

.no-scroll{
	overflow: hidden;
}

/***************************************************************************************************/
/* TITRES */

.h1{
	line-height: 1.2;
	font-size: 30px;
	font-weight: 600;
}
.h2{
	line-height: 1.2;
	font-size: 24px;
    font-weight: 600;
}
.h3{
}
.h4{
}

@media (max-width: 1024px) {

	.h1{
		font-size: 24px;
	}
	.h2{
		font-size: 20px;
	}
	.h3{
	}
	.h4{
	}

}

/***************************************************************************************************/
/* TEXTE RTE */

.ckeditor, .rte{
	width: 100%;

	& iframe{
		width: 100% !important;
	}
	& div[data-oembed-url] > div{
		max-width: 100% !important;
	}
	& img{
		width: 100% !important;
		height: auto !important;
	}
	:is(ul, ol){
		text-align: left;
	}
	& .h2:not(:first-child){
		margin-top: 20px;
	}
}

/***************************************************************************************************/
/* IMAGES */

picture{
	position: relative;

	&[data-lg-id]{
		cursor: pointer;
	}

	& img{
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	&[data-mode="cover"] img{
		object-fit: cover;
	}
	&[data-mode="contain"] img{
		object-fit: scale-down;
		position: static;
	}
	& .zoom{
		--size: 36px;

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: var(--size);
		height: var(--size);
		background: var(--color-theme-1);
		color: var(--color-2);
		font-size: 18px;
		position: absolute;
		left: calc(50% - (var(--size) / 2));
		top: calc(50% - (var(--size) / 2));
		z-index: 2;
		opacity: 0;
		transition: opacity .2s ease-in-out;
	}
	& .copyright{
		float: left;
		text-shadow: 0 0 5px #000000;
		padding: 10px;
		color: var(--color-2);
		font-size: 14px;
		font-weight: bold;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 3;
		cursor: default;
		opacity: 0.7;
	}
}
picture:hover {
	& .zoom{
		opacity: 1;
	}
}

/***************************************************************************************************/
/* BOUTON */

.button{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 20px;
	color: var(--color-2);
	cursor: pointer;
    transition: background .2s ease-in-out;
}
	.button-icon{
		font-size: 14px;
	}
	.button_label{
		font-family: var(--font-2);
		font-size: 20px;
		font-weight: bold;
    	text-transform: uppercase;
	}

.button--main{
    background: var(--color-theme-1);
	color: var(--color-2);
}
.button_trigger:hover .button--main,
.button--main:hover{
	background: var(--color-theme-2);
}

@media (max-width: 480px) {

	.button{
		padding: 10px 15px;
	}

}

/***************************************************************************************************/
/* PDF */

.pdf{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
	width: 100%;
	position: relative;
}
	.pdf_content{
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 15px;
		width: 100%;
		position: relative;
		z-index: 2;

		&::after{
			flex-grow: 1;
			content: "";
			height: 1px;
			background: rgba(0, 0, 0, 0.2);
		}
	}
		.pdf_label{
			color: var(--color-1);
			font-size: 16px;
			text-align: left;
		}
	.pdf_icon{
		flex-shrink: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 36px;
		width: 36px;
		background: var(--color-theme-1);
		color: var(--color-2);
		font-size: 18px;
		position: relative;
		z-index: 2;
		transition: all .3s ease-in-out;
	}

.pdf:hover{
	& .pdf_icon{
		background: var(--color-theme-2);
	}
}

/***************************************************************************************************/
/* CITATION */

blockquote,
.indent{
	margin: 10px 0;
	padding: 20px;
	border-radius: 10px;
	background: var(--color-3-lighter);
	font-family: inherit;
	font-style: normal;
}

/***************************************************************************************************/
/* TABLEAU */
.rte table:not(.table-condensed){
	width: 100% !important;
	background: transparent;
	border-spacing: 1px;
	border: 0;
	text-align: left;
	line-height: 20px;

	& tr{
		&:first-child > *{
			border-top: 0;
		}
		&:last-child > *{
			border-bottom: 0;
		}
	}

	& th{
		padding: 15px;
		background: var(--color-1);
		color: var(--color-2);
		border: 0;
		font-size: 14px;
		font-weight: 500;
		vertical-align: top;
	}

	& td{
		padding: 15px;
		background: var(--color-3);
		color: var(--color-1);
		border: 0;
		font-size: 14px;
		vertical-align: top;
	}
}