/* Minification failed. Returning unminified contents.
(28,11): run-time error CSS1030: Expected identifier, found '#layoutInscriptionWebshop'
(34,40): run-time error CSS1031: Expected selector, found ')'
(34,40): run-time error CSS1025: Expected comma or open brace, found ')'
(292,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(293,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(303,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(308,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(345,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(369,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(395,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(424,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(433,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(583,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(584,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(671,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(673,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(687,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(688,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(702,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(726,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(740,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(762,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(763,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(778,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(795,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(796,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(826,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(839,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(856,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(924,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(995,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1054,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1076,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(1077,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1102,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1108,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(1109,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1185,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(1187,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(1256,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(1257,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1265,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(1266,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1305,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(1306,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1314,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(1332,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1337,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1338,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(1343,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1344,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(1401,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1405,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(1619,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire50Pourcent'
(1620,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire50Pourcent'
(1628,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire50Pourcent'
(1629,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire50Pourcent'
(1634,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1649,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1651,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1685,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1705,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1716,32): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1818,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1823,21): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(1852,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1875,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1888,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1943,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(1986,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire50Pourcent'
(1999,23): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2057,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2146,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2164,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(2165,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2173,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2220,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2226,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(2227,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2307,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2308,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2379,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2393,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2524,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2531,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(2542,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(2543,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(2580,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2612,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(2797,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2809,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2826,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2839,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2886,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(2899,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(3033,37): run-time error CSS1030: Expected identifier, found '#slideshow-main'
(3033,53): run-time error CSS1031: Expected selector, found ')'
(3033,53): run-time error CSS1025: Expected comma or open brace, found ')'
(3067,32): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3186,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3187,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3203,32): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(3220,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3253,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3266,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3267,18): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3271,21): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(3278,32): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(3431,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(3442,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(3454,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(3487,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3624,17): run-time error CSS1039: Token not allowed after unary operator: '-column-label-grey'
(3645,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3661,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3670,21): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(3677,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire20Pourcent'
(3682,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(3710,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(3726,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3732,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3752,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3770,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3771,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3781,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(3796,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(3861,26): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(3884,26): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(3894,21): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(3895,26): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(4041,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4160,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4161,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4178,32): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(4197,26): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4209,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(4218,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(4229,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(4264,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(4346,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4356,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(4364,21): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(4383,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4398,26): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(4487,32): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4488,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4500,21): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4505,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4515,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4519,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4533,26): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4539,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4544,26): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(4550,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4552,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4556,26): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(4594,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(4685,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4686,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4784,32): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4933,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4944,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(4945,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(4960,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(5070,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(5071,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(5072,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(5088,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(5089,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(5108,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire50Pourcent'
(5109,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire50Pourcent'
(5110,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(5140,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(5146,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(5169,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(5193,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(5960,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(5961,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(5973,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(5974,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(5994,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(5995,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6090,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6091,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6106,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6107,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6281,21): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6550,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6630,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6633,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(6664,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6667,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(6673,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(6678,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(6684,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6691,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(6708,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6714,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(6724,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(6736,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(6830,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6831,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6841,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6923,24): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6929,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(6930,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(6956,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
(6969,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(6970,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(7169,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(7170,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(7184,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(7187,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(7200,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire10Pourcent'
(7207,28): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(7209,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-theme'
(7210,17): run-time error CSS1039: Token not allowed after unary operator: '-couleur-texte'
(7221,22): run-time error CSS1039: Token not allowed after unary operator: '-couleur-secondaire85Pourcent'
 */
@font-face {
    font-family: 'Nunito-Regular';
    src: url('/ressource/police/Nunito/Nunito-Regular.ttf');
}
@font-face {
    font-family: 'Nunito-SemiBold';
    src: url('/ressource/police/Nunito/Nunito-SemiBold.ttf');
}
@font-face {
    font-family: 'Nunito-Bold';
    src: url('/ressource/police/Nunito/Nunito-Bold.ttf');
}
html {
    margin: 0px;
}
html, body, #contenuPage, #contenuPanier {
    height: 100%;
}
body {
    display: block;
    margin: 0px;
    width: 100%;
    background: #fff;
    font-family: 'Nunito-Regular';
}

/* Désactive le scroll du body si le popup est affiché */
body:has( #layoutInscriptionWebshop[style*="display: block"],
#layoutPopupConditionGeneral[style*="display: block"], 
#layoutSupprimerWebshop[style*="display: block"],
#layoutPopupRecapAjoutPanier[style*="display: block"], 
#layoutPopupMiseAJourPanier[style*="display: block"], 
#layoutAlerte[style*="display: block"], 
#fenetreLogin[style*="display: block"] ) {
    overflow: hidden !important;
}

input, textarea, select, button {
    font-family: 'Nunito-Regular' !important;
}

/* Style du bouton de suppression : apparence moderne, fond blanc, texte gris souligné, police Nunito, alignement à gauche, curseur pointeur, décalage à droite. */
.boutonSupperession {
    line-height: 20px !important;
    text-align: left !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    background: #fff;
    color: #65656C;
    height: 40px;
    border: #fff;
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-decoration-color: #65656C;
    text-decoration-line: underline;
    position: relative;
    right: 5px;
}

input:disabled {
    opacity: 0.7;
}
select:focus-visible, input:focus-visible {
    outline: none;
}
select {
    /*background: url(/ressource/image/webshop/templatePersonnalise/fleche_bas.png) no-repeat scroll 98% 8px #fff !important;*/
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

#contenuPage {
    min-width: 1200px;
    margin: 0 auto;
    max-width: 1440px;
}
#contenuBlockBas {
    width: 1440px;
    border: 1px solid #E5E5E5;
    border-top: 0;
    border-bottom: 0;
    display: inline-block;
}
#monCompte {
    display: inline-block;
    position: relative;
    width: 350px;
    height: 60px;
    background: #fb9b00;
    color: White;
}
#blockGauche {
    float: left;
    width: 240px;
    position: relative;
    z-index: 5;
    margin-left: 7px;
    margin-top: 13px;
    margin-bottom: 30px;
}

    /* Séparateur de filtre dans le bloc gauche : affiché en tant que bloc. */
    #blockGauche hr#separateurFiltre {
        display: block;
    }

#blockDroite {
    display: inline-block;
    position: relative;
    width: 1180px;
    margin-left: 13px;
    min-height: 800px;
}
#footerBas {
    color: #777777;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    background: #fff;
}
#footerWebshop {
    border: 1px solid #E5E5E5;
    width: 1440px;
    position: relative;
    height: auto;
    border-top: 0;
    padding-top: 30px;
}
#footerContent {
    min-height: 112px;
    padding: 20px 0;
    background: #F9F9F9;
    display: inline-flex;
    width: 100%;
}
#footerWebshop .col-lg-offset-4 {
    float: left;
    width: 35%;
    padding: 0 15px;
    min-height:112px;
}
#footerWebshop label {
    width: 100%;
    display: block;
    text-align: left;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    color: #5A5A5A;
    text-transform: uppercase;
    margin-bottom: 15px;
}
#footerWebshop span.infosLabel, #footerWebshop span.infosLabel a {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0em;
    text-align: left;
    color: #777777;
    display: block;
    cursor: pointer;
    text-decoration:none;
}

/* Style des liens : pas de soulignement, couleur gris foncé. */
a {
    text-decoration: none;
    color: #595959;
}

/* Icônes téléphone et email : taille 16px, alignées au milieu, marge à droite de 5px. */
.iconPhoneInfo, .iconEmailInfo {
    height: 16px;
    width: 16px;
    vertical-align: middle;
    margin-right: 5px;
}

/*display none*/
.conteneurAideDragDrop {
    display: none;
    position: relative;
}
.aideDragDrop {
    position: absolute;
    top: 4px;
    left: 29px;
    background: #ccdb9b;
    padding: 5px;
    display: none;
}

#fenetreAccesMobile {
    display: none;
    width: 455px;
    height: auto;
    margin: -100px 0 0 -300px;
}
.contenuPopupLogin {
    position: fixed;
    z-index: 11;
    display: none;
    background: #fff;
    top: 20%;
    left: 40%;
    width: 480px;
    height: 275px;
}
#alerteReinitialiserRenommageColonne {
    display: none;
    width: 600px;
    margin: -100px 0 0 -300px;
    background: #fff;
    border: 1px solid #555555;
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 14;
    box-shadow: 0 0 5px 2px #b3b3b3;
    -moz-box-shadow: 0 0 5px 2px #b3b3b3;
    -webkit-box-shadow: 0 0 5px 2px #b3b3b3;
}

.messageConditionGeneral {
    display: none;
}


.quantitePanierMosaique {
    width: 50px;
    height: 50px;
    font-size: 14px;
    border-radius: 30px;
    position: absolute;
    top: 7px;
    left: 7px;
    line-height: 33px;
    text-align: center;
    color: #ffffff;
    box-shadow: 1px 1px 3px 0px #2a294666;
    font-weight: 600;
    font-family: 'Nunito-Regular';
    font-style: normal;
}

.unProduit .parEmballage {
    background: url(/ressource/image/webshop/templatePersonnalise/emballage.png) no-repeat center 26px #FF8945;
    border: 2px solid #fff;
}

.unProduit .parUnite {
    background: url(/ressource/image/webshop/templatePersonnalise/unite.png) no-repeat center 24px #2BD159;
    border: 2px solid #fff;
}

/* Conteneur principal de la page des commandes : centrage, largeur fixe, hauteur relative, padding en haut. */
#affichagePageDesCommandes {
    margin: 0 auto;
    width: 1000px;
    height: 65%;
    text-align: center;
    vertical-align: middle;
    padding-top: 75px;
}

/* Bouton d'action à l'intérieur du conteneur commandes : largeur fixe, padding, pas de flottement. */
div#affichagePageDesCommandes .boutonAction {
    width: 300px;
    float: none;
    padding: 20px;
}

/*Boutons 'Demande Devis' et menus Collectivités*/
.boutonActionMenu 
{
    display: inline-block;
    padding: 10px 0px;
    float: right;
    text-align: center;
    font-size: 18px !important;
    text-decoration: none;
    cursor: pointer;
    color: var(--couleur-texte);
    background-color: var(--couleur-theme);
    line-height: 38px;
    width: 190px;
    margin-left: 10px;
    height: 40px;
}

/*Survol sur les boutons des menus Collectivités*/
.boutonActionMenu:hover 
{
    background-color: var(--couleur-secondaire85Pourcent);
}

#retourAuMenu.boutonAction:hover 
{
    background: var(--couleur-secondaire85Pourcent);
}

/* Grilles de produits et panier : largeur maximale 100%, hauteur fixe. */
#gridRenommageColonnes_tableauListeDesProduitsDX, #gridRenommageColonnes_tableauListePanierDX {
    max-width: 100% !important;
    height: 550px;
}

    /* Pager des grilles : padding horizontal, hauteur fixe, positionnement relatif. */
    #gridRenommageColonnes_tableauListeDesProduitsDX .dx-pager , #gridRenommageColonnes_tableauListePanierDX .dx-pager {
        padding: 0px 15px 0px 15px;
        height: 48px;
        top: 30px;
        position: relative;
    }

        #gridRenommageColonnes_tableauListeDesProduitsDX .dx-pager .dx-page-sizes {
            margin-bottom: 60px;
        }

#gridRenommageColonnes_tableauListeDesProduitsDX .dx-pager .dx-page-sizes .dx-page-size {
    margin-left: 8px;
}
#entete {
    width: 1440px;
    height: 332px;
    border: 1px solid #d9d9d9;
    border-bottom: 0;
    border-top: 0;
}

#enteteHaut 
{
    float: left;
    width: 1440px;
    height: 44px;
    background-color: var(--couleur-theme);
}

#enteteBas {
    width: 1440px;
    float: left;
    height: 288px;
}

#enteteBasGauche {
    width: 1023px;
    color: White;
    float: left;
    height: 288px;
}

/* Nom société */
.infosSocieteLabel 
{
    position: absolute;
    right: 1074px;
    margin: 2px 0px;
    display: inline-block;
    width: 350px;
    color: var(--couleur-texte);
    font-family: 'Nunito-Regular';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#infoSociete {
    float: right;
    color: #fff;
    margin: 11px auto;
    font-size: 14px;
    position: relative;
    cursor: default;
}

.langueChoisie {
    cursor: default;
}

#choixLangue 
{
    position: relative;
    cursor: pointer;
    margin-right: 30px;
    color: var(--couleur-texte);
    font-family: 'Nunito-Regular';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.dropdown-Langue {
    display: none;
    position: absolute;
    min-width: 35px;
    z-index: 19;
    background: #fff;
    color: #5B5B5B;
    left: 0;
    top: 33px;
    border-radius: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0px 2px 18px rgba(45,43,61, 0.25);
}

/* Menu choix de la langue */
.boutonChoixLangue 
{
    width: 14px;
    height: 14px;
    margin: -2px 3px;
    color: var(--couleur-texte);
}

/* Menu compte */
.boutonMenuCompte 
{
    width: 14px;
    height: 14px;
    cursor: pointer;
    color: var(--couleur-texte);
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* Image flèche du menu compte : marges ajustées verticalement et à droite. */
#imageFlecheBasMenuCompte {
    margin: -2px 3px;
}

.blockMenuConnection {
    display: none;
    position: absolute;
    width: 195px;
    z-index: 16;
    right: 25px;
    top: 33px;
    background: #fff;
    color: #5b5b5b;
    border-radius: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0px 2px 18px rgba(45,43,61, 0.25);
}

    .blockMenuConnection span, .dropdown-Langue span {
        display: inline-block;
        margin: 5px 20px;
        font-size: 16px;
        line-height: 20px;
        cursor: pointer;
        font-family: 'Nunito-Regular';
        font-style: normal;
        font-weight: 400;
        color: #313342;
    }

        .blockMenuConnection span:hover, .dropdown-Langue span:hover {
            color: black;
        }

/* Survol d'un élément de menu : change la couleur de fond. */
.listeMenu:hover {
    background: #F4F4F4;
}

/* Survol du bouton de déconnexion du menu : change la couleur de fond. */
.listeMenuDeconnexion:hover {
    background: #F4F4F4;
}

/* Curseur par défaut pour les éléments du bloc menu connexion et la déconnexion. */
.blockMenuConnection span, listeMenuDeconnexion {
    cursor: default;
}

/* Icône du profil : taille 22px, alignée au milieu, marge à droite et padding. */
.iconProfil {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    padding: 1px 1px 3px 2px;
}

/* Icône "Mes opérations" : taille 22px, alignée au milieu, marges et padding ajustés. */
.iconMesOperations {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-left: -2px;
    padding: 1px 1px 3px 2px;
}

/* Icône "Valider" : taille 22px, alignée au milieu, marges et padding ajustés. */
.iconValider {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    margin-left: -2px;
    padding: 1px 1px 3px 2px;
}

/* Icône de déconnexion : taille 22px, alignée au milieu, marges et padding ajustés. */
.iconDeconnexion {
    width: 22px;
    height: 21px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-left: -1px;
    margin-top: -2px;
    padding: 4px 1px 3px 2px;
}

.blockIdentifiantConnecter {
    margin-right: 25px;
}

#blockIdentification {
    display: inline-block;
    width: 416px;
    position: relative;
    background-color: #fff;
    font-size: 14px;
    height: 288px;
}

/* Bloc panier : conteneur blanc centré, taille fixe, affichage flex en colonne et texte 15px. */
#panier {
    width: 416px;
    height: 288px;
    position: relative;
    background-color: #fff;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#blockIdentification #identification {
    margin: 13px 42px;
}

#login, #motDePasse, #loginBox, #motDePasseBox {
    height: 38px;
    width: 300px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    color: #313342;
    font-size: 14px;
    margin-bottom: -10px;
    padding: 1px 15px;
    font-weight: 400;
    line-height: 20px;
    font-family: 'Nunito-Regular' !important;
}

/* Focus sur les inputs 'Identifiant' et 'Mot de passe' */
#loginBox:focus, #motDePasseBox:focus 
{
    border-color: var(--couleur-theme);
    box-shadow: var(--couleur-theme);
}

/* Label flottant : désactive les interactions et garde l'opacité à 1. */
.has-float-label .float-label {
    pointer-events: none;
    opacity: 1;
}

#login.error, #motDePasse.error, #loginBox.error, #motDePasseBox.error {
    border: 1px solid #EE3535;
}

/* Erreur de saisi sur les inputs 'Identifiant' et 'Mot de passe' */
#login.error::placeholder, #motDePasse.error::placeholder, #loginBox.error::placeholder, #motDePasseBox.error::placeholder
{
    color: #EE3535 !important;
}

/* Texte introductif de la page de login : en gras, taille 16px, décalé à gauche. */
.texteIntroLogin {
    font-weight: bold !important;
    padding-left: 20px;
    font-size: 16px;
}

/* Texte d'explication sous le login : bloc centré, taille 15px, marges et padding ajustés. */
.texteExplicationLogin {
    margin-top: 6px;
    display: block;
    margin-left: 10px;
    font-size: 15px;
    padding-right: 10px;
    text-align: center;
}

div#divResterConnecter {
    font-family: 'Nunito-regular';
    line-height: 24px;
    position: relative;
    left: 0;
}

#labelResterConnecte {
    padding-left: 22px;
    color: #313342;
}

input#resterConnecter, input#resterConnecterPopup {
    height: 16px;
    width: 16px;
    border-radius: 4px;
    float: left;
    opacity: 0;
    display: none;
}

#divResterConnecter input[type="checkbox"]:checked + label {
    position: relative;
}

#divResterConnecter input[type="checkbox"] + label::before {
    border-radius: 4px;
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    display: inline-block;
    border: 1px solid #bababa;
    top: 4px;
    left: 0;
}

#divResterConnecter input[type="checkbox"]:checked + label::before {
    display: none;
}

/* Case à cocher 'Rester connecté'*/
#divResterConnecter input[type="checkbox"]:checked + label::after 
{
    content: "✓";
    display: block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    color: #fff;
    background-color: var(--couleur-theme);
    border-radius: 4px;
    border: 1px solid var(--couleur-theme);
    position: absolute;
    top: 2px;
    left: 0;
}

/* Bouton 'Demander un devis' */
#demandeDevisSocieteGenerique 
{
    margin: 16px auto;
    height: 40px;
    width: 160px;
    border-radius: 30px;
    background-color: transparent;
    color: var(--couleur-theme);
    border: 1px solid var(--couleur-theme);
    display: block;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    font-size: 15px;
    font-family: 'Nunito-Regular' !important;
    font-style: normal;
    font-weight: 400;
}

/* Survol sur le bouton 'Demande un devis' */
#demandeDevisSocieteGenerique:hover 
{
    background-color: var(--couleur-secondaire10Pourcent);
}

#bienvenue {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
    font-family: 'Nunito-SemiBold';
    color: #313342;
}

#motDePasseOublieHOL {
    float: right;
}

#sinscrire {
    margin: auto;
    text-align: center;
    display: block;
}

.labelLien 
{
    display: inline-block;
    color: var(--couleur-theme);
    cursor: pointer;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}

/*Texte lien 'cumuls emballages'*/
#lienCumulsEmballages .labelLien
{
    display: inline-block;
    vertical-align: middle;
    text-decoration: underline;
    color: var(--couleur-theme);
    cursor: pointer;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}

/* Bloc #devisConn : conteneur flex, éléments espacés, alignés au centre, largeur 340px. */
#devisConn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 340px;
}

#seConnecter 
{
    margin: 16px auto;
    height: 40px;
    width: 160px;
    border-radius: 30px;
    background-color: var(--couleur-theme);
    color: var(--couleur-texte);
    border: none;
    display: block;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-family: 'Nunito-Regular' !important;
    font-style: normal;
    font-weight: 400;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#seConnecter:hover, span.commandeIcone:hover 
{
    background-color: var(--couleur-secondaire85Pourcent);
}

/* Texte "Mon Panier" : position absolue, décalé de 50px vers le bas et 110px vers la droite, marge verticale. */
.textMonPanier {
    margin: 16px auto;
    top: 51px;
    position: absolute;
    left: 110px;
}

/* Texte bouton commande */
.commandeIcone 
{
    height: 40px;
    width: 200px;
    border-radius: 30px;
    background-color: var(--couleur-theme);
    color: var(--couleur-texte);
    border: none;
    display: block;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-family: 'Nunito-Regular' !important;
    font-style: normal;
    font-weight: 400;
    font-family: 'Nunito-Regular';
}

/* Label pour création de compte : texte gris foncé, police Nunito. */
.labelCreationCompte {
    color: #313342;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
}

/* Icône chariot sur le bouton 'Mon devis' */
.iconShoppingcart 
{
    width: 18px;
    height: 18px;
    margin-top: -5px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    color: var(--couleur-texte);
}

/* Bloc panier fournisseur : position héritée, décalé de 50px vers le haut. */
.monPanierFournisseur {
    top: -50px;
    position: inherit;
    left: 0px;
}

table#conteneurLignesMaCommande
{
    margin: 20px;
    background: var(--couleur-secondaire10Pourcent);
    padding: 8px;
    margin-left: 40px;
    max-width: 320px;
    border-radius: 2px;
    min-width: 320px;
    position: absolute;
    top: 104px;
}

    /* Les cellules du tableau dans #conteneurLignesMaCommande sont flottées à gauche. */
    table #conteneurLignesMaCommande td {
        float: left;
    }

#conteneurLignesMaCommande td.labelFixe 
{
    color: var(--couleur-theme);
    min-width: 130px;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
    text-align: left;
}

#conteneurLignesMaCommande td.decimale {
    padding-left: 0px;
    color: #313342;
    text-align: left !important;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 700;
}

#conteneurLignesMaCommande td.labelMaCommande {
    text-align: right;
    color: #313342;
    font-family: 'Nunito-Regular' !important;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
}
    /* Style spécifique pour le label "Valeur" - 16px Bold */
    #conteneurLignesMaCommande td.labelMaCommande.valeurLabel {
        font-size: 16px;
    }

/* Aligne à droite le texte des cellules label et décimale dans #conteneurLignesMaCommande. */
#conteneurLignesMaCommande td.labelMaCommande,
#conteneurLignesMaCommande td.decimale {
    text-align: right;
}

/* Aligne à gauche le texte des cellules de valeurs dans #conteneurLignesMaCommande. */
#conteneurLignesMaCommande td.valeurMontantTotal,
#conteneurLignesMaCommande td.valeurNombreProduitsAjouter,
#conteneurLignesMaCommande td.valeurFranco,
#conteneurLignesMaCommande td.valeurDensite,
#conteneurLignesMaCommande td.valeurSurface,
#conteneurLignesMaCommande td.valeurMontantTotalDecimale {
    text-align: left;
}


#lienCumulsEmballages {
    display: inline-flex;
    text-align: center;
    font-size: 14px;
    font-family: 'Nunito-Regular' !important;
    font-style: normal;
    font-weight: 400;
    margin-left: -5px;
    position: absolute;
    top: 260px;
}

/*Icône lien 'cumuls emballages'*/
.iconBoxCumulsEmballages
{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    top: 10px;
    padding: 0px 8px;
    color: var(--couleur-theme);
}

/* Conteneur livraison : affichage type table, position relative décalée, taille max et padding. */
.conteneurLivraison {
    display: table;
    left: -12px;
    position: relative;
    max-width: 395px;
    height: 36px;
    padding: 12px;
    top: -115px;
}

.affichageMS.conteneurLivraison {
    margin: 14px 7px 0;
    height: 48px;
}

.inputHeader {
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    color: #313342;
    margin-left: 8px;
    font-family: 'Nunito-Regular' !important;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

input#dateLivraison {
    height: 34px;
}

/* Champ date de livraison : largeur 100px, icône calendrier en fond, padding à gauche, petite taille de texte. */
.largeur3inputs input#dateLivraison {
    width: 100px;
    padding: 0px 0px 0px 22px;
    margin-right: 1px;
    font-size: 12px;
    background: url(/ressource/image/webshop/templatePersonnalise/calendrier_NT.svg) no-repeat scroll 3px 8px #FCFCFC;
}

/* Champ date de livraison (2 inputs) : largeur 130px, icône calendrier en fond, padding et indentation à gauche, texte 14px. */
.largeur2inputs input#dateLivraison {
    width: 130px;
    padding: 0px 0px 0px 20px;
    margin-right: 11px;
    font-size: 14px;
    background: url(/ressource/image/webshop/templatePersonnalise/calendrier_NT.svg) no-repeat scroll 8px 8px #FCFCFC;
    text-indent: 8px;
}

/* Sélecteur type d'opération (3 inputs) : largeur 128px, icône clipboard en fond, texte 12px. */
.largeur3inputs select#typeOperationSelection {
    width: 128px;
    font-size: 12px;
    background: url(/ressource/image/webshop/templatePersonnalise/clipboard.svg) no-repeat scroll 2px 8px #FCFCFC;
}

/* Sélecteur type d'opération (2 inputs) : largeur 152px, icône clipboard en fond, indentation, texte 14px. */
.largeur2inputs select#typeOperationSelection {
    width: 152px;
    font-size: 14px;
    background: url(/ressource/image/webshop/templatePersonnalise/clipboard.svg) no-repeat scroll 8px 8px #FCFCFC;
    text-indent: 8px;
}

/*Focus sur Date Livraison*/
#dateLivraison:focus 
{
    border-color: var(--couleur-theme);
}

img.ui-datepicker-trigger {
    position: absolute;
    left: 15px;
    top: 26px;
    display: none;
}

select#semaineDateLivraison {
    height: 36px;
    width: 60px;
}

span#labelSemaineLivraison {
    position: absolute;
    top: 56px;
    left: 15px;
    font-size: 12px;
}

div#typeOperation, div#modeExp, div#conteneurSemaineLivraison {
    width: 125px;
    display: inline-block;
    height: 36px;
}

div#selectSemaineLivraisonContainer .boutonNav {
    border: 0px;
    height: 15px;
    cursor: pointer;
}

input#previousButtonWeek {
    background: rgba(0,0,0,0) url(/ressource/image/webshop/templatePersonnalise/prevCalendar.png) no-repeat scroll 0 0;
}

input#nextButtonWeek {
    background: rgba(0,0,0,0) url(/ressource/image/webshop/templatePersonnalise/nextCalendar.png) no-repeat scroll 0 0;
}

/* Sélecteur du type d'opération : hauteur 36px, padding pour l'icône. */
select#typeOperationSelection {
    height: 36px;
    padding: 0 25px 0 22px;
}

select#typeOperationSelection option 
{
    font-family: 'Nunito', 'Nunito-Regular', Arial, sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

/* Focus sur Type opération */
select#typeOperationSelection:focus 
{
    border-color: var(--couleur-theme);
}

/* Icône du type d'opération (2 inputs) : marges pour positionner l'icône. */
.largeur2inputs .iconSelectTypeOperation {
    margin: -26px 140px;
}

/* Icône du type d'opération (3 inputs) : marges pour positionner l'icône. */
.largeur3inputs .iconSelectTypeOperation {
    margin: -26px 115px;
}

/* Icône de type d'opération : position absolue, non cliquable. */
#iconTypeOperation {
    position: absolute;
    pointer-events: none;
}

/* Type opération sélectionné */
select#typeOperationSelection option:checked 
{
    background-color: var(--couleur-secondaire10Pourcent);
    color: var(--couleur-theme);
    font-weight: 500;
    font-family: 'Nunito-Bold';
}

/* Sélecteur du mode d'expédition : hauteur 36px, largeur 128px, padding et icône transport en fond. */
select#modeExpeditionSelection {
    height: 36px;
    width: 128px;
    padding: 0 25px 0 22px;
    margin-left: 19px;
    background: url(/ressource/image/webshop/templatePersonnalise/transport.svg) no-repeat scroll 3px 8px #FCFCFC;
}

select#modeExpeditionSelection option 
{
    font-family: 'Nunito', 'Nunito-Regular', Arial, sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

/* Focus sur Mode d'expédition */
select#modeExpeditionSelection:focus 
{
    border-color: var(--couleur-theme);
}

/* Mode d'expédition élément sélectionné */
select#modeExpeditionSelection option:checked
{
    background-color: var(--couleur-secondaire10Pourcent);
    color: var(--couleur-theme);
    font-weight: 500;
    font-family: 'Nunito-Bold';
}

/* Icône du mode d'expédition (2 inputs) : marges pour positionner l'icône. */
.largeur2inputs .iconSelectModeExp {
    margin: -26px 140px;
}

/* Icône du mode d'expédition (3 inputs) : marges pour positionner l'icône. */
.largeur3inputs .iconSelectModeExp {
    margin: -26px 127px;
}

/* Icône du mode d'expédition : position absolue, non cliquable. */
#iconModeExp {
    position: absolute;
    pointer-events: none;
}

label.selectImgBackground {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
}

label#labelTypeOperation {
    background: rgba(0,0,0,0) url(/ressource/image/webshop/templatePersonnalise/clipboard.svg) no-repeat scroll 0 0;
    left: 120px;
    top: 26px;
}

label#labelModeExpedition {
    background: rgba(0,0,0,0) url(/ressource/image/webshop/templatePersonnalise/transport.svg) no-repeat scroll 0 0;
    right: 160px;
    top: 26px;
}

/*Date livraison*/
#ui-datepicker-div
{
    height: auto;
    width: 348px;
    border-radius: 0 0 8px 8px;
    background: #fff;
    z-index: 15 !important;
    box-shadow: 0px 6px 10px 0px #20232e40;
    border: 1px solid #FAFAFA;
}

.ui-datepicker {
    padding: 3px 3px 0;
    width: 200px;
    display: none;
    font-family: 'Nunito-SemiBold';
}

span.ui-icon.ui-icon-circle-triangle-w, span.ui-icon.ui-icon-circle-triangle-e {
    overflow: hidden;
    color: transparent;
    display: inline-block;
    width: 0;
}

span.ui-datepicker-month {
    color: #484848;
}

.ui-datepicker .ui-datepicker-header {
    padding: 3px 0px;
    position: relative;
}

td.ui-datepicker-week-col {
    background-color: var(--couleur-secondaire10Pourcent);
    text-align: center;
    color: var(--couleur-texte);
    font-weight: 600;
}

.ui-datepicker .ui-datepicker-prev {
    display: none;
    top: 2px;
    width: 34px;
    height: 34px;
    left: 10px;
    position: absolute;
    background: rgba(0,0,0,0) url(/ressource/image/webshop/templatePersonnalise/prevCalendar.png) no-repeat scroll 4px 10px;
}

.ui-datepicker .ui-datepicker-next {
    display: none;
    top: 2px;
    width: 34px;
    height: 34px;
    right: 2px;
    position: absolute;
    background: rgba(0,0,0,0) url(/ressource/image/webshop/templatePersonnalise/nextCalendar.png) no-repeat scroll 14px 10px;
}

.ui-datepicker .ui-datepicker-title {
    text-align: center;
    line-height: 28px;
}

select.ui-datepicker-month, select.ui-datepicker-year {
    border: none;
    font-size: 15px;
    line-height: 24px;
    font-family: 'Nunito-SemiBold' !important;
    margin: 2px 5px;
    background: url(/ressource/image/webshop/templatePersonnalise/fleche_bas.png) no-repeat scroll 98% 10px #fff !important;
}

select.ui-datepicker-year {
    color: #313342;
    padding: 8px 22px;
    background: url(/ressource/image/webshop/templatePersonnalise/fleche_bas.png) no-repeat scroll 98% 10px #fff !important;
}

select.ui-datepicker-year option 
{
    font-family: 'Nunito', 'Nunito-Regular', Arial, sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

select.ui-datepicker-month {
    color: #313342;
    padding: 8px 23px;
    background: url(/ressource/image/webshop/templatePersonnalise/fleche_bas.png) no-repeat scroll 90% 10px;
}

select.ui-datepicker-month option 
{
    font-family: 'Nunito', 'Nunito-Regular', Arial, sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

/* Année sélectionné de la date de livraiosn */
select.ui-datepicker-year option:checked 
{
    background-color: var(--couleur-secondaire10Pourcent);
    color: var(--couleur-theme);
    font-weight: 500;
    font-family: 'Nunito-Bold';
}

/* Mois sélectionné de la date de livraison */
select.ui-datepicker-month option:checked 
{
    background-color: var(--couleur-secondaire10Pourcent);
    color: var(--couleur-theme);
    font-weight: 500;
    font-family: 'Nunito-Bold';
}

.ui-datepicker table {
    margin: 0 0 6px;
    width: 100%;
    font-size: 15px;
    border-collapse: collapse;
    height: auto;
}

.ui-datepicker th {
    text-align: center;
    color: #313342 /*#19181A*/;
    line-height: 24px;
    font-size: 13px;
    font-family: 'Nunito-Bold';
}

.ui-datepicker td {
    padding: 1px;
    border: 0px currentColor;
    font-size: 15px;
}

    .ui-datepicker td a, .ui-datepicker td span {
        padding: 8px 3px;
        text-align: center;
        text-decoration: none;
        display: block;
    }

.ui-datepicker-buttonpane.ui-widget-content .ui-datepicker-current 
{
    height: 32px;
    width: 150px;
    border-radius: 4px;
    color: var(--couleur-texte);
    background: var(--couleur-theme);
    border: none;
    font-size: 15px;
}

/* Survol sur le bouton 'Aujourd'hui' de la date de livraiosn */
.ui-datepicker-buttonpane.ui-widget-content .ui-datepicker-current:hover 
{
    background: var(--couleur-secondaire85Pourcent);
    cursor: pointer;
}

.ui-widget-content .ui-state-default {
    color: #313342;
    font-size: 15px !im;
    line-height: 24px;
    font-family: 'Nunito-SemiBold' !important;
}

.ui-datepicker-close {
    display: none;
}

/* Jour sélectionné de la date de livraison*/
.ui-datepicker-today .ui-state-default
{
    color: var(--couleur-theme) !important;
}

.ui-widget-content .ui-datepicker-current-day .ui-state-default.ui-state-active 
{
    background: var(--couleur-theme);
    color: var(--couleur-texte) !important;
    border-radius: 20px;
}

.ui-widget-content .ferrieAutoriseClass .ui-state-default {
    color: var(--couleur-theme) !important;
    background: var(--couleur-secondaire10Pourcent) !important;
    border-radius: 20px;
}

.ui-widget-content .bloqueClass .ui-state-default {
    color: #BABABA !important;
}

.ui-datepicker-buttonpane.ui-widget-content {
    margin: 12px auto;
    text-align: center;
}

#layoutLightBox {
    display: none;
    height: 100%;
    width: 100%;
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    overflow: hidden;
    opacity: 0.3;
}
#filtreDescriptif {
    border: 1px solid #e5e5e5;
    width: 214px;
    border-radius: 0px 0px 8px 8px;
    padding: 12px;
}

div#filtreDescriptif hr {
    width: 239px;
    background: #D5F2EA;
    border-bottom: 0.2px solid #E5E5E5 !important;
    border: 0;
    margin-left: -12px;
}

/* Style pour l'élément <hr> avec l'identifiant "separateurFiltre" */
hr#separateurFiltre {
    border-top: 1px solid #DDDDDD;
    border-bottom: 0px;
    width: 90%;
    margin-bottom: 5px;
    margin-top: 10px;
}

#listeCriteresWebshop {
    margin-bottom: 36px;
}

.filtrerPar {
    font-size: 16px;
    padding: 10px;
    display: block;
    background: var(--couleur-theme);
    border-radius: 8px 8px 0px 0px;
    text-transform: uppercase;
    text-align: center;
    color: var(--couleur-texte) !important;
}

.unFiltreDescriptif, .unFiltreArticle, .unFiltreTaillePresentation {
    display: block;
    padding: 6px 0px 6px 0px;
    font-size: 16px;
    width: 214px;
}

.cocherEnteteBlockCatalogueFamille {
    display: block;
    position: relative;
    float: left;
    margin-bottom: -15px;
}

.critereSelectionnerDesktop, .surFamilleAfficher, .familleAfficher, .critereArticleSelectionnerDesktop {
    background-image: url(/ressource/image/webshop/templatePersonnalise/fleche_bas_filtre.png) !important;
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-position: 100%;
    cursor: alias;
}

.critereNonSelectionnerDesktop, .surFamilleNonAfficher, .familleNonAfficher, .critereArticleNonSelectionnerDesktop {
    background-image: url(/ressource/image/webshop/templatePersonnalise/fleche_droite_filtre.png);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-position: 100%;
}

.libelleMesCatalogues, .surFamilleAfficher, .libelleCritere, .libelleCritereArticle, .libelleTaillePresentation, .designationCatalogueType5, .labelPrix {
    padding: 6px 0px 6px 0px !important;
    font-size: 16px;
    font-family: 'Nunito-Regular', 'Nunito', Arial, sans-serif !important;
    color: #111214 !important;
    width: 214px;
    display: inline-block;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 600 !important;
    line-height: normal;
}

#listeFiltreFamille input[type="checkbox"], #listeCritresArticles input[type="checkbox"], #listeFiltreTaillePresentation input[type="checkbox"], #critereValeurId input[type="checkbox"], .choixCatalogue #catalogueFiltreId input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

#listeCritresArticles span, .contenuBlockCatalogue span, #listeFiltreTaillePresentation span, span#critereValeurId {
    display: inline-block;
    width: 100%;
    margin: 7px auto;
}

[id^=unCatalogue_] {
    height: 35px;
    background-size: 30px;
    text-align: left;
    display: inline-table !important;
    position: relative;
    margin: 0 auto;
    min-width: 187px;
    /*cursor: pointer;*/
    margin-right: 7px;
}

.nomCatalogue {
    padding-left: 25px;
    padding-right: 0px;
    padding-top: 0px;
    font-size: 15px;
    white-space: normal;
    display: block;
}

#listeFiltreFamille [class*="contenuBlock_catalogue"] {
    display: none;
}

.contenuBlockCatalogue, .contenuBlockMesCatalogues, .contenuBlockFiltrePrix {
    position: relative;
    margin-top: 5px;
    font-size: 14px;
}

[class*="contenuBlock_critere"] {
    position: relative;
    margin-top: 3px;
    font-size: 15px;
    display: none;
}

#listeCriteresWebshop #critereValeurId input[type="checkbox"] {
    left: 18px;
}

/* Filtre actifs : caché et décalé vers le haut avec une marge négative. */
div#filtreActifs {
    display: none;
    margin-top: -8px;
}

#filtreDescriptif span {
    /*display: inline-block;*/
    position: relative;
}

#filtreDescriptif label {
    padding-left: 30px;
    font-weight: 400;
    color: #5B5D65;
    font-family: 'Nunito-Regular', 'Nunito', Arial, sans-serif !important;
}

/* Style pour les éléments avec la classe "chips" */
.chips {
    display: flex; /* Utilise le modèle de boîte flex pour positionner les enfants de manière flexible */
    align-items: center; /* Aligne les éléments enfants au centre verticalement */
    gap: 2px; /* Ajoute un espace de 2 pixels entre les éléments enfants */
    padding: 2px; /* Ajoute un padding de 2 pixels autour de l'élément */
    background-color: #EFF2FF;
    color: #5D78FF;
    border-radius: 16px; /* Ajoute des coins arrondis avec un rayon de 16 pixels */
    font-size: 14px;
    font-family: 'Nunito-regular';
    font-weight: 400;
    margin: 6px;
    width: max-content; /* Définit la largeur de l'élément à la taille maximale du contenu */
    max-width: 214px;
    flex-direction: row; /* Positionne les éléments enfants en ligne horizontale */
    align-items: center;
    right: 5px;
}

/* Style pour les éléments avec la classe "chips" */
.contenu-filtre {
    display: table;
    flex-wrap: wrap;
    max-width: 188px;
    width: auto;
    margin-left: 4px;
    margin-right: 4px;
}

/* Style pour les éléments avec la classe "chips" */
.nomCritereActif, .nomCritereValeurActif {
    flex: 1;
    margin-right: 2px;
}

/* Style pour les éléments avec la classe "nomFamilleActif" "nomFamilleValeurActif" */
.nomFamilleActif, .nomFamilleValeurActif {
    margin: 2px;
}


/* Style pour les éléments avec la classe "img-supprimerFiltre" */
.img-supprimerFiltre {
    height: 16px;
    max-height: 100%;
    width: 16px;
    cursor: pointer;
    transition: opacity 0.5s;
    display: block;
    margin-right: 2px;
}

/* Style pour les éléments avec la classe "img-supprimerFiltre-fam" */
.img-supprimerFiltre-fam {
    height: auto;
    max-height: 100%;
    width: 16px;
    cursor: pointer;
    transition: opacity 0.5s;
    display: block;
    margin-right: 2px;
    /*position: relative;
    top: 0px;*/
}

/* Filtre descriptif et chips : texte bleu vif. */
#filtreDescriptif, chips {
    color: #5D78FF !important;
}

    #filtreDescriptif input[type="checkbox"] {
        height: 14px;
        width: 14px;
        border-radius: 4px;
        float: left;
        opacity: 0;
        display: none;
    }

        #filtreDescriptif input[type="checkbox"] + label::before {
            border-radius: 4px;
            content: '';
            width: 14px;
            height: 14px;
            position: absolute;
            display: inline-block;
            border: 1px solid #bababa;
            top: 1px;
            left: 0;
        }

/* Catalogue principal avec classe grise - affiche un tiret avec fond gris */
#filtreDescriptif input[type="checkbox"].catalogueFiltreFamilleGriser:checked + label::after,
#filtreDescriptif .catalogueFiltreFamille.catalogueFiltreFamilleGriser + label::after 
{
    content: "−" !important; 
    background-color: var(--couleur-secondaire50Pourcent) !important; 
    border-color: var(--couleur-secondaire50Pourcent) !important;
}

/* Sur-Famille principal avec classe grise - affiche un tiret avec fond gris */
#listeFiltreFamille .surFamilleBox input[type="checkbox"].catalogueFiltreFamilleGriser:checked + label::after,
#listeFiltreFamille .labelsurFamille.catalogueFiltreFamilleGriser::after 
{
    content: "−" !important;
    background-color: var(--couleur-secondaire50Pourcent) !important;
    border-color: var(--couleur-secondaire50Pourcent) !important;
} 

#filtreDescriptif input[type="checkbox"]:checked + label 
{
    color: var(--couleur-theme);
}

span#catalogueFiltreId input[type="checkbox"]:checked + label::after, span#catalogueFiltreId input[type="checkbox"] + label::before {
    left: 0px !important;
}

#filtreDescriptif input[type="checkbox"]:checked + label::after {
    content: "✓";
    display: block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    color: #fff;
    background-color: var(--couleur-theme);
    border-radius: 4px;
    border: 1px solid var(--couleur-theme);
    position: absolute;
    top: 1px;
    left: 0;
}

#listeFiltreFamille .familleBox .labelFiltreFamille {
    padding-left: 52px;
}

#listeFiltreFamille .familleBox input[type="checkbox"] + label::before,
#listeFiltreFamille .familleBox input[type="checkbox"]:checked + label::after {
    left: 22px;
}

.contenuBlockFiltrePrix {
    height: 40px;
}

div#filtreQuantite {
    width: 190px;
    height: 6px;
    border-radius: 6px;
    background: #F1F1F1;
    border: none;
    margin: 0 auto;
}

#filtreQuantite.ui-slider {
    position: relative;
    text-align: left;
}

#filtreQuantite .ui-widget-header {
    background: var(--couleur-theme);
}

#filtreQuantite .ui-slider-range {
    top: 0;
    height: 100%;
    position: absolute;
    font-size: .7em;
    display: block;
    border: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

#filtreQuantite .ui-slider-handle {
    height: 16px;
    width: 16px;
    border-radius: 9px;
    border: 1px solid var(--couleur-theme);
    background: #fff;
    position: absolute;
    left: 5%;
    right: 5%;
    top: 5%;
    bottom: 5%;
}

    #filtreQuantite .ui-slider-handle:focus,
    #filtreQuantite .ui-slider-handle:active {
        border: 1px solid var(--couleur-theme) !important;
        outline: none;
        box-shadow: none;
    }

#filtreQuantite.ui-slider-horizontal .ui-slider-handle {
    top: -6px;
    margin-left: -2px;
}

#filtrePrixQuantite .price {
    top: 15px;
    color: #9B9B9B;
    display: inline-block;
    position: absolute;
}

#filtrePrixQuantite .left-oriented {
    left: 5px;
}

#filtrePrixQuantite .right-oriented {
    right: 5px;
}

.conteneurDetailsCatalogue {
    display: none;
}

.conteneurDetailsCatalogue {
    position: absolute;
    width: 446px;
    height: auto;
    top: 20px;
    left: 62px;
    z-index: 20;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 5px 2px #b3b3b3;
    -moz-box-shadow: 0 0 5px 2px #b3b3b3;
    -webkit-box-shadow: 0 0 5px 2px #b3b3b3;
}

[id^=unCatalogue_]:hover .conteneurDetailsCatalogue {
    display: block;
}

.conteneurDetailsCatalogue:hover {
    display: block;
}

.imageCataloguePopup {
    float: left;
    width: 34px;
    padding: 12px;
    border-radius: 50%;
}

.detailCatalogueBas {
    text-align: left;
    display: inline-block;
    padding: 16px 12px 10px;
}

.labelFiltreCodeFamille.inactif {
    cursor: default;
}

/* Style pour les éléments avec la classe "labelFiltreCodeFamille" */
.labelFiltreCodeFamille {
    background: #f4f5f8;
    color: #5b5b5b;
    cursor: pointer;
    font-size: 15px;
    float: left;
    display: block;
    width: 132px;
    position: relative;
    line-height: 21px;
    text-align: center;
    padding: 0 4px !important;
    margin-bottom: 2px;
    border: 5px #fff;
}

.detailBasClotureCatalogue {
    text-align: left;
    padding-left: 10px;
    width: 385px;
    position: relative;
    color: #fff;
    font-size: 12px;
    margin-left: 2px;
    margin-top: -5px;
}

.detailCatalogueEntete {
    display: inline-block;
    position: relative;
    height: 58px;
    width: 100%;
    border-radius: 8px 8px 0px 0px;
    background: var(--couleur-theme);
    color: #fff;
}

    .detailCatalogueEntete label {
        color: var(--couleur-texte) !important;
        font-size: 14px;
        text-align: left;
        padding: 7px 7px 0px 7px !important;
        font-family: 'Nunito-SemiBold';
    }

.datePublicationDetails {
    text-align: left;
    padding: 5px 0;
    display: block;
}

.datePeremptionDetails {
    text-align: left;
    padding: 0px;
    display: block;
}

    .datePeremptionDetails img {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
    }

.blockDocuments {
    text-align: left;
    display: inline-block;
    color: var(--couleur-theme);
    border: 1px solid #f4f5f8;
    margin: 0 12px;
    width: 378px;
    padding: 4px 20px;
}

.blockDocumentsTombone {
    float: left;
}

    .blockDocumentsTombone .icon-paperclip {
        font-size: 32px;
        margin-right: 7px;
    }

.icon-paperclip:before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    mask: url(/ressource/image/commun/pdf.svg) no-repeat center / contain;
    -webkit-mask: url(/ressource/image/commun/pdf.svg) no-repeat center / contain;
    background-color: var(--couleur-theme);
    vertical-align: middle;
    margin-right: 7px;
}

.blockDocuments a {
    display: block;
    text-decoration: none;
    line-height: 19px;
    margin-left: 35px;
    text-align: left;
    font-size: 14px;
    padding: 3px;
    color: var(--couleur-theme);
    font-family: 'Nunito-SemiBold';
}


#logoEtRechercheWebshop {
    width: 190px;
    height: 90px;
    position: absolute;
    z-index: 3;
    background: #FFFFFF;
    box-sizing: border-box;
    border-radius: 0px 0px 4px 4px;
}
#listeImage {
    height: 288px;
    width: 100%;
    position: relative;
    display: block;
}
.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin:0px;
}

    .rslides li {
        -webkit-backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
    }
    .rslides img {
        display: block;
        height: 288px;
        float: left;
        border: 0;
    }
.captionTemplate2 {
    position: absolute;
    display: block;
    height: 107px;
    width: 364px;
    top: 124px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0 14px 14px 0;
}

.captionTemplate2 .captionTitre 
{
    color: var(--couleur-theme);
    font-style: normal;
    font-weight: bold;
    font-family: 'Nunito-Bold';
    font-size: 20px;
    line-height: 25px;
    display: block;
    position: relative;
    margin-left: 22px;
    margin-top:5px;
}

    .captionTemplate2 .captionSecondaire {
        font-style: normal;
        font-family: 'Nunito-SemiBold';
        font-weight: 600;
        font-size: 14px;
        line-height: 19px;
        color: #676767;
        display: block;
        position: relative;
        margin-left: 25.23px;
        margin-top:4px;
        text-transform:uppercase;
    }
a.centered-btns_nav.centered-btns1_nav.prev,
a.centered-btns_nav.centered-btns1_nav.next {
    display: none;
}
ul.centered-btns_tabs {
    position: relative;
    top: -52px;
    z-index: 3;
    text-align: center;
}
    ul.centered-btns_tabs li {
        display: inline-block;
        margin: 5px;
    }


ul.centered-btns_tabs li a 
{
    background: var(--couleur-secondaire50Pourcent);
    width: 12px;
    height: 12px;
    border-radius: 15px;
    text-indent: -9999px;
    overflow: hidden;
    display: inline-block;
            border: 1px solid #FFFFFF;
}

 ul.centered-btns_tabs li.centered-btns_here a 
 {
     opacity: 0.7;
     background: var(--couleur-theme);
     border: 1px solid #FFFFFF;
}

a.centered-btns_nav.centered-btns2_nav.prev,
a.centered-btns_nav.centered-btns2_nav.next {
    display:none;
}
a.centered-btns_nav {
    display: none;
}
.conteneurEnteteNavigateurZoneFiltre {
    background: #F6F6F6;
    position: relative;
    z-index: 6;
    display: block;
    height: 60px;
}
.enteteNavigateur {
    color: #2d2d2d;
    padding: 14px 7px;
    width: 1426px;
    position: relative;
    height: 32px;
    display: inline-block;
    background: #F4F4F4;
    transition: box-shadow 0.3s ease;
}

    .enteteNavigateur.shadow {
        box-shadow: 0px 1px 2px rgba(11, 10, 13, 0.25);
    }
div#blockDeRecherche {
    float: left;
    position: relative;
}
input#rechercheLignes {
    border: 1px solid #d9d9d9;
    height: 28px;
    width: 188px;
    border-radius: 4px;
    font-size: 14px;
    padding: 1px 35px;
    font-weight: 400;
    line-height: 19px;
    display: flex;
    align-items: center;
    color: #313342;
}

    /* Masque le placeholder du champ de recherche lors du focus. */
    input#rechercheLignes:focus::placeholder {
        opacity: 0;
    }

/* Focus sur filtre de recherche */
input#rechercheLignes:focus 
{
    border-color: var(--couleur-theme);
}

input.boutonRecherche {
    text-indent: -50px;
    background: url(/ressource/image/webshop/templatePersonnalise/search.png) no-repeat scroll 0px 0px #fff !important;
    border: none;
    width: 25px;
    height: 20px;
    left: 8px;
    margin-top: -2px;
    font-weight: 400;
    line-height: 19px;
    display: flex;
    align-items: center;
    color: #BABABA;
}

img.annulerRechercheWebshop, input.boutonRecherche {
    position: absolute;
    right: 8px;
    top: 8px;
}
img.annulerRechercheWebshop {
    display: none;
    z-index: 8;
    background: #fff;
    position: absolute;
    right: 5px;
    top: 8px;
}

/* Champ de saisie de recherche : police Nunito, texte gris clair, très grande taille (50px), aligné au centre avec flex. */
.rechercheInput {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-size: 50px;
    line-height: 19px;
    display: flex;
    align-items: center;
    color: #BABABA;
}

div#blockTri {
    position: relative;
    float: left;
}

label.labelTrier {
    position: absolute;
    font-size: 14px;
    line-height: 30px;
    left: 20px;
    color: #999AA1;
    font-family: 'Nunito-Regular';
    font-style: normal;
}
select#selectTri {
    padding-left: 70px;
    height: 32px;
    width: 285px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    font-size: 14px;
    color: #313342;
    background: #fff url(/ressource/image/webshop/templatePersonnalise/fleche_bas.png) no-repeat scroll 24px 12px 40px 40px #fff !important;
    margin-left: 12px;
    font-family: 'Nunito';
    font-style: normal;
    cursor: pointer;
    background-color: #fff !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select#selectTri option 
{
    font-family: 'Nunito', 'Nunito-Regular', Arial, sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

/* Focus sur type de tri */
select#selectTri:focus 
{
    border-color: var(--couleur-theme);
}

/* Icône du sélecteur de tri : marge personnalisée, visible, non interactive. */
#iconSelectTri {
    margin: 7px -20px;
    opacity: 1;
    pointer-events: none;
}

/* Icône de tri : position absolue. */
.triIconSelectTri {
    position: absolute;
}

/* Type de tri sélectionné */
#selectTri option:checked 
{
    background-color: var(--couleur-secondaire10Pourcent);
    color: var(--couleur-theme);
    font-weight: 500;
    font-family: 'Nunito-Bold';
}

/* Survol sur type de tri sélectionné */
#selectTri option:hover 
{
    background-color: var(--couleur-theme) !important;
    color: #FFf;
}

.nombreProduits {
    font-size: 14px;
    margin-left: 20px;
    float: left;
    font-family: 'Nunito-Regular';
    font-style: normal;
    color: #313342;
    font-weight: 400;
}
select.nombreProduitsAAfficher::-ms-expand {
    display: none;
}
select.nombreProduitsAAfficher {
    padding-left: 10px;
    height: 32px;
    width: 60px;
    border-radius: 4px;
    border: 1px solid #D9D9D9;
    box-sizing: border-box;
    font-size: 14px;
    color: #313334;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
    cursor: pointer;
    background: #fff !important;
    background-color: #fff !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.nombreProduitsAAfficher option 
{
    font-family: 'Nunito', 'Nunito-Regular', Arial, sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

/* Focus sur Nombre d'élément par page à afficher */
select.nombreProduitsAAfficher:focus 
{
    border-color: var(--couleur-theme);
}

/* Nombre d'élément par page à afficher sélectionné */
select.nombreProduitsAAfficher option:checked 
{
    background-color: var(--couleur-secondaire10Pourcent);
    color: var(--couleur-theme);
    font-weight: 500;
    font-family: 'Nunito-Bold';
}

/* Icône du sélecteur "Montrer" : marge personnalisée, non interactive, visible. */
#iconSelectMontrer {
    margin: 6px -23px;
    pointer-events: none;
    opacity: 1;
}

/* Icône du sélecteur du nombre de produits : position absolue. */
.nombIconSelect {
    position: absolute;
}

.enteteNavigateurBouton
{
    width: 70px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    background: #fff;
    font-size: 14px;
    line-height: 30px;
    color: #313342;
    float: left;
    margin-left: 10px;
    height: 32px;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
}
    .enteteNavigateurBouton span:focus {
        border-color: red;
    }
    .enteteNavigateurBouton span {
        line-height: 31px;
        display: inline-block;
        border-right: 1px solid #d9d9d9;
        padding: 0 15px;
        float: left;
        font-family: 'Nunito-Regular';
        font-style: normal;
        font-weight: 400;
    }

span#liste {
    border: none;
}
.barrePagination, #pagerListeProduit {
    display: block;
    width: 45%;
    position: absolute;
    z-index: 6;
    right: 15px;
}
span#pagerListeProduit {
    top: 1px;
}
.barrePagination {
    top: -71px;
}
.nombreDePage{
    margin-right: 20px;
}
.barrePagination .paginationProduit, #pagerListeProduit .paginationProduit {
    list-style: none;
    position: absolute;
    display: block;
    font-size: 14px;
    right: 0;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
}
.paginationProduit li.pageCourante 
{
    background: #FFFFFF;
    color: var(--couleur-theme);
    border-color: var(--couleur-theme);
}

.paginationProduit li {
    display: inline-block;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #BABABA;
    line-height: 22px;
    height: 32px;
    width: 32px;
    box-sizing: border-box;
    cursor: pointer;
    color: #313342;
    border-radius: 4px;
    font-size: 14px;
    padding-top: 5px;
    font-family: 'Nunito-Regular';
    font-style: normal;
}
.barrePagination .paginationProduit li.next, #pagerListeProduit .paginationProduit li.next {
    background: rgba(0,0,0,0) url(/ressource/image/webshop/templatePersonnalise/fleche_droite_pagination.png) no-repeat scroll 1px -1px !important;
    white-space: nowrap;
    text-indent: -9999px;
    background-color: #fff !important;
    border: 1px solid #BABABA;
    left: 1px;
    top: 12px;
    height: 32px;
}
.barrePagination .paginationProduit li.previous, #pagerListeProduit li.previous {
    background: rgba(0,0,0,0) url(/ressource/image/webshop/templatePersonnalise/fleche_gauche_pagination.png) no-repeat scroll 1px -1px !important;
    white-space: nowrap;
    text-indent: -9999px;
    background-color: #fff !important;
    left: 1px;
    top: 12px;
}

/*Type d'affichage*/
span.labelModeAffichage 
{
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*Style icone SVG du Type d'affichage*/
span.labelModeAffichage svg
{
    width: 32px;
    height: 32px;
    display: block;
    margin: 0;
    padding: 0;
}

/*Type d'affichage en mosaique désactivé*/
.icon-ic-mosaique 
{
    cursor: pointer;
    color: #D3D3D3 !important;
}

/*Type d'affichage en mosaique activé*/
.icon-ic-mosaique-active 
{
    cursor: pointer;
    color: var(--couleur-theme) !important;
}

/*Type d'affichage en liste désactivé*/
.icon-ic-liste
{
    cursor: pointer;
    color: #D3D3D3 !important;
}

/*Type d'affichage en liste activé*/
.icon-ic-liste-active 
{
    cursor: pointer;
    color: var(--couleur-theme) !important;
}

.troisPoints {
    background: url(/ressource/image/webshop/templatePersonnalise/trois_points.png) no-repeat scroll 3px 10px !important;
    width: 13px;
    display: inline-block;
    padding: 0 5px;
    text-indent: -70px;
    overflow: hidden;
}
span.line {
    position: absolute;
    width: 31px;
    height: 0px;
    border: 1px solid #D9D9D9;
    transform: rotate(90deg);
}
.dx-overlay-wrapper {
    top: 30px !important;
    left: 130px !important;
    z-index: 1000;
}
.dx-toast-success {
    background-color: #53D697 !important;
}
@font-face {
    font-family: 'Nunito-Regular';
    src: url('/ressource/police/Nunito/Nunito-Regular.ttf');
}

@font-face {
    font-family: 'Nunito-SemiBold';
    src: url('/ressource/police/Nunito/Nunito-SemiBold.ttf');
}

@font-face {
    font-family: 'Nunito-Bold';
    src: url('/ressource/police/Nunito/Nunito-Bold.ttf');
}

#detailDUnProduit {
    margin-left: 12px;
}

#blocMedias {
    float: left;
    margin-bottom: 12px;
    position: relative;
    width: 510px;
    height: 454px;
}

#blocDetailsCatalogueLigne {
    float: right;
    height: 410px;
    position: relative;
    width: 620px;
    font-size: 15px;
    text-align: left;
    margin-top: 43px;
}

#detailDUnProduit #quantiteRestante {
    left: 148px;
    top: 12px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0px;
    text-align: left;
    position:absolute;
}
#blocCaracteristique {
    float: left;
    width: 100%;
    margin-top: 10px;
}

#tableauDesCaracteristiques {
    visibility: visible;
    float: left;
    width: 1130px;
    font-family: 'Nunito-Regular' !important;
    border: 1px solid #E0E0E0;
    border-radius: 10px 10px 0px 0px;
    background: #FFFFFF;
    box-sizing: border-box;
}

    #tableauDesCaracteristiques caption {
        color: #484848 ;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 60px;
        text-align: left;
    }

    #tableauDesCaracteristiques tbody tr td {
        border-color: #eee;
        border-image: none;
        border-style: none none solid;
        border-width: medium medium 1px;
        color: #313342;
        font-size: 15px;
        padding: 5px 25px;
        font-family: 'Nunito-regular';
        margin-top: 40px;
    }

        #tableauDesCaracteristiques tbody tr td:first-child {
            font-size: 15px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            letter-spacing: 0em;
            text-align: left;
            font-family: Nunito-Regular;
            margin-top: 40px ;
            width: 270px;
        }

    #tableauDesCaracteristiques tbody tr td {
        height: 64px;
    }

#ajouterAuPanier 
{
    display: flex;
    background: var(--couleur-theme);
    border-radius: 4px;
    width: 497px;
    height: 44px;
    font-size: 15px;
    font-style: normal;
    text-align: center;
    color: var(--couleur-texte);
    align-items: center;
    justify-content: center;
    bottom: 0px;
    text-transform: uppercase;
    cursor:pointer;
}

/* Survol sur le bouton 'Ajouter au panier' */
#ajouterAuPanier:hover 
{
    color: var(--couleur-texte) !important;
    background-color: var(--couleur-secondaire85Pourcent);
}

#detailDUnProduit span.voirTarifsDeconnecte {
    width: 497px;
    height: 36px;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    position: relative;
}
div#infoPourPanier {
    /* position: relative; */
    position: absolute;
    bottom: 0px;
}

div#blocAjoutAuPanier .quantite {
    margin-right: 10px;
    display: inline-block;
    text-align: center;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    box-sizing: border-box;
    width: 85px;
    height: 42px;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #505050;
    margin-bottom: 20px;
}

/*Focus sur 'Quantité'*/
div#blocAjoutAuPanier .quantite:focus 
{
    border-color: var(--couleur-theme);
}

#valeurQuantiteEmballage {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0px;
    text-align: center;
    color: #313342;
    font-family: 'Nunito-Regular';
}

.imageMiniature {
    max-width: 88px;
    max-height: 88px;
    vertical-align: middle;
}

#slideshow-carousel .viewport {
    overflow: hidden;
    position: relative;
    width: 88px;
    height: 382px;
}
    #slideshow-carousel .viewport.avecMarge {
        margin-top: 16px;
    }
div#slideshow-carousel div.viewport ul.overview li
{
    margin-bottom: 10px;
    background: var(--couleur-secondaire10Pourcent);
    height: 88px;
}

#slideshow-carousel li a {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 88px;
    height: 88px;
}

#slideshow-carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
}
div#blocAjoutAuPanier {
    position: relative;
}
#detailDUnProduit .imageCatalogueFiche {
    left: auto !important;
    top: -20px !important;
    right: 60px !important;
    z-index: 3;
}

.imageCatalogueFiche {
    width: 45px;
    height: 45px;
    position: absolute;
    top: -6px;
    left: -55px;
    line-height: 50px;
    border-radius: 25px;
}

#designationArticle {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 33px;
    text-align: left;
    color: #313342;
}

#descriptionCourte {
    width: 492px;
    height: auto;
    overflow-y: auto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: left;
    max-height: 140px;
    font-family: Nunito-regular;
    color: #313342;
    margin-top: 80px;
    position: absolute;
}

div#infoPourArticle .referenceArticle {
    font-size: 15px;
    font-style: italic;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: left;
    color: #808080;
    top: 36px;
    margin-bottom: 15px;
}

#blocDetailsCatalogueLigne #retourALaListe {
    position: absolute;
    background: url(/ressource/image/webshop/templatePersonnalise/union.png) no-repeat scroll 0 0 #fff !important;
    width: 38px;
    height: 38px;
    cursor: pointer;
    right: 85px;
}

#slideshow-main {
    width: 410px;
    height: 410px;
    float: right;
    position: absolute;
    top: 43px;
    left: 97px;
}

#slideshow-carousel {
    float: left;
    width: 88px;
    height: 410px;
    margin-top: 43px;
}

    #slideshow-carousel .boutonNav {
        position: absolute;
        display: block;
        width: 88px;
        height: 16px;
    }

    #slideshow-carousel .suiv {
        bottom: 0;
        background: rgba(0,0,0,0) url(/ressource/image/webshop/templatePersonnalise/fleche_bas_carousel.png) no-repeat scroll 50% 0;
    }
    #slideshow-carousel .prev {
        background: rgba(0,0,0,0) url(/ressource/image/webshop/templatePersonnalise/fleche_haut_carousel.png) no-repeat scroll 50% 0;
    }

    #slideshow-carousel .nonVisible {
        visibility: hidden;
    }

#tooltipNomMedia {
    display: none;
    padding: 10px;
    position: absolute;
    border-radius: 4px;
    z-index: 20;
    font-size: 14px;
    left: 446px;
    background: #ececec;
    border: 1px solid rgba(185, 182, 184, 0.7);
    padding: 10px 20px;
    white-space: nowrap;
}

#slideshow-main .active > img, .imageUnique {
    cursor: zoom-in;
    max-height: 410px;
    max-width: 410px;
}

#slideshow-main li.active {
    display: block !important;
}

#slideshow-main li {
    width: 410px;
    height: 410px;
    display: none;
    position: relative;
}

#slideshow-main ul {
    margin: 0;
    padding: 0;
    width: 100%;
}

#infoPourArticle {
    height: 200px;
    width: 492px;
}

#infoPourPanier .bloc3 {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    color: #808080;
}

#infoPourPanier .bloc2 {
    height: 40px;
}

/* Bloc2 : marges de 16px en haut et en bas. */
.bloc2 {
    margin-top: 16px;
    margin-bottom:16px;
}

#tableauDesCaracteristiques #voirFichePDF
{
    font-size: 15px;
    line-height: 27px;
    color: var(--couleur-theme);
    position: absolute;
    top: 357px;
    right: 125px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#blocDetailsCatalogueLigne .unSeulPrixPourQuantite1 
{
    color: var(--couleur-theme);
    font-size: 24px;
    position: relative;
    float: left;
    top: -10px;
    left: 0px;
}

/* Prix unique dans les détails d'assortiment */
#ligneCatalogueDetailsAssortiment .unSeulPrixPourQuantite1 
{
    font-style: normal;
    font-family: 'Nunito-Regular';
    font-weight: 700;
    font-size: 16px;
    align-items: center;
    text-align: center;
    color: var(--couleur-theme);
    position: absolute;
    top: 35px;
    left: 85px;
}

/* Ajustement de la position de l'icône */
#tableauDesCaracteristiques #voirFichePDF:before 
{
    content: "";
    width: 30px;
    height: 30px;
    float: left;
    color: var(--couleur-theme);
}

#tableauDesCaracteristiques #voirFichePDF .iconePDF 
{
    display: block;
    margin-left: -2px;
}


div#grilleTarifaire .grilleTarifaireVisibility .prixCatalogueLigne {
    width: 100%;
}


img.imageUnique {
    position: absolute;
    top: 43px;
}

/* Image par défaut : position absolue, placée à 43px du haut, prend toute la largeur et hauteur. */
img.imageDefault {
    position: absolute;
    top: 43px;
    width:100%;
    height:100%;
}
div#grilleTarifaire .grilleTarifaireVisibility tr {
    display: inline-block;
}

div#grilleTarifaire .grilleTarifaireVisibility .colonneDUnite {
    color: #313342;
    font-size: 14px;
    text-align: left;
    position: relative;
    width: 90px;
    padding-left: 0px;
    font-weight: 600;
    font-family: 'Nunito-SemiBold';
}

div#grilleTarifaire .grilleTarifaireVisibility .colonneDePrix 
{
    font-style: normal;
    font-family: 'Nunito-Bold';
    font-size: 16px;
    color: var(--couleur-theme);
    text-align: right;
    padding-right: 27px;
}

/*Grille tarifaire compléte */
#grilleTarifaire .grilleTarifaire, #grilleTarifaire .prixCatalogueLigne 
{
    position: absolute;
    top: 90px;
    left: 0;
    width: auto;
    height: auto;
    background: var(--couleur-secondaire10Pourcent);
    border-radius: 4px;
    border-collapse: collapse;
}

/**blocLignesDetailsAssortiment***/
.blocLignesDetailsAssortiment {
    width: 120%;
    float: left;
    margin: 10px 0;
    margin-left: -10px;
    margin-top: 48px;
}

    .blocLignesDetailsAssortiment > label {
        display: block;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 27px;
        letter-spacing: 0em;
        text-align: left;
        color: #484848;
        margin-bottom: 25px;
    }

#ligneCatalogueDetailsAssortiment .unProduit.detailAssortiment.affichageAvecReferenceArticle {
    height: 284px;
    width: 220px;
    border-radius: 8px;
    border: 1px solid #E5E5E5;
    background: #FFFFFF;
    box-sizing: border-box;
    position: relative;
    text-align: center;
}

#ligneCatalogueDetailsAssortiment .conteneurImageProduit {
    text-align: center;
    text-align: center;
    background: #F5F5F5;
    height: 162px;
    width: 196px;
    border-radius: 4px;
    margin: 12px;
}

#ligneCatalogueDetailsAssortiment .detailsProduit {
    height: 90px;
}

#ligneCatalogueDetailsAssortiment .coefficientQuantiteAssortimentPersonalise {
    color: #979797;
    font-size: 14px;
    text-align: center;
    bottom: 24px;
    top: unset;
    left: 0;
    right: 0;
    position: absolute;
    font-weight: 600;
    width: unset;
}

#ligneCatalogueDetailsAssortiment .referenceArticle {
    text-align: center;
    font-size: 11px;
    color: #808080;
    top: 48px;
    position: unset;
}

/* cursor par default sur detail Assortiment.*/
.detailAssortiment .nomDeProduit {
    cursor: default !important;
}

#ligneCatalogueDetailsAssortiment .detailAssortiment .nomDeProduit {
    margin: 0 auto;
    font-size: 15px;
    line-height: 18px;
    cursor: initial;
    text-align: center;
    padding-top: 4px;
    font-family: 'Nunito-Bold';
    position: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 19px;
}

#ligneCatalogueDetailsAssortiment .filetAssortiment {
    display: none;
}

#ligneCatalogueDetailsAssortiment .conteneurImageProduit img {
    max-width: 196px;
    max-height: 162px;
    height: 100%;
    display: block;
    margin: 0 auto;
    cursor: zoom-in;
}

#slideshow-carousel .mirrored {
    display: none;
}

/* Positionnement de la pastille de quantité commandée sur l'image de la fiche article */
/* Position par défaut pour les articles avec slideshow (avec médias) */
#detailDUnProduit #blocTop .quantitePanierMosaique {
    position: absolute;
    top: 45px;
    left: 107px;
    width: 53px;
    height: 53px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    font-family: 'Nunito-Regular';
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    z-index: 10;
    line-height: 1;
    word-spacing: 100vw;
    box-sizing: border-box;
    text-align: center;
}

/* Position pour les articles sans média - quand il n'y a PAS de #slideshow-main */
#detailDUnProduit #blocTop:not(:has(#slideshow-main)) .quantitePanierMosaique {
    left: 10px;
}

/* Style pour les unités - fond vert */
#detailDUnProduit .quantitePanierMosaique.parUnite {
    background-color: #32CD32;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* Style pour les emballages - fond orange avec icône */
#detailDUnProduit .quantitePanierMosaique.parEmballage {
    background: url("/ressource/image/webshop/ic_emballage.png") no-repeat center bottom 5px #FF8C00;
    background-size: 22px;
    justify-content: flex-start;
    padding-top: 12px;
    padding-bottom: 12px;
}
.unProduit {
    width: 220px;
    height: 312px;
    display: inline-block;
    position: relative;
    margin-bottom: 13px;
    margin-right: 10px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    border-radius: 8px;
}

    .unProduit:hover {
        border: 1px solid var(--couleur-theme);
    }

/* Ligne d'en-tête d'assortiment : fond blanc, bordure et texte bleu, texte en gras. */
tr.enteteAssortiment {
    background: #FFFFFF !important;
    border: 1px solid #3F80FF;
    color: #3F80FF !important;
    font-weight: 600 !important;
    font-style: normal;
}

/* En-tête d'assortiment : fond blanc, bordure bleue, texte gris foncé. */
.enteteAssortiment {
    background: #FFFFFF;
    border: 1px solid #3F80FF;
    color: #313334;
}

/* Détail d'assortiment : fond bleu très clair, bordure bleue, texte gris foncé. */
.detailAssortiment {
    background: rgba(63, 128, 255, 0.06);
    border: 1px solid #3F80FF;
    color: #313334;
}

/* Détails d'assortiment : fond bleu très clair (légèrement différent), priorité élevée. */
.detailsAssortiment {
    background: rgba(63, 128, 255, 0.05) !important;
}

.conteneurImageProduit {
    width: 196px;
    height: 162px;
    background: #FFFFFF;
    border-radius: 4px;
    text-align: center;
    margin: 12px;
}

    .conteneurImageProduit img {
        max-width: 100%;
        max-height: 162px;
        display: block;
        margin: 0 auto;
        border-radius: 4px;
        cursor: pointer;
    }

.detailAssortiment .conteneurImageProduit img {
    cursor: default;
}

.nomDeProduit {
    font-size: 15px;
    line-height: 18px;
    text-align: center;
    color: #313342;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 0 15px;
    font-weight: 600;
    font-family: 'Nunito-Regular';
    font-style: normal;
    cursor: pointer;
}

.referenceArticle.classAvecQutRest {
    right: 10px !important;
    left: auto !important;
}

.listeProduitsContenuEnMosaique .referenceArticle {
    font-size: 12px;
    text-align: center;
    color: #818285;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 48px;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 600;
    padding: 2px;
}

.titreEnteteAssortiment {
    padding: 0 15px;
}

.conteneurBlocProduitEnMosaique {
    margin-top: 13px;
}

    .conteneurBlocProduitEnMosaique #quantiteRestante {
        position: absolute;
        left: 10px;
        bottom: 37px;
        min-height: 19px;
        display: inline-block;
        font-size: 12px;
        font-family: 'Nunito-Bold';
        line-height: 19px;
        text-align: center;
    }

span.voirTarifsDeconnecte {
    font-style: normal;
    display: block;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: var(--couleur-theme);
    border: 1px solid var(--couleur-theme);
    box-sizing: border-box;
    border-radius: 4px;
    width: 120px;
    height: 32px;
    margin: auto;
    line-height: 32px;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    cursor: pointer;
}

    /* Survol sur le bouton 'Voir nos tarifs' */
    span.voirTarifsDeconnecte:hover {
        background-color: var(--couleur-secondaire10Pourcent);
    }

.conteneurPrix {
    /*    line-height: 100px;*/
    position: absolute;
    left: 0;
    right: 0;
}

.unSeulPrixPourQuantite1 {
    font-style: normal;
    font-family: 'Nunito-Regular';
    font-weight: 700;
    font-size: 16px;
    align-items: center;
    text-align: center;
    color: var(--couleur-theme);
    position: absolute;
    top: 35px;
    left: 85px;
}

.conteneurQuantite {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
}

input.quantiteProduit {
    position: absolute;
    bottom: 0px;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 21px;
    text-align: center;
    width: 54px;
    height: 28px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    margin: auto;
    left: 0;
    right: 0;
}

    /* Focus sur prix */
    input.quantiteProduit:focus {
        border-color: var(--couleur-theme);
    }

.boutonAjoutMosaique {
    position: absolute;
    bottom: 0px;
    text-align: center;
    border-radius: 4px;
    margin: auto;
    right: 35px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    background-color: var(--couleur-theme);
    border: var(--couleur-theme);
}

    .boutonAjoutMosaique svg {
        color: var(--couleur-texte);
        display: block;
        margin-left: -2px;
    }

    /* Survol de la souris sur le bouton 'Ajouter au panier' */
    .boutonAjoutMosaique:hover {
        background-color: var(--couleur-secondaire85Pourcent);
    }

/* Vignette double : largeur forcée à 454px. */
.formatVignetteDouble {
    width: 454px !important;
}

    /* Image produit dans la vignette double : largeur max 100%, hauteur max 180px. */
    .formatVignetteDouble .conteneurImageProduit img {
        max-width: 100%;
        max-height: 180px;
    }

    /* Conteneur d'image produit dans la vignette double : largeur 417px, hauteur 180px. */
    .formatVignetteDouble .conteneurImageProduit {
        width: 417px;
        height: 180px;
    }

/* Image produit dans la vignette double (connecté) : hauteur max 180px. */
.formatVignetteDoubleConnecter .conteneurImageProduit img {
    max-height: 180px !important;
}

/* format Vignette Double Connecter pour un Seule Prix PourQuantite1*/
.formatVignetteDoubleConnecter .unSeulPrixPourQuantite1 {
    top: 17px;
    left: 185px;
}

/* Champ quantité produit dans la vignette double : centré par défaut */
.formatVignetteDouble input.quantiteProduit {
    left: 50%;
    margin-left: -70px;
}

.formatVignetteDouble .boutonAjoutMosaique {
    left: 50%;
    margin-left: -11px;
}

/* Repositionnement pour les vignettes doubles avec prix ou grille */
.formatVignetteDouble.unProduitAvecPrix input.quantiteProduit,
.formatVignetteDouble.affichageAvecGrille input.quantiteProduit {
    left: -20px;
    margin-left: 190px;
}

.formatVignetteDouble.unProduitAvecPrix .boutonAjoutMosaique,
.formatVignetteDouble.affichageAvecGrille .boutonAjoutMosaique {
    left: 130px;
    margin-left: 115px;
}

/* Croix d'emballage dans la vignette double : position absolue, style gris, à gauche 260px. */
.formatVignetteDouble .croixEmb {
    position: absolute;
    left: 260px;
    font-style: normal;
    line-height: 21px;
    text-align: center;
    color: #979797;
    bottom: 2px;
    font-family: 'Nunito-SemiBold';
    font-size: 13px;
    font-weight: 600;
}

/* Prix unique dans la grille de la vignette double : ligne verticale centrée. */
.affichageAvecGrille.formatVignetteDouble .unSeulPrixPourQuantite1 {
    line-height: 133px;
}

/* Quantité restante dans la vignette double avec prix : largeur 140px, texte à gauche, style noir, position absolue. */
.unProduitAvecPrix.formatVignetteDouble #quantiteRestante {
    width: 140px;
    text-align: left;
    min-height: 19px;
    display: block;
    font-size: 15px;
    color: #000;
    position: absolute;
    left: -330px;
    top: -2px;
}

/* Nom du produit dans la vignette double : largeur max 407px, hauteur 60px, texte gras, taille 19px, multi-ligne. */
.formatVignetteDouble .nomDeProduit {
    max-width: 407px;
    font-size: 19px;
    -webkit-line-clamp: 2;
    height: 60px;
    font-weight: bold;
}

/* Conteneur prix dans la grille de la vignette double : hauteur minimum 138px. */
.affichageAvecGrille.formatVignetteDouble .conteneurPrix {
    min-height: 138px;
}

/* Nom du produit dans la grille de la vignette double : hauteur 60px. */
.affichageAvecGrille.formatVignetteDouble .nomDeProduit {
    height: 60px;
}

/* Nom du produit dans la vignette double avec prix : hauteur 58px. */
.unProduitAvecPrix.formatVignetteDouble .nomDeProduit {
    height: 58px;
}

/* Grille tarifaire dans la grille de la vignette double : position décalée en bas et à gauche. */
.affichageAvecGrille.formatVignetteDouble .conteneurPrix .grilleTarifaire {
    bottom: 150px;
    left: 120px;
}

/* Cellules de la grille tarifaire dans la grille de la vignette double : texte taille 16px. */
.affichageAvecGrille.formatVignetteDouble .grilleTarifaire tr td {
    font-size: 16px !important;
}

.conteneurQuantite span.croixEmb {
    position: absolute;
    left: 41px;
    font-style: normal;
    line-height: 21px;
    text-align: center;
    color: #979797;
    bottom: 2px;
    font-family: 'Nunito-SemiBold';
    font-size: 13px;
    font-weight: 600;
}

table.grilleTarifaire tbody tr,
table.prixCatalogueLigne tbody tr {
    border-bottom: 1px solid #FFFFFF;
}


.listeProduitsContenuEnMosaique .unProduit .grilleTarifaireVisibility {
    display: none;
    position: absolute;
}

/* Tarifs compléte */
.grilleTarifaire {
    position: absolute;
    bottom: 10px;
    width: 196px;
    left: 13px;
    height: auto;
    background: var(--couleur-secondaire10Pourcent);
    border-radius: 4px;
    border-collapse: collapse;
}

.prixCatalogueLigne {
    position: absolute;
    bottom: 10px;
    width: 196px;
    left: 13px;
    height: auto;
    background: var(--couleur-secondaire10Pourcent);
    border-radius: 4px;
    border-collapse: collapse;
}

/*grille tarifaire format Vignette Double*/
.formatVignetteDouble .prixCatalogueLigne {
    position: absolute;
    bottom: 150px;
    width: 196px;
    left: 125px;
    height: auto;
    background: var(--couleur-secondaire10Pourcent);
    border-radius: 4px;
    border-collapse: collapse;
}

table.grilleTarifaire .restrictionNavigation,
table.prixCatalogueLigne .restrictionNavigation {
    line-height: 23px;
}

table.grilleTarifaire tbody:last-child tr:last-child td:first-child,
table.grilleTarifaire tbody:last-child tr:last-child td:first-child,
table.prixCatalogueLigne tbody:last-child tr:last-child td:first-child,
table.prixCatalogueLigne tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

table.grilleTarifaire tbody:last-child tr:last-child td:last-child,
table.prixCatalogueLigne tbody:last-child tr:last-child td:last-child {
    border-radius: 0 0 4px 0;
}

table.grilleTarifaire tbody:first-child tr:first-child td:first-child,
table.prixCatalogueLigne tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}

table.grilleTarifaire tbody:first-child tr:first-child td:last-child,
table.prixCatalogueLigne tbody:first-child tr:first-child td:last-child {
    border-radius: 0 4px 0 0;
}

.grilleTarifaire td.colonneDePrix.nonNaviguable, table.prixCatalogueLigne td.colonneDePrix.nonNaviguable {
    color: var(--couleur-theme);
    font-style: normal;
    font-family: 'Nunito-Bold';
    font-size: 15px;
    text-align: right;
    padding-right: 15px;
}

td.colonneDUnite {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 12px;
    font-family: 'Nunito-SemiBold';
    color: #313342;
}


.coefficientQuantiteAssortiment {
    background: #3F80FF;
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 36px;
    line-height: 43px;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    position: absolute;
    top: 20px;
    right: 20px;
    border: 1px solid #FFFFFF;
    font-family: 'Nunito-Regular';
    font-style: normal;
    margin: -5px -10px;
}

.filetAssortiment {
    display: none;
}

.rouge {
    clear: both;
    color: Red;
}

.orange {
    clear: both;
    color: Orange;
}

#listeProduits {
    display: block;
    position: relative;
}

div#tableauListeDesProduitsDX {
    width: 100%;
}

/* Ligne détail assortiment dans le tableau des produits : fond bleu très clair. */
#tableauListeDesProduitsDX .detailAssortiment {
    background: rgba(63, 128, 255, 0.05) !important;
}

/* Masque le panneau de chargement dans le tableau des produits. */
#tableauListeDesProduitsDX .dx-loadpanel {
    display: none !important;
}


#tableauListeDesProduitsDX > .dx-datagrid > .dx-datagrid-header-panel {
    float: none;
    border: none;
    padding: 0px 0px 0px 0px;
}

    #tableauListeDesProduitsDX > .dx-datagrid > .dx-datagrid-header-panel > .dx-toolbar {
        top: -67px;
        z-index: 6;
        position: absolute;
        left: 620px;
        width: 0 !important;
    }

/* Barre d'outils avant du tableau des produits : position absolue à gauche, affichage table, décalée de -3px vers le haut. */
#tableauListeDesProduitsDX .dx-toolbar-before {
    top: -3px;
    display: table;
    height: 100%;
    margin-left: -130px;
    position: absolute;
    float: left;
}

#tableauListeDesProduitsDX > .dx-datagrid > .dx-datagrid-headers {
    height: 44px;
    z-index: 10;
    background-color: #F4F4F4;
    display: block;
    border-bottom: none;
    color: #484848;
}

    #tableauListeDesProduitsDX > .dx-datagrid > .dx-datagrid-headers:hover {
        background-color: #EBECEC !important;
    }

/* Séparateur de colonnes du datagrid : priorité d'affichage avec z-index 100. */
#tableauListeDesProduitsDX > .dx-datagrid > .dx-datagrid-columns-separator {
    z-index: 100;
}

#tableauListeDesProduitsDX .dx-datagrid-rowsview .dx-row {
    height: 64px;
}

#tableauListeDesProduitsDX .dx-datagrid-headers .dx-header-row > td {
    background: #F4F4F4;
}

/* Survol d'une cellule d'en-tête du tableau Liste DEs Produits : fond gris clair . */
#tableauListeDesProduitsDX .dx-datagrid-headers .dx-header-row:hover > td {
    background: #EBECEC;
}

#tableauListeDesProduitsDX .dx-datagrid-headers .dx-header-row > td:hover {
    background: #f2f2f2;
}

#tableauListeDesProduitsDX .dx-header-row > td > .dx-datagrid-text-content {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: Normal;
    vertical-align: top;
    color: var(--column-label-grey, #08090C);
    font-family: Nunito-Regular;
}

/* En-tête d'assortiment du tableau des produits : fond blanc forcé. */
#tableauListeDesProduitsDX .enteteAssortiment {
    background: #FFFFFF !important;
}

#tableauListeDesProduitsDX .quantiteProduit, .quantiteCommandee, .prixEtiquettes, .commentaireEtiquettes, .codePartenaireInput, .codeEAN {
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    border-radius: 4px;
}

    /* Focus sur les inputs à modifier */
    #tableauListeDesProduitsDX .quantiteProduit:focus, .quantiteCommandee:focus,
    .prixEtiquettes:focus, .commentaireEtiquettes:focus, .codePartenaireInput:focus, .codeEAN:focus {
        border-color: var(--couleur-theme);
    }

#tableauListeDesProduitsDX .uneImageCataloguePourProduit {
    height: 48px;
    width: 48px;
    vertical-align: middle;
    border-radius: 50%;
}

/* Bouton 'Ajouter au panier' */
#tableauListeDesProduitsDX .ajoutPanier {
    border-radius: 4px;
    height: 32px;
    width: 32px;
    color: #fff !important;
    background-color: var(--couleur-theme);
    text-indent: -100px;
    overflow: hidden;
    border: none;
    cursor: pointer;
}

    /* Icône chariot sur bouton 'Ajouter au panier' */
    #tableauListeDesProduitsDX .ajoutPanier svg {
        color: var(--couleur-texte);
        display: block;
        margin-left: -2px;
    }

/* Produit déjà dans le panier */
#tableauListeDesProduitsDX .produitDansLePanier {
    background: var(--couleur-secondaire20Pourcent) !important;
}

/* Survol sur le bouton d'ajout au panier  */
#tableauListeDesProduitsDX .ajoutPanier:hover {
    background-color: var(--couleur-secondaire85Pourcent);
}

/* Image produit avec assortiment */
#tableauListeDesProduitsDX .imageProduitDetailsAssortimentModeListe {
    height: 48px;
    width: 48px;
    vertical-align: middle;
    border-radius: 50%;
    object-fit: cover;
}

/* Image produit */
#tableauListeDesProduitsDX .imageProduitModeListe {
    max-height: 48px;
    max-width: 48px;
    vertical-align: middle;
}


/* Bloc grille tarifaire ou prix catalogue */
[id^="conteneurPrixQuantitatifs-"] .grilleTarifaire,
[id^="conteneurPrixQuantitatifs-"] .prixCatalogueLigne {
    display: block;
    bottom: 0px;
    width: 196px;
    left: -24px;
    height: auto;
    background: var(--couleur-secondaire10Pourcent);
    border-radius: 4px;
    border-collapse: collapse;
    position: relative;
}

#tableauListeDesProduitsDX span.voirTarifs {
    padding: 5px 1px;
    cursor: pointer;
    width: 125px;
    display: block;
    text-align: left;
}

/* Voir nos tarifs */
#tableauListeDesProduitsDX span.tarifsAAfficher {
    color: var(--couleur-theme);
}

/* Voir nos tarifs */
#tableauListeDesProduitsDX span.tarifsAMasquer {
    background: url(/ressource/image/commun/masquer.png) no-repeat 109px 12px;
    color: var(--couleur-theme);
}

/* Curseur pointeur sur le lien "Voir tarifs" affiché dans le tableau produits. */
#tableauListeDesProduitsDX span.voirTarifs.tarifsAAfficher {
    cursor: pointer;
}

#tableauListeDesProduitsDX div[id*="conteneurPrixQuantitatifs"] {
    display: none;
}

/* Affichage grille tarifiaire sur 1 seule ligne */
#tableauListeDesProduitsDX td.prixStyle {
    width: 185px;
    height: 24px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 154.188%;
    color: var(--couleur-theme);
    font-family: 'Nunito-SemiBold';
    text-align: right;
}

#tableauListeDesProduitsDX .dx-widget input, .dx-widget textarea {
    line-height: 24px;
    background: #5B5B5B;
}

/*Bouton 'Voir nos tarifs' */
#tableauListeDesProduitsDX span.voirTarifsDeconnecte {
    position: inherit;
    display: block;
    font-family: 'Nunito-SemiBold';
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: var(--couleur-theme);
    border: 1px solid var(--couleur-theme);
    box-sizing: border-box;
    border-radius: 4px;
    height: 32px;
    line-height: 30px;
}

/* Tarifs compléte 'Replié (Voir nos tarifs)' */
#tableauListeDesProduitsDX .grilleTarifaire {
    height: auto;
    background: var(--couleur-secondaire10Pourcent);
    border-radius: 4px;
    border-collapse: collapse;
    position: relative;
    bottom: 0px;
}

#tableauListeDesProduitsDX td.colonneDUnite {
    padding-left: 12px;
    padding-right: 12px;
}

/* Ligne des prix catalogue */
#tableauListeDesProduitsDX .prixCatalogueLigne {
    height: auto;
    background: var(--couleur-secondaire10Pourcent);
    border-radius: 4px;
    border-collapse: collapse;
    position: relative;
    bottom: 0px;
}


#tableauListeDesProduitsDX .dx-datagrid .dx-row-lines > td {
    border-bottom: 1px solid #EBECEC;
}

.dx-widget {
    font-family: 'Nunito-Regular' !important;
}

    .dx-widget input, .dx-widget textarea {
        font-family: 'Nunito-Regular' !important;
        line-height: 1.2857;
        text-align: center;
    }

#tableauListeDesProduitsDX .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    height: 44px;
}

#tableauListeDesProduitsDX .dx-datagrid .dx-row > td {
    padding-top: 2px;
    padding-bottom: 0;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}

#tableauListeDesProduitsDX input.quantiteProduit, #tableauListePanierDX input.quantiteProduit {
    position: relative;
}

/*---Grille tarifaire*/
#tableauGrilleTarifaireModeListe {
    overflow-x: auto;
    padding: 0 0 0 0;
    margin-left: -6px;
    margin-right: -6px;
    /* Propriétés pour Mozilla Firefox */
    scrollbar-width: thin; /* Seules valeurs possibles : auto, thin ou none */
    scrollbar-color: #808080 transparent; /* Couleur du curseur (thumb) et de la piste (track) */
}

    #tableauGrilleTarifaireModeListe .grilleTarifaireModeColonne {
        border-collapse: collapse;
    }

    /* Personnalisation de la barre de défilement horizontale pour Chrome, Edge, Safari (WebKit) */
    #tableauGrilleTarifaireModeListe::-webkit-scrollbar {
        height: 12px;
    }

    #tableauGrilleTarifaireModeListe::-webkit-scrollbar-track {
        background: transparent;
    }

    #tableauGrilleTarifaireModeListe::-webkit-scrollbar-thumb {
        border-radius: 12px;
        background: var(--couleur-secondaire10Pourcent);
    }

    #tableauGrilleTarifaireModeListe .grilleTarifaireModeColonne tbody {
        margin: 0;
    }

        #tableauGrilleTarifaireModeListe .grilleTarifaireModeColonne tbody td {
            padding: 0px 5px;
            max-width: inherit;
            height: 30px;
            text-align: center;
            min-width: 65px;
        }

    /*Grille tarifiaire affichage en colonne */
    #tableauGrilleTarifaireModeListe .colonneDUnite {
        font-family: 'Nunito-SemiBold';
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 154.19%;
        color: #313342;
        background: var(--couleur-secondaire10Pourcent);
    }

    /*Affichage prix multiple en mode liste*/
    #tableauGrilleTarifaireModeListe .colonneDePrix {
        font-family: 'Nunito-SemiBold';
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        align-items: center;
        color: var(--couleur-theme);
        background: var(--couleur-secondaire10Pourcent);
    }

.dx-scrollbar-horizontal.dx-scrollbar-hoverable .dx-scrollable-scroll .dx-scrollable-scroll-content {
    border-radius: 9px;
    background: #808080;
    height: 10px;
}

.dx-scrollbar-horizontal.dx-scrollbar-hoverable.dx-state-hover, .dx-scrollbar-horizontal.dx-scrollbar-hoverable.dx-scrollable-scrollbar-active {
    background: #E6E6E6;
    height: 12px !important
}

.dx-scrollbar-horizontal.dx-scrollbar-hoverable {
    height: 6px;
    border-radius: 9px;
}

div#contenuPanier {
    width: 1440px;
    border: 1px solid #e5e5e5;
    border-top: 0;
    border-bottom: 0;
    display: inline-block;
    height: auto;
}
div#tableauListePanierDX {
    width: 1400px;
    margin-left: 20px;
    margin-right: 20px;
}

    div#tableauListePanierDX .dx-toolbar-center {
        top: 0px;
        display: table;
        height: 100%;
    }

    div#tableauListePanierDX .dx-toolbar-before {
        top: 20px;
        display: table;
        height: 100%;
        margin-left: 0px;
        position: absolute;
        float: left;
    }

    div#tableauListePanierDX .dx-toolbar-before {
        top: 0px;
        margin-left: 0px;
    }

div#tableauListePanierDX  .dx-toolbar .dx-texteditor {
    top: -195px;
}

/* Conteneur d'éléments de la barre d'outils du tableau panier : hauteur automatique. */
div#tableauListePanierDX .dx-toolbar .dx-toolbar-items-container {
    height: auto;
}

#tableauListePanierDX .dx-datagrid-headers .dx-header-row > td {
    background: #F4F4F4 ;
}

/* Survol d'une cellule d'en-tête du tableau Liste Panier : fond gris clair . */
#tableauListePanierDX .dx-datagrid-headers .dx-header-row:hover > td {
    background: #EBECEC ;
}

#tableauListePanierDX .dx-datagrid-headers .dx-header-row > td:hover {
    background: #f2f2f2 ;
}

/* Panneau d'en-tête du datagrid fournisseur dans le panier : hauteur 58px . */
#tableauListePanierDX .dx-datagrid-header-panel.fournisseur {
    height: 58px;
}

/* Panneau d'en-tête du datagrid du panier : sans padding. */
#tableauListePanierDX .dx-datagrid-header-panel {
    padding: 0px;
}

#tableauListePanierDX > .dx-datagrid > .dx-datagrid-headers {
    color: #484848;
    touch-action: pinch-zoom;
    border-bottom: none;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    background-color: #F4F4F4;
    height: 44px !important;
}

/*tableau Liste Panier header row height  44px */
#tableauListePanierDX .dx-datagrid-headers .dx-header-row {
    height: 44px !important;
}

/* En-têtes du tableau de panier : force hauteur fixe et alignement vertical, réinitialise le padding */
#tableauListePanierDX .dx-datagrid-headers .dx-header-row > td {
    height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle;
}

/* Première ligne du tableau panier : hauteur forcée à 64px. */
#tableauListePanierDX .dx-datagrid-rowsview .dx-row.dx-row-lines:first-child {
    height: 64px !important;
}

/* Toutes les lignes du tableau panier : hauteur forcée à 64px. */
#tableauListePanierDX .dx-datagrid-rowsview .dx-row {
    height: 64px !important;
}
.dx-datagrid-nowrap .dx-header-row > td > .dx-datagrid-text-content {
    white-space: nowrap;
    color: #08090C;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    text-align: center;
}

#tableauListePanierDX .dx-datagrid-headers .dx-datagrid-content {
    height: 44px;
}


/* En-têtes du tableau panier : marge inférieure de 1px. */
#tableauListePanierDX .dx-datagrid-headers{
    margin-bottom: 1px;
}

#tableauListePanierDX td.prixStyle.numeriqueTri.dx-link {
    text-decoration: none;
}
#tableauListePanierDX .dx-datagrid .dx-row.dx-data-row > td.prixStyle 
{
    color: var(--couleur-theme);
    font-family: 'Nunito-SemiBold';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}

#tableauListePanierDX #supprimerLigneOperation {
    display: block;
    background: url(/ressource/image/webshop/templatePersonnalise/trash.svg) no-repeat 3px #FFFFFF;
    width: 24px;
    height: 24px;
    cursor: pointer;
    text-indent: -100px;
    overflow: hidden;
    margin-left: auto;
}

/* Lignes de données du tableau panier : hauteur forcée à 64px. */
#tableauListePanierDX .dx-datagrid .dx-row.dx-data-row > tr {
    height: 64px !important;
}

#tableauListePanierDX .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    /* identical to box height */
    /* Title grey */
    color: #484848;
}
#tableauListePanierDX .dx-datagrid .dx-row-lines > td {
    border-bottom: 1px solid #EBECEC;
}

#tableauListePanierDX .imageCatalogue {
    width: 48px;
    height: 48px;
}
#tableauListePanierDX .dx-datagrid .dx-row.dx-data-row > td {
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    padding-top: 3px;
    padding-bottom: 3px;
    color: #313342;
    height: 64px;
}

.masqueRondMedia {
    height: auto;
    width: auto;
    max-width: 48px;
    max-height: 48px;
    /*clip-path: ellipse(25px 25px at 50%);*/
}

.catalogueInvalide {
    background-color: #c92828 !important;
    opacity: 0.7;
}
 /********************************************************************
 FORMULAIRE
*********************************************************************/
.erreurSaisie {
    border: 1px solid #EE3535 !important;
    color: #EE3535 !important;
}

.inputFormulaire {
    border: 1px solid #BABABA;
    height: 42px;
    border-radius: 4px;
    color: #313342;
    font-size: 15px;
    padding: 1px 10px;
    font-weight: 400;
    line-height: 20px;
    font-family: 'Nunito-Regular' !important;
    font-style: normal;
}


    /* float label pour le popup inscription webshop*/
    .inputFormulaire.has-float-label label,
    .has-float-label > span {
        transition: all 0.2s ease;
    }

    .inputFormulaire:focus::placeholder {
        opacity: 0;
        transition: opacity 0.2s ease;
    }

.has-float-label .form-control::-webkit-input-placeholder {
    opacity: 0;
}

.textareaFormulaire {
    height: 105px !important;
    width: 517px !important;
    resize: none;
    padding-top: 12px;
    border-radius: 1px;
}


/* Ligne de formulaire Webshop : marges horizontales fixes pour centrer le contenu */
.ligneLabelEtInputWebshop {
    margin: 0px 60px 0px 60px;
}

input#boutonAnnulerSupprimer, #bouttonNon {
    background: #fff;
    color: var(--couleur-theme);
    border: 1px solid var(--couleur-theme);
    float: left;
    margin-right: 23px;
    height: 36px;
    width: 132px;
    border-radius: 4px;
    display: inline-block;
    line-height: 36px;
    cursor: pointer;
    font-size: 15px;
    text-align: center;
    text-transform: uppercase;
    padding: 0px;
}

    /* Bouton 'Non' du popup 'Valider les modifications' */
    #bouttonNon:hover {
        background-color: var(--couleur-secondaire10Pourcent);
    }

/* Bouton "Supprimer Pop up" au survol : fond rouge vif. */
.boutonSupprimerPopup:hover {
    background-color: #F15757 !important;
}

.validationOuAnnulerPopup, #bouttonPopupMiseAJourPanier {
    margin: 32px auto;
    width: 300px;
    text-align: center;
    height: 37px;
}

    .boutonEnBas, .validationOuAnnulerPopup input[type="button"], #bouttonOUI {
        height: 36px;
        width: 132px;
        border-radius: 4px;
        background: var(--couleur-theme);
        border: none;
        display: inline-block;
        line-height: 36px;
        cursor: pointer;
        font-size: 15px;
        text-align: center;
        text-transform: uppercase;
        padding: 0px;
    }

.boutonEnBas, #bouttonOUI {
    color: var(--couleur-texte);
}

.validationOuAnnulerPopup input[type="button"] {
    color: #fff;
}

/* Survol de la souris sur le bouton 'Oui' du popup 'Valider les modifications' */
#bouttonOUI:hover {
    background-color: var(--couleur-secondaire85Pourcent);
}

/* Bouton en bas : marges de 30px, décalé à gauche de 220px. */
.boutonEnBas {
    margin: 30px 30px 30px 30px;
    margin-left: 220px;
}

/* Survol de la souris sur le bouton 'Envoyer' du popup 'Inscription' */
.boutonEnvoyerInscription:hover {
    background-color: var(--couleur-secondaire85Pourcent);
}

/* Message de popup : texte centré, marges verticales, police Nunito, texte gris foncé, taille 18px, gras. */
.messagePopup {
    text-align: center;
    margin-left: -17px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: nonito-regular;
    color: #313342;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* Colonne à largeur variable : hauteur fixe 450px, défilement automatique si besoin. */
.largeurColonne {
    overflow: auto;
    height: 450px;
}

.dateModale {
    display: inline-block !important;
    opacity: 1 !important;
}

/*Style de l'icône de fermeture */
.iconeFermeture, iconeFermetureFenetreLogin {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 24px;
    width: 13px;
    color: var(--couleur-texte);
}

#layoutPopup, #layoutChargement, #layoutInscriptionWebshop, #layoutLogin, #layoutPopupConditionGeneral, #layoutSupprimerWebshop, #layoutPopupRecapAjoutPanier, #layoutPopupMiseAJourPanier {
    position: fixed;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100%;
    z-index: 10;
    display: none;
    cursor: default;
    background: rgba(13, 13, 13, 0.3);
    backdrop-filter: blur(8px);
}

#chargement.webshopChargement img {
    width: auto;
}

/* Place le layout de chargement au-dessus des autres popups pour garantir l'affichage du loader. */
#layoutChargement {
    z-index: 17 !important;
}

#chargement.webshopChargement {
    position: fixed;
    display: none;
    width: 150px;
    height: 150px;
    margin: 0 0 0 -75px;
    padding: 15px;
    text-align: center;
    top: 35%;
    left: 50%;
    z-index: 17;
}

.contenuPopup, .contenuPopupLogin {
    display: none;
    width: 498px;
    position: fixed;
    z-index: 14;
    top: 30%;
    left: 55%;
    background: #fff;
    box-shadow: 0 0 5px 2px #b3b3b3;
    -moz-box-shadow: 0 0 5px 2px #b3b3b3;
    -webkit-box-shadow: 0 0 5px 2px #b3b3b3;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
}

#justificationsPrix {
    position: fixed;
    top: 5% !important;
}

#divScrollTableau {
    overflow: auto;
    max-height: 500px;
    max-width: 100%;
    padding-bottom: 20px;
}

/* Liste des largeurs de colonnes : largeur fixe de 750px. */
.listeLargeursColonnes {
    width: 750px;
}

/* Grille de renommage des colonnes du tableau panier : largeur max 750px, hauteur min 550px. */
.gridRenommageColonnes_tableauListePanierDX {
    max-width: 750px;
    min-height: 550px;
}

.titrePopup, .texteFenetreLogin, #titreAlerteCGV {
    text-align: center;
    font-size: 18px;
    height: 48px;
    line-height: 50px;
    background: var(--couleur-theme);
    padding: 5px 30px 5px 10px;
    margin: 0 0 10px;
    -moz-border-radius: 8px 8px 0px 0px;
    border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    font-family: 'Nunito-SemiBold'
}

.texteFenetreLogin, #titreAlerteCGV {
    color: var(--couleur-texte);
}

.titrePopup {
    color: #fff;
}

    .titrePopup.couleurtextePersonnalisee {
        color: var(--couleur-texte);
    }

.phrasePopup {
    margin: 30px auto;
    color: #313334;
    font-size: 16px;
    text-align: center;
    font-weight: 400;
    line-height: 20px;
    font-family: 'Nunito-Regular';
    font-style: normal;
    margin-top: 30px;
}

/* Bouton 'Valider' */
.bouttonValiderPopup {
    margin: 30px 30px 30px 30px;
    margin-left: 300px;
    background: var(--couleur-theme);
    height: 36px;
    width: 132px;
    border-radius: 4px;
    color: #FFFFFF;
    border: none;
    display: inline-block;
    line-height: 36px;
    cursor: pointer;
    font-size: 15px;
    text-align: center;
}

    /* Survol de la souris sur le bouton 'Valider' */
    .bouttonValiderPopup:hover {
        background: var(--couleur-secondaire85Pourcent);
    }

/****************************/
/****CGV*****/
/****************************/
#popupConditionGeneral #titreAlerteCGV {
    padding: 0px 30px 5px 10px;
}

#popupConditionGeneral {
    display: none;
    width: 720px;
    position: fixed;
    z-index: 14;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 0 0 5px 2px #b3b3b3;
    -moz-box-shadow: 0 0 5px 2px #b3b3b3;
    -webkit-box-shadow: 0 0 5px 2px #b3b3b3;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
}

#messageConditionGeneral {
    height: auto;
    width: 94.5%;
    min-height: 60px;
    margin: 11px 0px 0 20px;
    font-size: 15px;
    max-height: 550px;
    overflow: auto;
    text-align: left;
    margin-top: 20px;
}

#lienPdf {
    display: none;
    width: 260px;
    font-size: 15px;
    margin: 20px 20px 0;
    line-height: 28px;
    margin-top: 30px;
}

#validationConditionGeneral {
    display: flex;
    width: auto;
    font-size: 14px;
    margin: 24px 19px -19px 26px;
    margin-top: 25px;
    margin-left: 23px;
}

    #validationConditionGeneral label .texteLabel {
        text-align: justify;
        line-height: 1.4;
        color: #5B5D65;
        font-family: 'Nunito-Regular';
        font-size: 14px;
        font-weight: 400;
        display: inline-block;
        position: relative;
        top: 2px;
    }

    /*Style de la case à cocher non active*/
    #validationConditionGeneral input[type="checkbox"] {
        display: none;
    }

    #validationConditionGeneral label::before {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 1px solid #bababa;
        border-radius: 4px;
        background-color: #fff;
        margin-right: 8px;
        vertical-align: middle;
        position: relative;
        top: 1px;
    }

    #validationConditionGeneral input[type="checkbox"]:checked + label::before {
        background-color: var(--couleur-theme);
        border-color: var(--couleur-theme);
        content: '✔';
        color: #fff;
        font-size: 11px;
        text-align: center;
        line-height: 17px;
        font-weight: bold;
        padding-left: 1px;
    }

    /* Couleur du texte et la case lorsqu’elle est active */
    #validationConditionGeneral input[type="checkbox"]:checked + label {
        color: var(--couleur-theme);
    }

/* Couleur du bouton désactivé */
#bouttonValiderPopup:disabled {
    background-color: var(--couleur-theme);
    color: #fff;
    cursor: not-allowed;
    opacity: 0.5;
}

svg.iconeLienPdf {
    margin-top: 10px;
    margin-right: -10px;
    margin-bottom: -10px;
    color: var(--couleur-theme);
}

#lienPdf .lienPdf {
    color: var(--couleur-theme);
    cursor: pointer;
    font-size: 15px;
    font-family: 'Nunito-SemiBold';
    margin-left: 13px;
}

input#bouttonFermerPopup {
    margin: 10px auto !important;
    left: 100px;
    position: relative;
}

    input#bouttonFermerPopup:hover {
        background: var(--couleur-theme);
    }

input#bouttonValiderPopup {
    margin: 0 16px !important;
    display: inline-block;
    border: 1px solid var(--couleur-theme);
}


    input#bouttonValiderPopup:hover {
        background: var(--couleur-secondaire85Pourcent);
    }

input#bouttonAnnulerPopup {
    margin: 0 16px !important;
    display: inline-block;
    border: 1px solid var(--couleur-theme);
    background: #fff;
    color: var(--couleur-theme);
}

    input#bouttonAnnulerPopup:hover {
        background: var(--couleur-secondaire10Pourcent);
    }

input#bouttonAnnulerPopup, input#bouttonValiderPopup {
    text-align: center;
    line-height: 36px;
}

div#boutonPopupCGV {
    width: 333px;
    margin: 25px auto;
}
/****************************/
/****mot de passe oublie*****/
/****************************/
#emailMPO {
    width: 295px;
    height: 36px;
}

/* Champ email MPO : décalé de 26px vers la droite. */
.emailMPO {
    left: 26px;
}

#formulaireMotDePasseOublie {
    height: 265px;
    width: 498px;
    margin: -15px 0 0 -360px;
}

    #formulaireMotDePasseOublie .boutonMOPWebshop {
        display: block;
        margin: 5px auto;
    }

/* Survol sur le bouton 'Réinitialiser' du popup 'Mot d epasse oublié' */
.boutonMOPWebshop:hover {
    background-color: var(--couleur-secondaire85Pourcent);
}

.contenuPopupMotDePasseOublier {
    position: fixed;
    z-index: 11;
    display: none;
    background: #fff;
    top: 20%;
    left: 50%;
}

.ligneLabelEtInputPassword {
    text-align: center;
}
/****************************/
/****Login VOIR NOS TARIF*****/
/****************************/
#fenetreLogin {
    height: 430px;
    width: 576px;
    margin: -100px 0 0 -370px;
}

span.texteIntroLogin {
    font-weight: 700;
    text-align: left;
}

#fenetreLogin #seConnecter {
    margin: 15px auto;
}

#fenetreLogin .phrasePopup {
    text-align: left !important;
    margin: 30px 40px 25px;
}

#fenetreLogin #labelResterConnecte, #fenetreLogin #motDePasseOublieHOL, #fenetreLogin #sinscrire {
    font-size: 14px;
    font-family: 'Nunito-Regular';
}

#fenetreLogin #identification {
    margin: 10px 110px;
    position: relative;
}

.contenuPopup #motDePasseOublieHOL {
    position: relative;
    right: 26px;
}

#loginBoxErreur {
    position: absolute;
    top: -22px;
    font-size: 12px;
    color: red;
}

span#loginErreur {
    position: absolute;
    top: 35px;
    font-size: 12px;
    color: red;
}
/****************************/
/****Inscription webshop*****/
/****************************/
/****************************/
#fenetreInscriptionWebshop {
    display: none;
    width: 679px;
    height: auto;
    margin: -200px 0 0 -435px;
    z-index: 16;
}
/* Contenu de la popup d'inscription : hauteur fixe 678px avec défilement vertical. */
#contenuPopupInscription {
    overflow-y: scroll;
    height: 678px;
}

/* Bloc avec label flottant : largeur forcée à 540px. */
.has-float-label {
    width: 540px !important;
}

/* Champs de formulaire en focus : pas de contour, bordure et ombre turquoise. */
#denominationSociete:focus, #numeroSiret:focus, #identificationTVA:focus, #nom:focus, #prenom:focus, #adresse1:focus, #adresse2:focus, #codePostal:focus, #ville:focus, #emailCompte:focus, #telephone1Compte:focus, #mobile:focus, #commentaire:focus, #emailMPO:focus {
    outline: none;
    border-color: var(--couleur-theme);
    box-shadow: var(--couleur-theme);
}

#fenetreInscriptionWebshop .inputFormulaire {
    width: 517px;
    display: block;
}

    #fenetreInscriptionWebshop .inputFormulaire.widthSpecifiqueNom {
        width: 517px;
    }

    #fenetreInscriptionWebshop .inputFormulaire.widthSpecifiquePrenom {
        width: 517px;
    }

    #fenetreInscriptionWebshop .inputFormulaire.widthSpecifiqueCP {
        width: 517px;
    }

    #fenetreInscriptionWebshop .inputFormulaire.widthSpecifiqueV {
        width: 517px;
    }

    #fenetreInscriptionWebshop .inputFormulaire.widthSpecifiqueTel {
        width: 517px;
    }

    #fenetreInscriptionWebshop .inputFormulaire.widthSpecifiqueMobile {
        width: 517px;
    }

#fenetreInscriptionWebshop .divSpecifique .inputFormulaire {
    display: inline-block !important;
}

#contenuPopupInscription hr {
    width: 540px;
    border: 1px solid #DCDCDC
}

#labelCommentaire {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    margin-left: 2px;
}

#fenetreInscriptionWebshop span.blocInputInscription {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    font-family: 'Nunito-Regular';
    font-style: normal;
}

#fenetreInscriptionWebshop span.blocInputInscription {
    text-align: left;
    display: block;
    margin-left: 64px;
    margin-top: 32px;
    margin-bottom: 12px;
}

#fenetreInscriptionWebshop .boutonEnvoyerInscription {
    display: block;
}

.ligneLabelEtInputWebshop.inputRobot {
    height: 42px;
    width: 267px;
    border-radius: 4px;
    border: 1px solid #BABABA;
    margin: 10px 61px;
    background: #F9F9F9 url(/ressource/image/webshop/templatePersonnalise/RecaptchaLogo.png) no-repeat scroll 95%;
}

    .ligneLabelEtInputWebshop.inputRobot label {
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 42px;
        letter-spacing: 0em;
        text-align: left;
        width: 233px;
        padding-top: 13px;
        padding-bottom: 13px;
        padding-right: 82px;
    }

input#jeNeSuisPasUnRobot {
    float: left;
    margin: 15px 10px;
}

    input#jeNeSuisPasUnRobot:focus-visible {
        outline: 2px solid #299AA0;
        outline-offset: 2px;
        background-color: var(--couleur-theme);
    }

/* Correction spécifique Firefox pour l'alignement du captcha dans le template 2 */
@-moz-document url-prefix() {
    .ligneLabelEtInputWebshop.inputRobot {
        display: flex;
        align-items: center;
        padding: 0;
    }

    input#jeNeSuisPasUnRobot {
        float: none;
        order: 1;
        margin: 0 10px 0 10px;
        flex-shrink: 0;
    }

    .ligneLabelEtInputWebshop.inputRobot label {
        order: 2;
        line-height: 1.2;
        padding: 0;
        margin: 0;
        display: inline-block;
        vertical-align: middle;
        width: auto;
        white-space: nowrap;
    }
}

/**********************************************/
/****************************/
/****Supprimer Webshop*****/
/****************************/
#fenetreSupprimerWebshop .titrePopup {
    padding: 0px 30px 5px 10px;
}

#fenetreSupprimerWebshop {
    display: none;
    width: 498px;
    position: fixed;
    z-index: 14;
    top: 30%;
    left: 36%;
    background: #fff;
    box-shadow: 0 0 5px 2px #b3b3b3;
    -moz-box-shadow: 0 0 5px 2px #b3b3b3;
    -webkit-box-shadow: 0 0 5px 2px #b3b3b3;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
}

    #fenetreSupprimerWebshop .titrePopup {
        background: #ee3535;
    }

    #fenetreSupprimerWebshop input#boutonAnnulerSupprimer {
        color: #EE3535;
        border: 1px solid #EE3535;
    }

/* Bouton "Annuler supprimer" au survol : fond rose très clair. */
input#boutonAnnulerSupprimer:hover {
    background-color: #fdebeb;
}

#fenetreSupprimerWebshop input#boutonSupprimer {
    background: #EE3535;
}

    /* Bouton "Supprimer" dans la fenêtre Webshop au survol : fond rouge semi-transparent. */
    #fenetreSupprimerWebshop input#boutonSupprimer:hover {
        background: rgba(238, 53, 53, 0.85);
    }

#fenetreSupprimerWebshop .phrasePopup {
    height: auto;
    min-height: 60px;
    width: 100% !important; 
    max-width: 390px;
    margin: 40px auto 0 auto !important; 
    padding-top: 5px;
    font-size: 16px;
    text-align: center !important; 
    display: block;
}
/**********************************************/
/****************************/
/****MAJ PANIER *****/
/****************************/

#alertePopupMiseAJourPanier {
    display: none;
    width: 498px;
    position: fixed;
    z-index: 14;
    top: 20%;
    left: 35%;
    background: #fff;
    box-shadow: 0 0 5px 2px #b3b3b3;
    -moz-box-shadow: 0 0 5px 2px #b3b3b3;
    -webkit-box-shadow: 0 0 5px 2px #b3b3b3;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
}

#messagePopupMiseAJourPanier {
    height: auto;
    width: 96.5%;
    min-height: 60px;
    margin: 25px 0px 0 20px;
    font-size: 16px;
    max-height: 300px;
    overflow: auto;
}

/*preogressbar panier*/
.blockBarreEtapePregression {
    width: 80%;
    margin: 0 auto;
}
ul.progressbar {
    counter-reset: step;
    width: 100%;
    min-height: 60px;
    margin: 20px auto;
    padding: 0;
    font-family: 'Nunito-SemiBold';
}

.progressbar li {
    list-style-type: none;
    float: left;
    position: relative;
    text-align: center;
    width: 20%;
    font-size: 12px;
    color: #818285;
}
ul.progressbar.avecPayement.avecLivraison li {
    width: 15% !important;
}

ul.progressbar li.active 
{
    cursor: pointer;
    color: var(--couleur-theme);
}

/* Étape active et complétée sans clic : retire le contenu du ::before dans la barre de progression. */
ul.progressbar li.completed.active.sansClique:before {
    content: "";
}

/* La ligne de progression avec l'icône */
.progressbar li.active:before
{
    background-color: var(--couleur-theme);
    color: var(--couleur-texte);
    content: "✓";
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
}

/* La ligne de progression */
.progressbar li.active:after 
{
    background-color: var(--couleur-theme);
    content: "";
}

.progressbar li:before, .progressbar li:after {
    background-color: #ECEBED;
    color: #ECEBED;
}

.progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 28px;
    height: 28px;
    line-height: 20px;
    display: block;
    text-align: center;
    margin: 0 auto 5px auto;
    border-radius: 50%;
}

.progressbar li:first-child:after {
    content: none;
}

.progressbar li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    top: 8px;
    left: -50%;
    z-index: -1;
    top: 10px;
}

/*boutons barre de navigation*/
.blockGestionCommande {
    text-align: left;
    width: 100%;
    float: left;
    position: relative;
    font-family: 'Nunito-Regular';
    margin-bottom: 44px;
    margin-left: 12px;
}

h2#titrePanier {
    margin: 10px;
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 10px;
    z-index: -1;
    font-family: 'Nunito-SemiBold';
    line-height: 13px;
    color: #313342;
    font-weight: 600;
    font-size: 24px;
}

/* Icône du panier : taille 24px, marge à droite de 8px, ajustement vertical négatif. */
.iconMonPanier {
    height: 24px;
    width: 24px;
    margin-right: 8px;
    margin-bottom: -3px;
}

/* Icône d'expédition : taille 24px, marge à droite de 12px, ajustement vertical négatif. */
.iconExpedition {
    height: 24px;
    margin-right: 12px;
    margin-bottom: -4px;
    width: 24px;
}

/* Icône de tâche : taille 24px, marge à droite de 12px, ajustement vertical négatif. */
.iconTask {
    height: 24px;
    margin-right: 12px;
    margin-bottom: -3px;
}

/* Icône d'adresse : taille 24px, marge à droite de 5px, ajustement vertical négatif. */
.iconAdress {
    height: 24px;
    margin-right: 5px;
    margin-bottom: -3px;
}

.blockBoutonLivraison {
    display: none;
}
.blockBoutonRecapCommande {
    display: none;
}
#sauvegarderCommande {
    display: none;
}
.blockBoutonCommandeCouleur {
    float: right;
    margin-right: 32px;
}
span.blockBoutonCommandeNoir,
span.blockBoutonRetourNoir {
    margin-left: 20px;
}
.couleur1 
{
    background: var(--couleur-theme);
    border: 1px solid var(--couleur-theme);
    color: var(--couleur-texte);
}

.couleur2 {
    border: 1px solid #53D697;
    color: #fff;
    background: #53D697;
}

    /* Élément avec la classe couleur2 au survol : fond vert moyen. */
    .couleur2:hover {
        background-color: #49C188;
    }

.couleur3
{
    border: 1px solid var(--couleur-theme);
    color: var(--couleur-theme);
    background: #FFFFFF;
}
.couleur4 {
    border: 1px solid #EE3535;
    color: #EE3535;
    background: #FFFFFF;
    position: relative;
    left: -15px;
    top: 1px;
}
.couleur2.desactive {
    background: #99D9DD;
    border: 1px solid #99D9DD;
}

/*Bouton désactivé si aucune adresse de livraison n'est choisie*/
#validerChoixAdresse.passerCommande.couleur1.etapeSuivante.iconFlechDroit.desactive 
{
    background: var(--couleur-secondaire50Pourcent);
    border: 1px solid var(--couleur-secondaire50Pourcent);
    color: var(--couleur-texte);
    cursor: not-allowed !important;
    opacity: 0.5;
    pointer-events: none;
}

.passerCommande {
    width: 215px;
    Height: 36px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    font-family: 'Nunito-SemiBold' !important;
    margin: 10px;
}
/* Bouton étape suivante */
.etapeSuivante 
{
    width: 220px;
    padding: 0px 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Survol sur les boutons */
#boutonLivraison:hover, #retourAArriere:hover, #afficherRecap:hover 
{
    background-color: var(--couleur-secondaire85Pourcent);
}

/* Survol sur le bouton 'Passer commande' */
#passerCommande.etapeSuivante:hover
{
    background-color: var(--couleur-secondaire85Pourcent);
}

/* Bouton supprimer commande au survol : fond rose très clair. */
#supprimerCommande:hover {
    background-color: #FFF4F4;
}

/* Icône corbeille : padding à gauche, image SVG de poubelle à gauche, taille 22px. */
.iconTrash {
    padding-left: 20px;
    background-image: url('/ressource/image/webshop/templatePersonnalise/trash.svg');
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 22px;
}

/* Style icône flèche droite */
.iconFlechDroit
{
    display: inline-flex;
    align-items: center;
    padding-right: 10px;
    color: var(--couleur-texte);
    white-space: nowrap;
    margin-right: 20px;
    float: right;
    gap: 16px;
}

/* Style icône flèche droite */
.iconFlechDroit svg
{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

/* Style icône flèche gauche */
.iconFlechGauche 
{
    display: inline-flex;
    align-items: center;
    padding-left: 12px;
    color: var(--couleur-texte);
    white-space: nowrap;
    margin-right: 20px;
    float: left;
    gap: 8px;
}

.iconFlechGauche.gap-32 
{
    gap: 32px;
}


/* Style icône flèche gauche */
.iconFlechGauche svg 
{
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin-left: -8px;
    stroke: currentColor;
    fill: none;
}

#passerCommande.finale {
    text-transform: uppercase;
    width: 275px;
    background-color: #4FCC90;
    border: 1px solid #4FCC90;
    color: #FFFFFF !important;
}

    /* Bouton "Passer commande" final au survol : fond vert moyen. */
    #passerCommande.finale:hover {
        background-color: #49C188;
    }

#blockLivraison {
    display: none;
    float: left;
    width: 100%;
}
div#lignesOperationsId {
    display: block;
    /* width: max-content; */
    position: relative;
    float: left;
    height:100%;
}


/* Spécifique au bouton 'Demander un devis' à droite */
.demanderUnDevis.etapeSuivante 
{
    width: 215px !important;
}

/* Spécifique au bouton Continuer mon deviis */
.continuerMonDevis.iconFlechGauche, .continuerMonDevis .iconFlechGauche 
{
    padding-left: 15px !important;
    gap: 17px !important;
}
#cumulsEmballages {
    min-width: 400px;
    width: auto !important;
    height: auto !important;
    position: absolute;
}
#tableauCumulsEmballages {
    margin: auto;
    border-collapse: collapse;
}
    #tableauCumulsEmballages tr {
        border-bottom: 1pt solid #D4D4D4;
    }
    #tableauCumulsEmballages tbody tr:hover {
        background: none !important;
    }
    #tableauCumulsEmballages.avecCatalogue tr {
        height: 140px;
        position: relative;
    }
    #tableauCumulsEmballages tr {
        position: relative;
    }

    #tableauCumulsEmballages td div.emballage {
        width:175px;
    }

    /* Style pour les éléments <div> avec la classe "designation" à l'intérieur des cellules <td> du tableau "tableauCumulsEmballages" */
    #tableauCumulsEmballages td div.designation {
        text-align: center;
        color: #313342;
        text-align: center;
        font-family: Nunito-Regular;
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        width: 163px;
    }

    /* Style pour les éléments <div> avec la classe "quantitePleine" à l'intérieur des cellules <td> du tableau "tableauCumulsEmballages" */
    #tableauCumulsEmballages td div.quntitePleine {
        margin: 6px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        color: #313342;
        text-align: center;
        font-family: Nunito-Regular;
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    /* Style pour les éléments <div> avec la classe "quantiteManquante" à l'intérieur des cellules <td> du tableau "tableauCumulsEmballages" */
    #tableauCumulsEmballages td div.quantiteManquante {
        margin: 6px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        color: #313342;
        text-align: center;
        font-family: Nunito-Regular;
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    /* Cellule "emballage" du tableau cumuls : contenu en colonne, centré avec flexbox. */
    #tableauCumulsEmballages td.emballage {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Bloc catalogue dans une cellule du tableau cumuls : marge supérieure de 7px. */
    #tableauCumulsEmballages td div.catalogue {
        margin-top: 7px;
    }

    /* Bloc image catalogue pour cumul : texte centré. */
    #tableauCumulsEmballages td div.imageCataloguePourCumul {
        text-align: center;
    }

    #tableauCumulsEmballages .libelleCatalogue {
        text-align: center;
        width: 200px;
        color: #313342;
        text-align: center;
        font-family: Nunito-Regular;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    #tableauCumulsEmballages .imageCatalogue {
        padding: 10px;
    }

span [id^="libelleCatalogueType_"] {
    border-right: none !important;
}

.picto {
    margin-top :5px;
    display: inline-block;
    height: 72px;
    width: 72px;
    background: url("/ressource/image/webshop/pictoRemplissageEmaballage/pictoRemplissageEmballage.png") no-repeat;
}

.iconePlus {
    width: 12px !important;
    visibility:hidden;
}
.avecCatalogue .iconePlus {
    display:inline-block;
}



.iconePlus.vide, .picto.totalVide, .picto.complementVide {
    background: none;
}

img.uneImageCataloguePourCumul {
    height: 48px;
    width: 48px;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 50px;
}

/* Style pour l'élément <div> avec l'identifiant "listeCumulsEmballages" */
div#listeCumulsEmballages {
    max-width: 600px;
    margin: 5px 5px;
    padding: 4px;
    overflow-y: auto;
    overflow-x: auto;
    max-height: 310px;
}

    /* Scrollbar personnalisée pour la liste des cumuls d'emballages : largeur et hauteur 10px. */
    div#listeCumulsEmballages::-webkit-scrollbar {
        width: 10px;
        height:10px;
    }

    /* Barre de défilement (thumb) : couleur grise et bords arrondis. */
    div#listeCumulsEmballages::-webkit-scrollbar-thumb {
        background-color: #A0A4B6;
        border-radius: 5px;
    }

        /* Barre de défilement (thumb) au survol : couleur grise inchangée. */
        div#listeCumulsEmballages::-webkit-scrollbar-thumb:hover {
            background-color: #A0A4B6;
        }

    /* Rail de la scrollbar : fond gris clair. */
    div#listeCumulsEmballages::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }

td.col1.libelle {
    color: #313342;
    font-family: Nunito-Regular;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


.avecCatalogue td.picto {
    line-height: 170px !important;
}


td.col4 {
    margin-right: 20px;
    color: #313342;
    font-family: Nunito-regular;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.col4 .picto {
    margin-right: 20px;
}

td.col2 {
    padding-left: 32px;
    margin-right: 20px;
    color: #313342;
    font-family: Nunito-regular;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/*************************************************************/
/************position des icones******************************/
/*************************************************************/
.CAR_100 {
    background-position: -711px 3px;
}

.CAR_90 {
    background-position: -639px 3px;
}

.CAR_80 {
    background-position: -568px 3px;
}

.CAR_70 {
    background-position: -497px 3px;
}

.CAR_60 {
    background-position: -426px 3px;
}

.CAR_50 {
    background-position: -354px 3px;
}

.CAR_40 {
    background-position: -283px 3px;
}

.CAR_30 {
    background-position: -213px 3px;
}

.CAR_20 {
    background-position: -141px 3px;
}

.CAR_10 {
    background-position: -71px 3px;
}

.CAR_0 {
    background-position: 0px 3px;
}

.PAL_100 {
    background-position: -711px -71px;
}

.PAL_90 {
    background-position: -639px -71px;
}

.PAL_80 {
    background-position: -568px -71px;
}

.PAL_70 {
    background-position: -497px -71px;
}

.PAL_60 {
    background-position: -426px -71px;
}

.PAL_50 {
    background-position: -354px -71px;
}

.PAL_40 {
    background-position: -283px -71px;
}

.PAL_30 {
    background-position: -213px -71px;
}

.PAL_20 {
    background-position: -141px -71px;
}

.PAL_10 {
    background-position: -71px -71px;
}

.PAL_0 {
    background-position: 0px -71px;
}

.ROL_100 {
    background-position: -711px -146px;
}

.ROL_90 {
    background-position: -639px -146px;
}

.ROL_80 {
    background-position: -568px -146px;
}

.ROL_70 {
    background-position: -497px -146px;
}

.ROL_60 {
    background-position: -426px -146px;
}

.ROL_50 {
    background-position: -354px -146px;
}

.ROL_40 {
    background-position: -283px -146px;
}

.ROL_30 {
    background-position: -213px -146px;
}

.ROL_20 {
    background-position: -141px -146px;
}

.ROL_10 {
    background-position: -71px -146px;
}

.ROL_0 {
    background-position: 0px -146px;
}

.AUT_100 {
    background-position: -710px -219px !important;
}

.AUT_90 {
    background-position: -639px -219px;
}

.AUT_80 {
    background-position: -568px -219px;
}

.AUT_70 {
    background-position: -497px -219px;
}

.AUT_60 {
    background-position: -426px -219px;
}

.AUT_50 {
    background-position: -354px -219px;
}

.AUT_40 {
    background-position: -283px -219px;
}

.AUT_30 {
    background-position: -213px -219px;
}

.AUT_20 {
    background-position: -141px -219px;
}

.AUT_10 {
    background-position: -71px -219px;
}

.AUT_0 {
    background-position: 0px -219px;
}
#layoutAlerte, #layoutAlerteGestionFichiers {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 17;
    cursor: default;
    background: #0D0D0D;
    backdrop-filter: blur(8px);
}
#layoutChargementDateModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 12;
    background: rgba(13, 13, 13, 0.3);
    backdrop-filter: blur(8px);
}
#alerte {
    display: none;
    width: 460px;
    margin: -100px 0 0 -250px;
    background: #fff;
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 10000;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    box-shadow: 0px 1px 20px 0px rgba(86, 92, 107, 0.40) !important;
    -moz-box-shadow: 0 0 5px 2px #b3b3b3;
    -webkit-box-shadow: 0 0 5px 2px #b3b3b3;
}

#messageAlerte,
#messageAlerteGestionFichiers {
    height: auto;
    min-height: 60px;
    margin: 40px 90px 0px 0px;
    padding-top: 5px;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    font-style: normal;
    font-family: Nunito-regular;
    color: #313342;
    text-align: center !important;
}

.logoAlerteErreur,
.logoAlerteConfirmation,
.logoAlerteInfo {
    height: 70px;
    padding-left: 75px;
}

.logoAlerteErreur {
 /*background: url("/ressource/image/webshop/templatePersonnalise/erreurAlerte.png") no-repeat;*/
}

.logoAlerteConfirmation {
/*    background: url("/ressource/image/webshop/templatePersonnalise/confirmationAlerte.png") no-repeat;*/
}

.logoAlerteInfo {
/*    background: url("/ressource/image/webshop/templatePersonnalise/infoAlerte.png") no-repeat;*/
}

#alerteGestionFichiers input[type="button"] {
    margin: 0 15px 10px 0;
    float: right;
    width: 120px;
    height: 36px;
    border:none;
    color:#ffffff;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}
#alerteGestionFichiers {
    background: #f3f3f3;
}
#bouttonValider, #bouttonAnnuler {
    display: inline-block;
    margin: 0 15px 10px 0;
    width: 120px;
    height: 36px;
    border: none;
    color: #ffffff;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}

/* Bouton "Valider" au survol : fond vert clair semi-transparent. */
#bouttonValider:hover {
   background: #53D697D9;
}

#bouttonAnnuler {
	display: none;
}
#alerte.alerteErreur .titreAlerte, #alerte.alerteErreur input[type="button"] {
    background: #EE3535;
}

/* Titre et bouton d'alerte erreur : fond rouge vif (survol pour le bouton). */
#alerte.alerteErreur .titreAlerte, #alerte.alerteErreur input[type="button"]:hover {
    background: #DB3428;
}

#alerte.alerteInfo .titreAlerte, #alerte.alerteInfo input[type="button"] {
    background: #FFA800;
}

/* Bouton "Valider" de l'alerte info au survol : fond orange clair semi-transparent. */
#alerte.alerteInfo input[type="button"]#bouttonValider:hover {
    background: rgba(255, 182, 41, 0.85);
}

/* Bouton "Annuler" de l'alerte info au survol : fond bleu très clair. */
#alerte.alerteInfo input[type="button"]#bouttonAnnuler:hover {
    background-color: #EEF0FF !important;
}

/* Bouton "Annuler" de l'alerte info : fond blanc, texte et bordure orange. */
#alerte.alerteInfo input#bouttonAnnuler {
    background: #fff !important;
    color: #ffb629 !important;
    border: 1px solid #ffb629 !important;
}

#alerte.alerteConfirmation .titreAlerte, #alerte.alerteConfirmation input[type="button"] {
    background: #53D697;
}

/* Bouton "Valider" de l'alerte confirmation au survol : fond vert moyen. */
#alerte.alerteConfirmation input[type="button"]#bouttonValider:hover {
    background-color: #49C188;
}

#boutonAlerte {
    margin: 18px auto 32px auto;
    width: 300px;
    text-align: center;
    height: 37px;
}
.titreAlerte {
    text-align: center;
    font-size: 18px;
    height: auto;
    line-height: 50px;
    color: #fff;
    /*padding: 10px 30px 5px 10px;*/
    -moz-border-radius: 8px 8px 0px 0px;
    border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    font-weight: 400;
    /*line-height: normal;*/
    font-style: normal;
    font-family: Nunito-regular;
}

.libelleRegroupementAlerte {
    display: block;
    font-family: 'Nunito-Bold';
    font-size: 15px;
    margin: 10px 5px 0 5px;
}



#divTableauListeDesAdressesDeLivraison label:not(.colonneRechercheLabel) {
    font-family: 'Nunito-Regular';
    font-size: 20px;
    line-height: Normal;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: #313342;
    font-weight: 600;
}
div#tableauChoixAdressLivraisonDX {
    width: auto;
    margin: 0 auto;
}

    /* Masque le panneau d'en-tête du datagrid dans le tableau de choix d'adresse de livraison. */
    div#tableauChoixAdressLivraisonDX .dx-datagrid-header-panel {
        display: none !important;
    }


#tableauListeDesAdressesDeLivraisonWebshop .dx-datagrid-headers,
div#tableauChoixAdressLivraisonDX .dx-datagrid-headers {
    pointer-events: auto !important;
}

#tableauListeDesAdressesDeLivraisonWebshop .dx-datagrid-headers .dx-header-row > td {
    background: #F4F4F4;
}

/* Survol d'une cellule d'en-tête du tableau Liste Des Adresses De Livraison : fond gris clair . */
#tableauListeDesAdressesDeLivraisonWebshop .dx-datagrid-headers .dx-header-row:hover > td {
    background: #EBECEC;
}

#tableauListeDesAdressesDeLivraisonWebshop .dx-datagrid-headers .dx-header-row > td:hover {
    background: #f2f2f2;
}

#tableauChoixAdressLivraisonDX .dx-datagrid-headers .dx-header-row > td {
    background: #F4F4F4;
}

/* Survol d'une cellule d'en-tête du tableau Liste DesAdressesDeLivraison : fond gris clair . */
#tableauChoixAdressLivraisonDX .dx-datagrid-headers .dx-header-row:hover > td {
    background: #EBECEC;
}

#tableauChoixAdressLivraisonDX .dx-datagrid-headers .dx-header-row > td:hover {
    background: #f2f2f2;
}

#tableauListeDesAdressesDeLivraisonWebshop {
    margin: 24px 0;
    min-height: 257px;
}

#tableauListeDesAdressesDeLivraisonWebshop .dx-datagrid .dx-row-lines > td {
    border-bottom: 1px solid #EBECEC;
}
#tableauChoixAdressLivraisonDX .dx-datagrid .dx-row-lines > td {
    border-bottom: 1px solid #EBECEC;
}

#tableauListeDesAdressesDeLivraisonWebshop .dx-datagrid-headers {
    color: #484848;
    touch-action: pinch-zoom;
    border-bottom: none;
    font-family: 'Nunito-Regular';
    font-size: 12px;
    line-height: 18px;
    background: #F4F4F4;
    height: 44px;
    pointer-events: none;
    top: 0px;
}

#tableauChoixAdressLivraisonDX .dx-datagrid-headers {
    color: #484848;
    touch-action: pinch-zoom;
    border-bottom: none;
    font-family: 'Nunito-Regular';
    font-size: 12px;
    line-height: 18px;
    background: #F4F4F4;
    height: 44px;
    pointer-events: none;
    top: 0px;
}

    #tableauListeDesAdressesDeLivraisonWebshop .dx-datagrid-nowrap .dx-header-row > td > .dx-datagrid-text-content,
    #tableauChoixAdressLivraisonDX .dx-datagrid-nowrap .dx-header-row > td > .dx-datagrid-text-content {
        white-space: nowrap;
        color: #08090C;
        font-family: 'Nunito-Regular';
        font-style: normal;
        font-size: 14px;
        line-height: normal;
        font-weight: 400;
        text-align: center;
    }
    #tableauListeDesAdressesDeLivraisonWebshop .dx-datagrid .dx-row.dx-data-row > td,
    #tableauChoixAdressLivraisonDX .dx-datagrid .dx-row.dx-data-row > td {
        font-family: 'Nunito-Regular';
        font-size: 14px;
        line-height: 24px;
        padding-top: 10px;
        padding-bottom: 10px;
        color: #313342;
        height: 48px;
    }
#tableauListeDesAdressesDeLivraisonWebshop .dx-datagrid-headers .dx-datagrid-table .dx-row > td,
#tableauChoixAdressLivraisonDX .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border-bottom: none;
    padding-top: 12px;
    padding-bottom: 13px;
    cursor: default;
}
    #tableauListeDesAdressesDeLivraisonWebshop .dx-datagrid-header-panel,
    #tableauChoixAdressLivraisonDX .dx-datagrid-header-panel {
        border-bottom: none;
    }
    #tableauListeDesAdressesDeLivraisonWebshop .dx-datagrid-rowsview .dx-datagrid-table .dx-freespace-row,
    #tableauChoixAdressLivraisonDX .dx-datagrid-rowsview .dx-datagrid-table .dx-freespace-row {
        border-bottom: 0;
    }
#tableauChoixAdressLivraisonDX .dx-datagrid-rowsview .dx-row{
    cursor:pointer;
}

.dx-datagrid-rowsview .dx-row:hover > td,
.dx-datagrid-rowsview .dx-row.active > td,
#tableauChoixAdressLivraisonDX .dx-datagrid-rowsview .dx-row:hover > td,
#tableauChoixAdressLivraisonDX .dx-datagrid-rowsview .dx-row.active > td 
{
    color: var(--couleur-theme) !important;
    background: var(--couleur-secondaire10Pourcent) !important;
}

#tableauChoixAdressLivraisonDX .dx-datagrid-rowsview .dx-row:hover,
#tableauChoixAdressLivraisonDX .dx-datagrid-rowsview .dx-row.active,
.dx-datagrid-rowsview .dx-row:hover,
.dx-datagrid-rowsview .dx-row.active,
.dx-datagrid-rowsview .dx-selection.dx-row > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > td,
.dx-datagrid-rowsview .dx-selection.dx-row > tr > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > tr > td 
{
    background: var(--couleur-secondaire10Pourcent) !important;
    color: var(--couleur-theme) !important;
}

.dx-pager .dx-page, .dx-pager .dx-page-size {
    text-align: center;
    border: 1px solid #d9d9d9;
    line-height: 22px;
    height: 32px;
    min-width: 32px;
    box-sizing: border-box;
    color: #595959;
    border-radius: 4px !important;
    font-size: 14px !important;
    padding-top: 5px;
}

.dx-gridbase-container > .dx-datagrid-pager .dx-page-sizes > .dx-page-size.dx-selection,
.dx-gridbase-container > .dx-pager > .dx-pages > .dx-page.dx-selection 
{
    background: #fff;
    color: var(--couleur-theme);
    border-color: var(--couleur-theme);
}
div#livraison {
    position: relative;
}
#butonChoixAdresseLivraison {
    display: none;
    border: 1px solid #5D78FF;
    color: #5D78FF;
    height: 36px;
    width: 238px;
    font-family: 'Nunito-SemiBold' !important;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    top: -90px;
    left: 255px;
    cursor: pointer;
    border-radius: 4px;
    background: url(/ressource/image/webshop/templatePersonnalise/mesAdresses.png) no-repeat scroll 2% 5px #FFFFFF;
}

    /* Bouton sélectionné : affiche une icône de fermeture et change la couleur de fond. */
    #butonChoixAdresseLivraison.clicked {
        background: url(/ressource/image/webshop/templatePersonnalise/FermerSlow.png) no-repeat scroll 2% 7px #EEF0FF !important;
    }

/* Bouton de choix d'adresse de livraison au survol : fond bleu très clair. */
button#butonChoixAdresseLivraison:hover {
    background-color: #EEF0FF;
}

div#choixAdressLivraison {
    z-index:1;
    min-height:1px;
}
div#formulaireLivraison, div#formulaireCorrespondant {
    width: 727px;
    margin: 0 auto;
}
    div#formulaireLivraison label, div#formulaireCorrespondant label {
        color: #818285;
    }
div#tableauChoixAdressLivraison_wrapper {
    margin-left: 26px;
    margin-right: 26px;
    width: 1400px;
}
h2#titreCorrespondant {
    text-align: center;
    font-size: 24px;
    font-family: 'Nunito-SemiBold' !important;
    line-height: 32px;
    color: #313342;
    font-weight: 600;
}

/* Icône correspondant : taille 24px, marge à droite de 4px, ajustement vertical avec marge négative. */
.iconCorrespondant {
    height: 24px;
    width: 24px;
    margin-right: 4px;
    margin-bottom: -3px;
}

.has-float-label {
    margin: 22px auto;
    margin-top: 0;
    width: auto;
    color: #313342;
    font-style: normal;
    font-weight: 400;
}
    .has-float-label .inputFormulaire:placeholder-shown:not(:focus) + label {
        font-size: 150%;
        opacity: 0;
        top: .3em;
        color: #299AA0;
    }

.inputFormulaire:focus::placeholder {
    opacity: 0;
}

.inputFormulaire::-webkit-input-placeholder {
    opacity: 1;
    -webkit-transition: all .2s;
    transition: all .0s;
}

/* Focus sur les champs du formulaire Information livraison*/
#login:focus, #motDePasse:focus, #nom1:focus, #nom2:focus, #adresse1:focus, #adresse2:focus, #codePostal:focus, #ville:focus, #pays:focus, #email:focus, #telephone:focus, #fax:focus,
#commentaireLivraison:focus, #reference:focus, #commentaire:focus 
{
    border-color: var(--couleur-theme);
    box-shadow: var(--couleur-theme);
    border-width: 1.5px;
}

/* Erreur de saisi sur les champs du fomulaire Information livraison */
#nom1.erreurSaisie::placeholder, #nom2.erreurSaisie::placeholder, #adresse1.erreurSaisie::placeholder, #adresse2.erreurSaisie::placeholder, #codePostal.erreurSaisie::placeholder,
#ville.erreurSaisie::placeholder, #pays.erreurSaisie::placeholder, #email.erreurSaisie::placeholder, #telephone.erreurSaisie::placeholder, #fax.erreurSaisie::placeholder,
#commentaireLivraison.erreurSaisie::placeholder, #reference.erreurSaisie::placeholder, #commentaire.erreurSaisie::placeholder {
    color: #EE3535 !important;
}

/* Focus sur les champs du fomulaire Correspondant */
#nom1Correspondant:focus, #nom2Correspondant:focus, #adresse1Correspondant:focus, #adresse2Correspondant:focus, #codePostalCorrespondant:focus, #villeCorrespondant:focus,
#paysCorrespondant:focus, #emailCorrespondant:focus, #telephoneCorrespondant:focus, #portableCorrespondant:focus, #faxCorrespondant:focus {
    outline: none;
    border-color: var(--couleur-theme) !important;
    box-shadow: var(--couleur-theme) !important;
}

/* Erreur de saisi sur les champs du fomulaire Correspondant */
#nom1Correspondant.erreurSaisie::placeholder, #nom2Correspondant.erreurSaisie::placeholder, #adresse1Correspondant.erreurSaisie::placeholder,
#adresse2Correspondant.erreurSaisie::placeholder, #codePostalCorrespondant.erreurSaisie::placeholder, #villeCorrespondant.erreurSaisie::placeholder, #paysCorrespondant.erreurSaisie::placeholder,
#emailCorrespondant.erreurSaisie::placeholder, #telephoneCorrespondant.erreurSaisie::placeholder, #portableCorrespondant.erreurSaisie::placeholder, #faxCorrespondant.erreurSaisie::placeholder {
    color: #EE3535 !important;
}

#formulaireCorrespondant .inputFormulaire, div#formulaireLivraison .inputFormulaire {
    width: 328px;
}
#formulaireCorrespondant .hasDiv.fullWidth .inputFormulaire, div#formulaireLivraison .hasDiv.fullWidth .inputFormulaire {
    width: 705px;
}
.hasDiv.left {
    float: left;
}
.hasDiv.right {
    float: right;
}
.hasDiv {
    width: 349px;
}
    .hasDiv.fullWidth span.has-float-label {
        width: 727px !important;
    }
    .hasDiv.fullWidth {
        width: 727px !important;
    }
#formulaireCorrespondant select.inputFormulaire, #formulaireLivraison select.inputFormulaire {
    height: 46px;
    width: 727px !important;
    background: url(/ressource/image/webshop/templatePersonnalise/fleche_bas.png) no-repeat scroll 98% 14px #fff !important;
}
#recapPanier {
    margin-bottom: 20px;
    float: left;
    width: 1073px;
}
div#blockRecapitulatifCommande {
    padding-top: 50px;
}
div#recapCommande {
    float: right;
    width: 282px;
    box-shadow: 0px 4px 14px 0px #0000001a;
    margin-right: 24px;
    border-radius: 6px;
    color: #313242;
    margin-top:3px;
}

div#blockContenuRecapCommande {
    display: grid;
    margin: 18px 12px;
}

#recapCommande hr#separateurRecap {
    border-top: 1px solid #d4d4d4;
    border-bottom: 0px;
    width: 100%;
    margin-bottom: 25px;
    display: block;
}

/* Réduire la largeur du hr pour correspondre au tableau */
hr#ligne-separateur {
    border: 0;
    border-top: 1px solid #d4d4d4;
    width: calc(100% - 40px); /* Ajustez la valeur selon l'espacement souhaité */
    margin: 15px 20px; /* Centre le hr avec des marges égales */
    height: 0;
    display: block;
}

/* Style pour hr avec classe ligne-separateur dans recapCommande */
#recapCommande hr.ligne-separateur {
    border: 0;
    border-top: 1px solid #d4d4d4;
    width: calc(100% - 28px);
    margin: 0 22px 0 12px;
    height: 0;
    display: block;
}


#total td {
    padding-top: 8px;
    padding-bottom: 11px;
}
#total tr.ligne-separateur td {
    position: relative;
    padding-top: 20px;
/*    padding-bottom: 10px;
*/

}

    #total tr.ligne-separateur td::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #d4d4d4;
    }

    /* Pour la deuxième cellule, étendre la ligne vers la gauche */
    #total tr.ligne-separateur td:last-child::before {
        left: -100%;
        right: 0;
    }

div#recapTotal {
    margin-top: 28px;
}
table#nombre, table#poids, table#total {
    width: 100%;
    padding: 12px;
    padding-top: 0;
    font-size:16px;
    margin-top: -16px;
}
    table#nombre tr,table#poids tr, table#total tr {
        height: 32px;
        display: table-row;
    }
    table#nombre td.numerique,
    table#poids td.numerique,
    table#total td.numerique{
        text-align: right;
    }

    table#nombre td.gras,
    table#poids td.gras,
    table#total td.gras {
        font-family: 'Nunito-Regular' /*, sans-serif*/;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
    }
        table#total td.gras.ht {
            font-family: 'Nunito-Bold'
        }

    table#total td.numerique.gras.brut, 
    table#total td.numerique.gras.remises, 
    table#total td.numerique.gras.escomptes,
    table#total td.numerique.gras.fraisdeport,
    table#total td.numerique.gras.tva {
        font-family: 'Nunito-SemiBold', sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0;
    }

    table#total td.numerique.gras.ht {
        font-family: 'Nunito-SemiBold', sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0;
    }



    table#total td.gras.ttc {
        font-size: 20px;
        min-width: 124px;
        color: var(--couleur-theme);
        font-weight: 700;
        font-family: 'Nunito-Bold'
    }

td.width100.gras {
    width: 75%;
}
div#blocLivraison {
    border: 1px solid #B9B9B9;
    width: 265px;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 20px 16px 20px 16px;
    margin: auto;
    position: relative;
    border-radius: 6px;
}
div#blocReference {
    width: 100%;
    margin-bottom:28px;
}
div#recapLivraison {
    font-size: 15px;
    margin-top: 15px;
    border: 1px #B9B9B9;
}
div#blocContenuReference {
    margin: auto;
    width: 265px;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 20px 16px 20px 16px;
    margin: auto;
    margin-top: 20px;
    position: relative;
    background: #F8F8F8;
    border-radius: 4px;
}
    div#blocContenuReference span{
        font-size:12px;
    }
div#blocFacturation {
    border: 1px solid #b9b9b9;
    width: 265px;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 20px 16px 20px 16px;
    margin: auto;
    margin-bottom: 20px;
    position: relative;
    border-radius: 6px;
}
input.retourAdresse {
    background: url(/ressource/image/webshop/templatePersonnalise/modify.svg) no-repeat scroll 2px 2px ;
    border: none;
    width: 21px;
    height: 21px;
    position: absolute;
    top: 20px;
    right: 12px;
    cursor: pointer;
}

    /* Champ retour adresse au survol : curseur pointeur. */
    input.retourAdresse:hover {
        cursor: pointer;
    }

/* Champ retour adresse dans le bloc référence : décalage de 12px vers la droite. */
#blocContenuReference input.retourAdresse {
    right: 12px;
}

#blockRecapitulatifCommande b {
    display: block;
    /*position: relative;*/
    top: -8px;
    color: #313342;
    font-weight: 600;
    font-family: 'Nunito-Bold';
}
div#blockContenuRecapCommande span {
    margin-top: 8px;
    font-size: 18px;
    font-family: 'Nunito-regular';
    /*    text-transform: capitalize;*/
    color: #313342;
    font-weight: 600;
}
#recapCommande span {
    display: block;
    padding: 2px 0px;
    font-size: 15px;
    font-family: 'Nunito-Regular';
    word-wrap: break-word;
}

#eclatementTVA tr.header td {
    background: #F4F4F4;
}
#eclatementTVA tr.header:hover td {
    background: #EBECEC;
}
/* Survol d'en-tête du tableau TVA */
#eclatementTVA tr.header td:hover {
    background: #f2f2f2;
}

#eclatementTVA tr.header:hover {
    background-color: #EBECEC;
}
table#eclatementTVA tr td {
    text-align: center;
}

table#eclatementTVA tr.header td.numerique {
    text-align: center;
}

table#eclatementTVA td.numerique {
    text-align: right;
}

table#eclatementTVA td.codeTVA {
    text-align: center ;
}

table#eclatementTVA {
    width: 600px;
    height: auto;
    font-size: 15px;
    font-family: 'Nunito-Regular';
    padding: 20px;
    font-style: normal;
    font-weight: 400;
    margin-left: 20px;
}
#eclatementTVA td {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

 table#eclatementTVA .header {
    font-size: 18px;
    cursor: default;
}

.width100 {
    min-width: 100px;
   /* width: 100px;*/
    max-width: 100px;
    word-wrap: break-word;
}

.numerique {
    text-align: right;
}

#eclatementTVA td.numerique {
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 12px;
    padding-bottom: 12px;
}

#eclatementTVA {
    border-collapse: collapse;
}

#eclatementTVA tr {
    border-bottom: 2px solid #f2f2f2;
}

table#eclatementTVA tr.header {
    height: 44px;
    background: #FAFAFA;
    white-space: nowrap;
    color: #08090C;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-size: 14px;
    line-height: normal;
    font-weight: 400;
    cursor: default;
}

table#eclatementTVA tr.header td {
    text-align: center;
}

#eclatementTVA td.width100 {
    width: 100px;
}

div#tableauListeRecapPanierDx {
    width: 100%;
    margin-left: 20px;
    margin-right: 20px;
}

#tableauListeRecapPanierDx .dx-datagrid-headers {
    color: #484848;
    border-bottom: none;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    background: #FAFAFA;
    height: 44px;
    margin-bottom: 1px;
}


#tableauListeRecapPanierDx .dx-datagrid-headers .dx-header-row > td {
    background: #F4F4F4;
}

/* Survol d'une cellule d'en-tête du tableau Liste Recap Panier : fond gris clair . */
#tableauListeRecapPanierDx .dx-datagrid-headers .dx-header-row:hover > td {
    background: #EBECEC;
}

#tableauListeRecapPanierDx .dx-datagrid-headers .dx-header-row > td:hover {
    background: #f2f2f2;
}

#tableauListeRecapPanierDx .dx-datagrid-nowrap .dx-header-row > td > .dx-datagrid-text-content {
    white-space: nowrap;
    color: #08090C;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

#tableauListeRecapPanierDx .dx-datagrid .dx-row.dx-data-row > td {
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #313342;
    height: 64px;
}

/* Image catalogue dans le tableau récapitulatif du panier : taille 52x52px. */
#tableauListeRecapPanierDx.imageCatalogue {
    width: 52px;
    height: 52px;
}

/* En-têtes du tableau récapitulatif de panier : supprime la bordure inférieure et ajuste l'espacement vertical */
#tableauListeRecapPanierDx .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border-bottom: none;
    padding-top: 12px;
    padding-bottom: 12px;
}

#tableauListeRecapPanierDx .dx-datagrid-header-panel {
    border-bottom: none;
}
#tableauListeRecapPanierDx .dx-datagrid .dx-row.dx-data-row > td.prixStyle {
    color: var(--couleur-theme);
    font-family: 'Nunito-SemiBold';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
}
div#blocContenuCorrespondant {
    width: 265px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #B9B9B9;
    padding: 20px 16px 20px 16px;
    margin: auto;
    margin-top: 20px;
    position: relative;
    border-radius: 6px;
}
#blockMonCompteAccueil {
    border: 1px solid #d9d9d9;
    border-top: 0;
    border-bottom: 0;
    width: 1440px;
}

/* Table avec classe hboxinline : largeur 100%, affichage en bloc. */
table.hboxinline {
    width: 100%;
    display: block;
}

/* En-tête de droite du tableau : largeur fixe 470px. */
th.enteteDeDroite {
    width: 470px;
}

/* En-tête du milieu du tableau : texte à gauche, police Nunito, taille 18px, gras, couleur foncée. */
th.enteteDuMilieu {
    text-align: left;
    font-family: 'Nunito-Regular';
    font-size: 18px;
    line-height: Normal;
    color: #313342;
    font-weight: 600;
}

/* En-tête de la liste client WebShop : position relative, légère translation. */
.enteteListeClientWebShop {
    position: relative;
    top: 15px;
    left: 2px;
}

#monCompteWebshop {
    padding-top: 44px;
    padding-bottom: 44px;
}

    #monCompteWebshop > label {
        font-family: 'Nunito-Regular';
        font-size: 32px;
        line-height: 44px;
        color: #484848;
        margin: auto;
        text-align: center;
        position: relative;
    }


/* Bouton 'Retour au menu' */
#retourAuMenu 
{
    border-radius: 4px;
    width: 140px;
    height: 32px;
    top: 30px;
    cursor: pointer;
    font-family: 'Nunito-Regular';
    line-height: 32px;
    padding-left: 30px;
    background-color: var(--couleur-theme);
    display: flex;
    align-items: center;
    color: var(--couleur-texte);
    gap: 12px;
}

#retourAuMenu 
{
    margin-left: 0px;
}

.enteteListeClientWebShop #retourAuMenu
{
    margin-left: 25px;
}

#retourAuMenu .icon-prev 
{
    margin-left: -18px;
}

/* Style pour l'élément avec l'identifiant "retourMenu" */
#retourMenu 
{
    border-radius: 4px;
    width: 140px;
    height: 32px;
    top: 30px;
    cursor: pointer;
    display: block;
    font-family: 'Nunito-SemiBold';
    line-height: 32px;
    padding-left: 15px;
    background-color: var(--couleur-theme);
    display: flex;
    align-items: center;
    color: var(--couleur-texte);
    gap: 8px;
}

#retourAuMenu.boutonAction:hover 
{
    background: var(--couleur-secondaire85Pourcent);
}

#retourMenu:hover 
{
    background: var(--couleur-secondaire85Pourcent);
}

/* Style pour l'élément avec l'identifiant "retourCatalogue" */
#retourCatalogue 
{
    background: var(--couleur-theme);
    border-radius: 4px;
    width: 80px;
    height: 32px;
    top: 30px;
    cursor: pointer;
    display: block;
    color: var(--couleur-texte);
    font-family: 'Nunito-SemiBold';
    line-height: 32px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#retourCatalogue .icon-prev 
{
    margin-left: -2px;
}

/* Bouton 'Valider' en mode Collectvités */
#validerOperations 
{
    background: var(--couleur-theme);
    border-radius: 4px;
    width: 140px;
    height: 32px;
    cursor: pointer;
    display: block;
    color: var(--couleur-texte);
    font-family: 'Nunito-SemiBold';
    line-height: 32px;
    left: 490px;
    position: relative;
}

/* Survol de la souris sur le bouton 'Valider' en mode Collectvités */
#validerOperations:hover 
{
    background: var(--couleur-secondaire85Pourcent);
}

/* Sélecteur de statut : position relative, padding à gauche pour espacer le contenu. */
#selectStatus {
    position: relative;
    padding-left: 60px;
}

/* Survol de la souris sur le bouton 'Accueil' dans les menus 'Mon Compte' et 'Mes opérations' */
#retourCatalogue:hover
{
    background-color: var(--couleur-secondaire85Pourcent);
}

/* Icône profil dans "Mon Compte" : taille 24px, marge basse négative, padding horizontal. */
.iconProfilMonCompte {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-bottom: -3px;
    padding: 0px 5px;
}

#infoClient, #infoAdresseLivraison {
    background: #FFFFFF;
    border: 1px solid #CACACA;
    box-sizing: border-box;
    border-radius: 6px;
    width: 1388px;
    margin-left: 26px;
    position: relative;
}

#infoClient {
    height: 286px;
}

#infoAdresseLivraison {
    margin-top: 24px;
}

#modifierMotDePasse {
    position: relative;
    height: 24px;
    margin: 24px;
}

#parametreCompteWebshop {
    position: relative;
    top: 70px;
    margin: 24px;
}

#modifierMotDePasse .titreModificationCompte {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 27px;
    text-transform: uppercase;
    color: #313342;
    left: 5px;
    position: relative;
    font-family: Nunito-Regular;
}

/* Bouton ou bloc pour modifier les paramètres : marge supérieure de 16px. */
#modifierParametre {
    margin-top: 16px;
}

/* Identifiant client : marge supérieure de 15px, padding de 1px. */
.identifiantClient {
    margin-top: 15px;
    padding: 1px;
}
#parametreCompteWebshop > label {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 27px;
    text-transform: uppercase;
    color: #313342;
    left: 5px;
    position: relative;
    font-family: Nunito-Regular;
}

#modifierMotDePasse span input {
    position: relative;
    border: 1px solid #BABABA;
    box-sizing: border-box;
    border-radius: 4px;
    width: 300px;
    height: 42px;
    margin-left: 24px;
    padding: 1px 10px;
}

    #modifierMotDePasse span input:not(:last-child) {
        margin-left: 5px;
    }

/* Focus sur les champs du menu 'Mon Compte' */
#identifiantActuel:focus, #passwordActuel:focus, #nouveauPassword:focus, #confirmerPassword:focus 
{
    border-color: var(--couleur-theme);
    box-shadow: var(--couleur-theme);
    border-width: 1.5px;
}

/* Style pour les éléments <label> qui sont enfants d'éléments avec la classe "has-float-label" */
.has-float-label .inputFormulaire:placeholder-shown:not(:focus) + label
{
    font-size: 150%;
    opacity: 0;
    top: .3em;
    color: var(--couleur-theme);
}

/* Style pour les éléments <label> qui sont enfants d'éléments avec la classe "has-float-label" */
.has-float-label label::after {
    content: " ";
    display: block;
    position: absolute;
    background: #fff;
    height: 2px;
    top: 50% !important;
    /*    left: -.2em !important;
    right: -.2em !important;*/
    z-index: -1
}

/* Style pour les éléments <label> qui sont enfants d'éléments avec la classe "has-float-label" */
.has-float-label {
    margin: 22px auto;
    display: inline-block !important;
    margin-top: 0;
    width: 330px !important;
    color: #818285;
    font-style: normal;
    font-weight: 400;
}

    /* Style pour les éléments <label> qui sont enfants d'éléments avec la classe "has-float-label" */
    .has-float-label label {
        position: absolute;
        cursor: text;
        font-size: 75%;
        opacity: 1;
        -webkit-transition: all .2s;
        transition: all .0s;
        top: -0.5em;
        left: 1rem !important;
        z-index: 3;
        line-height: 1;
        padding: 0 1px;
    }

#modifierParametre .ligneLabelEtInput {
    width: 100%;
    display: block;
    padding: 5px;
    text-align: left;
}

.labelParametreSelectionnable {
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #375A59;
    width: 25%;
    font-family: Nunito-Regular;
}

.parametreSelectionnable {
    border: 1px solid #BABABA;
    box-sizing: border-box;
    border-radius: 4px;
    width: 350px;
    height: 42px;
    padding: 0 12px;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 20px;
    color: #505050;
    background: #fff !important;
    background-color: #fff !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Focus sur la liste 'Parametre' du menu 'Mon compte'*/
select.parametreSelectionnable:focus 
{
    border-color: var(--couleur-theme);
}

/* Elément sélectionné de la liste 'Parametre' du menu 'Mon compte'*/
select.parametreSelectionnable option:checked
{
    background-color: var(--couleur-secondaire10Pourcent);
    color: var(--couleur-theme);
    font-weight: 500;
    font-family: 'Nunito-Bold';
}

/* Style pour les éléments avec la classe "iconSelectParametreSelectionnable" */
.iconSelectParametreSelectionnable {
    position: absolute;
}

/* Style pour l'élément avec l'identifiant "iconParametreSelectionnable" */
#iconParametreSelectionnable {
    margin: 11px -22px;
    pointer-events: none;
}


#divTableauListeDesAdressesDeLivraison {
    position: relative;
    margin: 24px;
    margin-left: 29px;
}

/*Survol sur le bouton 'Valider les modifications' dans les menus 'Mon Compte' et 'Mes opérations'*/
#parametreCompteWebshop #changerPassword:hover 
{
    background: var(--couleur-secondaire85Pourcent);
}

/* Style pour les éléments avec la classe "Désactive le button" */
.disabled-button {
    pointer-events: none;
    opacity: 0.6;
    background-color: #99D9DD !important;
}

/*Bouton 'Valider les modifications' dans les menus 'Mon Compte' et 'Mes opérations'*/
#parametreCompteWebshop #changerPassword 
{
    color: var(--couleur-texte);
    background: var(--couleur-theme);
    border-radius: 4px;
    float: right;
    text-align: center;
    cursor: pointer;
    width: 210px;
    height: 36px;
    font-style: normal;
    font-family: 'Nunito-SemiBold' !important;
    font-size: 15px;
    line-height: 20px;
    position: relative;
    right: 16px;
    border-style: none;
}

.cursorPointer {
    cursor: pointer !important;
}

.boutonSupprimerParametre {
    top: 50px;
    left: 23%;
    position: absolute;
    visibility: hidden;
}
.errorInputInfoCompte {
    border: 1px solid #EE3535 !important;
}

.validInputInfoCompte {
    border: 1px solid #53D697 !important;
}

.erreurSaisie {
    border: 1px solid #EE3535 !important;
    background: #fff1f1 !important;
}
table.hboxinline {
    width: 100%;
    display: block;
}
th.enteteDeDroite {
    padding: 0px 24px;
}
th.profilMonCompte {
    width: 470px;
}
th.mesOperations {
    width: 520px;
}

/* En-tête du tableau dans #retourAuMenu : décalé de 155px vers la droite, position relative. */
#retourAuMenu th {
    right: 155px;
    position: relative;
}
th.enteteDuMilieu {
    text-align: left;
    font-family: 'Nunito-Regular';
    font-size: 24px;
    line-height: Normal;
    color: #313342;
    font-weight: 600;
}

th.enteteDegauche {}

/* Style pour les éléments avec la classe "iconMesOperationsCompte" */
.iconMesOperationsCompte {
    width: 24px;
    height: 24px;
    margin-bottom: -3px;
    padding: 0px 5px;
}

div#enteteDeLaListeOperation {
    margin-top: 44px;
    margin-bottom: 44px;
}

#ligneSeparationListeOperation{
    display:none;
}
#tableauListeDesOperationsWebshop {
    margin: auto 26px;
}

#tableauListeDesOperationsWebshop .dx-datagrid-headers .dx-header-row > td {
    background: #F4F4F4;
}

/* Survol d'une cellule d'en-tête du tableau Liste Des Operations : fond gris clair . */
#tableauListeDesOperationsWebshop .dx-datagrid-headers .dx-header-row:hover > td {
    background: #EBECEC;
}

#tableauListeDesOperationsWebshop .dx-datagrid-headers .dx-header-row > td:hover {
    background: #f2f2f2;
}

#tableauListeDesOperationsWebshop-datagrid-headers {
    color: #484848;
    touch-action: pinch-zoom;
    border-bottom: none;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 18px;
    background: #FAFAFA;
    height: 64px;
}

/* Désactivation temporaire de boîte de gestion de DataGrid Mes opérations" */
#tableauListeDesOperationsWebshop .dx-datagrid-header-panel {
    display: none !important;
}

/* Style pour les cellules de ligne dans la vue des lignes du tableau "tableauListeDesOperationsWebshop" */
#tableauListeDesOperationsWebshop .dx-datagrid-rowsview .dx-row > td {
    height: 48px;
}

#tableauListeDesOperationsWebshop .dx-datagrid-nowrap .dx-header-row > td > .dx-datagrid-text-content {
    white-space: nowrap;
    color: #08090C;
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
}

#tableauListeDesOperationsWebshop .dx-datagrid .dx-row.dx-data-row > td {
    font-family: 'Nunito-Regular';
    font-style: normal;
    font-size: 14px;
    line-height: 22px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: #313342;
    font-weight: 400;
}

/* Style pour les images dans les cellules des lignes de données du tableau "tableauListeDesOperationsWebshop" lorsqu'elles sont survolées par la souris */
#tableauListeDesOperationsWebshop .dx-datagrid .dx-row.dx-data-row td img:hover {
    cursor: pointer;
}

#tableauListeDesOperationsWebshop .dx-datagrid-headers .dx-row > td {
    border-bottom: none;
    height: 44px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Cellules en mode édition : fixe la hauteur et supprime le remplissage vertical pour un alignement précis. */
#tableauListeDesOperationsWebshop .dx-datagrid-content .dx-datagrid-table .dx-row .dx-editor-cell {
    height: 44px;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Champ de saisie dans les cellules éditées : hauteur fixe pour correspondre à la cellule parente. */
#tableauListeDesOperationsWebshop .dx-editor-cell .dx-texteditor .dx-texteditor-input {
    height: 44px;
}

#tableauListeDesOperationsWebshop .dx-datagrid-header-panel {
    border-bottom: none;
    padding: 0 0 35px 0px;
}

#tableauListeDesOperationsWebshop .dx-datagrid-rowsview .dx-datagrid-table .dx-freespace-row {
    border-bottom: 0;
}

#tableauListeDesOperationsWebshop label:not(.colonneRechercheLabel) {
    font-style: normal;
    font-family: 'Nunito-Bold';
    font-size: 20px;
    line-height: 27px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: #2EA6AE;
}

#tableauListeDesOperationsWebshop {
    margin-top: 42px;
    min-height: 257px;
}

    #tableauListeDesOperationsWebshop .dx-datagrid .dx-row-lines > td {
        border-bottom: 1px solid #EBECEC;
    }
.dx-gridbase-container > .dx-datagrid-pager .dx-page-sizes > .dx-page-size.dx-selection,
.dx-gridbase-container > .dx-pager > .dx-pages > .dx-page.dx-selection 
{
    background-color: var(--couleur-theme);
    color: var(--couleur-texte);
}
#popupRecapAjoutPanier {
    position:fixed;
    min-width: 488px;
    min-height: 600px;
    left: 40%;
    top: 25%;
}

#continuerMesAchats
{
    height: 40px;
    width: 230px;
    border: 1px solid var(--couleur-theme);
    border-radius: 30px;
    background: #FFFFFF;
    color: var(--couleur-theme);
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    margin-left: 24px;
    margin-right: 26px;
    margin-top: 32px;
}

#continuerMesAchats:hover 
{
    background: var(--couleur-secondaire10Pourcent);
}

#voirPanierBtn 
{
    height: 40px;
    width: 184px;
    border: 1px solid var(--couleur-theme);
    border-radius: 30px;
    background: var(--couleur-theme);
    color: var(--couleur-texte);
    border: none;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
}

#voirPanierBtn:hover 
{
    background: var(--couleur-secondaire85Pourcent);
}

#popupRecapAjoutPanier hr {
    border: 1px solid #D1D1D1;
    margin: 0 24px 0 24px;
}

#recapAjoutPanierFooter {
    bottom: 0;
    display: block;
    position: absolute;
    height: 104px;
}

#recapAjoutPanierHeader {
    top: 0;
    display: block;
    position: absolute;
    height: 121px;
    width: 100%;
    text-align: center;
}

    #recapAjoutPanierHeader .iconeValide {
        background: #53D697;
        width: 36px;
        height: 36px;
        display: inline-block;
        margin-top: 18px;
        margin-bottom: 16px;
        border-radius: 20px;
    }

    #recapAjoutPanierHeader .validationTextHeader {
        display: block;
        font-style: normal;
        font-weight: 600;
        font-size: 20.5185px;
        line-height: 28px;
        text-align: center;
        color: #5B5B5B;
        margin-bottom: 24px;
    }

.iconeValide img {
    margin-top: 10px;
}

#listeArticlePanier {
    overflow-x: auto;
    position: absolute;
    top: 136px;
    width: auto;
    right: 0px;
    left: 0px;
    height: auto;
    max-height: 355px;
}

#detailArticle {
    position: relative;
    width: auto;
    height: 86px;
    margin-left: 12px;
    margin-right: 12px;
}

    #detailArticle.estEnteteAssortiment {
        background-color: rgba(94, 128, 214, 0.08);
    }

    #detailArticle img {
        border-radius: 4px;
        width: 94px;
        height: 72px;
        top: 7px;
        left: 12px;
        position: absolute;
    }

    #detailArticle .nomProduitRecap {
        color: #404040;
        font-style: normal;
        font-weight: bold;
        font-size: 15px;
        line-height: 18px;
        position: absolute;
        left: 122px;
        top: 25px;
        right: 12px;
    }

        #detailArticle .nomProduitRecap.ligneEnteteAssortiment {
            color: #5E80D6;
        }
    #detailArticle .codeArticle {
        font-size: 12px;
        text-align: center;
        color: gray;
        display: block;
        position: absolute;
        left: 122px;
        bottom: 10px;
    }

    #detailArticle .croixEmb {
        text-align: right;
        position: absolute;
        right: 24px;
        bottom: 24px;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 18px;
        color: #404040;
    }
/* Conteneur du label liste des clients : affichage flex, alignement au centre à gauche. */
#labelListeDesClients {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* En-tête de la liste des clients : inline-flex, alignement au centre, marges verticales. */
.enteteListeClientWebShop {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

/* Titre de la liste des clients : texte centré, large, gras, police Nunito, taille 24px, couleur foncée. */
.labelListeDesClients h2 {
    font-size: 2em;
    margin: 0;
    font-weight: bold;
    width: 1300px;
    flex: 1;
    text-align: center;
    font-family: 'Nunito-Regular';
    font-size: 24px;
    line-height: Normal;
    color: #313342;
    font-weight: 600;
}

/* Ligne horizontale dans le contenu de page : tirets blancs, fond gris, cachée par défaut. */
#contenuPage hr {
    border: 0;
    border-bottom: 1px dashed #fffdfd;
    background: #d6d6d6;
    height: 0px;
    margin-top: 20px;
    margin-bottom: 5px;
    width: 100%;
    margin-left: 0;
    display: none;
}

/* En-têtes du tableau : supprime la bordure inférieure, fixe la hauteur et ajuste le remplissage vertical. */
#tableauListeClientsWebshop .dx-datagrid-headers .dx-row > td {
    border-bottom: none;
    height: 44px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Cellules en mode édition : fixe la hauteur et supprime le remplissage vertical pour un alignement précis. */
#tableauListeClientsWebshop .dx-datagrid-content .dx-datagrid-table .dx-row .dx-editor-cell {
    height: 44px;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Champ de saisie dans les cellules éditées : hauteur fixe pour correspondre à la cellule parente. */
#tableauListeClientsWebshop .dx-editor-cell .dx-texteditor .dx-texteditor-input {
    height: 44px;
}

/* Cellules des lignes de données : hauteur fixe pour toutes les cellules du corps du tableau. */
#tableauListeClientsWebshop .dx-datagrid-rowsview .dx-row > td {
    height: 44px;
}

/* Cellules générales du tableau : ajustement spécifique du remplissage vertical pour l'espacement. */
#tableauListeClientsWebshop .dx-datagrid .dx-row > td {
    padding-top: 0px;
    padding-bottom: 0px;
}

#tableauListeClientsWebshop .dx-datagrid-headers .dx-header-row > td {
    background: #F4F4F4;
}

/* Survol d'une cellule d'en-tête du tableau Liste Des Clients : fond gris clair . */
#tableauListeClientsWebshop .dx-datagrid-headers .dx-header-row:hover > td {
    background: #EBECEC;
}

#tableauListeClientsWebshop .dx-datagrid-headers .dx-header-row > td:hover {
    background: #f2f2f2;
}
#layoutLightBox {
    display: none;
    height: 100%;
    width: 100%;
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    overflow: hidden;
    opacity: 0.3;
}
#contenuLightBox {
    display: none;
    position: fixed;
    top: 20%;
    left: 50%;
    z-index: 11;
}
#iconeFermetureLightBox,
#iconeFermetureNavigateurFichiers {
    position: absolute;
    top: -15px;
    right: -15px;
    cursor: pointer;
}
#imageLightBox {
   /* max-height: 500px;
    max-width: 500px;*/
}


.has-float-label{display:block;position:relative}.has-float-label label,.has-float-label>span{position:absolute;cursor:text;font-size:75%;opacity:1;-webkit-transition:all .2s;transition:all .2s;top:-.5em;left:.75rem;z-index:3;line-height:1;padding:0 1px}.has-float-label label::after,.has-float-label>span::after{content:" ";display:block;position:absolute;background:#fff;height:2px;top:50%;left:-.2em;right:-.2em;z-index:-1}.has-float-label .form-control::-webkit-input-placeholder{opacity:1;-webkit-transition:all .2s;transition:all .2s}.has-float-label .form-control::-moz-placeholder{opacity:1;transition:all .2s}.has-float-label .form-control:-ms-input-placeholder{opacity:1;transition:all .2s}.has-float-label .form-control::placeholder{opacity:1;-webkit-transition:all .2s;transition:all .2s}.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder{opacity:0}.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder{opacity:0}.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder{opacity:0}.has-float-label .form-control:placeholder-shown:not(:focus)::placeholder{opacity:0}.has-float-label .form-control:placeholder-shown:not(:focus)+*{font-size:150%;opacity:.5;top:.3em}.input-group .has-float-label{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.input-group .has-float-label .form-control{width:100%;border-radius:.25rem}.input-group .has-float-label:not(:last-child),.input-group .has-float-label:not(:last-child) .form-control{border-bottom-right-radius:0;border-top-right-radius:0;border-right:0}.input-group .has-float-label:not(:first-child),.input-group .has-float-label:not(:first-child) .form-control{border-bottom-left-radius:0;border-top-left-radius:0}