.hexadecimal-code-tool{--hexadecimal-code-primary: var(--primary-dark,#123b69);--hexadecimal-code-action: var(--outil-action,#8a4f0f);--hexadecimal-code-action-dark: var(--outil-action-dark,#744006);--hexadecimal-code-border: var(--outil-bord,#e3cf75);--hexadecimal-code-surface: var(--outil-surface,#fff7d7);--hexadecimal-code-soft: color-mix(in srgb,var(--hexadecimal-code-surface) 68%,#fff);color: var(--hexadecimal-code-primary)}.hexadecimal-code-tool *{box-sizing: border-box}.hexadecimal-code-intro{margin: 0 0 1rem;color: var(--hexadecimal-code-primary);font-size: 1rem;line-height: 1.55}.hexadecimal-code-title{margin: 0;color: var(--hexadecimal-code-action-dark);font-size: 1.06rem;font-weight: 900;line-height: 1.2}.hexadecimal-code-settings{border: 1px solid var(--hexadecimal-code-border);border-radius: 10px;background: #fff;padding: 1rem}.hexadecimal-code-settings-title{margin-bottom: 0.85rem;text-align: center}.hexadecimal-code-settings-grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 0.85rem}.hexadecimal-code-setting{min-width: 0;border: 1px solid var(--hexadecimal-code-border);border-radius: 10px;background: var(--hexadecimal-code-surface);padding: 0.75rem}.hexadecimal-code-label{margin: 0 0 0.5rem;color: var(--hexadecimal-code-action-dark);font-weight: 850;line-height: 1.2;text-align: center}.hexadecimal-code-selector{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 0;border: 1px solid var(--hexadecimal-code-border);border-radius: 10px;background: #fff;padding: 0.25rem}.hexadecimal-code-selector-button{min-height: 2.55rem;border: 0;border-radius: 8px;background: transparent;color: var(--hexadecimal-code-primary);cursor: pointer;font: inherit;font-size: 0.95rem;font-weight: 850;line-height: 1.15;padding: 0.45rem 0.7rem;transition: background-color 0.16s ease,color 0.16s ease,transform 0.12s ease}.hexadecimal-code-selector-button:hover,.hexadecimal-code-selector-button:focus-visible{background: color-mix(in srgb,var(--hexadecimal-code-border) 28%,#fff);outline: 0}.hexadecimal-code-selector-button:active{transform: translateY(1px) scale(0.99)}.hexadecimal-code-selector-button.is-active{background: var(--hexadecimal-code-action);color: #fff}.hexadecimal-code-grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 1rem;margin-top: 1rem}.hexadecimal-code-editor,.hexadecimal-code-result-card{min-width: 0;border: 1px solid var(--hexadecimal-code-border);border-radius: 10px;background: #fff;display: grid;grid-template-rows: auto minmax(14rem,1fr) auto;overflow: hidden}.hexadecimal-code-editor-top,.hexadecimal-code-editor-bottom,.hexadecimal-code-result-head,.hexadecimal-code-result-bottom{background: var(--hexadecimal-code-surface);padding: 0.55rem}.hexadecimal-code-editor-top,.hexadecimal-code-editor-bottom{display: flex;flex-wrap: wrap;gap: 0.55rem;align-items: center;justify-content: space-between}.hexadecimal-code-result-bottom{display: flex;flex-wrap: nowrap;gap: 0.55rem;align-items: flex-start;justify-content: space-between}.hexadecimal-code-editor-top,.hexadecimal-code-result-head{border-bottom: 1px solid var(--hexadecimal-code-border)}.hexadecimal-code-result-head{display: flex;align-items: center;justify-content: flex-start}.hexadecimal-code-editor-bottom,.hexadecimal-code-result-bottom{border-top: 1px solid var(--hexadecimal-code-border)}.hexadecimal-code-textarea{width: 100%;min-width: 0;min-height: 14rem;border: 0;border-radius: 0;background: #fff;color: var(--hexadecimal-code-primary);font: 500 1rem/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;padding: 0.8rem;resize: none}.hexadecimal-code-textarea:focus{outline: 3px solid color-mix(in srgb,var(--hexadecimal-code-border) 70%,#fff);outline-offset: -3px}.hexadecimal-code-result-textarea{background: color-mix(in srgb,var(--hexadecimal-code-surface) 88%,#fff);color: color-mix(in srgb,var(--hexadecimal-code-primary) 86%,#777);cursor: default}.hexadecimal-code-action-row{display: flex;flex-wrap: wrap;gap: 0.35rem;align-items: center;justify-content: flex-end}.hexadecimal-code-result-bottom .hexadecimal-code-action-row{flex: 0 0 auto;flex-wrap: nowrap;align-self: flex-start;justify-content: flex-end}.hexadecimal-code-result-bottom .hexadecimal-code-status{flex: 1 1 auto;align-self: flex-start}.hexadecimal-code-action{min-height: 2.35rem;border: 1px solid var(--hexadecimal-code-border);border-radius: 8px;background: #fff;color: var(--hexadecimal-code-action-dark);cursor: pointer;display: inline-flex;align-items: center;justify-content: center;gap: 0.35rem;font: inherit;font-size: 0.9rem;font-weight: 850;line-height: 1.15;padding: 0.38rem 0.52rem;text-decoration: none;transition: background-color 0.16s ease,border-color 0.16s ease,color 0.16s ease,transform 0.12s ease}.hexadecimal-code-action:hover,.hexadecimal-code-action:focus-visible{border-color: var(--hexadecimal-code-action);background: color-mix(in srgb,var(--hexadecimal-code-border) 22%,#fff);outline: 0}.hexadecimal-code-action:active{transform: translateY(1px) scale(0.985)}.hexadecimal-code-action:disabled{border-color: color-mix(in srgb,var(--hexadecimal-code-border) 52%,#fff);background: color-mix(in srgb,var(--hexadecimal-code-surface) 35%,#fff);color: color-mix(in srgb,var(--hexadecimal-code-action-dark) 45%,#fff);cursor: default;transform: none}.hexadecimal-code-action-primary:not(:disabled){border-color: var(--hexadecimal-code-action);background: var(--hexadecimal-code-action);color: #fff}.hexadecimal-code-action-icon{width: 1.05rem;height: 1.05rem;flex: 0 0 auto;fill: currentColor}.hexadecimal-code-status{min-width: 0;margin: 0;color: var(--hexadecimal-code-primary);font-size: 0.92rem;font-weight: 800;line-height: 1.25;overflow-wrap: anywhere}.hexadecimal-code-status.is-error{color: #b91c1c}.hexadecimal-code-status.is-warning{color: #9a5a00}.hexadecimal-code-copy-proxy{position: fixed;top: -9999px;left: -9999px;width: 1px;height: 1px;opacity: 0}.hexadecimal-code-info-grid{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 0.85rem;margin: 1rem 0}.hexadecimal-code-info-card,.hexadecimal-code-info-note{border: 1px solid var(--hexadecimal-code-border,var(--outil-bord));border-radius: 10px;background: var(--hexadecimal-code-surface,var(--outil-surface));padding: 0.85rem}.hexadecimal-code-info-card h3,.hexadecimal-code-info-note h3{margin: 0 0 0.45rem;color: var(--hexadecimal-code-action-dark,#744006);font-size: 1rem;font-weight: 900}.hexadecimal-code-info-card p,.hexadecimal-code-info-note p{margin: 0}.hexadecimal-code-info-code{border-radius: 6px;background: color-mix(in srgb,var(--hexadecimal-code-surface,#fff7d7) 70%,#fff);color: var(--hexadecimal-code-primary,#123b69);font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-weight: 850;padding: 0.05rem 0.28rem}.hexadecimal-code-reference-table{width: 100%;border-collapse: collapse;margin: 1rem 0;border: 1px solid var(--hexadecimal-code-border,var(--outil-bord))}.hexadecimal-code-reference-table th,.hexadecimal-code-reference-table td{border: 1px solid var(--hexadecimal-code-border,var(--outil-bord));padding: 0.6rem;text-align: left;vertical-align: top}.hexadecimal-code-reference-table th{background: var(--hexadecimal-code-surface,var(--outil-surface));color: var(--hexadecimal-code-action-dark,#744006);font-weight: 900}.hexadecimal-code-reference-table td:first-child{color: var(--hexadecimal-code-action-dark,#744006);font-weight: 900}.hexadecimal-code-info-note a,.hexadecimal-code-info-card a{color: var(--hexadecimal-code-primary,#123b69);font-weight: 900;text-decoration: underline;cursor: pointer}@media (max-width: 860px){.hexadecimal-code-settings-grid,.hexadecimal-code-grid,.hexadecimal-code-info-grid{grid-template-columns: 1fr}}@media (max-width: 520px){.hexadecimal-code-settings,.hexadecimal-code-setting{padding: 0.65rem}.hexadecimal-code-selector-button{font-size: 0.88rem;padding: 0.38rem 0.45rem}.hexadecimal-code-editor-top,.hexadecimal-code-editor-bottom,.hexadecimal-code-result-bottom{align-items: stretch}.hexadecimal-code-result-bottom{flex-wrap: wrap}.hexadecimal-code-action-row{width: 100%;justify-content: stretch}.hexadecimal-code-action{flex: 1 1 auto}}