.contenu {
    display: none;
}
.contenu.active {
    display: block;
}
.bonton-bar-contenent{
    padding: 0;
    margin: 0;
    display: inline-block;
}

.bonton_project{
    display: flex;
}

img{width: 20%}

.image {width: 35vw}

button {
    padding: 5px;
    margin: 0.5em;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 0px;
    cursor: pointer;
}

button img{ 
    width: 60px;
    height: 60px;
}

#texteSurvol {
    /* Styles pour le texte qui s'affiche au survol */
    border: 1px solid black;
    transform: translateX(-50%);
    padding: 5px;
    border-radius: 0.5em;
    background-color: #000;
    color: #fff;
    font-size: 2em;
    white-space: nowrap;
}

.contenu {scroll-margin-top: 67px;}


.retourHaut {
    top: 70px;
}

.partage{
    top:140px ;
}

.button_flotant {
    display: none;
    position: fixed;
    right: 2px;
    padding: 0;
    margin: 0;
    background-color: #00000000;
    border: none;
    cursor: pointer;
    width: 60px;
}

#retourHaut img{
    width: 60px;
}

.tete {
    text-align: center;
    border-bottom: 2px black solid;
  
    background-color: #1E2E20;
    color: #C7C5B8;
    background-image: url('../image/index/competances-font.png');
    background-size: 10%;
    padding-bottom: 12px;
}

.tete h1 {text-decoration: underline;}
.tete h2 {margin-bottom: 0; margin-top: 10px}

.tete button{margin: 5px;background-color: #fffff6;}

.tete button {
	font-size: 15px; /* Taille de police */
	color: #042123; /* Couleur du texte */
	text-decoration: none; /* Pas de soulignement de texte */
	font-weight: bold; /* Police en gras */
	font-family: 'Montserrat', sans-serif; /* Police de caractères */}

.tete button:hover {
	color: #5A8550; /* Couleur du texte au survol de la souris */
}

.tete p{margin: 0;}

.tete {padding-bottom: 10px}

.button_activate{justify-content: center;}

.button_activate a {
    content: "test";
  border: #ffffff solid 2px; 
  color: #ffffff;
}

.button_activate a:hover {
  color: #000000; 
}

.button_activate a::before {
  background-color: #ffffff;
}

.moitier {
    width: 50%
}
@media screen and (max-width: 768px) {
	.contenu {
		scroll-margin-top: 160px; 
	}

    .retourHaut {
        top: 175px;
    }

    .partage{
        top:245px;
    }
    .moitier {
        width: 80%
    }

    img{width: 40%}

    #pont_cardinet > div:nth-child(6) > div:nth-child(11) > div {padding: 0}

    .image {width: 90vw}

    .tete button{width: 90%;}

    .tete {background-size: 25%;}

    .bonton-bar-contenent {
        width: 100%;
        text-align: center;

        display: flex;
        justify-content: center;
        align-items: center;
    }
}