﻿body {
    font-family: DM Sans !important;
}

.global {
    background-image: linear-gradient(rgb(246, 247, 249), rgb(246, 247, 249)), linear-gradient(rgb(238, 238, 238), rgb(238, 238, 238)) !important;
}


.blueBg {
    background-color: rgb(0, 72, 129);
    color: white;
}

    .blueBg h1 {
        font-family: Roboto !important;
        font-weight: 300 !important;
        font-size: 60px !important;
        text-align: center;
        padding-top: 80px;
    }

    .blueBg h2 {
        font-family: Roboto !important;
        font-weight: 300 !important;
        font-size: 30px !important;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 90px;
    }

.centrage {
    margin: 0 auto;
    max-width: 1200px;
}

.filArianne {
    color: rgb(95, 95, 95) !important;
    font-size: 14px !important;
}

.separator_blue {
    float: none;
    width: 50px;
    margin: 0px auto !important;
    padding: 5px !important;
    padding-bottom: 0px !important;
}

    .separator_blue hr {
        width: 100%;
        background-color: transparent;
        border-width: 2px;
        border-color: rgb(0, 72, 129);
        border-style: solid;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        display: block;
        height: 1px;
        padding: 0;
    }

.separator_orange {
    float: none;
    width: 80px;
    margin: 0px auto !important;
    padding: 5px !important;
    padding-bottom: 0px !important;
}

    .separator_orange hr {
        width: 100%;
        background-color: transparent;
        border-width: 2px;
        border-color: rgb(255, 123, 33);
        border-style: solid;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        display: block;
        height: 1px;
        padding: 0;
    }

.contentFormation {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
}

    .contentFormation .gauche {
        width: 22.75%;
        /*width: 273px;*/
        display: inline-block;
        vertical-align: top;
    }

    .contentFormation .centre .videoFormation {
        text-align: center;
        background-color: white;
        padding: 1px;
        border-radius: 3px;
        box-shadow: rgb(207, 207, 207) 0px 0px 10px -5px;
        max-height: 154px;
        margin-bottom: 25px;
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
        height: 0;
    }

        .contentFormation .centre .videoFormation iframe {
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            position: absolute;
        }


    .contentFormation .gauche .formateurSection {
        border-radius: 3px;
        box-shadow: rgb(207, 207, 207) 0px 0px 10px -5px;
        padding: 18px;
        background-color: white;
    }

        .contentFormation .gauche .formateurSection .titleSectionLeft {
            color: rgb(0, 0, 0) !important;
            font-size: 20px !important;
            font-weight: 600 !important;
            text-align: left;
            border-bottom: 1px solid rgba(228, 228, 228, 0.92);
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        .contentFormation .gauche .formateurSection .formateur {
            font-weight:600 !important;
            font-size: 16px !important;
            color: rgb(0, 0, 0) !important;
            text-align: left;
            margin-bottom: 5px;
        }

        .contentFormation .gauche .formateurSection .photoFormateur {
            float: left;
            margin-right: 15px;
            margin-bottom: 10px;
        }

        .contentFormation .gauche .formateurSection .smartDescFormateur {
            font-weight: 300 !important;
            font-size: 12px !important;
            font-style: italic;
            padding-top: 0px;
            text-align: left;
        }

        .contentFormation .gauche .formateurSection .descFormateur {
            font-weight: 300 !important;
            font-size: 14px !important;
            line-height: 1.65em !important;
            text-align: justify
        }

    .contentFormation .gauche .avisSection {
        border-radius: 3px;
        box-shadow: rgb(207, 207, 207) 0px 0px 10px -5px;
        padding: 18px;
        background-color: white;
        margin-top: 25px
    }

        .contentFormation .gauche .avisSection .titleSectionRight {
            color: rgb(0, 0, 0);
            font-size: 20px !important;
            font-weight: 400 !important;
            text-align: left;
            border-bottom: 1px solid rgba(228, 228, 228, 0.92);
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        .contentFormation .gauche .avisSection .enumAvis {
            font-size: 16px !important;
            font-weight: 300;
            text-align: justify;
        }

            .contentFormation .gauche .avisSection .enumAvis .itemAvis {
                font-size: 14px !important;
                font-weight: 300;
            }

            .contentFormation .gauche .avisSection .enumAvis .itemAvis {
                margin-bottom: 25px;
            }

                .contentFormation .gauche .avisSection .enumAvis .itemAvis span {
                    color: rgb(0, 72, 129);
                }

    .contentFormation .gauche .modalite {
        border-radius: 3px;
        box-shadow: rgb(207, 207, 207) 0px 0px 10px -5px;
        padding: 18px;
        background-color: white;
        margin-top: 25px;
        text-align: left;
    }

        .contentFormation .gauche .modalite .titleSectionLeft {
            color: rgb(0, 0, 0) !important;
            font-size: 20px !important;
            font-weight: 400 !important;
            text-align: left;
            border-bottom: 1px solid rgba(228, 228, 228, 0.92);
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        .contentFormation .gauche .modalite .enumAvantage {
            font-size: 13px !important;
            font-weight: 300;
        }

            .contentFormation .gauche .modalite .enumAvantage .itemAvantage {
                margin-bottom: 2px !important;
                line-height: 1.5em !important;
            }


    .contentFormation .centre {
        width: 50%;
        /*width: 608px;*/
        display: inline-block;
        vertical-align: top;
        margin-left: 2.6%;
        margin-right: 2.6%;
    }

        .contentFormation .centre h1 {
            text-align: left;
            font-size: 34px !important;
            font-family: Clash Grotesk !important;
            font-weight: 500 !important;
            color: #008e89 !important;
            background-color: rgb(248, 248, 248);
            border-bottom: 1px solid rgb(204, 204, 204);
            padding: 0px;
            padding-bottom: 20px;
            margin-top: 0px !important;
            line-height: 1.2em !important;
        }

        .contentFormation .centre .pretitle {
            text-align: left;
            font-size: 20px !important;
            font-family: Roboto !important;
            font-weight: 500 !important;
            color: rgb(0,0,0) !important;
            background-color: rgb(248, 248, 248);
            padding: 0px;
            padding-bottom: 0px;
            margin-top: 0px !important;
            line-height: 1.2em !important;
        }



        .contentFormation .centre .titleCentre {
            color: rgb(0, 0, 0) !important;
            font-size: 16px !important;
            font-weight: 600 !important;
            margin-top: 25px;
            margin-bottom: 15px;
            text-align: left;
        }

        .contentFormation .centre .textCentre {
            font-weight: 300 !important;
            font-size: 16px !important;
            color: rgb(0, 0, 0) !important;
            text-align: justify;
        }

            .contentFormation .centre .textCentre .Profil {
                display: inline-block;
                width: 49.6%;
            }

                .contentFormation .centre .textCentre .Profil svg {
                    margin-right: 8px;
                }

                .contentFormation .centre .textCentre .Profil .spanProfil {
                    position: relative;
                    top: -3px;
                }

        .contentFormation .centre .programme {
            background-color: white;
            padding: 20px;
            margin-top: 30px;
            border-radius: 3px;
            box-shadow: rgb(207, 207, 207) 0px 0px 10px -5px;
            text-align: left;
        }

            .contentFormation .centre .programme .titleProgrammeCentre {
                color: rgb(0, 0, 0) !important;
                font-size: 20px !important;
                font-weight: 600 !important;
                margin-bottom: 20px;
                border-bottom: 1px solid rgba(228, 228, 228, 0.92);
                padding-bottom: 15px;
            }

            .contentFormation .centre .programme .jour {
                font-weight: 600 !important;
                font-size: 16px !important;
                color: rgb(0, 0, 0) !important;
                padding: 0px 5px;
                margin-top: 5px;
            }

            .contentFormation .centre .programme ul {
                list-style-type: none;
                padding: 0;
                margin: 0;
                margin-top: 10px;
                margin-bottom: 25px;
                padding: 0px 5px;
            }

                .contentFormation .centre .programme ul li {
                    background-repeat: no-repeat;
                    padding-left: 0px;
                    font-size: 16px !important;
                    line-height: 1.5em;
                    font-weight: 300;
                }


            .contentFormation .centre .programme .itemChat {
                margin-top: 20px;
            }

                .contentFormation .centre .programme .itemChat .divChat {
                    display: inline-block;
                    width: 92%;
                    vertical-align: top;
                    line-height: 1.5em;
                    font-size: 16px;
                    padding-left: 15px;
                }



                .contentFormation .centre .programme .itemChat .authorChat {
                    color: rgba(0, 19, 34, 0.6);
                    font-weight: 700;
                    margin-right: 20px;
                }


    .contentFormation .droiteGlobal {
        /*width: 256px;*/
        width: 21.05%;
        display: inline-block;
        vertical-align: top;
    }

        .contentFormation .droiteGlobal .droite {
            background-color: white;
            border-radius: 3px;
            box-shadow: rgb(207, 207, 207) 0px 0px 10px -5px;
            padding: 18px 0px;
        }

            .contentFormation .droiteGlobal .droite .orangeButton {
                background-color: #008e89;
                border-radius: 5px;
                padding-top: 20px !important;
                padding-bottom: 20px !important;
                color: white;
                text-align: center;
                font-size: 22px;
                margin-top: 20px;
                cursor: pointer;
                margin-left: 18px;
                margin-right: 18px;
            }

            .contentFormation .droiteGlobal .droite .Prix {
                font-weight: 300 !important;
                color: red;
                font-size: 30px; /*40px*/
                text-align: center;
                margin-left: 18px;
                margin-right: 18px;
            }

                .contentFormation .droiteGlobal .droite .Prix .OriginalPrix {
                    color: rgb(0, 0, 0);
                    font-size: 20px;
                }

                .contentFormation .droiteGlobal .droite .Prix .DatePromotion {
                    color: rgb(0, 0, 0);
                    font-size: 14px;
                }

            .contentFormation .droiteGlobal .droite .titleDroite {
                color: rgb(0, 0, 0) !important;
                font-size: 20px !important;
                font-weight: 600 !important;
                text-align: left;
                margin-top: 30px;
                margin-left: 18px;
                margin-right: 18px;
            }

            .contentFormation .droiteGlobal .droite .prochainesDates {
                color: rgb(21, 21, 21) !important;
                font-size: 17px !important;
                font-weight: 400 !important;
                text-align: left;
                margin-top: 10px;
                margin-left: 18px;
                margin-right: 18px;
            }

            .contentFormation .droiteGlobal .droite .orangeText {
                color: rgb(21, 21, 21) !important;
                font-size: 15px !important;
                font-weight: 400 !important;
                text-align: left;
                margin-top: 10px;
                margin-left: 18px;
                margin-right: 18px;
            }

            .contentFormation .droiteGlobal .droite .blueText {
                color: rgb(0, 72, 129) !important;
                font-size: 16px !important;
                font-weight: 400 !important;
                text-align: left;
                margin-top: 20px;
                margin-left: 18px;
                margin-right: 18px;
            }

            .contentFormation .droiteGlobal .droite .detailFormationRight {
                margin-top: 30px;
                background-color: white;
                padding: 10px 20px;
                font-size: 17px !important;
                font-weight: 300 !important;
                border: 1px solid rgb(238, 238, 238) !important;
                margin-left: 18px;
                margin-right: 18px;
                text-align: left;
            }

            .contentFormation .droiteGlobal .droite .detailFormationRight2 {
                margin-top: 30px;
                background-color: white;
                padding: 10px 20px;
                font-size: 14px !important;
                font-weight: 300 !important;
                text-align: left;
            }

            .contentFormation .droiteGlobal .droite .tel {
                color: rgb(0, 0, 0) !important;
                font-weight: 400 !important;
                text-align: left;
                font-size: 16px !important;
                margin-top: 15px;
                line-height: 2.3em;
                padding-left: 10px;
                margin-left: 18px;
                margin-right: 18px;
            }

                .contentFormation .droiteGlobal .droite .tel .spanTel {
                    position: relative;
                    top: -3px;
                    left: 5px;
                }

            .contentFormation .droiteGlobal .droite .calendrierDroite {
                background-image: linear-gradient(rgb(246, 247, 249), rgb(246, 247, 249)) !important;
                text-align: center;
                padding: 14px 0px 10px 0px;
                margin-top: 10px;
            }

                .contentFormation .droiteGlobal .droite .calendrierDroite .spanCalendrier {
                    position: relative;
                    top: -5px;
                    left: 8px;
                    font-size: 20px;
                }


        .contentFormation .droiteGlobal .avantegeSection {
            border-radius: 3px;
            box-shadow: rgb(207, 207, 207) 0px 0px 10px -5px;
            padding: 18px;
            background-color: white;
            margin-top: 25px;
            text-align: left;
        }

            .contentFormation .droiteGlobal .avantegeSection .titleSectionLeft {
                color: rgb(0, 0, 0) !important;
                font-size: 20px !important;
                font-weight: 600 !important;
                text-align: left;
                border-bottom: 1px solid rgba(228, 228, 228, 0.92);
                padding-bottom: 10px;
                margin-bottom: 20px;
            }

            .contentFormation .droiteGlobal .avantegeSection .enumAvantage {
                font-size: 16px !important;
                font-weight: 300;
            }

                .contentFormation .droiteGlobal .avantegeSection .enumAvantage .itemAvantage {
                    margin-bottom: 2px !important;
                    line-height: 1.5em !important;
                }


.lity-iframe-container {
    max-width: 560px;
    margin: 0 auto;
    max-height: 600px !important;
    height: 600px !important;
}

    .lity-iframe-container iframe {
        max-height: 600px !important;
        height: 600px !important;
    }

.lity-content {
    max-height: 600px !important;
    height: 600px !important;
}

@media (max-width: 1046px) {
    .contentFormation {
        text-align: center;
    }

        .contentFormation .centre {
            width: 100%;
            margin-left: 0px;
            margin-right: 0px;
            padding: 0px 30px;
        }

        .contentFormation .gauche {
            width: 273px;
            margin-left: 0px;
            margin-right: 0px;
            margin-top: 30px;
        }

        .contentFormation .droiteGlobal {
            width: 256px;
            margin-left: 0px;
            margin-right: 0px;
            margin-top: 30px;
        }
}

@media (max-width: 535px) {
    .contentFormation .centre .programme .itemChat .divChat {
        width: 85%;
    }
}
