.contenaire-global-single {
    background: #F2F2F2;
}

.container-single {
    width: 1220px;
    max-width: 95%;
    padding: 8px;
    margin: auto;
    /* background: red; */
}

.container-single h2 {
    text-transform: uppercase;
    font-size: 20px;
    padding: 15px 0;
}

.container-single .detail-image {
    height: 495px;
    display: flex;
}

.container-single .detail-image .image-container {
    background: #FFFFFF;
    height: 495px;
    width: 495px;
    padding: 20px;
}

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

.container-single .detail-share-like {
    width: 50%;
    padding: 0 20px 0 20px;
    position: relative;
}

.container-single .detail-share-like h1 {
    text-transform: uppercase;
    text-align: justify;
    font-size: 19px;
    color: #000000;
}

/* nombre de like et de commentaire */
.container-single .detail-share-like .nb-like-comment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    margin-top: 40px;
}

.container-single .detail-share-like .nb-like-comment .nb-like p:first-child,
.container-single .detail-share-like .nb-like-comment .nb-comment p:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    color: #000000;
    font-weight: 700;
}

.container-single .detail-share-like .nb-like-comment .nb-like p:nth-child(2),
.container-single .detail-share-like .nb-like-comment .nb-comment p:nth-child(2) {
    margin-top: -20px;
    font-size: 25px;
    color: #000000;
}

/* date et partage */
.container-single .detail-share-like .date-partage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    height: 80px;
}

.container-single .detail-share-like .date-partage .date-pub p:first-child,
.container-single .detail-share-like .date-partage .lien-social p:first-child {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    font-size: 20px;
    color: #000000;
    font-weight: 700;
}

.container-single .detail-share-like .date-partage .date-pub p:nth-child(2),
.container-single .detail-share-like .date-partage .lien-social p:nth-child(2) {
    margin-top: -20px;
    font-size: 20px;
    color: #000000;
}

/* liker et commenter */
.container-single .detail-share-like .like-aimer {
    position: absolute;
    bottom: 0;
    left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container-single .detail-share-like .like-aimer {
    width: 60px;
    height: 40px;
}

.like-aimer a span.dashicons {
    text-decoration: none;
    color: #000000;
    font-size: 35px;
    margin-left: 50px;
}

/* description title */
.titre_desc {
    margin: 15px 0;
}

/* container desc */
.contenaire-desc {
    text-align: justify;
}

/* liste images experiences */
.container-single .title-image-experience {
    text-transform: uppercase;
    font-size: 20px;
    padding: 20px 0 10px 0;
}

/* ******************************************************
        POUR LES IMAGES D'EXPERIENCES
****************************************************** */
.container-single .list-image {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.container-single .list-image .one-image {
    width: 250px;
    height: 250px;
    margin: 5px 10px 5px 0;
}

.container-single .list-image .one-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* faire disparaitre le placeholder */
.comment-form textarea::placeholder {
    visibility: hidden;
}

.comment-form input::placeholder {
    visibility: hidden;
    ;
}


/* kodex buttons */
.kodex_buttons {
    display: flex;
    justify-content: space-between;
}

.kodex_buttons button .text,
.kodex_buttons button .counter {
    display: none;
}

/* Pour changer l'icon du dashicon */
.kodex_buttons button.kodex_like_button .icon:before {
    content: "\f487";
    font-size: 40px;
}

/* Avant de cliquer sur le bouton like */
.kodex_buttons button.kodex_like_button {
    color: #FFFFFF;
    border: none;
    background: none;
}

.kodex_buttons button.kodex_like_button .icon {
    color: rgb(90, 84, 84);
}

.kodex_buttons button.kodex_like_button.kodex_button_loading {
    background: none;
}

.kodex_button.kodex_like_button.kodex_button_active .icon {
    color: red;
}

.kodex_buttons button.kodex_like_button:active {
    background: none;
}

span.icon {
    background-color: none !important;
    box-shadow: none;
}

span.icon:hover {
    background-color: #F2F2F2 !important;
    box-shadow: none;
}

.kodex_buttons button.kodex_like_button:hover {
    background: none !important;
}

/* avant de cliquer sur le bouton dislike  */
.kodex_buttons .kodex_button.kodex_dislike_button {
    display: none;
}

/* quand le kodex bouton est actif */
.kodex_buttons button.kodex_button_active {
    border: none;
}

/* pour faire disparaitre le bouton like et dislike au niveau de description */
.contenaire-desc~.kodex_buttons {
    display: none;
}

/* changer la couleur du bouton laisser un commentaire fourni par defaut */
input[type="submit"].submit,
input[type="submit"].submit:hover {
    background: #B1810B;
}

.kodex_likes_count:before {
    content: '';
}

.kodex_likes_count span {
    font-size: 25px;
    margin-top: -10px;
}


/*****************************************************
            POUR LA RESPONSIVITE
******************************************************/
@media (max-width: 465px) {
    .container-single {
        padding: 5px;
    }

    .container-single h2 {
        font-size: 20px;
        margin: 25px 0 5px 0;
        padding: 0;
    }

    .container-single .detail-image {
        height: 575px;
        flex-direction: column;
    }

    .container-single .detail-image .image-container {
        background: #FFFFFF;
        height: 200px;
        width: 100%;
        padding: 15px;
    }

    .container-single .detail-share-like {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .container-single .detail-share-like h1 {
        font-size: 15px;
        width: 350px;
        margin: 15px 0;
    }

    .jaime,
    .commentaire,
    .date-publication,
    .partagez {
        font-size: 17px;
    }

    /* nombre de like et de commentaire */
    .container-single .detail-share-like .nb-like-comment {
        width: 350px;
        padding: 0;
        margin: 0;
    }

    .container-single .detail-share-like .date-partage {
        flex-direction: column;
        align-items: start;
        width: 350px;
        margin-top: -5px;
    }

    .container-single .detail-share-like .date-partage .date-pub,
    .container-single .detail-share-like .date-partage .lien-social {
        height: 80px;
        width: 100%;
    }

    .container-single .detail-share-like .like-aimer {
        bottom: -70px;
        left: 150px;
    }

    input[type="submit"].submit,
    input[type="submit"].submit:hover {
        background: #B1810B;
        padding: 5px;
    }

    /* liste images experiences */
    .container-single .title-image-experience {
        font-size: 15px;
    }

    .container-single .list-image .one-image {
        width: 100%;
        height: 250px;
        margin-bottom: 10px;
    }
}

@media (min-width: 466px) and (max-width: 955px) {
    .container-single {
        padding: 15px;
    }

    .container-single .detail-image {
        height: 730px;
        flex-direction: column;
    }

    .container-single .detail-image .image-container {
        background: #FFFFFF;
        height: 350px;
        width: 100%;
        padding: 15px;
    }

    .container-single .detail-share-like {
        width: 100%;
        /* height: 100%; */
        padding: 0;
    }

    .container-single .detail-share-like h1 {
        font-size: 17px;
        margin-top: 5px;
    }

    .container-single h2 {
        padding: 20px 0;
    }

    .container-single .detail-share-like .like-aimer {
        bottom: -50px;
        left: 10px;
    }

    /* liste images experiences */
    .container-single .list-image {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .container-single .list-image .one-image {
        width: 30%;
        height: 250px;
        margin-bottom: 10px;
    }
}