@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@200;400;600&family=Overlock:wght@900&display=swap');

* {
    box-sizing: border-box;
}

html {
    font: 400 100%/150% "Noto Sans Display", Helvetica, Arial, sans-serif;
    color: #555;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

h1 {
    position: relative;
    text-transform: uppercase;
    color: #00916e;
    font-weight: 200;
    font-size: 3rem;
    line-height: 1.25em;
    margin: 0 5vmin;
    padding: 10vmin 0 0;
}

h1::after {
    content: "";
    display: block;
    position: absolute;
    border-bottom: #56b8a1ff solid 2px;
    height: 1rem;
    margin-top: -.5rem;
    width: 100vw;
    margin-left: calc((100vw - 6em) * -1);
}

h2 {
    text-transform: uppercase;
    color: #888;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.25em;
    border-bottom: solid #888 1px;
    margin: 2rem 0 0;  
    display: inline-block;
}

h3 {
    font-family: "Overlock", "Noto Sans Display", Helvetica, Arial, sans-serif;
    color: #00916e;
    font-weight: 600;
    font-size: 2.75rem;
    line-height: 1em;
    margin: .75rem 0 2rem;
    display: block;  
}

p {
    margin: 0 0 1rem;
}

audio {
    margin: 1rem 0 3rem;
    width: 100%;
}

img, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

figure {
    margin: 0;
}

a {
    text-decoration: none;
    color: #555;
}

.hidden {
    position: absolute;
    left: -9999px;
}

#background-top {
    height: 35vh;
    width: 100vw;
    background: white;
    position: absolute;
    top: 0;
    z-index: -2000;
}

#circle {
    position: absolute;
    top: 9rem;
    z-index: -1000;
    overflow: hidden;
    height: 50vw;
    width: 100vw;
    background: url(../images/interface/circle-light.svg) center top;
    background-size: 300vw;
}

    /*--- debut section main-index ---*/

#main-index #background-top {
    background-color: white;
}

#main-index #circle {
    top: 5vmin;
    height: 80vh;
    background: url(../images/interface/circle-dark.svg) center top;
    background-size: 200vw;
}

    /*--- fin section main-index ---*/

/*--- fin section générale ---*/

/*--- début header ---*/

header {
    padding: 5vmin 0 1rem;
}

header .top-nav {
    position: relative;
}

#main-logo {
    display: block;
    margin-left: 5vmin;
}

#main-logo img {
    width: 14rem;
}

#alt-linguistique {
    position: absolute;
    top: 0;
    right: 5vmin;
    padding: .5rem;
    font-size: 1rem;
    line-height: 1.25rem;
    border: #56b8a1ff solid .1rem;
    border-radius: 50%;
    height: 2.5rem;
    width: 2.5rem;
    text-align: center;
}

#alt-linguistique:hover {
    background: #00916e75;
    color: white;
}

header nav {
    display: block;
    margin: 2rem 0 0;
}

header ul {
    list-style: none;
    display: block;
    margin: 0 5vmin;
    padding: 0;
    border-left: #56b8a1ff solid .5rem;
}

header a {
    text-transform: uppercase;
    color: #00916e;
    font-size: 1.25rem;
    display: block;
}

header nav a {
    padding: .5rem;
} 

header .selected {
    background: #56b8a1ff;
    color: white;
}

header li a:hover {
    background: #56b8a1ff;
    color: white;
}

@media screen and (min-width: 768px) {
    
    #circle {
        top: 10rem;
    }
    
    header nav {
        padding: 1rem 0 0;
        border-bottom: #56b8a1ff solid .5rem;
    }
    
    header ul {
        display: flex;
        justify-content: center;
        border-left: none;
        margin-left: 0;
        margin-right: 0;
        padding: 0 5vmin;
    }

    header li {
        flex-grow: 1;
    }

    header li a {
        text-align: center;
        padding: .5rem;
    }
}

/*--- fin header ---*/

/*--- début main ---*/

main {
    padding: 0;
    background-color: white;
}

main ul {
    list-style: none;
    padding: 0;
}

main div.figure {
    padding: 2rem 5vmin 0;
}

main figure {
    position: relative;
}

main figure img {
    border-radius: 50%;
    padding: 2vw;
}

main figure svg {
    position: absolute;
    top: 0;
}

main figure svg text {
    fill: #888;
    font-size: .75rem;
}

main div.content.has-figure{
    padding: 60vw 5vmin 1rem;
    margin-top: -60vw;
}

main li div.content.has-figure{
    margin-bottom: -30vw;
    padding-bottom: 30vw;
}

main li:last-of-type div.content.has-figure {
    padding-bottom: 1rem;
    margin-bottom: 0;
}

main div.content p:first-of-type {
    margin-top: 1rem;
}

main div.background-color1 {
    background-color: #D2DDEE;
}

main div.background-color2 {
    background-color: white;
}

main div.background-color3 {
    background-color: #F1DDE9;
}

main div.content.center {
    margin-top: 4rem;
    padding-bottom: 5vmin;
}

main .inside.center {
    padding: 0 5vmin;
    max-width: calc(768px + 5vmin);
    margin: 0 auto;
}

main form {
    margin-top: 5vmin;
}

main form label {
    display: block;
}

main form input, main form textarea {
    display: block;
    width: 100%;
}

main form .button {
    display: flex;
    justify-content: space-between;
    margin-top: 5vmin;
}

main form .button input {
    background: #FFFFFF75;
    border-radius: .5rem;
    border: solid 1px #56b8a1;
    width: fit-content;
    padding: .5rem 1.5rem;
    font-family: inherit;
    color: #00916e;
    font-size: 1rem;
    margin: 0 1rem;
}

#send {
    border-width: 2.5px;
    font-weight: 600;
    background-color: #FFF;
}

main form .button input:hover, #send:hover {
    background-color: #cce4de;
}

#image, #clip-sonore {
    font-family: inherit;
    color: inherit;
}

main form .required::after {
    content: ' *';
    color: #FF4949;
}

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

    main h1 {
        margin-bottom: 4rem;
    }
    
    main div.content.has-figure {
        padding: 1rem 5vmin 5vw;
        margin-top: 0;
        margin-bottom: 0;
        min-height: 45vw;
    }

    main div.figure {
        float: right;
        width: 55vw;
        margin-top: -10vw;
    }

    main figure img {
        padding: 1.5vw;
    }

    main div.content.has-figure .inside.has-figure {
        width: 70vw;
    }

    audio {
        width: 40vw;
    }
}

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

    header .top-nav, header ul, main h1 {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    main li {
        margin: 0;
    }

    main div.content div.inside.has-figure {
        max-width: calc(1024px * .7);
        margin-left: 0;
        margin-right: 0;
    }

    header #main-logo {
        margin: 0;
    }

    main div.figure {
        width: calc(1024px * .55);
        margin-top: calc(1024px * -.1);
        margin-right: calc((100vw - 1024px)/2);
        padding-right: 0;
    }

    main div.content.has-figure {
        padding-left: calc((100vw - 1024px) / 2);
        padding-right: calc(((100vw - 1024px) / 2) + (1024px * .3));
        min-height: calc(1024px * .46);
    }

    #circle {
        height: calc(1024px * .5);
    }
    
    audio {
        width: calc(1024px * .4);
    }

    main figure img {
        padding: 1rem;
    }
}

    /*--- début section main-index ---*/

#main-index main {
    background:     
    linear-gradient(to bottom, rgba(0,0,0,0) 50%,rgba(0,0,0,.75) 100%),
    linear-gradient(to left, rgba(0,0,0,0) 50%,rgba(0,0,0,.75) 100%),
    url(../images/freli.jpg);
    background-size: cover;
    background-position: 25% 50%;
    margin: 10vmin 5vw 0;
    height: calc(100vh - 20vmin);
    padding: 5vmin 5vmin 15vmin;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1000;
}

#main-index main .logo {
    width: 60vmin;
    border-radius: 0;
}

#main-index main nav {
    width: 65vmin;   
    align-self: center;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

#main-index main nav a {
    color: white;
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1.5em;
    border: solid white 1px;
    padding: .25em .75em;
    border-radius: .5em;
}

#main-index main nav a:hover {
    background: #FFFFFF50;
}

    /*--- fin section main-index ---*/

/*--- fin main ---*/

/*--- début footer ---*/

footer {
    padding: 4rem 5vmin 3vmin;
    background: url(../images/interface/mountain.svg) no-repeat;
    background-size: contain;
    background-position: 0 100%;
    color: #56b8a1ff;
}

footer .contact {
    display: flex;
    justify-content: flex-end;
}

footer img {
    width: 8rem;
    margin-right: 1rem;
}

footer h1 {
   margin-left: 0;
   margin-right: 0;
   margin-bottom: 2rem;
   padding-top: 1em;
}

footer h1::after {
    margin-left: -1em;
    margin-top: -.5rem;
}

footer .spacer-left {
    flex-grow: 3;
}

footer .spacer-right {
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
}

footer .content {
    max-width: fit-content;
}

footer  .link>a {
    display: flex;
    align-items: flex-end;
    padding: .5rem 0;
}

footer .social-networks {
    padding: 1.5rem 0;
    display: flex;
    justify-content: center;
}

footer .social-networks a {
    padding: .5rem;
}

footer span {
    display: inline-block;
    height: 2rem;
    min-width: 2rem;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: .5rem;
}

footer span.icon-email{
    background-image: url(../images/interface/email.svg);
}

footer span.icon-tel{
    background-image: url(../images/interface/tel.svg);
}

footer span.icon-map{
    background-image: url(../images/interface/map.svg);
}

footer span.icon-facebook{
    background-image: url(../images/interface/facebook.svg);
}

footer span.icon-twitter{
    background-image: url(../images/interface/twitter.svg);
}

footer span.icon-instagram{
    background-image: url(../images/interface/instagram.svg);
}

footer .credit, .credit a {
    color: #888;
    text-align: right;
    font-size: .75rem;
    line-height: .9rem;
}

footer p {
    margin: 0;
}

    /*--- début section main-index ---*/

#main-index footer {
    background: none;
    margin-top: -20vmin;
    padding: 21vmin 5vw 0;
    z-index: -500;
}

#main-index footer p {
    margin-bottom: 0;
    text-align: right;
    font-size: .75rem;
    line-height: 1.5em;
    color: #555;
}

    /*--- fin section main-index ---*/

/*--- fin footer ---*/