/* --- COMPOSANTS DE CARTES (PROJETS/SKILLS) --- */
.card-style {
    background: var(--bg-card);
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-style:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px var(--primary-glow);
}

/* --- TYPOGRAPHIE DES CARTES --- */
.card-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-main);
}

.card-icon {
    font-size: 2.8rem;
    color: var(--primary);
    margin-bottom: 20px;
}

/* --- CSS --- */
.skills-preview { 
    padding: 40px 20px 80px; 
    max-width: 1100px; 
    margin: 0 auto; 
}
/* Flexbox pour l'alignement horizontal */
.skills-grid {
    display: grid;
    /* auto-fit : remplit la ligne au maximum */
    /* minmax(300px, 1fr) : les cartes font au minimum 300px et se partagent l'espace restant */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    width: 100%;
}
/* Style des items individuels */
.skill-item {
    width: 100%; 
    display: flex;
    flex-direction: column;
    padding: 40px 30px;
    background: var(--bg-card);
    border-radius: 15px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-sizing: border-box;
}
.skill-item:hover {
transform: scale(1.01) translatey(-6px);
    box-shadow: 0 20px 40px var(--primary-glow);
    border-color: var(--primary);
}
/* Icône : transition définie AU REPOS pour que le retour soit aussi animé */
.skill-item i {
    display: inline-block; /* Indispensable pour que transform fonctionne correctement */
    width: fit-content;    /* L'élément ne prend que la largeur réelle de l'icône */
    margin: 0 ;        /* Centre l'icône horizontalement si elle est dans un flex column */
    font-size: 2.2rem;
    color: var(--primary);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.skill-item:hover i {
    transform: scale(1.05) translatey(-10px);
}
.skill-item span {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
}
.skill-item span {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-main);
}
/* --- Badge --- */

.badge {
    display: inline-block;
    background: rgba(59, 130, 246, 0.15); 
    color: #60a5fa; 
    padding: 8px 18px; 
    border-radius: 99px; 
    font-weight: 700; 
    font-size: 0.85rem;
    border: 1px solid rgba(59, 130, 246, 0.3);
    margin-bottom: 20px;
    position: static; /* Supprime le position: relative précédent */
}
/* --- Badge pour les box --- */
.comp-tags { display: flex; gap: 10px; margin-top: 20px; }