@import url('https://fonts.googleapis.com/css2?family=Fragment+Mono:ital@0;1&display=swap');

{
box-sizing: border-box;
}

html {
margin: 0;
padding: 0;
}

body {
margin: 0;
padding: 0;
background-color: #303030;
color: #fff;
font-family: "Fragment Mono", monospace;
font-size: 0.8rem;
font-weight: 400;
font-style: normal;
letter-spacing: 0.1em;
line-height: 1.6;
}

/* --------------------------------------------------
GALERIE
-------------------------------------------------- */

.gallery {
width: 90%;
max-width: 1400px;
margin: 2% auto;
}

/* --------------------------------------------------
HEADER
-------------------------------------------------- */

#head {
width: 100%;
margin-top: 2%;
margin-bottom: 4%;
line-height: 1.6;
}

/* -------------------------------------------------- LIENS -------------------------------------------------- */

a:link,
a:visited,
a:focus,
a:active {
  color: #fff;
  text-decoration: none;
}

a:hover {
  color: #a9dce2;
  text-decoration: none;
}


/* --------------------------------------------------
CONTENEUR DE LA GALERIE
-------------------------------------------------- */

.gallery-viewer {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 4%;
width: 100%;
}

/* --------------------------------------------------
IMAGE
-------------------------------------------------- */

.gallery-image {
width: min(60vw, 500px);
margin: 0;
padding: 0;
flex-shrink: 0;
}

.gallery-image img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 210 / 297;
object-fit: contain;
background-color: #303030;
}

/* --------------------------------------------------
INFORMATIONS À DROITE
-------------------------------------------------- */

.gallery-info {
max-width: 350px;
margin: 0;
padding: 0;
}

/* --------------------------------------------------
NAVIGATION
-------------------------------------------------- */

.gallery-navigation {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px 0;
padding: 0;
}

/* --------------------------------------------------
FLÈCHES
-------------------------------------------------- */

.gallery-arrow {
display: block;
width: 40px;
height: 40px;
margin: 0;
padding: 0;

border: none;
background: transparent;

color: #fff;
font-family: inherit;
font-size: 1.2rem;
line-height: 40px;
text-align: center;
text-decoration: none;

appearance: none;
-webkit-appearance: none;

cursor: pointer;
}

.gallery-arrow {
color: #a9dce2;
text-decoration: none;
}

.gallery-arrow,
.gallery-arrow,
.gallery-arrow {
border: none;
outline: none;
background: transparent;
}

/* --------------------------------------------------
LÉGENDE
-------------------------------------------------- */

.gallery-caption {
margin: 0;
padding: 0;

color: #fff;
font-size: 0.75rem;
line-height: 1.6;
text-align: left;

white-space: pre-line;
}

/* --------------------------------------------------
TABLETTE
-------------------------------------------------- */

@media screen and (max-width: 900px) {

body {
font-size: 0.78rem;
line-height: 1.6;
}

.gallery {
width: 94%;
margin: 4% auto;
}

#head {
margin-top: 3%;
margin-bottom: 4%;
}

.gallery-viewer {
justify-content: center;
gap: 3%;
}

.gallery-image {
width: min(65vw, 600px);
}

.gallery-info {
max-width: 300px;
}

}

/* --------------------------------------------------
MOBILE
-------------------------------------------------- */

@media screen and (max-width: 600px) {

body {
font-size: 0.72rem;
letter-spacing: 0.07em;
line-height: 1.6;
}

.gallery {
width: 96%;
margin: 4% auto;
}

#head {
margin-top: 4%;
margin-bottom: 8%;
line-height: 1.5;
}

.gallery-viewer {
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0;
}

.gallery-image {
width: calc(100vw - 90px);
max-width: 500px;
}

.gallery-image img {
width: 100%;
}

.gallery-info {
width: calc(100vw - 90px);
max-width: 500px;
margin: 0;
padding: 0;
}

/* ------------------------------------------------
LÉGENDE SOUS L'IMAGE
------------------------------------------------ */

.gallery-caption {
display: block;
margin-top: 6px;

font-size: 0.65rem;
line-height: 1.55;
text-align: left;

}

/* ------------------------------------------------
FLÈCHES SOUS LA LÉGENDE
------------------------------------------------ */

.gallery-navigation {
justify-content: flex-start;
gap: 5px;
margin-top: 10px;
margin-bottom: 0;
}

.gallery-arrow {
width: 35px;
height: 35px;
font-size: 1rem;
line-height: 35px;
}

}

/* --------------------------------------------------
TRÈS PETITS ÉCRANS
-------------------------------------------------- */

@media screen and (max-width: 400px) {

body {
font-size: 0.65rem;
letter-spacing: 0.05em;
line-height: 1.55;
}

.gallery {
width: 98%;
margin: 3% auto;
}

#head {
margin-top: 3%;
margin-bottom: 6%;
line-height: 1.5;
}

.gallery-image {
width: calc(100vw - 75px);
}

.gallery-info {
width: calc(100vw - 75px);
}

.gallery-caption {
font-size: 0.65rem;
line-height: 1.55;
}

.gallery-arrow {
width: 30px;
height: 30px;
font-size: 0.9rem;
line-height: 30px;
}

}