/* Visionneuse d'images - feuille autonome (version 1 du site) */
.vision{
  position:fixed; inset:0; z-index:200000;
  display:none; align-items:center; justify-content:center;
  background:rgba(7,18,28,.93);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:56px 18px;
}
.vision:focus{ outline:none; }
.vision.on{ display:flex; animation:vision-ouvre .16s ease; }
@keyframes vision-ouvre{ from{opacity:0} to{opacity:1} }
.vision-cadre{ margin:0; max-width:100%; max-height:100%; text-align:center; }
.vision img{
  max-width:100%; max-height:calc(100vh - 128px);
  width:auto; height:auto; margin:0 auto; display:block;
  border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.55);
  background:#0b2233; border:0;
}
.vision figcaption{
  color:#cfe0ec; font-size:14px; line-height:1.5;
  margin:14px auto 0; max-width:720px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.vision button{
  position:absolute; border:0; cursor:pointer; color:#fff; padding:0;
  background:rgba(255,255,255,.12); border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  transition:background .16s, transform .16s;
}
.vision button:hover{ background:rgba(255,255,255,.22); }
.vision button:focus-visible{ outline:2px solid #7cb518; outline-offset:3px; }
.vision-x{ top:14px; right:14px; width:46px; height:46px; font-size:28px; line-height:1; }
.vision-p, .vision-s{ top:50%; margin-top:-26px; width:52px; height:52px; font-size:20px; }
.vision-p{ left:12px; }
.vision-s{ right:12px; }
.vision-p:hover{ transform:translateX(-2px); }
.vision-s:hover{ transform:translateX(2px); }
@media (max-width:640px){
  .vision{ padding:50px 10px; }
  .vision img{ max-height:calc(100vh - 150px); }
  .vision-p, .vision-s{ width:44px; height:44px; margin-top:-22px; }
  .vision-p{ left:6px; } .vision-s{ right:6px; }
  .vision figcaption{ font-size:13px; }
}