{"id":48470,"date":"2026-05-28T09:33:58","date_gmt":"2026-05-28T09:33:58","guid":{"rendered":"https:\/\/www.cnshining.com\/?page_id=48470"},"modified":"2026-06-02T05:25:15","modified_gmt":"2026-06-02T05:25:15","slug":"calculateur-de-capacite-des-aerosols","status":"publish","type":"page","link":"https:\/\/www.cnshining.com\/fr\/centre-doutils-demballage\/calculateur-de-capacite-des-aerosols","title":{"rendered":"Calculateur de capacit\u00e9 des a\u00e9rosols en aluminium"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"48470\" class=\"elementor elementor-48470\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e4ac71a e-flex e-con-boxed e-con e-parent\" data-id=\"1e4ac71a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd2f5a7 elementor-icon-list--layout-inline elementor-align-center elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"fd2f5a7\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items elementor-inline-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.cnshining.com\/fr\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-home\" viewbox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Maison \/<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.cnshining.com\/fr\/centre-doutils-demballage\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Centre d&#039;outils d&#039;emballage<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2b4f7e93 e-flex e-con-boxed e-con e-parent\" data-id=\"2b4f7e93\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c6722f3 e-con-full e-flex e-con e-child\" data-id=\"c6722f3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35015ca elementor-widget elementor-widget-html\" data-id=\"35015ca\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"acc-calculator\" class=\"sp-aerosol-can-calculator\" data-sp-aerosol-can-calculator>\r\n  <style>\r\n    #acc-calculator,\r\n    #acc-calculator * { box-sizing: border-box; }\r\n\r\n    #acc-calculator {\r\n      --sp-bg: #f5f7fb;\r\n      --sp-panel: #ffffff;\r\n      --sp-text: #152033;\r\n      --sp-muted: #5f708c;\r\n      --sp-line: #d8e2ef;\r\n      --sp-blue: #1363df;\r\n      --sp-blue-dark: #082a5e;\r\n      --sp-blue-soft: #edf4ff;\r\n      --sp-silver: #eef3fa;\r\n      --sp-red: #d62828;\r\n      --sp-shadow: 0 20px 48px rgba(8, 42, 94, .08);\r\n      --acc-value-size: 24px;\r\n      max-width: 1220px;\r\n      margin: 28px auto;\r\n      color: var(--sp-text);\r\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n      line-height: 1.55;\r\n    }\r\n\r\n    #acc-calculator h2,\r\n    #acc-calculator h3,\r\n    #acc-calculator p { margin: 0; }\r\n\r\n    #acc-calculator button,\r\n    #acc-calculator input,\r\n    #acc-calculator select {\r\n      font: inherit;\r\n    }\r\n\r\n    #acc-calculator .acc-panel,\r\n    #acc-calculator .acc-preview-panel {\r\n      -webkit-user-select: none;\r\n      user-select: none;\r\n    }\r\n\r\n    #acc-calculator .acc-native-input,\r\n    #acc-calculator .acc-native-select {\r\n      -webkit-user-select: auto;\r\n      user-select: auto;\r\n    }\r\n\r\n    #acc-calculator .acc-shell {\r\n      background: linear-gradient(180deg, #fbfcfe 0%, var(--sp-bg) 100%);\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 30px;\r\n      padding: clamp(24px, 5vw, 56px);\r\n      box-shadow: 0 12px 30px rgba(15, 36, 74, .04);\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      padding: 8px 14px;\r\n      margin-bottom: 18px;\r\n      border: 1px solid #bcd0f1;\r\n      border-radius: 999px;\r\n      background: #fff;\r\n      color: var(--sp-blue);\r\n      font-size: 13px;\r\n      font-weight: 800;\r\n      letter-spacing: .02em;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    #acc-calculator .acc-badge::before {\r\n      content: \"\";\r\n      width: 9px;\r\n      height: 9px;\r\n      border-radius: 50%;\r\n      background: var(--sp-blue);\r\n      box-shadow: 0 0 0 5px rgba(19, 99, 223, .12);\r\n      flex: 0 0 auto;\r\n    }\r\n\r\n    #acc-calculator .acc-hero h2 {\r\n      margin-bottom: 18px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(30px, 4vw, 42px);\r\n      line-height: .98;\r\n      letter-spacing: -.05em;\r\n      max-width: 980px;\r\n    }\r\n\r\n    #acc-calculator .acc-hero p {\r\n      max-width: 980px;\r\n      color: var(--sp-muted);\r\n      font-size: clamp(16px, 2vw, 18px);\r\n      line-height: 1.75;\r\n    }\r\n\r\n    #acc-calculator .acc-feature-row {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 14px;\r\n      margin-top: 28px;\r\n    }\r\n\r\n    #acc-calculator .acc-feature {\r\n      background: #fff;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      padding: 16px;\r\n      min-height: 112px;\r\n    }\r\n\r\n    #acc-calculator .acc-feature strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 18px;\r\n      line-height: 1.25;\r\n      letter-spacing: -.02em;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    #acc-calculator .acc-feature span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 13px;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    #acc-calculator .acc-browser {\r\n      margin-top: 28px;\r\n      padding: 28px;\r\n      border-radius: 28px;\r\n      background: linear-gradient(135deg, #1a1b1f 0%, #0f1013 100%);\r\n      color: #fff;\r\n      box-shadow: 0 22px 48px rgba(0, 0, 0, .18);\r\n    }\r\n\r\n    #acc-calculator .acc-browser-kicker {\r\n      color: #ff4b39;\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      letter-spacing: .04em;\r\n      text-transform: uppercase;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n\r\n\r\n    #acc-calculator .acc-browser-subtitle {\r\n      font-size: 15px;\r\n      line-height: 1.6;\r\n      color: rgba(255,255,255,.78);\r\n      margin-bottom: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(5, minmax(0, 1fr));\r\n      gap: 18px;\r\n      margin-top: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-field label {\r\n      display: block;\r\n      margin-bottom: 8px;\r\n      font-size: 13px;\r\n      font-weight: 700;\r\n      color: rgba(255,255,255,.92);\r\n    }\r\n\r\n    #acc-calculator .acc-browser-field select,\r\n    #acc-calculator .acc-native-select,\r\n    #acc-calculator .acc-native-input {\r\n      width: 100%;\r\n      border: 1px solid rgba(255,255,255,.18);\r\n      border-radius: 0;\r\n      background: transparent;\r\n      color: inherit;\r\n      min-height: 48px;\r\n      padding: 10px 14px;\r\n      outline: none;\r\n      box-shadow: none;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-field select {\r\n      border-width: 0 0 1px 0;\r\n      color: #fff;\r\n      padding-left: 0;\r\n      padding-right: 24px;\r\n      font-size: 16px;\r\n      background-color: transparent;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-field option,\r\n    #acc-calculator .acc-native-select option { color: #111827; }\r\n\r\n    #acc-calculator .acc-browser-table-wrap {\r\n      margin-top: 18px;\r\n      overflow-x: auto;\r\n      border-top: 1px solid rgba(255,255,255,.14);\r\n      padding-top: 16px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-table {\r\n      width: 100%;\r\n      border-collapse: collapse;\r\n      min-width: 820px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-table th,\r\n    #acc-calculator .acc-browser-table td {\r\n      padding: 10px 10px;\r\n      font-size: 14px;\r\n      text-align: left;\r\n      border-bottom: 1px solid rgba(255,255,255,.08);\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-table th {\r\n      color: rgba(255,255,255,.72);\r\n      font-size: 12px;\r\n      text-transform: uppercase;\r\n      letter-spacing: .04em;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-table td:last-child,\r\n    #acc-calculator .acc-browser-table th:last-child { text-align: right; }\r\n\r\n    #acc-calculator .acc-browser-table .is-highlight td {\r\n      background: rgba(255,255,255,.08);\r\n    }\r\n\r\n    #acc-calculator .acc-browser-empty {\r\n      padding: 14px 0 6px;\r\n      color: rgba(255,255,255,.72);\r\n      font-size: 14px;\r\n    }\r\n\r\n    #acc-calculator .acc-workspace {\r\n      display: grid;\r\n      grid-template-columns: minmax(360px, 1.08fr) minmax(360px, .92fr);\r\n      gap: clamp(22px, 4vw, 36px);\r\n      align-items: start;\r\n      overflow: visible;\r\n      margin-top: 28px;\r\n    }\r\n\r\n    #acc-calculator .acc-preview-column {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-panel,\r\n    #acc-calculator .acc-preview-panel {\r\n      position: relative;\r\n      background: var(--sp-panel);\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 24px;\r\n      box-shadow: var(--sp-shadow);\r\n    }\r\n\r\n    #acc-calculator .acc-panel,\r\n    #acc-calculator .acc-preview-panel {\r\n      padding: clamp(22px, 3vw, 30px);\r\n      overflow: visible;\r\n      z-index: 20;\r\n    }\r\n\r\n    #acc-calculator .acc-preview-panel {\r\n      min-height: 570px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    #acc-calculator .acc-panel::before,\r\n    #acc-calculator .acc-preview-panel::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: 18px;\r\n      right: 18px;\r\n      top: 0;\r\n      height: 4px;\r\n      background: linear-gradient(90deg, var(--sp-blue), var(--sp-blue-dark));\r\n      border-radius: 999px;\r\n    }\r\n\r\n    #acc-calculator .acc-title-row {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      justify-content: space-between;\r\n      gap: 18px;\r\n      margin-bottom: 20px;\r\n      padding-top: 4px;\r\n    }\r\n\r\n    #acc-calculator h3 {\r\n      color: var(--sp-blue-dark);\r\n      font-size: 22px;\r\n      line-height: 1.1;\r\n      letter-spacing: -.03em;\r\n    }\r\n\r\n    #acc-calculator .acc-title-row p {\r\n      margin-top: 8px;\r\n      color: var(--sp-muted);\r\n      font-size: 14px;\r\n    }\r\n\r\n    #acc-calculator .acc-input-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 14px;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-split-row {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\r\n      gap: 14px;\r\n      align-items: start;\r\n    }\r\n\r\n    #acc-calculator .acc-field {\r\n      display: block;\r\n      position: relative;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n      padding: 14px;\r\n      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-field:focus-within {\r\n      border-color: rgba(19, 99, 223, .58);\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .10);\r\n      transform: translateY(-1px);\r\n    }\r\n\r\n    #acc-calculator .acc-field > span {\r\n      display: block;\r\n      margin-bottom: 2px;\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-weight: 850;\r\n      text-transform: uppercase;\r\n      letter-spacing: .055em;\r\n    }\r\n\r\n    #acc-calculator .acc-field small {\r\n      display: block;\r\n      margin-bottom: 8px;\r\n      color: #8ba0bb;\r\n      font-size: 12px;\r\n    }\r\n\r\n    #acc-calculator .acc-mouth-field[hidden] {\r\n      display: none !important;\r\n    }\r\n\r\n    #acc-calculator .acc-mouth-field .acc-native-select:disabled {\r\n      opacity: 1;\r\n    }\r\n\r\n    #acc-calculator .acc-height-range {\r\n      margin: 8px 0 10px;\r\n      color: var(--sp-blue);\r\n      font-size: 13px;\r\n      font-weight: 800;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    #acc-calculator .acc-height-quick-row {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 8px;\r\n      margin-top: 12px;\r\n    }\r\n\r\n    #acc-calculator .acc-height-quick,\r\n    #acc-calculator .acc-reset,\r\n    #acc-calculator .acc-copy,\r\n    #acc-calculator .acc-clear {\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 13px;\r\n      background: #fff;\r\n      color: var(--sp-blue-dark);\r\n      padding: 12px 14px;\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      cursor: pointer;\r\n      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #acc-calculator .acc-height-quick:hover,\r\n    #acc-calculator .acc-reset:hover,\r\n    #acc-calculator .acc-copy:hover,\r\n    #acc-calculator .acc-clear:hover {\r\n      transform: translateY(-1px);\r\n      border-color: rgba(19, 99, 223, .4);\r\n      background: #f7fbff;\r\n      box-shadow: 0 10px 24px rgba(22, 32, 51, .05);\r\n    }\r\n\r\n    #acc-calculator .acc-copy {\r\n      border-color: transparent;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark));\r\n      color: #fff;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .18);\r\n    }\r\n\r\n\r\n    #acc-calculator .acc-copy:active,\r\n    #acc-calculator .acc-copy:focus,\r\n    #acc-calculator .acc-copy:focus-visible,\r\n    #acc-calculator .acc-copy.is-selected,\r\n    #acc-calculator .acc-copy.acc-is-selected,\r\n    #acc-calculator .acc-reset:active,\r\n    #acc-calculator .acc-reset:focus,\r\n    #acc-calculator .acc-reset:focus-visible,\r\n    #acc-calculator .acc-reset.is-selected,\r\n    #acc-calculator .acc-reset.acc-is-selected,\r\n    #acc-calculator .acc-clear:active,\r\n    #acc-calculator .acc-clear:focus,\r\n    #acc-calculator .acc-clear:focus-visible,\r\n    #acc-calculator .acc-clear.is-selected,\r\n    #acc-calculator .acc-clear.acc-is-selected,\r\n    #acc-calculator .acc-action-row button.is-selected,\r\n    #acc-calculator .acc-action-row button.acc-is-selected,\r\n    #acc-calculator .acc-action-row button:active,\r\n    #acc-calculator .acc-action-row button:focus-visible {\r\n      color: #fff !important;\r\n      -webkit-text-fill-color: #fff !important;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      background-color: var(--sp-blue-dark) !important;\r\n      background-image: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      border-color: transparent !important;\r\n      outline: none !important;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .22) !important;\r\n    }\r\n\r\n\r\n    \/* Final override for action buttons: prevents the first active click from flashing white. *\/\r\n    #acc-calculator .acc-action-row > button:active,\r\n    #acc-calculator .acc-action-row > button:focus,\r\n    #acc-calculator .acc-action-row > button:focus-visible,\r\n    #acc-calculator .acc-action-row > button.is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"],\r\n    #acc-calculator .acc-action-row > button.is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:hover {\r\n      color: #ffffff !important;\r\n      -webkit-text-fill-color: #ffffff !important;\r\n      background: #082a5e !important;\r\n      background-color: #082a5e !important;\r\n      background-image: linear-gradient(135deg, #1363df, #082a5e) !important;\r\n      border-color: transparent !important;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .24) !important;\r\n      opacity: 1 !important;\r\n    }\r\n\r\n    #acc-calculator .acc-action-row > button.acc-button-selected,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:active,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus {\r\n      color: #ffffff !important;\r\n      -webkit-text-fill-color: #ffffff !important;\r\n      background: #082a5e !important;\r\n      background-color: #082a5e !important;\r\n      background-image: linear-gradient(135deg, #1363df, #082a5e) !important;\r\n      border-color: transparent !important;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .24) !important;\r\n      opacity: 1 !important;\r\n    }\r\n\r\n\r\n    #acc-calculator .acc-input-box {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) auto;\r\n      gap: 12px;\r\n      align-items: center;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-native-select,\r\n    #acc-calculator .acc-native-input {\r\n      border: 0 !important;\r\n      background: transparent !important;\r\n      padding: 2px 0 !important;\r\n      min-height: auto;\r\n      color: var(--sp-blue-dark) !important;\r\n      font-size: var(--acc-value-size) !important;\r\n      font-weight: 900 !important;\r\n      line-height: 1.15 !important;\r\n      letter-spacing: -.04em !important;\r\n      text-transform: none !important;\r\n      outline: none !important;\r\n      box-shadow: none !important;\r\n    }\r\n\r\n    #acc-calculator .acc-native-input::-webkit-outer-spin-button,\r\n    #acc-calculator .acc-native-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\r\n    #acc-calculator .acc-native-input { appearance: textfield; }\r\n\r\n    #acc-calculator .acc-input-box em {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: 58px;\r\n      padding: 9px 12px;\r\n      border-radius: 999px;\r\n      background: var(--sp-silver);\r\n      color: var(--sp-blue);\r\n      font-size: 14px;\r\n      font-style: normal;\r\n      font-weight: 900;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #acc-calculator .acc-warning {\r\n      margin-top: 16px;\r\n      border: 1px solid #bfdcff;\r\n      border-radius: 16px;\r\n      background: #eef7ff;\r\n      color: var(--sp-red);\r\n      padding: 14px 16px;\r\n      font-size: 14px;\r\n      line-height: 1.7;\r\n      display: none;\r\n    }\r\n\r\n    #acc-calculator .acc-result-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 10px;\r\n      margin-top: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-result {\r\n      padding: 13px;\r\n      border-radius: 16px;\r\n      background: linear-gradient(180deg, #fbfdff, #f5f9ff);\r\n      border: 1px dashed rgba(19, 99, 223, .32);\r\n      min-height: 112px;\r\n    }\r\n\r\n    #acc-calculator .acc-result span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 10.5px;\r\n      font-weight: 900;\r\n      letter-spacing: .04em;\r\n      text-transform: uppercase;\r\n      margin-bottom: 6px;\r\n    }\r\n\r\n    #acc-calculator .acc-result strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 22px;\r\n      line-height: 1.08;\r\n      word-break: break-word;\r\n      letter-spacing: -.03em;\r\n    }\r\n\r\n    #acc-calculator .acc-result small {\r\n      display: block;\r\n      margin-top: 7px;\r\n      color: var(--sp-muted);\r\n      font-size: 11px;\r\n      line-height: 1.4;\r\n    }\r\n\r\n    #acc-calculator .acc-action-row {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr 1fr;\r\n      gap: 10px;\r\n      margin-top: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table-wrap {\r\n      margin-top: 18px;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      overflow: hidden;\r\n      background: #fff;\r\n    }\r\n\r\n    #acc-calculator .acc-table-title {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      gap: 12px;\r\n      padding: 13px 16px;\r\n      background: #f8fbff;\r\n      border-bottom: 1px solid var(--sp-line);\r\n      color: var(--sp-blue-dark);\r\n      font-size: 14px;\r\n      font-weight: 900;\r\n    }\r\n\r\n    #acc-calculator table.acc-size-table {\r\n      width: 100%;\r\n      border-collapse: collapse;\r\n      font-size: 13px;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table th,\r\n    #acc-calculator .acc-size-table td {\r\n      padding: 10px 12px;\r\n      border-bottom: 1px solid #edf2f7;\r\n      text-align: right;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table th:first-child,\r\n    #acc-calculator .acc-size-table td:first-child { text-align: left; }\r\n\r\n    #acc-calculator .acc-size-table th {\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      text-transform: uppercase;\r\n      letter-spacing: .04em;\r\n      background: #fff;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table tr.is-active td {\r\n      background: #eef7ff;\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table tr:last-child td { border-bottom: 0; }\r\n\r\n    #acc-calculator .acc-svg-wrap {\r\n      width: 100%;\r\n      min-height: 470px;\r\n      background: #fff;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 24px;\r\n      padding: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-svg {\r\n      display: block;\r\n      width: auto;\r\n      height: auto;\r\n      max-width: 100%;\r\n      margin: 0 auto;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-svg-text {\r\n      fill: #64748b;\r\n      font-size: 3.2px;\r\n      font-weight: 800;\r\n    }\r\n\r\n    #acc-calculator .acc-svg-text-blue {\r\n      fill: var(--sp-blue);\r\n      font-size: 3.4px;\r\n      font-weight: 800;\r\n    }\r\n\r\n    #acc-calculator .acc-svg-label {\r\n      fill: #55657d;\r\n      font-size: 4.1px;\r\n      font-weight: 700;\r\n      letter-spacing: .02em;\r\n    }\r\n\r\n    #acc-calculator .acc-svg-dim-blue {\r\n      stroke: var(--sp-blue);\r\n      stroke-width: 0.45;\r\n      marker-start: url(#accArrowStart);\r\n      marker-end: url(#accArrowEnd);\r\n    }\r\n\r\n    #acc-calculator .acc-svg-extension {\r\n      stroke: #9bbcff;\r\n      stroke-width: 0.38;\r\n    }\r\n\r\n    #acc-calculator .acc-status-card {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 10px;\r\n      margin-top: 16px;\r\n      width: 100%;\r\n    }\r\n\r\n    #acc-calculator .acc-status {\r\n      border: 1px solid var(--sp-line);\r\n      background: #fff;\r\n      border-radius: 16px;\r\n      padding: 14px;\r\n    }\r\n\r\n    #acc-calculator .acc-status span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-weight: 900;\r\n      text-transform: uppercase;\r\n      letter-spacing: .04em;\r\n      margin-bottom: 5px;\r\n    }\r\n\r\n    #acc-calculator .acc-status strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 20px;\r\n      line-height: 1.1;\r\n      letter-spacing: -.03em;\r\n    }\r\n\r\n    #acc-calculator .acc-product-link-card {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 12px;\r\n      margin-top: 12px;\r\n      width: 100%;\r\n      padding: 12px 14px;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 16px;\r\n      background: linear-gradient(180deg, #fbfdff, #f5f9ff);\r\n    }\r\n\r\n    #acc-calculator .acc-product-link-card[hidden] {\r\n      display: none !important;\r\n    }\r\n\r\n    #acc-calculator .acc-product-link-card span {\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-weight: 900;\r\n      letter-spacing: .035em;\r\n      text-transform: uppercase;\r\n      line-height: 1.35;\r\n    }\r\n\r\n    #acc-calculator .acc-product-link {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-height: 36px;\r\n      padding: 9px 13px;\r\n      border-radius: 999px;\r\n      background: var(--sp-blue-dark);\r\n      color: #fff !important;\r\n      -webkit-text-fill-color: #fff !important;\r\n      font-size: 13px;\r\n      font-weight: 900;\r\n      text-decoration: none;\r\n      white-space: nowrap;\r\n      box-shadow: 0 10px 22px rgba(8, 42, 94, .16);\r\n      transition: transform .16s ease, box-shadow .16s ease;\r\n    }\r\n\r\n    #acc-calculator .acc-product-link:hover {\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 14px 28px rgba(8, 42, 94, .22);\r\n    }\r\n\r\n    #acc-calculator .acc-size-table a.acc-size-link {\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n      text-decoration: none;\r\n      border-bottom: 1px solid rgba(19, 99, 223, .35);\r\n    }\r\n\r\n    #acc-calculator .acc-size-table a.acc-size-link:hover {\r\n      color: var(--sp-blue);\r\n      border-bottom-color: currentColor;\r\n    }\r\n\r\n    #acc-calculator .acc-toast {\r\n      position: fixed;\r\n      right: 20px;\r\n      bottom: 20px;\r\n      z-index: 99999;\r\n      transform: translateY(18px);\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      background: #082a5e;\r\n      color: #fff;\r\n      padding: 12px 14px;\r\n      border-radius: 14px;\r\n      box-shadow: 0 18px 50px rgba(8, 42, 94, .22);\r\n      transition: opacity .18s ease, transform .18s ease;\r\n      font-weight: 800;\r\n      font-size: 14px;\r\n    }\r\n\r\n    #acc-calculator .acc-toast.is-visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n\r\n\r\n    \/* Final action-button style: transparent background, deep-blue text, no visual change on click\/selection. *\/\r\n    #acc-calculator .acc-action-row > button,\r\n    #acc-calculator .acc-action-row > button:hover,\r\n    #acc-calculator .acc-action-row > button:active,\r\n    #acc-calculator .acc-action-row > button:focus,\r\n    #acc-calculator .acc-action-row > button:focus-visible,\r\n    #acc-calculator .acc-action-row > button.is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"],\r\n    #acc-calculator .acc-action-row > button.is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:hover {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: var(--sp-line) !important;\r\n      box-shadow: none !important;\r\n      transform: none !important;\r\n      opacity: 1 !important;\r\n      outline: none !important;\r\n    }\r\n\r\n    @media (max-width: 1080px) {\r\n      #acc-calculator .acc-browser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n    }\r\n\r\n    @media (max-width: 980px) {\r\n      #acc-calculator .acc-workspace { grid-template-columns: 1fr; }\r\n      #acc-calculator .acc-preview-panel { min-height: auto; }\r\n      #acc-calculator .acc-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n    }\r\n\r\n    @media (max-width: 720px) {\r\n      #acc-calculator {\r\n        --acc-value-size: 22px;\r\n      }\r\n\r\n      #acc-calculator .acc-action-row,\r\n      #acc-calculator .acc-result-grid,\r\n      #acc-calculator .acc-feature-row,\r\n      #acc-calculator .acc-status-card,\r\n      #acc-calculator .acc-height-quick-row,\r\n      #acc-calculator .acc-browser-grid {\r\n        grid-template-columns: 1fr;\r\n      }\r\n\r\n      #acc-calculator .acc-svg-wrap { min-height: 420px; }\r\n      #acc-calculator .acc-browser { padding: 22px 18px; }\r\n      #acc-calculator .acc-split-row { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 620px) {\r\n      #acc-calculator .acc-shell { padding: 22px 16px; }\r\n      #acc-calculator .acc-title-row { flex-direction: column; }\r\n      #acc-calculator .acc-reset,\r\n      #acc-calculator .acc-copy,\r\n      #acc-calculator .acc-clear { width: 100%; }\r\n      #acc-calculator .acc-size-table-wrap,\r\n      #acc-calculator .acc-browser-table-wrap { overflow-x: auto; }\r\n    }\r\n\r\n\r\n    \/* v36: action buttons stay transparent\/deep-blue, hover only adds lift + shadow. *\/\r\n    #acc-calculator .acc-action-row > button,\r\n    #acc-calculator .acc-action-row > button:focus,\r\n    #acc-calculator .acc-action-row > button:focus-visible,\r\n    #acc-calculator .acc-action-row > button:active,\r\n    #acc-calculator .acc-action-row > button.is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"] {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: var(--sp-line) !important;\r\n      box-shadow: none !important;\r\n      transform: translateY(0) !important;\r\n      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;\r\n      outline: none !important;\r\n    }\r\n\r\n    #acc-calculator .acc-action-row > button:hover,\r\n    #acc-calculator .acc-action-row > button:focus:hover,\r\n    #acc-calculator .acc-action-row > button:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button:active:hover,\r\n    #acc-calculator .acc-action-row > button.is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:hover {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: rgba(8, 42, 94, .22) !important;\r\n      box-shadow: 0 14px 28px rgba(8, 42, 94, .16) !important;\r\n      transform: translateY(-3px) !important;\r\n    }\r\n\r\n\r\n    \/* v36 fix: selected\/focused action buttons must not keep old shadows; hover alone lifts. *\/\r\n    #acc-calculator .acc-action-row > button.is-selected:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:not(:hover),\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:not(:hover),\r\n    #acc-calculator .acc-action-row > button.is-selected:focus:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:focus:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus:not(:hover),\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:focus:not(:hover),\r\n    #acc-calculator .acc-action-row > button.is-selected:focus-visible:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:focus-visible:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus-visible:not(:hover),\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:focus-visible:not(:hover),\r\n    #acc-calculator .acc-action-row > button.is-selected:active:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:active:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:active:not(:hover),\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:active:not(:hover) {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: var(--sp-line) !important;\r\n      box-shadow: none !important;\r\n      transform: translateY(0) !important;\r\n    }\r\n\r\n    #acc-calculator .acc-action-row > button.is-selected:focus:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:focus:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:focus:hover,\r\n    #acc-calculator .acc-action-row > button.is-selected:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button.is-selected:active:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:active:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:active:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:active:hover {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: rgba(8, 42, 94, .22) !important;\r\n      box-shadow: 0 14px 28px rgba(8, 42, 94, .16) !important;\r\n      transform: translateY(-3px) !important;\r\n    }\r\n<\/style>\r\n\r\n  <div class=\"acc-shell\">\r\n    <div class=\"acc-hero\">\r\n      <div class=\"acc-badge\">Estimateur de capacit\u00e9 des a\u00e9rosols<\/div>\r\n      <h2>Calculateur de capacit\u00e9 des a\u00e9rosols en aluminium<\/h2>\r\n      <p>\r\n        Utilisez le tableau des dimensions homologu\u00e9es des a\u00e9rosols en aluminium pour v\u00e9rifier la capacit\u00e9 \u00e0 ras bord, la capacit\u00e9 de remplissage en gaz liquide et la capacit\u00e9 de remplissage en gaz comprim\u00e9. La hauteur est ajust\u00e9e dynamiquement en fonction du diam\u00e8tre s\u00e9lectionn\u00e9, tandis que le tableau des dimensions standard reste disponible ci-dessous.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"acc-workspace\">\r\n      <div class=\"acc-preview-column\">\r\n        <section class=\"acc-preview-panel\">\r\n          <div>\r\n            <div class=\"acc-svg-wrap\">\r\n              <svg id=\"accCanSvg\" class=\"acc-svg\" viewbox=\"0 0 240 410\" aria-label=\"sch\u00e9ma de l&#039;a\u00e9rosol\">\r\n                <defs>\r\n                  <lineargradient id=\"accMetal\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">\r\n                    <stop offset=\"0%\" stop-color=\"#cbd5e1\"><\/stop>\r\n                    <stop offset=\"18%\" stop-color=\"#f8fafc\"><\/stop>\r\n                    <stop offset=\"48%\" stop-color=\"#e2e8f0\"><\/stop>\r\n                    <stop offset=\"76%\" stop-color=\"#ffffff\"><\/stop>\r\n                    <stop offset=\"100%\" stop-color=\"#94a3b8\"><\/stop>\r\n                  <\/lineargradient>\r\n                  <lineargradient id=\"accLiquid\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\r\n                    <stop offset=\"0%\" stop-color=\"#dbeafe\" stop-opacity=\"0.76\"><\/stop>\r\n                    <stop offset=\"100%\" stop-color=\"#60a5fa\" stop-opacity=\"0.46\"><\/stop>\r\n                  <\/lineargradient>\r\n                  <clippath id=\"accCanClip\">\r\n                    <path id=\"accCanClipPath\"><\/path>\r\n                  <\/clippath>\r\n                  <marker id=\"accArrowStart\" markerwidth=\"4\" markerheight=\"4\" refx=\"0.5\" refy=\"2\" orient=\"auto-start-reverse\">\r\n                    <path d=\"M 4 0 L 0 2 L 4 4 z\" fill=\"#1363df\"><\/path>\r\n                  <\/marker>\r\n                  <marker id=\"accArrowEnd\" markerwidth=\"4\" markerheight=\"4\" refx=\"3.5\" refy=\"2\" orient=\"auto\">\r\n                    <path d=\"M 0 0 L 4 2 L 0 4 z\" fill=\"#1363df\"><\/path>\r\n                  <\/marker>\r\n                <\/defs>\r\n                <path id=\"accCanFill\" fill=\"url(#accMetal)\" stroke=\"none\"><\/path>\r\n                <g clip-path=\"url(#accCanClip)\">\r\n                  <rect id=\"accLiquidRect\" x=\"0\" y=\"120\" width=\"260\" height=\"230\" fill=\"url(#accLiquid)\"><\/rect>\r\n                  <line id=\"accLiquidLine\" x1=\"40\" y1=\"120\" x2=\"150\" y2=\"120\" stroke=\"#1363df\" stroke-width=\"0.7\" stroke-dasharray=\"2 1.8\"><\/line>\r\n                <\/g>\r\n                <path id=\"accCanStroke\" fill=\"none\" stroke=\"#475569\" stroke-width=\"0.85\"><\/path>\r\n                <line id=\"accMouthLeftExt\" class=\"acc-svg-extension\"><\/line>\r\n                <line id=\"accMouthRightExt\" class=\"acc-svg-extension\"><\/line>\r\n                <line id=\"accMouthLine\" class=\"acc-svg-dim-blue\"><\/line>\r\n                <text id=\"accMouthText\" class=\"acc-svg-text-blue\"><\/text>\r\n                <text id=\"accMouthNote\" class=\"acc-svg-text-blue\"><\/text>\r\n                <rect id=\"accCup\" fill=\"#e2e8f0\" stroke=\"#475569\" stroke-width=\"0.5\" rx=\"1.4\"><\/rect>\r\n                <rect id=\"accValve\" fill=\"#f8fafc\" stroke=\"#475569\" stroke-width=\"0.5\" rx=\"1.6\"><\/rect>\r\n                <line id=\"accStem\" stroke=\"#64748b\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accHeightLine\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accHeightTopTick\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accHeightBottomTick\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <text id=\"accHeightText\" class=\"acc-svg-text acc-svg-secondary\"><\/text>\r\n                <line id=\"accDiameterLine\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accDiameterLeftTick\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accDiameterRightTick\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <text id=\"accDiameterText\" class=\"acc-svg-text acc-svg-secondary\"><\/text>\r\n                <text id=\"accFillText\" class=\"acc-svg-text acc-svg-secondary\"><\/text>\r\n                <text id=\"accCanLabel\" class=\"acc-svg-label\">Ingr\u00e9dients<\/text>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"acc-status-card\">\r\n              <div class=\"acc-status\">\r\n                <span>Taille s\u00e9lectionn\u00e9e<\/span>\r\n                <strong id=\"accStatusSize\">\u2014<\/strong>\r\n              <\/div>\r\n              <div class=\"acc-status\">\r\n                <span>Niveau de remplissage<\/span>\r\n                <strong id=\"accStatusRatio\">\u2014<\/strong>\r\n              <\/div>\r\n              <div class=\"acc-status\">\r\n                <span>Bouche<\/span>\r\n                <strong id=\"accStatusMouth\">\u2014<\/strong>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"acc-product-link-card\" id=\"accProductLinkCard\" hidden>\r\n              <span id=\"accProductLinkLabel\">Page produit pour la taille s\u00e9lectionn\u00e9e<\/span>\r\n              <a id=\"accProductLink\" class=\"acc-product-link\" href=\"#\" target=\"_blank\" rel=\"nofollow noopener\">Voir la page produit<\/a>\r\n            <\/div>\r\n          <\/div>\r\n        <\/section>\r\n      <\/div>\r\n\r\n      <section class=\"acc-panel\">\r\n        <div class=\"acc-title-row\">\r\n          <div>\r\n            <h3>Taille de l&#039;entr\u00e9e<\/h3>\r\n            <p>Choisissez d&#039;abord le diam\u00e8tre de la bo\u00eete, puis saisissez une hauteur dans la plage prise en charge.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"acc-input-grid\">\r\n          <div class=\"acc-split-row\">\r\n            <label class=\"acc-field\">\r\n              <span>Diam\u00e8tre de la bo\u00eete<\/span>\r\n              <small>Choisissez d&#039;abord le diam\u00e8tre.<\/small>\r\n              <div class=\"acc-input-box\">\r\n                <select id=\"accDiameter\" class=\"acc-native-select\"><\/select>\r\n                <em>mm<\/em>\r\n              <\/div>\r\n            <\/label>\r\n\r\n            <label class=\"acc-field\">\r\n              <span>Hauteur de la bo\u00eete<\/span>\r\n              <div id=\"accHeightRange\" class=\"acc-height-range\">Gamme: -<\/div>\r\n              <div class=\"acc-input-box\">\r\n                <input id=\"accHeight\" class=\"acc-native-input\" type=\"number\" step=\"1\" \/>\r\n                <em>mm<\/em>\r\n              <\/div>\r\n            <\/label>\r\n          <\/div>\r\n\r\n          <label class=\"acc-field acc-mouth-field\" id=\"accMouthField\" hidden>\r\n            <span>Diam\u00e8tre de la bouche<\/span>\r\n            <small id=\"accMouthHelp\">Choisissez une ouverture de 20 mm ou de 25,4 mm (1 pouce) pour ce diam\u00e8tre.<\/small>\r\n            <div class=\"acc-input-box\">\r\n              <select id=\"accMouth\" class=\"acc-native-select\"><\/select>\r\n              <em>bouche<\/em>\r\n            <\/div>\r\n          <\/label>\r\n\r\n          <label class=\"acc-field\">\r\n            <span>Afficher le mode de remplissage<\/span>\r\n            <small>Contr\u00f4le le niveau de remplissage bleu dans l&#039;aper\u00e7u<\/small>\r\n            <div class=\"acc-input-box\">\r\n              <select id=\"accMode\" class=\"acc-native-select\">\r\n                <option>Gaz liqu\u00e9fi\u00e9<\/option>\r\n                <option>Gaz comprim\u00e9<\/option>\r\n                <option>pleine capacit\u00e9<\/option>\r\n              <\/select>\r\n              <em>mode<\/em>\r\n            <\/div>\r\n          <\/label>\r\n        <\/div>\r\n\r\n        <div id=\"accWarning\" class=\"acc-warning\"><\/div>\r\n\r\n        <div class=\"acc-result-grid\">\r\n          <div class=\"acc-result\">\r\n            <span>pleine capacit\u00e9<\/span>\r\n            <strong><b id=\"accFullMl\">0 ml<\/b><\/strong>\r\n            <small>fl oz US : <i id=\"accFullUsOz\">0<\/i><br>oz liq. Royaume-Uni : <i id=\"accFullUkOz\">0<\/i><\/small>\r\n          <\/div>\r\n\r\n          <div class=\"acc-result\">\r\n            <span>Gaz liqu\u00e9fi\u00e9<\/span>\r\n            <strong><b id=\"accLiquidMl\">0 ml<\/b><\/strong>\r\n            <small>fl oz US : <i id=\"accLiquidUsOz\">0<\/i><br>oz liq. Royaume-Uni : <i id=\"accLiquidUkOz\">0<\/i><\/small>\r\n          <\/div>\r\n\r\n          <div class=\"acc-result\">\r\n            <span>Gaz comprim\u00e9<\/span>\r\n            <strong><b id=\"accCompressedMl\">\u2014<\/b><\/strong>\r\n            <small>fl oz US : <i id=\"accCompressedUsOz\">\u2014<\/i><br>oz liq. Royaume-Uni : <i id=\"accCompressedUkOz\">\u2014<\/i><\/small>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"acc-action-row\">\r\n          <button type=\"button\" class=\"acc-copy\" id=\"accCopy\">Copier le r\u00e9sultat<\/button>\r\n          <button type=\"button\" class=\"acc-reset\" id=\"accReset\">Exemple de r\u00e9initialisation<\/button>\r\n          <button type=\"button\" class=\"acc-clear\" id=\"accCopyTable\">Tableau des formats de copie<\/button>\r\n        <\/div>\r\n\r\n        <div class=\"acc-size-table-wrap\">\r\n          <div class=\"acc-table-title\">\r\n            <span id=\"accTableTitle\">Tailles disponibles pour le diam\u00e8tre s\u00e9lectionn\u00e9<\/span>\r\n            <span id=\"accTableCount\">0 tailles<\/span>\r\n          <\/div>\r\n          <table class=\"acc-size-table\">\r\n            <thead>\r\n              <tr>\r\n                <th>Taille<\/th>\r\n                <th>Complet<\/th>\r\n                <th>Liquide<\/th>\r\n                <th>Comprim\u00e9<\/th>\r\n              <\/tr>\r\n            <\/thead>\r\n            <tbody id=\"accCompatibleRows\"><\/tbody>\r\n          <\/table>\r\n        <\/div>\r\n      <\/section>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"acc-toast\" id=\"accToast\" role=\"status\" aria-live=\"polite\">Copi\u00e9<\/div>\r\n\r\n  <script>\r\n    (function () {\r\n      var root = document.getElementById('acc-calculator');\r\n      if (!root || root.dataset.accReady === 'true') return;\r\n      root.dataset.accReady = 'true';\r\n\r\n      var canData = [\r\n        { no: 1, size: '\u03a622 \u00d7 52', d: 22, h: 52, full: 17, liquid: 12, compressed: null },\r\n        { no: 2, size: '\u03a622 \u00d7 68', d: 22, h: 68, full: 23, liquid: 15, compressed: null },\r\n        { no: 3, size: '\u03a625 \u00d7 65', d: 25, h: 65, full: 28, liquid: 20, compressed: null },\r\n        { no: 4, size: '\u03a625 \u00d7 95', d: 25, h: 95, full: 41, liquid: 30, compressed: null },\r\n        { no: 5, size: '\u03a635 \u00d7 65', d: 35, h: 65, full: 53, liquid: 40, compressed: 30 },\r\n        { no: 6, size: '\u03a635 \u00d7 88', d: 35, h: 88, full: 75, liquid: 50, compressed: null },\r\n        { no: 7, size: '\u03a635 \u00d7 105', d: 35, h: 105, full: 89, liquid: 50, compressed: null },\r\n        { no: 8, size: '\u03a638 \u00d7 90', d: 38, h: 90, full: 89, liquid: 50, compressed: null },\r\n        { no: 9, size: '\u03a635 \u00d7 125', d: 35, h: 125, full: 110, liquid: 75, compressed: null },\r\n        { no: 10, size: '\u03a638 \u00d7 110', d: 38, h: 110, full: 110, liquid: 75, compressed: null },\r\n        { no: 11, size: '\u03a640 \u00d7 100', d: 40, h: 100, full: 110, liquid: 75, compressed: null },\r\n        { no: 12, size: '\u03a638 \u00d7 125', d: 38, h: 125, full: 120, liquid: 80, compressed: 65 },\r\n        { no: 13, size: '\u03a635 \u00d7 135', d: 35, h: 135, full: 125, liquid: 85, compressed: 65 },\r\n        { no: 14, size: '\u03a635 \u00d7 156', d: 35, h: 156, full: 140, liquid: 100, compressed: 75 },\r\n        { no: 15, size: '\u03a638 \u00d7 138', d: 38, h: 138, full: 140, liquid: 100, compressed: 75 },\r\n        { no: 16, size: '\u03a640 \u00d7 125', d: 40, h: 125, full: 140, liquid: 100, compressed: 75 },\r\n        { no: 17, size: '\u03a645 \u00d7 105', d: 45, h: 105, full: 140, liquid: 100, compressed: 75 },\r\n        { no: 18, size: '\u03a638 \u00d7 165', d: 38, h: 165, full: 150, liquid: 125, compressed: 100 },\r\n        { no: 19, size: '\u03a640 \u00d7 140', d: 40, h: 140, full: 150, liquid: 125, compressed: 100 },\r\n        { no: 20, size: '\u03a640 \u00d7 156', d: 40, h: 156, full: 175, liquid: 125, compressed: 100 },\r\n        { no: 21, size: '\u03a645 \u00d7 125', d: 45, h: 125, full: 175, liquid: 125, compressed: 100 },\r\n        { no: 22, size: '\u03a645 \u00d7 150', d: 45, h: 150, full: 210, liquid: 150, compressed: 125 },\r\n        { no: 23, size: '\u03a650 \u00d7 125', d: 50, h: 125, full: 210, liquid: 150, compressed: 125 },\r\n        { no: 24, size: '\u03a653 \u00d7 110', d: 53, h: 110, full: 210, liquid: 150, compressed: 125 },\r\n        { no: 25, size: '\u03a645 \u00d7 190', d: 45, h: 190, full: 270, liquid: 200, compressed: 150 },\r\n        { no: 26, size: '\u03a650 \u00d7 156', d: 50, h: 156, full: 270, liquid: 200, compressed: 150 },\r\n        { no: 27, size: '\u03a653 \u00d7 142', d: 53, h: 142, full: 270, liquid: 200, compressed: 150 },\r\n        { no: 28, size: '\u03a653 \u00d7 160', d: 53, h: 160, full: 300, liquid: 225, compressed: 175 },\r\n        { no: 29, size: '\u03a650 \u00d7 190', d: 50, h: 190, full: 335, liquid: 250, compressed: 200 },\r\n        { no: 30, size: '\u03a653 \u00d7 173', d: 53, h: 173, full: 335, liquid: 250, compressed: 200 },\r\n        { no: 31, size: '\u03a659 \u00d7 142', d: 59, h: 142, full: 335, liquid: 250, compressed: 200 },\r\n        { no: 32, size: '\u03a653 \u00d7 190', d: 53, h: 190, full: 350, liquid: 275, compressed: 225 },\r\n        { no: 33, size: '\u03a650 \u00d7 225', d: 50, h: 225, full: 405, liquid: 300, compressed: 250 },\r\n        { no: 34, size: '\u03a653 \u00d7 205', d: 53, h: 205, full: 405, liquid: 300, compressed: 250 },\r\n        { no: 35, size: '\u03a659 \u00d7 169', d: 59, h: 169, full: 405, liquid: 300, compressed: 250 },\r\n        { no: 36, size: '\u03a666 \u00d7 143', d: 66, h: 143, full: 405, liquid: 300, compressed: 250 },\r\n        { no: 37, size: '\u03a659 \u00d7 214', d: 59, h: 214, full: 520, liquid: 400, compressed: 300 },\r\n        { no: 38, size: '\u03a666 \u00d7 178', d: 66, h: 178, full: 520, liquid: 400, compressed: 300 },\r\n        { no: 39, size: '\u03a666 \u00d7 218', d: 66, h: 218, full: 650, liquid: 500, compressed: 400 },\r\n        { no: 40, size: '\u03a666 \u00d7 260', d: 66, h: 260, full: 800, liquid: 600, compressed: 500 },\r\n        { no: 41, size: '\u03a674 \u00d7 210', d: 74, h: 210, full: 800, liquid: 600, compressed: 500 },\r\n        { no: 42, size: '\u03a674 \u00d7 263', d: 74, h: 263, full: 1000, liquid: 750, compressed: 600 },\r\n        { no: 43, size: '\u03a680 \u00d7 226', d: 80, h: 226, full: 1000, liquid: 750, compressed: 600 }\r\n      ];\r\n\r\n      var productUrlBySize = {\r\n              \"\u03a622 \u00d7 68\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/22068-aluminum-aerosol-can\",\r\n              \"\u03a625 \u00d7 65\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/25065-aluminum-aerosol-can\",\r\n              \"\u03a625 \u00d7 95\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/25095-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 65\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35065-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 88\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35088-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 105\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35105-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 90\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38090-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35125-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 110\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38110-aluminum-aerosol-can\",\r\n              \"\u03a640 \u00d7 100\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/40100-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38125-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 135\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35135-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 156\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35156-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 138\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38138-aluminum-aerosol-can\",\r\n              \"\u03a640 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/40125-aluminum-aerosol-can\",\r\n              \"\u03a645 \u00d7 105\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/45105-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 165\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38165-aluminum-aerosol-can\",\r\n              \"\u03a640 \u00d7 140\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/40140-aluminum-aerosol-can\",\r\n              \"\u03a640 \u00d7 156\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/40156-aluminum-aerosol-can\",\r\n              \"\u03a645 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/45125-aluminum-aerosol-can\",\r\n              \"\u03a645 \u00d7 150\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/45150-aluminum-aerosol-can\",\r\n              \"\u03a650 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/50125-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 110\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53110-aluminum-aerosol-can\",\r\n              \"\u03a645 \u00d7 190\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/45190-aluminum-aerosol-can\",\r\n              \"\u03a650 \u00d7 156\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/50156-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 142\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53142-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 160\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53160-aluminum-aerosol-can\",\r\n              \"\u03a650 \u00d7 190\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/50190-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 173\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53173-aluminum-aerosol-can\",\r\n              \"\u03a659 \u00d7 142\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/59142-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 190\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53190-aluminum-aerosol-can\",\r\n              \"\u03a650 \u00d7 225\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/50225-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 205\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53205-aluminum-aerosol-can\",\r\n              \"\u03a659 \u00d7 169\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/59169-aluminum-aerosol-can\",\r\n              \"\u03a666 \u00d7 143\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/66143-aluminum-aerosol-can\",\r\n              \"\u03a659 \u00d7 214\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/59214-aluminum-aerosol-can\",\r\n              \"\u03a666 \u00d7 178\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/66178-aluminum-aerosol-can\",\r\n              \"\u03a666 \u00d7 218\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/66218-aluminum-aerosol-can\",\r\n              \"\u03a666 \u00d7 260\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/66260-aluminum-aerosol-can\",\r\n              \"\u03a674 \u00d7 210\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/74210-aluminum-aerosol-can\",\r\n              \"\u03a674 \u00d7 263\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/74263-aluminum-aerosol-can\",\r\n              \"\u03a680 \u00d7 226\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/80226-aluminum-aerosol-can\"\r\n      };\r\n\r\n      var DIAGRAM_SCALE = 1.85;\r\n      var DEFAULT_DIAMETER = 53;\r\n      var DEFAULT_HEIGHT = 205;\r\n      var DEFAULT_MODE = 'Liquid Gas';\r\n      var DEFAULT_MOUTH = 25.4;\r\n      var warningTimer = null;\r\n\r\n      var mouthOptionsByDiameter = {\r\n        22: [20],\r\n        25: [20],\r\n        35: [25.4, 20],\r\n        38: [25.4],\r\n        40: [25.4, 20],\r\n        45: [25.4, 20],\r\n        50: [25.4],\r\n        53: [25.4],\r\n        59: [25.4],\r\n        66: [25.4],\r\n        74: [25.4],\r\n        80: [25.4]\r\n      };\r\n\r\n\r\n      var heightRangeByDiameter = {\r\n        22: { min: 50, max: 90 },\r\n        25: { min: 65, max: 95 },\r\n        28: { min: 75, max: 100 },\r\n        35: { min: 65, max: 160 },\r\n        40: { min: 80, max: 180 },\r\n        45: { min: 100, max: 190 },\r\n        50: { min: 110, max: 225 },\r\n        53: { min: 110, max: 235 },\r\n        59: { min: 120, max: 250 },\r\n        66: { min: 140, max: 240 },\r\n        74: { min: 160, max: 300 },\r\n        80: { min: 180, max: 300 }\r\n      };\r\n\r\n      var state = {\r\n        diameter: DEFAULT_DIAMETER,\r\n        heightInput: DEFAULT_HEIGHT,\r\n        matchedHeight: DEFAULT_HEIGHT,\r\n        mouth: DEFAULT_MOUTH,\r\n        mode: DEFAULT_MODE\r\n      };\r\n\r\n      var filterState = {\r\n        diameter: null,\r\n        height: null,\r\n        liquid: null,\r\n        compressed: null,\r\n        full: null\r\n      };\r\n\r\n      function $(id) { return root.querySelector('#' + id); }\r\n      function roundTo(value, digits) {\r\n        var base = Math.pow(10, digits || 0);\r\n        return Math.round(value * base) \/ base;\r\n      }\r\n      function setLine(el, x1, y1, x2, y2) {\r\n        el.setAttribute('x1', x1); el.setAttribute('y1', y1); el.setAttribute('x2', x2); el.setAttribute('y2', y2);\r\n      }\r\n      function showToast(message) {\r\n        var toast = $('accToast');\r\n        toast.textContent = message;\r\n        toast.classList.add('is-visible');\r\n        clearTimeout(showToast.timer);\r\n        showToast.timer = setTimeout(function () { toast.classList.remove('is-visible'); }, 1400);\r\n      }\r\n      function showWarning(message) {\r\n        var warning = $('accWarning');\r\n        warning.textContent = message;\r\n        warning.style.display = 'block';\r\n        clearTimeout(warningTimer);\r\n        warningTimer = setTimeout(function () { warning.style.display = 'none'; }, 3400);\r\n      }\r\n      function hideWarning() {\r\n        clearTimeout(warningTimer);\r\n        $('accWarning').style.display = 'none';\r\n      }\r\n      function formatValue(value) { return value === null || typeof value === 'undefined' ? '\u2014' : String(value); }\r\n      function getProductUrl(row) {\r\n        return row && row.size ? productUrlBySize[row.size] || '' : '';\r\n      }\r\n      function renderProductLink(referenceItem, displayItem) {\r\n        var card = $('accProductLinkCard');\r\n        var link = $('accProductLink');\r\n        var label = $('accProductLinkLabel');\r\n        if (!card || !link || !label) return;\r\n        var url = getProductUrl(referenceItem);\r\n        if (!url) {\r\n          card.hidden = true;\r\n          link.removeAttribute('href');\r\n          return;\r\n        }\r\n        var exact = displayItem && Math.abs(Number(displayItem.h) - Number(referenceItem.h)) < 0.01;\r\n        label.textContent = exact ? 'Product page for ' + referenceItem.size : 'Closest standard product: ' + referenceItem.size;\r\n        link.textContent = exact ? 'View product page' : 'View closest product';\r\n        link.href = url;\r\n        card.hidden = false;\r\n      }\r\n      function formatNumber(value) {\r\n        if (value === null || typeof value === 'undefined') return '\u2014';\r\n        return Math.abs(value - Math.round(value)) < 0.001 ? String(Math.round(value)) : String(roundTo(value, 1));\r\n      }\r\n      function formatUsOz(value) {\r\n        return value === null || typeof value === 'undefined' ? '\u2014' : roundTo(value \/ 29.5735295625, 2);\r\n      }\r\n      function formatUkOz(value) {\r\n        return value === null || typeof value === 'undefined' ? '\u2014' : roundTo(value \/ 28.4130625, 2);\r\n      }\r\n      function getMouthOptionsForDiameter(diameter) {\r\n        return mouthOptionsByDiameter[Number(diameter)] || [25.4];\r\n      }\r\n      function isSameMouth(a, b) { return Math.abs(Number(a) - Number(b)) < 0.01; }\r\n      function formatMouth(value) {\r\n        return isSameMouth(value, 25.4) ? '25.4 mm (1 inch)' : '20 mm';\r\n      }\r\n      function getShortMouth(value) {\r\n        return isSameMouth(value, 25.4) ? '25.4 mm' : '20 mm';\r\n      }\r\n      function syncMouthControl() {\r\n        var options = getMouthOptionsForDiameter(state.diameter);\r\n        var mouthSelect = $('accMouth');\r\n        var mouthField = $('accMouthField');\r\n        var mouthHelp = $('accMouthHelp');\r\n        if (!mouthSelect || !mouthField) return;\r\n        var chosen = options.some(function (value) { return isSameMouth(value, 25.4); }) ? 25.4 : options[0];\r\n        state.mouth = chosen;\r\n        mouthSelect.innerHTML = '';\r\n        options.forEach(function (value) {\r\n          var option = document.createElement('option');\r\n          option.value = String(value);\r\n          option.textContent = formatMouth(value);\r\n          mouthSelect.appendChild(option);\r\n        });\r\n        mouthSelect.value = String(chosen);\r\n        if (options.length > 1) {\r\n          mouthField.hidden = false;\r\n          mouthSelect.disabled = false;\r\n          mouthHelp.textContent = 'This diameter supports both 20 mm and 25.4 mm (1 inch) mouths.';\r\n        } else {\r\n          mouthField.hidden = true;\r\n          mouthSelect.disabled = true;\r\n          mouthHelp.textContent = 'Mouth is fixed at ' + formatMouth(chosen) + ' for this diameter.';\r\n        }\r\n      }\r\n      function formatRatio(value, total) {\r\n        if (value === null || !total) return '\u2014';\r\n        return Math.round((value \/ total) * 100) + '%';\r\n      }\r\n      function numericCompare(a, b) {\r\n        if (a === null) return 1;\r\n        if (b === null) return -1;\r\n        return a - b;\r\n      }\r\n      function uniqueSorted(list) {\r\n        var seen = {};\r\n        var out = [];\r\n        list.forEach(function (item) {\r\n          var key = String(item);\r\n          if (!seen[key]) { seen[key] = true; out.push(item); }\r\n        });\r\n        return out.sort(numericCompare);\r\n      }\r\n      function getDiameterOptions() { return uniqueSorted(canData.map(function (item) { return item.d; })); }\r\n      function getRowsForDiameter(d) { return canData.filter(function (item) { return item.d === Number(d); }).sort(function (a, b) { return a.h - b.h; }); }\r\n      function getHeightRange(d) {\r\n        var configured = heightRangeByDiameter[Number(d)];\r\n        if (configured) return { min: configured.min, max: configured.max };\r\n        var rows = getRowsForDiameter(d);\r\n        return { min: rows[0].h, max: rows[rows.length - 1].h };\r\n      }\r\n      function findNearestRow(diameter, heightValue) {\r\n        var rows = getRowsForDiameter(diameter);\r\n        var best = rows[0];\r\n        var bestDiff = Math.abs(rows[0].h - heightValue);\r\n        rows.forEach(function (row) {\r\n          var diff = Math.abs(row.h - heightValue);\r\n          if (diff < bestDiff) { best = row; bestDiff = diff; }\r\n        });\r\n        return best;\r\n      }\r\n      function getCurrentItem() {\r\n        var rawHeight = parseFloat($('accHeight').value);\r\n        if (isNaN(rawHeight)) rawHeight = state.heightInput;\r\n        var range = getHeightRange(state.diameter);\r\n        var clamped = Math.min(Math.max(rawHeight, range.min), range.max);\r\n        state.heightInput = clamped;\r\n        var matched = findNearestRow(state.diameter, clamped);\r\n        state.matchedHeight = matched.h;\r\n        return matched;\r\n      }\r\n\r\n      function interpolateMetric(diameter, height, key) {\r\n        var rows = getRowsForDiameter(diameter).filter(function (row) {\r\n          return row[key] !== null && typeof row[key] !== 'undefined';\r\n        }).sort(function (a, b) { return a.h - b.h; });\r\n        if (!rows.length) return null;\r\n        if (rows.length === 1) {\r\n          var reference = rows[0];\r\n          if (!reference.h) return Math.max(0, Math.round(reference[key]));\r\n          return Math.max(0, Math.round(reference[key] * (height \/ reference.h)));\r\n        }\r\n\r\n        function valueOnSegment(a, b) {\r\n          if (b.h === a.h) return a[key];\r\n          var ratio = (height - a.h) \/ (b.h - a.h);\r\n          return Math.max(0, Math.round(a[key] + (b[key] - a[key]) * ratio));\r\n        }\r\n\r\n        if (height <= rows[0].h) return valueOnSegment(rows[0], rows[1]);\r\n        if (height >= rows[rows.length - 1].h) return valueOnSegment(rows[rows.length - 2], rows[rows.length - 1]);\r\n\r\n        for (var i = 0; i < rows.length - 1; i += 1) {\r\n          var a = rows[i];\r\n          var b = rows[i + 1];\r\n          if (height >= a.h && height <= b.h) {\r\n            return valueOnSegment(a, b);\r\n          }\r\n        }\r\n        return Math.max(0, Math.round(rows[rows.length - 1][key]));\r\n      }\r\n\r\n      function getDynamicItem(referenceItem) {\r\n        var height = state.heightInput;\r\n        return {\r\n          no: referenceItem.no,\r\n          size: '\u03a6' + state.diameter + ' \u00d7 ' + formatNumber(height),\r\n          d: state.diameter,\r\n          h: height,\r\n          full: interpolateMetric(state.diameter, height, 'full'),\r\n          liquid: interpolateMetric(state.diameter, height, 'liquid'),\r\n          compressed: interpolateMetric(state.diameter, height, 'compressed'),\r\n          reference: referenceItem\r\n        };\r\n      }\r\n\r\n      function populateMainControls() {\r\n        var diameterSelect = $('accDiameter');\r\n        diameterSelect.innerHTML = '';\r\n        getDiameterOptions().forEach(function (value) {\r\n          var option = document.createElement('option');\r\n          option.value = value;\r\n          option.textContent = value;\r\n          diameterSelect.appendChild(option);\r\n        });\r\n        diameterSelect.value = String(DEFAULT_DIAMETER);\r\n        $('accMode').value = DEFAULT_MODE;\r\n        updateHeightRangeUI();\r\n        syncMouthControl();\r\n      }\r\n\r\n      function updateHeightRangeUI() {\r\n        var range = getHeightRange(state.diameter);\r\n        var heightInput = $('accHeight');\r\n        heightInput.min = range.min;\r\n        heightInput.max = range.max;\r\n        if (!heightInput.value) heightInput.value = state.heightInput;\r\n        if (Number(heightInput.value) < range.min) heightInput.value = range.min;\r\n        if (Number(heightInput.value) > range.max) heightInput.value = range.max;\r\n        $('accHeightRange').textContent = 'Range: ' + range.min + '\u2013' + range.max + ' mm';\r\n      }\r\n\r\n\r\n      function clampHeightToRange(value, showMessage) {\r\n        var range = getHeightRange(state.diameter);\r\n        if (isNaN(value)) return null;\r\n        var clamped = Math.min(Math.max(value, range.min), range.max);\r\n        if (Math.abs(clamped - value) > 0.001) {\r\n          state.heightInput = clamped;\r\n          $('accHeight').value = clamped;\r\n          if (showMessage) {\r\n            showWarning('For diameter ' + state.diameter + ' mm, height must be between ' + range.min + ' mm and ' + range.max + ' mm. The nearest valid value has been used.');\r\n          }\r\n          return clamped;\r\n        }\r\n        state.heightInput = value;\r\n        if (showMessage) hideWarning();\r\n        return value;\r\n      }\r\n\r\n      function validateHeight(showMessage) {\r\n        var input = parseFloat($('accHeight').value);\r\n        if (isNaN(input)) return true;\r\n        var clamped = clampHeightToRange(input, showMessage);\r\n        return clamped !== null && Math.abs(clamped - input) <= 0.001;\r\n      }\r\n\r\n      function renderCompatibleTable(item) {\r\n        var rows = getRowsForDiameter(state.diameter);\r\n        var tbody = $('accCompatibleRows');\r\n        tbody.innerHTML = '';\r\n        rows.forEach(function (row) {\r\n          var tr = document.createElement('tr');\r\n          var productUrl = getProductUrl(row);\r\n          tr.className = row.h === item.h ? 'is-active' : '';\r\n\r\n          var sizeTd = document.createElement('td');\r\n          if (productUrl) {\r\n            var link = document.createElement('a');\r\n            link.className = 'acc-size-link';\r\n            link.href = productUrl;\r\n            link.target = '_blank';\r\n            link.rel = 'nofollow noopener';\r\n            link.textContent = row.size;\r\n            link.title = 'View product page for ' + row.size;\r\n            link.addEventListener('click', function (event) {\r\n              event.stopPropagation();\r\n            });\r\n            sizeTd.appendChild(link);\r\n          } else {\r\n            sizeTd.textContent = row.size;\r\n          }\r\n\r\n          var fullTd = document.createElement('td');\r\n          fullTd.textContent = row.full;\r\n          var liquidTd = document.createElement('td');\r\n          liquidTd.textContent = row.liquid;\r\n          var compressedTd = document.createElement('td');\r\n          compressedTd.textContent = formatValue(row.compressed);\r\n\r\n          tr.appendChild(sizeTd);\r\n          tr.appendChild(fullTd);\r\n          tr.appendChild(liquidTd);\r\n          tr.appendChild(compressedTd);\r\n\r\n          tr.addEventListener('click', function () {\r\n            $('accHeight').value = row.h;\r\n            state.heightInput = row.h;\r\n            calculate();\r\n          });\r\n          tbody.appendChild(tr);\r\n        });\r\n        $('accTableTitle').textContent = 'Available sizes for \u03a6' + state.diameter + ' mm';\r\n        $('accTableCount').textContent = rows.length + ' sizes';\r\n      }\r\n\r\n      function displayModeValue(item) {\r\n        if (state.mode === 'Full Capacity') return item.full;\r\n        if (state.mode === 'Compressed Gas') return item.compressed;\r\n        return item.liquid;\r\n      }\r\n\r\n      function drawCan(item, fillRatio) {\r\n        var displayHeight = Math.max(item.h \/ DIAGRAM_SCALE, 1);\r\n        var displayDiameter = Math.max(item.d \/ DIAGRAM_SCALE, 1);\r\n        var mouthDiameter = state.mouth || getMouthOptionsForDiameter(item.d)[0];\r\n        var isWideMouth = isSameMouth(mouthDiameter, 25.4);\r\n\r\n        var bodyHalf = displayDiameter \/ 2;\r\n        var mouthHalf = isWideMouth ? Math.max(bodyHalf * 0.47, 6.6) : Math.max(bodyHalf * 0.34, 4.8);\r\n        mouthHalf = Math.min(mouthHalf, bodyHalf * 0.62);\r\n\r\n        var topSpace = 38;\r\n        var bottomSpace = 24;\r\n        var leftSpace = 36;\r\n        var rightSpace = 52;\r\n\r\n        var shoulderH = isWideMouth\r\n          ? Math.max(6.6, Math.min(bodyHalf * 0.98, 14.8))\r\n          : Math.max(8.4, Math.min(bodyHalf * 1.14, 17.4));\r\n        var domeH = Math.max(1.9, Math.min(bodyHalf * 0.24, 4.6));\r\n        var finishH = (isWideMouth\r\n          ? Math.max(4.6, Math.min(displayHeight * 0.045, 6.6))\r\n          : Math.max(4.9, Math.min(displayHeight * 0.05, 7.1))) * 0.5;\r\n        var rimPad = isWideMouth ? 1.9 : 1.25;\r\n        var rimH = (isWideMouth ? 2.9 : 2.5) * 0.5;\r\n\r\n        var viewW = leftSpace + displayDiameter + rightSpace;\r\n        var viewH = topSpace + displayHeight + bottomSpace;\r\n        var x = leftSpace + displayDiameter \/ 2;\r\n        var yTop = topSpace;\r\n        var yFinishTop = yTop - finishH;\r\n        var yBottom = yTop + displayHeight;\r\n        var yShoulderEnd = yTop + shoulderH;\r\n        var svg = $('accCanSvg');\r\n        svg.setAttribute('viewBox', '0 0 ' + viewW + ' ' + viewH);\r\n        svg.style.width = viewW + 'mm';\r\n        svg.style.height = viewH + 'mm';\r\n\r\n        var useShoulderTuck = !isWideMouth;\r\n        var shoulderRoundness = Math.max(0.70, Math.min(0.80, 0.70 + (bodyHalf - 9.5) * 0.012));\r\n        var shoulderBulge = isWideMouth\r\n          ? 0.28 + (shoulderRoundness - 0.70) * 0.70\r\n          : 0.34 + (shoulderRoundness - 0.70) * 0.75;\r\n        var shoulderLead = isWideMouth\r\n          ? 1.76 + (shoulderRoundness - 0.70) * 0.64\r\n          : 1.86 + (shoulderRoundness - 0.70) * 0.72;\r\n        var shoulderReach = Math.min(bodyHalf * 0.99, Math.max(mouthHalf * shoulderLead, mouthHalf + bodyHalf * shoulderBulge));\r\n        var leftShoulderCtrlX1 = x - shoulderReach;\r\n        var leftShoulderCtrlY1 = yTop + shoulderH * (isWideMouth ? 0.06 : 0.05);\r\n        var leftShoulderCtrlX2 = x - bodyHalf * 0.99;\r\n        var leftShoulderCtrlY2 = yTop + shoulderH * (isWideMouth ? 0.96 : 0.98);\r\n        var rightShoulderCtrlX1 = x + shoulderReach;\r\n        var rightShoulderCtrlY1 = leftShoulderCtrlY1;\r\n        var rightShoulderCtrlX2 = x + bodyHalf * 0.99;\r\n        var rightShoulderCtrlY2 = leftShoulderCtrlY2;\r\n\r\n        var fillPath;\r\n        var strokePath;\r\n        if (useShoulderTuck) {\r\n          var straightY = yTop + shoulderH * 0.22;\r\n          var leftBlendCtrlX1 = x - Math.min(bodyHalf * 0.72, mouthHalf + bodyHalf * 0.16);\r\n          var leftBlendCtrlY1 = yTop + shoulderH * 0.36;\r\n          var leftBlendCtrlX2 = x - bodyHalf * 0.995;\r\n          var leftBlendCtrlY2 = yTop + shoulderH * 0.74;\r\n          var rightBlendCtrlX1 = x + Math.min(bodyHalf * 0.72, mouthHalf + bodyHalf * 0.16);\r\n          var rightBlendCtrlY1 = leftBlendCtrlY1;\r\n          var rightBlendCtrlX2 = x + bodyHalf * 0.995;\r\n          var rightBlendCtrlY2 = leftBlendCtrlY2;\r\n\r\n          fillPath = [\r\n            'M', x - mouthHalf, yTop,\r\n            'L', x - mouthHalf, straightY,\r\n            'C', leftBlendCtrlX1, leftBlendCtrlY1, leftBlendCtrlX2, leftBlendCtrlY2, x - bodyHalf, yShoulderEnd,\r\n            'L', x - bodyHalf, yBottom - domeH,\r\n            'Q', x - bodyHalf, yBottom, x, yBottom,\r\n            'Q', x + bodyHalf, yBottom, x + bodyHalf, yBottom - domeH,\r\n            'L', x + bodyHalf, yShoulderEnd,\r\n            'C', rightBlendCtrlX2, rightBlendCtrlY2, rightBlendCtrlX1, rightBlendCtrlY1, x + mouthHalf, straightY,\r\n            'L', x + mouthHalf, yTop,\r\n            'Z'\r\n          ].join(' ');\r\n\r\n          strokePath = [\r\n            'M', x - mouthHalf, yTop,\r\n            'L', x - mouthHalf, straightY,\r\n            'C', leftBlendCtrlX1, leftBlendCtrlY1, leftBlendCtrlX2, leftBlendCtrlY2, x - bodyHalf, yShoulderEnd,\r\n            'L', x - bodyHalf, yBottom - domeH,\r\n            'Q', x - bodyHalf, yBottom, x, yBottom,\r\n            'Q', x + bodyHalf, yBottom, x + bodyHalf, yBottom - domeH,\r\n            'L', x + bodyHalf, yShoulderEnd,\r\n            'C', rightBlendCtrlX2, rightBlendCtrlY2, rightBlendCtrlX1, rightBlendCtrlY1, x + mouthHalf, straightY,\r\n            'L', x + mouthHalf, yTop\r\n          ].join(' ');\r\n        } else {\r\n          fillPath = [\r\n            'M', x - mouthHalf, yTop,\r\n            'C', leftShoulderCtrlX1, leftShoulderCtrlY1, leftShoulderCtrlX2, leftShoulderCtrlY2, x - bodyHalf, yShoulderEnd,\r\n            'L', x - bodyHalf, yBottom - domeH,\r\n            'Q', x - bodyHalf, yBottom, x, yBottom,\r\n            'Q', x + bodyHalf, yBottom, x + bodyHalf, yBottom - domeH,\r\n            'L', x + bodyHalf, yShoulderEnd,\r\n            'C', rightShoulderCtrlX2, rightShoulderCtrlY2, rightShoulderCtrlX1, rightShoulderCtrlY1, x + mouthHalf, yTop,\r\n            'Z'\r\n          ].join(' ');\r\n\r\n          strokePath = [\r\n            'M', x - mouthHalf, yTop,\r\n            'C', leftShoulderCtrlX1, leftShoulderCtrlY1, leftShoulderCtrlX2, leftShoulderCtrlY2, x - bodyHalf, yShoulderEnd,\r\n            'L', x - bodyHalf, yBottom - domeH,\r\n            'Q', x - bodyHalf, yBottom, x, yBottom,\r\n            'Q', x + bodyHalf, yBottom, x + bodyHalf, yBottom - domeH,\r\n            'L', x + bodyHalf, yShoulderEnd,\r\n            'C', rightShoulderCtrlX2, rightShoulderCtrlY2, rightShoulderCtrlX1, rightShoulderCtrlY1, x + mouthHalf, yTop\r\n          ].join(' ');\r\n        }\r\n\r\n        $('accCanFill').setAttribute('d', fillPath);\r\n        $('accCanStroke').setAttribute('d', strokePath);\r\n        $('accCanClipPath').setAttribute('d', fillPath);\r\n\r\n        var liquidY = yBottom - displayHeight * Math.max(0, Math.min(fillRatio, 0.98));\r\n        $('accLiquidRect').setAttribute('x', 0);\r\n        $('accLiquidRect').setAttribute('y', liquidY);\r\n        $('accLiquidRect').setAttribute('width', viewW);\r\n        $('accLiquidRect').setAttribute('height', yBottom - liquidY + 2);\r\n        setLine($('accLiquidLine'), x - bodyHalf + 1.2, liquidY, x + bodyHalf - 1.2, liquidY);\r\n\r\n        $('accCup').setAttribute('x', x);\r\n        $('accCup').setAttribute('y', yTop);\r\n        $('accCup').setAttribute('width', 0);\r\n        $('accCup').setAttribute('height', 0);\r\n        $('accCup').style.opacity = '0';\r\n\r\n        $('accValve').setAttribute('x', x - mouthHalf - rimPad);\r\n        $('accValve').setAttribute('y', yFinishTop);\r\n        $('accValve').setAttribute('width', mouthHalf * 2 + rimPad * 2);\r\n        $('accValve').setAttribute('height', finishH + rimH * 0.1);\r\n        $('accValve').setAttribute('rx', (finishH + rimH * 0.1) * 0.34);\r\n        $('accValve').style.opacity = '1';\r\n\r\n        setLine($('accStem'), x, yTop, x, yTop);\r\n        $('accStem').style.opacity = '0';\r\n\r\n        var mouthDimY = Math.max(6, yFinishTop - 10);\r\n        setLine($('accMouthLeftExt'), x - mouthHalf, yFinishTop + 0.8, x - mouthHalf, mouthDimY + 3.5);\r\n        setLine($('accMouthRightExt'), x + mouthHalf, yFinishTop + 0.8, x + mouthHalf, mouthDimY + 3.5);\r\n        setLine($('accMouthLine'), x - mouthHalf, mouthDimY, x + mouthHalf, mouthDimY);\r\n\r\n        var mouthText = $('accMouthText');\r\n        mouthText.textContent = '\u03a6' + getShortMouth(mouthDiameter) + ' Mouth';\r\n        mouthText.setAttribute('x', x);\r\n        mouthText.setAttribute('y', mouthDimY - 3.4);\r\n        mouthText.setAttribute('text-anchor', 'middle');\r\n\r\n        var mouthNote = $('accMouthNote');\r\n        mouthNote.textContent = '';\r\n        mouthNote.setAttribute('x', x);\r\n        mouthNote.setAttribute('y', mouthDimY - 3.4);\r\n        mouthNote.setAttribute('text-anchor', 'middle');\r\n\r\n        var canLabel = $('accCanLabel');\r\n        if (canLabel) {\r\n          var labelSize = Math.max(1.45, Math.min(2.15, bodyHalf * 0.16));\r\n          var labelWidth = Math.max(7.2, displayDiameter - 4.4);\r\n          canLabel.textContent = 'Ingredients';\r\n          canLabel.setAttribute('x', x);\r\n          canLabel.setAttribute('y', yBottom - Math.max(6.6, displayHeight * 0.105));\r\n          canLabel.setAttribute('text-anchor', 'middle');\r\n          canLabel.setAttribute('font-size', labelSize);\r\n          canLabel.setAttribute('textLength', labelWidth);\r\n          canLabel.setAttribute('lengthAdjust', 'spacingAndGlyphs');\r\n        }\r\n\r\n        var dimensionIds = [\r\n          'accHeightLine', 'accHeightTopTick', 'accHeightBottomTick', 'accHeightText',\r\n          'accDiameterLine', 'accDiameterLeftTick', 'accDiameterRightTick', 'accDiameterText'\r\n        ];\r\n        dimensionIds.forEach(function (id) {\r\n          var el = $(id);\r\n          if (el) el.style.display = 'block';\r\n        });\r\n\r\n        setLine($('accHeightLine'), x + bodyHalf + 8, yTop, x + bodyHalf + 8, yBottom);\r\n        setLine($('accHeightTopTick'), x + bodyHalf + 5, yTop, x + bodyHalf + 11, yTop);\r\n        setLine($('accHeightBottomTick'), x + bodyHalf + 5, yBottom, x + bodyHalf + 11, yBottom);\r\n        var heightText = $('accHeightText');\r\n        heightText.textContent = formatNumber(item.h) + ' mm';\r\n        heightText.setAttribute('x', x + bodyHalf + 15);\r\n        heightText.setAttribute('y', (yTop + yBottom) \/ 2);\r\n        heightText.setAttribute('transform', 'rotate(90 ' + (x + bodyHalf + 15) + ' ' + ((yTop + yBottom) \/ 2) + ')');\r\n        heightText.setAttribute('text-anchor', 'middle');\r\n\r\n        setLine($('accDiameterLine'), x - bodyHalf, yBottom + 6, x + bodyHalf, yBottom + 6);\r\n        setLine($('accDiameterLeftTick'), x - bodyHalf, yBottom + 3.5, x - bodyHalf, yBottom + 8.5);\r\n        setLine($('accDiameterRightTick'), x + bodyHalf, yBottom + 3.5, x + bodyHalf, yBottom + 8.5);\r\n        var diameterText = $('accDiameterText');\r\n        diameterText.textContent = '\u00d8' + formatNumber(item.d) + ' mm';\r\n        diameterText.setAttribute('x', x);\r\n        diameterText.setAttribute('y', yBottom + 14);\r\n        diameterText.setAttribute('text-anchor', 'middle');\r\n        diameterText.removeAttribute('transform');\r\n\r\n        $('accFillText').textContent = '';\r\n      }\r\n\r\n      function calculate() {\r\n        validateHeight(false);\r\n        var referenceItem = getCurrentItem();\r\n        var item = getDynamicItem(referenceItem);\r\n        var range = getHeightRange(state.diameter);\r\n        $('accHeight').value = state.heightInput;\r\n        if (state.heightInput < range.min) $('accHeight').value = range.min;\r\n        if (state.heightInput > range.max) $('accHeight').value = range.max;\r\n\r\n        $('accFullMl').textContent = formatNumber(item.full) + ' ml';\r\n        $('accFullUsOz').textContent = formatUsOz(item.full);\r\n        $('accFullUkOz').textContent = formatUkOz(item.full);\r\n        $('accLiquidMl').textContent = formatNumber(item.liquid) + ' ml';\r\n        $('accLiquidUsOz').textContent = formatUsOz(item.liquid);\r\n        $('accLiquidUkOz').textContent = formatUkOz(item.liquid);\r\n        $('accCompressedMl').textContent = item.compressed === null ? '\u2014' : formatNumber(item.compressed) + ' ml';\r\n        $('accCompressedUsOz').textContent = formatUsOz(item.compressed);\r\n        $('accCompressedUkOz').textContent = formatUkOz(item.compressed);\r\n\r\n        $('accStatusSize').textContent = item.size;\r\n        $('accStatusMouth').textContent = getShortMouth(state.mouth);\r\n        if ($('accStatusMode')) $('accStatusMode').textContent = state.mode;\r\n\r\n        var modeValue = displayModeValue(item);\r\n        var fillRatio = modeValue ? modeValue \/ item.full : item.liquid \/ item.full;\r\n        $('accStatusRatio').textContent = Math.round(fillRatio * 100) + '%';\r\n\r\n        renderProductLink(referenceItem, item);\r\n\r\n        if (state.mode === 'Compressed Gas' && item.compressed === null) {\r\n          showWarning('Compressed Gas capacity is not defined for ' + item.size + '. The preview is using the Liquid Gas fill level instead.');\r\n          fillRatio = item.liquid \/ item.full;\r\n        }\r\n\r\n        renderCompatibleTable(referenceItem);\r\n        drawCan(item, fillRatio);\r\n      }\r\n\r\n      function populateSelect(select, values, currentValue, formatter, allowDash) {\r\n        select.innerHTML = '';\r\n        if (!values.length && allowDash) {\r\n          var dashOption = document.createElement('option');\r\n          dashOption.value = '__dash__';\r\n          dashOption.textContent = '\u2014';\r\n          select.appendChild(dashOption);\r\n          select.value = '__dash__';\r\n          return null;\r\n        }\r\n        values.forEach(function (value) {\r\n          var option = document.createElement('option');\r\n          option.value = value === null ? '__dash__' : String(value);\r\n          option.textContent = formatter ? formatter(value) : String(value);\r\n          select.appendChild(option);\r\n        });\r\n        var chosen = values.indexOf(currentValue) >= 0 ? currentValue : values[0];\r\n        select.value = chosen === null ? '__dash__' : String(chosen);\r\n        return chosen;\r\n      }\r\n\r\n      function filterRows(excludeKey) {\r\n        return canData.filter(function (item) {\r\n          if (excludeKey !== 'diameter' && filterState.diameter !== null && item.d !== filterState.diameter) return false;\r\n          if (excludeKey !== 'height' && filterState.height !== null && item.h !== filterState.height) return false;\r\n          if (excludeKey !== 'liquid' && filterState.liquid !== null && item.liquid !== filterState.liquid) return false;\r\n          if (excludeKey !== 'compressed' && filterState.compressed !== undefined && filterState.compressed !== null && item.compressed !== filterState.compressed) return false;\r\n          if (excludeKey !== 'compressed' && filterState.compressed === null && $('accFilterCompressed').dataset.hasDash === 'true') {\r\n            if (item.compressed !== null) return false;\r\n          }\r\n          if (excludeKey !== 'full' && filterState.full !== null && item.full !== filterState.full) return false;\r\n          return true;\r\n        });\r\n      }\r\n\r\n      function updateFilterControls(changedKey) {\r\n        var diameterOptions = uniqueSorted(filterRows('diameter').map(function (item) { return item.d; }));\r\n        filterState.diameter = populateSelect($('accFilterDiameter'), diameterOptions, filterState.diameter, function (v) { return v + ' mm'; }, false);\r\n\r\n        var heightOptions = uniqueSorted(filterRows('height').map(function (item) { return item.h; }));\r\n        filterState.height = populateSelect($('accFilterHeight'), heightOptions, filterState.height, function (v) { return v + ' mm'; }, false);\r\n\r\n        var liquidOptions = uniqueSorted(filterRows('liquid').map(function (item) { return item.liquid; }));\r\n        filterState.liquid = populateSelect($('accFilterLiquid'), liquidOptions, filterState.liquid, function (v) { return v + ' ml'; }, false);\r\n\r\n        var compressedRows = filterRows('compressed');\r\n        var compressedOptions = uniqueSorted(compressedRows.map(function (item) { return item.compressed; }));\r\n        var compressedSelect = $('accFilterCompressed');\r\n        compressedSelect.dataset.hasDash = compressedOptions.indexOf(null) >= 0 ? 'true' : 'false';\r\n        filterState.compressed = populateSelect(compressedSelect, compressedOptions, filterState.compressed, function (v) { return v === null ? '\u2014' : v + ' ml'; }, true);\r\n\r\n        var fullOptions = uniqueSorted(filterRows('full').map(function (item) { return item.full; }));\r\n        filterState.full = populateSelect($('accFilterFull'), fullOptions, filterState.full, function (v) { return v + ' ml'; }, false);\r\n\r\n        renderFilterResults();\r\n      }\r\n\r\n      function getFilteredResultRows() {\r\n        return canData.filter(function (item) {\r\n          if (filterState.diameter !== null && item.d !== filterState.diameter) return false;\r\n          if (filterState.height !== null && item.h !== filterState.height) return false;\r\n          if (filterState.liquid !== null && item.liquid !== filterState.liquid) return false;\r\n          var compressedSelect = $('accFilterCompressed');\r\n          if (filterState.compressed === null && compressedSelect.dataset.hasDash === 'true') {\r\n            if (item.compressed !== null) return false;\r\n          } else if (filterState.compressed !== null && item.compressed !== filterState.compressed) {\r\n            return false;\r\n          }\r\n          if (filterState.full !== null && item.full !== filterState.full) return false;\r\n          return true;\r\n        });\r\n      }\r\n\r\n      function renderFilterResults() {\r\n        var rows = getFilteredResultRows();\r\n        var tbody = $('accFilterResults');\r\n        var empty = $('accFilterEmpty');\r\n        tbody.innerHTML = '';\r\n        if (!rows.length) {\r\n          empty.style.display = 'block';\r\n          return;\r\n        }\r\n        empty.style.display = 'none';\r\n        rows.forEach(function (item, index) {\r\n          var tr = document.createElement('tr');\r\n          if (index === 0) tr.className = 'is-highlight';\r\n          tr.innerHTML = '<td>' + item.size + '<\/td>' +\r\n            '<td>' + item.d + ' mm<\/td>' +\r\n            '<td>' + item.h + ' mm<\/td>' +\r\n            '<td>' + item.liquid + ' ml<\/td>' +\r\n            '<td>' + formatValue(item.compressed) + (item.compressed === null ? '' : ' ml') + '<\/td>' +\r\n            '<td style=\"text-align:right;\">' + item.full + ' ml<\/td>';\r\n          tr.addEventListener('click', function () {\r\n            state.diameter = item.d;\r\n            state.heightInput = item.h;\r\n            $('accDiameter').value = String(item.d);\r\n            updateHeightRangeUI();\r\n            syncMouthControl();\r\n            $('accHeight').value = item.h;\r\n            $('accMode').value = item.compressed !== null ? 'Compressed Gas' : 'Liquid Gas';\r\n            state.mode = $('accMode').value;\r\n            calculate();\r\n          });\r\n          tbody.appendChild(tr);\r\n        });\r\n      }\r\n\r\n      function initFilterRow() {\r\n        updateFilterControls();\r\n        ['Diameter', 'Height', 'Liquid', 'Compressed', 'Full'].forEach(function (key) {\r\n          var id = 'accFilter' + key;\r\n          $(id).addEventListener('change', function () {\r\n            var value = this.value;\r\n            var normalized;\r\n            if (value === '__dash__') {\r\n              normalized = null;\r\n            } else {\r\n              normalized = Number(value);\r\n            }\r\n            filterState[key.toLowerCase()] = normalized;\r\n            updateFilterControls(key.toLowerCase());\r\n          });\r\n        });\r\n      }\r\n\r\n      function markActionSelected(button) {\r\n        root.querySelectorAll('.acc-action-row button').forEach(function (item) {\r\n          item.classList.remove('is-selected');\r\n          item.classList.remove('acc-is-selected');\r\n          item.classList.remove('acc-button-selected');\r\n          item.setAttribute('aria-pressed', 'false');\r\n          item.style.setProperty('color', '#082a5e', 'important');\r\n          item.style.setProperty('-webkit-text-fill-color', '#082a5e', 'important');\r\n          item.style.setProperty('background', 'transparent', 'important');\r\n          item.style.setProperty('background-color', 'transparent', 'important');\r\n          item.style.setProperty('background-image', 'none', 'important');\r\n          item.style.setProperty('border-color', 'var(--sp-line)', 'important');\r\n          item.style.removeProperty('box-shadow');\r\n          item.style.removeProperty('transform');\r\n        });\r\n        if (button) {\r\n          button.classList.add('is-selected');\r\n          button.classList.add('acc-is-selected');\r\n          button.classList.add('acc-button-selected');\r\n          button.setAttribute('aria-pressed', 'true');\r\n          button.style.setProperty('color', '#082a5e', 'important');\r\n          button.style.setProperty('-webkit-text-fill-color', '#082a5e', 'important');\r\n          button.style.setProperty('background', 'transparent', 'important');\r\n          button.style.setProperty('background-color', 'transparent', 'important');\r\n          button.style.setProperty('background-image', 'none', 'important');\r\n          button.style.setProperty('border-color', 'var(--sp-line)', 'important');\r\n          button.style.removeProperty('box-shadow');\r\n          button.style.removeProperty('transform');\r\n        }\r\n      }\r\n\r\n      function copyText(text, successMessage) {\r\n        if (navigator.clipboard && navigator.clipboard.writeText) {\r\n          navigator.clipboard.writeText(text).then(function () { showToast(successMessage); }).catch(function () { showToast('Copy failed'); });\r\n        } else {\r\n          showToast('Copy not supported');\r\n        }\r\n      }\r\n\r\n      function copyResult() {\r\n        var referenceItem = getCurrentItem();\r\n        var item = getDynamicItem(referenceItem);\r\n        var text = 'Aerosol Can Capacity Result\\n' +\r\n          'Size: ' + item.size + '\\n' +\r\n          'Diameter: ' + item.d + ' mm\\n' +\r\n          'Mouth Diameter: ' + formatMouth(state.mouth) + '\\n' +\r\n          'Input Height: ' + formatNumber(state.heightInput) + ' mm\\n' +\r\n          'Reference Standard Size: ' + referenceItem.size + '\\n' +\r\n          'Full Capacity: ' + formatNumber(item.full) + ' mL \/ ' + formatUsOz(item.full) + ' US fl oz \/ ' + formatUkOz(item.full) + ' UK fl oz\\n' +\r\n          'Liquid Gas: ' + formatNumber(item.liquid) + ' mL \/ ' + formatUsOz(item.liquid) + ' US fl oz \/ ' + formatUkOz(item.liquid) + ' UK fl oz\\n' +\r\n          'Compressed Gas: ' + (item.compressed === null ? '\u2014' : formatNumber(item.compressed)) + ' mL \/ ' + formatUsOz(item.compressed) + ' US fl oz \/ ' + formatUkOz(item.compressed) + ' UK fl oz';\r\n        copyText(text, 'Result copied');\r\n      }\r\n\r\n      function copySizeTable() {\r\n        var header = 'No\\tSize (mm)\\tDiameter (mm)\\tHeight (mm)\\tFull Capacity (mL)\\tLiquid Gas (mL)\\tCompressed Gas (mL)';\r\n        var lines = canData.map(function (item) {\r\n          return [item.no, item.size, item.d, item.h, item.full, item.liquid, formatValue(item.compressed)].join('\\t');\r\n        });\r\n        copyText([header].concat(lines).join('\\n'), 'Size table copied');\r\n      }\r\n\r\n      function resetExample() {\r\n        state.diameter = DEFAULT_DIAMETER;\r\n        state.heightInput = DEFAULT_HEIGHT;\r\n        state.mode = DEFAULT_MODE;\r\n        state.mouth = DEFAULT_MOUTH;\r\n        $('accDiameter').value = String(DEFAULT_DIAMETER);\r\n        updateHeightRangeUI();\r\n        syncMouthControl();\r\n        $('accHeight').value = DEFAULT_HEIGHT;\r\n        $('accMode').value = DEFAULT_MODE;\r\n        calculate();\r\n      }\r\n\r\n      $('accDiameter').addEventListener('change', function () {\r\n        state.diameter = Number(this.value);\r\n        updateHeightRangeUI();\r\n        syncMouthControl();\r\n        validateHeight(true);\r\n        calculate();\r\n      });\r\n\r\n      $('accMouth').addEventListener('change', function () {\r\n        state.mouth = Number(this.value);\r\n        calculate();\r\n      });\r\n\r\n      $('accHeight').addEventListener('input', function () {\r\n        var raw = String(this.value).trim();\r\n        if (raw === '' || raw === '-' || raw === '.' || raw === '-.') return;\r\n        var value = parseFloat(raw);\r\n        if (isNaN(value)) return;\r\n\r\n        var range = getHeightRange(state.diameter);\r\n        var maxDigits = String(Math.floor(range.max)).length;\r\n        var numericChars = raw.replace(\/[^0-9]\/g, '');\r\n\r\n        \/*\r\n          Let users finish typing short intermediate values such as \"2\" -> \"20\" -> \"205\".\r\n          Once the entered number has enough digits for this diameter range, clamp immediately\r\n          if it is outside the allowed min\/max range.\r\n        *\/\r\n        if (value < range.min && numericChars.length < maxDigits) {\r\n          state.heightInput = value;\r\n          hideWarning();\r\n          return;\r\n        }\r\n\r\n        var clamped = clampHeightToRange(value, true);\r\n        if (clamped === null) return;\r\n        calculate();\r\n      });\r\n\r\n      $('accHeight').addEventListener('blur', function () {\r\n        var range = getHeightRange(state.diameter);\r\n        var value = parseFloat(this.value);\r\n        if (isNaN(value)) value = range.min;\r\n        clampHeightToRange(value, true);\r\n        calculate();\r\n      });\r\n\r\n      $('accMode').addEventListener('change', function () {\r\n        state.mode = this.value;\r\n        calculate();\r\n      });\r\n      function bindActionButton(id, handler) {\r\n        var button = $(id);\r\n        ['pointerdown', 'mousedown', 'touchstart', 'focus'].forEach(function (eventName) {\r\n          button.addEventListener(eventName, function () { markActionSelected(button); }, true);\r\n        });\r\n        button.addEventListener('click', function () {\r\n          markActionSelected(button);\r\n          handler();\r\n          requestAnimationFrame(function () { markActionSelected(button); });\r\n          setTimeout(function () { markActionSelected(button); }, 0);\r\n          setTimeout(function () { markActionSelected(button); }, 80);\r\n        });\r\n      }\r\n\r\n      bindActionButton('accCopy', copyResult);\r\n      bindActionButton('accReset', resetExample);\r\n      bindActionButton('accCopyTable', copySizeTable);\r\n\r\n      populateMainControls();\r\n      resetExample();\r\n    })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Accueil \/ Centre d&#039;outils d&#039;emballage\u00a0: Estimateur de capacit\u00e9 des a\u00e9rosols\u00a0; Calculateur de capacit\u00e9 des a\u00e9rosols en aluminium. Utilisez le tableau des tailles d&#039;a\u00e9rosols en aluminium homologu\u00e9es pour v\u00e9rifier la capacit\u00e9 \u00e0 ras bord, la capacit\u00e9 de remplissage de gaz liquide et la capacit\u00e9 de remplissage de gaz comprim\u00e9. La hauteur est ajust\u00e9e dynamiquement en fonction du diam\u00e8tre s\u00e9lectionn\u00e9, tandis que le tableau des tailles standard reste disponible ci-dessous. Ingr\u00e9dients s\u00e9lectionn\u00e9s [\u2026]<\/p>","protected":false},"author":1,"featured_media":0,"parent":48526,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-48470","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/pages\/48470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/comments?post=48470"}],"version-history":[{"count":24,"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/pages\/48470\/revisions"}],"predecessor-version":[{"id":48610,"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/pages\/48470\/revisions\/48610"}],"up":[{"embeddable":true,"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/pages\/48526"}],"wp:attachment":[{"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/media?parent=48470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}