@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    font-size: 1em;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    align-content: space-between;
    color: #000000;
    background-color: 
}

footer {
    align-self: end;
}

h1, h2, h3 {
    text-align: center;
}

h1 {
    font-size: 2.5rem;
    color:orange;
}

h2 {
    margin: 20px 0 10px 0;
}

.important, strong
{
    font-weight:700;
}

section#Loading {
    min-height:50vh;
}
a, .btn-link {
    color: orange;
    font-weight: 600;
}

    a:hover {
        color: orangered;
        text-decoration:underline;
    }

div#Div_Contenu {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 40px auto;
    max-width: 1400px;
    transition: 0.3s;
    min-height: 70vh;
    width: calc(100% - 100px);
    padding: 20px;
    border-radius: 15px;
  

    background: rgba(255,255,255,0.5);
}

.Classe_Font_Euro {
    font-size: 8pt;
}


input:focus-visible {
    outline: 0px;
}

div.Button_Submit {
    display: flex;
    justify-content: flex-end;
}

/*button[type=submit] {
    height: 45px;
    font-size: 12pt;
    border: 2px solid orange;
    text-align: center;
    text-decoration: none;
    padding: 5px;
    margin: 10px auto;
    cursor: pointer;
    border-radius: 20px;
    transition: 0.3s;
    background-color: orange;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}*/

div.validation-summary-errors ul {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
    color: red;
    font-weight: 600;
}

div.validation-summary-errors li::before, span.field-validation-error::before {
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f06a";
    font-size: 1.5rem;
    /*vertical-align: text-bottom;*/
    vertical-align: middle;
}



.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    /*outline: 1px solid #26b050;*/
    outline:none;
}

.invalid {
    /*outline: 1px solid red;*/
    outline:none;
}

.validation-message {
    color: red;
}



header #Menu_Catalogue .mud-popover.mud-popover-bottom {
    /*    top: 100%;
    left: 50%;*/
}

#Menu_Catalogue {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

header span.Badge_Panier span.mud-badge-badge {
    left: calc(100% - 20px) !important;
    top: calc(100% - 20px) !important;
}
/*******************RESPONSIVE******************/

@media only screen and (max-width : 768px) {
    div#Div_Contenu {
        margin-top: 10px;
        width: calc(100% - 20px);
        
    }
}

@media only screen and (max-width : 375px) {

    div#Div_Contenu {
        padding: 0 !important;
        width: calc(100% - 10px);
        margin: auto;
        margin-top: 10px;
    }
}