﻿.DetaiPageMainContainer {
    display: flex;
    justify-content: center;
    padding: 10px;
    flex-direction:column;
}

.detailPageContainer {
    /*max-width: 1900px;*/
    justify-content: center;
}

.paymentPageContainer {
    /*max-width: 1900px;*/
    justify-content: center;
}

.GroupDetailsContainer {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-items: center;
    flex-wrap: wrap;
}

.detailAction button {
    color: darkgreen;
}

.backgroundTable {
    background-color: aquamarine;
}

.GroupDetailsContainer * {
    /*color: black;*/
    font-family: 'Libre Baskerville'
}

.DetailsContainer {
    display: flex;
    overflow: hidden;
    gap: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    width:100%;
}

    .DetailsContainer > * {
        flex: 1 1 60%;
    }

.DetailsContainerIsTable {
    display: grid;
    overflow: hidden;
    gap: 0px;
    align-content: center;
}

    .DetailsContainerIsTable > * {
        flex: 1 1 60%;
    }

.IsTable {
    border: solid;
}

.DetailContent {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: nowrap;
}

    .DetailContent button {
        height: 35px;
        padding-inline: 10px;
        background-color: #26b050;
        box-shadow: lightgrey 2px 2px;
        transition: transform 0.1s;
        align-self: end;
        text-align: center;
        line-height: 15px;
        color: darkgreen;
    }

        .DetailContent button:hover {
            background-color: #26b090;
        }

        .DetailContent button:active {
            transform: translateY(4px); /* Déplace le bouton vers le bas */
        }

.imageText {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 250px;
}

    .imageText > img {
        max-height: 300px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 1);
    }

.imageText-title {
    margin: 16px 0;
}

.imageText ul {
    list-style-type: disc;
    padding-left: 20px;
    text-align: left;
}

    .imageText ul li {
        margin: 8px 0;
    }
.imageTextColumn {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    gap: 10px;
}

    .imageTextColumn img {
        max-width: 300px;
    }

.imageTextInLine {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    text-align: left;
    padding: 50px;
}

.imgTextInLine {
}


.introLeft {
    display: grid;
    justify-content: center;
}

.introRight {
}

.textTextInLine {
    width: 100%;
}


@media (min-width: 700px) {
    .DetailsContainer > * {
        flex: 1 1 20%;
    }


    .DetailContent > img {
        width: 600px;
    }

    .GroupDetailsContainer * {
    }

    .imageText {
        max-width: 400px;
    }

        .imageText * {
            max-width: 400px;
        }

    .imageTextInLine img {
        width: 800px;
    }


        .imageTextInLine * {
        }

    .imageTextColumn img {
        min-width: 400px;
    }
}



@media (min-width: 1820px) {
    .paymentPageContainer{        
        width:1500px
    }

    .textTextInLine {
        width: 50%;
    }

    .imageText * {
    }

    .imageText h1 {
    }

    .imageText p {
    }

    .imageTextInLine img {
        width: 800px;
    }



    .imageTextColumn > img {
        min-width: 1500px;
    }
}

.flexContainerCol {
    display: flex;
    flex-direction: column;
}

.titre{
    font-weight : bolder; 
}

.imageBand {
    display:flex;
    justify-content:center;
    background-color:green;
    width :100%;
}

.pictureGroupDisplay 
{
    display:grid;
}