/* La pipette (pipette.js) : bordures 1 px, pas d'ombre portée, rien qui change de taille au survol. Les
   repères sont assez grands pour le doigt. Jetons de l'atelier avec des valeurs de secours. */
.pipette { display: grid; gap: 10px; }
.pipette__carre { position: relative; height: 132px; border-radius: var(--r-controle, 6px); border: 1px solid var(--trait, #E4E0D8); cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--teinte, red)); }
.pipette__teinte { position: relative; height: 14px; border-radius: 999px; border: 1px solid var(--trait, #E4E0D8); cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); }
.pipette__repere { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none; }
.pipette__teinte .pipette__repere { top: 50%; }
.pipette__carre:focus-visible, .pipette__teinte:focus-visible { outline: 2px solid var(--orange, #C34111); outline-offset: 2px; }
.pipette__hex { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--trait, #E4E0D8); border-radius: var(--r-controle, 6px); background: var(--surface, #fff); }
.pipette__hex:focus-within { border-color: var(--texte, #17211E); }
.pipette__temoin { width: 18px; height: 18px; flex: none; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .15); }
.pipette__hex input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--texte, #17211E); text-transform: uppercase; }