body {
    margin: 0;
    padding-top: 4em;
    background-color: var(--pale);
}

main {
    margin-top: 4em;
}

hr {
    border-bottom: none;
    border-top-width: 0.15em;
    border-color: black;
}

.italic {
    font-family: maxtrix-ii, serif;
    font-style: italic;
    font-size: 1.05em;
}

.medium {
    font-family: transat-text, sans-serif;
    font-weight: 400;
}

.echappee {
    font-family: transat-text, sans-serif;
    font-style : italic;
}


/* ----------------- Titre -----------------*/

.real-titre {
    margin-left: 7em;
    margin-right: 7em;
}

.real-titre h1 {
    text-align: center;
    text-transform: uppercase;
    font-family: transat-text, sans-serif;
    margin-bottom: 0;
}

.real-titre h3 {
    margin-top: 0;
    font-family: transat-text, sans-serif;
    font-weight: 400;
    text-align: center;
    margin-bottom: 1em;
    font-size: 1.4em;
}

/*----------------- Information ------------ */


.info {
    margin-top: 4em;
    margin-bottom: 6em;
}

.info div {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.details-info {
    display : block;
    justify-content: center;
}

.details-info p {
    font-family: transat-text, sans-serif;
    padding-left: 0.5em;
    font-weight: 500;
}

i {
    margin-top: 1em;
    margin-bottom: 1em;
    height: 16px;
    width: 16px;
}


/* --------- Texte description ------------- */

.text-description {
    margin: 3em 6em 0;
}

.text-description h3 {
    font-family: transat-text, sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    /*font-size: 1.2em;*/
    margin-bottom: 0;
    text-align: left;
}

.text-description p {
    font-family: transat-text, sans-serif;
    font-weight: 300;
    font-size: 1.1em;
    /*padding-right: 2em;*/
    text-align: left;
}

/* ---------- Section Grid ------------ */

section {
    margin: 3em 6em;
}

.container {
    margin-top: 2em;
    display: grid;
    grid-template-columns: 60% 40%;
    /*gap: 2em;*/
    /*gap: 0;*/
    /*margin: 3em 6em;*/
    /*background-color: #B0ACBE;*/
}

/*-- Texte --*/

.text {
    padding-top: 0;
    /*padding-right: 2em;*/
    /*border-right: 2px solid black;*/
    /*border-left: 2px solid black;*/
    /*border-bottom: 2px solid black;*/
}

section h3 {
    font-family: transat-text, sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    /*font-size: 1.2em;*/
    margin-bottom: 0;
    text-align: left;
}

.container p {
    margin-top: 0;
    font-family: transat-text, sans-serif;
    font-weight: 300;
    font-size: 1.1em;
    padding-right: 2em;
    text-align: left;
}

.text-affiche h3 {
    font-family: transat-text, sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    /*font-size: 1.2em;*/
    margin-bottom: 0;
    text-align: left;
}

/*-- Image -- */

.real-image {
    /*border: 2px solid black;*/
    /*border-left: none;*/
    /*padding: 1em;*/
    width: 100%;
    height: 60vh;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /*text-align: left;*/
    background-size: cover;
    /*background-color: #FF9505;*/
}

#img-bookari {
    height: 60vh;
}

#img-stellaris {
    width: 50%;
}


#img-bernin {
    height: 70vh;
}


#img-bernin img {
    height: 125%;
}

#img-musique {
    height: 85vh;
}

#img-musique img {
    transform: translateX(-7%);
}

.real-image img {
    /*height: 100%;*/
    /*transform: translateX(-30%);*/
    /*width: 100%;*/
    height: 100%;
    /*position: relative;*/
    /*top: 0;*/
}

.real-image #bernin{
    /*transform: translateX(-20%);*/
}

.real-image #musique {
    /*transform: translateX(-30%);*/
}


/*--------------- Galerie --------------------*/


.galerie {
    margin-top: 6em;
}

.galerie h1 {
    text-align: center;
    text-transform: uppercase;
    font-family: transat-text, sans-serif;
    margin-bottom: 0;
}

.video {
    display: flex;
    justify-content: center;
    margin-top: 4em;
}

iframe {
    border-radius: 5px;
}

#images-musique {
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin: 2em 6em 0;
    /*gap: 1em;*/
}

#images-musique div {
    height: 500px;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /*text-align: left;*/
    background-size: cover;
}

#images-musique img {
    max-height: 90%;
    max-width: 120%;
}

#images-bernin {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    margin: 1em 6em 0;
    gap : 1em;
}

#images-bernin div {
    height: 500px;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /*text-align: left;*/
    background-size: cover;
}

#images-bernin img {
    max-height: 100%;
    max-width: 100%;
}

/* ---------------------- Footer -------------------- */

footer {
    margin-top: 3em;
}