/* Nettoyer une liste d'adresses courriel : dépôt, réglages, tuiles-filtres, tableau (liste sur téléphone) */

/* Zone de dépôt */
.pdx-la-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	padding: 1.6em 1.2em;
	border: 0.12em dashed var(--brume-2);
	border-radius: 0.9em;
	background: var(--grisé);
	text-align: center;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}
.pdx-la-zone:hover, .pdx-la-zone.survol { border-color: var(--orange-texte); background: var(--peche); }
.pdx-la-zone span { color: var(--gris); font-size: 0.92em; }
.pdx-la-icone { font-size: 1.8em !important; line-height: 1; color: var(--orange-texte) !important; }
.pdx-la-nom { margin-top: 0.3em; font-family: var(--mono); color: var(--encre) !important; overflow-wrap: anywhere; }

.pdx-la-coller { margin-top: 1.2em; }
.pdx-la textarea {
	display: block;
	width: 100%;
	padding: 0.85em 1em;
	border: 1px solid transparent;
	border-radius: 0.7em;
	background: var(--brume);
	color: var(--encre);
	font: 400 0.95em/1.5 var(--mono);
	resize: vertical;
}
.pdx-la textarea:focus { outline: 0; border-color: var(--encre); background: #fff; }

/* Réglages de lecture */
.pdx-la-reglages { display: flex; flex-wrap: wrap; gap: 0.9em; margin-top: 1.3em; padding-top: 1.2em; border-top: 1px solid var(--trait); }
.pdx-la-reglage { flex: 1 1 13em; min-width: 0; }
.pdx-la-reglage select { width: 100%; max-width: 100%; }
.pdx-la-cases { flex: 1 1 100%; display: grid; gap: 0.45em; }
.pdx-la-cases label { display: flex; gap: 0.55em; align-items: flex-start; cursor: pointer; }
.pdx-la-cases input { margin-top: 0.3em; accent-color: var(--orange-texte); }
.pdx-la-reglages .outil-aide { flex: 1 1 100%; margin: 0; }
.pdx-la [hidden], .pdx-la-res [hidden], .pdx-la-res[hidden] { display: none; }

/* Résultats */
.pdx-la-res { margin-top: 2.2em; }
.pdx-la-tuiles .tuile {
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.pdx-la-tuiles .tuile-nom { font-size: 1.7em; }
.pdx-la-actions { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; margin-top: 1.2em; }
.pdx-la-actions .copier { padding: 0.6em 1.1em; }
.pdx-la-actions .bouton:disabled, .pdx-la-actions .copier:disabled { opacity: .45; cursor: default; }
.pdx-la-lcap { margin-top: 0.9em; }

/* Filtres */
.pdx-la-barre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.7em; margin-bottom: 0.8em; }
.pdx-la-filtres, .pdx-la-tout { display: flex; flex-wrap: wrap; gap: 0.4em; }
.pdx-la-filtre {
	padding: 0.4em 0.85em;
	border: 1px solid var(--trait);
	border-radius: 3em;
	background: #fff;
	color: var(--encre);
	font: 600 0.9em/1.2 var(--texte);
	cursor: pointer;
}
.pdx-la-filtre span { margin-left: 0.2em; color: var(--gris); font-family: var(--mono); font-weight: 400; }
.pdx-la-filtre:hover { border-color: var(--encre); }
.pdx-la-filtre[aria-pressed="true"] { background: var(--peche); border-color: var(--orange-texte); color: var(--orange-texte); }
.pdx-la-filtre[aria-pressed="true"] span { color: var(--orange-texte); }

/* Tableau */
.pdx-la-table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.pdx-la-table th { padding: 0.5em 0.8em 0.5em 0; border-bottom: 1px solid var(--trait); text-align: left; font: 400 0.72em/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.pdx-la-table td { padding: 0.65em 0.8em 0.65em 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.pdx-la-table .nb { width: 3.5em; font-family: var(--mono); color: var(--gris); }
.pdx-la-table td.nb { font-size: 0.9em; }
.pdx-la-adr { width: 34%; overflow-wrap: anywhere; }
.pdx-la-adr code { font: 400 0.95em/1.4 var(--mono); }
.pdx-la-table tr.niv-err .pdx-la-adr > code:first-child { color: var(--err); }
.pdx-la-fleche { color: var(--gris); }
.pdx-la-prop { color: var(--ok); font-weight: 500 !important; }
.pdx-la-brut { display: block; margin-top: 0.2em; color: var(--gris); font-size: 0.82em; overflow-wrap: anywhere; }
.pdx-la-det { font-size: 0.92em; overflow-wrap: anywhere; }
.pdx-la-faits { color: var(--gris); font-size: 0.92em; }
.pdx-la-act { width: 7.5em; }
.pdx-la-accepter { display: inline-flex; gap: 0.4em; align-items: center; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pdx-la-accepter input { width: 1.1em; height: 1.1em; accent-color: var(--ok); }
.pdx-la-vide { margin: 1em 0; color: var(--gris); }
.pdx-la-plus { margin-top: 1em; padding: 0.6em 1.1em; }

/* Téléphone : le tableau devient une liste */
@media (max-width: 40em) {
	.pdx-la-table thead { display: none; }
	.pdx-la-table, .pdx-la-table tbody, .pdx-la-table tr, .pdx-la-table td { display: block; width: auto !important; }
	.pdx-la-table tr { position: relative; padding: 0.7em 0; border-bottom: 1px solid var(--trait); }
	.pdx-la-table td { padding: 0.12em 0; border: 0; }
	.pdx-la-table td.nb { font-size: 0.8em; }
	.pdx-la-table td.nb::before { content: "#"; }
	.pdx-la-table td.pdx-la-act:empty { display: none; }
	.pdx-la-accepter { margin-top: 0.3em; padding: 0.35em 0.8em; border: 1px solid var(--trait); border-radius: 3em; background: #fff; }
	.pdx-la-tuiles .tuile-nom { font-size: 1.4em; }
}