/* RESET */

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, 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, 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; }

html {	scroll-behavior: smooth; }

body {width: 100%; font-family: "Open sans", sans-serif; color: #0A252D; background-color: #9bb6c1; line-height: 160%; font-size: 16px; width: 100%;}

nav, header, main, footer {width: 70vw; padding: 3vw 15vw;  padding-top: 6%;}

h1, h2, h3, p, ul, hr {margin-bottom: 6%;}
h1, h2, h3 {font-weight: 700; letter-spacing: -2px; line-height: 120%; width: 90%;}

h1 {font-size: 3em; margin-bottom: 3%; color: #5d91a6;}
h2 {font-size: 2em; text-align: center; width: 70%; margin-left: 15%; margin-bottom: 3%;}
h3 {font-size: 1.5em; font-weight: 300; text-align: center; width: 90%; margin-left: 5%; line-height: 140%; letter-spacing: -1px;}
h4 {font-size: 1.1em; font-weight: 700; margin-bottom: 2%;}

hr {background-color: transparent; border: none; border-top: 2px dotted #597783;}

nav {display: flex; column-gap: 20px; justify-content: center; padding-top: 3%;}
nav a { display: inline-block; padding: 5px 20px 7px 20px; background-color: #cce0e8; border-radius: 15px; text-decoration: none; text-align: center; color: #093243; transition: linear 0.3s;}
nav a:hover {background-color: white;}

nav a:last-child {background-color: #246985;  color: white;}
nav a:last-child:hover {background-color: #093243;}

header {text-align: center; margin-bottom: 6%;}
header img:first-child {width: 40%; margin: 0 30%;}
header img:last-child {width: 60%; margin: 0 20%;}

main.edito {text-align: center; background-color:#e6f2f6; background-image: url(media/texture12.png);}
main h1 {width: 100%;}


ul.benefits { background-color: white; border-radius: 15px; padding: 30px;}
ul.benefits li {margin:  0 0 10px 22px; line-height: 120%; }

a.cta-black, footer a {display: inline-block;  position: relative; left: 50%; width: 200px; text-align: center; letter-spacing: 0; font-size: 16px;  padding: 10px 0px; background-color: #F44A1C; color: white; border-radius: 15px; margin: 0 0 8% -100px; transition: linear 0.2s; text-decoration: none; box-shadow: 0px 5px 8px rgba(23, 77, 99, 0.553); border: 1px solid #8c2b10; }
a.cta-black:hover {background-color: #d53b12;}

img.cover { width: 80%; margin: 0 10% 8% 10%; border-radius: 20px; border: 1px solid #43829b;}


section {display: flex; justify-content: space-between; column-gap: 40px; align-items: flex-start; }
section article, section ul {width: 50%;}

section article {padding: 30px 0 0 0;}

footer {background-color: #093243; color: white; text-align: center; position: relative;  width: 100%; padding: 4% 0; background-image: url(media/texture.png);}
footer h3 {margin: 0 0 4% 0; color: #9bb6c1; width: 100%; letter-spacing: 0;}
footer h3 strong {font-weight: 700; color: white;}
footer a {display: block;  position: relative; left: 50%; width: 250px; text-align: center; border-radius: 30px;  background-color: #9bb6c1; margin: 0 0 2% -125px; transition: linear 0.2s; text-decoration: none; border: none; box-shadow: none;}
footer a:hover {background-color: #246985;}

p.egue {display: block; background-color: #011; color: #557; text-align: center; width: 100%; padding: 5px 0; font-size: 0.7em; margin: 0;}
p.egue a {color: #789; text-decoration: none;}
p.egue a:hover {text-decoration: underline;}



@media only screen and (min-width: 1800px) {

nav, header, main, footer {width: 1200px; padding: 50px 0; left: 50%; position: relative; margin : 30px 0 30px -600px;}
footer {margin-bottom: 0;}
}

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

nav, header, main, footer {width: 85vw; padding: 3vw 7.5vw;  padding-top: 10%;}
section {flex-wrap: wrap;}
section article, section ul {width: 100%;}

h1, h2, h3 {width: 90%; margin-left: 5%; }
h3 {margin-bottom: 10%;}

nav  {flex-wrap: wrap; width: 90%; padding: 5% ; justify-content: space-between; column-gap: 0px; row-gap: 10px;}
nav a {width: calc(50% - 5px); padding: 10px 0; }
nav a:last-child {background-color: #246985;  color: white; width: 100%;}

header {margin-bottom: 10%;}
header img:first-child {width: 70%; margin: 0 15%;}
header img:last-child {width: 90%; margin: 0 5%;}

article {text-align: center;}

footer a {margin-top: 6%; margin-bottom: 6%;}

}