*{margin:0;padding:0}
body{font-family:Helvetica;font-size:0.7em;margin:auto}
body::before{content:"";position:fixed;inset:0;background:url('../images/noise.png')repeat;opacity: 0.2;mix-blend-mode:multiply;pointer-events: none;z-index: 9999;}
h1{flex:auto;margin-left:2%;background:url(../images/logo-sylvain-jardin.png)no-repeat;width:300px;height:76px;text-indent:-9999px;overflow:hidden;}
h2{font-size:3em;color:#265947;padding:0 0% 40px 0;font-family:Times;}
h3{font-size:1.75em;color:#319369;padding:20px 0 10px 0}
h4{font-size:2em;color:#ffffff;}
nav{flex:auto;font-size:1.5em;text-transform:uppercase;font-weight:bold;letter-spacing: 0.1rem;text-align:right;padding:34px 2% 0 0;}
p{font-size:1.75em;padding:10px 0 10px 0;color:#265947;font-family:Times;line-height: 140%}
ul{padding:0 0 20px 100px;list-style-image: url(../images/puce.png);}
li{font-size:1.5em;color:#319369;font-weight:bold;padding:8px 4px}
header{padding:20px;background-color:#319369;display:flex}
article{padding:0 6% 3% 6%;display:flex;}
.button{color:#ffffff;padding:12px;background-color:#319369;font-size:1.5em;border-radius: 100px;font-weight:bold;cursor:pointer;border:none}
.button:hover{background-color:#265947;text-decoration:none;}
footer{clear:both;font-size:1em;padding:40px 0 20px 0;text-align:center;background:#265947 url(../images/fond-footer.png)no-repeat top left}
a:link,a:visited{transition:color.5s;text-decoration:none;color:#ffffff;}
a:hover,a:active{text-decoration:underline;color:#b0e1d0;text-underline-offset:8px;}
.photo-small {width:50%;flex:1;padding: 0 20px}
.photo-small img {width:100%;padding:120px 0 60px 0}
.photo-home {padding: 0 2%}
.photo-home img {width:96%;border: solid 6px #ffffff;}
.text-small {width:50%;flex:1;padding:120px 0 20px 0;}
.text-center {width:60%;float:left;padding:60px 20% 20px 20%;background-color:#b0e1d0}
.text-left {width:94%;float:left;padding:60px 0% 20px 6%;background-color:#b0e1d0}
.mentions {font-size:1.25em;color:#ffffff;font-family:Times;padding:14px 0}
.wave-1-bg {background: url(../images/wave-1.png) no-repeat bottom;}
.wave-2-bg {background: url(../images/wave-2.png) no-repeat top;}
.framed {border: solid 1px;border-radius: 3px;padding:10px;text-align:center}

@media (max-width:768px) {
h1{margin-left:1%;background:url(../images/logo-sylvain-jardin-small.png)no-repeat;width:150px;height:30px;background-size:150px 30px;padding-bottom:10px}
h2{font-size:2.5em;}
h3{font-size:1.5em;padding:10px 0 0 0}
nav{font-size:1.25em;padding:10px 1% 0 0;}
p{font-size:1.4em}
ul{padding:0 0 0 60px}
li{font-size:1.3em}
header{padding:20px 10px;flex-direction:column;}
article{padding:0 2%;flex-direction:column;}
.text-center {width:96%;padding:40px 2%}
.photo-small img {padding:40px 0 40px 0}
.photo-small {width:100%;flex:1;padding:0}
.text-small {width:100%;padding:60px 0 0 0;}
.photo-home {padding: 10px 1%}
.photo-home img {width:97%}
}

@media (min-width:769px) and (max-width:1200px) {
h1{margin-left:2%;background:url(../images/logo-sylvain-jardin-small.png)no-repeat;height:40px;}
h2{font-size:2.5em;}
h3{font-size:1.5em}
nav{padding:14px 2% 0 0;}
ul{padding:0 0 0 60px}
li{font-size:1.3em}
header{padding:20px 10px;}
article{padding:0 2%}
.text-center {width:80%;padding:40px 10%}
.photo-small img {padding:60px 0 60px 0}
.text-small {padding:60px 0 0 0;}
}