.container_formation {
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: row;
    position: relative;
}

.container_formation_session {
    width: 100%;
    height: calc(100vh - 130px);
    display: flex;
    flex-direction: row;
    position: relative;
    gap: 1vh;
}

.section_formation_container:first-child {
    width: 10%;
    height: 100%;
}

.section_formation_container:first-child img {
    height: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.section_formation_container:last-child {
    width: 10%;
    height: 100%;
    padding: 1vh;
}
.section_formation_container:last-child img {
    height: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.section_formation_container:nth-child(2) {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 5vh 0vh 0vh;
    gap: 1.5vh;
    align-items: center;
    text-align: center;
}

.section_formation_container .container_about_theme {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: row;
    gap: 2vh;
    width: 100%;
    min-height: auto;
}

.section_formation_container .container_about_theme .theme_cards {
    width: 40%;
    background-color: var(--vert);
    height: 100%;
    color: white;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.section_formation_container .container_about_theme .theme_cards h4 {
    margin-bottom: 2vh;
}

.list_theme_proposer {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: center;
    padding-bottom: 1vh;
}

.tableau_title_theme {
    width: 100%;
    height: auto;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    text-align: center;
    align-items: center;
}

.tableau_title_theme h5:nth-child(1) {
    width: 20%;
}

.tableau_title_theme h5:nth-child(2) {
    width: 60%;
}

.tableau_title_theme h5:nth-child(3) {
    width: 20%;
}

.line_theme {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: auto;
}

.line_theme .line_theme_col p {
    width: 100%;
    overflow: hidden;
    word-wrap: break-word; /* Permet de couper les mots longs pour s'adapter à la largeur */
    overflow-wrap: break-word; /* Remplace word-wrap pour être plus moderne */
    white-space: normal; /* Permet aux lignes de texte de s'enrouler */
    padding: 0vh 0.5vh;
}

.line_theme .line_theme_col i:hover {
    cursor: pointer;
}

.line_theme_col:nth-child(1) {
    width: 20%;
}
.line_theme_col:nth-child(2) {
    width: 60%;
}
.line_theme_col:nth-child(3) {
    width: 20%;
    position: relative;
}

.icon_upvote {
    position: absolute;
    right: 5px;
    top: 0;
}

.list_line_theme {
    height: 20vh;
    overflow: scroll;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.form_theme {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: auto;
    padding-bottom: 1vh;
}

.form_theme label {
    font-weight: lighter;
    margin-bottom: 0.5vh;
}
.form_theme input {
    font-weight: lighter;
    margin: 0.5vh 0vh;
    width: 80%;
}

.form_theme input::placeholder {
    font-weight: 200;
    color: var(--vert);
}
.txt_description {
    width: 80%;
    resize: none;
}

.form_theme button {
    font-weight: lighter;
    margin-top: 1vh;
    background-color: white;
    color: var(--vert);
    padding: 1vh;
    font-size: medium;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

/* Liste des formation /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Liste des formation /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Liste des formation /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.container_formations_list {
    background-color: var(--vert);
    padding: 2vh;
    width: 80%;
    display: flex;
    flex-direction: row;
    border-radius: 40px 40px 0px 0px;
    -webkit-border-radius: 40px 40px 0px 0px;
    -moz-border-radius: 40px 40px 0px 0px;
    -ms-border-radius: 40px 40px 0px 0px;
    -o-border-radius: 40px 40px 0px 0px;
    gap: 2vh;
    overflow: auto;
    min-height: 325px;
    border: solid 2px var(--vert);
    scrollbar-color: white var(--vert);
}

.card_formation {
    min-width: 24%;
    max-width: 24%;
    width: 24%;
    background-color: white;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding-bottom: 1vh;
}

.titre_formation {
    width: 100%;
    height: 30%;
    margin: 2vh 0vh;
}

.description_formation {
    height: 40%;
    width: 100%;
    margin: 0.5vh 0vh 0vh;
    word-wrap: break-word; /* Permet de couper les mots longs pour s'adapter à la largeur */
    overflow-wrap: break-word; /* Remplace word-wrap pour être plus moderne */
    white-space: normal; /* Permet aux lignes de texte de s'enrouler */
    padding: 0.2vh;
    text-align: justify;
}

.time_formation {
    height: 30%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 3vh 0vh 0vh 0vh;
}

.time_formation div {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.time_formation div p {
    margin: 0;
    padding: 0;
}

/* Inscription aux formation /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Inscription aux formation /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Inscription aux formation /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.container_inscription_formations {
    width: 80%;
    background-color: var(--vert);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 108px;
}

.form_inscription {
    color: white;
    width: 100%;
}

.form_inscription label {
    font-size: large;
}

.form_inscription input {
    width: 40%;
    color: var(--vert);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border: none;
    text-align: center;
    outline: none;
}

.form_inscription button {
    border: solid white 2px;
    color: white;
    font-size: medium;
    padding: 0.5vh;
    width: 15%;
    margin-left: 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.form_inscription button:hover {
    background-color: white;
    border: solid white 2px;
    color: var(--vert);
}

.color {
    color: var(--vert);
}

/* Responsive pages formation /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Responsive pages formation /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Responsive pages formation /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

@media all and (max-width: 992px) {
    .responsive_pub {
        display: none;
    }

    .section_formation_container .container_about_theme {
        flex-direction: column;
    }

    .section_formation_container:nth-child(2) {
        width: 100%;
    }

    .icon_upvote {
        top: -5px;
    }

    .line_theme .line_theme_col p {
        font-size: x-small;
    }

    .form_theme button {
        font-weight: 500;
    }

    .section_formation_container .container_about_theme .theme_cards {
        width: 90%;
    }

    .card_formation {
        min-width: 80%;
        max-width: 80%;
        width: 80%;
    }

    .container_formations_list {
        width: 90%;
    }

    .container_inscription_formations {
        width: 90%;
        padding-bottom: 2vh;
    }

    .form_inscription input {
        width: 50%;
    }

    .form_inscription button {
        width: 30%;
    }
}