/* Votre page vue autrement (outils/lib/pd/vision.php) */

.pdx-vi { margin-top: 1.6em; }

/* Barre : filtres et largeur */
.pdx-vi-barre { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.8em 1.2em; }
.pdx-vi-filtres, .pdx-vi-largeurs { display: flex; flex-wrap: wrap; gap: 0.4em; }
.pdx-vi-largeurs[hidden] { display: none; }
.pdx-vi-filtre, .pdx-vi-largeur {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.5em 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-vi-filtre:hover, .pdx-vi-largeur:hover { border-color: var(--encre); }
.pdx-vi-filtre[aria-pressed="true"], .pdx-vi-largeur[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.pdx-vi-largeur { background: var(--grisé); }

/* Petite pastille qui évoque chaque filtre */
.pdx-vi-pastille { flex: none; width: 0.9em; height: 0.9em; border-radius: 50%; border: 1px solid #13243a33; }
.pdx-vi-p-normale { background: conic-gradient(#e53935 0 33%, #43a047 0 66%, #1e88e5 0); }
.pdx-vi-p-deuteranopie { background: conic-gradient(#a39a3b 0 33%, #b3a73e 0 66%, #2d6fd6 0); }
.pdx-vi-p-protanopie { background: conic-gradient(#6e6a3a 0 33%, #b8ad44 0 66%, #2a6fd8 0); }
.pdx-vi-p-tritanopie { background: conic-gradient(#e0413f 0 33%, #4f9b9f 0 66%, #2c8ea0 0); }
.pdx-vi-p-achromatopsie { background: conic-gradient(#7a7a7a 0 33%, #9a9a9a 0 66%, #5d5d5d 0); }
.pdx-vi-p-basse-vision { background: radial-gradient(#4f5f70, #d3dfe5); }
.pdx-vi-p-cataracte { background: radial-gradient(#b9a77a, #efe6c8); }
.pdx-vi-p-soleil { background: radial-gradient(#fff 30%, #f5e6a8); }

.pdx-vi-desc { margin: 1em 0 0; max-width: 46em; color: var(--gris); }
.pdx-vi-desc strong { color: var(--encre); }

/* Scène : déborde du conteneur de 60em sur grand écran pour laisser de la place aux deux volets */
.pdx-vi-scene { display: grid; gap: 1em; margin-top: 1.2em; }
@media (min-width: 52em) {
	.pdx-vi-duo .pdx-vi-scene { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 70em) {
	.pdx-vi-duo .pdx-vi-scene {
		width: min(calc(100vw - 4em), 90em);
		margin-left: calc(50% - min(50vw - 2em, 45em));
	}
}
.pdx-vi-volet { margin: 0; min-width: 0; }
.pdx-vi-volet[hidden] { display: none; }
.pdx-vi-volet figcaption { margin-bottom: 0.4em; font: 500 0.78em/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.pdx-vi-cadre {
	position: relative;
	overflow: hidden;
	border-radius: 0.8em;
	border: 1px solid var(--trait);
	background: #fff;
	box-shadow: 0 1em 2em -1.6em #13243a66;
}
.pdx-vi-cadre iframe { display: block; width: 100%; height: 38em; border: 0; background: #fff; transform-origin: 0 0; }
.pdx-vi-centre iframe { margin: 0 auto; }
.pdx-vi-centre { background: var(--grisé); }