{"id":48096,"date":"2026-05-26T00:38:11","date_gmt":"2026-05-26T00:38:11","guid":{"rendered":"https:\/\/www.cnshining.com\/?page_id=48096"},"modified":"2026-06-02T03:24:19","modified_gmt":"2026-06-02T03:24:19","slug":"convertisseur-de-volume-de-capacite","status":"publish","type":"page","link":"https:\/\/www.cnshining.com\/fr\/centre-doutils-demballage\/convertisseur-de-volume-de-capacite","title":{"rendered":"Convertisseur de capacit\u00e9 et de volume"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"48096\" class=\"elementor elementor-48096\" 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-d8a94ad elementor-icon-list--layout-inline elementor-align-center elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"d8a94ad\" 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 class=\"sp-volume-converter\" data-sp-volume-converter>\r\n  <style>\r\n    .sp-volume-converter {\r\n      --sp-bg: #f5f7fb;\r\n      --sp-panel: #ffffff;\r\n      --sp-ink: #0b2f6b;\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-soft-blue: #edf4ff;\r\n      --sp-silver: #eef3fa;\r\n      --sp-shadow: 0 20px 48px rgba(8, 42, 94, .08);\r\n      --sp-radius: 28px;\r\n\r\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Arial, sans-serif;\r\n      color: var(--sp-text);\r\n      margin: 28px auto;\r\n      max-width: 1180px;\r\n      box-sizing: border-box;\r\n      line-height: 1.55;\r\n    }\r\n\r\n    .sp-volume-converter *,\r\n    .sp-volume-converter *::before,\r\n    .sp-volume-converter *::after {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .sp-vc-wrap {\r\n      padding: 0;\r\n    }\r\n\r\n    .sp-vc-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    }\r\n\r\n    .sp-vc-hero {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) minmax(360px, .98fr);\r\n      gap: clamp(28px, 5vw, 56px);\r\n      align-items: center;\r\n    }\r\n\r\n    .sp-vc-eyebrow {\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    .sp-vc-eyebrow::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    .sp-vc-title {\r\n      margin: 0 0 18px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(42px, 5vw, 60px);\r\n      line-height: .98;\r\n      letter-spacing: -.05em;\r\n      font-weight: 900;\r\n    }\r\n\r\n    .sp-vc-copy {\r\n      margin: 0 0 28px;\r\n      max-width: 620px;\r\n      color: var(--sp-muted);\r\n      font-size: clamp(16px, 2vw, 18px);\r\n    }\r\n\r\n    .sp-vc-feature-row {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 14px;\r\n    }\r\n\r\n    .sp-vc-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    .sp-vc-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    .sp-vc-feature span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 13px;\r\n    }\r\n\r\n    .sp-vc-card {\r\n      position: relative;\r\n      width: 100%;\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      padding: clamp(22px, 3vw, 30px);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .sp-vc-card::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      inset: 0 0 auto;\r\n      height: 5px;\r\n      background: linear-gradient(90deg, var(--sp-blue), var(--sp-blue-dark));\r\n    }\r\n\r\n    .sp-vc-card-head {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      justify-content: space-between;\r\n      gap: 18px;\r\n      margin-bottom: 18px;\r\n    }\r\n\r\n    .sp-vc-card-title {\r\n      margin: 0;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 25px;\r\n      line-height: 1.1;\r\n      letter-spacing: -.03em;\r\n    }\r\n\r\n    .sp-vc-card-subtitle {\r\n      margin: 8px 0 0;\r\n      color: var(--sp-muted);\r\n      font-size: 14px;\r\n    }\r\n\r\n    .sp-vc-precision {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      padding: 6px;\r\n      background: var(--sp-silver);\r\n      border: 1px solid #c9d8f1;\r\n      border-radius: 999px;\r\n      white-space: nowrap;\r\n      flex: 0 0 auto;\r\n    }\r\n\r\n    .sp-vc-precision button {\r\n      width: 32px;\r\n      height: 32px;\r\n      min-width: 32px;\r\n      min-height: 32px;\r\n      padding: 0 !important;\r\n      margin: 0 !important;\r\n      border: 1px solid #bcd0f1;\r\n      border-radius: 999px;\r\n      background: #fff;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 18px;\r\n      font-weight: 900;\r\n      line-height: 1 !important;\r\n      text-align: center;\r\n      display: inline-flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      vertical-align: middle !important;\r\n      cursor: pointer;\r\n      appearance: none;\r\n      -webkit-appearance: none;\r\n      transition: transform .16s ease, border-color .16s ease, background .16s ease;\r\n    }\r\n\r\n    .sp-vc-precision button:hover,\r\n    .sp-vc-precision button:focus-visible {\r\n      transform: translateY(-1px);\r\n      border-color: var(--sp-blue);\r\n      background: var(--sp-soft-blue);\r\n      color: var(--sp-blue-dark);\r\n      outline: none;\r\n    }\r\n\r\n    .sp-vc-precision output {\r\n      min-width: 24px;\r\n      text-align: center;\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n      font-size: 16px;\r\n    }\r\n\r\n    .sp-vc-field-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 14px;\r\n    }\r\n\r\n    .sp-vc-field {\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    }\r\n\r\n    .sp-vc-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    .sp-vc-field label {\r\n      display: block;\r\n      margin-bottom: 8px;\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    .sp-vc-input-row {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) auto;\r\n      gap: 12px;\r\n      align-items: center;\r\n    }\r\n\r\n    .sp-vc-field input {\r\n      width: 100%;\r\n      min-width: 0;\r\n      border: 0 !important;\r\n      outline: 0 !important;\r\n      box-shadow: none !important;\r\n      background: transparent !important;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(26px, 4vw, 40px);\r\n      font-weight: 900;\r\n      letter-spacing: -.04em;\r\n      line-height: 1.1;\r\n      padding: 2px 0 !important;\r\n      appearance: textfield;\r\n    }\r\n\r\n    .sp-vc-field input::-webkit-outer-spin-button,\r\n    .sp-vc-field input::-webkit-inner-spin-button {\r\n      -webkit-appearance: none;\r\n      margin: 0;\r\n    }\r\n\r\n    .sp-vc-unit {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: 78px;\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-weight: 900;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .sp-vc-actions {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr 1fr;\r\n      gap: 10px;\r\n      margin: 18px 0 0;\r\n    }\r\n\r\n    .sp-vc-btn {\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    }\r\n\r\n    .sp-vc-btn:hover,\r\n    .sp-vc-btn:focus-visible {\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      outline: none;\r\n    }\r\n\r\n    .sp-vc-btn-primary {\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    .sp-vc-btn-primary:hover,\r\n    .sp-vc-btn-primary:focus-visible {\r\n      background: linear-gradient(135deg, var(--sp-blue-dark), var(--sp-blue));\r\n      color: #fff;\r\n    }\r\n\r\n    .sp-vc-summary {\r\n      margin-top: 16px;\r\n      padding: 15px;\r\n      border: 1px dashed rgba(19, 99, 223, .32);\r\n      border-radius: 16px;\r\n      background: linear-gradient(180deg, #fbfdff, #f5f9ff);\r\n      color: var(--sp-muted);\r\n      font-size: 14px;\r\n    }\r\n\r\n    .sp-vc-summary strong {\r\n      color: var(--sp-blue-dark);\r\n    }\r\n\r\n    .sp-vc-formula {\r\n      margin-top: 14px;\r\n      border-radius: 18px;\r\n      padding: 17px;\r\n      background: linear-gradient(135deg, #082a5e, #1363df);\r\n      color: #fff;\r\n    }\r\n\r\n    .sp-vc-formula strong {\r\n      display: block;\r\n      margin-bottom: 6px;\r\n      font-size: 15px;\r\n      letter-spacing: .01em;\r\n    }\r\n\r\n    .sp-vc-formula code {\r\n      color: #fff;\r\n      white-space: normal;\r\n      font-size: 15px;\r\n      font-weight: 800;\r\n    }\r\n\r\n    .sp-vc-section {\r\n      margin-top: 38px;\r\n    }\r\n\r\n    .sp-vc-section h3 {\r\n      margin: 0 0 10px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(24px, 3vw, 34px);\r\n      line-height: 1.15;\r\n      letter-spacing: -.04em;\r\n    }\r\n\r\n    .sp-vc-section p {\r\n      max-width: 860px;\r\n      margin: 0 0 18px;\r\n      color: var(--sp-muted);\r\n      font-size: 16px;\r\n    }\r\n\r\n    .sp-vc-quick-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(5, minmax(0, 1fr));\r\n      gap: 12px;\r\n    }\r\n\r\n    .sp-vc-chip {\r\n      width: 100%;\r\n      min-height: 88px;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n      padding: 14px 16px;\r\n      text-align: left;\r\n      cursor: pointer;\r\n      overflow: hidden;\r\n      box-shadow: 0 10px 24px rgba(22, 32, 51, .04);\r\n      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;\r\n    }\r\n\r\n    .sp-vc-chip:hover,\r\n    .sp-vc-chip:focus-visible {\r\n      transform: translateY(-2px);\r\n      border-color: rgba(19, 99, 223, .42);\r\n      box-shadow: 0 14px 34px rgba(19, 99, 223, .10);\r\n      outline: none;\r\n    }\r\n\r\n    .sp-vc-chip.is-active {\r\n      border-color: transparent;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark));\r\n      box-shadow: 0 14px 34px rgba(19, 99, 223, .20);\r\n    }\r\n\r\n    .sp-vc-chip strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 18px;\r\n      line-height: 1.2;\r\n      letter-spacing: -.02em;\r\n      word-break: break-word;\r\n    }\r\n\r\n    .sp-vc-chip span {\r\n      display: block;\r\n      margin-top: 6px;\r\n      color: var(--sp-muted);\r\n      font-size: 13px;\r\n      line-height: 1.35;\r\n      white-space: normal;\r\n      word-break: break-word;\r\n    }\r\n\r\n    \/* Fix Elementor button focus \/ active override *\/\r\n    .sp-volume-converter button.sp-vc-chip,\r\n    .sp-volume-converter button.sp-vc-chip strong,\r\n    .sp-volume-converter button.sp-vc-chip span {\r\n      -webkit-text-fill-color: currentColor !important;\r\n    }\r\n\r\n    .sp-volume-converter button.sp-vc-chip:not(.is-active),\r\n    .sp-volume-converter button.sp-vc-chip:not(.is-active):focus,\r\n    .sp-volume-converter button.sp-vc-chip:not(.is-active):active,\r\n    .sp-volume-converter button.sp-vc-chip:not(.is-active):focus-visible {\r\n      background: #ffffff !important;\r\n      color: var(--sp-blue-dark) !important;\r\n    }\r\n\r\n    .sp-volume-converter button.sp-vc-chip:not(.is-active) strong,\r\n    .sp-volume-converter button.sp-vc-chip:not(.is-active):focus strong,\r\n    .sp-volume-converter button.sp-vc-chip:not(.is-active):active strong,\r\n    .sp-volume-converter button.sp-vc-chip:not(.is-active):focus-visible strong {\r\n      color: var(--sp-blue-dark) !important;\r\n      -webkit-text-fill-color: var(--sp-blue-dark) !important;\r\n    }\r\n\r\n    .sp-volume-converter button.sp-vc-chip:not(.is-active) span,\r\n    .sp-volume-converter button.sp-vc-chip:not(.is-active):focus span,\r\n    .sp-volume-converter button.sp-vc-chip:not(.is-active):active span,\r\n    .sp-volume-converter button.sp-vc-chip:not(.is-active):focus-visible span {\r\n      color: var(--sp-muted) !important;\r\n      -webkit-text-fill-color: var(--sp-muted) !important;\r\n    }\r\n\r\n    .sp-volume-converter button.sp-vc-chip.is-active,\r\n    .sp-volume-converter button.sp-vc-chip.is-active:hover,\r\n    .sp-volume-converter button.sp-vc-chip.is-active:focus,\r\n    .sp-volume-converter button.sp-vc-chip.is-active:active,\r\n    .sp-volume-converter button.sp-vc-chip.is-active:focus-visible {\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      border-color: transparent !important;\r\n      color: #ffffff !important;\r\n    }\r\n\r\n    .sp-volume-converter button.sp-vc-chip.is-active strong,\r\n    .sp-volume-converter button.sp-vc-chip.is-active span,\r\n    .sp-volume-converter button.sp-vc-chip.is-active:hover strong,\r\n    .sp-volume-converter button.sp-vc-chip.is-active:hover span,\r\n    .sp-volume-converter button.sp-vc-chip.is-active:focus strong,\r\n    .sp-volume-converter button.sp-vc-chip.is-active:focus span,\r\n    .sp-volume-converter button.sp-vc-chip.is-active:active strong,\r\n    .sp-volume-converter button.sp-vc-chip.is-active:active span,\r\n    .sp-volume-converter button.sp-vc-chip.is-active:focus-visible strong,\r\n    .sp-volume-converter button.sp-vc-chip.is-active:focus-visible span {\r\n      color: #ffffff !important;\r\n      -webkit-text-fill-color: #ffffff !important;\r\n    }\r\n\r\n    .sp-vc-panel {\r\n      background: #fff;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 28px;\r\n      padding: clamp(18px, 2.6vw, 28px);\r\n      box-shadow: 0 14px 34px rgba(22, 32, 51, .05);\r\n    }\r\n\r\n    .sp-vc-table-wrap {\r\n      overflow-x: auto;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n    }\r\n\r\n    .sp-vc-table {\r\n      width: 100%;\r\n      min-width: 620px;\r\n      border-collapse: collapse;\r\n    }\r\n\r\n    .sp-vc-table th,\r\n    .sp-vc-table td {\r\n      padding: 13px 15px;\r\n      border-bottom: 1px solid var(--sp-line);\r\n      text-align: left;\r\n      font-size: 14px;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .sp-vc-table th {\r\n      background: #f1f5fb;\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: .05em;\r\n    }\r\n\r\n    .sp-vc-table tr:last-child td {\r\n      border-bottom: 0;\r\n    }\r\n\r\n    .sp-vc-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    .sp-vc-toast.is-visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    @media (max-width: 1080px) {\r\n      .sp-vc-quick-grid {\r\n        grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      }\r\n    }\r\n\r\n    @media (max-width: 920px) {\r\n      .sp-vc-hero {\r\n        grid-template-columns: 1fr;\r\n      }\r\n\r\n      .sp-vc-feature-row,\r\n      .sp-vc-quick-grid {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n      }\r\n    }\r\n\r\n    @media (max-width: 720px) {\r\n      .sp-vc-actions {\r\n        grid-template-columns: 1fr;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 620px) {\r\n      .sp-vc-shell {\r\n        padding: 22px 16px;\r\n      }\r\n\r\n      .sp-vc-card-head {\r\n        flex-direction: column;\r\n      }\r\n\r\n      .sp-vc-feature-row,\r\n      .sp-vc-quick-grid {\r\n        grid-template-columns: 1fr;\r\n      }\r\n\r\n      .sp-vc-btn {\r\n        width: 100%;\r\n      }\r\n\r\n      .sp-vc-unit {\r\n        min-width: 68px;\r\n      }\r\n    }\r\n\r\n    \/* Force lowercase \/ original unit casing *\/\r\n    .sp-volume-converter .sp-vc-chip,\r\n    .sp-volume-converter .sp-vc-chip strong,\r\n    .sp-volume-converter .sp-vc-chip span,\r\n    .sp-volume-converter .sp-vc-unit,\r\n    .sp-volume-converter .sp-vc-summary,\r\n    .sp-volume-converter .sp-vc-formula code,\r\n    .sp-volume-converter .sp-vc-table td {\r\n      text-transform: none !important;\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"sp-vc-wrap\">\r\n    <div class=\"sp-vc-shell\">\r\n      <div class=\"sp-vc-hero\">\r\n        <div class=\"sp-vc-intro\">\r\n          <span class=\"sp-vc-eyebrow\">Outil unitaire Shining Packaging<\/span>\r\n          <h2 class=\"sp-vc-title\">Capacit\u00e9 &amp;<br>Convertisseur de volume<\/h2>\r\n          <p class=\"sp-vc-copy\">\r\n            Convertissez instantan\u00e9ment les millilitres, les litres, les onces liquides am\u00e9ricaines, les onces liquides britanniques et les centilitres pour les bouteilles en aluminium, les a\u00e9rosols, les emballages cosm\u00e9tiques, les contenants de boissons et les flacons d&#039;\u00e9chantillons.\r\n          <\/p>\r\n\r\n          <div class=\"sp-vc-feature-row\" aria-label=\"Points forts du convertisseur\">\r\n            <div class=\"sp-vc-feature\">\r\n              <strong>1 L = 1000 ml<\/strong>\r\n              <span>R\u00e9f\u00e9rence de capacit\u00e9 m\u00e9trique<\/span>\r\n            <\/div>\r\n            <div class=\"sp-vc-feature\">\r\n              <strong>1 cl = 10 ml<\/strong>\r\n              <span>Volume d&#039;emballage courant<\/span>\r\n            <\/div>\r\n            <div class=\"sp-vc-feature\">\r\n              <strong>5 unit\u00e9s de base<\/strong>\r\n              <span>ml, L, fl oz US, fl oz UK, cl<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"sp-vc-card\" aria-labelledby=\"sp-vc-title\">\r\n          <div class=\"sp-vc-card-head\">\r\n            <div>\r\n              <h3 id=\"sp-vc-title\" class=\"sp-vc-card-title\">Convertisseur de volume d&#039;emballage<\/h3>\r\n              <p class=\"sp-vc-card-subtitle\">Saisissez du texte dans n&#039;importe quel champ \u2014 toutes les autres unit\u00e9s se mettent \u00e0 jour en temps r\u00e9el.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"sp-vc-precision\" aria-label=\"Contr\u00f4le de pr\u00e9cision d\u00e9cimale\">\r\n              <button type=\"button\" data-dec-down aria-label=\"Diminuer les d\u00e9cimales\">\u2212<\/button>\r\n              <output data-decimals aria-label=\"D\u00e9cimales actuelles\">4<\/output>\r\n              <button type=\"button\" data-dec-up aria-label=\"Augmenter les d\u00e9cimales\">+<\/button>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"sp-vc-field-grid\">\r\n            <div class=\"sp-vc-field\">\r\n              <label>Millilitres<\/label>\r\n              <div class=\"sp-vc-input-row\">\r\n                <input data-unit=\"ml\" type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" placeholder=\"1000\" aria-label=\"Millilitres\">\r\n                <span class=\"sp-vc-unit\">ml<\/span>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"sp-vc-field\">\r\n              <label>Litres<\/label>\r\n              <div class=\"sp-vc-input-row\">\r\n                <input data-unit=\"l\" type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" placeholder=\"1\" aria-label=\"Litres\">\r\n                <span class=\"sp-vc-unit\">L<\/span>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"sp-vc-field\">\r\n              <label>onces liquides am\u00e9ricaines<\/label>\r\n              <div class=\"sp-vc-input-row\">\r\n                <input data-unit=\"usfloz\" type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" placeholder=\"33.814\" aria-label=\"onces liquides am\u00e9ricaines\">\r\n                <span class=\"sp-vc-unit\">fl oz US<\/span>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"sp-vc-field\">\r\n              <label>onces liquides britanniques<\/label>\r\n              <div class=\"sp-vc-input-row\">\r\n                <input data-unit=\"ukfloz\" type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" placeholder=\"35.1951\" aria-label=\"onces liquides britanniques\">\r\n                <span class=\"sp-vc-unit\">fl oz britannique<\/span>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"sp-vc-field\">\r\n              <label>Centim\u00e8tres<\/label>\r\n              <div class=\"sp-vc-input-row\">\r\n                <input data-unit=\"cl\" type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" placeholder=\"100\" aria-label=\"Centim\u00e8tres\">\r\n                <span class=\"sp-vc-unit\">cl<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"sp-vc-actions\">\r\n            <button class=\"sp-vc-btn sp-vc-btn-primary\" type=\"button\" data-copy-all>Copier tous les r\u00e9sultats<\/button>\r\n            <button class=\"sp-vc-btn\" type=\"button\" data-reset>R\u00e9initialiser \u00e0 1000 ml<\/button>\r\n            <button class=\"sp-vc-btn\" type=\"button\" data-clear>Clair<\/button>\r\n          <\/div>\r\n\r\n          <div class=\"sp-vc-summary\" data-summary aria-live=\"polite\">\r\n            Saisissez une valeur pour afficher ici le r\u00e9capitulatif de la conversion.\r\n          <\/div>\r\n\r\n          <div class=\"sp-vc-formula\">\r\n            <strong>Formules de conversion<\/strong>\r\n            <code>1 L = 1000 ml = 100 cl = 33,814 oz liq. US = 35,1951 oz liq. UK<\/code>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"sp-vc-section\">\r\n      <h3>Conversions de capacit\u00e9 rapides<\/h3>\r\n      <p>Cliquez sur une valeur courante pour la charger dans le convertisseur. Seules les valeurs et unit\u00e9s principales sont affich\u00e9es pour une pr\u00e9sentation plus claire.<\/p>\r\n      <div class=\"sp-vc-quick-grid\" data-quick-grid><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"sp-vc-section\">\r\n      <div class=\"sp-vc-panel\">\r\n        <h3>Tableau de conversion des capacit\u00e9s<\/h3>\r\n        <p>Tableau de r\u00e9f\u00e9rence rapide des volumes d&#039;emballage courants en unit\u00e9s m\u00e9triques et en onces liquides.<\/p>\r\n        <div class=\"sp-vc-table-wrap\">\r\n          <table class=\"sp-vc-table\">\r\n            <thead>\r\n              <tr>\r\n                <th>ml<\/th>\r\n                <th>L<\/th>\r\n                <th>fl oz US<\/th>\r\n                <th>fl oz britannique<\/th>\r\n                <th>cl<\/th>\r\n              <\/tr>\r\n            <\/thead>\r\n            <tbody data-chart-body><\/tbody>\r\n          <\/table>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sp-vc-toast\" data-toast role=\"status\" aria-live=\"polite\">Copi\u00e9<\/div>\r\n\r\n  <script>\r\n    (function () {\r\n      const root = document.currentScript.closest('[data-sp-volume-converter]');\r\n      if (!root || root.dataset.spVolumeReady === 'true') return;\r\n      root.dataset.spVolumeReady = 'true';\r\n\r\n      const factorsToMl = {\r\n        ml: 1,\r\n        l: 1000,\r\n        usfloz: 29.5735295625,\r\n        ukfloz: 28.4130625,\r\n        cl: 10\r\n      };\r\n\r\n      const unitNames = {\r\n        ml: 'ml',\r\n        l: 'L',\r\n        usfloz: 'US fl oz',\r\n        ukfloz: 'UK fl oz',\r\n        cl: 'cl'\r\n      };\r\n\r\n      const displayOrder = ['ml', 'l', 'usfloz', 'ukfloz', 'cl'];\r\n\r\n      const inputs = Array.from(root.querySelectorAll('[data-unit]'));\r\n      const decOutput = root.querySelector('[data-decimals]');\r\n      const summary = root.querySelector('[data-summary]');\r\n      const toast = root.querySelector('[data-toast]');\r\n      const quickGrid = root.querySelector('[data-quick-grid]');\r\n      const chartBody = root.querySelector('[data-chart-body]');\r\n\r\n      let decimals = 4;\r\n      let lastUnit = 'ml';\r\n      let toastTimer = null;\r\n      let activeChip = null;\r\n\r\n      const quickValues = [\r\n        { unit: 'ml', value: 1 },\r\n        { unit: 'l', value: 1 },\r\n        { unit: 'usfloz', value: 1 },\r\n        { unit: 'ukfloz', value: 1 },\r\n        { unit: 'cl', value: 1 }\r\n      ];\r\n\r\n      const chartValues = [\r\n        { unit: 'ml', value: 1 },\r\n        { unit: 'cl', value: 1 },\r\n        { unit: 'ml', value: 30 },\r\n        { unit: 'ml', value: 50 },\r\n        { unit: 'ml', value: 100 },\r\n        { unit: 'ml', value: 250 },\r\n        { unit: 'ml', value: 500 },\r\n        { unit: 'l', value: 1 }\r\n      ];\r\n\r\n      function parseUserNumber(value) {\r\n        const cleaned = String(value || '').replace(\/,\/g, '').trim();\r\n        if (cleaned === '' || cleaned === '-' || cleaned === '.' || cleaned === '-.') return NaN;\r\n        return Number(cleaned);\r\n      }\r\n\r\n      function formatNumber(value) {\r\n        if (!Number.isFinite(value)) return '';\r\n        const fixed = value.toFixed(decimals);\r\n        return fixed.replace(\/\\.?0+$\/, '') || '0';\r\n      }\r\n\r\n      function getInput(unit) {\r\n        return root.querySelector('[data-unit=\"' + unit + '\"]');\r\n      }\r\n\r\n      function valuesFromMl(ml) {\r\n        return {\r\n          ml: ml,\r\n          l: ml \/ factorsToMl.l,\r\n          usfloz: ml \/ factorsToMl.usfloz,\r\n          ukfloz: ml \/ factorsToMl.ukfloz,\r\n          cl: ml \/ factorsToMl.cl\r\n        };\r\n      }\r\n\r\n      function setSummary(values, sourceUnit, sourceValue) {\r\n        if (!Number.isFinite(sourceValue)) {\r\n          summary.innerHTML = 'Enter a value to see the conversion summary here.';\r\n          return;\r\n        }\r\n\r\n        summary.innerHTML =\r\n          '<strong>' + formatNumber(sourceValue) + ' ' + unitNames[sourceUnit] + '<\/strong> = ' +\r\n          displayOrder.map(function (unit) {\r\n            return '<strong>' + formatNumber(values[unit]) + ' ' + unitNames[unit] + '<\/strong>';\r\n          }).join(' \u00b7 ');\r\n      }\r\n\r\n      function convertFrom(unit, preserveSource) {\r\n        const sourceInput = getInput(unit);\r\n        const sourceValue = parseUserNumber(sourceInput.value);\r\n        lastUnit = unit;\r\n\r\n        if (!Number.isFinite(sourceValue)) {\r\n          inputs.forEach(function (input) {\r\n            if (input !== sourceInput) input.value = '';\r\n          });\r\n          setSummary(null, unit, NaN);\r\n          return;\r\n        }\r\n\r\n        const ml = sourceValue * factorsToMl[unit];\r\n        const values = valuesFromMl(ml);\r\n\r\n        inputs.forEach(function (input) {\r\n          const inputUnit = input.dataset.unit;\r\n          if (preserveSource && inputUnit === unit) return;\r\n          input.value = formatNumber(values[inputUnit]);\r\n        });\r\n\r\n        setSummary(values, unit, sourceValue);\r\n      }\r\n\r\n      function refreshPrecision() {\r\n        decOutput.value = decimals;\r\n        convertFrom(lastUnit, true);\r\n        renderQuickValues();\r\n        renderChart();\r\n      }\r\n\r\n      function showToast(message) {\r\n        if (!toast) return;\r\n        toast.textContent = message;\r\n        toast.classList.add('is-visible');\r\n        clearTimeout(toastTimer);\r\n        toastTimer = setTimeout(function () {\r\n          toast.classList.remove('is-visible');\r\n        }, 1400);\r\n      }\r\n\r\n      function setActiveChip(button) {\r\n        if (activeChip) activeChip.classList.remove('is-active');\r\n        activeChip = button || null;\r\n        if (activeChip) activeChip.classList.add('is-active');\r\n      }\r\n\r\n      async function copyAllResults() {\r\n        const values = {};\r\n        inputs.forEach(function (input) {\r\n          values[input.dataset.unit] = input.value;\r\n        });\r\n\r\n        const hasValue = displayOrder.some(function (unit) {\r\n          return values[unit];\r\n        });\r\n\r\n        if (!hasValue) {\r\n          showToast('Nothing to copy');\r\n          return;\r\n        }\r\n\r\n        const text = displayOrder.map(function (unit) {\r\n          return unitNames[unit] + ': ' + values[unit];\r\n        }).join('\\n');\r\n\r\n        try {\r\n          await navigator.clipboard.writeText(text);\r\n          showToast('Results copied');\r\n        } catch (error) {\r\n          showToast('Copy failed');\r\n        }\r\n      }\r\n\r\n      function clearInputs() {\r\n        inputs.forEach(function (input) {\r\n          input.value = '';\r\n        });\r\n        setActiveChip(null);\r\n        summary.innerHTML = 'Enter a value to see the conversion summary here.';\r\n        getInput('ml').focus();\r\n      }\r\n\r\n      function resetToDefault() {\r\n        getInput('ml').value = '1000';\r\n        convertFrom('ml', true);\r\n        const firstChip = quickGrid ? quickGrid.querySelector('.sp-vc-chip') : null;\r\n        setActiveChip(firstChip);\r\n      }\r\n\r\n      function renderQuickValues() {\r\n        if (!quickGrid) return;\r\n        quickGrid.innerHTML = '';\r\n\r\n        quickValues.forEach(function (item) {\r\n          const ml = item.value * factorsToMl[item.unit];\r\n          const values = valuesFromMl(ml);\r\n          const button = document.createElement('button');\r\n\r\n          button.type = 'button';\r\n          button.className = 'sp-vc-chip';\r\n          button.innerHTML =\r\n            '<strong>' + formatNumber(item.value) + ' ' + unitNames[item.unit] + '<\/strong>' +\r\n            '<span>' + formatNumber(values.ml) + ' ml \u00b7 ' + formatNumber(values.l) + ' L \u00b7 ' + formatNumber(values.usfloz) + ' US fl oz<\/span>';\r\n\r\n          button.addEventListener('click', function () {\r\n            getInput(item.unit).value = formatNumber(item.value);\r\n            convertFrom(item.unit, true);\r\n            setActiveChip(button);\r\n\r\n            const card = root.querySelector('.sp-vc-card');\r\n            if (card) {\r\n              card.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n            }\r\n          });\r\n\r\n          quickGrid.appendChild(button);\r\n        });\r\n      }\r\n\r\n      function renderChart() {\r\n        if (!chartBody) return;\r\n        chartBody.innerHTML = '';\r\n\r\n        chartValues.forEach(function (item) {\r\n          const ml = item.value * factorsToMl[item.unit];\r\n          const values = valuesFromMl(ml);\r\n          const row = document.createElement('tr');\r\n\r\n          row.innerHTML = displayOrder.map(function (unit) {\r\n            return '<td>' + formatNumber(values[unit]) + ' ' + unitNames[unit] + '<\/td>';\r\n          }).join('');\r\n\r\n          chartBody.appendChild(row);\r\n        });\r\n      }\r\n\r\n      inputs.forEach(function (input) {\r\n        input.addEventListener('input', function () {\r\n          convertFrom(input.dataset.unit, true);\r\n          setActiveChip(null);\r\n        });\r\n      });\r\n\r\n      root.querySelector('[data-dec-down]').addEventListener('click', function () {\r\n        decimals = Math.max(0, decimals - 1);\r\n        refreshPrecision();\r\n      });\r\n\r\n      root.querySelector('[data-dec-up]').addEventListener('click', function () {\r\n        decimals = Math.min(8, decimals + 1);\r\n        refreshPrecision();\r\n      });\r\n\r\n      root.querySelector('[data-copy-all]').addEventListener('click', copyAllResults);\r\n      root.querySelector('[data-reset]').addEventListener('click', resetToDefault);\r\n      root.querySelector('[data-clear]').addEventListener('click', clearInputs);\r\n\r\n      renderQuickValues();\r\n      renderChart();\r\n      resetToDefault();\r\n    })();\r\n  <\/script>\r\n\r\n  <script type=\"application\/ld+json\">{\n    \"@context\": \"https:\\\/\\\/schema.org\",\n    \"@type\": \"WebApplication\",\n    \"name\": \"Capacity and Volume Unit Converter\",\n    \"applicationCategory\": \"CalculatorApplication\",\n    \"operatingSystem\": \"Any\",\n    \"description\": \"Convert ml, L, US fl oz, UK fl oz, and cl values instantly with a five-unit volume conversion tool.\",\n    \"offers\": {\n        \"@type\": \"Offer\",\n        \"price\": \"0\",\n        \"priceCurrency\": \"USD\"\n    }\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 Shining Packaging Convertisseur d&#039;unit\u00e9s de mesure et de volume Convertissez instantan\u00e9ment les millilitres, les litres, les onces liquides US, les onces liquides UK et les centilitres pour les bouteilles en aluminium, les a\u00e9rosols, les emballages cosm\u00e9tiques, les contenants de boissons et les flacons d&#039;\u00e9chantillons. 1 L = 1000 ml R\u00e9f\u00e9rence m\u00e9trique de capacit\u00e9 1 cl = 10 ml Volume d&#039;emballage courant 5 unit\u00e9s de base [\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-48096","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/pages\/48096","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=48096"}],"version-history":[{"count":7,"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/pages\/48096\/revisions"}],"predecessor-version":[{"id":48592,"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/pages\/48096\/revisions\/48592"}],"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=48096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}