/* Contraste des couleurs : deux champs, ratio, verdicts, aperçu, suggestion */
.pdx-coul-grille { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.8em; align-items: end; }
.pdx-coul { min-width: 0; }
.pdx-coul-rangee input[type="text"] { min-width: 0; }
.pdx-coul .outil-etiquette { margin-bottom: 0.4em; }
.pdx-coul-rangee { display: flex; gap: 0.5em; }
.pdx-coul-rangee input[type="color"] {
	flex: none;
	width: 3.2em;
	height: 3.2em;
	padding: 0.2em;
	border: 1px solid var(--trait);
	border-radius: 0.7em;
	background: #fff;
	cursor: pointer;
}
.pdx-coul-rangee input[type="text"] {
	flex: 1;
	min-width: 0;
	padding: 0.85em 1em;
	border: 1px solid transparent;
	border-radius: 0.7em;
	background: var(--brume);
	color: var(--encre);
	font: 500 1.05em/1.3 var(--mono);
}
.pdx-coul-rangee input[type="text"]:focus { outline: 0; border-color: var(--encre); background: #fff; }
.pdx-coul-erreur { margin: 0.4em 0 0; color: var(--err); font-size: 0.85em; font-weight: 600; }
.pdx-inverser {
	width: 2.6em;
	height: 2.6em;
	margin-bottom: 0.3em;
	border: 1px solid var(--trait);
	border-radius: 50%;
	background: #fff;
	color: var(--encre);
	font-size: 1.1em;
	cursor: pointer;
}
.pdx-inverser:hover { border-color: var(--encre); }
.pdx-contraste .outil-aide code { font-family: var(--mono); font-size: 0.92em; }

.pdx-contraste-res { display: grid; gap: 1em; margin-top: 1.6em; grid-template-columns: 1fr; }
.pdx-ratio { padding: 1.3em 1.4em; border-radius: 1.1em; background: var(--brume); }
.pdx-ratio .mono { margin: 0; color: var(--gris); }
.pdx-ratio-chiffre { margin: 0.1em 0 0; font: 700 3.2em/1 var(--titre); letter-spacing: -0.02em; }
.pdx-ratio-chiffre.niv-ok { color: var(--ok); }
.pdx-ratio-chiffre.niv-attn { color: var(--attn); }
.pdx-ratio-chiffre.niv-err { color: var(--err); }
.pdx-ratio-mot { margin: 0.4em 0 0; font-weight: 600; }

.pdx-verdicts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.pdx-verdicts li { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 0.8em; align-items: center; padding: 0.6em 0; border-bottom: 1px solid var(--trait); }
.pdx-verdicts .mono { color: var(--gris); }

.pdx-apercu { padding: 1.4em 1.5em; border-radius: 1em; border: 1px solid var(--trait); }
.pdx-apercu p { margin: 0 0 0.7em; }
.pdx-apercu a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.pdx-apercu-titre { font: 700 1.6em/1.15 var(--titre); }
.pdx-apercu-petit { font-size: 0.8em; }
.pdx-apercu-bouton { display: inline-block; padding: 0.6em 1.3em; border-radius: 3em; background: var(--pdx-bouton); color: var(--pdx-bouton-texte); font-weight: 700; }

.pdx-suggestion { padding: 1.1em 1.2em; border-radius: 0.9em; border: 1px dashed var(--orange-texte); background: #fff; }
.pdx-suggestion .suggestion-titre { margin: 0 0 0.6em; font-weight: 700; color: var(--orange-texte); }
.pdx-suggestion .suggestion-note { margin: 0.6em 0 0; font-size: 0.9em; color: var(--gris); }
.pdx-sugg-rangee { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; padding: 0.35em 0; }
.pdx-sugg-rangee code { font-family: var(--mono); }
.pdx-pastille-coul { width: 1.6em; height: 1.6em; border-radius: 0.4em; border: 1px solid var(--trait); }

@media (min-width: 48em) {
	.pdx-contraste-res { grid-template-columns: 1fr 1.3fr; }
	.pdx-apercu, .pdx-suggestion, .pdx-partage { grid-column: 1 / -1; }
}
@media (max-width: 36em) {
	.pdx-coul-grille { grid-template-columns: 1fr; }
	.pdx-inverser { justify-self: center; margin: 0; transform: rotate(90deg); }
	.pdx-verdicts li { grid-template-columns: auto 1fr; }
	.pdx-verdicts .mono { display: none; }
}