.contrast-checker{--contrast-blue: var(--outil-action,#2554d8);--contrast-blue-hover: var(--outil-action-hover,#1d4ed8);--contrast-dark: var(--primary-dark,#123d6d);--contrast-text: var(--outil-texte,#12345f);--contrast-border: var(--outil-bord,#b9cafa);--contrast-soft: var(--outil-surface,#eef5ff);--contrast-muted: #64748b;--contrast-ok: #15803d;--contrast-fail: #b91c1c;display: grid;gap: 1rem;padding: 1rem;color: var(--contrast-text);box-sizing: border-box}.contrast-checker *,.contrast-checker *::before,.contrast-checker *::after{box-sizing: border-box}.contrast-checker h2,.contrast-checker h3,.contrast-checker p{margin: 0}.contrast-checker-intro{color: var(--contrast-dark);font-size: 1.02rem;line-height: 1.52}.contrast-checker-card{min-width: 0;display: grid;gap: 1rem;border: 2px solid var(--contrast-border);border-radius: 16px;background: #fff;padding: 1rem}.contrast-checker-head{display: grid;grid-template-columns: auto minmax(14rem,1fr) auto;align-items: center;gap: 1rem}.contrast-checker-head h2,.contrast-checker-results h2,.contrast-checker-live h2{color: var(--contrast-dark);font-size: clamp(1.18rem,1.7vw,1.42rem);font-weight: 950;line-height: 1.12}.contrast-checker-mini-preview{display: grid;grid-template-columns: 11.8rem;align-items: center;justify-content: end;color: var(--contrast-muted);font-size: 0.86rem;font-weight: 900}.contrast-checker-format{justify-self: center;display: inline-grid;grid-template-columns: repeat(4,minmax(3.4rem,1fr));overflow: hidden;border: 2px solid var(--contrast-border);border-radius: 14px;background: #fff}.contrast-checker-format label{min-width: 0;display: block}.contrast-checker-format input{position: absolute;opacity: 0;pointer-events: none}.contrast-checker-format span{display: flex;min-height: 2.45rem;align-items: center;justify-content: center;border-left: 1px solid color-mix(in srgb,var(--contrast-border) 62%,#fff);color: var(--contrast-blue);cursor: pointer;font-size: 0.82rem;font-weight: 950;line-height: 1;padding: 0 0.65rem;transition: background-color 0.14s ease,color 0.14s ease}.contrast-checker-format label:first-child span{border-left: 0}.contrast-checker-format input:checked + span{background: var(--contrast-blue);color: #fff}.contrast-checker-format span:hover,.contrast-checker-format input:focus-visible + span{background: #f5f8ff;color: var(--contrast-blue-hover)}.contrast-checker-format input:checked + span:hover,.contrast-checker-format input:checked:focus-visible + span{background: var(--contrast-blue-hover);color: #fff}.contrast-checker-mini-preview-svg,.contrast-checker-color-preview,.contrast-checker-channel-preview,.contrast-checker-live-svg{display: block;width: 100%;height: auto}.contrast-checker-mini-preview-svg{border: 2px solid var(--contrast-border);border-radius: 14px}.contrast-checker-mini-preview text{font: 900 18px Arial,sans-serif}.contrast-checker-editors{display: grid;grid-template-columns: minmax(0,1fr) 3.5rem minmax(0,1fr);gap: 0.85rem;align-items: center}.contrast-checker-color-panel{min-width: 0;display: grid;gap: 0.72rem;border: 2px solid color-mix(in srgb,var(--contrast-border) 70%,#fff);border-radius: 14px;background: var(--contrast-soft);padding: 0.85rem}.contrast-checker-color-panel h3{color: var(--contrast-dark);font-size: 1.1rem;font-weight: 950;line-height: 1.15;text-align: center}.contrast-checker-value-row{display: grid;grid-template-columns: 3rem minmax(0,1fr) 3rem minmax(7rem,0.48fr);gap: 0.45rem;align-items: stretch}.contrast-checker-value-row input,.contrast-checker-channel input{min-width: 0;width: 100%;border: 2px solid #c7d5e8;border-radius: 12px;background: #fff;color: var(--contrast-dark);font: inherit;font-weight: 900}.contrast-checker-value-row input{min-height: 3rem;padding: 0 0.78rem}.contrast-checker-icon-button,.contrast-checker-swap,.contrast-checker-stepper button{display: inline-flex;align-items: center;justify-content: center;border: 2px solid #c7d5e8;border-radius: 12px;background: #fff;color: var(--contrast-blue);cursor: pointer;transition: background-color 0.14s ease,color 0.14s ease,border-color 0.14s ease,box-shadow 0.14s ease,transform 0.14s ease}.contrast-checker-icon-button{min-height: 3rem}.contrast-checker-color-pick{position: relative;min-width: 0;display: block;min-height: 3rem;overflow: hidden;border: 2px solid #c9d8ee;border-radius: 14px;background: #fff;cursor: pointer}.contrast-checker-color-pick:hover,.contrast-checker-color-pick:focus-within{border-color: var(--contrast-blue);box-shadow: 0 8px 16px rgba(37,84,216,0.12)}.contrast-checker-color-pick input{position: absolute;inset: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer}.contrast-checker-color-preview{height: 100%}.contrast-checker-visually-hidden{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap}.contrast-checker-action-icon{display: block;width: 1.15rem;height: 1.15rem}.contrast-checker-swap{width: 3.5rem;min-height: 3.5rem;border-color: var(--contrast-blue);justify-self: center}.contrast-checker-swap-icon{display: block;width: 1.45rem;height: 1.45rem}.contrast-checker-icon-button:hover,.contrast-checker-icon-button:focus-visible,.contrast-checker-swap:hover,.contrast-checker-swap:focus-visible,.contrast-checker-stepper button:hover,.contrast-checker-stepper button:focus-visible{border-color: var(--contrast-blue);background: #f5f8ff;color: var(--contrast-blue-hover);box-shadow: 0 8px 16px rgba(37,84,216,0.12);outline: 0;transform: translateY(-1px)}.contrast-checker-icon-button:active,.contrast-checker-swap:active,.contrast-checker-stepper button:active{box-shadow: none;transform: translateY(1px) scale(0.985)}.contrast-checker-channel-grid{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 0.5rem}.contrast-checker-channel{min-width: 0;display: grid;gap: 0.42rem}.contrast-checker-channel label{font-size: 0.82rem;font-weight: 950;line-height: 1.1;text-align: center}.contrast-checker-channel--red label{color: #b91c1c}.contrast-checker-channel--green label{color: #15803d}.contrast-checker-channel--blue label{color: #1d4ed8}.contrast-checker-channel--alpha label{color: #6d28d9}.contrast-checker-channel-preview{border: 1px solid #c7d5e8;border-radius: 10px;background: #fff}.contrast-checker-channel-preview text{fill: var(--contrast-dark);font: 900 21px Arial,sans-serif}.contrast-checker-stepper{display: grid;grid-template-rows: 2.35rem minmax(2.35rem,auto) 2.35rem;gap: 0.34rem}.contrast-checker-stepper button:first-child{order: 3}.contrast-checker-stepper input{order: 2}.contrast-checker-stepper button:last-child{order: 1}.contrast-checker-stepper button{min-height: 2.35rem;border-width: 1px;border-radius: 10px;font: inherit;font-weight: 950;line-height: 1}.contrast-checker-channel input{min-height: 2.35rem;padding: 0 0.25rem;text-align: center}.contrast-checker-message{min-height: 1.2em;color: var(--contrast-fail);font-weight: 900;text-align: center}.contrast-checker-bottom{display: grid;grid-template-columns: minmax(18rem,0.82fr) minmax(0,1.18fr);gap: 0.85rem;align-items: stretch;border: 2px solid color-mix(in srgb,var(--contrast-border) 70%,#fff);border-radius: 14px;background: #fff;padding: 0.85rem}.contrast-checker-results,.contrast-checker-live{min-width: 0;display: grid;align-content: start;gap: 0.78rem;background: #fff}.contrast-checker-results h2,.contrast-checker-ratio{justify-self: center;text-align: center}.contrast-checker-ratio{display: inline-grid;gap: 0.2rem;place-items: center;border: 2px solid #c9d8ee;border-radius: 14px;background: linear-gradient(180deg,#f8fbff 0%,#e9f2ff 100%);padding: 0.62rem 1rem}.contrast-checker-ratio span{color: var(--contrast-muted);font-size: 0.78rem;font-weight: 900;line-height: 1}.contrast-checker-ratio output{color: var(--contrast-dark);font-size: clamp(1.8rem,3.2vw,2.35rem);font-weight: 950;line-height: 1}.contrast-checker-table{width: 100%;border-collapse: separate;border-spacing: 0;overflow: hidden;border: 1px solid color-mix(in srgb,var(--contrast-border) 76%,#fff);border-radius: 14px;background: #fff}.contrast-checker-table th,.contrast-checker-table td{border-bottom: 1px solid color-mix(in srgb,var(--contrast-border) 58%,#fff);padding: 0.56rem 0.62rem;vertical-align: middle}.contrast-checker-table tr:last-child th,.contrast-checker-table tr:last-child td{border-bottom: 0}.contrast-checker-table th{color: var(--contrast-dark);font-size: 0.84rem;font-weight: 900;line-height: 1.18;text-align: left}.contrast-checker-table td{color: var(--contrast-muted);font-size: 0.8rem;font-weight: 850;text-align: center;white-space: nowrap}.contrast-checker-table strong{display: inline-flex;min-width: 4.2rem;justify-content: center;border-radius: 999px;background: rgba(21,128,61,0.1);color: var(--contrast-ok);padding: 0.25rem 0.48rem;font-size: 0.78rem;font-weight: 950}.contrast-checker-table tr.is-fail strong{background: rgba(185,28,28,0.1);color: var(--contrast-fail)}.contrast-checker-live h2{text-align: center}.contrast-checker-live-svg{border: 2px solid color-mix(in srgb,var(--contrast-border) 68%,#fff);border-radius: 14px;background: #fff}.contrast-checker-svg-title,.contrast-checker-svg-large{font: 900 42px Arial,sans-serif}.contrast-checker-svg-body{font: 400 22px Arial,sans-serif}.contrast-checker-svg-button{font: 800 21px Arial,sans-serif}.contrast-checker-svg-small{font: 400 18px Arial,sans-serif}.contrast-checker-copy-proxy{position: fixed;left: -9999px;top: 0;width: 1px;height: 1px;opacity: 0}.contrast-checker-info-guide{display: grid;gap: 1rem}.contrast-checker-info-guide section,.contrast-checker-info-note{border: 1px solid rgba(148,163,184,0.32);border-radius: 18px;background: rgba(255,255,255,0.82);padding: 1rem;box-shadow: 0 12px 28px rgba(15,23,42,0.05)}.contrast-checker-info-guide h2,.contrast-checker-info-guide h3{margin: 0 0 0.65rem;color: var(--contrast-dark)}.contrast-checker-info-guide p{margin: 0;line-height: 1.68;color: #334155}.contrast-checker-info-guide p + p{margin-top: 0.75rem}.contrast-checker-info-note{border-color: rgba(37,99,235,0.24);background: rgba(37,99,235,0.06)}.contrast-checker-info-note a{color: var(--contrast-dark);font-weight: 850;text-decoration: underline;text-decoration-thickness: 0.08em;text-underline-offset: 0.16em}.contrast-checker-info-note a:hover{color: var(--accent-dark)}@media (max-width: 980px){.contrast-checker-bottom{grid-template-columns: 1fr}.contrast-checker-channel-grid{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (max-width: 820px){.contrast-checker-editors{grid-template-columns: 1fr}.contrast-checker-swap{transform: rotate(90deg)}.contrast-checker-swap:hover,.contrast-checker-swap:focus-visible{transform: rotate(90deg) translateX(-1px)}.contrast-checker-swap:active{transform: rotate(90deg) translateX(1px) scale(0.985)}}@media (max-width: 620px){.contrast-checker{padding: 0.85rem}.contrast-checker-card,.contrast-checker-results,.contrast-checker-live,.contrast-checker-color-panel{padding: 0.78rem;border-radius: 14px}.contrast-checker-head{align-items: stretch;grid-template-columns: 1fr;justify-items: stretch}.contrast-checker-format{width: 100%;grid-template-columns: repeat(4,minmax(0,1fr))}.contrast-checker-mini-preview{grid-template-columns: 1fr;justify-items: center}.contrast-checker-value-row{grid-template-columns: 3rem minmax(0,1fr) 3rem}.contrast-checker-color-pick{grid-column: 1 / -1}.contrast-checker-channel-grid{grid-template-columns: 1fr}.contrast-checker-table th,.contrast-checker-table td{padding: 0.5rem 0.42rem}}