.clear {
	display: none;
}

.break {
	flex-basis: 100%; 
	height: 0;
}

html, body {
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #FDFDFC;
	font: 11px/14px 'Nunito Sans', Arial, Helvetica, sans-serif;
	color: #141414;
	scroll-behavior: smooth;
}

/* ==================================================== */
/* STRUCTURE GLOBALE DU SITE WEB (CONTENU) */

div#site{
	margin: 0 auto;
	overflow: hidden;
}

/* CONTENU */
div.contenu{
	margin: 0 auto;
	width: 1600px;
}

/* Couleur de la marge gauche */
div#site-marge, div#site-marge-et-pied{
	background-color: #FFEC00; 
	background-image: linear-gradient(90deg, #FFEC00 50%, #FDFDFC 50%);
}

/* Couleur en extension à l'arrière du contenu */
div#contenu-couleur{
	position: relative;
	background-color: #FFEC00;  
	width: 1056px;
	height: auto; 
	padding-bottom: 156px; /* 116px + 40px */
}


/* ==================================================== */
/* ------- BOÎTE TEXTE ------- */

div#texte{
	display: flex;
	position: relative; 
	top: -36px; 
	margin-left: 100px;
}

div#logo-texte{
	 display: flex;
}

div#trait-texte{
	display: flex; 
	margin-top: 104px; 
	align-items: baseline;
}

/* --- */

div#contenu-sequence{
	position: relative; 
	top: -116px;
}

div#site-marge-et-pied{
	margin-bottom: 116px;
}


/* ==================================================== */
/* ------- EN-TÊTE ET TRAITS ------- */

div#trait-entete{
	position: relative;
	left: 12px;
	background: url(../images/trait-entete.svg) no-repeat top right;
	display: block;
	width: 88px;
	height: 116px;
	background-size: contain;
	background-size: 88px 116px;
}

div#logo-YR{
	background: url(../images/logo-YR.svg) no-repeat top left;
	cursor: pointer;
	display: block;
	width: 96px;
	height: 72px;
	background-size: contain;
	background-size: 85px 72px;
	z-index: 100;
}

div#trait-contenu{
	background: url(../images/trait-contenu.svg) no-repeat top left;
	display: block;
	width: 152px;
	height: 204px;
	background-size: contain;
	background-size: 152px 204px;
}

/* Trait de la marge */
div#trait-marge{
	background: url(../images/trait-marge.svg) no-repeat bottom left;
	display: block;
	width: 152px;
	height: 192px;
	background-size: contain;
	background-size: 144px 192px;
	margin-top: 229px;
	margin-right: 0;
	align-self: flex-start;
}

/* ---------------------------------------------------- */
/* ====================== MOBILE ====================== */
/* ---------------------------------------------------- */


@media only screen and (max-width: 1600px) {

	/* ============================================================= */
	/* CONTENU : 1600PX à 1024PX --- */
	/* ============================================================= */

	div#site{
		overflow: visible;
	}

	div.contenu{
		width: 100%;
	}

	div#contenu-couleur{  
		width: 66vw;
		padding-bottom: calc(2.7777vw + 111.5555px);
	}


	/* ------- BOÎTE TEXTE ------- */

	div#texte{
		margin-left: calc(2.7777vw + 55.5555px);
	}

	div#trait-texte{
		margin-top: calc(0.8681vw + 90.1111px);
	}


	/* ------- EN-TÊTE ET TRAITS ------- */

	div#trait-entete{
		left: calc(2.6042vw - 29.6666px);
	}

	div#logo-YR{
		min-width: 86px;
		width: calc(0.8681vw + 82.1111px);
	}

	div#trait-contenu{
		width: calc(15.7986vw - 100.7777px);
		height: calc(21.875vw - 146px);
	}

	/* Trait de la marge */

	div#trait-marge{
		width: calc(11.1111vw - 25.7777px);
		height: calc(13.1944vw - 19.1111px);
		margin-top: calc(20.6597vw - 101.5555px);
	}
}


@media only screen and (max-width: 1023px) { 

	/* ============================================================= */
	/* CONTENU : 1024PX à 580PX --- */
	/* ============================================================= */

	/* CONTENU */
	div.contenu{
		width: 100%;
	}

	div#site-marge, div#site-marge-et-pied{
		margin-top: 70px;
	}

	/* Couleur en extension à l'arrière du contenu */
	div#contenu-couleur{  
		width: 66vw;
		padding-bottom: 121px; /* 70px + 10px + 41px (extra) */
	}

	/* ------- BOÎTE TEXTE ------- */

	div#texte{
		top: -30px;
		margin: 0 57px;
		width: 100%;
	}

	div#logo-texte{
	 	flex-direction: column;
	}

	div#trait-texte{
		margin-top: 55px;
	}

	/* --- */
	div#contenu-sequence{
		top: -70px;
	}

	div#site-marge-et-pied{
		margin-bottom: 70px;
	}

	/* ------- EN-TÊTE ET TRAITS ------- */

	div#trait-entete{
		display: none;
	}

	div#logo-YR{
		position: relative;
	 	left: -10px;
		width: 72px;
		height: 60px;
		background-size: 72px 60px;
	}

	div#trait-contenu{
		display: none;
	}

	/* Trait de la marge */
	div#trait-marge{
		display: none;
	}
}


@media only screen and (max-width: 579px) { 

	/* ============================================================= */
	/* CONTENU : 580PX à 320px --- */
	/* ============================================================= */

	/* CONTENU */
	div.contenu{
		width: 100%;
	}

	div#site-marge, div#site-marge-et-pied{
		margin-top: 36px;
	}

	/* Couleur en extension à l'arrière du contenu */
	div#contenu-couleur{  
		width: 100%;
		padding-bottom: 57px; /* 70px - 13px */
	}

	/* ------- BOÎTE TEXTE ------- */

	div#texte{
		top: -18px;
		margin: 0 11px;
		width: calc(100vw - 57px);
	}

	div#trait-texte{
		margin-top: 25px;
	}

	/* --- */

	div#contenu-sequence{
		top: 0px;
	}

	div#site-marge-et-pied{
		margin-bottom: 0px;
	}

	/* ------- EN-TÊTE ET TRAITS ------- */

	div#logo-YR{
		position: relative;
	 	left: 0;
		width: 43px;
		height: 36px;
		background-size: 43px 36px;
	}

}