Voici le fichier CSS complet (styles/styles.css) avec toutes les améliorations de design "Carte" et une couleur pour le pied de page (footer) basée sur un Bleu Institutionnel Doux (#d6e9f8), ce qui le rend moins sombre et plus en phase avec une charte institutionnelle. J'ai inclus toutes les modifications pour le rendre plus compact et bien séparé de la liste.

Fichier CSS Intégral (styles/styles.css)
CSS

/*
 * ---------------------------------------
 * 1. GÉNÉRAL & MISE EN PAGE
 * ---------------------------------------
 */
body {
    font-family: "EuclidCircularA",Arial,sans-serif;
    background-color: #f8f9fa; /* Fond très léger */
    color: #333;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#content {
    flex-grow: 1;
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
}

.top-header {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
}

.logos-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* ---------------------------------------
 * 2. TITRE & LISTE DES APPLICATIONS (CARTES)
 * ---------------------------------------
 */
.titre {
    text-align: center;
    margin-bottom: 40px;
}

.titre h3 {
    color: #0056b3; /* Bleu institutionnel pour le titre */
    font-size: 1.8em;
    font-weight: 700;
}

.liste ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}

/* Style de base des cartes (le LI) */
.liste li {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 320px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Style du lien à l'intérieur de la carte */
.liste a.liens {
    display: flex;
    align-items: center;
    padding: 18px 25px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 1.05em;
}

/* Effet au survol (UX) */
.liste li:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
    border-color: #007bff;
}

/* ---------------------------------------
 * 3. ICÔNES ET COULEURS THÉMATIQUES
 * ---------------------------------------
 */
.liste a.liens i {
    font-size: 24px;
    margin-right: 15px;
    color: #555;
}

/* Couleurs Microsoft/Office 365 (Bleu-Vert) */
.office, .owa, .sharepoint {
    color: #0078d4; /* Bleu Microsoft */
}

/* Couleur Métier */
.black {
    color: #000;
}

/* Couleurs RH / Outils Externes */
.orange {
    color: #ff6a00;
}
.gris {
    color: #6c757d;
}


/* ---------------------------------------
 * 4. FOOTER (Bleu Institutionnel Doux, Compact et Séparé)
 * ---------------------------------------
 */
.footer-wrap {
    background-color: #d6e9f8; /* COULEUR BLEU INSTITUTIONNEL DOUX */
    color: #1c4e80; /* Texte en bleu foncé pour le contraste */
    
    /* Padding réduit pour compacter le footer (avant 30px 0) */
    padding: 15px 0; 
    
    /* Marge accrue pour séparer du contenu principal */
    margin-top: 100px; 
    
    width: 100%;
}

.footer-wrap .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Réduction de la taille du logo dans le footer */
.footer-identity img {
    width: 200px; 
    height : auto;
    margin-bottom: 5px; 
}

/* Réduction de la taille de la police de l'adresse */
.address-card {
    font-size: 0.8em; 
    line-height: 1.4; 
    margin-bottom: 10px; 
}

/* Taille et espacement des icônes sociales */
.footer-social-links a {
    color: #1c4e80; /* Couleur du texte foncé */
    font-size: 18px; 
    margin: 0 8px; 
    transition: color 0.3s ease;
}

.footer-social-links a:hover {
    color: #0056b3; /* Bleu plus foncé au survol */
}

/* ---------------------------------------
 * 5. MEDIA QUERIES (Adaptabilité Mobile)
 * ---------------------------------------
 */
@media (max-width: 768px) {
    .liste ul {
        gap: 15px;
    }
    
    .liste li {
        max-width: 100%;
    }
    
    .top-header {
        flex-direction: column;
        align-items: center;
    }
    
    .logos-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    
    .second-logo img {
        max-width: 200px;
        height: auto;
    }
}