@font-face {
    font-family: 'ABeeZee';
    src: url(../../fonts/ABeeZee/ABeeZee-Regular.ttf);
}

body{
    font-family: 'ABeeZee';
}

main{
    padding-top: 129px;
}

p, div ul li{
    font-size:20px;
}

h1, h2, h3, h4, h5, h6{
    margin: 0;
    padding: 0;
    font-weight: inherit;
    line-height: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    border: 0;
}


nav ul {
    list-style-type: none; /* Supprime les puces */
    padding-left: 0;       /* Annule le décalage vers la droite */
}

.lettres-sticky{
    position:sticky;
    top:69px;
    z-index: 1000;
}


.ligne-lettre{
    background-color: #005CB1;
    height:2px;
}

.wrap{
    flex-wrap: wrap;
}

.grisclair{
    color: #ACACAC;
}

.grisclair2{
    color: #7A7A7A;
}
.bg-bleu-clair{
    background-color: #eff6fc;
}

.bg-bleu{
    background-color: #5A9FDF;
}

.bg-bleu-branding{
    background-color: #5A9FDF;
}

.bleu-foncé{
    color: #005CB1;
}

.bleubranding{
    color: #5A9FDF;
}

.grisclair{
    color: #ACACAC;
}

.bg-bleu-foncé{
    background-color: #0084FF;
    height:100%;
    width:25%;
    box-shadow: -4px 0px 5px rgba(0, 132, 255, 0.35);
}

#dimensions-search-bar{
    width:280px;
    height:66px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.propriétés-image{
    position: relative;
    width: 15vw; /* La largeur de votre image */
    height:20vh; /* La hauteur de votre image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center; /* Centre le texte verticalement */
    justify-content: center; /* Centre le texte horizontalement */
    color: white; /* Couleur de votre texte */
    font-size: 20px;
    border-radius: 10px;
    overflow: hidden; /* Taille de votre texte */
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
    flex: 1 1 1 20%; /* Base : 5 éléments par ligne (100% / 5 = 20%) */



}

.propriétés-image:hover{
    transform: scale(1.05);
}
  
.propriétés-image::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4); /* Noir semi-transparent */
    z-index: 1;
  }
  
  .propriétés-image > div {
    position: relative;
    z-index: 2; /* S'assure que le texte est au-dessus de l'effet d'assombrissement */
  }

  .bg-artisanat {
    background-image: url('../../images/mécanicien.png'); /* Assurez-vous de mettre le bon chemin vers votre image *//* Autres styles de texte que vous pourriez vouloir ajouter */
  }

  .bg-autre{
    background-image: url('../../images/logo.png'); /* Assurez-vous de mettre le bon chemin vers votre image *//* Autres styles de texte que vous pourriez vouloir ajouter */

  }

  .style-lettres{
    background-color: inherit;
    padding:5px 10px;
    box-sizing: border-box;
    color: inherit;
    border-radius:100%;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .style-lettres:hover{
    background-color: #5A9FDF;
    color: white;
    border-radius:100%;
  }

  .style-lettres.active{
    background-color: #5A9FDF;
    color: white;
    border-radius:100%;
  }

  .propriétés-image-métier{
    position: relative;
    width: 15vw; /* La largeur de votre image */
    height:20vh; /* La hauteur de votre image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center; /* Centre le texte verticalement */
    justify-content: center; /* Centre le texte horizontalement */
    color: white; /* Couleur de votre texte */
    font-size: 25px;
    overflow: hidden; /* Taille de votre texte */
    transition: transform 0.3s ease;


}

.propriétés-image-métier::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4); /* Noir semi-transparent */
    z-index: 1;
  }
  
  .propriétés-image-métier > div {
    position: relative;
    z-index: 2; /* S'assure que le texte est au-dessus de l'effet d'assombrissement */
  }

 
 .bg-side{
    background-color: #0084FF;
    color: white;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
    border-end-end-radius: 10px;
    border-bottom-left-radius: 10px;
    width:15vw;


 }

 .shadow2{
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
 }

 .underline{
    text-decoration: underline;
 }

 .analyse-synthèse{
    width:300px;
 }

 .ml115px{
    margin-left:115px;
 }

 .ml153px{
    margin-left:153px;
 }

 .ml26px{
    margin-left:26px;
 }

 .ai-start{
    align-items: start;
 }

 .hidden {
    display: none;
}

/* Lorsque la classe 'visible' est ajoutée, l'élément sera affiché */
.visible {
    display: block;
}


.analyse-synthèse {
    position: absolute;
    top: 100%;
    left: -60px;
    right: 0;
    transition: max-height 1.5s ease, opacity 0.0001s ease;
    max-height: 0;
    overflow: hidden;
    height: auto;
    opacity: 0; /* Ajouté pour la transition d'opacité */
    z-index: 10;
}

.analyse-synthèse.visible {
    max-height: 500px; /* Mettez ici la hauteur maximale estimée de l'élément */
    opacity: 1; /* L'élément est maintenant complètement visible */
}

.flex-éléments{
    flex: 1 0 20%;
}

@media screen and (min-width:2000px) {
    #pt80px{
        padding-top: 80px;
    }

    #fs15px{
        font-size: 15px;
    }

    .lettres-sticky{
        position:sticky;
        top:140px;
        z-index: 1000;
    }
    
}
@media screen and (max-width:1900px) {
    #pt80px{
        padding-top: 80px;
    }

    #fs15px{
        font-size: 15px;
    }

    .lettres-sticky{
        position:sticky;
        top:120px;
        z-index: 1000;
    }
    
}

@media screen and (max-width:1800px) {
    #pt80px{
        padding-top: 80px;
    }

    #fs15px{
        font-size: 15px;
    }

    .lettres-sticky{
        position:sticky;
        top:112px;
        z-index: 1000;
    }
    
}



@media screen and (max-width:1428px) {
    #pt80px{
        padding-top: 80px;
    }

    #fs15px{
        font-size: 15px;
    }

    .lettres-sticky{
        position:sticky;
        top:107px;
        z-index: 1000;
    }
    
}

@media screen and (max-width:1200px) {
    #pt80px{
        padding-top: 80px;
    }

    #fs15px{
        font-size: 15px;
    }

    .lettres-sticky{
        position:sticky;
        top:90px;
        z-index: 1000;
    }
    
}



@media screen and (max-width:1000px) {
    #pt80px{
        padding-top: 80px;
    }

    #fs15px{
        font-size: 15px;
    }

    .lettres-sticky{
        position:sticky;
        top:79px;
        z-index: 1000;
    }
    
}

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

    .lettres-sticky{
        position:sticky;
        top:70px;
        z-index: 1000;
    }
    .propriétés-image{
        position: relative;
        width: 15vw; /* La largeur de votre image */
        height:20vh; /* La hauteur de votre image */
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center; /* Centre le texte verticalement */
        justify-content: center; /* Centre le texte horizontalement */
        color: white; /* Couleur de votre texte */
        font-size: 15px;
        border-radius: 10px;
        overflow: hidden; /* Taille de votre texte */
        box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease;
        flex-basis: 25%; /* Base : 5 éléments par ligne (100% / 5 = 20%) */
    }

    #fs14px{
        font-size: 14px;
    }
    .propriétés-image-métier{
        position: relative;
        width: 100%; /* La largeur de votre image */
        height:20vh; /* La hauteur de votre image */
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center; /* Centre le texte verticalement */
        justify-content: center; /* Centre le texte horizontalement */
        color: white; /* Couleur de votre texte */
        font-size: 15px;
        overflow: hidden; /* Taille de votre texte */
        transition: transform 0.3s ease;
    }

    .flex-éléments{
        flex-basis: 25%;
    }

    .bg-side{
        background-color: #0084FF;
        color: white;
        box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
        border-end-end-radius: 10px;
        border-bottom-left-radius: 10px;
        width:100%;
     }

    
}

@media screen and (max-width: 600px){
    .propriétés-image{
        position: relative;
        width: 15vw; /* La largeur de votre image */
        height:20vh; /* La hauteur de votre image */
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center; /* Centre le texte verticalement */
        justify-content: center; /* Centre le texte horizontalement */
        color: white; /* Couleur de votre texte */
        font-size: 15px;
        border-radius: 10px;
        overflow: hidden; /* Taille de votre texte */
        box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease;
        flex-basis: 33.3333%;/* Base : 5 éléments par ligne (100% / 5 = 20%) */
    }
    .lettres-sticky{
        position:sticky;
        top:74px;
        z-index: 1000;
    }
    .resptitre{
        font-size: 25px;
        font-weight: bold;
    }
}

@media screen and (max-width: 500px) {
    .lettres-sticky{
        position:sticky;
        top:59px;
        z-index: 1000;
    }
}