/* =========================
   GLOBAL
========================= */

* {
    box-sizing: border-box;
}


/* =========================
   HEADER
========================= */

.header-content {

    width: 100%;
    min-height: 100px;

    padding: 1rem;

    background-color: var(--secondary-color);
    color: white;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    border-bottom: 1px solid var(--primary-color);
}


#Header-Title {

    margin: 0;

    font-size: clamp(1.5rem, 3vw, 2rem);

    color: white;

    text-align: left;

}


.nav-link {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    align-items: center;

    gap: 1rem;

}


.nav-item {

    padding: 10px 15px;

    background-color: var(--button-color);

    color: var(--text-color-light);

    text-decoration: none;

    border-radius: 5px;

    white-space: nowrap;

    transition: .2s;
}


.nav-item:hover {

    text-decoration: underline;
    background-color: var(--button-hover);

}


/* =========================
   FOOTER
========================= */

.footer {

    margin-top: auto;

    background: #0b0e1a;

    color: #ccc;

    font-size: .95rem;

    border-top: 1px solid var(--primary-color);

}


.footer-content {

    width: min(1200px, 100%);

    margin: auto;

    padding: 20px;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 40px;

}


.footer-mention {
    padding-right: 20px;
}


.footer-link {
    color: white;
    text-decoration: none;
}


.footer-link:hover {
    text-decoration: underline;
}



.footer-content-links {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}


.footer-block {

    text-align: center;

}


.footer-block h4 {

    color: var(--primary-color);

    margin-bottom: 15px;

}


.footer-block p {

    line-height: 1.6;

    opacity: .85;

}


.footer-block ul {

    list-style:none;

    padding:0;

}


.footer-block ul li {

    margin-bottom:10px;

}


.footer-block ul li a {

    color:#ccc;

    text-decoration:none;

    transition:.2s;

}


.footer-block ul li a:hover {

    color:var(--primary-light);

}



.footer-bottom {

    border-top:1px solid var(--primary-color);

    text-align:center;

    padding:15px;

    font-size:.85rem;

    opacity:.7;

}

#disabled {
    cursor: not-allowed;
}


/* =========================
   TABLETTE
========================= */

@media(max-width:768px){


    /* HEADER */

    .header-content {

        flex-direction:column;

        justify-content:center;

        text-align:center;

    }


    #Header-Title {

        text-align:center;

    }


    .nav-link {

        justify-content:center;

        width:100%;

    }



    /* FOOTER */


    .footer-content {

        grid-template-columns:1fr;

        text-align:center;

    }


    .footer-content-links {

        grid-template-columns:repeat(2,1fr);

    }


    .footer-mention {

        border-right:none;

        border-bottom:1px solid white;

        padding-right:0;

        padding-bottom:20px;

    }

}



/* =========================
   MOBILE
========================= */

@media(max-width:480px){


    .nav-link {

        flex-direction:column;

        width:100%;

    }


    .nav-item {

        width:100%;

        text-align:center;

    }


    .footer-content-links {

        grid-template-columns:1fr;

    }

}