:root {
    --fond: #0d0505;
    --fond-carte: #120a0a;
    --texte: #cc8f8f;
    --texte-doux: rgba(180, 100, 100, 0.6);
    --accent: #e03a3a;
    --accent-doux: #9b2020;
    --accent-glow: rgba(224, 58, 58, 0.15);
}

main{ 
    margin: auto; 
    text-align: left;
    padding-left: clamp(20px, 5vw, 80px) ;
    padding-right: clamp(20px, 5vw,80px);
}


body {
    background-color: var(--fond);
    font-family: 'Literata', sans-serif;
    line-height: 1.7; 
} 
.Projet_nom {
    font-family : 'Syne';
    color: #e8e8e8;
    font-size: clamp(20px, 1.5vw, 80px) ;
    position: fixed;
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 0.5vw 0.5vw;
}

.Projet_nom2 {
    font-family: 'Syne';
    font-size: clamp(16px, 5vh, 42px);
    font-style: italic;
    color: var(--texte);
    margin-top: 4vw;
}

.Projet_nom3 {
    font-family: 'Syne';
    font-size: clamp(16px, 5vh, 42px);
    font-weight: 600;
    font-style: italic;
    color: var(--accent);
    margin: 0;
    margin-left: 10vw
}

.Description1 {
    font-family: 'Syne';
    font-size: clamp(12px, 3vh, 26px);
    font-weight: 200;
    font-style: italic;
    color: var(--texte);
    margin-top: 5vh;

}

.Objectif {
    font-family: 'Syne';
    font-size: clamp(12px, 3vh, 26px);
    font-weight: 200;
    color: var(--accent);
    margin: 0;
}

.Main {
    max-width: 300px;
    width: 100%;
    margin-top: 1.5rem;
    margin-left: 10vw;
    animation: roulement 2s ease-out forwards, flotter 4s ease-in-out 2s infinite;
}

.coté_gauche {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.coté_droit {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.entête2 {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    margin-bottom: 40px;
}

@keyframes flotter { 
    0% {transform: translateY(0vh);}
    50% {transform: translateY(-1vh);}
    100% {transform: translateY(0vh);}
}

@keyframes roulement {
    0%   { transform: translateX(300px) rotate(180deg); opacity: 0; }
    100% { transform: translateX(0px)   rotate(0deg);   opacity: 1; }
}