.main {
    position:relative;
    width:100%;
    height:auto;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    align-items:center;
    
}

h1 {
    width:99%;
    max-width:1700px;
    font-size:2.2em;
    font-weight:bold;
    margin: 0px 0px 10px 0px;
    text-align:left;
}

section {
    position:relative;
    width:99%;
    max-width:1700px;
       }


.principal {
    position:relative;
    width:99%;
    display:flex;
    flex-wrap:wrap;
    }

.liste_article_container {
    width:calc(100% - 440px);
    }

.liste_article {
    width:calc(100% - 40px);
    margin-right:20px;
    display:flex;
    flex-direction:column;
    color:var(--normal);
        }

.liste_article .ajoutpanier {
    width:calc(100% - 20px);
    padding:10px;
    background:var(--cyanclair);
    display:flex;
    flex-direction:column;
    }
.liste_article .ajoutpanier .titre {
    width:100%;
    height:30px;
    font-size:1.6em;
    font-weight:bold;
}
.liste_article .ajoutpanier .ligne {
    width:100%;
    height:35px;
    display:flex;
}
.liste_article .ajoutpanier .ligne .reference {
    width:calc(100% - 250px);
    max-width:240px;
    }
.liste_article .ajoutpanier .ligne .quantite {
    margin-left:20px;
    width:100px;
    }
.liste_article .ajoutpanier .ligne .ajouter {
    margin-left:20px;
    width:200px;
    height:35px;
       }

.liste_article .ligne_echantillon {
    width:calc(100% - 10px);
    padding:15px 0px;
    background:#ffffff;
    font-size:1.4em;
    color:var(--subtle1);
        }

.liste_article .ligneprod {
    width:calc(100% - 10px);
    padding:10px 0px;
    background:#ffffff;
    display:flex;
    flex-wrap:wrap;
    border-bottom:1px solid var(--border);
        }

.liste_article .ligneprod .delete {
    width:40px;
    height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.liste_article .ligneprod .boutondelete:hover {
    cursor:pointer;
}

.liste_article .ligneprod .imageart {
    position:relative;
    width:120px;
    padding:0px 10px;
    height:100px;
    border:1px solid var(--border);
    border-radius:6px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.liste_article .ligneprod .imageart .favori {
    position:absolute;
    top:5px;
    right:5px;
    width:20px;
    height:20px;
}

.liste_article .ligneprod .blocreference {
    width:calc(100% - 540px);
    max-width:750px;
    min-width:400px;
    padding:5px 10px;
    height:calc(100% - 20px);
    display:flex;
    flex-direction:column;
}
.liste_article .ligneprod .blocreference .reference {
    width:100%;
    height:25px;
    font-size:1.2em;
}
.liste_article .ligneprod .blocreference .libelle {
    width:100%;
    font-size:1.5em;
    font-weight:bold;
    }
.liste_article .ligneprod .blocreference .livraison {
    width:240px;
    margin-top:5px;
    height:30px;
    display:flex;
    align-items:center;
    }
.liste_article .ligneprod .blocreference .livraison .icone {
    width:40px;
    height:100%;
    display:flex;
    align-items:center;
    }
.liste_article .ligneprod .blocreference .livraison .texte {
    width:calc(100% - 40px);
    height:100%;
    font-size:1.3em;
    display:flex;
    align-items:center;
}


.liste_article .ligneprod .blocprixquant {
    width:330px;
    height:100%;
    display:flex;
    }
.liste_article .ligneprod .blocprixquant .labelvalue {
    width:110px;
    padding:5px 10px;
    height:calc(100% - 10px);
    display:flex;
    flex-direction:column;
    align-items:center;
   }

.liste_article .ligneprod .blocprixquant .widthunite {
    width:50px;
}
.liste_article .ligneprod .blocprixquant .labelvalue .label {
    width:100%;
    height:25px;
    font-size:1.2em;
    text-align:center;
}
.liste_article .ligneprod .blocprixquant .labelvalue .prixnet {
    width:100%;
    height:35px;
    font-size:1.8em;
    font-weight:bold;
    text-align:center;
}
.liste_article .ligneprod .blocprixquant .labelvalue .unite {
    width:100%;
    height:20px;
    font-size:1.1em;
    text-align:center;
    }

.liste_article .ligneprod .blocprixquant .labelvalue .form {
    width:100%;
    height:35px;
    display:flex;
    justify-content:center;
        }
.liste_article .ligneprod .blocprixquant .labelvalue .quantunite {
    width:100%;
    height:35px;
    font-size:1.6em;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
       }

.liste_article .ligneprod .blocinfos {
    width:calc(100% - 20px);
    padding:5px 10px;
    min-height:25px;
     display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4em;
    color:var(--rouge);
    font-weight:bold;
}

.recap_container {
    margin-top:-40px;
    width:400px;
   }

.recap {
    width:calc(100% - 30px);
    height:auto;
    padding:15px;
    background:#ffffff;
    border:2px solid var(--subtle2);
    color:var(--normal);
}

.recap .titre {
    position:relative;
    width:100%;
    font-size:2.0em;
    font-weight:bold;
}

.recap .titre .tpprix {
    position:absolute;
    right:0px;
    top:10px;
    font-size:0.6em;
    font-weight:normal;
}

.recap .ligne {
    width:100%;
    height:40px;
    display:flex;
    }
.recap .borderbottom {
    border-bottom:1px solid var(--border);
}
.recap .lignemax {
    height:50px;
}
.recap .lignemin {
    height:30px;
}
.recap .ligne .label {
    width:280px;
    height:100%;
    display:flex;
    align-items:center;
    font-size:1.4em;
}

.recap .ligne .valeur {
    width:120px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
   }
.recap .ligne .min {font-size:1.6em;}
.recap .ligne .min2 {font-size:1.4em;}
.recap .ligne .minbold {font-size:1.6em;font-weight:bold}
.recap .ligne .maxbold {font-size:2.2em;font-weight:bold;}
.recap .ligne .labelmax {font-size:1.8em;font-weight:bold}

.recap .promo {
    width:100%;
    height:auto;
    border-bottom:1px solid var(--border);
    display:flex;
    flex-direction:column;
    }
.recap .promo .label {
    width:100%;
    margin-top:10px;
    font-size:1.2em;
}

.recap .promo .ligne {
    width:100%;
    height:30px;
    padding:5px 0px;
    display:flex;
    justify-content:space-between;
}
.recap .promo .ligne .codepromo {
    width:180px;
    height:100%;
}
.recap .promo .ligne .boutonpromo {
    width:120px;
    margin-right:60px;
    height:26px;
    font-size:1.2em;
    font-weight:bold;
     }
.recap .promo .ligne .delete {
    width:40px;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
}
.recap .promo .ligne .labelpromo {
    width:200px;
    height:100%;
    display:flex;
    align-items:center;
    font-size:1.2em;
}
.recap .promo .ligne .valeur {
    width:120px;
    height:100%;
    display:flex;
    align-items:center;
    font-size:1.4em;
    font-weight:bold;
}

.recap .confcgv {
    margin-top:30px;
    width:100%;
    height:40px;
    display:flex;
}
.recap .confcgv .check {
    position:relative;
    margin-left:15px;
    margin-top:10px;
    width:40px;
    height:30px;
}
.recap .confcgv .label {
    width:320px;
    height:30px;
    font-size:1.2em;
}

.recap .valider {
    margin-top:30px;
    width:100%;
    height:50px;
    display:flex;
    justify-content:center;
}

.recap .valider .bouton {
    width:100%;
    height:50px;
    font-size:1.8em;
   }
.recap .valider .nodispo {
    opacity:0.5;
}


.modelivr {
    margin-top:10px;
    width:99%;
    display:flex;
    flex-direction:column;
    color:var(--normal);
    }
.modelivr .titre {
    width:100%;
    font-size:2.2em;
    font-weight:bold;
    margin-bottom:20px;
    }
.modelivr .content {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    column-gap:20px;
}
.modelivr .content .item {
    width:380px;
    max-width:95%;
    height:100px;
    margin-bottom:10px;
    padding:10px;
    border:1px solid var(--surface);
    border-radius:6px;
     display:flex;
    flex-direction:column;
}
.modelivr .content .item .ligne {
    width:100%;
    height:40px;
    display:flex;
    justify-content:space-between;
    }
.modelivr .content .item .ligne .picto {
    width:35px;
    height:40px;
    display:flex;
    align-items:center;
}
.modelivr .content .item .ligne .libelle {
    width:220px;
    height:40px;
    display:flex;
    align-items:center;
    font-size:1.4em;
    font-weight:bold;
}
.modelivr .content .item .ligne .prix {
    width:100px;
    height:40px;
    display:flex;
    align-items:center;
    font-size:1.4em;
    font-weight:bold;
}
.modelivr .content .item .ligne .check {
    margin-left:5px;
    width:25px;
    margin-top:20px;
    height:20px;
      }
.modelivr .content .item .descriptif {
    margin-top:5px;
    width:100%;
    font-size:1.2em;
}
.modelivr .content .item .relais {
    width:100%;
    font-size:1.4em;
    font-weight:bold;
}

.adresselivr {
    margin-top:20px;
    width:100%;
    display:flex;
    flex-direction:column;
    color:var(--normal);
        }
.adresselivr .titre {
    width:100%;
    font-size:2.1em;
    font-weight:bold;
    margin-bottom:20px;
    }
.adresselivr .content {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    column-gap:20px;
}
.adresselivr .content .item {
    position:relative;
    width:380px;
    height:auto;
    padding:10px;
    margin-bottom:10px;
    border:1px solid var(--surface);
    border-radius:6px;
    display:flex;
    flex-direction:column;
}
.adresselivr .content .item .edit {
    position:absolute;
    top:8px;
    right:8px;
    width:25px;
    height:25px;
    cursor:pointer;
}
.adresselivr .content .item .save {
    position:absolute;
    top:8px;
    right:8px;
    width:75px;
    height:25px;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.2em;
    color:#ffffff;
    background:var(--surface);
    border-radius:6px;
}

.adresselivr .content .item .label {
    width:100%;
    margin-bottom:10px;
    font-size:1.3em;
    font-weight:bold;
    color:var(--surface);
}
.adresselivr  .labelform {
    width:100%;
    display:flex;
    flex-direction:column;
    color:var(--normal);
    margin:10px 0px;
}
.adresselivr  .labelform .label {
    width:100%;
    font-size:1.3em;
    font-weight:bold;
    }
.adresselivr  .labelform .form {
    width:100%;
    margin-top:-5px;
    height:35px;
    display:flex;
    justify-content:space-between;
    }
.adresselivr  .labelform .formval {
    width:100%;
    margin-top:-10px;
    font-size:1.5em;
    display:flex;
    }

/* RELAIS COLIS */
#relais_colis {
    width:100%;
    display:flex;
    flex-direction:column;
}

#relais_colis .item {
    width:calc(100% - 20px);
    padding:10px;
    height:80px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    color:var(--normal);
}
#relais_colis .item .colonne1 {
    width:calc(100% - 310px);
    height:100%;
    display:flex;
    flex-direction:column;
}
#relais_colis .item .colonne1 .libelle {
    width:100%;
    margin-bottom:10px;
    font-size:1.5em;
    font-weight:bold;
}
#relais_colis .item .colonne1 .adresse {
    width:100%;
    margin-bottom:10px;
    font-size:1.3em;
    }
#relais_colis .item .colonne2 {
    width:150px;
    height:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
#relais_colis .item .colonne2 .label {
    width:100%;
    font-size:1.2em;
    }
#relais_colis .item .colonne2 .distance {
    width:100%;
    font-size:1.6em;
    font-weight:bold;
}
#relais_colis .item .colonne3 {
    width:160px;
    height:40px;
    }
#relais_colis .item .colonne3 .choisir {
    width:100%;
    height:100%;
    background:var(--cyanclair);
    border:2px solid var(--surface);
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4em;
    }
#relais_colis .item .colonne3 .choisir:hover {
    cursor:pointer;
    opacity:0.7;
}


@media (max-width: 1000px) {
    .main {width:calc(100% - 10px);margin:auto;}
    .liste_article_container {width:100%;}
    .recap_container {width:100%;margin-top:10px;}
    .liste_article {width:100%;}
    .liste_article .ligneprod {flex-wrap:wrap;width:100%;}
    .liste_article .ligneprod .delete {width:30px;}
    .liste_article .ligneprod .imageart {width:50px;}
    .liste_article .ligneprod .blocreference {width:calc(100% - 110px);min-width:0px;padding:5px 0px 5px 5px;height:auto;}
    .liste_article .ligneprod .blocreference .reference {height:20px;}
    .liste_article .ligneprod .blocprixquant {width:100%;justify-content:space-around;height:auto;}

    
}

@media (max-width: 480px) {
    .adresselivr .content .item {width:330px}
}