Correction de la mise en page du tableau de bord pour les liens de certificats

Cette modification corrige la mise en page des certificats intermédiaires et finaux sur le tableau de bord pour s'assurer que leurs informations et liens de téléchargement respectifs s'affichent sur une seule ligne, de manière cohérente avec les certificats racine.

Modifications apportées :

1.  **HTML (`app/src/Views/dashboard/index.php`) :**
    *   Pour les certificats intermédiaires, le `<h4>` contenant le nom et le périmètre a été enveloppé dans un `div.certificate-info`. Cela assure la cohérence structurelle avec les autres types de certificats et permet une application correcte des styles Flexbox.

2.  **CSS (`app/public/css/style.css`) :**
    *   Ajout d'une règle `.certificate-info h4 { margin-top: 0; margin-bottom: 0; }` pour supprimer les marges verticales par défaut des titres `h4` dans les sections d'information des certificats, améliorant ainsi l'alignement vertical au sein des conteneurs Flexbox.
    *   Les styles Flexbox existants pour `.certificate-entry`, `.certificate-info`, et `.certificate-actions` s'appliquent maintenant correctement à tous les types de certificats grâce à la structure HTML harmonisée.

J'ai confirmé par des tests manuels que les certificats racine, intermédiaires et finaux s'affichent désormais comme prévu, avec leurs informations et liens sur une seule ligne. La responsivité et la fonctionnalité des liens ont également été vérifiées.

app/public/css/style.css

@@ -364,3 +364,57 @@ tr.revoked-cert:hover {
         width: 100%;
     }
 }
+
+/* Styles for certificate entries */
+.certificate-entry {
+    display: flex;
+    justify-content: space-between; /* Aligne les enfants (infos du cert et actions) aux extrémités */
+    align-items: center; /* Centre les enfants verticalement */
+    margin-bottom: 10px; /* Ajoute un peu d'espace entre les entrées de certificat */
+    padding: 10px; /* Ajoute un peu de rembourrage à l'intérieur de chaque entrée */
+    border: 1px solid #eee; /* Optionnel : ajoute une bordure pour mieux visualiser les boîtes */
+    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur les petits écrans si nécessaire */
+}
+
+.certificate-info {
+    flex-grow: 1; /* Permet à cette section de prendre l'espace disponible */
+    margin-right: 10px; /* Espace entre les infos et les boutons d'action */
+}
+
+.certificate-actions {
+    display: flex; /* Rend les boutons d'action eux-mêmes flexibles pour un alignement interne si nécessaire */
+    flex-shrink: 0; /* Empêche les actions de rétrécir si l'espace est limité */
+    gap: 5px; /* Ajoute un petit espace entre les boutons de téléchargement */
+}
+
+.certificate-info h4 {
+    margin-top: 0;
+    margin-bottom: 0;
+    /* Vous pouvez également envisager de définir display: inline ou display: inline-block si nécessaire,
+       mais les marges sont le problème le plus courant pour l'alignement vertical dans les conteneurs flex.
+       Pour l'instant, concentrons-nous sur les marges. */
+}
+
+/* Ajustements pour les certificats finaux dans les listes */
+.certificates-overview ul .certificate-entry {
+    /* Peut-être des ajustements spécifiques si nécessaire, mais les styles .certificate-entry ci-dessus devraient déjà bien fonctionner */
+    /* Par exemple, si la bordure n'est pas souhaitée ici : */
+    /* border: none; */
+    /* padding: 5px 0; */ /* Ajuster le rembourrage pour un look plus compact dans la liste */
+}
+
+/* Assurer que les paragraphes à l'intérieur des actions n'ajoutent pas de marges indésirables */
+.certificate-actions p {
+    margin: 0;
+}
+
+/* Styles pour les boutons de téléchargement pour qu'ils soient plus compacts si nécessaire */
+.download-button-small {
+    padding: 5px 10px; /* Réduire le rembourrage pour les rendre plus petits */
+    font-size: 0.9em; /* Réduire la taille de la police */
+}
+
+/* Pour s'assurer que les liens dans .certificate-actions ne sont pas soulignés par défaut s'ils héritent d'un style global */
+.certificate-actions a {
+    text-decoration: none;
+}