/* Outil · Palette : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : pl- */

/* Mise en page : la structure commune .outil-colonnes (app/kit.css).
   Téléphone : la couleur, le sélecteur et la saisie, puis les codes et les palettes. Ordinateur : sélecteur à gauche, le reste à droite. */
.pl .outil-fixe { gap: var(--dans-groupe); }
@media (min-width: 960px) { .pl .outil-fixe { max-width: 440px; width: 100%; justify-self: center; } }

/* ---------- La couleur, en grand, avec son code ---------- */
.pl-apercu { height: 96px; border-radius: 16px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .1);
  font: 700 clamp(24px, 7vw, 32px)/1 var(--display); letter-spacing: -.02em; transition: color .3s var(--courbe); }
@media (min-width: 960px) { .pl-apercu { height: 120px; } }

/* ---------- Sélecteur : carré (saturation → droite, luminosité → haut) et barre de teinte ---------- */
/* La zone de toucher est un vrai rectangle (un arrondi empêcherait de toucher les coins, là où est la couleur pure) ;
   l'arrondi n'est que dans le dessin (::before) */
.pl-carre { --teinte: red; position: relative; height: clamp(180px, 34vh, 280px); touch-action: none; cursor: crosshair; outline: none; }
.pl-carre::before { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--teinte)); }
.pl-carre i { z-index: 1; }
.pl-teinte { position: relative; height: 28px; touch-action: none; cursor: ew-resize; outline: none; }   /* même principe : zone rectangulaire */
.pl-teinte::before { content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(to right, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%); }
.pl-teinte i { z-index: 1; }
/* Poignées : un rond blanc cerclé de noir, lisible sur toutes les couleurs ; un peu plus grand pendant qu'on glisse */
.pl-carre i, .pl-teinte i { position: absolute; width: 24px; height: 24px; border-radius: 50%; translate: -50% -50%; pointer-events: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .35); transition: scale .2s var(--courbe); }
.pl-teinte i { top: 50%; }
.pl-carre.actif i, .pl-teinte.actif i { scale: 1.2; }
.pl-teinte:focus-visible::before, .pl-carre:focus-visible::before { outline: 2px solid var(--orange); outline-offset: 3px; }

.pl-saisie { font-family: var(--mono); font-size: 14px; letter-spacing: .02em; }
/* Code à gauche, import d'image à droite, sur une ligne et à la même hauteur */
.pl-entrees { display: flex; gap: 8px; }
.pl-entrees .saisie { flex: 1; min-width: 0; }
.pl .erreur { margin-top: -6px; }

/* ---------- Codes : les lignes de liste du kit (.rangee) ; le nom prend une largeur fixe pour aligner les valeurs ---------- */
.pl-codes { display: flex; flex-direction: column; }
.pl-code { align-items: center; }
.pl-code .nom { flex: none; width: 64px; }
.pl-code .val { margin-left: 0; flex: 1; min-width: 0; color: var(--papier); overflow-wrap: anywhere; white-space: normal; }
.pl-code .note { display: grid; justify-items: end; }
.pl-code svg { width: 15px; height: 15px; fill: none; stroke: var(--texte2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-code:hover svg { stroke: var(--peche); }
.pl-note { margin: var(--libelle) 0 0; font-size: 12px; line-height: 1.5; color: var(--texte2); }

/* ---------- Cases de couleur (harmonie, nuances) : le code écrit dessus, un toucher prend la couleur ---------- */
.pl-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 6px; margin-top: var(--dans-groupe); }
.pl-case { position: relative; height: 72px; border: 0; border-radius: 12px; background: var(--c); padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .1); display: flex; align-items: flex-end; justify-content: center; }
.pl-case span { margin-bottom: 7px; padding: 2px 5px; border-radius: 6px; background: rgba(18, 16, 14, .72); color: var(--papier);
  font: 500 10px/1.3 var(--mono); letter-spacing: .02em; }
.pl-case.choisie { box-shadow: inset 0 0 0 2px var(--papier), inset 0 0 0 4px var(--noir); }
.pl-case:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Nuances : cases plus étroites, en échelle continue ; le code n'apparaît qu'au survol ou au focus (sinon illisible si étroit) */
.pl-echelle { gap: 3px; margin-top: var(--libelle); }
.pl-echelle .pl-case { height: 52px; border-radius: 8px; }
.pl-echelle .pl-case span { display: none; }
.pl-echelle .pl-case:hover span, .pl-echelle .pl-case:focus-visible span { display: block; position: absolute; bottom: 100%; margin-bottom: 4px; white-space: nowrap; }
.pl-sous { display: block; margin-top: var(--dans-groupe); }
.pl-sous:first-of-type { margin-top: 2px; }

/* ---------- 60-30-10 : une barre aux bonnes proportions ---------- */
.pl-regle { display: flex; height: 76px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .1); }
.pl-part { min-width: 0; border: 0; background: var(--c); color: var(--t); padding: 10px 12px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 2px; text-align: left; cursor: pointer; }
.pl-part b { font: 600 15px/1 var(--corps); }
.pl-part span { font: var(--repere); letter-spacing: .06em; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pl-part:last-child { padding-inline: 6px; }
.pl-part:last-child span { display: none; }                 /* l'accent (10 %) est trop étroit pour son mot */
.pl-copier-tout { margin-top: var(--dans-groupe); }

/* ---------- Contraste du texte : texte blanc et noir sur la couleur, avec le ratio et le niveau WCAG ---------- */
.pl-contrastes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-contraste { border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .1); }
.pl-contraste b { font: 700 28px/1 var(--display); letter-spacing: -.02em; }
.pl-contraste span { font: 500 13px/1.3 var(--corps); }
.pl-contraste i { font: var(--valeur); font-style: normal; letter-spacing: .04em; }

/* ---------- Depuis une image : vignette, nombre de couleurs, couleurs extraites (la plus présente d'abord) ---------- */
.pl-importer { flex: none; min-height: 46px; cursor: pointer; }             /* le bouton d'import de Mire, à la hauteur du champ */
.pl-importer:hover { translate: none; }
.pl-image { display: flex; flex-direction: column; gap: var(--dans-groupe); }
.pl-image[hidden] { display: none; }
.pl-image-tete { display: flex; align-items: center; gap: 14px; }
.pl-image-tete .groupe { padding-top: 0; }
.pl-vignette { flex: none; width: 76px; height: 76px; object-fit: cover; border-radius: 12px; }
.pl-extraites { --colonnes: 4; display: grid; grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr)); gap: 6px; }
.pl-extraites .pl-case { height: 64px; }
.pl-image > .pastille { align-self: flex-start; }
.pl-image > .pastille:hover { translate: none; }