html, body{
    margin:0;
    padding:0;
}

.complement{
    display: none;
}

/* ***** HEADER ***** */
nav{display:none;}
header{
    display:flex;
    background-color: white;
}

.logo2{
    display:none;
}

.logo{
    display:flex;
    background:url("../IMG/logo.webp");
    background-size:contain;
    background-repeat:no-repeat;
    width:20%;
    margin-left:5%;
}
@supports not (background-image: url("../IMG/logo.webp")) {
    .logo{
        background:url("../IMG/logo.png");
    }
}

.titre{
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:'Style Script';
    letter-spacing:1rem;
    font-size:3rem;
    width:100%;
}

.EnTete{
    display:flex;
    flex-direction:column;
    width:80%;
    font-size:1rem;
    color:black;
    min-height:10vh;
}

.nav{
    width:70vw;
    display: flex;
    align-items: flex-end;
}

.niveau0{
    width:70vw;
    padding:0;
    display:flex;
    justify-content:space-around;
}

.bouton{
    display:flex;
    justify-content:space-around;
    font-size:1.5rem;
}

.bouton, a{
    color:rgb(0, 0, 0);
    text-decoration: none;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    font-family: 'Open Sans Condensed';
    font-weight: bold;
}

.bouton:hover a{
    color: #dd8fdb;
}

.niveau1{
    border-radius:0.5rem;
    display:none;
    text-align:center;
    position:absolute;
    top:7.5rem;
    padding:0;
    width:160px;
    background:white;
    z-index: 1;
}

.niveau1 a{
    width:100%;
    height:3rem;
    font-size: 1.1rem;
}

.niveau0 li:hover .niveau1{
    display:flex;
    flex-direction: column;
}

.bouton:hover .niveau1 a{
    color:black;
}

.bouton .niveau1 li:hover a{
    width:100%;
    color: #dd8fdb;
}

li{
    list-style-type: none;
}

/* ***** BODY ***** */
.fond {
    position:relative;
    background-position:center;
    background-size:cover;
    background-image:url("../IMG/2.webp");
    height:100vh;
    width:100%;
    background-attachment:fixed;
    background-repeat:no-repeat;
    display:flex;
    justify-content:space-evenly;
}
@supports not (background-image: url("../IMG/2.webp")) {
    .fond{
        background-image:url("../IMG/2.png");
    }
}

.text1 {
    color:#0c2b41;
    font-size:1.4rem;
    font-family:'Delius Swash Caps';
    position:absolute;
    text-align:center;
    bottom:25%;
    width:100%; 
}

.block{
    background-color:white;
    position:relative;
    background-position:center;
    background-size:cover;
    height:50vh;
    width:100%;
    background-attachment:fixed;
    background-repeat:no-repeat;
}

.coutourArticles{
    display:flex;
    justify-content:space-evenly;
    align-items:center;
}

.contourArticle1{
    height:50vh;
    width: 33%;
}
.contourArticle2{
    height:50vh;
    width: 33%;
}
.contourArticle3{
    height:50vh;
    width: 33%;
}


/* ARTICLE 1 */
.article1-inner{
    transition: transform 0.7s;
    width: 100%;
    height:100%;
    transform-style: preserve-3d;
    position:relative;
}
.contourArticle1:hover .article1-inner {
    transform: rotateY(180deg);
}
.article1-front, .article1-back {
    position:absolute;
    height:100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.article1-front{
    background-image: url("../IMG/M.webp");
    background-position:center;
    background-repeat:no-repeat;
    overflow: hidden;
}
@supports not (background-image: url("../IMG/M.webp")) {
    .article1-front{
        background-image: url("../IMG/M.png");
    }
}

.article1-front:before {
    content: '';
    position: absolute;
}
.article1-back {
    transform: rotateY(180deg);
    background-color: #fad0f6;
    border-radius: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width:70%;
    margin:0% 15%;
    text-align: center;
}
.article1-front {
    transition: opacity .7s;
}


/* ARTICLE 2 */
.article2-inner{
    transition: transform 0.7s;
    width: 100%;
    height:100%;
    transform-style: preserve-3d;
    position:relative;
}
.contourArticle2:hover .article2-inner {
    transform: rotateY(180deg);
}
.article2-front, .article2-back {
    position:absolute;
    height:100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.article2-front{
    background-image: url("../IMG/N.webp");
    background-position:center;
    background-repeat:no-repeat;
    overflow: hidden;
}
@supports not (background-image: url("../IMG/N.webp")) {
    .article2-front{
        background-image: url("../IMG/N.png");
    }
}
.article2-front:before {
    content: '';
    position: absolute;
}
.article2-back {
    transform: rotateY(180deg);
    background-color: #fad0f6;
    border-radius: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width:70%;
    margin:0% 15%;
    text-align: center;
}
.article2-front {
    transition: opacity .7s;
}


/* ARTICLE 3 */
.article3-inner{
    transition: transform 0.7s;
    width: 100%;
    height:100%;
    transform-style: preserve-3d;
    position:relative;
}
.contourArticle3:hover .article3-inner {
    transform: rotateY(180deg);
}
.article3-front, .article3-back {
    position:absolute;
    height:100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.article3-front{
    background-image: url("../IMG/D.webp");
    background-position:center;
    background-repeat:no-repeat;
    overflow: hidden;
}
@supports not (background-image: url("../IMG/D.webp")) {
    .article3-front{
        background-image: url("../IMG/D.png");
    }
}
.article3-front:before {
    content: '';
    position: absolute;
}
.article3-back {
    transform: rotateY(180deg);
    background-color: #fad0f6;
    border-radius: 5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    width:70%;
    margin:0% 15%;
    text-align: center;
}
.article3-front {
    transition: opacity .7s;
}
/* FIN ARTICLES */

.fond2 {
    position:relative;
    background-position:center;
    align-items: center;
    background-size:cover;
    background-image:url("../IMG/1.webp");
    height:100vh;
    width:100%;
    background-attachment:fixed;
    background-repeat:no-repeat;
}
@supports not (background-image: url("../IMG/1.webp")) {
    .fond2 {
        background-image:url("../IMG/1.png");
    }
}

.back{
    font-family:'Style Script';
    font-size:2rem;
}