@import url(./colors.css);
@import url(./fonts.css);

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28150, 60, 49, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") ! important;
}
.navbar-light .navbar-toggler {
border : 2px solid var(--terracotamalaga) ! important;
}
.nav-link {
    font-size: 1.2em;
    font-weight: 700;
    color :var(--terracotamalaga) ! important;
}
.mot {
    
    max-height: 45vw;
    overflow: auto;
    
}

.dropdown-menu {
    font-size: 1.2em;
    font-weight: 700;
    background-color: var(--green) !important;
}
.dropdown-item {
    font-size: 1.2em;
    font-weight: 700;
    color :var(--terracotamalaga) ! important;
}

main ,  footer{
    font-family: Raleway;
}
#headleft {
    margin-top: auto;
    margin-bottom: auto;
    padding-left: 4px;
    padding-right: 4px;
    background-color: var(--green);
    border-radius: 5px;
}
#mainImage, #donImage {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}
header {
    display:flex;
    flex-direction: row ;
    justify-content: space-between;
    height : auto;
    overflow:visible;
    background-color: bisque;
    height :fit-content;
}

main {
    width : 90vw ;
    margin-left:auto;
    margin-right:auto;
    padding : 10px;
    background-color: bisque;
}
#headleft h1 {
    color: white;
}

#mainImage {
    overflow: visible !important;
}

button {
    background-color: var(--terracotamalaga);
}
.wooferButton {
    background-color: var(--terracottakyoto);
    color: black;
        width : 200px;
        height : 30 px;
        border-radius: 10px;
        margin : 8px;
        font-family: raleway;
        font-size: 0.9em;
        font-weight: 450;
        border-color: var(--terracotamalaga);

}
.mainButton {
    background-color: var(--terracottakyoto);
    color:  white;
        width : 150px;
        height : 30 px;
        border-radius: 5px;
        margin : 8px;
        font-family: raleway;
        font-size: 1.2em;
        font-weight: 500;
        border-color: var(--terracotamalaga);

}
#donnerButton {
    height : 70px;
    background-color: red !important ;
    border-color: white;
    border-width: 4px;
    border-radius: 10px;
    font-weight:700;
    color  : white;

}
.donButton {
    background-color: var(--terracottakyoto);
    color: yellow;
        width : 200px;
        height : 30 px;
        border-radius: 5px;
        margin : 8px;
        font-family: raleway;
        font-size: 1.2em;
        font-weight: 700;
        border-width: 3px;
        border-color:yellow;


}

#donImage {
    background-image: url("../photos/pls_enfants.JPG");
    background-size: cover;
    margin-left:auto;
    margin-right:auto;
    width : 80vw;
    height : 45vw;
}
.btn-custom {
        background-color: var(--terracotamalaga);
        color: white;
}
main p {
    text-align: justify;

}

#mainImage {
    background-image: url('../photos/main_enfants_tous.jpg');
    background-size: cover;
    margin-left:auto;
    margin-right:auto;
    width : 87vw;
    height : 50vw;
}

#newsImage {
    background-image: url('../photos/pls_enfants.JPG');
    background-size: cover;
    margin-left:auto;
    margin-right:auto;
    width : 85vw;
    height : 45vw;
}
.iframe-container {
    position : relative ;
    width : 100%;
    padding-bottom : 56.25%;
    height : 0;
    overflow : hidden;
}
.iframe-container iframe {
    position : absolute;
    top:0;
    left:0;
    width:100%;
}
    
#pensionImage {
    background-image: url('../photos/pensionnaires.JPG');
    background-size: cover;
    margin-left:auto;
    margin-right:auto;
    width : 85vw;
    height : 45vw;
}
#woofImage {
    display:flex;
    flex-direction: column;
}
.logoheader {
    width : 90px;
    height : 90px;
    padding : 8px;
    border-radius: 25%;
}
#pensImage {
    background-image: url('../photos/pensionnaires.JPG');
    background-size: cover;
    margin-left:auto;
    margin-right:auto;
    width : 85vw;
    height : 45vw;
}
#woofImage {
    background-image: url('../photos/woofers.jpg');
    background-size: cover;
    margin-left:auto;
    margin-right:auto;
    width : 85vw;
    height : 45vw;
    align-items: end;
    justify-content: flex-end;

}
#boutonWoofer {

        width : 250px;
        height : 25 px;
        border-radius: 5px;
        margin : 8px;
        font-size: 1.2em;
        font-weight: 600;
}

footer {
    display : flex;
    flex-direction: row;
    font-style:italic;
    font-size: 12px;
    position:sticky;
    line-height: 25px;
    text-align: center;
    bottom:0;
    left:0;
    }
#firstPage {
    display: flex;
    flex-direction: row;
}
#firstPage article {
    justify-items: center;
    border-style: solid;
    border-color: grey;
    border-width: 1px;
    border-radius: 5px;
 

}
.figCoinArticle { 
    float : right;
    width : 75px;
    height : 75px;
    margin: 5px;
}
.modale {
    display :flex ;
    flex-direction: column;
}
.imgCoinArticle {
    width : 100%;
    height : 100%;
    object-fit: cover;
    border-radius: 50%;
}
.modal-body {
    width : 400px;
    height : auto;

}
.figPens { 

    width : auto;
    height : 300px;
    margin: 5px;
}
.imgPens {
    width : 100%;
    height : 100%;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 10px;
}
.pensionnaires {
    display: flex;
    flex-direction: row;
}
.card figure  {
    height : auto ;
    width : auto ;
}
.card-title {
   text-align: center;
   background-color: var(--green);
   color : white;
   
}
.card h5 {
    margin-bottom: 0;
}

footer a {
    padding-left: 5px;
}
footer {
    color : white;
    font-size: large;
    background-color: var(--green);
}
.pensionnaires {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    margin-left: auto;
    margin-right: auto;
}

.card {
    width: 180px!important;
}
.card-body button {
    width : 146px;
}
#firstPage .card-body {
    display:flex;
    flex-direction: column;
    gap: 7px;
}