/* Ajouts communs à mes outils (outils/lib/pd-page.php), par-dessus outils.css.
   Styles propres à un seul outil : assets/pd/<slug>.css */

/* Grande note A à F dans le sommaire */
.pd-note {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: 0.5em;
	background: #fff;
	border: 0.12em solid var(--info-trait);
	font: 700 2.2em/1 var(--titre);
	color: var(--info);
}
.pd-note.niv-ok { border-color: var(--ok-trait); color: var(--ok); background: var(--ok-fond); }
.pd-note.niv-attn { border-color: var(--attn-trait); color: var(--attn); background: var(--attn-fond); }
.pd-note.niv-err { border-color: var(--err-trait); color: var(--err); background: var(--err-fond); }

/* Liste de faits clé / valeur */
.pd-faits { display: grid; grid-template-columns: minmax(8em, max-content) 1fr; gap: 0.1em 1.4em; margin: 0; }
.pd-faits dt { padding: 0.55em 0; border-bottom: 1px solid var(--trait); color: var(--gris); font-size: 0.92em; }
.pd-faits dd { margin: 0; padding: 0.55em 0; border-bottom: 1px solid var(--trait); overflow-wrap: anywhere; }
.pd-faits code { font: 400 0.92em/1.5 var(--mono); }
@media (max-width: 40em) {
	.pd-faits { grid-template-columns: 1fr; }
	.pd-faits dt { padding-bottom: 0; border: 0; }
}

/* Tableau large : défile horizontalement au besoin */
.pd-defile { overflow-x: auto; }

/* Note de méthode sous un résultat */
.pd-methode { margin: 1.2em 0 0; font-size: 0.86em; color: var(--gris); max-width: 44em; }

.outil-form select {
	padding: 0.85em 1em;
	border: 1px solid transparent;
	border-radius: 0.7em;
	background: var(--brume);
	color: var(--encre);
	font: 500 1em/1.3 var(--texte);
}
.outil-form select:focus { outline: 0; border-color: var(--encre); background: #fff; }