/* Base
========================================================================== */


@import url('https://use.typekit.net/bgk6mdl.css');

html,
body,
h1,h2,h3,h4,h5,h6,a,p {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    font-size: 62.5%; /* Inisialiser la taille par default de la font */
    font-family: atten-round-new, sans-serif;
	font-weight: 300;
	color: #19193C;
}

body {
    font-size: 1.4rem; /* Rend l'unite divisible par 10  ||  26px = 2.6rem*/
    min-height: calc( 100vh - 6rem); /* force la hauteur de body */
    position: relative; /* impose un positionnement */
	overflow-x: hidden;
    padding: 3rem;
    text-rendering: optimizeLegibility !important; /* lissage des fontes */
    -webkit-font-smoothing: antialiased !important; /* lissage des fontes */
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

p {
	line-height: 1.3;
	font-size: 1.4rem;
}

a, a:hover, a:focus, a:active {
	color: #19193C;
}

/* Header
========================================================================== */

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.h_right a {
	margin-left: 7rem;
	font-size: 1.4rem;
}




/* Section
========================================================================== */

.s-content {
	width: 100%;
    display: flex;
    flex-grow: 2;
}

.s-left,
.s-right {
    width: 50%;
}

.s-left {
    padding: 0 3rem 0 0; 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.s-left svg {
    align-self: center;
    flex-basis: 100%;
    max-height: 70vh;
}

.s-left p {
    align-self: flex-end;
} 


h1 {
	font-size: 7.5vw;
	font-weight: 400;
    text-align: right;
    line-height: 1;
}


.s-right {
    align-self: flex-end;
    padding: 0 0 0 3rem; 
}



/* Breakpoints
========================================================================== */

@media screen and (max-width: 650px) {
    header {
        margin-bottom: 6rem;
        align-items: flex-start;
    }
    
    .h_right a {
        margin-left: 0;
        width: 100%;
        display: block;
        margin-bottom: 1rem;
    }
    
    
    .s-content {
        flex-direction: column-reverse;
    }
    
    
    .s-left,
    .s-right {
        width: 100%;
    }
    
	h1 {
		font-size: 6rem;
        text-align: left;
        margin-bottom: 6rem;
	}
	
	p { 
		font-size: 16px;
	}
	
}