/* Contraste d'une palette (outils/lib/pd/contraste-palette.php) */
.pdx-palette textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.85em 1em;
	border: 1px solid transparent;
	border-radius: 0.7em;
	background: var(--brume);
	color: var(--encre);
	font: 500 1em/1.5 var(--mono);
	resize: vertical;
}
.pdx-palette textarea:focus { outline: 0; border-color: var(--encre); background: #fff; }
.pdx-palette .outil-aide code { font-family: var(--mono); font-size: 0.92em; }
.pdx-palette-puces { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.9em; }
.pdx-puce { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.25em 0.3em 0.25em 0.35em; border: 1px solid var(--trait); border-radius: 3em; background: #fff; }
.pdx-puce code { font: 400 0.85em/1 var(--mono); }
.pdx-puce button { width: 1.6em; height: 1.6em; border: 0; border-radius: 50%; background: var(--grisé); color: var(--gris); font-size: 1em; line-height: 1; cursor: pointer; }
.pdx-puce button:hover { background: var(--err-fond); color: var(--err); }
.pdx-pastille-coul { display: inline-block; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; border: 1px solid var(--trait); vertical-align: middle; }
.pdx-palette-ajout { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; margin-top: 0.9em; font-size: 0.92em; }
.pdx-palette-ajout input[type="color"] { width: 2.6em; height: 2.2em; padding: 0.15em; border: 1px solid var(--trait); border-radius: 0.5em; background: #fff; cursor: pointer; }
.pdx-palette-erreur { margin: 0.7em 0 0; color: var(--err); font-size: 0.9em; font-weight: 600; }

.pdx-palette-res .res-bloc { margin-top: 2.2em; }
.pdx-palette-filtre { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; margin-bottom: 1em; }
.pdx-palette-filtre label { font-weight: 700; }
.pdx-palette-filtre select { max-width: 100%; padding: 0.6em 0.8em; border: 1px solid var(--trait); border-radius: 0.6em; background: #fff; color: var(--encre); font: 500 0.95em/1.3 var(--texte); }

/* Grille : défile dans sa boîte au besoin, jamais la page */
.pdx-palette-defile { border: 1px solid var(--trait); border-radius: 0.9em; background: #fff; }
.pdx-grille { border-collapse: separate; border-spacing: 0; font-size: 0.85em; }
.pdx-grille th, .pdx-grille td { padding: 0.45em; border-bottom: 1px solid var(--trait); text-align: center; vertical-align: top; }
.pdx-grille thead th { font-weight: 400; white-space: nowrap; }
.pdx-grille th code { display: block; margin-top: 0.2em; font: 400 0.9em/1 var(--mono); color: var(--gris); }
.pdx-grille tbody th { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; white-space: nowrap; }
.pdx-grille tbody th code { display: inline; margin: 0 0 0 0.3em; }
.pdx-grille .pdx-coin { text-align: left; color: var(--gris); font-size: 0.85em; }
.pdx-grille td { min-width: 4.6em; }
.pdx-grille td button {
	display: block;
	width: 100%;
	min-height: 2.6em;
	border: 1px solid var(--trait);
	border-radius: 0.5em;
	font: 700 1.25em/1 var(--titre);
	cursor: pointer;
}
.pdx-grille td.pdx-choisie button { outline: 0.18em solid var(--orange); outline-offset: 0.1em; }
.pdx-ratio-case { display: block; margin: 0.35em 0 0.2em; font: 500 0.95em/1 var(--mono); }
.pdx-grille .pastille { font-size: 0.72em; padding: 0.15em 0.5em; }
.pdx-grille td.pdx-meme { background: repeating-linear-gradient(45deg, transparent, transparent 0.4em, var(--grisé) 0.4em, var(--grisé) 0.8em); }
.pdx-grille td.pdx-cache > * { opacity: 0.12; }
.pdx-grille td.pdx-cache button { cursor: default; }
.pdx-palette-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.5em; margin: 0.9em 0 0; font-size: 0.85em; color: var(--gris); }

/* Paire choisie */
.pdx-paire { display: grid; gap: 1em; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) { .pdx-paire { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.pdx-paire-demo { padding: 1.4em 1.5em; border-radius: 1em; border: 1px solid var(--trait); }
.pdx-paire-demo p { margin: 0 0 0.7em; }
.pdx-paire-titre { font: 700 1.6em/1.15 var(--titre); }
.pdx-paire-petit { font-size: 0.8em; }
.pdx-paire-bouton { display: inline-block; padding: 0.6em 1.3em; border-radius: 3em; background: var(--pdx-b); color: var(--pdx-bt); font-weight: 700; }
.pdx-paire-info p { margin: 0 0 0.6em; }
.pdx-paire-info a { color: var(--orange-texte); font-weight: 600; text-underline-offset: 0.2em; }
.pdx-paire-ratio { display: flex; align-items: center; gap: 0.5em; font: 700 2.2em/1 var(--titre); }
.pdx-paire-verdicts { margin: 0 0 0.8em; padding: 0; list-style: none; }
.pdx-paire-verdicts li { display: flex; align-items: center; gap: 0.5em; padding: 0.3em 0; border-bottom: 1px solid var(--trait); }
.pdx-paire-verdicts .mono { margin-left: auto; color: var(--gris); }

/* Combinaisons utilisables */
.pdx-sugg-grille { display: grid; gap: 1.4em; grid-template-columns: repeat(auto-fit, minmax(17em, 1fr)); }
.pdx-sugg h4 { margin: 0 0 0.6em; font-family: var(--titre); font-size: 1.1em; }
.pdx-sugg h4 .mono { color: var(--gris); font-weight: 400; }
.pdx-sugg ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.pdx-sugg li { display: flex; align-items: center; gap: 0.3em 0.7em; flex-wrap: wrap; padding: 0.5em 0; border-bottom: 1px solid var(--trait); font-size: 0.9em; }
.pdx-sugg li > span:nth-child(2) { flex: 1 1 10em; min-width: 0; }
.pdx-sugg code { font: 400 0.92em/1.3 var(--mono); }
.pdx-sugg small { color: var(--gris); }
.pdx-echantillon { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.2em; border-radius: 0.4em; border: 1px solid var(--trait); font: 700 1em/1 var(--titre); }
.pdx-page-ech { flex: none; display: grid; place-items: center; width: 6.5em; height: 3em; border-radius: 0.5em; border: 1px solid var(--trait); }
.pdx-bouton-ech { padding: 0.35em 0.8em; border-radius: 3em; font-size: 0.85em; font-weight: 700; }
.pdx-sugg-vide { color: var(--gris); font-size: 0.92em; }
.pdx-palette-partage { margin-top: 1.6em; }