/* CSS pour la page LORE */
/* Le CSS de mode desktop */
/*@font-face {
    font-family: "bebas";
    src: url(assets/font/BebasNeue\ Regular.otf);

}

@font-face {
    font-family: "inter";
    src: url(assets/font/Inter-VariableFont_opsz\,wght.ttf);
}
*/
/* -------- DÉBUT DE BODY HTML --------- */

body {
    background-color: #101012;
    min-height: 100vh;


}

nav {
    display: flex;
    justify-content: space-between;
    background-color: #101012;
    text-transform: uppercase;
    align-items: center;
    padding: 10px 10px 10px 10px;
    position: relative;
    width: 100%;


    /* Petit espace autour du logo */

}

nav::after {
    content: "";
    position: absolute;
    background: #FFFFFF;
    height: 1px;
    width: 99%;
    bottom: -1px;
    opacity: 0.2;
    overflow: hidden;

}

/* Police d'écriture */
nav h1 {
    font-size: 24px;
    font-family: "Bebas Neue";
    color: #FAFAFA;
}

/* Groupe des liens texte */
.nav-links {
    display: flex;
    gap: 50px;
}

/* Style des liens, ici retire ceux mis automatiquement */
.nav-links a {
    text-decoration: none;
    color: inherit;
}

/* Lien actif en rouge */
.nav-links a.active h1 {
    color: #FF0000;
}

/* Effet de survol permettant de changer de couleur le texte en passant dessus */
.nav-links a:not(.active):hover h1 {
    color: #FF0000;
    opacity: 0.8;
}

/* Groupe des icônes sociales */
.social-icons {
    display: flex;
    gap: 50px;
    padding: 0 10px;
}

/* Effet de survol : le logo devient un peu transparent */
.social-icons a:hover img {
    opacity: 0.7;
}

/* Centrer le titre, le text, le sous-titre, et le sous-titre description de page */
div.titre,
div.titre p.titredes,
div.soustitre h3,
div.soustitre p.titredes {
    width: 800px;
    margin: auto;
}

h1 {
    font-family: "Bebas Neue", sans-serif;
    color: #FAFAFA;
    font-size: 90px;
    margin-top: 0px;
    margin-bottom: 0px;
}

h3 {
    font-family: "Inter", sans-serif;
    color: #FAFAFA;
    font-size: 40px;
    font-family: "Bebas Neue", sans-serif;
}

p {
    font-family: "Inter", sans-serif;
    color: #A0A0A0;
    font-size: 16px;
}

p.titredes {
    padding-top: 0px;
    padding-bottom: 10px;
}

div.titre p,
div.soustitre,
h1,
div.soustitre h3 {
    text-align: center;
    margin-top: 50px;
}

div.titre {
    border-bottom: 2px solid #FF0000;
    padding-right: 10%;
    padding-left: 10%;
}

h4 {
    text-align: left;
    font-family: "Bebas Neue", sans-serif;
    color: #FAFAFA;
    font-size: 24px;
    margin-top: 5px;
    margin-bottom: 5px;
}

p.imagedes {
    text-align: left;
    font-size: 16px;
    /*12px*/
    margin-top: 5px;
    margin-bottom: 5px;
}

p.des {
    text-align: left;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Décorer le contenu de grid */
/* Couleurs !!!! */
div.div1 p.imagedes {
    color: #05FF76;
}

div.div2 p.imagedes {
    color: #FFEA00;
}

div.div3 p.imagedes {
    color: #FF0000;
}

div.div4 p.imagedes {
    color: #FFEA00;
}

div.div6 p.imagedes {
    color: #05FF76;
}

.div1,
.div2,
.div3,
.div4,
.div5,
.div6 {
    background-color: #1C1D1F;
}

img {
    margin-top: 10px;
}

img.niv1 {
    width: 80%;
}

img.niv2 {
    width: 40%;
}

h4,
p.imagedes,
p.des {
    margin-left: 10px;
    margin-right: 10px;
}

.div1,
.div2,
.div3,
.div4,
.div5,
.div6 {
    display: inline-block;
    max-width: 400px;
    max-height: 400px;
    margin-right: 4px;
    margin-left: 4px;
    padding: 10px;
}

/* Modifier le grid */
div.parent {
    display: grid;
    grid-template-columns: repeat(5, 4fr);
    grid-column-gap: 16px;
    grid-row-gap: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    max-height: 400px;
}

.div1,
.div4 {
    grid-area: 1 / 2 / 2 / 3;
}

.div2,
.div5 {
    grid-area: 1 / 3 / 2 / 4;
}

.div3,
.div6 {
    grid-area: 1 / 4 / 2 / 5;
}

/* -------------- FIN DE BODY HTML ------------- */

/* ------------ DÉBUT DE MODE RESPONSIVE ----------- */
/* Mode Responsive : Tablette */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

    div.titre,
    div.titre p.titredes,
    div.soustitre h3,
    div.soustitre p.titredes,
    div.soustitre {
        width: 85%;
        padding-left: 20px;
        padding-right: 20px;
        margin: auto;
    }

    /* Modifier le grid */
    div.parent {
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 10px;
    }

    .div1,
    .div4 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .div2,
    .div5 {
        grid-area: 1 / 2 / 2 / 3;
    }

    .div3,
    .div6 {
        grid-area: 1 / 3 / 2 / 4;
    }

}

/* Mode responsive : Mobile */
@media screen and (max-device-width : 430px) and (orientation : portrait) {

    div.titre,
    div.titre p.titredes,
    div.soustitre h3,
    div.soustitre p.titredes,
    div.soustitre {
        width: 80%;
        padding-left: 20px;
        padding-right: 20px;
        margin: auto;
    }

    /* Modifier le grid */
    div.parent {
        grid-row-gap: 16px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat (3, 1fr);
        max-height: none;
    }

    div.div1,
    div.div4 {
        grid-area: 1 / 1 / 2 / 2;
    }

    div.div2,
    div.div5 {
        grid-area: 2 / 1 / 3 / 2;
    }

    div.div3,
    div.div6 {
        grid-area: 3 / 1 / 4 / 2;
    }
}

/* ------------- FIN DE MODE RESPONSIVE ---------------- */

/*FOOTER */
footer {
    padding: 40px 0 20px;
    background-color: #101012;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* LOGOS */
.footer-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #A0A0A0;
    position: relative;
}

/* Groupe gauche - 3 premiers logos - collés à gauche */
.footer-logos>img:nth-child(1) {
    position: absolute;
    left: 0;
}

.footer-logos>img:nth-child(2) {
    position: absolute;
    left: 48px;
}

.footer-logos>img:nth-child(3) {
    position: absolute;
    left: 96px;
}

/* Logo central ARC Raiders */
.footer-logo-arcraiders {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Groupe droite - 3 derniers logos - collés à droite */
.footer-logos a:nth-child(5) {
    position: absolute;
    right: 136px;
}

.footer-logos a:nth-child(6) {
    position: absolute;
    right: 68px;
}

.footer-logos a:nth-child(7) {
    position: absolute;
    right: 0;
}

/* Styles généraux des logos */
.footer-logo {
    width: auto;
    object-fit: contain;
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    display: block;
}

/* Tailles - Logo enlist.resist agrandi */
.footer-logos>img:nth-child(1),
.footer-logos>img:nth-child(2) {
    height: 40px;
}

.footer-logos>img:nth-child(3) {
    height: 70px;
}

.footer-logo-arcraiders {
    height: 120px;
}

.footer-logos a:nth-child(5) img,
.footer-logos a:nth-child(6) img,
.footer-logos a:nth-child(7) img {
    height: 40px;
}

/* Effet hover */
.footer-logo:hover {
    opacity: 0.8;
    transform: scale(1.05);
}



/* COPYRIGHT */
.footer-copyright {
    text-align: center;
    margin-bottom: 15px;
    padding: 0 20px;
}

.footer-copyright p {
    font-size: 11px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* LIENS */
.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    padding-bottom: 10px;
}

.footer-links a {
    color: #888;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

/*RESPONSIVE TABLETTE*/
@media (max-width: 1024px) {
    .footer-container {
        padding: 0 30px;
    }

    .footer-logos {
        padding-bottom: 20px;
        margin-bottom: 20px;
        min-height: 120px;
    }

    /* Groupe gauche tablette */
    .footer-logos>img:nth-child(1) {
        left: 0;
    }

    .footer-logos>img:nth-child(2) {
        left: 43px;
    }

    .footer-logos>img:nth-child(3) {
        left: 86px;
    }

    .footer-logo-arcraiders {
        left: 50%;
        transform: translateX(-50%);
    }

    /* Groupe droite tablette */
    .footer-logos a:nth-child(5) {
        right: 122px;
    }

    .footer-logos a:nth-child(6) {
        right: 61px;
    }

    .footer-logos a:nth-child(7) {
        right: 0;
    }

    .footer-logos>img:nth-child(1),
    .footer-logos>img:nth-child(2) {
        height: 35px;
    }

    .footer-logos>img:nth-child(3) {
        height: 60px;
    }

    .footer-logo-arcraiders {
        height: 100px;
    }

    .footer-logos a:nth-child(5) img,
    .footer-logos a:nth-child(6) img,
    .footer-logos a:nth-child(7) img {
        height: 35px;
    }

    .footer-links a {
        font-size: 13px;
        gap: 20px;
    }
}