/*©PL Malhaprez - 2020*/
@charset "utf-8";

/*COULEURS*/
:root{ 
/*S=sombre, M=moyen, C=clair*/
--bleuS:#141E32;
--bleuM:#1E324B;
--bleuMa:30,50,75,.1;    
--bleuC:;
--roseS:#E43F5A;
--roseM:#F56B80;
--roseC:#F598A6;
--grisS:;
--grisM:#E5E5E5;
--grisC:#F5F5F5;
--blanc:#FFF;
--noir:#000;
}
/*************************global*************************/
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-weight:300;
	font-size:100%; 
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
}
ul, li {list-style-type:none;}

article a[href^="https://"]:link, article a:link{color:var(--bleuS);}
article a[href^="https://"]:hover, article a:hover{color:var(--bleuM);text-decoration: none;}
article a[href^="https://"]:visited, article a:visited{color:var(--bleuM);}
article a[href^="https://"]::after{content:'\02750';margin-left:.125rem;}

html{min-width:100vw;min-height:100vh;background:var(--bleuM);background:linear-gradient(170deg,#1E324B,#141E32);background-size:cover;}
body{width:96vw; max-width:1024px;margin:auto;}

/*************************header*************************/
header{display:block;min-height:50vh;}
header>div{display:block;width:640px;margin:auto;}
h1:before{content:"";margin:4rem auto 0 auto;display:block;width:350px;height:350px;border-radius:50%;background-image:url(../img/MalhaprezPierreLoic.jpg); background-size:cover;filter: contrast(1.2);}
h1{color:var(--blanc);width:350px;margin:auto;}
h1 span{display:block;}
h1 span:nth-child(1){margin-top:2rem;font-size:2.1rem;line-height:2.5rem;letter-spacing:.03rem;}
h1 span:nth-child(2){text-transform: uppercase;font-weight:bold;font-size:3.5rem;letter-spacing:.15rem;line-height:2.75rem;}

h2{margin:1.5rem auto 0 auto;width:350px;height:2.5rem;line-height:2.5rem;border-radius:.3rem;background:var(--roseM);text-align:center;font-size:1.2rem;font-family:Georgia,serif;font-style: italic; color:var(--bleuS);}
header>div>p{display:block;margin:auto;padding:calc(1.5rem + 3vh) 0;color:var(--blanc);font-size:1.2rem;letter-spacing:0.05rem; text-align: center;}
header>div>p:after{content: ">"; display: block;writing-mode:vertical-rl;margin:3rem auto 0 auto;font-weight: bold;}


/*************************section + footer*************************/
section{position:relative; background: var(--grisC);border-radius: 2.25rem;overflow: hidden;}
footer{padding:calc(1.5rem + 3vh) 0;color:var(--blanc);font-size:.8rem;text-align: center;}
footer a:link{color:var(--blanc);}
footer a:hover{color:var(--grisC);text-decoration: none;}
footer a:visited{color:var(--grisC);}
footer a::after{content:'\02750';margin-left:.125rem;}

/*************************nav*************************/
nav{font-size:1.2rem;background:var(--blanc);border-radius: 1.5rem 1.5rem 0 0 ;}
nav ul{display:block;width:98%;margin:auto;padding:3rem 0;text-align: center;}
nav ul li{display:inline-block; text-align: center;margin:.5rem .75rem;border-bottom:5px solid var(--blanc);transition: border ease .75s;}
nav ul li:hover{border-bottom: 5px solid var(--roseS);border-image-slice:1;border-bottom-width: 5px;border-image-source: radial-gradient(var(--roseS),var(--roseC));transition: border ease .5s;}
nav a{display:block;padding-bottom:.25rem;font-family:Georgia,serif;text-decoration:none; color:var(--bleuS);font-weight:500;}
nav a:hover{text-decoration:none;color:var(--roseS);}

/*************************article*************************/
article{padding:8vh 0;color:var(--bleuM);}
article:last-of-type{border-top:2px dotted var(--roseC);}
article:nth-child(odd){background-color: var(--grisM);}
article>div{margin:1rem 5rem 1rem 18rem; font-size:1rem;}
article h3{display:inline-block;font-family: Georgia,serif;font-weight:500;font-size:2.25rem;margin:1rem 0 0 18rem;color:var(--roseS)}
article p, h4{display:block;margin-bottom:0.8rem;}
article strong{font-weight:500;}
article ul{margin-bottom:1rem;}
article ul li {margin-bottom:.5rem;}
article ul li::before {content:'\02714';color:var(--bleuM);margin-right:.125rem;}
quote{display:block;font-style: italic;margin-bottom:1rem;}
article h4{font-weight:500;font-size:1.25rem;}

/*************************surlignage*************************/
#contexte p:last-child strong,#besoin p:last-child strong,#pourquoiMoi p:last-child strong,#expertise p:last-child strong{background:var(--roseC);padding:0 .25rem;border-radius:.2rem;}

/*************************illustration*************************/
#profil div::before, #contexte div::before, #besoin div::before, #enjeux div::before, #pourquoiMoi div::before, #expertise div::before, #contact div::before, #bonus div::before{content:''; position:absolute;left:5rem; height:8rem; width:8rem; background-size:cover; opacity:.15;}
/**/
#profil div::before{background:url("../img/profil.svg") no-repeat;}
#contexte div::before{background:url("../img/contexte.svg") no-repeat;}
#besoin div::before{background: url("../img/besoin.svg") no-repeat;}
#enjeux div::before{background: url("../img/enjeux.svg") no-repeat;}
#pourquoiMoi div::before{background: url("../img/pourquoiMoi.svg") no-repeat;}
#expertise div::before{background: url("../img/expertise.svg") no-repeat;}
#contact div::before{background: url("../img/contact.svg") no-repeat;margin-top:-4rem;}
#bonus div::before{background: url("../img/bonus.svg") no-repeat;margin-top:-1.5rem;}

/*************************typo*************************/
/* roboto-regular - latin */
@font-face {font-family: 'Roboto';font-style: normal;font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), 
       url('../fonts/roboto-v20-latin-regular.woff') format('woff'); }
/* roboto-italic - latin */
@font-face {font-family: 'Roboto';font-style: italic;font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('../fonts/roboto-v20-latin-italic.woff2') format('woff2'), 
       url('../fonts/roboto-v20-latin-italic.woff') format('woff'); }
/* roboto-500 - latin */
@font-face {font-family: 'Roboto';font-style: normal;font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-v20-latin-500.woff2') format('woff2'), 
       url('../fonts/roboto-v20-latin-500.woff') format('woff'); }
/* roboto-500italic - latin */
@font-face {font-family: 'Roboto';font-style: italic;font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
       url('../fonts/roboto-v20-latin-500italic.woff2') format('woff2'), 
       url('../fonts/roboto-v20-latin-500italic.woff') format('woff'); }

/*************************Medias*************************/

@media all and (max-width:768px){
    body{width:100vw;}
    header>div{width:384px;}
    h1:before{margin:4rem auto 0 auto;width:350px;height:350px;}
    h1{width:350px;}
    h1 span:nth-child(2){font-size:3.35rem;letter-spacing:.1rem;}
    section{border-radius:0;}
    nav{border-radius:0;}
    #profil div::before, #contexte div::before, #besoin div::before, #enjeux div::before, #pourquoiMoi div::before, #expertise div::before, #contact div::before, #bonus div::before{display:none;}
    article>div,article h3{margin:1rem 2rem;}
    footer{padding:4rem 1rem;color:var(--blanc);font-size:.8rem;text-align: center;}
}