/* Outil · Contraste (Contrast checker), id contraste : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : cs-
   À gauche : l'aperçu (grand texte, texte normal, un bouton et deux icônes, dans les deux couleurs), puis le rapport en
   grand et les cinq seuils WCAG. À droite : la couleur du texte et celle du fond (sélecteur et HEX), Inverser, et la
   couleur de texte la plus proche qui réussit AA puis AAA. */
.cs .outil-fixe { align-items: stretch; }
.cs-apercu { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); transition: background .3s, color .3s; }
.cs-grand { margin: 0; font: 700 26px/1.2 var(--display); letter-spacing: -.02em; }
.cs-normal { margin: 0; height: 4.5em; overflow: hidden; font: 400 15px/1.5 var(--corps); }
.cs-ui { display: flex; align-items: center; gap: 14px; }
.cs-bouton { display: inline-grid; place-items: center; height: 34px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font: 600 13px/1 var(--corps); }
.cs-ui svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-carte { display: flex; flex-direction: column; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 6px 18px 4px; }
.cs-grand-ligne { display: flex; justify-content: space-between; align-items: center; height: 70px; border-bottom: 1px solid var(--filet-doux); }
.cs-grand-ligne span { font: var(--repere); letter-spacing: .1em; color: var(--texte2); }
.cs-grand-ligne b { font: 700 34px/1 var(--display); letter-spacing: -.03em; color: var(--peche); font-variant-numeric: tabular-nums; }
.cs-rangee { cursor: default; height: 42px; align-items: center; }
.cs-rangee:last-child { border-bottom: 0; }
.cs-rangee:hover .nom { color: var(--papier); }
.cs-rangee .nom i { font: 500 11px/1 var(--mono); font-style: normal; color: var(--texte2); margin-left: 6px; }
.cs-rangee .val[data-ok="1"] { color: var(--papier); }
.cs-rangee .val[data-ok="0"] { color: var(--peche); }

.cs-couleur { display: flex; flex-direction: column; gap: var(--libelle); }
.cs-couleur .groupe { padding: 0; }
.cs-choix { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; }
.cs-pastille { position: relative; width: 48px; height: 48px; border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--filet); }
.cs-pastille input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.cs-pastille i { position: absolute; inset: 4px; border-radius: 10px; pointer-events: none; }
.cs-hex { font: 600 16px/1.2 var(--mono); letter-spacing: .04em; text-transform: none; }
.cs-inverser { align-self: flex-start; cursor: pointer; }
.cs-inverser:hover { translate: none; }
.cs-erreur { height: 1lh; }
.cs-proche { display: flex; flex-direction: column; gap: var(--libelle); }
.cs-proche .groupe { padding: 0; }
.cs-proposition { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 44px; }
.cs-proposition i { width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--filet); }
.cs-proposition b { font: 600 14px/1.2 var(--mono); color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-proposition .pastille { cursor: pointer; }
.cs-proposition .pastille:hover { translate: none; }
.cs-proposition .pastille:disabled { opacity: .3; cursor: default; }
@media (max-width: 959px) { .cs .outil-defile > .cs-couleur, .cs .outil-defile > .cs-inverser, .cs .outil-defile > .cs-erreur { order: -1; } }