header {
    width: calc(100% - 310px);
}

.page {
    margin: 0;
    height: 100vh;
}

.section h1,
.section h2 {
    font-family: 'Uncial Antiqua', serif;
}

.section h1,
.section h2,
.section h3 {
    text-align: center;
}

.section h1 {
    font-weight: 400;
    font-size: 3em;
    text-shadow: 0 0 20px black;
}

.section h2 {
    font-size: 2em;
}

.section h3 {
    font-weight: normal;
}

.section--header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--cream);
    position: relative;
    height: 100vh;
    padding: 0;
    z-index: 11;
}

.section--header video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    object-fit: cover;
}

.section--header .logo-accueil {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-transform: uppercase;
    z-index: 12;
}

.section--header .logo-accueil img {
    width: 40%;
}

.section--about {
    padding: 200px 350px 100px 350px;
}

.section--about * {
    line-height: 1.5em;
}

.tree-roots {
    /*background-image: url("/assets/img/tree-roots.png");*/
    background-image: url("/assets/img/logos/tree.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 50px;
}

.tree-roots h2 {
    font-size: 3em;
}

.tree-roots h2:first-of-type {
    text-align: left;
    margin-top: 0;
    padding: 0 0 50px 50px;
}

.tree-roots h2:last-of-type {
    text-align: right;
    margin-bottom: 0;
    padding: 50px 50px 0 0;
}

.games-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-around;
    gap: 20px;
    width: 100%;
}

.games-container article {
    background: #fff7f1;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    width: 350px;
    display: flex;
    flex-direction: column;
}

.game-header {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.game-header img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.game-header .game-type-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
}

.game-header h2 {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: calc(100% - 40px);
    font-size: 1em;
    color: var(--cream);
    text-shadow: 0 0 10px black;
}

.game-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 50px 30px;
    flex: 1;
}

.section--jeu {
    position: relative;
    height: calc(100vh - 100px);
    padding: 100px 0 0 0;
}

.section--jeu .video-header {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 150px;
    background-color: black;
    text-align: center;
}

.section--jeu .video-header video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    object-fit: cover;
}

.section--jeu .jeu-container {
    display: flex;
    flex-direction: row;
    gap: 50px;
    padding: 0 250px;
    margin: 100px auto;
    height: 100%;
    z-index: 1;
}

.section--jeu .jeu-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.section--jeu .jeu-description p {
    text-align: left;
}

.section--jeu .jeu-description a,
.section--clef-en-main a {
    background: var(--orange);
    color: var(--text);
}

.section--jeu .jeu-description a:hover {
    background: var(--cream);
    color: var(--orange);
}

.section--jeu .jeu-infos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 400px;
}

.section--jeu .jeu-infos img {
    width: 100%;
}

.section--jeu .jeu-infos-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 80%;
    margin: auto;
}

.section--jeu .jeu-infos-row svg {
    width: 75px;
}

.section--jeu .jeu-infos-row p {
    width: 100%;
    text-align: center;
}

.section--clef-en-main {
    flex-direction: row;
    padding: 100px 0 0 0;
    height: calc(100vh - 100px);
    --clef-map-delay: 0.5s;
    --clef-map-duration: 1.5s;
    --clef-game-duration: 0.5s;
    --clef-game-stagger: 0.8s;
}

.section--clef-en-main .clef-cover {
    height: 100%;
}

.section--clef-en-main h2,
.section--clef-en-main h3 {
    margin: 0;
    text-align: right;
}

.section--clef-en-main a:hover {
    background: var(--green-medium);
}

.section--clef-en-main .clef-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 50px;
    width: 100%;
    height: calc(100% - 100px);
    justify-content: space-between;
}

.section--clef-en-main .clef-map {
    width: 100%;
    position: relative;
}

.section--clef-en-main .clef-map-container {
    width: 100%;
    overflow: hidden;
}

.section--clef-en-main .clef-map-content {
    position: relative;
    width: 100%;
}

.section--clef-en-main .clef-map-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.section--clef-en-main .clef-game {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    padding: 20px 50px;
    color: var(--green-medium);
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    transform-origin: center;
    opacity: 1;
    transform: scale(1);
}

.section--clef-en-main .clef-game img {
    width: 50px;
}

.section--clef-en-main .plateau {
    top: 7%;
    left: 12%;
}

.section--clef-en-main .escape-game {
    top: 55%;
    left: 35%;
}

.section--clef-en-main .murder-party {
    top: 17%;
    right: 8%;
}

.section--clef-en-main .clef-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.section--clef-en-main .clef-content p {
    margin: 0;
    text-align: center;
}

.section--clef-en-main.clef-map-ready .clef-map-content {
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--clef-map-duration) ease;
    transition-delay: var(--clef-map-delay);
    will-change: clip-path;
}

.section--clef-en-main.clef-map-ready.is-visible .clef-map-content {
    clip-path: inset(0 0 0 0);
}

.section--clef-en-main.clef-map-ready .clef-game {
    opacity: 0;
    transform: scale(1.2);
    transition: opacity var(--clef-game-duration) ease, transform var(--clef-game-duration) ease;
}

.section--clef-en-main.clef-map-ready.is-visible .clef-game {
    opacity: 1;
    transform: scale(1);
    background: none;
}

.section--clef-en-main.clef-map-ready.is-visible .clef-game:hover {
    transform: scale(1.1);
    color: var(--orange);
}

.section--clef-en-main.clef-map-ready.is-visible:not(.clef-games-ready) .plateau {
    transition-delay: calc(var(--clef-map-delay) + var(--clef-map-duration));
}

.section--clef-en-main.clef-map-ready.is-visible:not(.clef-games-ready) .escape-game {
    transition-delay: calc(var(--clef-map-delay) + var(--clef-map-duration) + var(--clef-game-stagger));
}

.section--clef-en-main.clef-map-ready.is-visible:not(.clef-games-ready) .murder-party {
    transition-delay: calc(var(--clef-map-delay) + var(--clef-map-duration) + (var(--clef-game-stagger) * 2));
}

.section--teambuilding {
    flex-direction: row;
    gap: 20px;
}

.section--teambuilding .teambuilding-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: calc(50% - 10px);
}

.section--teambuilding .teambuilding-infos {
    background: rgba(255, 255, 255, 0.6);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    border-radius: 10px 10px 0 0;
    padding: 20px 50px 20% 50px;
}

.section--teambuilding .teambuilding-infos h2 {
    margin: 0;
    padding: 0;
    color: var(--green-medium);
}

.section--teambuilding .teambuilding-infos p {
    color: var(--green-medium);
    text-align: center;
    font-weight: bold;
}

.section--teambuilding .teambuilding-infos p.bordered {
    margin-top: 0;
    padding-bottom: 20px;
    border-bottom: 3px dashed brown;
}

.section--teambuilding .teambuilding-container p {
    text-align: center;
    font-size: 1.2em;
    line-height: 1.2em;
    font-weight: bold;
}

.section--teambuilding .teambuilding-container img {
    width: 100%;
}

.section--teambuilding a {
    color: var(--orange);
    background: var(--cream);
}

.section--teambuilding a:hover {
    color: var(--text);
    background: var(--green-medium);
}

.section--comments {
    background: url("/assets/img/foret-riviere.jpg");
    background-size: cover;
    color: var(--cream);
}

.section--comments h2 {
    text-shadow: 0 0 20px black;
}

.section--contact {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.section--contact .contact-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 30%;
}

.section--contact .contact-container img {
    width: 100%;
}

.section--contact .contact-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.section--contact .contact-content h3 {
    color: var(--green-medium);
    font-weight: bold;
}

.section--contact .contact-content p {
    text-align: center;
}

.section--contact .contact-content a {
    color: var(--green-medium);
}

.section--contact .contact-content a:hover {
    color: var(--orange);
}

.section--footer {
    height: calc(100vh - 100px);
    padding: 0;
}