.generic-content {
    padding: 128px 0 64px;
    width: min(1500px, 90%);
    margin: auto;
}

.generic-content h1 {
    text-align: center;
    margin-bottom: 64px;
}

.generic-content h1.split {
    display: flex;
    flex-flow: column;
    gap: 6px;
}

.generic-content h2 {
    margin: 16px 0 24px 0;
}

.generic-content h2.spectacle_title{
    text-align: center;
    font-size: 1.75rem;
    margin: 64px 0 32px;
    text-decoration: underline 2px solid black;
    text-underline-offset: 3px;
}

.generic-content h3{
    font-size: 1.45rem;
    margin: 24px 0 12px 0;
}

.generic-content p {
    text-align: justify;
}

.generic-content ul {
    list-style: inside;
    margin: 8px 0 4px;
}

.generic-content b {
    font-weight: 400;
    color: var(--BLUE-COLOR);
}

.generic-content strong {
    color: var(--BLUE-COLOR);
}

.generic-content dfn {
    color: var(--BLUE-COLOR);
}

.generic-content q,
.generic-content blockquote {
    font-style: italic;
}

.generic-content .split-content {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.generic-content .split-content-two_one {
    display: grid;
    align-items: center;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
}

.generic-content .split-content-one_two {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 2fr;
    gap: 32px;
}

.generic-content .split-content-one_three {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 3fr;
    gap: 32px;
}

.generic-content .split-content-three_one {
    display: grid;
    align-items: center;
    grid-template-columns: 3fr 1fr;
    gap: 32px;
}

.generic-content img.centered {
    display: block;
    width: min(450px, 90%);
    margin: 24px auto;
}

.generic-content img.styled {
    box-shadow: 0 0 8px RGBa(0, 0, 0, .25);
    border-radius: 16px;
}

.generic-content .background_image {
    position: absolute;
    z-index: -1;
}

body {
    /* background-color: black; */
}

#background_rideau_container {
    position: absolute;
    z-index: -2;
    width: 100%;
    left: 0;
    top: 0;
    opacity: .2;
    background-image: linear-gradient(to bottom, RGBA(0, 0, 0, 0) 80%, white), url(../media/rideaux-cinema-theatre-illustration-vectorielle-lumiere-mise-au-point_1017-38346.avif);
    background-repeat: no-repeat;
    background-size: cover;
    height: 1000px;
}

.generic-content .foreground_image {
    position: absolute;
    z-index: -1;
}

.generic-content #top_left_page_background.foreground_image {
    top: 0;
    left: 0;
    width: min(500px, 40%);
}

.generic-content #top_right_page_background.foreground_image {
    top: 0;
    right: 0;
    width: min(500px, 40%);
}

.generic-content img.miroir_horizontal {
    transform: rotateZ(180deg);
}

.generic-content img.horizontal_reverse {
    transform: rotateY(180deg);
}

.generic-content #bottom_right_background.background_image {
    bottom: 0;
    right: 0;
    opacity: .5;
    width: min(350px, 80%);
}

.generic-content #top_left_page_background.background_image {
    top: 0;
    left: 0;
    opacity: .24;
    width: min(750px, 100%);
}

.generic-content .confirmation_box {
    display: flex;
    flex-flow: column;
    gap: 16px;
    background-color: RGBa(255, 255, 255, .95);
    border-radius: 16px;
    box-shadow: 0 0 8px RGBa(0, 0, 0, .25);
    padding: 42px;
    font-size: 1.15rem;
    margin: 120px 0 200px;
}

.generic-content .confirmation_box p {
    text-align: center;
}

#rdv-confirme .background_bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(../media/foret_fond.webp);
    background-repeat: repeat-x;
    opacity: .12;
    width: 100%;
    height: 294px;
    z-index: -1;
}

.generic-content .video_teaser {
    background-image: linear-gradient(to bottom, #261407, #160400);
    display: block;
    width: min(1000px, 100%);
    margin: auto;
    aspect-ratio: 16 / 9;
    box-shadow: 0 0 8px RGBa(0, 0, 0, .25);
    border-radius: 16px;
}

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

    .generic-content .split-content-two_one,
    .generic-content .split-content-one_two,
    .generic-content .split-content-one_three,
    .generic-content .split-content-three_one  {
        grid-template-columns: 1fr;
    }
}