:root{
    --bleufonce: #202767;
    --mairie: #74B9FD;
    --bleu: #6399CE;
    --vivre: #FD7675;
    --decouvrir: #00B894;
    --noir: rgb(30,30,30);
    --blanc: #FFFFFF;
    --maincontent: #f2f0e9;
    --bordure: #2c4064;
    --bleuclair: #98bbd3;
    --bleutresclair:#e5eef4;
    --jaune: #ffed00;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Light.eot');
    src: url('fonts/Poppins-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Poppins-Light.woff2') format('woff2'),
        url('fonts/Poppins-Light.woff') format('woff'),
        url('fonts/Poppins-Light.ttf') format('truetype'),
        url('fonts/Poppins-Light.svg#Poppins-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Medium.eot');
    src: url('fonts/Poppins-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Poppins-Medium.woff2') format('woff2'),
        url('fonts/Poppins-Medium.woff') format('woff'),
        url('fonts/Poppins-Medium.ttf') format('truetype'),
        url('fonts/Poppins-Medium.svg#Poppins-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.eot');
    src: url('fonts/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Poppins-Bold.woff2') format('woff2'),
        url('fonts/Poppins-Bold.woff') format('woff'),
        url('fonts/Poppins-Bold.ttf') format('truetype'),
        url('fonts/Poppins-Bold.svg#Poppins-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

[data-ratio] {display: block; max-width: 100%; position: relative}
[data-ratio]:before {content: ''; display: block;}
[data-ratio] > * {display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}

[data-ratio='20:9']::before { padding-top: 47.5%; }
[data-ratio='16:9']::before { padding-top: 56.25%; }
[data-ratio='4:3']::before { padding-top: 75%; }
[data-ratio='3:4']::before { padding-top: 133.33%; }
[data-ratio='1:1']::before { padding-top: 100%; }

html{
    font-size:16px;
}
body{
    font-family: 'poppins', 'arial', sans-serif;
    font-size:1rem; font-weight:300;
}
img{
    height:auto;
    vertical-align:middle;
    max-width: 100%;
}

img.alignright {
    display: inline-block;
    float: none;
    margin: 20px auto;

}

img.alignleft {
    float: none;
    display: inline-block;
    margin: 20px auto;
}

img.aligncenter {
    float: none;
    display: block;
    margin: 20px auto;
}

@media screen and (min-width: 992px) {
    img.alignright {
        float: right;
        margin: 5px 0 20px 20px;
        max-width: 60%;
    }

    img.alignleft {
        float: left;
        margin: 5px 20px 20px 0;
        max-width: 60%;
    }
}


a{
    text-decoration:none;
    -webkit-transition: all 0.2s ease;transition: all 0.2s ease;
    color: var(--bleu);
}
a:hover {
    color: var(--bleufonce);
}
h1, h2, h3, h4, h5, h6{
    font-weight:bold; margin:1em 0;
}
h1, .h1{
    font-size:2.5rem;
    font-weight:bold;
}
h2 {
    font-size: 1.75rem;
    color: var(--noir);
    font-weight: 500;
}
h3 {
    font-size: 1.2rem;
    color: var(--noir);
    font-weight: 500;
    text-transform: uppercase;
}

h4 {
    font-size: 1.1rem;
    color: var(--noir);
    font-weight: 400;
}

h5 {
    font-size: 1rem;
    color: var(--noir);
    font-weight: 400;
}

h4 {
    font-size: .9rem;
    color: var(--noir);
    font-weight: 400;
}

.has-maincontent-background-color{
    background-color: var(--maincontent)
}
.has-maincontent-color{
    color: var(--maincontent)
}
.has-bleufonce-background-color{
    background-color: var(--bleufonce)
}
.has-bleufonce-color{
    color: var(--bleufonce)
}
.has-bleuclair-background-color{
    background-color: var(--bleuclair)
}
.has-bleutresclair-background-color{
    background-color: var(--bleutresclair)
}
.has-bleuclair-color{
    color: var(--bleuclair)
}
.has-mairie-background-color{
    background-color: var(--mairie)
}
.has-mairie-color{
    color: var(--mairie)
}
.has-vivre-background-color{
    background-color: var(--vivre)
}
.has-vivre-color{
    color: var(--vivre)
}
.has-decouvrir-background-color{
    background-color: var(--decouvrir)
}
.has-decouvrir-color{
    color: var(--decouvrir)
}
.has-noir-background-color{
    background-color: var(--noir)
}
.has-noir-color{
    color: var(--noir)
}
.has-blanc-background-color{
    background-color: var(--blanc)
}
.has-blanc-color{
    color: var(--blanc)
}

@media screen and (min-width:1200px){
    .h-100{
        height:100%;
    }
    .h-50{
        height:50%;
    }
}

@media screen and (min-width:1921px){
    html{
        font-size:17px;
    }
}

@media screen and (min-width:2500px){
    html{
        font-size:18px;
    }
}

a.btn {
    display: inline-block;
    vertical-align: top;
    border: 2px solid var(--bleufonce);
    border-radius: 0;
    padding: 1rem 2.3rem;
    margin: 15px 0 20px;
    font-size: 14px;
    color: #202767;
    line-height: 22px;
    font-weight: 500;
}

a.btn:hover {
    background: var(--bleufonce);
    border-color: var(--bleufonce);
    color: #fff;
}

a.btn.orange:hover {
    background: #df5a58;
    border-color: #df5a58;
    color: #fff;
}