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

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--fond);
    color: var(--texte);
    font-family: 'Literata', sans-serif;
    line-height: 1.7;
}

a { text-decoration: none; color: inherit; }


.moi {
    min-height: 50vh;
    padding: 8vh 8vw 6vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-bottom: 1px solid rgba(139,148,158,0.1);
    position: relative;
}

.retour {
    top: 4vh;
    left: 8vw;
    transition: color 0.2s;
    backdrop-filter: blur(8px);
    border-radius: 8px;
    font-family : 'Syne';
    color: #e8e8e8;
    font-size: clamp(20px, 1.5vw, 80px) ;
    position: fixed;
}
.retour:hover { color: var(--accent); }

.moi_label {
    font-family: 'IBM Plex Mono';
    font-size: clamp(9px, 0.8vw, 13px);
    color: var(--texte-doux);
    text-transform: uppercase;
    letter-spacing: 0.15vw;
    margin-bottom: 1.5vh;
}

.moi_nom {
    font-family: 'Syne';
    font-weight: 800;
    font-size: clamp(32px, 5vw, 80px);
    color: var(--texte);
    line-height: 1;
}

.moi_nom_accent { 
    color: var(--accent); 
}

.moi_titre {
    font-family: 'IBM Plex Mono';
    font-size: clamp(11px, 1.1vw, 18px);
    color: var(--texte-doux);
    margin-top: 1.5vh;
}

.moi_phrase {
    font-family: 'Literata';
    font-style: italic;
    font-size: clamp(12px, 1.1vw, 18px);
    color: var(--texte);
    margin-top: 2vh;
    border-left: 2px solid var(--accent);
    padding-left: 0.4vw;
    max-width: 70vw;
}


.bloc {
    padding: 6vh 8vw;
    border-bottom: 1px solid rgba(139,148,158,0.1);
}

.bloc_label {
    font-family: 'IBM Plex Mono';
    font-size: clamp(9px, 0.8vw, 13px);
    color: var(--texte-doux);
    text-transform: uppercase;
    letter-spacing: 0.15vw;
    margin-bottom: 3vh;
}


.tags_groupe {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
}

.tag {
    font-family: 'IBM Plex Mono';
    font-size: clamp(10px, 1vw, 16px);
    padding: 0.5vh 1.2vw;
    border: 1px solid rgba(227,163,67,0.3);
    border-radius: 2vw;
    color: var(--accent);
    background: rgba(227,163,67,0.05);
}


.langues_groupe {
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.langue_item {
    display: flex;
    align-items: center;
    gap: 2vw;
}

.langue_nom {
    font-family: 'Syne';
    font-size: clamp(12px, 1.2vw, 20px);
    width: 10vw;
}

.langue_niveau {
    font-family: 'IBM Plex Mono';
    font-size: clamp(9px, 0.8vw, 13px);
    padding: 0.3vh 0.8vw;
    border-radius: 2vw;
}

.langue_niveau.natif    { color: #58a6ff; border: 1px solid rgba(88,166,255,0.3);  background: rgba(88,166,255,0.08);  }
.langue_niveau.courant  { color: #10b981; border: 1px solid rgba(16,185,129,0.3);  background: rgba(16,185,129,0.08);  }



.interets_groupe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
}

.interets_texte{
    font-size: clamp(10px, 1.2vw, 20px);
    padding: 3vh 2vw;
    background: var(--fond);
    border-radius: 1vw;
}


.contact_groupe {
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.contact_item {
    display: flex;
    align-items: center;
    gap: 2vw;
    padding: 2vh 2vw;
    background: var(--fond-carte);
    border-radius: 0.8vw;

    transition: background 0.2s;
}
.contact_item:hover { background: #1f2937; }

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

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

.Texte_secondaire {
    font-style: italic;
    color: var(--texte-doux);
    border-left: 2px solid var(--accent);
    padding-left: 0.4vw;
}

.hoverable {
    cursor: pointer;
    border-bottom: 1px dashed var(--accent);
    padding-bottom: 1px;
}

.hint_dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.7;
}


.tooltip_custom {
    position: fixed;
    z-index: 999;
    max-width: 380px;
    background: #1f2937;
    border: 1px solid rgba(139,148,158,0.2);
    border-left: 2px solid var(--accent);
    border-radius: 0.6vw;
    padding: 1.5vh 1.2vw;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.tooltip_custom.visible {
    opacity: 1;
    transform: translateY(0);
}

.tooltip_img {
    width: 100%;
    border-radius: 4px;
    margin-top: 1.2vh;
    opacity: 0.85;
}

.tooltip_titre {
    font-family: 'Syne';
    font-weight: 700;
    font-size: clamp(11px, 1vw, 15px);
    color: var(--texte);
    margin-bottom: 0.5vh;
}

.tooltip_texte {
    font-family: 'IBM Plex Mono';
    font-size: clamp(9px, 0.8vw, 12px);
    color: var(--texte-doux);
    line-height: 1.6;
}