/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


*, html{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}



@import url("https://fonts.googleapis.com/css?family=Roboto:700");


/* reset tailles typos */
html, body {
	font-size: 62.5%;
}
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.3;

  font-family: "Roboto", "Arial", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	margin: 0;
	padding: 0;
	text-align:center;
}


b, strong{
	/*font-weight:bold;*/
	font-weight:600;
}

.clear{
	clear:both;
}
.clearer:before,
.clearer:after {
	content: "";
	display: table;
}

.clearer:after{
	clear: both;
}


img {
    max-width: 100%;
    height: auto;
}




h1, h2, h3, h4, h5, h6 {
  /*font-weight: 300;*/ /*font-weight:normal;*/
	font-family: "Roboto", "Arial", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	margin-bottom:0.8em;
	text-transform:uppercase;
}
h1 { font-size: 3.2rem; line-height: 1.2;  /*letter-spacing: -.1rem;*/ }
h2 { font-size: 2.5rem; line-height: 1.25;/* letter-spacing: -.1rem; */ margin-bottom:20px;}
h3 { font-size: 1.6rem; line-height: 1.3;  /*letter-spacing: -.1rem;*/ }
h4 { font-size: 1.5rem; line-height: 1.3;  /*letter-spacing: -.1rem;*/ }



/* Larger than tablet */
@media (min-width: 1160px) {
  h1 { font-size: 4rem; }
  h2 { font-size: 3rem; }
  h3 { font-size: 3rem; }
  h4 { font-size: 2.2rem; }

}




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
	background:#F2F2F2;
	position:relative;
	overflow:hidden;
}

h1{
	margin:0 auto;
	line-height:1;
}

#wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	align-items: center;
    width: 100%;
    max-width: 1024px;
    height: 100%;
    /*background-color: #F2F2F2;*/
	text-transform:uppercase;
	font-size:22px;
}

#content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
	flex-direction:column;
	padding: 0 6vw;
	font-weight:bold;
}

#content h1 img{
		max-width:248px;
		width:70vw;
	}

.contenuTexte{
	margin-top:1.2em;
	margin-bottom:2.6em;
	/*margin-left:50px;
	margin-right:50px;*/
}

.bouton{
	padding:17px 40px;
	background:#C81719;
	color:#fff;
	border:2px solid #C81719;
	transition:all ease 0.3s;
	font-weight:bold;
	text-decoration:none;
	font-size:14px;
}
.bouton:hover{
	background:#fff;
	color:#C81719;
}

#footer {
    /*background-color: #333;*/
    color: white;
    text-align: center;
    padding: 0px 10px 20px 10px;
    position: relative;
    bottom: 0;
    width: 100%;
	max-width:800px;
	display: flex;
    justify-content: center;
    align-items: center;
	flex-direction:column;
}

#footer .logo-TPF{
	padding-right:0px;
	width:100%;
	padding-bottom:10px;
}
	#footer .logo-TPF img{
		max-width:21.5vw;
	}
#footer .logos{
	width:100%;
	border-top:1px solid #000;
	padding-top:10px;
	display: flex;
    justify-content: space-between;
    align-items: center;
	flex-direction:row;
}

#footer .logos div{
	width:16%;
}
#footer .logos div a{
	display:block;
}

@media screen and (min-width: 1024px) {
	
	#fondSite{
		height:268px;
		width:684px;
		position:absolute;
		background:url(img/fond.svg) no-repeat bottom left;
		z-index:1;

        width: clamp(600px, 50vw, 1024px);
        height: clamp(235px, 50vw, 402px);
        background-size: contain;
        bottom: 0;
        right: 0;
        transform: translate(50%, 0);
    
	}
	
	#wrapper{
		z-index:2;
		font-size: clamp(22px, 1.9vw, 32px);
	}
	
	#content {
		/*font-size:28px;*/
			padding: 0 10px;
		position:relative;
		/*padding-bottom:calc(133.48px + 5.8vh);*/
	}
	
	#content h1 img{
		max-width:352px;
		width:22vw;
	}
	
	
	.contenuTexte{
		margin-top:1.2em;
		/*margin-top:1.75em;*/
		margin-bottom:1.89em;
		/*margin-bottom:3.75em;*/
		margin-left:0px;
		margin-right:0px;
	}
	
	.bouton{
		font-size:18px;
	}
	
	
	#footer {
		padding: 0px 10px 1.8vh 10px;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction:row;
	}

	#footer .logo-TPF{
		padding-right:50px;
		padding-bottom:0;
		width:auto;
		
	}
	#footer .logo-TPF img{
		max-width:100%;
	}
	
	#footer .logos{
		flex:1;
		padding-top:0;
		border-top:none;
		border-left:1px solid #000;
		padding-left:50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction:row;
	}

	
}



@media screen and (min-width: 1800px) {
		#fondSite{
		/*height:402px;
		width:1023px;
		position:absolute;
		background:url(img/fond.svg) no-repeat center center;
		background-size:1023px 402px;
		bottom:0;
		right:-512px;
		z-index:1;*/
	}
	
	#content {
		/*font-size:34px;*/
	
	}
	
	.contenuTexte{
		/*margin-top:7.22vh;
		margin-bottom:9.2vh;*/
	}
	
	#footer {
		/*padding: 0px 10px 5vh 10px;*/
	}
	
}