@import url('https://fonts.cdnfonts.com/css/public-pixel');


/* Comptability W3C Responsive Web design Media */

*
{
    box-sizing: border-box;
}

/* Base mobile */

@media (max-width: 600px) {

    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .inline-info ul li a {
        font-size: clamp(11px, 2.5vw, 14px);
    }

    .pseudoname {
        font-size: clamp(11px, 2.5vw, 14px);
    }

    .tile {
        font-size: clamp(0.9rem, 3vw, 1.4rem);
    }

    .inline-info ul {
        flex-wrap: wrap;
        gap: 12px;
    }

}
/* Tablette */

@media (min-width: 768px) {

    .tile {
        font-size: clamp(1rem, 2vw, 1.6rem);
    }

}

/* PC Portable */

@media (min-width: 1200px) {

    .inline-info ul li a {
        font-size: 15px;
    }

    .pseudoname {
        font-size: 15px;
    }

    .tile {
        font-size: 1.6rem;
    }

}

/* End */

html,body
{
    background-image: url('https://th.bing.com/th/id/R.85283ba3222d92108ec6f191b5c9010c?rik=s%2bL40WBs5miIXw&pid=ImgRaw&r=0');
    background-size: contain;
    margin: 0;    /* Enlevez les marges */
    padding: 0;   /* Enlevez les espacements internes */
    overflow: hidden; /* Empêche le débordement de la page */
}

.inline-info
{
    font-family: 'Public Pixel', sans-serif;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.inline-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.inline-info ul li {
    display: inline-block;
    margin-right: 20px; /* Ajustez selon vos besoins */
}

.inline-info ul li:last-child {
    margin-right: 0; /* Pour enlever la marge droite du dernier élément */
}

.inline-info ul li a {
    text-decoration: none;
    color: #fff;
    position: relative;
    padding: 5.75px;
    background: 
        linear-gradient(to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1)),
        linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
    background-size: 100% 0.1em, 0 0.1em;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
}

.inline-info ul li a:hover,
.inline-info ul li a:focus {
    background-size: 0 0.1em, 100% 0.1em;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: rgba(106, 7, 193, 0.93);
    width: 100%;
}

.pseudoname
{
    text-align: left;
    font-family: 'Public Pixel', 'sans-serif';
    color: white;
    white-space: nowrap;
}

.menu-container {
    display: grid;
    gap: 15px;
    height: 90vh;
    padding: 10px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

}

.tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1 1 30%;
    height: 100%;

    text-align: center;
    text-decoration: none;

    background-size: cover;
    background-position: center;

    font-family: 'Public Pixel', sans-serif;
    color: #ffffff;

    border-radius: 20px;
    overflow: hidden;

    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.05);

    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.4s ease;

    will-change: transform;
    cursor: pointer;
}

.tile1 {
    background-image: url('https://th.bing.com/th/id/R.15f3f8c5dacdd097a5d466715051eec1?rik=48qKHLTBuhfvrw&pid=ImgRaw&r=0');
}

.tile2 {
    background-image: url('keyboard.jpg');
}

.tile3 {
    background-image: url('https://images.hdqwalls.com/wallpapers/titanfall-2-2017-concept-art-wide.jpg');
    background-size: 450%;
}

.tile4 {
    background-image: url('https://wallpapercave.com/wp/wp6272599.jpg');
    border-width:  0px;
}

.tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.2),
        rgba(0,0,0,0.6)
    );
    transition: opacity 0.4s ease;
    z-index: 0;
}

.tile:hover::before {
    opacity: 0.7;
}

.tile::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: background 0.3s;
}

.tile:hover::after {
    background: rgba(0, 0, 0, 0);
}

.tile > * {
    position: relative;
    z-index: 1;
}

.tile:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.menu-container:hover .tile:not(:hover) {
    filter: brightness(0.5);
}

/*3 js */

.container0{
    position: relative;
}
/* Site vitrine au premier plan au début */
#site-vitrine {
    position: absolute;
    width: 100%;
    z-index: 10;
}

/* Espace 3D sous le site vitrine */
#espace-3d {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
}