* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    vertical-align: baseline;
}


/********************************************
        TITRE
*********************************************/
.bloc-titre {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0.1em 0.6em;
}

.center-div {
    margin: 0 auto;
}

.logo-titre {
    margin-right: 0;
    margin-left: 0;
    max-width: 10em;
}

.slogan {
    color: #52ACDD;
    font-size: 2rem;
    padding: 0.5em;
}

/*****************************************
        MENU
******************************************/
nav {
    width: 100%;
    background-color: #F9D435;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 10;


}

nav ul {
    display: flex;
    align-items: baseline;
    margin-left: 3em;
    padding: 1em;
}

nav li {
    list-style: none;
    padding-left: 1em;
}

nav a {
    color: #52ACDD;
    font-size: 1.2rem;
    text-decoration: none;
}

/**************************************
    Partie un
***************************************/
section {
    width: 100%;
    padding: 1em;
    scroll-behavior: smooth;
}

.container {
    width: 100%;
    display: grid;
    height: auto;
    grid-template-columns: repeat(auto-fit, minmax(570px, 1fr));
    align-items: center;
}

.containerBis {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    column-gap: 2em;
    align-items: center;
}

.containerTer {
    width: 100%;
    display: grid;
    grid-template-columns: 10% 35% 35% 15%;
    grid-template-rows: auto;
    column-gap: 4em;
    align-items: center;
}

.partie-ter {
    margin: 3em;
}

.partie-text {
    display: flex;
    flex-direction: column;
    justify-content: start;
    flex-wrap: wrap;
    padding: 0 3em;
    border-radius: 0.75em;
}

.partie-text h1 {
    padding: 2em .4em 1em .4em;
    font-size: 2.5rem;
    color: slategray;
}

.partie-text h2 {
    padding: .5em .4em 1em .6em;
    font-size: 1.8rem;
    color: slategray;
}

.partie-text p {
    padding: 1em .4em .5em .5em;
    font-size: 1.2rem;
    line-height: 2rem;
    color: rgb(54, 68, 82);
}

.trait {
    margin: 1.5em 0 0 1.2em;
    width: 8%;
    height: 5px;
    background-color: #F9D435;
    box-shadow: 0 0.08em 0.02em #52ACDD;
    margin-bottom: 3em;
}

.partie-img {
    margin: 5em 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partie-imagette {
    margin: 3em 0 1.5em 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.encadrer {
    border: #52ACDD 1px solid;
    border-radius: 0.75em;
    margin: 3em 0;
}

.sect1 {
    background-color: aliceblue;
}

.sect2 {
    background-color: antiquewhite;
}

.sect3 {
    background-color: cornsilk;
}

.sect4 {
    background-color: floralwhite;
}

.sect5 {
    /*width: 100%;*/
    background-color: aliceblue;
}

.centre {
    text-align: center;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-4-15 10:24:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

.flip-2-ver-right-1 {
    -webkit-animation: flip-2-ver-right-1 1.2s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.2s forwards;
    animation: flip-2-ver-right-1 1.2s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.2s forwards;
}

/**
 * ----------------------------------------
 * animation flip-2-ver-right-1
 * ----------------------------------------
 */
@-webkit-keyframes flip-2-ver-right-1 {
    0% {
        -webkit-transform: translateX(0) rotateY(0);
        transform: translateX(0) rotateY(0);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
    }

    100% {
        -webkit-transform: translateX(100%) rotateY(-180deg);
        transform: translateX(100%) rotateY(-180deg);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
    }
}

@keyframes flip-2-ver-right-1 {
    0% {
        -webkit-transform: translateX(0) rotateY(0);
        transform: translateX(0) rotateY(0);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
    }

    100% {
        -webkit-transform: translateX(100%) rotateY(-180deg);
        transform: translateX(100%) rotateY(-180deg);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
    }
}

.flip-2-ver-left-1 {
    -webkit-animation: flip-2-ver-left-1 1.2s cubic-bezier(0.470, 0.000, 0.745, 0.715) 2s forwards;
    animation: flip-2-ver-left-1 1.2s cubic-bezier(0.470, 0.000, 0.745, 0.715) 2s forwards;
}

/*
 * ----------------------------------------
 * animation flip-2-ver-left-1
 * ----------------------------------------
 */
@-webkit-keyframes flip-2-ver-left-1 {
    0% {
        -webkit-transform: translateX(0) rotateY(0);
        transform: translateX(0) rotateY(0);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
    }

    100% {
        -webkit-transform: translateX(-100%) rotateY(180deg);
        transform: translateX(-100%) rotateY(180deg);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
}

@keyframes flip-2-ver-left-1 {
    0% {
        -webkit-transform: translateX(0) rotateY(0);
        transform: translateX(0) rotateY(0);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
    }

    100% {
        -webkit-transform: translateX(-100%) rotateY(180deg);
        transform: translateX(-100%) rotateY(180deg);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
}

.slide-left {
    -webkit-animation: slide-left 1.2s cubic-bezier(0.470, 0.000, 0.745, 0.715) 4s alternate both;
    animation: slide-left 1.2s cubic-bezier(0.470, 0.000, 0.745, 0.715) 4s alternate both;
}

.slide-right {
    -webkit-animation: slide-right 1.2s cubic-bezier(0.390, 0.575, 0.565, 6s.000) 3s both;
    animation: slide-right 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 6s both;
}

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}

@keyframes slide-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}

/**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}

@keyframes slide-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}

.shadow-drop-2-center:hover {
    -webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation: shadow-drop-2-center 0.4s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

/**
 * ----------------------------------------
 * animation shadow-drop-2-center
 * ----------------------------------------
 */
@-webkit-keyframes shadow-drop-2-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
        -webkit-transform: translateZ(50px);
        transform: translateZ(50px);
        -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
        box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
    }
}

@keyframes shadow-drop-2-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
        -webkit-transform: translateZ(50px);
        transform: translateZ(50px);
        -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
        box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
    }
}

/**********************************************
        FORMULAIRE
************************************************/

input,
button {
    margin-left: 0;
    margin-right: 0;
    padding: 1em;
    border-radius: 0.75em;
    border: #52ACDD 1px solid;
    color: #364452;
}

button {
    max-width: 35%;
    float: right;
    border: #F9D435 1px solid;
}

.formulaire {
    border: #52ACDD 2px solid;
    border-radius: 0.75em;
    padding: 1.5em .3em;
    color: slategray;
    margin: 4em .3em;
    padding: 1em 3em;
}

.form-ligne>* {
    flex-basis: calc(calc(22px - 100%) * 999);
    flex-grow: 2;
    margin: 1.2em 0;
}


footer {
    background-color: #F9D6C6;
    padding: 2em;
    color: #364452;
}

.foot-center {
    text-align: center;
}

.foot-right {
    padding-left: 45%;
}

a.liens {
    text-decoration: none;
    color: #364452;
}

/********************************************
        MEDIA QUERY
*********************************************/

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

    .bloc-titre,
    nav ul {
        margin-left: 4em;
    }

    section {
        padding-left: 3em;
    }

    .container {
        grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
    }

    .containerBis {
        grid-template-columns: repeat(3, 1fr);
        column-gap: .5em;
    }

    .containerTer {
        column-gap: 1em;
    }

    .partie-ter {
        margin: 0;
    }

    .partie-text {
        padding: 0 1.5em;
    }

    .partie-img {
        width: 80%;
        height: auto;
        margin: 2em 1em;
    }
}

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

    .bloc-titre {
        margin-left: 1em;
    }

    nav ul {
        padding-left: .3em;
    }

    section {
        padding-left: 1em;
    }

    nav li {
        padding-left: 1em;
    }

    .container,
    .containerBis,
    .containerTer {
        grid-template-columns: 1fr;
    }

    .partie-ter {
        margin: 0;
    }

    .partie-text {
        padding: 0 .8em;
        justify-content: center;
        align-content: center;
    }

    .trait {
        margin: .5em 0 0 1em;
        width: 10%;
        height: 4px;
        margin-bottom: .5em;
    }
}

@media (max-width: 450px) {

    nav ul {
        margin-left: .2em;
    }

    section {
        padding-left: .3em;
    }

    .partie-text h1 {
        padding: .5em;
        font-size: 2.2rem;
        width: 90%;
    }

    .partie-text h2 {
        padding: .5em 0em 1em .5em;
        font-size: 1.6rem;
    }

    .partie-text p {
        padding: 1em 0em .5em .5em;
        font-size: 1.1rem;
        line-height: 1.8rem;
    }

    .partie-text {
        padding: 0 .5em;
    }

    .trait {
        margin: .5em 0 0 1em;
        width: 10%;
        height: 4px;
        margin-bottom: .5em;
    }

    .slogan {
        text-align: center;
    }

    footer {
        text-align: center;
    }

    .foot-right {
        padding-top: 2.5em;
        padding-left: 0;
    }


}