/* Votre courriel en mode sombre : zone de code, quatre aperçus (seuls les aperçus sont sombres) */
.pdx-sombre-code {
	display: block;
	width: 100%;
	min-height: 11em;
	padding: 0.85em 1em;
	border: 1px solid transparent;
	border-radius: 0.7em;
	background: var(--brume);
	color: var(--encre);
	font: 400 0.85em/1.5 var(--mono);
	resize: vertical;
}
.pdx-sombre-code:focus { outline: 0; border-color: var(--encre); background: #fff; }
.pdx-sombre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1em; margin-top: 0.8em; }
.pdx-sombre-bouton { display: inline-block; padding: 0.55em 1em; cursor: pointer; }
.lien-discret { padding: 0; border: 0; background: none; color: var(--gris); font: 600 0.9em/1.4 var(--texte); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.lien-discret:hover { color: var(--encre); }
.pdx-sombre .outil-aide a { color: var(--orange-texte); }
.pdx-sombre-recu { margin: 0.6em 0 0; color: var(--ok); font-weight: 600; font-size: 0.9em; }

.pdx-sombre-res { margin-top: 2em; }
.pdx-sombre-largeur { display: flex; gap: 0.5em; justify-content: flex-end; margin-bottom: 0.8em; }
.pdx-sombre-largeur [aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.pdx-sombre-grille { display: grid; gap: 1.2em; grid-template-columns: 1fr; }
.pdx-sombre-carte { margin: 0; min-width: 0; }
.pdx-sombre-carte figcaption { margin-bottom: 0.6em; }
.pdx-sombre-carte-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.3em 0.6em; }
.pdx-sombre-carte-tete strong { font: 700 1.2em/1.2 var(--titre); }
.pdx-sombre-carte figcaption p { margin: 0.3em 0 0; color: var(--gris); font-size: 0.88em; }
.pdx-sombre-cadre { border: 1px solid var(--trait); border-radius: 0.8em; overflow: hidden; background: #fff; }
.pdx-sombre-carte:not([data-mode="clair"]) .pdx-sombre-cadre { background: #121212; border-color: #13243a55; }
.pdx-sombre-cadre iframe { display: block; width: 100%; height: 28em; border: 0; margin: 0 auto; background: transparent; }
.pdx-sombre-tel .pdx-sombre-cadre iframe { width: 375px; max-width: 100%; }
.pdx-sombre-tel .pdx-sombre-cadre { background: var(--grisé); }

/* Constats : échantillons de couleurs */
.pdx-sombre-paires { display: grid; gap: 0.35em; }
.pdx-sombre-paire { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.6em; font-size: 0.95em; }
.pdx-sombre-paire .mono { color: var(--gris); }
.pdx-sombre-ech { display: inline-grid; place-items: center; width: 2.4em; height: 1.7em; border-radius: 0.35em; border: 1px solid var(--trait); font-weight: 700; font-size: 0.9em; }
#pdx-sombre-constats .enreg { margin: 0.6em 0; }

@media (min-width: 60em) {
	.pdx-sombre-grille { grid-template-columns: 1fr 1fr; }
}