/* Qui détient les clés de votre site ? : carte en arbre (tronc + branches reliées), fiche à imprimer */
.pdx-cles-carte { --rail: var(--info-trait); --pas: 1.2em; margin-top: 1.4em; }

/* Cases */
.pdx-cles-noeud {
	position: relative;
	min-width: 0;
	padding: 1em 1.1em 0.9em;
	border-radius: 0.9em;
	background: #fff;
	border: 1px solid var(--trait);
	border-top: 0.3em solid var(--info-trait);
}
.pdx-cles-noeud.niv-ok { border-top-color: var(--ok-trait); }
.pdx-cles-noeud.niv-attn { border-top-color: var(--attn-trait); }
.pdx-cles-noeud.niv-err { border-top-color: var(--err-trait); }
.pdx-cles-noeud .mono { margin: 0; color: var(--orange-texte); }
.res-bloc .pdx-cles-noeud h4 { margin: 0.2em 0 0.35em; font: 700 1.3em/1.15 var(--titre); letter-spacing: -0.01em; text-transform: none; color: var(--encre); overflow-wrap: anywhere; }
.pdx-cles-detail { margin: 0 0 0.5em; font-size: 0.9em; color: var(--gris); overflow-wrap: anywhere; }
.pdx-cles-detail code, .pdx-cles-puces code { font: 400 0.92em/1.4 var(--mono); }
.pdx-cles-puces { margin: 0.3em 0 0.6em; padding: 0; list-style: none; display: grid; gap: 0.25em; font-size: 0.92em; overflow-wrap: anywhere; }
.pdx-cles-puces li { padding-left: 0.9em; position: relative; }
.pdx-cles-puces li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--orange); }
.pdx-cles-inconnu { color: var(--gris); font-size: 0.9em; }
.pdx-cles-pourquoi { margin: 0 0 0.6em; font-size: 0.92em; }
.pdx-cles-q { margin: 0; padding: 0.6em 0 0; list-style: none; border-top: 1px dashed var(--trait); display: grid; gap: 0.2em; }
.pdx-cles-q li { font-size: 0.85em; color: var(--gris); font-style: italic; }
.pdx-cles-q li::before { content: "? "; font: 500 1em/1 var(--mono); font-style: normal; color: var(--orange-texte); }

/* Tronc : registraire puis DNS, reliés par un trait vertical au pas de gauche */
.pdx-cles-tronc { max-width: 32em; }
.pdx-cles-tronc .pdx-cles-noeud + .pdx-cles-noeud { margin-top: 1.6em; }
.pdx-cles-tronc .pdx-cles-noeud + .pdx-cles-noeud::before {
	content: "";
	position: absolute;
	left: var(--pas);
	top: -1.9em;
	height: 1.6em;
	border-left: 2px solid var(--rail);
}

/* Branches : un rail vertical à gauche, et pour chaque rangée une barre horizontale qui relie les cases */
.pdx-cles-branches {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
	gap: 1.8em var(--pas);
	margin-left: var(--pas);
	padding: 1.8em 0 0 var(--pas);
	border-left: 2px solid var(--rail);
}
.pdx-cles-branches .pdx-cles-noeud::after {
	/* barre de la rangée : du rail (ou de la case voisine) jusqu'au bord droit de la case */
	content: "";
	position: absolute;
	left: calc(-1 * var(--pas) - 1px);
	right: 0;
	top: calc(-0.9em - 0.3em - 1px);
	border-top: 2px solid var(--rail);
}
.pdx-cles-branches .pdx-cles-noeud::before {
	/* petit trait vertical de la barre jusqu'à la case */
	content: "";
	position: absolute;
	left: var(--pas);
	top: calc(-0.9em - 0.3em - 1px);
	height: 0.9em;
	border-left: 2px solid var(--rail);
}

/* Fiche des accès */
.pdx-cles-imprimable .res-bloc-tete { justify-content: space-between; }
.pdx-cles-fiche-tete { margin: 0 0 0.6em; }
.pdx-cles-fiche-pied { display: none; }
.pdx-cles-tableau { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.pdx-cles-tableau thead th { padding: 0.5em 0.6em 0.5em 0; border-bottom: 1px solid var(--trait); text-align: left; font: 400 0.72em/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.pdx-cles-tableau tbody th, .pdx-cles-tableau td { padding: 0.55em 0.6em 0.55em 0; border-bottom: 1px solid var(--trait); vertical-align: top; text-align: left; }
.pdx-cles-tableau tbody th { width: 26%; }
.pdx-cles-fournisseur { display: block; font-weight: 700; overflow-wrap: anywhere; }
.pdx-cles-roles { display: block; font-weight: 400; font-size: 0.85em; color: var(--gris); }
.pdx-cles-tableau input {
	width: 100%;
	min-width: 0;
	padding: 0.45em 0.55em;
	border: 1px solid transparent;
	border-radius: 0.45em;
	background: var(--brume);
	color: var(--encre);
	font: 400 0.95em/1.3 var(--texte);
}
.pdx-cles-tableau input:focus { outline: 0; border-color: var(--encre); background: #fff; }

@media (max-width: 40em) {
	.pdx-cles-branches { grid-template-columns: 1fr; }
	/* La fiche devient une liste de cartes */
	.pdx-cles-tableau thead { display: none; }
	.pdx-cles-tableau, .pdx-cles-tableau tbody, .pdx-cles-tableau tr, .pdx-cles-tableau tbody th, .pdx-cles-tableau td { display: block; width: auto !important; }
	.pdx-cles-tableau tr { padding: 0.7em 0; border-bottom: 1px solid var(--trait); }
	.pdx-cles-tableau tbody th, .pdx-cles-tableau td { padding: 0.2em 0; border: 0; }
	.pdx-cles-tableau td::before { content: attr(data-etiquette); display: block; margin: 0.3em 0 0.15em; font-size: 0.8em; color: var(--gris); }
}

/* Impression : seulement la fiche, sur fond blanc, champs soulignés */
@media print {
	body > *:not(main), .outil > *:not(#resultats), #resultats > *:not(.pdx-cles-imprimable) { display: none !important; }
	body { background: #fff !important; }
	.outil { padding: 0; max-width: none; }
	.resultats { margin: 0; }
	.pdx-cles-imprimable { margin: 0; }
	.pdx-cles-imprimer, .pdx-cles-imprimable .res-role { display: none !important; }
	.pdx-cles-fiche-pied { display: block; margin-top: 1em; font-size: 0.8em; color: #555; }
	.pdx-cles-tableau { display: table !important; font-size: 10pt; }
	.pdx-cles-tableau thead { display: table-header-group !important; }
	.pdx-cles-tableau tr { display: table-row !important; page-break-inside: avoid; }
	.pdx-cles-tableau tbody th, .pdx-cles-tableau td { display: table-cell !important; padding: 0.6em 0.5em 0.9em 0; border-bottom: 1px solid #999; }
	.pdx-cles-tableau td::before { content: none; }
	.pdx-cles-tableau input { background: none; border: 0; padding: 0; color: #000; }
}