.certificates-container {
    max-width: 800px; /* Largeur maximale de la boîte */
    width: 90%; /* Prend 90% de la largeur disponible pour s'adapter à la taille de l'écran */
    background-color: #ffffff; /* Fond blanc de la boîte */
    border: 1px solid #dadada; /* Bordure subtile */
    border-radius: 15px; /* Bords arrondis */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Ombre douce pour donner de la profondeur */
    padding: 30px; /* Espace interne autour du contenu */
    margin: 160px auto; /* Centrage et espace autour de la boîte */
    box-sizing: border-box; /* Inclus le padding dans la largeur totale */
}

.certificates-title {
    font-size: 28px; /* Taille de la police pour le titre */
    color: #000000; /* Couleur du texte foncé pour le titre */
    text-align: left; /* Alignement à gauche du titre */
    margin-bottom: 20px; /* Espace en dessous du titre */
}

.certificates-list {
    list-style: none; /* Pas de puces pour la liste */
    padding: 0; /* Pas de padding pour la liste */
    margin: 0; /* Pas de margin pour la liste */
}

.certificate-item {
    background-color: #ffffff; /* Fond blanc pour chaque élément */
    border: 1px solid #dadada; /* Bordure subtile */
    border-radius: 10px; /* Bords arrondis pour les éléments */
    padding: 15px; /* Espace interne pour chaque élément */
    margin: 12px 0; /* Espace vertical entre les éléments */
    transition: transform 0.2s ease-in-out; /* Transition pour effet de soulèvement */
    text-align: center; /* Centre le texte dans chaque élément */
}

.certificate-link {
    color: #ffde59; /* Couleur jaune pour les liens */
    text-decoration: none; /* Pas de soulignement */
    display: block; /* Rend toute la zone cliquable */
    font-weight: bold; /* Texte en gras pour les liens */
}

/* Effet de survol */
.certificate-item:hover {
    transform: translateY(-5px); /* Soulèvement lors du survol */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Ombre plus prononcée lors du survol */
}

/* Texte de titre et image de fond */
#ref-info-title-text {
    margin-left: 0%; /* Alignement à gauche */
    font-weight: bold;
    font-size: 22px; /* Taille de la police */
    position: absolute;
    z-index: 1;
}

#ref-info-title-background-image {
    margin-top: 0px;
    margin-left: 7%; /* Positionnement de l'image */
    z-index: 0; /* Derrière le texte du titre */
    position: relative; /* Assure que l'image reste alignée avec le texte */
    display: block;
    width: auto; /* Taille auto pour conserver les proportions de l'image */
}

/* Styles pour les écrans de taille inférieure à 768px (mobile) */
@media (max-width: 768px) {
    .certificates-container {
        width: 90%; /* Utilise presque toute la largeur de l'écran sur mobile */
        margin-top: 2px auto; /* Réduction de l'espace vertical autour de la boîte */
        margin-bottom: 2px auto;
        padding: 20px; /* Réduction du padding interne sur mobile */
    }
    
    .certificates-title {
        font-size: 18px; /* Taille de police légèrement réduite pour le titre */
    }

    #ref-info-title-text {
        font-size: 16px; /* Taille de police réduite pour le texte du titre */
    }

    #ref-info-title-background-image {
        margin-left: 2%; /* Ajustement de la position de l'image pour les petits écrans */
    }
}