/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Retirer la croix de suppression des input de type search de Firefox */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }

/* Retirer la croix de suppression des input de type search de Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }


/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* couleurs */

:root {
    --blanc:       #FCFCFC;
    --bleu-1:      #63BAFF;
    --bleu-2:      #3072C7;
    --gris-1:      #464646;
    --gris-2:      #8C8C8C;
    --gris-3:      #C2C2C2;
    --gris-4:      #D3D3D3;
    --jaune:       #D6BE4E;
    --marron:      #D18B3A;
    --noir:        #212121;
    --noirRGB:     #000000;
    --rose:        #FF5562;
    --rouge:       #FF0000;
    --transparent: #00000000;
    --vert:        #10c107;
}

.blanc {
    color: var(--blanc);
}

.bleu-1 {
    color: var(--bleu-1);
}

.bleu-2 {
    color: var(--bleu-2);
}

.noir {
    color: var(--noir);
}

.rouge {
    color: var(--rouge);
}

.vert {
    color: var(--vert);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* balises */

a {
    text-decoration: none;
    transition: opacity 2s ease;
}

a:hover, button:hover {
    color: var(--bleu-1);
}

a.bg-b1:hover, button.bg-b1:hover {
    background: var(--bleu-2);
}

body {
    width: 100%;
    /*height: auto;*/

    margin: 0;
    padding: 0;

    position: absolute;

    font-family: DM Sans,sans-serif;
}

body div.w-50.p-f {
    box-shadow: 0 0 10px 8px black;
}

body div.w-100.h-100 {
    top: 0;
    left: 0;
    background-color: #2121214d;
}

button, select {
    border: none;
}

button:hover, input:hover, select {
    cursor: pointer;
}

button:disabled {
    color: var(--gris-2);
    cursor: not-allowed;
}

button#selected {
    outline: solid 3.5px black;
}

del {
    text-decoration-thickness: 1px;
    color: #FF0000;
}

footer {
    max-width: 100%;
    padding: 5%;
    display: flex;

    vertical-align: top;

    color: var(--blanc);
    background-color: var(--noir);

    flex-wrap: wrap;
}

footer a {
    color: var(--blanc);
}

/* La première partie du footer sera à gauche */
footer div:first-child {
    width: 20%;
}

/* La deuxième partie du footer sera en haut */
footer div:nth-child(2) {
    width: 54%;
    padding-left: 3%;
    padding-right: 3%;
}

/* La troisième partie du footer sera à droite */
footer div:nth-child(3) {
    width: 20%;

    text-align: right;
}

/* La 4ème partie du footer sera en dessous des 3 premières parties */
footer div:nth-child(4) {
    text-align: left;

    width: 50%;
}

/* La 5ème partie du footer sera en dessous des 3 premières parties mais à la suite de la 4ème mais*/
footer div:last-child {
    width: 50%;

    text-align: right;
}

/* Affecte la liste de puces */
footer div ul {
    width: 19.5%;

    padding: 0;

    display: inline-block;

    vertical-align: top;

    list-style-type: none;
}

/* Aggrandissement de la taille de la police sur la 3ème colone de la 2ème section */
footer div ul:nth-child(3) {
    width: 17%;
}

/* Affecte les puces */
footer div ul li {
    font-size: 1.2rem;
    font-weight: bold;
}

/* Affecte la liste des sous-puces */
footer div ul li ul {
    width: 100%;
}

/* Affecte les sous-puces */
footer div ul li ul li {
    padding-top: 15px;

    font-size: 0.8rem;

    font-weight: normal;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.25rem;
}

header {
    width: 100%;
    display: flex;
    position: fixed;
    background-color: var(--blanc);
    z-index: 2;

    /* Je veux mettre les puces au milieu */
    justify-content: center;
}

header a {
    color: var(--noir);
}

header div:nth-child(1) {
    width: 20%;
}

header div:nth-child(2) {
    width: 60%;
}

header div:nth-child(3) {
    width: 20%;
}

header div a {
    display: flex;

    justify-content: center;
    align-items: center;
}

html {
    scroll-behavior: smooth;
    scroll-behavior: 5s; /* Vous pouvez ajuster la durée en secondes selon vos préférences */
}

img.fond {
    position: fixed;
    z-index:-1;
}

img.logo {
    border: 1px solid var(--gris-4);
}

input {
    box-sizing: border-box;
}

/* Retirer les flèches des input number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

input[name=option] {
    transform: scale(2);
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="search"] {
    outline: none;
    border: none;
}

input.quantite {
    cursor:default;
    outline:none;
    border:none;
    font-family: DM Sans,sans-serif;
    font-size: 2rem;
    font-weight:bold;
}

/* menu déroulant (header) */
menu {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    display: flex;
}

/* menu déroulant des liens dans les puces */
menu a {
    width: 100%;
    height: 100%;
}

/* menu déroulant des puces  sosu le curseur */
menu a:hover {
    background-color: var(--noir);
}

menu input {
    width: 100%;
    height: 100%;

    /* alignement center millieu */
    text-align: center;
}

/* menu déroulant des puces */
menu li {
    display: block;

    border: solid var(--gris-4) 1px;

    text-align: center;

    flex-grow: 1;

    list-style: none;
}

/* menu déroulant de la liste des sous-puces */
menu li ul {
    width: 100%;

    margin: 0;
    padding: 0;

    display: none;
    position: absolute;

    background-color: var(--blanc);
}

menu li ul li {
    line-height: 3rem;
}

select, option {
    font-family: DM Sans,sans-serif;
    font-weight: bold;
}

table.tri thead tr th:hover {
    cursor: pointer;
}

textarea {
    max-width: 250px;
    max-height: 250px;
}

#RechercheAffiche {
    right: 20%;
}

#ListePanier, #AuthAffiche, #InviteAffiche {
    right: 0;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* width */

.w-5 {
    width: 5%;
}

.w-10 {
    width: 10%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-30 {
    width: 30%;
}

.w-33 {
    width: 33.33%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-65 {
    width: 65%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-100 {
    width: 100%;
}

.mw-15 {
    max-width: 15%;
}

.mw-100 {
    max-width: 100%;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* height */

.h-10 {
    height: 10%;
}

.h-40 {
    height: 40%;
}

.h-50 {
    height: 50%;
}

.h-60 {
    height: 60%;
}

.h-100 {
    height: 100%;
}

.h-2rem {
    height: 2rem;
}

.h-3rem {
    height: 3rem;
}

.h-5rem {
    height: 5rem;
}

.h-a {
    height: auto;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* margin */

.m-0 {
    margin: 0;
}

.m-1 {
    margin: 1%;
}

.m-5 {
    margin: 5%;
}

.m-10 {
    margin: 10%;
}

.m-20 {
    margin: 20%;
}

.mb--10 {
    margin-bottom: -10%;
}

.mb-0 {
    margin-bottom: 0%;
}

.mb-1 {
    margin-bottom: 1%;
}

.mb-2 {
    margin-bottom: 2%;
}

.mb-1rem {
    margin-bottom: 1rem;
}

.ml-0 {
    margin-left: 0;
}

.ml-1 {
    margin-left: 1%;
}

.ml-2 {
    margin-left: 2%;
}

.ml-5 {
    margin-left: 5%;
}

.ml-10 {
    margin-left: 10%;
}

.ml-15 {
    margin-left: 15%;
}

.ml-20 {
    margin-left: 20%;
}

.ml-25 {
    margin-left: 25%;
}

.ml-45 {
    margin-left: 45%;
}

.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: 1%;
}

.mr-10 {
    margin-right: 10%;
}

.mr-20 {
    margin-right: 20%;
}

.mr-25 {
    margin-right: 25%;
}

.mt-0 {
    margin-top: 0%;
}

.mt-1 {
    margin-top: 1%;
}

.mt-2 {
    margin-top: 2%;
}

.mt-5 {
    margin-top: 5%;
}

.mt-15 {
    margin-top: 15%;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* padding */

.p-0 {
    padding: 0;
}

.p-1 {
    padding: 1%;
}

.p-2 {
    padding: 2%;
}

.p-2_5 {
    padding: 2.5%;
}

.p-3 {
    padding: 3%;
}

.p-5 {
    padding: 5%;
}

.p-25 {
    padding: 25%;
}

.pb-0 {
    padding-bottom: 0%;
}

.pb-1 {
    padding-bottom: 1%;
}

.pb-2_5 {
    padding-bottom: 2.5%;
}

.pb-5 {
    padding-bottom: 5%;
}

.pb-15 {
    padding-bottom: 15%;
}

.pl-0 {
    padding-left: 0%;
}

.pl-2 {
    padding-left: 2%;
}

.pl-5 {
    padding-left: 5%;
}

.pl-10 {
    padding-left: 10%;
}

.pr-2 {
    padding-right: 2%;
}
.pr-5 {
    padding-right: 5%;
}

.pr-10 {
    padding-right: 10%;
}

.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: 1%;
}

.pt-2_5 {
    padding-top: 2.5%;
}

.pt-5 {
    padding-top: 5%;
}

.pt-7_5 {
    padding-top: 7.5%;
}

.pt-1rem {
    padding-top: 1rem;
}

.pt-6rem {
    padding-top: 6rem;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* display */

.d-b {
    display: block;
}

.d-f {
    display: flex;
}

.d-n {
    display: none;
}

.d-tr {
    display: table-row;
}

.fd-c {
    flex-direction: column;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* background */

.bg-b {
    background: var(--blanc);
}

.bg-n {
    background: var(--noir);
}

.bg-nRGB {
    background: var(--noirRGB);
}

.bg-g3 {
    background: var(--gris-3);
}

.bg-b1 {
    background: var(--bleu-1);
}

.bg-b2 {
    background: var(--bleu-2);
}

.bg-t {
    background: var(--transparent);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* border */

.b-n {
    border: solid var(--noir) 0.1rem;
}

.bt-n {
    border-top: solid var(--noir) 0.1rem;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* border-radius */

.br-50 {
    border-radius: 50%;
}

.br-0_8rem {
    border-radius: 0.8rem;
}

.br-1rem {
    border-radius: 1rem;
}

.btl-1rem {
    border-top-left-radius: 1rem;
}

.btr-1rem {
    border-top-right-radius: 1rem;
}

.bbl-1rem {
    border-bottom-left-radius: 1rem;
}

.bbr-1rem {
    border-bottom-right-radius: 1rem;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* limit*/

.limit {
    word-wrap: break-word;
}

/* font */

.fs-130 {
    font-size: 130%;
}

.fs-0_9rem {
    font-size: 0.9rem;
}

.fs-1rem {
    font-size: 1rem;
}

.fs-1_25rem {
    font-size: 1.25rem;
}

.fs-1_75rem {
    font-size: 1.75rem;
}

.fs-2rem {
    font-size: 2rem;
}

.fw-b {
    font-weight: bold;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* align */

.ta-c {
    text-align: center;
}

.ta-j {
    text-align: justify;
}

.ta-r {
    text-align: right;
}

.va-m {
    vertical-align: middle;
}

.jc-sb {
    justify-content: space-between;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* position */

.p-a {
    position: absolute;
}

.p-f {
    position: fixed;
}

.p-r {
    position: relative;
}

.p_b-38 {
    bottom: 38%;
}

.p_b-50 {
    bottom: 50%;
}

.p_l-45 {
    left: 45%;
}

.p_t-60 {
    top: 60%;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* table */

.table {
    border-collapse: collapse;
    border-spacing: 1rem;
}

.table-responsive {
    overflow-x: auto;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Afficher selon la résolution (responsive design) */

@media (min-width: 1200px) {
    .mobileAffiche { display:none; }
    
    .mobileCache { display:block; }

}
@media (max-width: 1200px) {

    .liste {
        margin-left: 4%;
        width: 46%;
    }

    .listeSuite {
        width: 46%;
    }

    .responsive { display:none; }

    .mobileAffiche { display:block; }
    
    .mobileCache { display:none; }

    .mobile, td, th {
        font-size: x-small;
    }

    button.p_l-45 {
        font-size: x-small;
    }

    button.p_b-50 {
        bottom: 46%;
    }

    button.p_b-36.mobile {
        bottom: 24%;
    }

    button.p_b-38 {
        bottom: 34%;
    }

    button.p_b-38.p_l-45 {
        bottom: 30%;
    }

    button.p_t-60 {
        top: 64%;
    }

    div.mobile {
        display: block;
    }

    h1.mobile {
        font-size: x-large;
    }

    h2.m-0.mobile {
        font-size: medium;
    }

    img.mobile {
        max-width: 60%;
        border-radius: 0.4rem;
    }
    
    input.mobile {
        width: 80%;
        font-size: x-small;
    }

    input.mobile::placeholder {
        font-size: 0px;
    }

    p.mobile {
        margin-left: 0%;
        font-size: 0.3rem;
    }

    select.mobile {
        width: 80%;
    }

    table.mobile {
        width: 50%;
    }

    header div:nth-child(1) { width: 50%; }

    header div:nth-child(2) { width: 40%; }

    header div:nth-child(3) { width: 30%; }

    footer div:nth-child(1) { width: 60%; }

    footer div:nth-child(3) { width: 40%; }

    footer div:nth-child(4) { width: 100%; }

    footer div:nth-child(5) { width: 100%; }

    menu li ul li { line-height: 3rem; }

    #ListePanier, #AuthAffiche, #InviteAffiche {
        width: 58.3%;
        right: 0;
    }

    #RechercheAffiche {
        right: 0;
        width: 58.3%;
    }

    /*div.contenu {
        display: block;
    }

    div.contenu div.w-50 {
        width: 100%;
    }

    p.contenu {
        width: 100%;
    }*/
}

@media (max-width: 700px){

    menu li ul li { line-height: 1.5rem; }

    .mobileAffiche { display:block; }
    
    .mobileCache { display:none; }

    footer div:nth-child(1) { width: 100%; }

    footer div:nth-child(3) {
        text-align: left;
        width: 100%; }

    footer div:nth-child(4) { width: 100%; }

    footer div:nth-child(5) {
        text-align: left;
        width: 100%; }
}