*,
::before,
::after {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    border: none;
    /*pour gerer la scroll bar*/
    /* scrollbar-color: rebeccapurple green;
    scrollbar-width: none; */
}

.scroller {
    width: 300px;
    height: 100px;
    overflow-y: scroll;
    scrollbar-color: rebeccapurple green;
    scrollbar-width: thin;
}

button,
a {
    cursor: pointer;
}

a {
    text-decoration: none !important;
    color: #000;
}

li {
    list-style: none;
}

header,
main,
footer,
#header_petit_ecran {
    width: 100%;
}

#header_petit_ecran {
    display: none;
    z-index: 100;
}

header {
    z-index: 100;
    background-color: #fff;
}

body,
#comment {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
}

header {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0px 30px
}

#barre_header {
    width: 100%;
    display: grid;
    grid-template-columns: max-content auto max-content;
    align-items: center;
    z-index: 100;
}

#hamburger {
    cursor: pointer;
    display: none;
}

.logo {
    padding: 0px 5%;
    background-color: #f1f1f1;
    min-height: 100%;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 150%;
    min-width: max-content;

}

.orientation {
    color: orange;
}

.sous_nav_bar {
    padding: 20px 10px;
    display: flex;
    justify-content: space-evenly;
}

.sous_nav_bar_petit {
    border-bottom: 3px solid rgba(0, 0, 0, 0.534);
}

#nav_bar>a {
    justify-self: center;
}

.acceuil {
    width: max-content;
    padding-bottom: 3px;
}

.header_deroulant_container {
    position: relative;
}

.diplome_ecole_metier,
.acceuil {
    cursor: pointer;
    display: flex;
    height: min-content;
    position: relative;
    top: 3px;
    width: min-content;
}

.signe_deployable {
    width: 20px;
    height: 20px;
    padding-left: 5px;
    position: relative;
    bottom: 1px;
}

#liste_metiers_header {
    overflow: visible;
    background-color: rgb(255, 255, 255);
    min-width: 169px;
    padding: 10px;
    flex-direction: column;
    position: absolute;
    top: 20px;
    left: -15px;
    z-index: 100;
    border-radius: 15px;
    opacity: 0;
    display: none;
    animation: togleOpacity 0.3s linear 0s infinite alternate paused;
}

@keyframes togleOpacity {
    to {
        opacity: 100;
    }
}

.liste_header a {
    display: inline-block;
    min-width: 100%;
    padding: 5px 5px;
}

.liste_header a:active {
    background-color: #E1E1E1;
    border-radius: 5px;
}

#signe_deployable_invisible {
    fill: #fff;
}

.faire_un_don {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0px 5%;
    min-width: 100%;
    margin: 0px auto;
}

#button_faire_un_don {
    padding: 10px 24px;
    border-radius: 7px;
    background-color: #fff;
    color: #000;
    border: 2px solid #000;
    font-weight: bold;
    z-index: 3;
    box-sizing: content-box;
    min-width: max-content;
}

#button_faire_un_don:active {
    background-color: #000;
    color: #fff;
}

#formulaire_don {
    background-color: #c5cefd;
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 1000;
    margin: 30px;
    padding: 25px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

#fermer_formulaire_don {
    width: max-content;
    padding: 7px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    cursor: pointer;
    max-height: min-content;
}

#fermer_formulaire_don p {
    margin: 0px;
}

#merci_formulaire_don {}

#opereteurs {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#orange {
    background-color: orange;
    padding: 15px;
}

#mtn {
    background-color: yellow;
    padding: 15px;
}

.block_operateur_et_image {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.block_operateur_et_image h2 {
    width: max-content;
    margin-top: 0px;
    /* margin-right: 1vw; */
}

.block_operateur_et_image img {
    width: 103px;
    height: 58px;
    object-fit: cover;
}

.numero {
    font-weight: bold;
    margin: 4vw 0px;
}

main {
    margin-top: 50px;
    position: relative;
    overflow: visible;
}



#caroussel {

    overflow: hidden;

    position: relative;
    /* Position relative pour le masque et le conteneur de description */
    display: flex;
    /* Utiliser Flexbox pour s'adapter au contenu */
    flex-direction: column;
    /* Aligner les elements en colonne */
    justify-content: center;
    /* Centrer les elements verticalement */
    align-items: center;
    /* Centrer les elements horizontalement */
    width: 100%;
    /* Prend toute la largeur du conteneur parent */
    max-height: 300px;
}

#main_image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}

#masque_image {
    background-color: rgba(86, 86, 87, 0.329);
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0px;
}

#main_description_container {
    background-color: rgba(73, 54, 92, 0.384);
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
    justify-content: center;
}

#main_description {
    max-width: 1044px;
}

.main_description_item {
    margin-bottom: 25px;
    color: #FFF;

}



#main_description {

    text-align: center;
}

.main_description_item {
    margin-bottom: 25px;
    font-size: 2em;
    /* Taille de base */
    margin: 0.5em 0;
    /* Espacement entre les titres */
    opacity: 0;
    /* Masquer les titres par defaut */
    transform: translateY(20px);
    /* Decalage initial vers le bas */
    animation: cascade 5s forwards;
    /* Animation */
}

/* Animation de cascade */
@keyframes cascade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}




#button_faire_un_don_container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

#button_faire_un_don_container>button {
    min-width: max-content;
}

#main_description_button,
#button_faire_un_don_petit_ecran,
#referencer_son_etablissement {
    width: max-content;
    padding: 12px 24px;
    border-radius: 7px;
    background-color: #E1E1E1;
    color: #000;
    font-weight: bolder;
}

#main_description_button:active,
#button_faire_un_don_petit_ecran:active {
    background-color: #000;
    color: #fff;
}

#button_faire_un_don_petit_ecran {
    display: none;
}






#a_la_decouverte {
    display: flex;
    /* Utiliser flexbox pour l'organisation */
    flex-direction: column;
    /* Disposition verticale des elements */
    justify-content: center;
    /* Centrer les elements verticalement */
    align-items: center;
    /* Centrer les elements horizontalement */
    height: 100vh;
    /* Hauteur de la section pour centrer (facultatif) */
    padding: 20px;
    /* Espacement interne */
    background-color: #f9f9f9;
    /* Couleur de fond du conteneur (facultatif) */



}

#container_a_la_decouverte {
    margin: 50px 0;
    text-align: center;
    /* Centrer le texte à l'interieur du conteneur */
}

#texte_a_la_decouverte {}

.bouton_a_la_decouverte {
    margin: 10px;
    padding: 15px 30px;
    font-size: 1.5em;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 1s, transform 1s, box-shadow 1s;
    /* Ajout des transitions */
}

/* Effet au survol */
.bouton_a_la_decouverte:hover {
    background-color: #0056b3;
    /* Changer la couleur de fond */
    transform: scale(1.05);
    /* Augmenter legèrement la taille */
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.5);
    /* Ajouter une ombre */
}



@keyframes move {
    0% {
        transform: translateY(0);
        /* Position initiale */
    }

    50% {
        transform: translateY(-30px);
        /* Deplacer vers le haut de 30px */
    }

    100% {
        transform: translateY(0);
        /* Retour à la position initiale */
    }
}

/* Classe d'animation */
.animate {
    animation: move 4.0s ease-in-out infinite;
    /* Animation de deplacement */
}

#description_bouton_p_a_la_decouverte {
    margin: 0;
    /* Supprimer la marge par defaut du paragraphe */
    font-size: 1em;
    /* Agrandir la taille de la police du texte */
}




#statistiques {
    background-color: #fff;
    color: #000;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(4, max-content);
    padding: 15px 0px;
    justify-content: space-evenly;
}

.statistiques_bloc {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 50%;
}

.statistiques_cercle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-items: center;
    background-color: rgba(51, 68, 68, 0.116);
}

.statistique_svg {
    width: 30px;
    height: 30px;
}

/* 
#statistique_svg_1{
    fill: steelblue;
}
#statistique_svg_2{
    fill: seagreen;
}
#statistique_svg_3{
    fill: crimson;
    align-content: center;
}
#statistique_svg_4{
    fill: slateblue;
} */
.statistiques_cercle_bloc_droit {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.statistiques_chiffre {
    font-size: larger;
    font-weight: bold;
    margin: 0px;
}

.statistiques_chiffre_description {
    font-size: small;
    margin: 0px;
}

#decouvrez {
    display: grid;
    grid-template-columns: 40% 60%;
    width: 100%;
    padding: 0px 8%;
}

#decouvrez_texte {
    padding: 20px;
    grid-column: 1/3;
    font-weight: bold;
    display: flex;
    align-items: center;
}

#decouvrez_texte_p {
    color: orange;
    background-color: rgba(255, 166, 0, 0.05);
    width: max-content;
    padding: 15px;
    margin: 15px;
}

#decouvrez_description {
    display: flex;
    flex-direction: column;
    max-height: 500px;
    height: 100%;
    padding: 20px;
    border-right: 3px solid #E1E1E1;
    gap: 30px;
}



#description_bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-color: orange;
    border-radius: 30px;
    width: max-content;
    padding: 12px 24px;
    height: 40px;
}

#contactez_nous {
    padding: 7px;
    border-radius: 5px;
    margin-top: 20px;
}

#description_bouton:active {
    background-color: rgb(225, 165, 0);
}

#description_bouton_p {
    color: #fff;
}

#ensemble_grandes_ecoles {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px;
}

.grande_ecole {
    height: 80px;
    flex-grow: 1;
}

.image_grande_ecole {
    height: 100%;
    width: auto;
    object-fit: cover;
}

.image_grande_ecole:active {
    background-color: #E3E3E3;
}

#formation {
    margin: 0px 5vw;
}









.categorie_container {
    padding-bottom: 10px;
    position: relative;
}

.categorie {
    font-size: 1.5em;
    margin: 30px auto 35px auto;
    padding-bottom: 5px;
    width: max-content;
    max-width: 100%;
    border-bottom: 3px solid #000;
    text-align: center;
}

/* .cacheur_de_scroll_bar{
    width: 100%;
    height: 20px;
    background-color: rgb(161, 10, 10);
    position: absolute;
    bottom: 610px;
} */
.sous_categories_container {
    display: grid;
    max-height: 80vh;
    grid-template-columns: 250px;
    grid-template-rows: repeat(auto-fill, 100px);
    grid-auto-flow: column;
    grid-auto-columns: 250px;
    gap: 10px;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 10px;
    max-width: 100%;
}

.sous_categorie {
    min-height: 50px;
    border: 3px solid rgba(52, 75, 190, 0.125);
    display: grid;
    align-content: center;
    justify-content: center;
    text-overflow: clip;
    border-radius: 15px;
    text-align: center;
    text-transform: lowercase;
}

.sous_categorie:active {
    background-color: #E1E1E1;
    border: 5px solid transparent;
}

footer {
    background-color: #344cbe;
    overflow: hidden;
    color: #fff;
}

footer a {
    color: #fff;
}

#footer_container {
    padding: 50px 0px 50px 0px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-evenly;
}

.footer_bloc {
    display: grid;
    justify-content: center;
    justify-items: center;
}

.footer_titre {
    color: #fff;
    font-weight: bold;
    padding-bottom: 25px;
}

.footer_ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    align-content: space-between;
}

.footer_ul li {
    justify-self: center;
}

.footer_li {
    padding: 0px;
    display: grid;
    grid-template-columns: 25px 100%;
    align-items: center;
    gap: 11px;
}

.footer_li_sans_svg {
    display: flex;
    height: 25px;
    align-items: center;
}

.footer_svg {
    fill: #fff;
    width: 25px;
    height: 25px;
}

#orientation_cameroun_footer {
    padding: 0px 15px;
    padding-bottom: 50px;
    max-width: max-content;
    margin: 0px auto;
    text-align: center;
}

/*DEBUT PAGE FILIERE*/
#bloc_presentation_filiere {
    background-color: #344cbe;
    position: relative;
    margin: 0px auto;
    padding: 5%;
    display: flex;
    flex-direction: column;
    aspect-ratio: 90/35;
    align-items: center;
    justify-content: center;
}

#image_filiere_container {
    position: relative;
    width: 20vw;
    max-width: 100%;
    aspect-ratio: 2/1;
    overflow: hidden;
    border-radius: 30px;
    z-index: 2;
}

#image_filiere {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#couleur_arriere_de_image_filiere,
#bloc_nom_filiere {
    background-color: orange;
}

#couleur_arriere_de_image_filiere {
    border: 3px solid #fff;
    width: 98%;
    aspect-ratio: 1/1;
    border-radius: 50% 20% 50% 50%;
    transform: rotate(45deg);
    position: absolute;
    top: 1px;
    z-index: 1;
}

#barre_d_arrondi {
    display: none;
}

#bloc_nom_filiere {
    border: 3px solid #fff;
    justify-self: right;
    border-radius: 30px;
    display: flex;
    z-index: 2;
    margin: 20px;
    position: relative;
}

.arrondir_nom_filiere {
    display: none;
}

#nom_filiere {
    color: #fff;
    padding: 20px;
    text-align: center;
}

#info_filiere_et_asside_container {
    display: grid;
    grid-template-columns: auto 33%;
    padding: 3vw 0px;
}

/* #info_filiere_et_asside_container::after{
    contain: do;
    contain: src(img/down.svg);
} */
#main_filiere {
    height: min-content;
}

#info {
    padding: 0px 3vw;
}

details :last-child {
    /* border-bottom: 2px solid rgba(0, 0, 0, 0.125); */
}

.summary_filiere {
    display: grid;
    grid-template-columns: 25px auto;
    align-items: center;
    border-top: 2px solid rgba(0, 0, 0, 0.125);
    color: #000;
    cursor: pointer;
    padding: 15px;
}

.ferme,
.ouvert {
    display: flex;
    align-content: center;
    justify-content: center;
}

.contenu_info_filiere {
    padding: 0px 0px 25px 42px;
    line-height: 1.8;
}

#asside_filiere {
    padding: 15px;
    background-color: rgba(255, 0, 0, 0.125);
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: center;
    border-radius: 15px;
    height: max-content;
    margin: 0px 10px;
    border: 5px solid #fff;
    outline: 2px solid rgba(0, 0, 0, 0.25);
}

#asside_filiere_h {
    color: #000;
}

#button_trouver_ma_voie {
    background-color: orange;
    color: #fff;
    padding: 10px;
    border-radius: 15px;
    font-weight: bold;
    margin: 0px auto;
    width: max-content;
}

/*FIN PAGE FILIERE*/
/*DEBUT PAGE ETABLISSEMENT*/
#bloc_illustrations_etablissement {
    aspect-ratio: 100/25;
    position: relative;
}

#image_couverture_etablissement {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#container_profil_etablissement {
    background-color: #fff;
    border: 7px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    height: 70%;
    min-height: 116px;
    max-height: 175px;
    aspect-ratio: 1/1;
    position: absolute;
    bottom: -25%;
    margin-left: 20%;
}

#image_profil_etablissement {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.info_filiere_et_asside_container_etablissement {
    padding-top: 10% !important;
}

#nom_etablissement {
    padding: 25px 5px;
    color: #fff;
    background-color: orange;
    text-align: center;

}

#description_etablissement {
    padding-top: 3vw;
}

#p_description_etablissement {
    padding-bottom: 25px;
}

.ul_etablissement {
    line-height: 30px;
    padding: 0px 0px 25px 0px;
}

#ul_etablissement_filiere_disponible li {
    list-style-type: disc;
}

.ul_etablissement span {
    font-weight: bold;
}

.lien {
    color: #344cbe;
}

#container_du_body {
    max-width: 1301px;
    margin: 0px auto;
}

/*FIN PAGE ETABLISSEMENT*/

@media screen and (min-width: 1301px) {
    #formation {
        margin: 0px 0vw;
    }
}

@media screen and (max-width: 1300px) {
    #main_description {
        padding: 0px 8%;
    }

    /*DEBUT PAGE FILIERE*/
    /*FIN PAGE FILIERE*/

    /*DEBUT PAGE ETABLISSEMENT*/
    /*FIN PAGE ETABLISSEMENT*/
}

@media screen and (max-width: 818px) {
    #decouvrez {
        padding: 0px 0px;
    }
}

@media screen and (max-width: 841px) {
    #statistiques {
        background-color: #344cbe;
        color: #fff;
        min-width: 100%;
        grid-template-columns: auto auto;
        gap: 20px;
        justify-content: space-evenly;
    }
}

@media screen and (max-width: 845px) {
    .logo p {
        padding: 20p;
        margin: 0px;
    }

    .logo {
        padding: 10px 15px;
    }

    header {
        font-size: 15px;
        padding: 0px 0px;
    }

    #nav_bar {
        min-width: 100%;
    }

    #main_description_titre_secondaire {
        font-size: small;
    }

    #main_description_titre_principal {
        font-size: 5vw;
    }

    #main_description_button {
        padding: 0px 20px;
    }

    #main_description_button,
    #button_faire_un_don_petit_ecran {
        padding: 1.5% 3%;
        font-size: small;
    }

    #button_faire_un_don_container {
        justify-content: space-between;
    }

    #button_faire_un_don_petit_ecran {
        display: block;
    }

    .faire_un_don {
        display: none;
    }

    /* #statistiques{
        gap: 0px;
    } */
    .sous_categories_container {
        gap: 12px;
    }

    #footer_container {
        padding: 7% 1%;
    }

    /*DEBUT PAGE FILIERE*/
    #info_filiere_et_asside_container {
        grid-template-columns: auto;
        grid-template-rows: auto auto;
    }

    #asside_filiere {
        margin: 20px auto;
    }

    /*FIN PAGE FILIERE*/

    /*DEBUT PAGE ETABLISSEMENT*/
    /*FIN PAGE ETABLISSEMENT*/
}

@media screen and (max-width: 662px) {
    #enregistrer_mon_etablissement {
        text-align: center;
    }

    .footer_ul {
        align-items: left;
    }

    #decouvrez_description {
        padding-top: 0px;
    }

    .block_operateur_et_image {
        justify-content: center;
    }

    #formulaire_don {
        margin: 0px;
        width: 100vw;
    }

    .block_operateur_et_image img {
        display: none;
    }

    #barre_header {
        display: flex;
    }

    header {
        background-color: #fff;
        height: 56px;
        padding: 0px;
    }

    #header {
        display: none;
    }

    #header_petit_ecran {
        display: flex;
    }

    #barre_header {
        padding: 0px 5%;
    }

    #hamburger {
        display: block;
        width: 30px;
        height: 30px;
    }

    .logo {
        margin-left: 5%;
        background-color: transparent;
        margin: 0px auto;
    }

    #nav_bar_petit {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        /* align-items: center; */
        padding-left: 30px;
        justify-content: center;
        min-width: 104vw;
        position: absolute;
        top: 56px;
        left: -138%;
        margin-top: 0px;
        padding: 0px 30px;
        animation: sliderigth 0.18s ease-in-out 0s infinite alternate forwards paused;
    }

    @keyframes sliderigth {
        to {
            left: 0%;
        }
    }

    .sous_nav_bar {
        max-width: 100%;
        overflow-y: auto;
        padding: 50px 0px;
        display: flex;
        /* align-items: flex-start; */
        flex-direction: column;
        gap: 15px;
    }

    .acceuil {
        border-bottom: 2px solid orange;
        color: orange;
    }

    .diplome_ecole_metier {
        width: 100%;
    }

    .diplome_ecole_metier span {
        border-bottom: 2px solid #344cbe;
        color: #344cbe;
    }

    .signe_deployable {
        display: none;
    }

    /*mod liste header*/
    .liste_header {
        position: relative;
        top: 3px;
    }

    #caroussel {
        min-height: 60vh;
    }

    #main_image {
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
    }

    #main_description_button,
    #button_faire_un_don_petit_ecran {
        padding: 8px 12px;
        font-size: small;
    }

    #decouvrez {
        text-overflow: wrap;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
    }

    #decouvrez_texte {
        grid-column: 1/1;
        padding: 0px;
    }

    #ensemble_grandes_ecoles {
        display: grid;
        grid-template-rows: auto;
        grid-auto-flow: column;
        overflow: scroll;
    }

    #reussir_en_3_etapes {
        display: flex;
        flex-wrap: wrap;
    }

    #formation {
        margin: 0px 20px;
    }

    #footer_container {
        display: flex;
        flex-direction: column;
        max-width: max-content;
        margin: 0px auto;
        gap: 40px;
    }

    .footer_bloc {
        /* justify-content: left; */
    }

    /*DEBUT PAGE FILIERE*/
    #bloc_presentation_filiere {
        aspect-ratio: auto;
        display: block;
        padding: 0px;
        position: relative;
    }

    #image_filiere_container {
        max-width: 100%;
        height: 40vh;
        width: 100%;
        border-radius: 0px;
    }

    #couleur_arriere_de_image_filiere {
        display: none;
    }

    #barre_d_arrondi,
    #nom_filiere {
        background-color: #344cbe;
        color: #fff;
    }

    #barre_d_arrondi {
        display: block;
        position: absolute;
        top: 40vh;
        width: 100%;
        height: 60px;
    }

    #bloc_nom_filiere {
        border: none;
        background-color: transparent;
        width: 100%;
        margin: 0px 0px;
        overflow: hidden;
        display: grid;
        grid-template-columns: 10% 80% 10%;
        z-index: 2;
        border-radius: 0px;
    }

    #section_presentation_filiere,
    .arrondir_nom_filiere,
    #bloc_presentation_filiere {
        background-color: #fff;
    }

    .arrondir_nom_filiere {
        display: block;
        border-radius: 5vw 0px;
    }

    .arrondir_nom_filiere1 {
        border-radius: 0px 5vw;
    }

    #nom_filiere {
        border-radius: 0px 0px 5vw 5vw;
        text-align: center;
        z-index: 5;
    }

    /*FIN PAGE FILIERE*/

    /*DEBUT PAGE ETABLISSEMENT*/
    #bloc_illustrations_etablissement {
        aspect-ratio: 100/45;
    }

    #bloc_profil_etablissement {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    #container_profil_etablissement {
        bottom: -30%;
        margin: 0px;
    }

    #nom_etablissement {
        margin: 0px auto;
    }

    /*FIN PAGE ETABLISSEMENT*/
}

@media screen and (max-width: 425px) {
    #main_description_titre_principal {
        font-size: 5vh;
        margin-bottom: 40px;
    }

    #statistiques {
        grid-template-columns: 1fr 1fr;
        min-height: 200px;
        align-content: space-evenly;
        padding: 7px;
    }

    .statistiques_bloc {
        text-align: center;
        min-width: 100%;
        justify-content: center;
    }

    .statistiques_cercle {
        display: none;
    }

    /*DEBUT PAGE FILIERE*/
    /*FIN PAGE FILIERE*/

    /*DEBUT PAGE ETABLISSEMENT*/
    /*FIN PAGE ETABLISSEMENT*/
}

#form_block {
    background-color: #344cbe;
    height: 100%;

    width: 100%;

    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
    display: grid;
    justify-items: center;
    align-content: space-evenly;
    color: #fff;




}

#form_block>div {
    background-color: rgb(57, 86, 234);
    border-radius: 30px;
    padding: 30px;
    display: flex;
    display: grid;
    flex-wrap: wrap;
    max-width: 100%;
    max-height: 100%;
    /* animation: fluid_background 10s linear 0s infinite; */
}

/* @keyframes fluid_background {
    to{background-color: #344cbe;}
} */
#croix {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    box-sizing: content-box;
    border: 3px solid #fff;
}

#texte_formulaire {
    text-align: center;
    width: 600px;
    max-width: 100%;
    font-weight: bold;
    padding-bottom: 20px;
    margin: 0px auto;
    display: flex;
    flex-wrap: wrap;
    line-height: 1.8;

}

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


    #texte_formulaire {
        text-align: center;
        width: 100%;
        max-width: 100%;
        font-weight: bold;
        padding-bottom: 20px;
        margin: 0px auto;
        display: flex;
        flex-wrap: wrap;
        line-height: 1.8;
    }

    #block_formulaire_etablissement {
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 1001;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;

        background-color: rgba(197, 206, 253, 0.965);
        display: flex;
        justify-content: center;
        padding: 0px 0px;

        flex-wrap: wrap;
    }

    /* règles CSS à appliquer pour les telephones mobiles */
}

#block_formulaire_etablissement {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 1001;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;

    background-color: rgba(197, 206, 253, 0.965);
    display: flex;
    justify-content: center;
    padding: 0px 0px;

    flex-wrap: wrap;
}

#sous_block_formulaire_etablissement {
    width: max-content;
    overflow-y: scroll;
    border: 1px solid #344cbe;
    display: flex;
    /* align-items: center; */
    max-height: 100%;
    max-width: 100%;
    /* padding: 20px; */
}

#enregistrer_etablissement_block {
    width: 500px;
    max-width: 100vw;
    padding: 0px 20px;
}

#enregistrer_mon_etablissement {
    margin: 15px 0px;
}

#formulaire_etablissement,
.fermerformetablissement {}

.element_etablissement {}

form {
    max-width: 300px;
    margin: 0px auto;
}

#formulaire_etablissement {
    background-color: #c5cefd;
    max-width: max-content;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: initial;
    gap: 30px;
    box-shadow: 0px 0px 100px 1px rgb(145, 179, 243);
    /* margin-bottom: 67px; */
}

#form_container,
.form_container_etablissement {
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.form_container_etablissement {
    margin: 0px;
    flex-direction: column;
    max-width: 1200px;
    flex-wrap: wrap;
}

#commentaires {
    display: flex;
    text-overflow: clip;
}

.form_items,
.form_items_etablissement {
    font-weight: bold;
}

.form_items_etablissement {
    min-width: 200px;
}

.form_items input,
.form_items_etablissement input,
.form_items_etablissement button,
#comment {
    font-weight: bold;
    /* margin-top: 10px; */
    height: 40px;
    width: 100%;
    border-radius: 10px;
    padding: 15px;
}

#comment {
    padding: 15px;
    height: 100px;
}

.form_items input:focus,
.form_items_etablissement input:focus {
    border: none;
}

#boutonsGestionFormEtablissement {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

#boutonsGestionFormEtablissement input,
.fermerformetablissement {
    display: flex;
    align-items: center;
    justify-items: center;
    padding: 10px;
}

#boutonsGestionFormEtablissement input,
#boutonsGestionFormEtablissement button {
    width: max-content;
}

#liste_metiers_header_petit {
    margin: 25px 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#message_info_concours {
    font-size: 20px;
    font-weight: bold;
}

.sous_summary_concours {
    padding: 0px 0px 25px 25px;
    line-height: 1.8;
}

.details_info_concours {
    padding: 10px;
}

.summary_info_concours {
    color: #344cbe;

    cursor: pointer;
}

.ul_info_concours {
    display: flex;
    flex-direction: column;
    gap: 10px;
}



.blue-box {
    background-color: #0077be;
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
}

.image-container {
    width: 100%;
    max-width: 400px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 20px;
    margin-bottom: 20px;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.text-container h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.text-container p {
    font-size: 18px;
    line-height: 1.5;
}

a {
    color: #344cbe;
}







/*********************Page Liste Etablissement*************/

.blocDiv {
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
}






.text {



    width: max-content;
    height: max-content;

    border-radius: 20px;
    text-align: left;
    display: flex;
    flex-basis: calc(33.33% - 20px);
    padding: 15px 15px;
    ;
    font-weight: bold;

}

.text:hover {
    background-color: #344cbe;
    color: white;


}

.Region {
    flex-direction: row;
    clear: both;
}