:root{
  --noir:#040707;
  --panneau:#0a1214;
  --ligne:#214854;
  --ligne-vive:#257998;
  --braise:#80caf7;
  --ivoire:#eef3f6;
  --cendre:#dbe3e5;
  --sourdine:#afbec2;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(70vmax 46vmax at 50% -8%, rgba(15,97,129,.15), transparent 62%),
    linear-gradient(180deg,#050307 0%,#070407 50%,#040206 100%);
  background-attachment:fixed;
  color:var(--ivoire);
  font-family:'Inter','Segoe UI',system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.enveloppe{max-width:1080px;margin:0 auto;padding:28px 20px 60px}

.entete{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--ligne);
  padding-bottom:18px;
  margin-bottom:22px;
}

.fil{
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sourdine);
  margin-bottom:6px;
}
.fil a{color:var(--braise);text-decoration:none}
.fil a:hover{text-decoration:underline}

h1{
  font-family:'Cinzel',Georgia,serif;
  font-weight:600;
  font-size:clamp(26px,5vw,38px);
  letter-spacing:.05em;
  margin:0;
}

.outils{display:flex;gap:8px}

.btn{
  font-family:'Cinzel',Georgia,serif;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ivoire);
  background:linear-gradient(180deg,#0e181b,#0a1214);
  border:1px solid #1c404a;
  border-radius:3px;
  padding:9px 15px;
  text-decoration:none;
  cursor:pointer;
  transition:.2s;
}
.btn:hover{border-color:#216780;box-shadow:0 0 18px rgba(15,97,129,.35)}

.chapeau{color:var(--sourdine);font-size:15px;margin:0 0 22px}

.grille{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;
}

.oeuvre{
  display:block;
  width:100%;
  padding:0;
  text-align:left;
  background:var(--panneau);
  border:1px solid var(--ligne);
  border-radius:4px;
  overflow:hidden;
  cursor:zoom-in;
  transition:.2s;
  font:inherit;
  color:inherit;
}
.oeuvre:hover{border-color:var(--ligne-vive);transform:translateY(-2px)}
.oeuvre:focus-visible{outline:2px solid var(--braise);outline-offset:3px}

.cadre{
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:
    repeating-conic-gradient(#0b1418 0 25%, #0e1c21 0 50%) 0 0/18px 18px;
}

.oeuvre-img{
  max-width:100%;
  max-height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

.legende{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  padding:9px 12px 11px;
  border-top:1px solid var(--ligne);
}

.legende .nom{font-size:14px;color:var(--cendre)}
.legende .dim{font-size:12px;color:var(--sourdine);font-variant-numeric:tabular-nums}
.legende .anime{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--braise);
  border:1px solid var(--ligne-vive);
  border-radius:2px;
  padding:1px 5px;
}

.etat{
  text-align:center;
  color:var(--sourdine);
  font-style:italic;
  margin-top:34px;
}

.loupe{
  border:1px solid var(--ligne);
  border-radius:6px;
  background:var(--noir);
  color:var(--ivoire);
  padding:0;
  max-width:96vw;
  max-height:94vh;
}
.loupe::backdrop{background:rgba(2,5,7,.92)}

.loupe img{
  display:block;
  max-width:90vw;
  max-height:76vh;
  margin:26px auto 0;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  cursor:pointer;
}

.loupe-fermer{
  position:absolute;
  top:9px;right:9px;
  background:rgba(4,7,7,.8);
  color:var(--ivoire);
  border:1px solid var(--ligne);
  border-radius:3px;
  padding:5px 10px;
  cursor:pointer;
}
.loupe-fermer:hover{border-color:var(--braise)}

.loupe-pied{
  margin:20px 0 0;
  padding:10px 16px;
  border-top:1px solid var(--ligne);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--sourdine);
  text-align:center;
}