*{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: BlackRoboto;
    src: url(Source/Police/Roboto/Roboto-Black.ttf);
}

@font-face {
    font-family: MediumRoboto;
    src: url(Source/Police/Roboto/Roboto-Medium.ttf);
}

@font-face {
    font-family: LightRoboto;
    src: url(Source/Police/Roboto/Roboto-Light.ttf);
}

.conteneurlogo{
    width: 100%;
    height: 250px;

    display: flex;
    justify-content: center;
}

.logo {
    height: 100%;

}

#menu{
width: 100%;
height: 100px;
font-family: MediumRoboto;
font-size: 18pt;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 35px;
}

li{
    width: 150px;
    padding: 18px;
    border-radius: 50px;
    background-color: white;
    color: black;
    text-decoration: none;
    text-decoration-line: none;
    text-align: center;
    display: inline;
    margin: 10px;
}

a{
    text-decoration-line: none;
}

.vertfoncéactif{
    background-color: #24562a;
    color: white;
}

.vertclairactif{
    background-color: #309337;
    color: white;
}

.vertactif{
    background-color: #246E32;
    color: white;
}

.vertfoncé:hover{
    background-color: #24562a;
    color: white;
}

.vert:hover{
    background-color: #246E32;
    color: white;
}

.vertclair:hover{
    background-color: #309337;
    color: white;
}

.imagetitre{
    width: 100%;
    height: 500px;
    background-image: url(Source/img/OK/IMG_0107.png);
    background-size: 100%;
}

.imagetitreSY{
    width: 100%;
    height: 500px;
    background-image: url(Source/img/OK/IMG_0024.png);
    background-size: 100%;
}

.imagetitreSO{
    width: 100%;
    height: 500px;
    background-image: url(Source/img/OK/IMG_0042.png);
    background-size: 100%;
    background-position: bottom;
}

.imagetitrePres{
    width: 100%;
    height: 500px;
    background-image: url(Source/img/OK/IMG_0064.png);
    background-size: 100%;
}

.imagetitreDP{
    width: 100%;
    height: 500px;
    background-image: url(Source/img/OK/IMG_0077.png);
    background-size: 100%;
    background-position: bottom ;
}

.imagetitreC{
    width: 100%;
    height: 500px;
    background-image: url(Source/img/OK/IMG_0058.png);
    background-size: 100%;
}
h1{
    font-family: BlackRoboto;
    color: white;
    font-size: 90pt;
    position:relative;
    top: 390px;
    left: -10px;
}

.contenu{
    width: auto;
    height: auto;
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 100px;
    margin-right: 8%;
    margin-left: 8%;
    margin-bottom: 100px;
    border-left: solid #246E32 3pt;
}

.texteA {
    align-content: baseline;
    position: relative;
    width: 45%;
    height: auto;
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 8%; /* Ajuster la marge pour aligner les éléments */
    border-right: solid #246E32 3pt;
    display: inline-block; /* Ajouter cette ligne */
    vertical-align: top; /* Aligner le haut des blocs */
}

.contenuSY{
    width: 100%;
    height: auto;
    margin-top: 100px;
    margin-bottom: 20px;
}

.contenuA{
    width: 100%;
    height: auto;
    margin-top: 0;
    margin-bottom: 20px;
}

.texteSY {
    align-content: baseline;
    position: relative;
    width: 45%;
    height: auto;
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 8%; /* Ajuster la marge pour aligner les éléments */
    border-right: solid #246E32 3pt;
    display: inline-block; /* Ajouter cette ligne */
    vertical-align: top; /* Aligner le haut des blocs */
}

.imageSY {
    align-content: baseline;
    position: relative;
    width: 30%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 550px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-left: 2%;
    margin-right: 10%; /* Ajuster la marge pour aligner les éléments */
    vertical-align: middle; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0090.png);
    background-size: 170%;
    position: center;
    background-repeat: no-repeat;
}


.black{
    font-family: BlackRoboto;
    font-size: 23pt;
}

.medium{
    font-family: MediumRoboto;
    font-size: 21pt;
}

.light{
    font-family: LightRoboto;
    font-size: 17pt;
}

.contenuSY2{
    width: 100%;
    height: auto;
    margin-top: 150px;
    margin-bottom: 50px;
}

.texteSY2 {
    align-content: baseline;
    position: relative;
    width: 45%;
    height: auto;
    padding-left: 2%;
    padding-right: 2%;
    margin-right: 8%; /* Ajuster la marge pour aligner les éléments */
    border-left: solid #246E32 3pt;
    display: inline-block; /* Ajouter cette ligne */
    vertical-align: top; /* Aligner le haut des blocs */
}

.imageSY2 {
    align-content: baseline;
    position: relative;
    width: 25%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 350px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-left: 10%;
    margin-right: 2%;
    vertical-align: top; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0045.png);
    background-size: 120%;
    background-repeat: no-repeat;
}

.imageA {
    align-content: baseline;
    position: relative;
    width: 25%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 700px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-left: 10%;
    margin-right: 2%;
    vertical-align: top; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0127.png);
    background-size: 130%;
    background-repeat: no-repeat;
}

.texteSY2 a {
    text-decoration: none;
    color: black;
    text-decoration: underline 1pt;
    text-underline-offset: 3px;
}

.contenuSO{
    width: 100%;
    height: 500px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.imageSO {
    align-content: baseline;
    position: relative;
    width: 30%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 550px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-left: 2%;
    margin-right: 10%; /* Ajuster la marge pour aligner les éléments */
    vertical-align: middle; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0042.png);
    background-size: 150%;
    background-repeat: no-repeat;
}

.imageSO1 {
    align-content: baseline;
    position: relative;
    width: 16%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 450px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-left: 23.7%;
    margin-right: 1%;
    vertical-align: top; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0014.png);
    background-size: 120%;
    background-repeat: no-repeat;
}

.imageSO2 {
    align-content: baseline;
    position: relative;
    width: 16%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 450px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-left: 1%;
    margin-right: 1%;
    vertical-align: top; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0147.png);
    background-size: 120%;
    background-repeat: no-repeat;
}

.imageSO3 {
    align-content: baseline;
    position: relative;
    width: 16%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 450px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-left: 1%;
    margin-right: 23.7%;
    vertical-align: top; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0087.png);
    background-size: 120%;
    background-repeat: no-repeat;
}

.image1 {
    align-content: baseline;
    position: relative;
    width: 16%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 450px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-left: 21.7%;
    margin-right: 1%;
    vertical-align: top; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0057.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.image2 {
    align-content: baseline;
    position: relative;
    width: 16%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 450px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-left: 1%;
    margin-right: 1%;
    vertical-align: top; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0108.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.image3 {
    align-content: baseline;
    position: relative;
    width: 16%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 450px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-left: 1%;
    margin-right: 21.7%;
    vertical-align: top; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0113.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.contenuSO2{
    width: 100%;
    height: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

.texteSO {
    align-content: baseline;
    position: relative;
    width: 45%;
    height: auto;
    padding-left: 2%;
    padding-right: 2%;
    margin-right: 8%;
    
    border-left: solid #246E32 3pt;
    display: inline-block; /* Ajouter cette ligne */
    vertical-align: top; /* Aligner le haut des blocs */
}

.imageSO4{
    align-content: baseline;
    position: relative;
    width: 25%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 680px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-left: 8%;
    margin-right: 2%;
    vertical-align: top; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0117.png);
    background-size: 120%;
    background-repeat: no-repeat;
}

.contenuPres{
    width: 100%;
    height: auto;
    margin-top: 150px;
    margin-bottom: 50px;
}

.textePres {
    align-content: baseline;
    position: relative;
    width: 55%;
    height: auto;
    padding-left: 2%;
    padding-right: 2%;
    margin-right: 8%; /* Ajuster la marge pour aligner les éléments */
    border-left: solid #246E32 3pt;
    display: inline-block; /* Ajouter cette ligne */
    vertical-align: top; /* Aligner le haut des blocs */
    text-align: justify;
}

.imagePres {
    align-content: baseline;
    position: relative;
    width: 20%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 500px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-left: 10%;
    margin-right: 2%;
    vertical-align: top; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0093.JPG) ;
    background-size: 100%;
    background-repeat: no-repeat;
}

.contenuDP{
    width: 100%;
    height: auto;
    margin-top: 150px;
    margin-bottom: 50px;
}

.texteDP {
    align-content: baseline;
    position: relative;
    width: 45%;
    height: auto;
    padding-left: 2%;
    padding-right: 2%;
    margin-right: 8%; /* Ajuster la marge pour aligner les éléments */
    border-left: solid #309337 3pt;
    display: inline-block; /* Ajouter cette ligne */
    vertical-align: top; /* Aligner le haut des blocs */
}

.blacktitre{
    font-family: BlackRoboto;
    font-size: 35pt;
}


.container {
    width: auto;
    margin-left: 15%;
    margin-right: 15%;
    padding: 20px;
    border-radius: 20px;
    margin-top: 100px;
    margin-bottom: 100px;
}
.form-group {
    margin-bottom: 20px;
}
.form-group::after {
    content: "";
    display: table;
    clear: both;
}
.form-group label {
    width: 40%;
    float: left;
    text-align: left;
    margin-left: 3%;
    margin-right: 3%;

}
.form-group input[type="text"],
.form-group select,
.form-group textarea {
    width: 40%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 30px;
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 10px;
    height: 40px;
}
.form-group textarea, .form-group select {
    width: 87%;
}

.form-group textarea{
    height: 100px;
}
.form-group input[type="submit"] {
    width: auto;
    margin-left: 55%;
}

.lightform{
    font-family: LightRoboto;
    font-size: 15pt;
}

.form-group input[type="submit"]{
    width: 40%;
    padding: 10px;
    border: 1px solid #246E32;
    border-radius: 30px;
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 10px;
    color: white;
    background-color: #309337;
    height: 40px;
}

.form-group input[type="submit"]:hover{
    background-color:#24562a;
}

footer{
    width: 100%;
    height: 370px;
    margin-top: 100px;
    background-color: #246E32;
}

.containerC {
    width: auto;
    margin-left: 20%;
    margin-right: 20%;
    height: auto;
    margin-top: 70px;
    margin-bottom: 100px;
}

.contenuC{
    width: auto;
    height: auto;
    margin-top: 100px;
    margin-bottom: 50px;
    border-bottom: solid #246E32 3pt;
    padding-bottom: 2%;
    margin-left: 8%;
    margin-right: 8%;
}

.texteC {
    align-content: baseline;
    position: relative;
    width: 45%;
    height: 16%;
    margin-top: 180px;
    margin-bottom: auto;
    padding-left: 2%;
    display: inline-block; /* Ajouter cette ligne */
    vertical-align: top; /* Aligner le haut des blocs */
}

.imageC {
    align-content: baseline;
    position: relative;
    width: 45%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
    height: 550px;
    position: relative;
    display: inline-block; /* Ajouter cette ligne */
    margin-right: 0;
    padding-right: 2%;
    vertical-align: middle; /* Aligner le haut des blocs */
    background-image:url(Source/img/OK/IMG_0062.png);
    background-size: 150%;
    background-repeat: no-repeat;
    background-position: center;
}

.pied1{
    width: 100%;
    height: 50%;
    display: inline-block;
    vertical-align: top;
}

.pied2{
    width: 100%;
    height: 15%;
    display: inline-block;
    vertical-align: middle;
}

.pied3{
    width: 100%;
    height: 20%;
    display: inline-block;
    vertical-align: middle;
}

.pied4{
    width: 100%;
    height: 15%;
    display: inline-block;
    vertical-align: middle;
}

.logoPied{
    width: 30%;
    margin-left: 35%;
    margin-right: 35%;
    align-items: center;
    text-align: center;
    height: 100%;
}

.pied3 p a {
    color: white;
}

.pied2 p {
    text-align: left;
    color: white;
    text-align: center;
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
}

.pied3 img {
    width: 100%;
    height: 60%;
    margin-top: 15px;
    text-align: center;
}

.pied4 p {
    text-align: left;
    color: white;
    text-align: center;
    margin-top: 10px;
    text-decoration: underline 1pt;
    text-underline-offset: 5px;
}
.pied4 p a{
    color: white;
}

nav input {
    display: none;
}

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

    .conteneurlogo {
        height: 150px;
    }

    .imagetitre, .imagetitreSY, .imagetitreSO, .imagetitrePres, .imagetitreDP, .imagetitreC{
        width: 100%;
        height: 200px;
        background-size: 100%;
    }

    h1{
        font-family: BlackRoboto;
        color: white;
        font-size: 31pt;
        position:relative;
        top: 162px;
        left: -4px;
    
    }

    .contenu{
        width: auto;
        height: auto;
        padding-left: 2%;
        padding-right: 2%;
        margin-top: 100px;
        margin-right: 5%;
        margin-left: 5%;
        margin-bottom: 25px;
        border-left: none;
        border-bottom: solid #246E32 3pt;
    }

    .texteA {
        padding-bottom: 20px;
        align-content: baseline;
        position: relative;
        width: 90%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        padding-top: 15px;
        margin-left: 5%;
        margin-right: 5%;
        border-bottom: solid #246E32 3pt;
        border-top: solid #246E32 3pt;
        border-right: none;
        display: inline-block; /* Ajouter cette ligne */
        vertical-align: top; /* Aligner le haut des blocs */
    }

    .contenuSY{
        width: 100%;
        height: auto;
        margin-top: 50px;
        margin-bottom: 20px;
    }
    
    .texteSY {
        padding-bottom: 20px;
        align-content: baseline;
        position: relative;
        width: 90%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        margin-left: 5%;
        margin-right: 5%;
        border-bottom: solid #246E32 3pt;
        border-right: none;
        display: inline-block; /* Ajouter cette ligne */
        vertical-align: top; /* Aligner le haut des blocs */
    }
    
    .imageSY {
        margin: 0;
        margin-top: 20px;
        align-content: baseline;
        position: relative;
        width: 100%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
        height: 250px;
        position: relative;
        display: inline-block; /* Ajouter cette ligne */
        vertical-align: middle; /* Aligner le haut des blocs */
        background-image:url(Source/img/OK/IMG_0090.png);
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    
    
   
    .contenuSY2{
        width: 100%;
        height: auto;
        margin-top: 0;
        margin-bottom: 50px;
    }
    
    .texteSY2 {
        padding-top: 20px;
        align-content: baseline;
        position: relative;
        width: 90%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        margin-left: 5%;
        margin-right: 5%;
        border-top: solid #246E32 3pt;
        border-left: none;
        display: inline-block; /* Ajouter cette ligne */
        vertical-align: top; /* Aligner le haut des blocs */
        margin-bottom: 50px;
    }
    
    .imageSY2 {
        display: none;

    }

    .image1 {
        align-content: baseline;
        position: relative;
        width: 30%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
        height: 200px;
        position: relative;
        display: inline-block; /* Ajouter cette ligne */
        margin-left: 0.1%;
        margin-right: 1.9%;
        vertical-align: top; /* Aligner le haut des blocs */
        background-image:url(Source/img/OK/IMG_0057.png);
        background-size: 110%;
        background-repeat: no-repeat;
    }
    
    .image2 {
        align-content: baseline;
        position: relative;
        width: 30%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
        height: 200px;
        position: relative;
        display: inline-block; /* Ajouter cette ligne */
        margin-left: 2%;
        margin-right: 2%;
        vertical-align: top; /* Aligner le haut des blocs */
        background-image:url(Source/img/OK/IMG_0108.png);
        background-size: 110%;
        background-repeat: no-repeat;
    }
    
    .image3 {
        align-content: baseline;
        position: relative;
        width: 30%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
        height: 200px;
        position: relative;
        display: inline-block; /* Ajouter cette ligne */
        margin-left: 1.8%;
        margin-right: 0;
        vertical-align: top; /* Aligner le haut des blocs */
        background-image:url(Source/img/OK/IMG_0113.png);
        background-size: 110%;
        background-repeat: no-repeat;
    }
    
    .imageA {
        display: none;
    }

    .imageSO {
        margin: 0;
        align-content: baseline;
        position: relative;
        width: 100%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
        height: 0px;
        position: relative;
        display: inline-block; /* Ajouter cette ligne */
        vertical-align: middle; /* Aligner le haut des blocs */
        background-image:none;

    }

    .contenuSO{
        width: 100%;
        height: auto;
        margin-top: 25px;
        margin-bottom: 25px;
    }
    
    .imageSO1 {
        align-content: baseline;
        position: relative;
        width: 30%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
        height: 200px;
        position: relative;
        display: inline-block; /* Ajouter cette ligne */
        margin-left: 0.1%;
        margin-right: 1.9%;
        vertical-align: top; /* Aligner le haut des blocs */
        background-size: 110%;
        background-repeat: no-repeat;
    }
    
    .imageSO2 {
        align-content: baseline;
        position: relative;
        width: 30%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
        height: 200px;
        position: relative;
        display: inline-block; /* Ajouter cette ligne */
        margin-left: 2%;
        margin-right: 2%;
        vertical-align: top; /* Aligner le haut des blocs */
        background-size: 110%;
        background-repeat: no-repeat;
    }
    
    .imageSO3 {
        align-content: baseline;
        position: relative;
        width: 30%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
        height: 200px;
        position: relative;
        display: inline-block; /* Ajouter cette ligne */
        margin-left: 1.8%;
        margin-right: 0;
        vertical-align: top; /* Aligner le haut des blocs */
        background-size: 110%;
        background-repeat: no-repeat;
    }

    .imageSO4{
        display: none; /* Ajouter cette ligne */
    }

    .contenuSO2{
        width: 100%;
        height: auto;
        margin-top: 20px;
        margin-bottom: 50px;
    }
    
    .texteSO {
        padding-top: 20px;
        align-content: baseline;
        position: relative;
        width: 90%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        margin-right: 5%;
        margin-left: 5%;
        border-left: none;
        border-top: solid #246E32 3pt;
        display: inline-block; /* Ajouter cette ligne */
        vertical-align: top; /* Aligner le haut des blocs */
        margin-bottom: 50px;
    }

    .contenuDP{
        width: 100%;
        height: auto;
        margin-top: 50px;
        margin-bottom: 100px;
    }
    
    .texteDP {
        padding-top: 10px;
        width: 90%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        margin-right: 5%; /* Ajuster la marge pour aligner les éléments */
        margin-left: 5%;
        border-top: solid #309337 3pt;
        border-left: none;
    }
    
    .blacktitre{
        font-family: BlackRoboto;
        font-size: 23pt;
    }
    
    .texteDP2 {
        padding-top: 10px;
        width: 90%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        margin-right: 5%; /* Ajuster la marge pour aligner les éléments */
        margin-left: 5%;
        border-top: solid #309337 3pt;
        border-left: none;
    }

    .container {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        height: auto;
        margin-top: 50px;
        margin-bottom: 50px;
        padding:0;
    }

    .form-group {
        margin-bottom: 10px;
    }
    .form-group::after {
        content: "";
        display: table;
        clear: both;
    }
    .form-group label {
        font-size: 13pt;
        width: 46%;
        text-align: left;
        margin-left: 2%;
        margin-right: 2%;
    
    }
    .form-group input[type="text"],
    .form-group select,
    .form-group textarea {
        width: 45%;
        padding: 0;
        border: 1px solid #ccc;
        border-radius: 30px;
        margin-left: 2%;
        margin-right: 2%;
        margin-top: 5px;
        height: 30px;
    }
    .form-group textarea, .form-group select {
        width: 96%;
        
    }
    
    .form-group textarea{
        height: 100px;
    }

    .lightform{
        font-family: LightRoboto;
        font-size: 15pt;
    }
    
    .form-group input[type="submit"]{
        width: 100%;
        padding: 10px;
        border: 1px solid #246E32;
        border-radius: 30px;
        margin-left: 0;
        margin-right: 0;
        margin-top: 5px;
        color: white;
        background-color: #309337;
        height: 40px;
    }
    
    .form-group input[type="submit"]:hover{
        background-color:#24562a;
    }

    .containerC {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        height: auto;
        margin-top: 0;
        padding-top: 20px;
        margin-bottom: 100px;
        border-top: solid #246E32 3pt;
    }

    .contenuC{
        width: 100%;
        height: auto;
        margin-top: 50px;
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 30px;
        margin-left: 0;
        margin-right: 0;
    }
    
    .texteC {
        align-content: baseline;
        position: relative;
        width: 90%;
        margin-right: 5%;
        margin-left: 5%;
        height: auto;
        margin-top: 0;
        margin-bottom: 20px;
        padding-left: 0;
        display: inline-block; /* Ajouter cette ligne */
        vertical-align: top; /* Aligner le haut des blocs */
    }
    
    .imageC {
        align-content: baseline;
        position: relative;
        width: 100%; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
        height: 200px;
        position: relative;
        display: inline-block; /* Ajouter cette ligne */
        margin-right: 0;
        padding-right: 0;
        vertical-align: middle; /* Aligner le haut des blocs */
        background-image:url(Source/img/OK/IMG_0062.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .contenuPres{
        width: 100%;
        height: auto;
        margin-top: 50px;
        margin-bottom: 20px;
    }
    
    .textePres {
        align-content: baseline;
        position: relative;
        width: 90%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        margin-left: 5%;
        margin-right: 5%;
        border-left: none;
        border-top: none;
        padding-top: 20px; ;
    }
    
    .imagePres {

        width: 250px; /* Réduire légèrement la largeur pour tenir compte des marges et des bordures */
        height: 400px;
        position: relative;
        display: inline-block; /* Ajouter cette ligne */
        margin-left: 5%;
        margin-right: 0;
        padding-bottom: 20px;
        vertical-align: top; /* Aligner le haut des blocs */
        border-bottom: solid #246E32 3pt;
        background-size: 100%;
        background-repeat: no-repeat;
    }


#menuToggle
{
  display: block;
  position: absolute;
  width: 83%;
  top: 170px;
  left: 5%;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: white;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #246E32;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 100%;
  height: 400px;
  margin: -50px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  font-family: MediumRoboto;
  font-size: 15pt;
  text-align: center;
  display:block;
  background: white;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;

  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
    width: 80%;
    padding: 10px 0 0 10px;
  font-size: 18pt;
  text-align: center;
  margin-bottom: 10px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

li{
    display:flex;
}

footer{
    width: 100%;
    height: 300px;
    background-color: #246E32;
}

.logoPied{
    width: 55%;
    margin-left: 22.5%;
    margin-right: 22.5%;
    align-items: center;
    text-align: center;
    height: 100%;
}

.pied3 img {
    width: 100%;
    height: 60%;
    margin-top: 15px;
    text-align: center;
}

.pied2 p {
    margin-top: 0;
}

}