#home .text {
    display: flex;
    justify-content: center;
}

#home .text .content {
    width: fit-content;
}

#home .text .titles {
    width: min-content;
    text-transform: capitalize;
}

#home .text h1 {
    font-size: var(--fs-24);
    font-weight: 600;
    min-width: max-content;
    margin-bottom: 10px;
}

#home .text h2 {
    font-size: var(--fs-18);
    color: var(--font-blue);
    font-weight: 600;
    padding-bottom: 10px;
}

#home .text .desc {
    margin-block: 10px;
    width: max-content;
}

#home .text .desc .welcome {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
}

#home .text .desc p,
#home .text .desc p * {
    font-size: var(--fs-18);
}

#home .text .desc p span {
    color: var(--font-blue);
}

#home .text .desc .tuto p {
    --arrow-width: var(--fs-24);
    position: relative;
    padding-left: var(--arrow-width);
}
#home .text .desc .tuto p::before {
    content: '\2196\00a0';
    position: absolute;
    /* right: 100%; */
    left: 0;
    bottom: 0;
    transition: var(--transition-4);
    color: var(--font-purple);
    font-size: var(--arrow-width);
}
#home .text .desc .tuto p:hover::before {
    transform: translateX(-100%) translateY(-100%);
}

#home .nav {
    margin-top: 5vh;
}

#home .nav h2 {
    font-size: var(--fs-18);
    margin-bottom: 10px;
}

#home .nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

#home .nav ul li a {
    --padding-block: 20px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    width: calc(100% - var(--padding-block) * 2);
    background-color: var(--black-dark);
    border: var(--border-global);
    padding: 10px 20px;
    border-radius: 6px;
    animation: react 36s infinite;
}
#home .nav ul li:has(a:hover){
    transform: scale(1.05);
}#home .nav ul li a:hover {
    color: var(--font-blue);
}

/* Animation de surlignage progressif */
@keyframes react {
    0%   {
        filter: brightness(100%);
        transform: translateX(0);
    }
    2%  {
        filter: brightness(150%);
        transform: translateX(-10px);
    }
    4%  {
        filter: brightness(100%);
        transform: translateX(0);
    }
}

/* Décalage séquentiel (6s d’écart entre chaque) */
#home .nav ul li:nth-child(2) a { animation-delay: 6s; }
#home .nav ul li:nth-child(3) a { animation-delay: 12s; }
#home .nav ul li:nth-child(4) a { animation-delay: 18s; }
#home .nav ul li:nth-child(5) a { animation-delay: 24s; }
#home .nav ul li:nth-child(6) a { animation-delay: 30s; }
#home .nav ul li:nth-child(1) a { animation-delay: 0s; }