/************* Navigation panier *************/
.navigation-checkout {margin: 20px 0 40px;  display: flex;flex-direction: row;}
.navigation-checkout a.item {transition:none!important;border-top: 1px solid #c3c3c3;border-bottom: 1px solid #c3c3c3;background:#f4f4f4;color:#333; display: flex;justify-content: center;align-items: center;width:25%;padding:20px; text-transform: uppercase;; font-weight: 700}
.navigation-checkout a.item:first-of-type{border-left:1px solid #c3c3c3}
.navigation-checkout a.item:last-of-type{border-right:1px solid #c3c3c3}
.navigation-checkout a.item.active {background:#5b5c43; position:relative; color:#fff}
.navigation-checkout a.item.active:not(:last-of-type)::after {content:"";width: 0;height: 0;border-style: solid;border-width: 31px 0 31px 30px;border-color: transparent transparent transparent #5b5c43;right:-30px; position:absolute}
.navigation-checkout a.item:hover {text-decoration: none}

/************* Détail du panier de commande *************/
.descriptif-panier {padding:30px}
.descriptif-panier h2 {margin-bottom: 30px}
.descriptif-panier h2 .nb-produits {font-size: 20px}

/************* Récapitulatif bloc  *************/
.recap {background:#f4f4f4; padding:20px}
.recap .bloc {padding: 20px 0}
.recap .bloc h3 {margin-bottom: 20px}
.recap .bloc .item {display:flex; flex-direction: row; justify-content: space-between}
.recap .bloc .item.total {margin-top:12px; padding-top:12px; border-top:1px solid #c3c3c3}
.recap .bloc .item .sous-titre.bold {font-weight: 700;}
.frais-livraison {margin: 20px 0}
.frais-livraison span {margin-bottom: 10px; display: block; font-size: 14px}
.frais-livraison input {border-radius: 0;}
.frais-livraison button{border-radius: 0;}
.frais-livraison .input-group>.form-control:focus {background: inherit;border:1px solid #c3c3c3}

/*********** Quantite ***********/
.descriptif-panier .details .quantite {width: 100px;margin: 10px 0}
.descriptif-panier .form-control {border-radius: 0}
.descriptif-panier .form-control:focus {box-shadow:none!important; border-color:#c3c3c3}

/********** Tableau **********/
.table-panier .produit {display:flex; flex-direction: row;}
.table-panier .produit:hover {text-decoration: none}
.table-panier .produit img {border: 1px solid #c3c3c3;padding: 15px; background:#fff;height: 120px;width: 120px;object-fit: contain;}
.table-panier .produit .infos {display:flex; flex-direction: column; justify-content: flex-start; margin-left:20px}
.table-panier .produit .infos .titre  {color:#5b5c43; font-weight: 700; text-transform: uppercase; font-size:19px;line-height: 1.2; margin-bottom: 10px}
.table-panier .produit .infos .ref {font-style: italic; color:#777; font-weight: 500}
.table-panier .details, .table-panier .prix-produit{display:flex; flex-direction: column;}
.table-panier .prix-produit .prix-promo {display:flex; align-self: flex-start; font-weight: 400; font-size: 15px;text-decoration: line-through}
.table-panier .prix-produit .prix {margin-bottom:10px; font-weight: 700; color:#333}
.table-panier .prix-produit .prix.highlight {color:#CC0404}
.table-panier .prix-produit .prix-ht {margin-bottom:10px; font-weight: 700; color:#888}
.table-panier .table td {padding:20px!important;}
.table-panier .table td, .table-panier  .table th {padding: .75rem;vertical-align: top;background: #fff;}
.table-panier .table thead th {vertical-align: bottom;background: #fff;text-transform: uppercase;color: #333;}
.table-panier .table .th-produit {width:40%}
/*** Actions ***/
.table-panier .action button {margin-bottom: 7px; text-transform: uppercase; font-size:15px}
.table-panier .action button.btn-edit {background:transparent; border:none; color:#888;font-size: 20px;}
.table-panier .action button.btn-delete {background:transparent; border:none; color:#CC0404; font-size: 12px }
/**** Affichage des couleurs ***/
.table-panier .details span.couleur {display:flex; flex-direction: row; align-items: center}
.table-panier .details span.couleur .pastille-couleur {height:20px; width:20px; display: inline-block; margin-left:5px; border:1px solid #333}
/** Exemple **/
.table-panier .details span.couleur .pastille-couleur.rouge {background:#CC0404;}

/********** Checkout identification **********/
.checkout-identification {padding:30px;}
.checkout-identification .connexion-inscription {padding:0}

/********** Checkout livraison **********/
.checkout-livraison {padding:30px;}
.checkout-livraison .livraison .adresse-groupe {display: flex; flex-direction: row;width:100%; margin: 10px 0}
.checkout-livraison .livraison .adresse-groupe .input-group-prepend { width: 10%;display: flex;justify-content: center;align-items: center;background: #E8E8E8;}
.checkout-livraison .livraison .adresse-groupe .input-group-prepend .input-group-text {background: none;border: none;}
.checkout-livraison .livraison .adresse-groupe .adresse{width:90%}
.checkout-livraison .livraison .adresse {background:#f4f4f4; color:#333;display: flex; flex-direction: row}
.checkout-livraison .livraison .adresse .choice {height:100%; width:20%;background:#c3c3c3; }
.checkout-livraison .livraison .adresse .infos {display: flex; flex-direction: column; padding:20px}
.checkout-livraison .livraison .adresse .infos .titre {font-weight: 800; text-transform: uppercase; font-size: 17px}
.checkout-livraison .livraison .adresse .actions {padding:20px; right: 20px;position: absolute; }
.checkout-livraison .livraison .adresse .actions a {color:#333; font-size: 14px}
.checkout-livraison .livraison .nouvelle-adresse {margin-top:20px}
.checkout-livraison .livraison .nouvelle-adresse form {width:100%;margin-top:20px}
.checkout-livraison .livraison .nouvelle-adresse form .btn.btn-send {background:#888; border-radius: 0; color:#fff;}
.checkout-livraison .livraison .nouvelle-adresse a.btn {background:#98B13D; border-radius: 0; padding:10px 15px;color:#fff;}
.checkout-livraison .livraison .mode {margin-top:20px; background:#f4f4f4; padding:20px;width:100%}

/********** Checkout Paiement **********/
.checkout-paiement {padding:30px;}
.checkout-paiement .paiement {margin-top:20px; padding: 30px 0}
.checkout-paiement .paiement .moyen-paiement{display: flex;flex-direction: column;justify-content: center;align-items: center; }
.checkout-paiement .paiement .moyen-paiement .liste {display: flex; flex-direction: row;justify-content: center;align-items: center; }
.checkout-paiement .paiement .moyen-paiement .liste .form-check {display: flex; flex-direction: row; align-items: center; margin: 0 20px;}
.checkout-paiement .paiement .moyen-paiement span {font-weight: 700; margin-bottom: 12px; display: inline-block}
.checkout-paiement .paiement .moyen-paiement label img {  width: 50px;height: 40px;object-fit: contain;}
.checkout-paiement .paiement form {margin-top:20px}
.checkout-paiement .paiement form .form-group.inline label {width:50%}
.checkout-paiement .paiement form .buttons-group {display: flex; flex-direction: row; justify-content: flex-end}
.checkout-paiement .paiement form .buttons-group .btn {margin-left: 10px; border-radius: 0;}
.checkout-paiement .paiement form .buttons-group .btn-pay {background:#98B13D; padding:10px 20px; color:#fff}

/********** Checkout Confirmation **********/
.checkout-confirmation {padding:30px;}
.checkout-confirmation .confirmation {display:flex;padding:20px; flex-direction: column;border-top: 10px solid #f4f4f4;}
.checkout-confirmation .confirmation .btn-download {background: #98B13D;padding: 10px 20px;color: #fff;align-self: flex-end;text-align: center;width: 250px;}
.checkout-confirmation .confirmation .btn-download:hover{text-decoration: none}
.checkout-confirmation .confirmation .recapitulatif {padding: 10px}
.checkout-confirmation .confirmation .recapitulatif .table-panier .produit img {height:65px; padding:5px}
.checkout-confirmation .confirmation .recapitulatif .table-panier .table .th-produit {width:inherit}
.checkout-confirmation .confirmation .recapitulatif .table-panier .table .th-total, 
.checkout-confirmation .confirmation .recapitulatif .table-panier .table td.prix {text-align: right}

.checkout-confirmation .confirmation .recap-total {background:#f4f4f4; padding:15px; display: flex; flex-direction: column; }
.checkout-confirmation .confirmation .recap-total .item {display:flex; flex-direction: row;justify-content: space-between}
.checkout-confirmation .confirmation .recap-total .item.total {font-weight: 700; margin-top:8px;}

.checkout-confirmation .confirmation .recap-bloc {display:flex;flex-direction:column;border:1px solid #c3c3c3; padding:15px;}
.checkout-confirmation .confirmation .recap-bloc .titre {font-size:14px;text-transform: uppercase; border-bottom:1px solid #c3c3c3; padding-bottom:5px}
.checkout-confirmation .confirmation .recap-bloc .contenu {display:flex;flex-direction:column;margin-top:10px; font-size: 14px}