{"id":48633,"date":"2026-06-02T09:15:05","date_gmt":"2026-06-02T09:15:05","guid":{"rendered":"https:\/\/www.cnshining.com\/?page_id=48633"},"modified":"2026-06-02T09:25:24","modified_gmt":"2026-06-02T09:25:24","slug":"calculateur-de-code-de-diametre-de-boite-metallique","status":"publish","type":"page","link":"https:\/\/www.cnshining.com\/fr\/centre-doutils-demballage\/calculateur-de-code-de-diametre-de-boite-metallique","title":{"rendered":"Calculateur de diam\u00e8tre de bo\u00eete m\u00e9tallique"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"48633\" class=\"elementor elementor-48633\" 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-d7ae074 elementor-icon-list--layout-inline elementor-align-center elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"d7ae074\" 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-mct-simple\" data-sp-mct-simple>\r\n  <style>\r\n    .sp-mct-simple {\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-soft-blue: #edf4ff;\r\n      --sp-silver: #eef3fa;\r\n      --sp-warning: #fff8eb;\r\n      --sp-warning-line: #f4c36a;\r\n      --sp-good: #0f8a5f;\r\n      --sp-shadow: 0 20px 48px rgba(8, 42, 94, .08);\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      max-width: 1180px;\r\n      margin: 28px auto;\r\n      line-height: 1.55;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .sp-mct-simple *,\r\n    .sp-mct-simple *::before,\r\n    .sp-mct-simple *::after { box-sizing: border-box; }\r\n\r\n    .sp-mct-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-mct-hero {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) minmax(380px, .98fr);\r\n      gap: clamp(28px, 5vw, 56px);\r\n      align-items: center;\r\n    }\r\n\r\n    .sp-mct-eyebrow {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      margin: 0 0 18px;\r\n      padding: 8px 14px;\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-mct-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-mct-title {\r\n      margin: 0 0 18px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(38px, 5vw, 58px);\r\n      line-height: .98;\r\n      letter-spacing: -.05em;\r\n\r\n    }\r\n\r\n    .sp-mct-copy {\r\n      margin: 0 0 28px;\r\n      max-width: 680px;\r\n      color: var(--sp-muted);\r\n      font-size: clamp(16px, 2vw, 18px);\r\n    }\r\n\r\n    .sp-mct-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-mct-feature {\r\n      min-height: 112px;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n      padding: 16px;\r\n    }\r\n\r\n    .sp-mct-feature strong {\r\n      display: block;\r\n      margin-bottom: 8px;\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    }\r\n\r\n    .sp-mct-feature span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 13px;\r\n    }\r\n\r\n\r\n\r\n    .sp-mct-principle {\r\n      max-width: 560px;\r\n      margin-top: 22px;\r\n      border: 1px solid rgba(19, 99, 223, .18);\r\n      border-radius: 20px;\r\n      background: rgba(255, 255, 255, .78);\r\n      padding: 18px;\r\n      box-shadow: 0 12px 30px rgba(22, 32, 51, .035);\r\n    }\r\n\r\n    .sp-mct-principle-title {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      margin: 0 0 12px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 18px;\r\n      line-height: 1.2;\r\n      font-weight: 900;\r\n      letter-spacing: -.02em;\r\n    }\r\n\r\n    .sp-mct-principle-title::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, .10);\r\n      flex: 0 0 auto;\r\n    }\r\n\r\n    .sp-mct-principle-list {\r\n      display: grid;\r\n      gap: 10px;\r\n      margin: 0;\r\n      padding: 0;\r\n      list-style: none;\r\n    }\r\n\r\n    .sp-mct-principle-list li {\r\n      margin: 0;\r\n      color: var(--sp-muted);\r\n      font-size: 14px;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    .sp-mct-principle-list strong {\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n    }\r\n\r\n    .sp-mct-principle-example {\r\n      margin-top: 13px;\r\n      padding: 12px 14px;\r\n      border-radius: 14px;\r\n      background: var(--sp-soft-blue);\r\n      color: var(--sp-blue-dark);\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    .sp-mct-card {\r\n      position: relative;\r\n      width: 100%;\r\n      overflow: hidden;\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    }\r\n\r\n    .sp-mct-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-mct-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-mct-card-subtitle {\r\n      margin: 8px 0 18px;\r\n      color: var(--sp-muted);\r\n      font-size: 14px;\r\n    }\r\n\r\n    .sp-mct-field-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 14px;\r\n    }\r\n\r\n    .sp-mct-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-mct-field.is-active,\r\n    .sp-mct-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-mct-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-mct-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-mct-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) !important;\r\n      padding: 2px 0 !important;\r\n      margin: 0 !important;\r\n      line-height: 1.1;\r\n      font-size: clamp(24px, 4vw, 38px);\r\n      font-weight: 900;\r\n      letter-spacing: -.04em;\r\n      appearance: textfield;\r\n      -webkit-appearance: none;\r\n      border-radius: 0;\r\n    }\r\n\r\n    .sp-mct-field input::-webkit-outer-spin-button,\r\n    .sp-mct-field input::-webkit-inner-spin-button {\r\n      -webkit-appearance: none;\r\n      margin: 0;\r\n    }\r\n\r\n    .sp-mct-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-mct-results {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 12px;\r\n      margin-top: 16px;\r\n    }\r\n\r\n    .sp-mct-result {\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n      padding: 14px;\r\n    }\r\n\r\n    .sp-mct-result span {\r\n      display: block;\r\n      margin-bottom: 6px;\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: .05em;\r\n    }\r\n\r\n    .sp-mct-result strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(21px, 3vw, 30px);\r\n      line-height: 1.08;\r\n      letter-spacing: -.04em;\r\n    }\r\n\r\n    .sp-mct-result em {\r\n      display: block;\r\n      margin-top: 6px;\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-style: normal;\r\n    }\r\n\r\n    .sp-mct-warning {\r\n      margin-top: 14px;\r\n      padding: 14px 15px;\r\n      border: 1px solid var(--sp-warning-line);\r\n      border-radius: 16px;\r\n      background: var(--sp-warning);\r\n      color: #6a4a12;\r\n      font-size: 13px;\r\n    }\r\n\r\n    .sp-mct-actions {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr 1fr;\r\n      gap: 10px;\r\n      margin-top: 16px;\r\n    }\r\n\r\n    .sp-mct-btn,\r\n    .sp-mct-chip {\r\n      cursor: pointer;\r\n      appearance: none;\r\n      -webkit-appearance: none;\r\n      font-family: inherit;\r\n    }\r\n\r\n    .sp-mct-btn {\r\n      border: 1px solid var(--sp-line) !important;\r\n      border-radius: 13px !important;\r\n      background: #fff !important;\r\n      color: var(--sp-blue-dark) !important;\r\n      padding: 12px 14px !important;\r\n      font-size: 14px !important;\r\n      font-weight: 800 !important;\r\n      line-height: 1.2 !important;\r\n      text-align: center !important;\r\n      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;\r\n    }\r\n\r\n    .sp-mct-btn:hover,\r\n    .sp-mct-btn:focus-visible {\r\n      transform: translateY(-1px);\r\n      border-color: rgba(19, 99, 223, .4) !important;\r\n      background: #f7fbff !important;\r\n      box-shadow: 0 10px 24px rgba(22, 32, 51, .05);\r\n      outline: none;\r\n    }\r\n\r\n    .sp-mct-btn-primary {\r\n      border-color: transparent !important;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      color: #fff !important;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .18);\r\n    }\r\n\r\n    .sp-mct-btn-primary:hover,\r\n    .sp-mct-btn-primary:focus-visible {\r\n      background: linear-gradient(135deg, var(--sp-blue-dark), var(--sp-blue)) !important;\r\n      color: #fff !important;\r\n    }\r\n\r\n    .sp-mct-section { margin-top: 38px; }\r\n\r\n    .sp-mct-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-mct-section p {\r\n      max-width: 900px;\r\n      margin: 0 0 18px;\r\n      color: var(--sp-muted);\r\n      font-size: 16px;\r\n    }\r\n\r\n    .sp-mct-quick-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(6, minmax(0, 1fr));\r\n      gap: 12px;\r\n    }\r\n\r\n    .sp-mct-chip {\r\n      width: 100%;\r\n      min-height: 88px;\r\n      border: 1px solid var(--sp-line) !important;\r\n      border-radius: 18px !important;\r\n      background: #fff !important;\r\n      color: var(--sp-blue-dark) !important;\r\n      padding: 14px 15px !important;\r\n      text-align: left !important;\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-mct-chip:hover,\r\n    .sp-mct-chip:focus-visible {\r\n      transform: translateY(-2px);\r\n      border-color: rgba(19, 99, 223, .42) !important;\r\n      box-shadow: 0 14px 34px rgba(19, 99, 223, .10);\r\n      outline: none;\r\n    }\r\n\r\n    .sp-mct-chip.is-active {\r\n      border-color: transparent !important;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      box-shadow: 0 14px 34px rgba(19, 99, 223, .20);\r\n      color: #fff !important;\r\n    }\r\n\r\n    .sp-mct-chip strong {\r\n      display: block;\r\n      color: currentColor !important;\r\n      -webkit-text-fill-color: currentColor !important;\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-mct-chip span {\r\n      display: block;\r\n      margin-top: 6px;\r\n      color: var(--sp-muted) !important;\r\n      -webkit-text-fill-color: var(--sp-muted) !important;\r\n      font-size: 12px;\r\n      line-height: 1.35;\r\n      word-break: break-word;\r\n    }\r\n\r\n    .sp-mct-chip.is-active span {\r\n      color: rgba(255, 255, 255, .86) !important;\r\n      -webkit-text-fill-color: rgba(255, 255, 255, .86) !important;\r\n    }\r\n\r\n    .sp-mct-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-mct-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-mct-table {\r\n      width: 100%;\r\n      min-width: 680px;\r\n      border-collapse: collapse;\r\n    }\r\n\r\n    .sp-mct-table th,\r\n    .sp-mct-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      vertical-align: top;\r\n    }\r\n\r\n    .sp-mct-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      white-space: nowrap;\r\n    }\r\n\r\n    .sp-mct-table tr:last-child td { border-bottom: 0; }\r\n\r\n    .sp-mct-table code {\r\n      display: inline-block;\r\n      padding: 3px 7px;\r\n      border-radius: 999px;\r\n      background: var(--sp-soft-blue);\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n      font-size: 13px;\r\n    }\r\n\r\n    .sp-mct-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 5px;\r\n      padding: 4px 8px;\r\n      border-radius: 999px;\r\n      background: var(--sp-silver);\r\n      color: var(--sp-blue-dark);\r\n      font-size: 12px;\r\n      font-weight: 850;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .sp-mct-badge.is-good {\r\n      background: #eaf8f2;\r\n      color: var(--sp-good);\r\n    }\r\n\r\n    .sp-mct-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-mct-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-mct-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }\r\n    }\r\n\r\n    @media (max-width: 920px) {\r\n      .sp-mct-hero { grid-template-columns: 1fr; }\r\n      .sp-mct-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n      .sp-mct-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }\r\n    }\r\n\r\n    @media (max-width: 720px) {\r\n      .sp-mct-actions,\r\n      .sp-mct-results { grid-template-columns: 1fr; }\r\n      .sp-mct-title { font-size: 38px; }\r\n    }\r\n\r\n    @media (max-width: 620px) {\r\n      .sp-mct-shell { padding: 22px 16px; }\r\n      .sp-mct-feature-row,\r\n      .sp-mct-quick-grid { grid-template-columns: 1fr; }\r\n      .sp-mct-btn { width: 100%; }\r\n      .sp-mct-unit { min-width: 70px; }\r\n    }\r\n\r\n    .sp-mct-simple .sp-mct-chip,\r\n    .sp-mct-simple .sp-mct-chip strong,\r\n    .sp-mct-simple .sp-mct-chip span,\r\n    .sp-mct-simple .sp-mct-unit,\r\n    .sp-mct-simple .sp-mct-table td { text-transform: none !important; }\r\n  <\/style>\r\n\r\n  <div class=\"sp-mct-shell\">\r\n    <div class=\"sp-mct-hero\">\r\n      <div class=\"sp-mct-intro\">\r\n        <span class=\"sp-mct-eyebrow\">Outil unitaire Shining Packaging<\/span>\r\n        <h2 class=\"sp-mct-title\">Calculateur de diam\u00e8tre de bo\u00eete m\u00e9tallique<\/h2>\r\n        <p class=\"sp-mct-copy\">\r\n          Saisissez un code, une valeur d\u00e9cimale en pouces ou une valeur en millim\u00e8tres. Les champs Code, pouces et mm se mettent \u00e0 jour mutuellement en temps r\u00e9el.\r\n        <\/p>\r\n\r\n        <div class=\"sp-mct-principle\" aria-label=\"Principe de calcul\">\r\n          <h3 class=\"sp-mct-principle-title\">Principe de calcul<\/h3>\r\n          <ul class=\"sp-mct-principle-list\">\r\n            <li><strong>Code:<\/strong> Le premier chiffre repr\u00e9sente la valeur en pouces entiers ; les deux derniers chiffres repr\u00e9sentent les seizi\u00e8mes de pouce.<\/li>\r\n            <li><strong>Pouces:<\/strong> Le code est converti en une valeur d\u00e9cimale en pouces.<\/li>\r\n            <li><strong>Millim\u00e8tres :<\/strong> La valeur d\u00e9cimale en pouces est convertie en mm.<\/li>\r\n          <\/ul>\r\n          <div class=\"sp-mct-principle-example\">Exemple\u00a0: 202 \u2192 2 + 2\/16 po \u2192 2,125 po \u2192 53,97 mm<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"sp-mct-card\" aria-labelledby=\"sp-mct-title\">\r\n        <h3 id=\"sp-mct-title\" class=\"sp-mct-card-title\">Code \/ Pouce \/ mm Entr\u00e9e<\/h3>\r\n        <p class=\"sp-mct-card-subtitle\">Saisissez du texte dans n&#039;importe quel champ \u2014 les autres champs se mettent \u00e0 jour automatiquement.<\/p>\r\n\r\n        <div class=\"sp-mct-field-grid\">\r\n          <div class=\"sp-mct-field\" data-field-wrap=\"code\">\r\n            <label class=\"sp-mct-label\" for=\"sp-mct-code-input\">Code<\/label>\r\n            <div class=\"sp-mct-input-row\">\r\n              <input id=\"sp-mct-code-input\" data-code-input type=\"text\" inputmode=\"text\" autocomplete=\"off\" placeholder=\"202, 211 ou 300\" aria-label=\"Code de taille\">\r\n              <span class=\"sp-mct-unit\">Code<\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"sp-mct-field\" data-field-wrap=\"inch\">\r\n            <label class=\"sp-mct-label\" for=\"sp-mct-inch-input\">Pouces<\/label>\r\n            <div class=\"sp-mct-input-row\">\r\n              <input id=\"sp-mct-inch-input\" data-inch-input type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" placeholder=\"2.125\" aria-label=\"pouces d\u00e9cimaux\">\r\n              <span class=\"sp-mct-unit\">dans<\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"sp-mct-field\" data-field-wrap=\"mm\">\r\n            <label class=\"sp-mct-label\" for=\"sp-mct-mm-input\">Millim\u00e8tres<\/label>\r\n            <div class=\"sp-mct-input-row\">\r\n              <input id=\"sp-mct-mm-input\" data-mm-input type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" placeholder=\"53.98\" aria-label=\"Millim\u00e8tres\">\r\n              <span class=\"sp-mct-unit\">mm<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"sp-mct-results\" aria-label=\"R\u00e9sultats de la recherche\">\r\n          <div class=\"sp-mct-result\">\r\n            <span>R\u00e9f\u00e9rence mm courante<\/span>\r\n            <strong data-practical-mm>\u2014<\/strong>\r\n          <\/div>\r\n        <\/div>\r\n<div class=\"sp-mct-warning\">\r\n          L&#039;entr\u00e9e mm utilise la valeur nominale du code pour la synchronisation. Les r\u00e9f\u00e9rences mm courantes peuvent diff\u00e9rer de la valeur nominale. Confirmez les dimensions finales avec le plan du fournisseur avant la production, l&#039;outillage ou la mise en place de la ligne de remplissage.\r\n        <\/div>\r\n\r\n        <div class=\"sp-mct-actions\">\r\n          <button class=\"sp-mct-btn sp-mct-btn-primary\" type=\"button\" data-copy-all>Copier les r\u00e9sultats<\/button>\r\n          <button class=\"sp-mct-btn\" type=\"button\" data-reset>R\u00e9initialiser \u00e0 202<\/button>\r\n          <button class=\"sp-mct-btn\" type=\"button\" data-clear>Clair<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sp-mct-section\">\r\n    <h3>Tableau de conversion rapide<\/h3>\r\n    <p>Cliquez sur un code pour charger ses valeurs.<\/p>\r\n    <div class=\"sp-mct-quick-grid\" data-quick-grid><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sp-mct-section\">\r\n    <div class=\"sp-mct-panel\">\r\n      <h3>Tableau de conversion des dimensions<\/h3>\r\n\r\n      <div class=\"sp-mct-table-wrap\">\r\n        <table class=\"sp-mct-table\">\r\n          <thead>\r\n            <tr>\r\n              <th>Code<\/th>\r\n              <th>Pouces<\/th>\r\n              <th>mm<\/th>\r\n              <th>R\u00e9f\u00e9rence mm courante<\/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\r\n  <div class=\"sp-mct-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-mct-simple]');\r\n      if (!root || root.dataset.spMctSimpleReady === 'true') return;\r\n      root.dataset.spMctSimpleReady = 'true';\r\n\r\n      const commonReferences = {\r\n        '112': '45 mm',\r\n        '115': '49 mm',\r\n        '200': '50\u201350.8 mm',\r\n        '202': '52 \/ 52.4\u201352.5 \/ 53.3\u201353.4 mm',\r\n        '204': '57.4 mm',\r\n        '205': '57 mm',\r\n        '206': '60.3 mm',\r\n        '209': '65.1 mm',\r\n        '211': '65 \/ 66.1\u201366.2 mm',\r\n        '214': '70 mm',\r\n        '215': '74.6 mm',\r\n        '300': '73 \/ 76.2 mm',\r\n        '301': '77.8 mm',\r\n        '303': '81.0 mm',\r\n        '307': '87.3 mm',\r\n        '315': '100.0 mm',\r\n        '401': '104.8 mm',\r\n        '404': '111.1 mm',\r\n        '502': '132.6 mm',\r\n        '603': '159.5 mm'\r\n      };\r\n\r\n      const tableCodes = [\r\n        '112', '115', '200', '202', '204', '205', '206', '209', '211', '214', '215',\r\n        '300', '301', '303', '307', '315', '401', '404', '502', '603'\r\n      ];\r\n\r\n      const quickItems = [\r\n        '112', '115', '200', '202', '204', '205', '206', '209', '211', '214', '215',\r\n        '300', '301', '303', '307', '315', '401', '404', '502', '603'\r\n      ];\r\n\r\n      const codeInput = root.querySelector('[data-code-input]');\r\n      const inchInput = root.querySelector('[data-inch-input]');\r\n      const mmInput = root.querySelector('[data-mm-input]');\r\n      const practicalMm = root.querySelector('[data-practical-mm]');\r\n      const quickGrid = root.querySelector('[data-quick-grid]');\r\n      const chartBody = root.querySelector('[data-chart-body]');\r\n      const toast = root.querySelector('[data-toast]');\r\n\r\n      let activeChip = null;\r\n      let toastTimer = null;\r\n      let isSyncing = false;\r\n\r\n      function cleanCode(value) {\r\n        return String(value || '')\r\n          .trim()\r\n          .replace(\/[\u00d7\uff0a*]\/g, 'x')\r\n          .replace(\/\\s+\/g, ' ')\r\n          .toUpperCase();\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 parseSingleCode(value) {\r\n        const match = String(value || '').trim().match(\/^(\\d)(\\d{2})$\/);\r\n        if (!match) return null;\r\n        const inchesWhole = Number(match[1]);\r\n        const sixteenths = Number(match[2]);\r\n        if (!Number.isFinite(inchesWhole) || !Number.isFinite(sixteenths) || sixteenths > 15) return null;\r\n        const inches = inchesWhole + sixteenths \/ 16;\r\n        return {\r\n          code: match[1] + match[2],\r\n          inches: inches,\r\n          mm: inches * 25.4\r\n        };\r\n      }\r\n\r\n      function parseCodeInput(value) {\r\n        const cleaned = cleanCode(value);\r\n        if (!cleaned) return null;\r\n        const match = cleaned.match(\/\\d{3}\/);\r\n        if (!match) return null;\r\n        const diameter = parseSingleCode(match[0]);\r\n        if (!diameter) return null;\r\n        return { raw: cleaned, diameter: diameter };\r\n      }\r\n\r\n      function codeFromInches(inches) {\r\n        if (!Number.isFinite(inches) || inches < 0) return null;\r\n        let whole = Math.floor(inches);\r\n        let sixteenths = Math.round((inches - whole) * 16);\r\n        if (sixteenths >= 16) {\r\n          whole += 1;\r\n          sixteenths = 0;\r\n        }\r\n        if (whole < 0 || whole > 9) return null;\r\n        const code = String(whole) + String(sixteenths).padStart(2, '0');\r\n        return parseSingleCode(code);\r\n      }\r\n\r\n      function formatNumber(value, decimals) {\r\n        if (!Number.isFinite(value)) return '';\r\n        return value.toFixed(decimals).replace(\/\\.?0+$\/, '') || '0';\r\n      }\r\n\r\n      function getCommon(code) {\r\n        return commonReferences[code] || '\u2014';\r\n      }\r\n\r\n      function setFieldActive(name) {\r\n        root.querySelectorAll('[data-field-wrap]').forEach(function (field) {\r\n          field.classList.toggle('is-active', field.getAttribute('data-field-wrap') === name);\r\n        });\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      function setEmptyState(message) {\r\n        practicalMm.textContent = '\u2014';\r\n      }\r\n      function renderResult(parsed, sourceLabel) {\r\n        const code = parsed.diameter.code;\r\n        const common = getCommon(code);\r\n        practicalMm.textContent = common;\r\n      }\r\n\r\n      function syncFromCode() {\r\n        if (isSyncing) return;\r\n        isSyncing = true;\r\n        setFieldActive('code');\r\n        const parsed = parseCodeInput(codeInput.value);\r\n        if (!parsed) {\r\n          inchInput.value = '';\r\n          mmInput.value = '';\r\n          setEmptyState('Enter a valid 3-digit code such as <strong>202<\/strong>, <strong>211<\/strong>, or <strong>300<\/strong>.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        inchInput.value = formatNumber(parsed.diameter.inches, 4);\r\n        mmInput.value = formatNumber(parsed.diameter.mm, 2);\r\n        renderResult(parsed, 'Code input');\r\n        isSyncing = false;\r\n      }\r\n\r\n      function syncFromInch() {\r\n        if (isSyncing) return;\r\n        isSyncing = true;\r\n        setFieldActive('inch');\r\n        const inches = parseUserNumber(inchInput.value);\r\n        if (!Number.isFinite(inches)) {\r\n          codeInput.value = '';\r\n          mmInput.value = '';\r\n          setEmptyState('Enter a decimal inch value such as <strong>2.125<\/strong> or <strong>3.0625<\/strong>.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        const parsedCode = codeFromInches(inches);\r\n        if (!parsedCode) {\r\n          codeInput.value = '';\r\n          mmInput.value = formatNumber(inches * 25.4, 2);\r\n          setEmptyState('The inch value is outside the supported 3-digit code range.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        codeInput.value = parsedCode.code;\r\n        mmInput.value = formatNumber(inches * 25.4, 2);\r\n        renderResult({ raw: parsedCode.code, diameter: parsedCode }, 'Inch input');\r\n        isSyncing = false;\r\n      }\r\n\r\n      function syncFromMm() {\r\n        if (isSyncing) return;\r\n        isSyncing = true;\r\n        setFieldActive('mm');\r\n        const mm = parseUserNumber(mmInput.value);\r\n        if (!Number.isFinite(mm)) {\r\n          codeInput.value = '';\r\n          inchInput.value = '';\r\n          setEmptyState('Enter a millimeter value such as <strong>52<\/strong>, <strong>65<\/strong>, or <strong>77.8<\/strong>.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        const inches = mm \/ 25.4;\r\n        const parsedCode = codeFromInches(inches);\r\n        if (!parsedCode) {\r\n          codeInput.value = '';\r\n          inchInput.value = formatNumber(inches, 4);\r\n          setEmptyState('The mm value is outside the supported 3-digit code range.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        codeInput.value = parsedCode.code;\r\n        inchInput.value = formatNumber(inches, 4);\r\n        renderResult({ raw: parsedCode.code, diameter: parsedCode }, 'mm input');\r\n        isSyncing = false;\r\n      }\r\n\r\n      function renderQuickValues() {\r\n        quickGrid.innerHTML = '';\r\n        quickItems.forEach(function (item) {\r\n          const parsed = parseCodeInput(item);\r\n          const code = parsed ? parsed.diameter.code : item;\r\n          const button = document.createElement('button');\r\n          button.type = 'button';\r\n          button.className = 'sp-mct-chip';\r\n          if (parsed) {\r\n            button.innerHTML = '<strong>' + item + '<\/strong><span>' + formatNumber(parsed.diameter.inches, 4) + ' in \u00b7 ' + formatNumber(parsed.diameter.mm, 2) + ' mm<\/span>';\r\n          } else {\r\n            button.innerHTML = '<strong>' + item + '<\/strong><span>' + getCommon(code) + '<\/span>';\r\n          }\r\n          button.addEventListener('click', function () {\r\n            codeInput.value = item;\r\n            setActiveChip(button);\r\n            syncFromCode();\r\n            const card = root.querySelector('.sp-mct-card');\r\n            if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n          });\r\n          quickGrid.appendChild(button);\r\n        });\r\n      }\r\n\r\n      function renderTable() {\r\n        chartBody.innerHTML = '';\r\n        tableCodes.forEach(function (code) {\r\n          const parsed = parseSingleCode(code);\r\n          if (!parsed) return;\r\n          const row = document.createElement('tr');\r\n          const common = getCommon(code);\r\n          row.innerHTML =\r\n            '<td><code>' + code + '<\/code><\/td>' +\r\n            '<td>' + formatNumber(parsed.inches, 4) + ' in<\/td>' +\r\n            '<td>' + formatNumber(parsed.mm, 2) + ' mm<\/td>' +\r\n            '<td><strong>' + common + '<\/strong><\/td>';\r\n          chartBody.appendChild(row);\r\n        });\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      async function copyResults() {\r\n        const parsed = parseCodeInput(codeInput.value);\r\n        const inchValue = parseUserNumber(inchInput.value);\r\n        const mmValue = parseUserNumber(mmInput.value);\r\n        if (!parsed || !Number.isFinite(inchValue) || !Number.isFinite(mmValue)) {\r\n          showToast('Nothing to copy');\r\n          return;\r\n        }\r\n        const code = parsed.diameter.code;\r\n        const lines = [\r\n          'Metal Can \/ Tin Code Values',\r\n          'Code: ' + codeInput.value,\r\n          'Inches: ' + formatNumber(inchValue, 4) + ' in',\r\n          'mm: ' + formatNumber(mmValue, 2) + ' mm',\r\n          'Common mm reference: ' + getCommon(code)\r\n        ];\r\n\r\n        try {\r\n          await navigator.clipboard.writeText(lines.join('\\n'));\r\n          showToast('Results copied');\r\n        } catch (error) {\r\n          showToast('Copy failed');\r\n        }\r\n      }\r\n\r\n      function resetTool() {\r\n        codeInput.value = '202';\r\n        const target = Array.from(quickGrid.querySelectorAll('.sp-mct-chip')).find(function (button) {\r\n          return button.querySelector('strong') && button.querySelector('strong').textContent === '202';\r\n        });\r\n        setActiveChip(target || null);\r\n        syncFromCode();\r\n      }\r\n\r\n      function clearTool() {\r\n        isSyncing = true;\r\n        codeInput.value = '';\r\n        inchInput.value = '';\r\n        mmInput.value = '';\r\n        isSyncing = false;\r\n        setActiveChip(null);\r\n        setFieldActive('');\r\n        setEmptyState();\r\n        codeInput.focus();\r\n      }\r\n\r\n      codeInput.addEventListener('input', function () {\r\n        setActiveChip(null);\r\n        syncFromCode();\r\n      });\r\n      inchInput.addEventListener('input', function () {\r\n        setActiveChip(null);\r\n        syncFromInch();\r\n      });\r\n      mmInput.addEventListener('input', function () {\r\n        setActiveChip(null);\r\n        syncFromMm();\r\n      });\r\n      root.querySelector('[data-copy-all]').addEventListener('click', copyResults);\r\n      root.querySelector('[data-reset]').addEventListener('click', resetTool);\r\n      root.querySelector('[data-clear]').addEventListener('click', clearTool);\r\n\r\n      renderQuickValues();\r\n      renderTable();\r\n      resetTool();\r\n    })();\r\n  <\/script>\r\n\r\n  <script type=\"application\/ld+json\">{\n    \"@context\": \"https:\\\/\\\/schema.org\",\n    \"@type\": \"WebApplication\",\n    \"name\": \"Metal Can and Tin Code Inch Millimeter Input Tool\",\n    \"applicationCategory\": \"CalculatorApplication\",\n    \"operatingSystem\": \"Any\",\n    \"description\": \"A metal container size code tool where code, decimal inch, and millimeter fields are all editable inputs.\",\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;outillage d&#039;emballage Shining Packaging Calculateur de diam\u00e8tre de bo\u00eete m\u00e9tallique Saisissez un code, une valeur d\u00e9cimale en pouces ou en millim\u00e8tres. Les champs Code, pouces et mm se mettent \u00e0 jour en temps r\u00e9el. Principe de calcul Code\u00a0: le premier chiffre repr\u00e9sente la valeur enti\u00e8re en pouces\u00a0; les deux derniers chiffres repr\u00e9sentent les seizi\u00e8mes de pouce. Pouces\u00a0: [\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-48633","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/pages\/48633","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=48633"}],"version-history":[{"count":0,"href":"https:\/\/www.cnshining.com\/fr\/wp-json\/wp\/v2\/pages\/48633\/revisions"}],"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=48633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}