{
  "action": "Product-SizeChart",
  "queryString": "cid=sizeguidetroussers",
  "locale": "en",
  "success": true,
  "content": "<div class=\"mdt_gdt_main\">\r\n    <div id=\"mdt_gdt_main_cont\">\r\n        <div class=\"mdt_gdt_title\">\r\n            <h2>how to take your measurement?</h2>\r\n        </div>\r\n        <div class=\"mdt_gdt_wrapper_all\">\r\n            <div class=\"mdt_gdt_wrapper_guides\">\r\n                <div class=\"mdt_gdt_guide_brl mdt_gdt_guide_brand mdt_gdt_guide_brand_selector mdt_gdt_active\">\r\n                    <div class=\"mdt_gdt_guide_wrapper_tab\">\r\n                        <div class=\"mdt_gdt_guide_tab mdt_gdt_active\"  data-type=\"bas\">\r\n                            <div class=\"mdt_gdt_guide_expli\">\r\n                                <div class=\"mdt_gdt_guide_expli_img\">\r\n                                    <img src=\"/on/demandware.static/-/Library-Sites-SharedLibraryMorgan/default/guide-des-tailles/stockman_bas.svg\" alt=\"\">\r\n                                </div>\r\n                                <div class=\"mdt_gdt_guide_expli_txt\">\r\n                                    <p>waist circumference</p>\r\n                                    <p>Pass the tape measure at the level of the navel, the narrowest place of the bust. Measure.</p>\r\n                                    </div>\r\n                                <div class=\"mdt_gdt_guide_expli_txt\">\r\n                                    <p>pelvic circumference</p>\r\n                                    <p>Pass the tape measure at the level of the buttocks, the widest place. Measure.</p>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"mdt_gdt_guide_mixette\">\r\n                                <div class=\"mdt_gdt_guide_fader_wrapper\">\r\n                                    <div class=\"slide_holder\">\r\n                                        <div class=\"slide_title\">\r\n                                            <p>1</p>\r\n                                            <p>waist circumference</p>\r\n                                        </div>\r\n                                        <div class=\"slide_fader\">\r\n                                            <div class=\"slide_fader_barre\" data-marque=\"brl\" data-tableau=\"2\">\r\n                                            </div>\r\n                                            <div class=\"slider_fader_resultat\">\r\n                                                <p class=\"slider_fader_resultat_txt\">\r\n                                                    -\r\n                                                </p>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"slide_holder\">\r\n                                        <div class=\"slide_title\">\r\n                                            <p>2</p>\r\n                                            <p>pelvic circumference</p>\r\n                                        </div>\r\n                                        <div class=\"slide_fader\">\r\n                                            <div class=\"slide_fader_barre\" data-marque=\"brl\" data-tableau=\"3\">\r\n                                            </div>\r\n                                            <div class=\"slider_fader_resultat\">\r\n                                                <p class=\"slider_fader_resultat_txt\">\r\n                                                    -\r\n                                                </p>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"mdt_gdt_guide_result\">\r\n                                    <p>\r\n                                        We recommend the size :\r\n                                    </p>\r\n                                    <div class=\"mdt_gdt_guide_result_circle\">\r\n                                        <p class=\"mdt_gdt_guide_result_txt\">-</p>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div> \r\n                </div>\r\n            </div>\r\n            <div class=\"mdt_gdt_accordion_cont\">\r\n                <div class=\"mdt_gdt_accordion_button\">\r\n                    <img src=\"/on/demandware.static/-/Library-Sites-SharedLibraryMorgan/default/guide-des-tailles/plus.svg\" alt=\"\">\r\n                    <p>What are the international size correspondences ?</p>\r\n                </div>\r\n                <div class=\"mdt_gdt_accordion_table\">\r\n                    <table>\r\n                        <tr>\r\n                            <th>FR-EU</th>\r\n                            <th>UK</th>\r\n                            <th>US</th>\r\n                            <th>PL-CZ</th>\r\n                            <th>DE-CH-AT</th>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>34</td>\r\n                            <td>6</td>\r\n                            <td>2</td>\r\n                            <td>34</td>\r\n                            <td>32</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>36</td>\r\n                            <td>8</td>\r\n                            <td>4</td>\r\n                            <td>36</td>\r\n                            <td>34</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>38</td>\r\n                            <td>10</td>\r\n                            <td>6</td>\r\n                            <td>38</td>\r\n                            <td>36</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>40</td>\r\n                            <td>12</td>\r\n                            <td>8</td>\r\n                            <td>40</td>\r\n                            <td>38</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>42</td>\r\n                            <td>14</td>\r\n                            <td>10</td>\r\n                            <td>42</td>\r\n                            <td>40</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>44</td>\r\n                            <td>16</td>\r\n                            <td>12</td>\r\n                            <td>44</td>\r\n                            <td>42</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>46</td>\r\n                            <td>18</td>\r\n                            <td>14</td>\r\n                            <td>46</td>\r\n                            <td>44</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>S</td>\r\n                            <td>S</td>\r\n                            <td>S</td>\r\n                            <td>S</td>\r\n                            <td>S</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>M</td>\r\n                            <td>M</td>\r\n                            <td>M</td>\r\n                            <td>M</td>\r\n                            <td>M</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>L</td>\r\n                            <td>L</td>\r\n                            <td>L</td>\r\n                            <td>L</td>\r\n                            <td>L</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>XL</td>\r\n                            <td>XL</td>\r\n                            <td>XL</td>\r\n                            <td>XL</td>\r\n                            <td>XL</td>\r\n                        </tr>\r\n                    </table>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"mdt_gdt_loader\">\r\n        <div class=\"mdt_gdt_loader_wheel\"></div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<!------------------------------------>\r\n<!------------------------------------>\r\n<!------------------------------------>\r\n<!--------------- CSS ---------------->\r\n<style id=\"mdt_gdt_style\" type=\"text/css\">\r\n\r\n    .modal-dialog {\r\n        max-width: 100% !important;\r\n    }\r\n    \r\n    #sizeChartModal.open {\r\n        max-width: 1200px;\r\n        width: 100%;\r\n    }\r\n\r\n    #sizeChartModal .modal-body {\r\n        padding: 0;\r\n        margin: 20px 0;\r\n    }\r\n    \r\n    .modal-content {\r\n        max-height: 95vh;\r\n        overflow: auto;\r\n    }\r\n    \r\n    .home-bloc-html {max-width: unset; padding: 0;}\r\n    \r\n    .mdt_gdt_main img {\r\n        position: relative;\r\n        width: 100%;\r\n        display: block;\r\n        margin: 0;\r\n    }\r\n    \r\n    .mdt_gdt_main picture {\r\n        position: relative;\r\n        width: 100%;\r\n    }\r\n    \r\n    .mdt_gdt_main a:focus,\r\n    .mdt_gdt_main a:active,\r\n    .mdt_gdt_main a:link,\r\n    .mdt_gdt_main a:visited {\r\n        text-decoration: none;\r\n    }\r\n    \r\n    .mdt_gdt_bold {\r\n        font-weight: 700;\r\n    }\r\n    \r\n    .mdt_gdt_light {\r\n        font-weight: 300;\r\n    }\r\n    \r\n    .mdt_gdt_upper {\r\n        text-transform: uppercase;\r\n    }\r\n    \r\n    .mdt_gdt_sup {\r\n        font-size: 60%;\r\n        line-height: 0;\r\n        position: relative;\r\n        vertical-align: baseline;\r\n        top: -0.5em;\r\n    }\r\n    \r\n    .mdt_gdt_linkglob {\r\n        position: absolute;\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: 2;\r\n        top: 0;\r\n        left: 0;\r\n    }\r\n    \r\n    .mdt_gdt_main p, .mdt_gdt_main h1, .mdt_gdt_main h2, .mdt_gdt_main table {\r\n        position: relative;\r\n        font-family: 'Gotham' , Arial , sans-serif;\r\n    }\r\n    \r\n    .mdt_gdt_main {\r\n        position: relative;\r\n        width: 100%;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        --themeColor: #FDECE4;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 5px;\r\n        margin: 3% auto 0 auto;\r\n    }\r\n    \r\n    #mdt_gdt_main_cont {\r\n        position: relative;\r\n        width: 100%;\r\n        z-index: 1;\r\n        background-color: #fff;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 20px;\r\n        opacity: 0;\r\n        transition: all .3s ease-in-out;\r\n    }\r\n    \r\n    /* TITLE */\r\n    \r\n    .mdt_gdt_title {\r\n        position: relative;\r\n        width: 100%;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 5px;\r\n    }\r\n    \r\n    .mdt_gdt_title h2 {\r\n        font-size: clamp(17px, 1.1vw, 21px);\r\n        font-weight: 300;\r\n        color: #000;\r\n        margin: 0;\r\n        text-align: center;\r\n        text-transform: uppercase;\r\n    }\r\n    \r\n    /* WRAPPER */\r\n    .mdt_gdt_wrapper_all {\r\n        position: relative;\r\n        width: 100%;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n    }\r\n    \r\n    /* wrapper guides */\r\n    .mdt_gdt_wrapper_guides {\r\n        position: relative;\r\n        width: 100%;\r\n    }\r\n    \r\n    .mdt_gdt_guide_brl {\r\n        position: relative;\r\n        z-index: 0;\r\n        width: 100%;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 20px;\r\n        opacity: 0;\r\n    }\r\n    \r\n    .mdt_gdt_guide_brl.mdt_gdt_active, .mdt_gdt_guide_cch.mdt_gdt_active, .mdt_gdt_guide_bnb.mdt_gdt_active {\r\n        opacity: 1;\r\n        z-index: 1;\r\n    }\r\n    \r\n    .mdt_gdt_cont_subm {\r\n        position: relative;\r\n        width: 100%;\r\n        display: grid;\r\n        grid-template-columns: repeat(4, 1fr);\r\n        grid-auto-rows: 1fr;\r\n        column-gap: 10px;\r\n    }\r\n    \r\n    .mdt_gdt_guide_wrapper_tab {\r\n        position: relative;\r\n        width: 95%;\r\n    }\r\n    \r\n    .mdt_gdt_guide_tab {\r\n        position: absolute;\r\n        z-index: 1;\r\n        opacity: 0;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        display: grid;\r\n        grid-template-columns: 60% 35%;\r\n        grid-template-rows: auto;\r\n        justify-content: space-between;\r\n    }\r\n    \r\n    .mdt_gdt_guide_tab.mdt_gdt_active {\r\n        opacity: 1;\r\n        z-index: 2;\r\n        position: relative;\r\n    }\r\n    \r\n    .mdt_gdt_guide_expli {\r\n        position: relative;\r\n        width: 100%;\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n        gap: 10px;\r\n        border: solid 3px var(--themeColor);\r\n        padding: 30px 0;\r\n        box-sizing: border-box;\r\n    }\r\n    \r\n    .mdt_gdt_guide_expli_img {\r\n        position: relative;\r\n        width: 31%;\r\n        margin: 0 0 0 5%;\r\n    }\r\n    \r\n    .mdt_gdt_guide_expli_txt {\r\n        position: absolute;\r\n        width: 55%;\r\n        left: 38%;\r\n    }\r\n    \r\n    .mdt_gdt_guide_expli_txt>p:first-of-type {\r\n        font-size: clamp(15px, 1vw, 18px);\r\n        font-weight: 700;\r\n        color: #000;\r\n        margin: 0;\r\n        text-transform: uppercase;\r\n    }\r\n    \r\n    .mdt_gdt_guide_expli_txt>p:last-of-type {\r\n        font-size: clamp(11px, 0.8vw, 14px);\r\n        font-weight: 300;\r\n        color: #000;\r\n        margin: 0;\r\n    }\r\n    \r\n    .mdt_gdt_guide_wrapper_tab .mdt_gdt_guide_tab:first-of-type .mdt_gdt_guide_expli .mdt_gdt_guide_expli_txt:nth-of-type(2) {\r\n        top: 39%;\r\n    }\r\n    \r\n    .mdt_gdt_guide_wrapper_tab .mdt_gdt_guide_tab:first-of-type .mdt_gdt_guide_expli .mdt_gdt_guide_expli_txt:nth-of-type(3) {\r\n        top: 59%;\r\n    }\r\n    \r\n    .mdt_gdt_guide_mixette {\r\n        position: relative;\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        align-self: flex-start;\r\n    }\r\n    \r\n    /* mixette */\r\n    .mdt_gdt_guide_fader_wrapper {\r\n        position: relative;\r\n        width: 100%;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: clamp(20px, 1.4vw, 25px);\r\n        margin: 10px 0 0 0;\r\n    }\r\n    \r\n    .slide_holder {\r\n        width: 100%;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: clamp(5px, 0.6vw, 10px);\r\n    }\r\n    \r\n    .slide_title {\r\n        position: relative;\r\n        width: 100%;\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n    }\r\n    \r\n    .slide_title > p {\r\n        font-size: clamp(14px, 0.8vw, 16px);\r\n        font-weight: 700;\r\n        text-transform: uppercase;\r\n    }\r\n    \r\n    .slide_title > p:first-of-type {\r\n        color: #000;\r\n        margin: 0 10px 0 0;\r\n        --circleDim: clamp(25px, 1.6vw, 30px);\r\n        width: var(--circleDim);\r\n        height: var(--circleDim);\r\n        line-height: var(--circleDim);\r\n        border-radius: 100%;\r\n        background-color: var(--themeColor);\r\n        text-align: center;\r\n        vertical-align: middle;\r\n    }\r\n    \r\n    .slide_title > p:last-of-type {\r\n        color: #000;\r\n        margin: 0;\r\n    }\r\n    \r\n    .slide_fader {\r\n        position: relative;\r\n        width: 100%;\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n    }\r\n    \r\n    .slide_fader_barre {\r\n        position: relative;\r\n        width: 67%;\r\n        height: 2px;\r\n        margin: 0 0 0 3%;\r\n        background-color: #C0BFBF;\r\n    }\r\n    \r\n    .slide_fader .slide_fader_barre .noUi-handle {\r\n        width: clamp(17px, 1vw, 20px);\r\n        height: clamp(17px, 1vw, 20px);\r\n        border-radius: 100%;\r\n        background-color: #000000;\r\n        filter:drop-shadow(1px 1px 4px #00000033);\r\n        box-shadow: none;\r\n        border: none;\r\n        position: absolute;\r\n        right: -4%;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        cursor: pointer;\r\n    }\r\n    \r\n    .slide_fader .slide_fader_barre .noUi-handle::after, .slide_fader .slide_fader_barre .noUi-handle::before {\r\n        content: none;\r\n    }\r\n    \r\n    .slide_fader .noUi-target {\r\n        width: 67%;\r\n        height: 2px;\r\n        margin: 0 0 0 3%;\r\n        background-color: #C0BFBF;\r\n    }\r\n    \r\n    .slider_fader_resultat {\r\n        position: relative;\r\n        width: 25%;\r\n        background-color: #000;\r\n    }\r\n    \r\n    .slider_fader_resultat>p {\r\n        font-size: clamp(12px, 0.9vw, 16px);\r\n        font-weight: 700;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: center;\r\n        margin: 0;\r\n        padding: 5px 0;\r\n    }\r\n    \r\n    .mdt_gdt_guide_result {\r\n        position: relative;\r\n        width: 100%;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        background-color: var(--themeColor);\r\n        padding: 15px 0;\r\n    }\r\n    \r\n    .mdt_gdt_guide_result>p:first-of-type {\r\n        font-size: clamp(11px, 0.8vw, 14px);\r\n        font-weight: 400;\r\n        color: #000;\r\n        margin: 0;\r\n        text-align: center;\r\n    }\r\n    \r\n    .mdt_gdt_guide_result_circle {\r\n        --resultDim: clamp(40px, 2.7vw, 50px);\r\n        width: var(--resultDim);\r\n        height: var(--resultDim);\r\n        background-color: #000;\r\n        border-radius: 100%;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        align-items: center;\r\n        justify-content: center;\r\n        filter:drop-shadow(1px 1px 4px #00000033);\r\n    }\r\n    \r\n    .mdt_gdt_guide_result_txt {\r\n        font-size: clamp(14px, 0.9vw, 16px);\r\n        font-weight: 700;\r\n        color: #FFFFFF;\r\n        margin: 0;\r\n        text-align: center;\r\n    }\r\n    \r\n    .mdt_gdt_loader {\r\n        position : absolute;\r\n        z-index: 0;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%,-50%);\r\n    }\r\n    \r\n    .mdt_gdt_loader_wheel {\r\n      animation: spin 1s infinite linear;\r\n      border: 2px solid #C0BFBF;\r\n      border-left: 4px solid #000;\r\n      border-radius: 50%;\r\n      height: 50px;\r\n      width: 50px;\r\n      box-sizing: border-box;\r\n    }\r\n    \r\n    @keyframes spin {\r\n      0% {\r\n        transform: rotate(0deg);\r\n      }\r\n      100% {\r\n        transform: rotate(360deg);\r\n      }\r\n    }\r\n    \r\n    /* menu accordeon */\r\n    .mdt_gdt_accordion_cont {\r\n        position: relative;\r\n        width: 95%;\r\n        z-index: 1;\r\n        display: flex;\r\n        flex-flow: column nowrap;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 5px;\r\n    }\r\n    \r\n    .mdt_gdt_accordion_button {\r\n        position: relative;\r\n        width: 100%;\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n        gap: 10px;\r\n        background: #F1F1F1;\r\n        padding: 15px;\r\n        box-sizing: border-box;\r\n    }\r\n    \r\n    .mdt_gdt_accordion_button img {\r\n        width: 20px;\r\n        transform: rotate(0deg);\r\n        transition: all .3s ease-in-out;\r\n    }\r\n    \r\n    .mdt_gdt_accordion_button p {\r\n        font-size: clamp(17px, 1.1vw, 21px);\r\n        font-weight: 700;\r\n        color: #000000;\r\n        margin: 0;\r\n    }\r\n    \r\n    .mdt_gdt_accordion_table {\r\n        position: relative;\r\n        width: 100%;\r\n        height: 0px;\r\n        overflow: hidden;\r\n        transition: all .3s ease-in-out;\r\n    }\r\n    \r\n    .mdt_gdt_accordion_table table {\r\n        position: relative;\r\n        width: 100%;\r\n        border-collapse: collapse;\r\n        text-align: center;\r\n        font-size: clamp(15px, 1vw, 19px);\r\n        top: -50px;\r\n        opacity: 1;\r\n        transition: all .3s ease-in-out;\r\n    }\r\n    \r\n    .mdt_gdt_accordion_table table, .mdt_gdt_accordion_table th, .mdt_gdt_accordion_table td {\r\n        border: solid 2px #F1F1F1;\r\n    }\r\n    \r\n    .mdt_gdt_accordion_table th {\r\n        width: 20%;\r\n        background: #F1F1F1;\r\n    }\r\n    \r\n    .mdt_gdt_accordion_table th, .mdt_gdt_accordion_table td {\r\n        padding: 15px;\r\n    }\r\n    \r\n    @media screen and (max-width: 990px) {\r\n\r\n.modal-content {\r\n        max-height: 80vh;\r\n    }\r\n    \r\n        .mdt_gdt_main {\r\n            width: 100%;\r\n        }\r\n    \r\n        .mdt_gdt_title {\r\n            width: 90%;\r\n        }\r\n    \r\n        .mdt_gdt_title h2 {\r\n            font-size: clamp(14px, 4.4vw, 24px);\r\n        }\r\n    \r\n        .mdt_gdt_brands {\r\n            width: 90%;\r\n        }\r\n\r\n        .mdt_gdt_cont_subm {\r\n            width: 270%;\r\n            margin: 0 2.5%;\r\n            grid-template-columns: repeat(4, 1fr) 1px;\r\n        }\r\n    \r\n        .mdt_gdt_guide_wrapper_tab {\r\n            width: 95%;\r\n        }\r\n    \r\n        .mdt_gdt_guide_tab {\r\n            display: flex;\r\n            flex-flow: row wrap;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            gap: 10px;\r\n        }\r\n    \r\n        .mdt_gdt_guide_expli {\r\n            border: none;\r\n            padding: 40px 0;\r\n        }\r\n    \r\n        .mdt_gdt_guide_expli_img {\r\n            margin: 0;\r\n        }\r\n    \r\n        .mdt_gdt_guide_wrapper_tab .mdt_gdt_guide_tab:first-of-type .mdt_gdt_guide_expli .mdt_gdt_guide_expli_txt:nth-of-type(2) {\r\n            top: 36%;\r\n        }\r\n    \r\n        .mdt_gdt_guide_wrapper_tab .mdt_gdt_guide_tab:first-of-type .mdt_gdt_guide_expli .mdt_gdt_guide_expli_txt:nth-of-type(3) {\r\n            top: 62%;\r\n        }\r\n    \r\n        .mdt_gdt_guide_expli_txt > p:first-of-type {\r\n            font-size: clamp(12px, 3.7vw, 26px);\r\n        }\r\n    \r\n        .mdt_gdt_guide_expli_txt > p:last-of-type {\r\n            font-size: clamp(10px, 3.1vw, 25px);\r\n        }\r\n    \r\n        .mdt_gdt_guide_fader_wrapper {\r\n            margin: 0;\r\n            gap: clamp(20px, 6.2vw, 30px);\r\n        }\r\n    \r\n        .slide_holder {\r\n            gap: clamp(5px, 1.5vw, 25px);\r\n        }\r\n    \r\n        .mdt_gdt_guide_mixette {\r\n            gap: 20px;\r\n        }\r\n    \r\n        .slide_title>p:first-of-type {\r\n            --circleDim: clamp(25px, 7.8vw, 45px);\r\n            margin: 0 clamp(7px, 2.2vw, 15px) 0 0;\r\n        }\r\n    \r\n        .slide_title>p {\r\n            font-size: clamp(13px, 4vw, 25px);\r\n        }\r\n    \r\n        .slide_fader .slide_fader_barre .noUi-handle {\r\n            width: clamp(17px, 5.4vw, 30px);\r\n            height: clamp(17px, 5.4vw, 30px);\r\n            right: -5%;\r\n    \r\n        }\r\n    \r\n        .slider_fader_resultat>p {\r\n            font-size: clamp(11px, 3.4vw, 25px);\r\n        }\r\n    \r\n        .mdt_gdt_guide_result > p:first-of-type {\r\n            font-size: clamp(11px, 3.4vw, 25px);\r\n        }\r\n    \r\n        .mdt_gdt_guide_result_circle {\r\n            --resultDim: clamp(40px, 12.8vw, 70px);\r\n        }\r\n    \r\n        .mdt_gdt_guide_result_txt {\r\n            font-size: clamp(14px, 4.4vw, 25px);\r\n        }\r\n    \r\n        .mdt_gdt_accordion_button p {\r\n            font-size: clamp(15px, 4.6vw, 20px);\r\n        }\r\n    \r\n        .mdt_gdt_accordion_table th, .mdt_gdt_accordion_table td {\r\n            padding: 10px 0;\r\n        }\r\n    \r\n        .mdt_gdt_accordion_table table {\r\n            font-size: clamp(12px, 3.7vw, 15px);\r\n        }\r\n    \r\n    }\r\n</style>\r\n\r\n<!-- script mixettes -->\r\n<script type=\"text/javascript\">\r\n    idJs = 'nouiJs';\r\n    //check si le script noUiSlider existe sinon le créé\r\n    if (document.getElementById(idJs) === null){\r\n        let script = document.createElement(\"script\");\r\n        script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.6.1/nouislider.min.js');\r\n        script.setAttribute('id', idJs);\r\n        document.getElementById('mdt_gdt_style').parentNode.insertBefore(script, document.getElementById('mdt_gdt_style').nextSibling);\r\n        //une fois le script chargé, lance la création des mixettes\r\n        script.onload = () => {\r\n            document.getElementById('mdt_gdt_main_cont').style.opacity = 1;\r\n            //fonction création des mixettes\r\n            function gdtGlob() {\r\n            //création tableaux concordance marque\r\n            let brl = {};\r\n                brl.poitrine = ['80-84 cm', '84-88 cm', '88-92 cm', '92-96 cm', '96-100 cm', '100-104 cm'];\r\n                brl.taille = ['61-65 cm', '65-69 cm', '69-73 cm', '73-77 cm', '77-81 cm', '81-85 cm'];\r\n                brl.bassin = ['87-91 cm', '91-95 cm', '95-99 cm', '99-103 cm', '103-107 cm', '107-111 cm'];\r\n                brl.sizeHaut = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];\r\n                brl.sizeBas = ['34', '36', '38', '40', '42', '44'];\r\n\r\n            //fonction création de chaque handler\r\n            function createHandler(x, display, tableau, type, resultat, tableauResultat, index){\r\n                display.innerHTML = tableau[0];//affiche la valeur mini du tableau de correspondance slider\r\n\r\n                noUiSlider.create(x, {\r\n                    start: 1,\r\n                    range: {\r\n                        'min': 1,\r\n                        'max': Object.keys(tableau).length,\r\n                    },\r\n                    step: 1,\r\n                });\r\n\r\n                x.noUiSlider.on('slide', function(){\r\n                    display.innerHTML = tableau[x.noUiSlider.get() - 1];//correspondance position slide/valeur dans tableau\r\n                    tableauResultat[index] = x.noUiSlider.get() - 1;// affichage resultat slide\r\n                    dispResult(resultat, tableauResultat, type);//mise a jour resultat global\r\n                });\r\n            };\r\n\r\n            //fonction qui retourne tableau de correpondance des handlers en fonction du data-value du handler\r\n            function tableChoice (brand, tablo){\r\n                let result;\r\n                switch (brand) {\r\n                    case 'brl':\r\n                        switch (tablo) {\r\n                            case '1':\r\n                                result = brl.poitrine;\r\n                                return result;\r\n                                break;\r\n                            case '2':\r\n                                result = brl.taille;\r\n                                return result;\r\n                                break;\r\n                            case '3':\r\n                                result = brl.bassin;\r\n                                return result;\r\n                                break;\r\n                        };\r\n                        break;\r\n                    case 'cch':\r\n                        switch (tablo) {\r\n                            case '1':\r\n                                result = cch.poitrine;\r\n                                return result;\r\n                                break;\r\n                            case '2':\r\n                                result = cch.taille;\r\n                                return result;\r\n                                break;\r\n                            case '3':\r\n                                result = cch.bassin;\r\n                                return result;\r\n                                break;\r\n                        };\r\n                        break;\r\n                    case 'bnbF':\r\n                        switch (tablo) {\r\n                            case '1':\r\n                                result = bnbF.poitrine;\r\n                                return result;\r\n                                break;\r\n                            case '2':\r\n                                result = bnbF.taille;\r\n                                return result;\r\n                                break;\r\n                            case '3':\r\n                                result = bnbF.bassin;\r\n                                return result;\r\n                                break;\r\n                        };\r\n                        break; \r\n                    case 'bnbH':\r\n                        switch (tablo) {\r\n                            case '1':\r\n                                result = bnbH.poitrine;\r\n                                return result;\r\n                                break;\r\n                            case '2':\r\n                                result = bnbH.taille;\r\n                                return result;\r\n                                break;\r\n                            case '3':\r\n                                result = bnbH.bassin;\r\n                                return result;\r\n                                break;\r\n                        };\r\n                        break;\r\n                };\r\n            };\r\n\r\n            //fonction qui retourne le tableau de correspondance du resultat global\r\n            function typeChoice (brand, type){\r\n                let result;\r\n                switch (brand){\r\n                    case 'brl':\r\n                        switch (type){\r\n                            case 'haut':\r\n                                result = brl.sizeHaut;\r\n                                return result;\r\n                                break;\r\n                            case 'bas':\r\n                                result = brl.sizeBas;\r\n                                return result;\r\n                                break;\r\n                        };\r\n                    case 'cch':\r\n                        switch (type){\r\n                            case 'haut':\r\n                                result = cch.sizeHaut;\r\n                                return result;\r\n                                break;\r\n                            case 'bas':\r\n                                result = cch.sizeBas;\r\n                                return result;\r\n                                break;\r\n                        };\r\n                    case 'bnbF':\r\n                        switch (type){\r\n                            case 'haut':\r\n                                result = bnbF.sizeHaut;\r\n                                return result;\r\n                                break;\r\n                            case 'bas':\r\n                                result = bnbF.sizeBas;\r\n                                return result;\r\n                                break;\r\n                        };\r\n                    case 'bnbH':\r\n                        switch (type){\r\n                            case 'haut':\r\n                                result = bnbH.sizeHaut;\r\n                                return result;\r\n                                break;\r\n                            case 'bas':\r\n                                result = bnbH.sizeBas;\r\n                                return result;\r\n                                break;\r\n                        };\r\n                };\r\n            };\r\n\r\n            //fonction qui modifie le resultat global\r\n            function dispResult (val, valTab, type){\r\n                let valTabMax = 0;\r\n                //boucle qui retourne la valeur max des handlers\r\n                for ( element of valTab){\r\n                    if(element > valTabMax){\r\n                        valTabMax = element;\r\n                    };\r\n                };\r\n                val.innerHTML = type[valTabMax];//modifie le texte html du resultat global\r\n            };\r\n\r\n            let brand = document.querySelectorAll('.mdt_gdt_guide_brand_selector');//selectionne tout les cta marques\r\n\r\n            //pour chaque cta marques\r\n            brand.forEach(function(element){\r\n\r\n                let tabulation = element.querySelectorAll('.mdt_gdt_guide_tab');//selectionne tout les onglets\r\n\r\n                //pour chaque onglets\r\n                tabulation.forEach(function(element){\r\n\r\n                    let resultat = element.querySelector('.mdt_gdt_guide_result_txt');//selectionne tout les conteneur texte resultat global \r\n                    let tableauResultat = [];//créé un tableau \r\n                    let type = element.dataset.type;//récupère le type de resultat pour le resultat global\r\n\r\n                    let holders = element.querySelectorAll('.slide_fader');//selection tout les conteneurs des handlers\r\n\r\n                    //pour chaque conteneur\r\n                    holders.forEach(function(element, index){\r\n                        let fader = element.querySelector('.slide_fader_barre');//selectionne tout les sliders\r\n                        let indexResultat = index;// retourne de quel conteneur il s'agit\r\n                        let marque = fader.dataset.marque;//recupere la marque du slider\r\n                        let tableau = fader.dataset.tableau;//recupere le tableau de resultat du slider\r\n                        let marqTab = tableChoice(marque, tableau);//recupere le tableau de correspondance en fonction de marque et tableau de resultat\r\n                        let typeTab = typeChoice(marque, type);//recupere le tableau de correspondance du resultat global en fonction de la marque et du type de resultat\r\n                        let valDisplay = element.querySelector('.slider_fader_resultat_txt');//selectionne le texte du resultat de slider\r\n                        //créé les sliders\r\n                        createHandler(fader, valDisplay, marqTab, typeTab, resultat, tableauResultat, indexResultat);\r\n                    });\r\n                });\r\n            });\r\n        };\r\n\r\n        //lance la fonction globale\r\n        gdtGlob();\r\n        };\r\n    };\r\n</script>\r\n\r\n<script type=\"text/javascript\">\r\n        accordionButton = document.querySelector('.mdt_gdt_accordion_button');\r\n        accordionTable = document.querySelector('.mdt_gdt_accordion_table');\r\n        accordionToken = false;\r\n        accordionTable.firstElementChild.style.top = \"-\" + accordionTable.firstElementChild.offsetHeight + \"px\";\r\n\r\n        accordionButton.addEventListener('click', function(){\r\n            if(!accordionToken){\r\n                accordionTable.style.height = accordionTable.firstElementChild.offsetHeight + \"px\";\r\n                accordionTable.firstElementChild.style.top = \"0px\";\r\n                accordionButton.firstElementChild.style.transform = \"rotate(180deg)\";\r\n                accordionToken = true;\r\n            } else {\r\n                accordionTable.style.height = \"0px\";\r\n                accordionTable.firstElementChild.style.top = \"-\" + accordionTable.firstElementChild.offsetHeight + \"px\";\r\n                accordionButton.firstElementChild.style.transform = \"rotate(0deg)\";\r\n                accordionToken = false;\r\n            }\r\n        });\r\n</script>"
}