/* Propagation DNS : carte du monde (outils/lib/pd/propagation.php, terres dans monde.svg) */

.pdx-propa-carte { margin: 2em 0 0; padding: 1.2em 1.2em 1em; border-radius: 1.1em; background: #fff; border: 1px solid var(--trait); }
.pdx-propa-carte svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Arcs : se tracent l'un après l'autre */
.pdx-propa-arc {
	fill: none;
	stroke: var(--info-trait);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	opacity: .75;
	animation: pdx-propa-trace .9s cubic-bezier(.3, .7, .3, 1) forwards;
	animation-delay: calc(var(--i) * 90ms);
}
.pdx-propa-arc.niv-ok { stroke: var(--ok-trait); }
.pdx-propa-arc.niv-attn { stroke: var(--attn-trait); }
.pdx-propa-arc.niv-info { stroke-dasharray: 2 3; stroke-dashoffset: 0; opacity: 0; animation-name: pdx-propa-fondu; }
@keyframes pdx-propa-trace { to { stroke-dashoffset: 0; } }
@keyframes pdx-propa-fondu { to { opacity: .45; } }

/* Points : apparaissent quand leur arc arrive */
.pdx-propa-point { opacity: 0; animation: pdx-propa-arrive .45s ease-out forwards; animation-delay: calc(var(--i) * 90ms + 750ms); }
.pdx-propa-rond { fill: var(--info); stroke: #fff; stroke-width: 2; }
.pdx-propa-point.niv-ok .pdx-propa-rond { fill: var(--ok-trait); }
.pdx-propa-point.niv-attn .pdx-propa-rond { fill: var(--attn-trait); }
.pdx-propa-point.niv-info .pdx-propa-rond { fill: #fff; stroke: var(--info-trait); stroke-dasharray: 2 2; }
.pdx-propa-onde { fill: none; stroke: var(--info-trait); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pdx-propa-point.niv-ok .pdx-propa-onde { stroke: var(--ok-trait); animation: pdx-propa-onde 2.4s ease-out infinite; animation-delay: calc(var(--i) * 90ms + 1.1s); }
.pdx-propa-point.niv-attn .pdx-propa-onde { stroke: var(--attn-trait); animation: pdx-propa-onde 2.4s ease-out infinite; animation-delay: calc(var(--i) * 90ms + 1.1s); }
.pdx-propa-point text { font: 600 11px/1 var(--texte); fill: var(--encre); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.pdx-propa-point:hover .pdx-propa-rond { stroke: var(--encre); }
@keyframes pdx-propa-arrive {
	from { opacity: 0; transform-box: fill-box; }
	to { opacity: 1; }
}
@keyframes pdx-propa-onde {
	0% { opacity: .8; transform: scale(1); }
	100% { opacity: 0; transform: scale(3.2); }
}

/* Notre serveur */
.pdx-propa-origine circle:last-child { fill: var(--orange); stroke: #fff; stroke-width: 2; }
.pdx-propa-origine .pdx-propa-onde { stroke: var(--orange); animation: pdx-propa-onde 2s ease-out infinite; }

/* Légende et réseaux mondiaux */
.pdx-propa-carte figcaption { margin-top: 0.8em; font-size: 0.9em; color: var(--gris); }
.pdx-propa-legende, .pdx-propa-globaux { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; margin: 0; padding: 0; list-style: none; }
.pdx-propa-legende li, .pdx-propa-globaux li { display: inline-flex; align-items: center; gap: 0.45em; }
.pdx-propa-puce { width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--info); }
.niv-ok > .pdx-propa-puce { background: var(--ok-trait); }
.niv-attn > .pdx-propa-puce { background: var(--attn-trait); }
.niv-info > .pdx-propa-puce { background: #fff; border: 1px dashed var(--info-trait); }
.pdx-propa-leg-origine .pdx-propa-puce { background: var(--orange); }
.pdx-propa-globaux-titre { margin: 1em 0 0.4em; }
.pdx-propa-globaux li { padding: 0.25em 0.75em; border-radius: 3em; background: var(--grisé); color: var(--encre); font-weight: 600; }

/* Téléphone : étiquettes plus grosses (la carte rapetisse) */
@media (max-width: 40em) {
	.pdx-propa-carte { padding: 0.8em 0.6em; }
	.pdx-propa-point text { font-size: 17px; stroke-width: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.pdx-propa-arc, .pdx-propa-point, .pdx-propa-onde { animation: none !important; }
	.pdx-propa-arc { stroke-dashoffset: 0; }
	.pdx-propa-arc.niv-info { opacity: .45; }
	.pdx-propa-point { opacity: 1; }
}