* Reset
// 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, nav {
    list-style: none;
}
a {text-decoration: none;}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* ----------------------reset terminer------------------- */

body {
    xmargin: 0;
    xbackground-image: linear-gradient( 109.6deg, rgba(1,4,43,1) 11.2%, rgba(1,4,43,1) 22.2%, rgba(115,1,33,1) 91.1% );
    xbackground-color: #fcfcfc;

    /*background: hsla(0, 0%, 100%, 1);
    background: linear-gradient(225deg, hsla(0, 0%, 100%, 1) 10%, hsla(32, 39%, 74%, 1) 59%);
    background: -moz-linear-gradient(225deg, hsla(0, 0%, 100%, 1) 10%, hsla(32, 39%, 74%, 1) 59%);
    background: -webkit-linear-gradient(225deg, hsla(0, 0%, 100%, 1) 10%, hsla(32, 39%, 74%, 1) 59%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FFFFFF", endColorstr="#D7BFA4", GradientType=1 );*/

    /*background: hsla(154, 53%, 82%, 1);
    background: linear-gradient(90deg, hsla(154, 53%, 82%, 1) 0%, hsla(24, 88%, 65%, 1) 50%, hsla(216, 56%, 16%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(154, 53%, 82%, 1) 0%, hsla(24, 88%, 65%, 1) 50%, hsla(216, 56%, 16%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(154, 53%, 82%, 1) 0%, hsla(24, 88%, 65%, 1) 50%, hsla(216, 56%, 16%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#B8E9D4", endColorstr="#F4985A", GradientType=1 );*/

    /*background: hsla(52, 94%, 21%, 1);
    background: linear-gradient(0deg, hsla(52, 94%, 21%, 1) 0%, hsla(54, 37%, 32%, 1) 50%, hsla(56, 21%, 52%, 1) 100%);
    background: -moz-linear-gradient(0deg, hsla(52, 94%, 21%, 1) 0%, hsla(54, 37%, 32%, 1) 50%, hsla(56, 21%, 52%, 1) 100%);
    background: -webkit-linear-gradient(0deg, hsla(52, 94%, 21%, 1) 0%, hsla(54, 37%, 32%, 1) 50%, hsla(56, 21%, 52%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#665803", endColorstr="#716B34", GradientType=1 );*/

    /*background: hsla(228, 17%, 53%, 1);
    background: linear-gradient(90deg, hsla(228, 17%, 53%, 1) 0%, hsla(228, 28%, 62%, 1) 50%, hsla(229, 28%, 88%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(228, 17%, 53%, 1) 0%, hsla(228, 28%, 62%, 1) 50%, hsla(229, 28%, 88%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(228, 17%, 53%, 1) 0%, hsla(228, 28%, 62%, 1) 50%, hsla(229, 28%, 88%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#727A9A", endColorstr="#838EBA", GradientType=1 );*/

    /*background: hsla(52, 94%, 21%, 1);
    background: linear-gradient(90deg, hsla(52, 94%, 21%, 1) 0%, hsla(51, 87%, 3%, 1) 48%, hsla(56, 21%, 52%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(52, 94%, 21%, 1) 0%, hsla(51, 87%, 3%, 1) 48%, hsla(56, 21%, 52%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(52, 94%, 21%, 1) 0%, hsla(51, 87%, 3%, 1) 48%, hsla(56, 21%, 52%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#665803", endColorstr="#0E0C01", GradientType=1 );*/

    /*background: hsla(52, 94%, 21%, 1);
    background: linear-gradient(90deg, hsla(52, 94%, 21%, 1) 0%, hsla(60, 43%, 3%, 1) 14%, hsla(51, 87%, 3%, 1) 48%, hsla(56, 21%, 52%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(52, 94%, 21%, 1) 0%, hsla(60, 43%, 3%, 1) 14%, hsla(51, 87%, 3%, 1) 48%, hsla(56, 21%, 52%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(52, 94%, 21%, 1) 0%, hsla(60, 43%, 3%, 1) 14%, hsla(51, 87%, 3%, 1) 48%, hsla(56, 21%, 52%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#665803", endColorstr="#0A0A04", GradientType=1 );*/

    background: hsla(46, 73%, 75%, 1);
    background: linear-gradient(0deg, hsla(46, 73%, 75%, 1) 0%, hsla(176, 73%, 88%, 1) 100%);
    background: -moz-linear-gradient(0deg, hsla(46, 73%, 75%, 1) 0%, hsla(176, 73%, 88%, 1) 100%);
    background: -webkit-linear-gradient(0deg, hsla(46, 73%, 75%, 1) 0%, hsla(176, 73%, 88%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#EED991", endColorstr="#CCF7F4", GradientType=1 );

    color: #003262;
    font-family: "Ysabeau", sans-serif;
}

.cardo-regular {
    font-family: "Cardo", serif;
    font-weight: 400;
    font-style: normal;
}

.cardo-bold {
    font-family: "Cardo", serif;
    font-weight: 700;
    font-style: normal;
}

.cardo-regular-italic {
    font-family: "Cardo", serif;
    font-weight: 400;
    font-style: italic;
}

/* <weight>: Use a value from 200 to 700
 <uniquifier>: Use a unique and descriptive class name */

.oswald-<uniquifier> {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}
/* // <weight>: Use a value from 1 to 1000
 // <uniquifier>: Use a unique and descriptive class name* */

.ysabeau-<uniquifier> {
    font-family: "Ysabeau", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}
/*.site-centre {
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-content: center;
    justify-items: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    font-family: "Ysabeau", sans-serif;
    background-color: #fcfcfc;
}

.site-centre > * {
    width: min(90vw, 1200px);
    align-items: center;
    justify-content: center;
}*/

.index {
    display: grid;
    height: 100vh;
    grid-template-areas:
    'header header header'
    'left main right'
    'footer footer footer';
    gap: 10px 20px;
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: 1fr 3fr 1fr;
}

header { grid-area: header; }
main { grid-area: main; }
.left { grid-area: left; }
.right { grid-area: right; }
footer { grid-area: footer; }

header {
    text-align: center;
}

nav {
    list-style-type: none;
    margin: 0;
    padding: 1em 0.2em;
}

li {
    display: inline-block;

}

li a {
    color: #003262;
    font-size: clamp(1rem, 1.5vw, 4rem);
    text-decoration: none;
    padding: 1em;
    xopacity: 0.2;
}
li a:hover {
    opacity: 1;
}

main {
    display: flex;
    flex-direction: column;
    padding: 1em;
    justify-content: center;
}
.blog-note {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-note-image {
    width: 20vw;
    margin: 0 auto;
}
.blog-note-image img {width: 70vw;}

.titre {
    font-size: clamp(4rem, 7vw, 8rem);
    text-align: center;
    margin: 0 auto;
}

.sous-titre {
    font-size: clamp(1rem, 1.5vw, 4rem);
    text-align: center;
    margin: 0 auto;
    padding: 10px;
}

footer {
    text-align: center;
    padding: 5em;
    xcolor: rgb(191,42,100);
}

/*header {
    display: grid;
    grid-template-areas: "titre"
                        "sous-titre"
                        "menu";
    column-gap: 1em;
    font-style: normal;
    xfont-weight: 600;
    xfont-variation-settings: 'wght' 600;
    color: #404d5b;
    margin-top: 1em;
    line-height: 1.2;
}
xheader > * {margin: 10px 0;}

.titre {
    grid-area: titre;
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: clamp(2rem, 7vw, 4rem);
    margin: 0 auto;
    text-align: center;
}

.sous-titre {
    grid-area: sous-titre;
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: #000000;
    width: 75%;
    text-align: center;
    margin: 0 auto;
}

small {
    font-size: 60%;
}

nav {
    grid-area: menu;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    xfont-weight: 300;
    xfont-variation-settings: 'wght' 300;
    margin-bottom: 2em;
    xborder: #87a3c1 2px solid;
}

nav:before, nav:after {
    content: "";
    display: block;
    flex: 1;
    height: 2px;
    background-color: #87a3c1;
}

li {
    padding: 2px;
    font-size: clamp(1rem, 3vw, 1.5rem);
}
nav li a {color: #000000;}*/