:root {
    --fond: #161b22; 
    --jaune: #e3b505; 
    --texte-doux : rgba(77, 100, 127, 0.7);
    --teal : #107e7d;
    --dark-teal: #044b7f;
    --surpassé : #22D3EE;
    --violet: #610345; 
    --rouge-sang: #95190c;
    --lavande-muted:#9b88ca; 
    --lavande-clair: #c4b5fd; 
    --lavande-foncé: #7a65af; 
    --blanc : #e2d9f3;
}


body {
    background-color: var(--fond-actif, #161b22);
    font-family: 'Literata', sans-serif;
    line-height: 1.7;    
    overflow: hidden;
    transition: background-color 0.6s ease;
}


.Projet_défil {
    display:flex; 
    gap: 1vw;
}

.Menu_gauche {
    width: 13vw;
    height: 100vh;
    background: var(--doux-actif, var(--texte-doux));
    text-align: center;
    border-right: 0.3vw solid var(--couleur-active, rgba(139,148,158,0.15));
    position: relative;
    overflow: hidden;
    transition: background 0.6s ease, border-color 0.6s ease;
}

a{ 
    text-decoration: none;
    color: inherit;
}
.Conditions {
    display: flex;
    align-items: center;
    gap: 0vw;
    font-size: clamp(9px, 0.8vw, 14px);
    font-family: 'IBM Plex Mono';
    margin-top: 1.5vw;
    padding: 0 1vw;
    color: var(--blanc);
    cursor: pointer;
}

.Conditions input {
    accent-color: var(--lavande-clair);
    cursor: pointer;
}

.Filtres {
    font-size: clamp(10px, 1.3vw, 25px);
    font-family: 'IBM Plex Mono';
    color: var(--blanc)
} 


.bouton_retour {
    position: absolute;
    bottom: -8vw;
    left: 10%;
    transform: translateX(-50%);
    width: 30vw;
    height: 12vw;
    border-radius: 50%;
    border: 0.2vw solid var(--lavande-muted);
    background: linear-gradient(to top, #0d1117, var(--lavande-foncé));
    color: var(--lavande-clair);
    font-family: 'Syne';
    font-size: clamp(10px, 1vw, 18px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1.5vw;
    padding-left: 8.5vw;
    cursor: pointer;
    transition: background 0.3s ease;
}

.bouton_retour:hover {
    background: linear-gradient(to top, #0d1117, #8957e5);
}

.Projets_cartes {
    flex: 0.9;
    min-width: 0;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    font-family: 'Syne';
    border: 0.2vw solid var(--couleur-active, var(--lavande-clair));
    transition: border-color 0.4s ease;
}

.Laplace, .IA, .Site {
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    scroll-snap-align: start;
    padding: 4vh 3vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3vw;
    position: relative;
}

.carte_gauche {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vh;
    flex: 1;
}

.carte_media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carte_img {
    width: 100%;
    max-height: 60vh;
    object-fit: cover;
    border-radius: 1vw;
    opacity: 0.8;
    filter: saturate(0.85)brightness(0.85);
}

.carte_meta {
    position: absolute;
    top: 3vh;
    right: 2vw;
    display: flex;
    align-items: center;
    gap: 1vw;
    font-family: 'IBM Plex Mono';
    font-size: clamp(9px, 0.8vw, 14px);
}

.carte_statut {
    padding: 0.3vh 0.9vw;
    border-radius: 2vw;
    font-weight: 500;
}

.carte_statut.terminé {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.carte_statut.en-cours {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.carte_temps {
    color: var(--texte-doux);
}

.carte_desc2 {
    font-size: clamp(11px, 1vw, 17px);
    color: var(--blanc);
    font-family: 'Literata';
    font-style: italic;
    line-height: 1.8;
    max-width: 35vw;
    border-left: 2px solid var(--couleur-active, var(--lavande-clair));
    padding-left: 1vw;
}

.Laplace {
    background: #0f1f1f;
}

.IA {
    background: #150f22;
}

.carte_tag {
    font-size: clamp(9px, 0.8vw, 13px);
    color: var(--texte-doux);
    font-family: 'IBM Plex Mono';
    letter-spacing: 0.1vw;
    text-transform: uppercase;
}

.carte_titre {
    font-size: clamp(22px, 3vw, 52px);
    font-weight: 800;
    color: var(--blanc);
}

.carte_desc {
    font-size: clamp(11px, 1vw, 17px);
    color: var(--texte-doux);
    font-family: 'IBM Plex Mono';
    max-width: 50vw;
    line-height: 1.8;
}

.Site {
    background: #111318;
}