@font-face {
  font-family: 'barlowextrabold';
  src: url(data:application/font-woff2;base64,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) format('woff2');
  font-weight:normal;
  font-style:normal;
}
*{margin:0;padding:0;box-sizing:border-box}
html{width:100%;height:100%;color:#eee;background:#222;font:calc(1vw + 1vh) sans-serif}
body{
  width:100vw;height:100vh;width:100dvw;height:100dvh;
  display:grid;grid-template-areas:"grades" "left" "right";grid-template-rows:1fr 2fr 2fr;grid-template-columns:1fr;
  overflow-x: hidden;
}


/* Galerie responsive */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  padding: 10px;
}

/* Images */
.gallery img {
  width: 100%; 
  height: auto;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s;
  aspect-ratio: 16 / 9;
}

.gallery img:hover {
  transform: scale(1.05);
}

/* Modal pour image en grand */
.modal {
  display: none;
  justify-content: center;     /* centre horizontalement */
  align-items: center;         /* centre verticalement */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
