:root {
    --fond: #0d1117; 
    --fond-carte : #161b22 ;
    --texte : #c9d1d9 ; 
    --texte-doux : rgba(139,148,158,0.5);
    --accent : #58a6ff; 
}

body {
    background: var(--fond);
    opacity: 0;
    transition: opacity 0.5s ease;
    perspective: 1000px;
    position: relative;
}

body.fade-in {
    opacity: 1;
}


.Cartes {
    width: 25vw;
    height: 80vh;
    background: var(--fond-carte);
    position: absolute;
    border-radius: 2vw;
    top: 10vh;
    transition: transform 0.3s ease, box-shadow 0.3 ease ;
} 

#Carte1 {
    left: 7.5vw;
    animation : bam 1s ease-out;
}

#Carte2 { 
    left: 37.5vw;
    animation : bam 1s ease-out;
}

#Carte3 {
    left: 67.5vw;
    animation : bam 1s ease-out ;
} 

@keyframes bam {
    0%   { opacity: 0;  transform: translateX(20vw) scale(0.5) rotateY(0deg); }
    100% { opacity: 1;  transform: translateX(0)    scale(1)   rotateY(360deg); }
}


.Texte_carte {
    text-align: center;
    font-family: 'Monserrat';
    font-size: clamp(12px, 2.5vw, 40px);
}

#carte1 {
    color: #610345
}

#carte2 {
    color: #107e7d
}

#carte3 {
    color:#044b7f
}

#Carte1:hover {
    transform: scale(1.05);
    box-shadow : 0 0 2vw #610345;
} 

#Carte2:hover {
    transform: scale(1.05);
    box-shadow : 0 0 2vw #107e7d;
} 

#Carte3:hover {
    transform: scale(1.05);
    box-shadow : 0 0 2vw #044b7f;
} 



.titre_carte {
    position: absolute;
    top: 5vh;
    left: 1.5vw;
    font-family: 'Syne';
    font-weight: 800;
    font-size: clamp(15px, 2vw, 39px);
}

.sous_titre_carte {
    position: absolute;
    top: 17vh;
    left: 1.5vw;
    font-family: 'IBM Plex Mono';
    font-size: clamp(10px, 1vw, 16px);
    color: var(--texte-doux);
}

.cta_carte {
    position: absolute;
    bottom: 4vh;
    left: 1.5vw;
    font-family: 'IBM Plex Mono';
    font-size: clamp(10px, 1vw, 16px);
    color: var(--texte-doux);
}


.label_carte {
    position: absolute;
    top: 3vh;
    left: 1.5vw;
    font-family: 'IBM Plex Mono';
    font-size: clamp(10px, 1vw, 16px);
    color: var(--texte-doux);
}

.Prénom {
    position: absolute;
    top: 8vh;
    left: 1.5vw;
    font-family: 'IBM Plex Mono';
    font-size: clamp(14px, 1.8vw, 28px);
    color: var(--texte);
}

.Nom {
    position: absolute;
    top: 11vh;
    left: 1.5vw;
    font-family: 'Syne';
    font-weight: 800;
    font-size: clamp(20px, 3vw, 50px);
    color: #107e7d;
}


.role_carte {
    position: absolute;
    top: 25vh;
    left: 1.5vw;
    font-family: 'IBM Plex Mono';
    font-size: clamp(10px, 1vw, 16px);
    color: var(--texte-doux);
}


a { text-decoration: none; }

.compteur_bloc {
    position: absolute;
    top: 38vh;
    left: 1.5vw;
    display: flex;
    align-items: baseline;
    gap: 2vw;
    padding-left: 1vw;
}

.compteur_chiffre {
    font-family: 'Syne';
    font-weight: 800;
    font-size: clamp(30px, 4.5vw, 80px);
    color: #188fa7;
    line-height: 1;
}

.compteur_label {
    font-family: 'IBM Plex Mono';
    font-size: clamp(10px, 1vw, 16px);
    color: var(--texte-doux);
    position: absolute;
    top:6vh;
    left: 7vw;
}

.Photo{
    position: absolute;
    width: 13vw;
    top:33vh; 
    left:5vw;
    border-radius: 50%;
    box-shadow: 0 0 0 0.1vw var(--fond-carte), 0 0 0 0.2vw #107e7d; 
}

.timeline {
    position: absolute;
    top: 28vh;
    left: 1.5vw;
    display: flex;
    flex-direction: column;
    gap: 2.5vh;
    border-left: 1px solid var(--texte-doux);
    padding-left: 1.2vw;
}

.item {
    display: flex;
    flex-direction: column;
    gap: 0.3vh;
    position: relative;
}

.date {
    font-family: 'IBM Plex Mono';
    font-size: clamp(8px, 0.8vw, 13px);
    color: var(--texte-doux);
}

.timeline_texte {
    font-family: 'IBM Plex Mono';
    font-size: clamp(10px, 1vw, 16px);
    color: var(--texte);
}