body{
    background-color: #111827; /* Même couleur que le main */
    overflow-x: hidden; /* Empêche le défilement horizontal */
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden; /* Empêche le défilement horizontal */
    margin: 0;
    padding: 0;
    width: 100%;
}

*{
    color: #F3F4F6;
    box-sizing: border-box; /* Inclut padding et border dans la largeur */
}

/* S'assurer qu'aucun élément ne déborde */
*, *::before, *::after {
    box-sizing: border-box;
}

.title-little-section{

}


.card{
    background-color: #111827;
}

.custom-border{
    border-color: #7A7A7A;
}

.modal-content{
    background-color: #212121;
}

.btn-close.custom-close {
    filter: none; /* retire le filtre Bootstrap */
    background: none;
    color: #e74c3c; /* couleur de ton choix, ici rouge */
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-close.custom-close::before {
    content: '×';
    font-size: 4rem;
    color: #e74c3c; /* même couleur */
}
.btn-close.custom-close {
    width: 4rem;
    height: 4rem;
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #171616; /* Exemple de vert turquoise */
    border-radius: 10px;
    width: 40px;
    height: 40px;
}


/* Conteneur pour gérer le remplacement */
.logo-container {
    position: relative;
    width: clamp(40px, 8vw, 64px); /* Taille adaptative */
    height: auto;
    flex-shrink: 0; /* Empêche la compression */
}

.logo-languages {
    transition: 0.3s ease-in-out;
}

.logo-languages:hover {
    content: attr(data-colored); /* Ne fonctionne pas pour src 😅 */
}

/* Par défaut, le logo coloré est masqué */
.logo-colored {
    display: none; /* Cache l'image colorée au départ */
}

/* Lorsque l'utilisateur survole, on affiche l'image colorée et on cache l'autre */
.logo-container:hover .logo-white {
    display: none; /* Cache le logo blanc transparent */
}

.logo-container:hover .logo-colored {
    display: block; /* Affiche le logo coloré */
}

.container-skills, 
.logo-list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(8px, 2vw, 15px); /* Gap responsive */
    max-width: 100%;
}

/* Assure-toi que les logos ont une taille uniforme */
.logo-languages {
    width: 64px; /* Ajuste la taille des logos */
    height: auto;
    transition: opacity 0.9s ease;
}

/* Media queries pour tablettes et mobiles */
@media (max-width: 768px) {
    .logo-container {
        width: 48px;
    }
    
    .container-skills, 
    .logo-list-container {
        gap: 10px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .logo-container {
        width: 40px;
    }
    
    .container-skills, 
    .logo-list-container {
        gap: 8px;
        justify-content: space-around; /* Répartition équilibrée */
    }
    
    /* Corrections spécifiques pour mobile */
    .container-presentation {
        padding: 0 15px;
    }
    
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .col-12, .col-md-4 {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    main {
        width: 100%;
        padding: 0;
        margin: 0;
        max-width: 100vw;
    }
    
    /* Forcer les containers Bootstrap à prendre toute la largeur */
    .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .container-presentation {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .container-presentation img {
        width: 150px !important;
        height: 150px !important;
        max-width: 150px !important;
    }
    
    /* Image ne doit pas déborder */
    img {
        max-width: 100% !important;
    }
    
    /* Corriger les débordements identifiés */
    .row.g-5 {
        --bs-gutter-x: 1rem !important; /* Réduire l'écart entre colonnes */
        --bs-gutter-y: 1rem !important;
    }
    
    .col-12.col-md-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .gap-5 {
        gap: 1rem !important; /* Réduire le gap-5 Bootstrap */
    }
}