/* Outil · Delta E, id deltae : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : de-
   À gauche : les deux couleurs côte à côte (un seul bloc, sans séparation : l'œil compare), le ΔE 2000 en grand et sa
   lecture, ΔE 94, ΔE 76, les deux Lab, l'échelle de lecture avec un curseur, l'info, les liens. À droite : les deux
   couleurs (sélecteur et HEX), Inverser. */
.de .outil-fixe { align-items: stretch; }
.de-paire { display: grid; grid-template-columns: 1fr 1fr; height: 150px; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.de-paire i { display: block; transition: background .2s; }
.de-carte { display: flex; flex-direction: column; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 6px 18px 4px; }
.de-grand { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 70px; }
.de-grand span { font: var(--repere); letter-spacing: .1em; color: var(--texte2); }
.de-grand b { font: 700 38px/1 var(--display); letter-spacing: -.03em; color: var(--peche); font-variant-numeric: tabular-nums; }
.de-niveau { margin: 0 0 6px; height: 1.4em; font: 500 14px/1.4 var(--corps); color: var(--papier); border-bottom: 1px solid var(--filet-doux); padding-bottom: 10px; box-sizing: content-box; }
.de-rangee { cursor: default; height: 42px; align-items: center; }
.de-rangee:last-child { border-bottom: 0; }
.de-rangee:hover .nom { color: var(--papier); }
.de-rangee .val { font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.de-echelle { position: relative; display: flex; height: 26px; border-radius: 8px; overflow: hidden; font: 500 10px/26px var(--mono); color: var(--texte2); }
.de-echelle span { padding-left: 6px; box-shadow: inset 1px 0 0 var(--filet); }
.de-echelle span:nth-child(1) { background: rgba(242, 240, 235, .04); } .de-echelle span:nth-child(2) { background: rgba(242, 240, 235, .07); }
.de-echelle span:nth-child(3) { background: rgba(255, 140, 90, .1); } .de-echelle span:nth-child(4) { background: rgba(255, 140, 90, .18); } .de-echelle span:nth-child(5) { background: rgba(255, 140, 90, .28); }
.de-echelle i { position: absolute; top: 2px; bottom: 2px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--papier); transition: left .3s var(--courbe); }
.de-info { flex: none; height: 3lh; margin: 0; overflow: hidden; }
.de-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.de-couleur { display: flex; flex-direction: column; gap: var(--libelle); }
.de-couleur .groupe { padding: 0; }
.de-choix { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; }
.de-pastille { position: relative; width: 48px; height: 48px; border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--filet); }
.de-pastille input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.de-pastille i { position: absolute; inset: 4px; border-radius: 10px; pointer-events: none; }
.de-hex { font: 600 16px/1.2 var(--mono); letter-spacing: .04em; }
.de-inverser { align-self: flex-start; cursor: pointer; }
.de-inverser:hover { translate: none; }
.de-erreur { height: 1lh; }
@media (max-width: 959px) { .de .outil-defile > * { order: -1; } .de-paire { height: 110px; } }