/* Outils « Un courriel ou un lien douteux ? » (analyse-courriel, rejet-courriel, avertissement-navigateur,
   caracteres-trompeurs, lire-qr, htaccess) : par-dessus outils.css et outils-plus.css. */

/* Grande zone de texte */
.pdx-texte {
	display: block;
	width: 100%;
	min-height: 9em;
	padding: 0.85em 1em;
	border: 1px solid transparent;
	border-radius: 0.7em;
	background: var(--brume);
	color: var(--encre);
	font: 400 0.9em/1.5 var(--mono);
	resize: vertical;
	overflow-wrap: anywhere;
}
.pdx-texte:focus { outline: 0; border-color: var(--encre); background: #fff; }

/* Rangée d'actions : dépôt de fichier, lien, bouton */
.pdx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 0.9em; margin-top: 0.9em; }
.pdx-actions .bouton { margin-left: auto; }
.pdx-depot {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.6em 1em;
	border: 0.12em dashed var(--brume-2);
	border-radius: 0.7em;
	background: var(--grisé);
	color: var(--gris);
	font-weight: 600;
	font-size: 0.92em;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}
.pdx-depot:hover, .pdx-depot.survol { border-color: var(--orange); background: var(--peche); color: var(--encre); }
.pdx-depot span { color: var(--orange-texte); font-size: 1.2em; line-height: 1; }
input[type="file"]:focus-visible + .pdx-depot { outline: 0.15em solid var(--orange); outline-offset: 0.2em; }
.pdx-lien-bouton { padding: 0; border: 0; background: none; color: var(--orange-texte); font: 600 0.92em/1.3 var(--texte); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.pdx-lien-bouton:hover { color: var(--encre); }
@media (max-width: 40em) {
	.pdx-actions .bouton { width: 100%; margin-left: 0; justify-content: center; }
	.pdx-depot { flex: 1 1 auto; justify-content: center; }
}

/* Exemples cliquables */
.pdx-exemples { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; margin-top: 0.9em; font-size: 0.88em; color: var(--gris); }
.pdx-exemples > span { margin-right: 0.3em; }
.pdx-exemple {
	padding: 0.3em 0.75em;
	border: 1px solid var(--trait);
	border-radius: 3em;
	background: #fff;
	color: var(--encre);
	font: 500 1em/1.3 var(--texte);
	cursor: pointer;
	max-width: 100%;
	overflow-wrap: anywhere;
	text-align: left;
}
.pdx-exemple:hover { border-color: var(--encre); }
.pdx-exemple code { font: 400 0.95em/1.3 var(--mono); }
.pdx-exemple small { color: var(--gris); font-size: 0.85em; }

/* Mode d'emploi (où trouver les en-têtes) */
.pdx-mode { margin-top: 1.1em; }
.pdx-mode-liste { margin: 0; display: grid; grid-template-columns: minmax(9em, 14em) 1fr; gap: 0 1.2em; font-size: 0.92em; }
.pdx-mode-liste dt { padding: 0.6em 0; border-top: 1px solid var(--trait); font-weight: 700; }
.pdx-mode-liste dd { margin: 0; padding: 0.6em 0; border-top: 1px solid var(--trait); color: var(--gris); }
.pdx-mode-liste dd strong { color: var(--encre); }
@media (max-width: 40em) {
	.pdx-mode-liste { grid-template-columns: 1fr; }
	.pdx-mode-liste dd { padding-top: 0; border-top: 0; }
}

/* Petits textes */
.pdx-note { color: var(--gris); font-size: 0.88em; }
.pdx-liste { margin: 0; padding: 0; list-style: none; }
.pdx-liste li { padding: 0.35em 0; border-bottom: 1px solid var(--trait); overflow-wrap: anywhere; }
.pdx-sous-titre { margin: 1.4em 0 0.6em; font: 500 0.8em/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.res-sommaire .pdx-note code, .pd-faits .pdx-note code { font-size: 0.95em; }

/* Domaine mis en évidence */
.pdx-hote { font-family: var(--mono); overflow-wrap: anywhere; }
.pdx-hote-sous { color: var(--gris); }
.pdx-hote strong { color: var(--encre); font-weight: 700; }
mark.pdx-suspect { padding: 0 0.1em; border-radius: 0.2em; background: var(--err-fond); color: var(--err); box-shadow: inset 0 -0.15em 0 var(--err-trait); }
mark.pdx-douteux { padding: 0 0.1em; border-radius: 0.2em; background: var(--attn-fond); color: var(--attn); }

/* Caractère par caractère */
.pdx-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4em, 1fr)); gap: 0.4em; margin: 0; padding: 0; list-style: none; }
.pdx-car {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1em;
	padding: 0.5em 0.3em 0.55em;
	border-radius: 0.6em;
	border: 1px solid var(--trait);
	background: #fff;
	text-align: center;
	min-width: 0;
}
.pdx-car b { font: 500 1.7em/1.2 var(--mono); color: var(--encre); }
.pdx-car b.pdx-car-muet { font-size: 1.1em; line-height: 1.85; color: var(--gris); }
.pdx-car small { font-size: 0.72em; line-height: 1.3; color: var(--gris); overflow-wrap: anywhere; }
.pdx-car small.mono { font-size: 0.7em; letter-spacing: 0; }
.pdx-car .pdx-car-note { font-weight: 700; }
.pdx-car.niv-err { border-color: var(--err-trait); background: var(--err-fond); }
.pdx-car.niv-err b, .pdx-car.niv-err .pdx-car-note { color: var(--err); }
.pdx-car.niv-attn { border-color: var(--attn-trait); background: var(--attn-fond); }
.pdx-car.niv-attn .pdx-car-note { color: var(--attn); }
.pdx-car.niv-info { border-color: var(--info-trait); background: var(--info-fond); }

/* Parcours du courriel */
.pdx-parcours { margin: 0; padding: 0; list-style: none; }
.pdx-parcours li { position: relative; padding: 0 0 1.1em 1.6em; border-left: 0.15em solid var(--brume-2); margin-left: 0.5em; overflow-wrap: anywhere; }
.pdx-parcours li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pdx-parcours li::before { content: ""; position: absolute; left: -0.5em; top: 0.3em; width: 0.85em; height: 0.85em; border-radius: 50%; background: #fff; border: 0.15em solid var(--orange); }
.pdx-parcours li:last-child::before { background: var(--orange); }
.pdx-parcours p { margin: 0.2em 0 0; }
.pdx-parcours-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.6em; }
.pdx-parcours-tete .mono { color: var(--orange-texte); }
.pdx-parcours-tete strong { font-family: var(--mono); font-weight: 500; font-size: 0.95em; overflow-wrap: anywhere; }
.pdx-delai { font-weight: 600; color: var(--encre); }
.pdx-delai.long { color: var(--attn); }
.pdx-ac-tous { margin-top: 2em; }
.pdx-ac-tous .pd-faits code { font-size: 0.85em; }

/* Code QR */
.pdx-qr-choix { display: flex; flex-wrap: wrap; gap: 0.7em; }
.pdx-qr-camera, .pdx-qr-depot { flex: 1 1 13em; justify-content: center; }
.pdx-qr-depot { padding: 0.85em 1em; font-size: 1em; }
.pdx-qr-camera span { font-size: 1.1em; }
.pdx-qr-cadre { position: relative; margin-top: 1em; border-radius: 0.9em; overflow: hidden; background: var(--brume); aspect-ratio: 4 / 3; max-height: 70vh; }
.pdx-qr-cadre video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdx-qr-viseur { position: absolute; inset: 18%; border: 0.2em solid #ffffffd9; border-radius: 0.8em; box-shadow: 0 0 0 100vmax #13243a40; pointer-events: none; }
.pdx-qr-stop { position: absolute; left: 50%; bottom: 0.9em; transform: translateX(-50%); }
.pdx-qr-etat { margin: 0.9em 0 0; font-weight: 600; color: var(--gris); }
.pdx-qr-etat.erreur-outil { color: var(--err); padding: 0.9em 1.1em; }
.pdx-qr-res + .pdx-qr-res { margin-top: 2.2em; }
.pdx-qr-res .enreg { margin-top: 1.2em; }
.pdx-qr-res .pd-faits { margin-top: 0.4em; }
.pdx-ouvrir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 0.9em; margin: 1.3em 0 0; padding-top: 1em; border-top: 1px solid var(--trait); }
.pdx-ouvrir-lien { font-weight: 700; color: var(--orange-texte); text-underline-offset: 0.2em; }
.pdx-ouvrir span { font-size: 0.88em; color: var(--gris); }

/* Cas expliqués (rejets de courriel) */
.pdx-cas { padding: 1.2em 1.3em; border-radius: 0.9em; background: #fff; border: 1px solid var(--trait); }
.pdx-cas.principal { border-left: 0.3em solid var(--orange); }
.pdx-cas + .pdx-cas { margin-top: 0.8em; }
.pdx-cas-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4em 0.8em; margin-bottom: 0.5em; }
.pdx-cas-tete h4 { margin: 0; font: 700 1.2em/1.2 var(--titre); text-transform: none; letter-spacing: 0; color: var(--encre); }
.pdx-cas p { margin: 0 0 0.7em; }
.pdx-cas-qui { padding: 0.55em 0.8em; border-radius: 0.6em; background: var(--grisé); font-size: 0.95em; }
.pdx-cas-sous { margin: 1em 0 0.3em !important; font: 500 0.78em/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.pdx-cas-faire { margin: 0 0 0.6em; padding-left: 1.3em; }
.pdx-cas-faire li { margin-bottom: 0.35em; }
.pdx-cas-outils { display: flex; flex-wrap: wrap; gap: 0.4em 1em; margin: 0.8em 0 0 !important; }
.pdx-outil-lien { font-weight: 700; color: var(--orange-texte); text-underline-offset: 0.2em; }
.pdx-outil-lien:hover { color: var(--encre); }
.pdx-rj-autres { margin-top: 1.4em; }
.pdx-rj-autres .pdx-cas, .pdx-rj-autres .pdx-av { margin-top: 0.8em; }

/* Avertissements du navigateur */
.pdx-av-ou { margin-top: 1.1em; font-weight: 600 !important; color: var(--gris); font-size: 0.92em; }
.pdx-select { width: 100%; max-width: 32em; }
.pdx-av { padding: 1.4em 1.4em 1.2em; border-radius: 1em; background: #fff; border: 1px solid var(--trait); }
.pdx-av.principal { border-top: 0.3em solid var(--orange); }
.pdx-av-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.8em; }
.pdx-av-tete .mono { flex-basis: 100%; margin: 0; color: var(--orange-texte); }
.pdx-av-tete h3 { margin: 0; font: 700 clamp(1.25em, 3vw, 1.6em)/1.15 var(--titre); letter-spacing: -0.01em; }
.pdx-av-codes { display: flex; flex-wrap: wrap; gap: 0.3em; margin: 0.8em 0 0; }
.pdx-av-codes code { padding: 0.15em 0.5em; border-radius: 0.4em; background: var(--grisé); font: 400 0.8em/1.4 var(--mono); overflow-wrap: anywhere; }
.pdx-av-sens { margin: 0.9em 0 0; font-size: 1.05em; max-width: 44em; }
.pdx-av-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-top: 1.1em; }
.pdx-av-cols > div { padding: 1em 1.1em; border-radius: 0.8em; background: var(--grisé); }
.pdx-av-cols > div + div { background: var(--peche); }
.pdx-av-cols h4 { margin: 0 0 0.5em; font: 500 0.78em/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.pdx-av-cols ul { margin: 0; padding-left: 1.1em; }
.pdx-av-cols li { margin-bottom: 0.4em; }
.pdx-av-cols li:last-child { margin-bottom: 0; }
@media (max-width: 40em) {
	.pdx-av { padding: 1.1em 1em; }
	.pdx-av-cols { grid-template-columns: 1fr; }
}

/* .htaccess : expressions régulières et drapeaux décortiqués */
.pdx-re, .pdx-drapeaux { display: inline-flex; flex-wrap: wrap; gap: 0.25em; vertical-align: baseline; }
.pdx-drapeaux { display: flex; margin-top: 0.35em; }
.pdx-re > span, .pdx-drapeau {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	padding: 0.05em 0.5em 0.1em 0.2em;
	border-radius: 0.4em;
	background: var(--grisé);
	border: 1px solid var(--trait);
	font-size: 0.88em;
	color: var(--gris);
	overflow-wrap: anywhere;
}
.pdx-re code, .pdx-drapeau code { padding: 0 0.3em; border-radius: 0.25em; background: #fff; color: var(--encre); font: 500 0.95em/1.4 var(--mono); }
.pdx-drapeau { background: var(--peche); }
.pdx-dest { font-family: var(--mono); font-size: 0.92em; color: var(--encre); overflow-wrap: anywhere; }
.pdx-dest em { font-family: var(--texte); font-style: normal; font-weight: 600; color: var(--orange-texte); }
.pdx-ht-expl em { font-style: normal; font-weight: 600; color: var(--orange-texte); }

/* .htaccess : ligne par ligne */
.pdx-ht { margin: 0; padding: 0; list-style: none; }
.pdx-ht-l { padding: 0.75em 0 0.8em calc(var(--prof, 0) * 1.1em); border-bottom: 1px solid var(--trait); }
.pdx-ht-l.type-commentaire { opacity: 0.7; }
.pdx-ht-l.type-section { background: var(--grisé); padding-left: 0.8em; padding-right: 0.8em; border-radius: 0.5em; border-bottom: 0; margin: 0.4em 0; }
.pdx-ht-l.niv-attn { box-shadow: inset 0.25em 0 0 var(--attn-trait); padding-left: calc(var(--prof, 0) * 1.1em + 0.8em); }
.pdx-ht-l.niv-err { box-shadow: inset 0.25em 0 0 var(--err-trait); padding-left: calc(var(--prof, 0) * 1.1em + 0.8em); background: #fbeae866; }
.pdx-ht-tete { display: flex; align-items: baseline; gap: 0.3em 0.7em; flex-wrap: wrap; }
.pdx-ht-num { flex: none; min-width: 2.2em; color: var(--gris); text-align: right; }
.pdx-ht-code { flex: 1 1 14em; min-width: 0; font: 500 0.9em/1.5 var(--mono); color: var(--encre); overflow-wrap: anywhere; white-space: pre-wrap; }
.pdx-ht-expl, .pdx-ht-risque { margin: 0.35em 0 0 2.9em; max-width: 48em; }
.pdx-ht-risque { padding: 0.45em 0.7em; border-radius: 0.5em; font-size: 0.93em; }
.pdx-ht-risque.niv-err { background: var(--err-fond); color: var(--err); }
.pdx-ht-risque.niv-attn { background: var(--attn-fond); color: var(--attn); }
.pdx-ht-risque.niv-info { background: var(--info-fond); color: var(--info); }
.pdx-ht-risque code, .pdx-ht-expl code { font: 400 0.9em/1.4 var(--mono); padding: 0.05em 0.3em; border-radius: 0.3em; background: #ffffffb3; overflow-wrap: anywhere; }
@media (max-width: 40em) {
	.pdx-ht-l { padding-left: calc(var(--prof, 0) * 0.5em); }
	.pdx-ht-l.niv-attn, .pdx-ht-l.niv-err { padding-left: calc(var(--prof, 0) * 0.5em + 0.6em); }
	.pdx-ht-expl, .pdx-ht-risque { margin-left: 0; }
	.pdx-ht-num { min-width: 0; text-align: left; }
}