/* VARIABLE */
html {
    --header-background: #202125;
    --header-nav-color: inherit;
    --header-nav-background: #202125;
    --header-nav-button-background: #26292e;
    --header-nav-hover-background: #393d44;
    --header-sub-nav-background: #424242;
    --header-where-I-am-color: #d4d4d4;
    --header-where-I-am-background: #616161;
    --footer-link-color: inherit;
    --footer-background: var(--header-background);
    --main-background: #36383f;
    --footer-text-margin: 5px;
    --footer-line-height: 15px;
    --footer-height: calc(
        4 * var(--footer-line-height) + 4 * var(--footer-text-margin)
    );
    --text-color: #ffffff;
    --link-color: #c0c1c5;
    --visited-link-color: #dedfee;
    --danger-link-color: #85100f;
    --partenariats-height: 43vw;
    min-height: 100%;
    position: relative;
}

a:visited {
    color: var(--visited-link-color);
}

a {
    color: var(--link-color);
}

header,
main,
footer {
    color: var(--text-color);
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-Regular.ttf);
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Regular.ttf);
    font-display: swap;
}

body {
    background-color: var(--main-background);
}

body,
button {
    font-family: Montserrat, Roboto, sans-serif;
}

html,
body {
    margin: 0;
    padding: 0;
}

/* SECTION - HEADER */
/* MENU BURGER */

#nav-menu-toggle {
    width: 60px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    transition: all 0.5s ease;
    align-items: center;
    grid-area: 1 / 1 / 2 / 2;
}

.line {
    display: block;
    width: 40px;
    height: 6px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    background: #000000;
    border-radius: 4px;
    transition: all 0.5s ease;
}

#nav-checkbox {
    display: none;
}

#nav-checkbox:checked ~ #nav-menu-toggle .line:nth-child(1) {
    transform: translateY(0.9rem) rotate(45deg);
}

#nav-checkbox:checked ~ #nav-menu-toggle .line:nth-child(2) {
    opacity: 0;
    transform: translateX(-100vw);
    overflow: hidden;
}

#nav-checkbox:checked ~ #nav-menu-toggle .line:nth-child(3) {
    transform: translateY(-0.9rem) rotate(-45deg);
}

.nav-menu {
    height: 0;
    overflow: hidden;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}

.nav-menu > li > button,
.nav-menu > li > a > button {
    width: 50vw;
}

.nav-menu > li > ul {
    display: none;
    margin-top: 5px;
    width: 50vw;
}

.nav-menu > li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 100px;
    align-items: center;
}

#nav-checkbox:checked ~ .nav-menu {
    transition: 1s;
    height: auto;
}

.nav-menu li {
    list-style: none;
    text-align: center;
    margin: 10px;
}

.nav-menu li ul li,
.nav-menu li ul li a,
.nav-menu li ul li a button {
    width: 100%;
    margin: 0;
    padding: 0;
}

.nav-menu li ul li {
    margin-top: 15px;
}

.nav-menu li a {
    padding: 5px 15px;
    border-radius: 5px;
}

header {
    background-color: var(--header-background);
}

header nav {
    margin-top: 0;
}

header nav > img {
    height: 75px;
    width: 75px;
}

header ul {
    margin: 0;
    padding: 0;
}

header ul li img {
    height: 1.2em;
    width: 1.2em;
}

header > nav > a > img {
    height: 15vw;
    width: 15vw;
}

header ul li a {
    color: var(--header-nav-color);
    text-decoration: none;
    margin: 5px;
}

header ul li ul li a {
    color: var(--header-sub-nav-color);
}

header ul li > a,
header ul li span {
    cursor: pointer;
    padding: 5px;
    margin: 0;
}

#nav-bar {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    color: var(--header-nav-color);
    text-decoration: none;
}

header > p {
    margin: 0;
    padding: 0;
    color: var(--header-where-I-am-color);
    background-color: var(--header-where-I-am-background);
    padding-left: 5px;
}

header > p a {
    color: inherit;
    margin: 0;
}

header button {
    background-color: var(--header-nav-button-background);
    color: #ffffff;
    border: 1px solid #146bd6;
    padding: 5px;
}

header li button img {
    filter: invert(100%) sepia(4%) saturate(563%) hue-rotate(210deg)
        brightness(115%) contrast(100%);
}

/* SECTION - END HEADER */
/* SECTION - MAIN */

main {
    height: 80%;
    margin: 1vw;
    margin-bottom: calc(var(--footer-height) + 15px);
}

main > div,
main article,
main section {
    margin: 5px;
    text-align: justify;
    padding: 5px;
}

main > div.no-margin,
main article.no-margin,
main section.no-margin {
    margin: 5px 0;
    padding: 5px 0;
}

main form {
    display: grid;
    gap: 5px;
    justify-content: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 15px;
}

main.column-2 > div:nth-child(2) {
    width: 95vw;
}

#news {
    display: flex;
    flex-direction: column-reverse;
    max-width: 95vw;
    height: 60vh;
    overflow-y: scroll;
    padding: 0;
    border: 1px solid #8dadd1;
}

#news article {
    max-width: 100%;
    margin: 0;
    margin-bottom: 5px;
    border: 1px solid #99bce5;
    background: rgba(255, 255, 255, 0.24);
    text-align: center;
}

#news article:first-child {
    margin-bottom: 0;
}

#news article > h3 {
    text-align: end;
}

#news article span {
    display: block;
    min-height: 1em;
    word-wrap: break-word;
}

#news article img {
    width: 95%;
}

#news p {
    margin-bottom: 0;
    padding-bottom: 5px;
}

#staff-list > figure {
    margin: 0;
}

#staff-list > figure > img {
    height: auto;
}

#guide_contenu.preview section {
    border: 1px solid black;
    padding: 5px;
}

#add_controls {
    display: grid;
    grid-template-columns: 25vw 1fr 1fr;
    gap: 1vw;
}

#add_controls #titre {
    grid-column: 2 / 3;
}

#add_controls textarea {
    grid-column: 1 / 4;
    height: 100px;
}

#guide_contenu span,
#guide_contenu p,
#guide_contenu li {
    position: relative;
}

#guide_contenu #utils_toolbox {
    position: absolute;
    right: 0;
    top: -2rem;
    width: fit-content;
}

#utils_toolbox #delete,
#guide_controls #addListElement {
    display: none;
}

#utils_toolbox button img {
    height: 1.5em;
    max-height: 15px;
    min-height: 10px;
    width: 1.5em;
    max-width: 15px;
    min-width: 10px;
}

#guide_controls button {
    margin: 5px;
}

#guide_controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

article.success,
article.warning,
article.error {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 50px minmax(150px, 280px);
    padding: 0;
    /* background-color: #00000010; */
    border: 1px solid #00000040;
    box-shadow: 1px 1px #00000040;
    width: fit-content;
    column-gap: 5px;
    margin: 2em;
    min-height: 3rem;
}

article.success {
    border-left: 5px solid #00ff00;
}

article.warning {
    border-left: 5px solid #ff7700;
}

article.error {
    border-left: 5px solid #ff0000;
}

article.success section,
article.warning section,
article.error section {
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

article.success section:nth-child(1),
article.warning section:nth-child(1),
article.error section:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

article.success section:nth-child(1) img,
article.warning section:nth-child(1) img,
article.error section:nth-child(1) img {
    height: 2rem;
}

article.success section:nth-child(2),
article.warning section:nth-child(2),
article.error section:nth-child(2),
article.success section:nth-child(2) p,
article.warning section:nth-child(2) p,
article.error section:nth-child(2) p {
    margin-right: 5px;
}

section[draggable="true"] {
    border: 1px solid black;
    padding: 5px;
    margin: 5px;
}

.terms {
    counter-reset: title subtitle;
}

.terms h3::before {
    counter-increment: title;
    content: "Section " counter(title) " - ";
}

.terms h3 {
    counter-set: subtitle;
}

.terms h4::before {
    counter-increment: subtitle;
    content: counter(title) "." counter(subtitle) " ";
}

.terms h2,
.terms h3,
.terms h4 {
    text-align: left;
}

.terms h2 {
    font-size: 1.75rem;
}

.terms h3 {
    font-size: 1.5rem;
}

.terms h4 {
    font-size: 1.3rem;
}

figure,
figure img,
figure abbr img {
    max-width: 100%;
}

figure abbr:has(img) {
    height: 0;
}

.text-center {
    text-align: center;
}

.danger a {
    color: var(--danger-link-color);
}

.tos {
    background-color: rgba(255, 115, 0, 0.1);
    border: 1px dashed red;
    text-align: center;
    margin: 5px;
}

.tos > * {
    text-align: center;
}

#partenariats > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    align-items: center;
    justify-content: center;
}

#partenariats a {
    height: var(--partenariats-height);
    width: var(--partenariats-height);
    position: relative;
}

#partenariats a p {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    margin-bottom: 0;
    color: #eee;
    background-color: rgba(0, 0, 0, 0.51);
    border-radius: 1vw;
}

#partenariats a img {
    width: 100%;
}

#partenariats .lataverne {
    background: url(../images/logo/lataverne.svg) no-repeat;
}

#partenariats .lataverne p {
    width: calc(var(--partenariats-height) / 1.72);
    margin: calc(var(--partenariats-height) / 9.2)
        calc(var(--partenariats-height) / 9.7);
}

#partenariats .listeServeurMinecraft {
    background: url(https://www.liste-serveurs-minecraft.org/wp-content/themes/DL/framework/img/logo3.png)
        no-repeat center;
}

main.events > section > div {
    display: grid;
    grid-template-columns: 1fr;
}

main.events section article article {
    margin: 5px 0;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-radius: 15px;
}

main.events article div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

main.events article div figure {
    position: relative;
    width: 100%;
}

main.events article div figure img {
    width: 99%;
}

main.events article div figure figcaption {
    position: absolute;
    bottom: 2%;
    background-color: #7979799d;
    width: calc(99% - 30px);
    padding: 0 15px;
    border-radius: 15px;
    text-align: center;
}

/* SECTION - END MAIN */
/* SECTION - FOOTER */

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--footer-height);
    width: 100%;
    background-color: var(--footer-background);
    text-align: center;
}

footer p {
    margin: var(--footer-text-margin);
    line-height: var(--footer-line-height);
}

footer > p:nth-child(2) {
    margin: 0;
}

footer a {
    color: var(--footer-link-color);
    line-height: inherit;
}

footer footer.fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
}

/* SECTION - END FOOTER */

@media screen and (min-width: 500px) {
    html {
        --partenariats-height: 30vw;
    }

    #partenariats > div {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 720px) {
    html {
        --footer-height: calc(
            3 * var(--footer-line-height) + 4 * var(--footer-text-margin)
        );
        --partenariats-height: 22vw;
    }

    #partenariats > div {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    #nav-checkbox:checked ~ .nav-menu {
        transition: 0s;
    }

    .nav-menu {
        flex-direction: row;
        align-items: center;
        height: auto;
        justify-content: space-around;
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 3vw 10vw 10vw 3vw;
        justify-items: center;
    }

    .nav-menu.second > li:nth-child(1) {
        grid-column-start: 2;
    }

    .nav-menu.second > li:nth-child(2) {
        grid-column-start: 3;
    }

    .nav-menu.second > li:nth-child(3) {
        grid-column-start: 4;
    }

    .nav-menu > li,
    .nav-menu > li > button,
    .nav-menu > li > a > button,
    .nav-menu > li > ul,
    .nav-menu > li > ul > li {
        width: auto;
    }

    #nav-menu-toggle {
        display: none;
    }

    header > nav {
        display: grid;
        grid-template-columns: 30vw 1fr 30vw;
        padding: 5px;
        position: sticky;
    }

    header > nav > #nav-bar {
        justify-content: center;
        flex-direction: row;
    }

    #nav-bar {
        width: 100%;
    }

    header > nav > ul {
        justify-content: center;
    }

    header,
    .nav-menu {
        overflow: visible;
    }

    .nav-menu li {
        margin: 0;
    }

    .nav-menu > li {
        height: 15px;
        position: relative;
        align-items: center;
        margin: 0 10px;
        min-width: unset;
    }

    .nav-menu > li > ul {
        position: absolute;
        display: none;
        flex-direction: column;
        align-items: center;
        margin-top: 23px;
        top: 0;
        overflow: visible;
        /* padding: 12px 16px; */
        z-index: 1;
        background-color: var(--header-sub-nav-background);
    }

    .nav-menu > li > button,
    .nav-menu > li > a > button {
        font-size: 1rem;
    }

    .nav-menu > li > ul > li:has(span),
    .nav-menu > li > ul > li > span {
        display: inline-block;
        padding: 0;
        margin: 0;
        height: 0;
        border: 0;
    }

    .nav-menu > li > ul > li > span {
        border-top: 1px solid #000000;
    }

    .nav-menu > li > a {
        padding: 0;
    }

    .nav-menu li button {
        border-radius: 5px;
    }

    .nav-menu li:hover button {
        background-color: var(--header-nav-hover-background);
    }

    .nav-menu > li > ul,
    .nav-menu li:hover > a > button {
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }

    .nav-menu > li:hover > ul {
        display: flex;
        min-width: 3rem;
    }

    .nav-menu > li:hover > button,
    .nav-menu > li:hover > a > button {
        scale: 1.05;
    }

    .nav-menu > li > ul > li,
    .nav-menu > li > ul > li > a {
        margin: 0;
        padding: 0;
    }

    .nav-menu > li > ul > li > a {
        display: inline-block;
    }

    .nav-menu > li > ul > li,
    .nav-menu > li > ul > li > a,
    .nav-menu > li > ul > li > a > button {
        width: 100%;
    }

    .nav-menu > li > ul > li {
        width: 100%;
    }

    .nav-menu button {
        cursor: pointer;
    }

    .nav-menu > li > ul > li:hover {
        scale: 1.05;
    }

    .nav-menu > li > ul > li:nth-child(1) {
        border-top: 0;
    }

    .nav-menu > li > button,
    .nav-menu > li > a > button {
        width: auto;
    }

    #nav-bar > img {
        height: 75px;
        width: 75px;
        margin-right: 5px;
    }

    .nav-menu.first {
        grid-column: 1 / 2;
        grid-row: 1;
    }

    #nav-bar {
        grid-column: 2 / 3;
        grid-row: 1;
    }

    main {
        max-width: 100vw;
    }

    header > p {
        margin-top: 0;
    }

    header nav li img {
        height: 1rem;
        width: 1rem;
    }

    ul.column {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    ul.column > li {
        padding: 0 40px 0 0;
    }

    .home .column-2 {
        display: grid;
        grid-template-columns: 60vw 35vw;
        column-gap: 1vw;
    }

    .column-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    main.home > div {
        margin: 0;
        padding: 0;
    }

    #news {
        margin: 0 5px 0 0;
    }

    #staff-list {
        display: grid;
        justify-content: center;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 7px;
    }

    h1 {
        font-size: 2.2rem;
    }

    #staff-list > img {
        max-width: 90%;
        margin: 15px 0;
    }

    #staff-list > #administrateurs,
    #staff-list > #modérateur,
    #staff-list > #assistants,
    #staff-list > #builder {
        margin-top: 5px;
    }

    #staff-list > #fondateur,
    #staff-list > #asomniscius,
    #staff-list > #administrateurs,
    #staff-list > #admin_sys,
    #staff-list > #modérateur,
    #staff-list > #assistants,
    #staff-list > #builder,
    #staff-list > #_zauweh_ {
        grid-column: 2/3;
    }

    #staff-list > #elondario,
    #staff-list > #maitre_yuida,
    #staff-list > #dux68,
    #staff-list > #flooorine {
        grid-column: 1/2;
    }

    #staff-list > #taemasu7,
    #staff-list > #javee_fr {
        grid-column: 3/4;
    }

    main.column-2 > div:nth-child(2) {
        width: unset;
    }

    #guide_controls > button > img {
        position: absolute;
        display: none;
        flex-direction: column;
        align-items: center;
        margin-top: 23px;
        top: 0;
        overflow: visible;
        /* padding: 12px 16px; */
        z-index: 1;
        background-color: var(--header-sub-nav-background);
    }

    #guide_controls > button:hover > img {
        display: block;
    }

    #guide_controls {
        grid-template-columns: 1fr 1fr 1fr;
    }

    main.events > section > div {
        /* grid-template-columns: 1fr 1fr; */
        grid-template-columns: 1fr 50% 1fr;
    }

    main.events > section > div > *:first-child {
        grid-column-start: 2;
    }

    main.events section article article {
        border: 1px solid #000000;
    }

    main.events section article article {
        border-left: none;
        border-right: none;
    }
}

@media screen and (min-width: 1024px) {
    html {
        --partenariats-height: 15vw;
    }
    main.column-2 {
        grid-template-columns: 1fr 450px;
    }

    .nav-menu > li > button,
    .nav-menu > li > a > button {
        font-size: 1.4rem;
    }

    header > nav {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #guide_controls {
        grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
        grid-template-rows: 5em 5em;
        justify-content: center;
    }

    #partenariats > div {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    /* main.events > section > div {
        grid-template-columns: 1fr 1fr 1fr;
    } */

    /* main.events section article article:nth-child(2n) {
        border-left: 1px solid #000000;
    }

    main.events section article article:nth-child(3n-1),
    main.events section article article:nth-child(3n) {
        border-left: none;
    } */
}

@media screen and (min-width: 1300px) {
    html {
        --partenariats-height: 180px;
    }

    #partenariats > div {
        grid-template-columns: repeat(auto-fill, var(--partenariats-height));
    }

    /* main.events > section > div {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    } */

    /* main.events section article article:nth-child(3n-1),
    main.events section article article:nth-child(3n) {
        border-left: 1px solid #000000;
    }

    main.events section article article:nth-child(4n-2),
    main.events section article article:nth-child(4n-1),
    main.events section article article:nth-child(4n) {
        border-left: none;
    } */
}