.dialogue {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    margin: auto;
    width: 80%;
}

.portrait {
    width: 20%;

    img {
        width: 100%;
    }
}

.bulleperso,
.bulleperso2 {
    background: rgba(255, 255, 255, 0.8);
    flex: 1;
    min-height: 70px;
    position: relative;
    border-radius: 10px;
    padding: 15px 30px;
    margin: 10px 0;

    p {
        text-align: justify;
        color: black;
    }
}

.bulleperso {
    margin-left: 30px;

    &::before {
        content: "";
        position: absolute;
        right: 100%;
        top: 50px;
        width: 0;
        height: 0;
        border-top: 13px solid transparent;
        border-right: 20px solid rgba(255, 255, 255, 0.8);
        border-bottom: 13px solid transparent;
    }
}

.bulleperso2 {
    margin-right: 30px;

    &:after {
        content: "";
        position: absolute;
        left: 100%;
        top: 50px;
        width: 0;
        height: 0;
        border-top: 13px solid transparent;
        border-left: 20px solid rgba(255, 255, 255, 0.8);
        border-bottom: 13px solid transparent;
    }
}

.portrait2 {
    width: 20%;

    img {
        width: 100%;
    }
}

.dialogueCommentaire {
    display: flex;
    width: 80%;
    margin: 20px auto;
    padding-bottom: 20px;
    border-bottom: 1px solid lightgrey;

    &:last-of-type {
        padding: 0;
        border-bottom: none;
    }

    .portraitCommentaire {
        margin-top: 10px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding: 0;
        overflow: hidden;
        background: transparent;
        box-sizing: border-box;

        &.invite {
            border: 2px solid white;
        }

        img {
            width: 100%;
        }

        svg {
            width: 50%;
            margin: auto;

            g {
                fill: white;
            }
        }
    }

    .bulleCommentaire {
        background: rgba(255, 255, 255, 0.8);
        flex: 1;
        height: stretch;
        margin: auto auto auto 25px;
        position: relative;
        border-radius: 10px;
        padding: 5px 20px;

        &::before {
            content: "";
            position: absolute;
            right: 100%;
            top: 25px;
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-right: 20px solid rgba(255, 255, 255, 0.8);
            border-bottom: 13px solid transparent;
        }

        .commentaireInfos {
            display: flex;
            flex-direction: row;
            align-items: end;
            justify-content: space-between;
            padding-bottom: 5px;
            border-bottom: 1px solid #c0c0c0;

            p {
                margin: 2px 0 0;

                &.nomCommentaire {
                    font-weight: bold;
                }

                &.date {
                    font-style: italic;
                    font-size: .8rem;
                    text-align: right;
                }
            }
        }

        .commentaireNote {
            display: flex;
            justify-content: flex-end;
            gap: 3px;
            margin: 4px 0 0;

            img {
                width: 15px;
            }
        }

        p {
            text-align: justify;
            color: black;
        }
    }
}

.comment-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px auto;
    color: white;
    font-size: 1.3rem;
    font-weight: bold;
}

.comment-pagination a {
    color: orange;
    text-decoration: none;
}

.comment-pagination a:hover,
.comment-pagination a:focus {
    color: white;
}

.comment-pagination__current {
    color: white;
    min-width: 3ch;
    text-align: center;
}

.comment-pagination__disabled {
    color: #666;
    cursor: default;
}