Sauvegarde

styles/primary_css.css

@@ -1349,8 +1349,10 @@ img {
     }
 }
 
-/* Pas de fond/bordure : les logos flottent directement sur le fond de la page,
-   comme un bandeau "trusted by" classique */
+/* Carte derrière chaque logo, avec un fond SOMBRE FIXE (pas var(--surface), qui devient
+   blanc en thème clair) : certains logos PNG ont un fond noir non transparent intégré à
+   l'image, qui doit rester sur un fond sombre constant pour ne pas ressortir moche
+   (carré noir visible) quel que soit le thème actif sur le reste du site */
 .logo-tile {
     flex-shrink: 0;
     display: flex;
@@ -1359,17 +1361,21 @@ img {
     width: 160px;
     height: 90px;
     padding: 18px 24px;
-    background: transparent;
-    border: none;
+    background: #14141c;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--radius);
     text-decoration: none;
-    transition: transform 0.2s ease;
+    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
 }
 
 a.logo-tile:hover {
     transform: translateY(-3px);
+    border-color: var(--accent-border);
+    background: #1c1c26;
 }
 
-.logo-tile img {
+.logo-tile img,
+.logo-tile i {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
@@ -1377,17 +1383,36 @@ a.logo-tile:hover {
     transition: filter 0.25s ease;
 }
 
-.logo-tile:hover img {
+/* Taille de la glyphe pour les icônes Devicon (les images gardent leur taille naturelle) */
+/* Couleur fixe (pas var(--text), qui devient sombre en thème clair et rendrait
+   l'icône invisible sur le fond de tuile qui lui reste volontairement sombre) */
+.logo-tile i {
+    font-size: 44px;
+    line-height: 1;
+    color: #e8e8f2;
+}
+
+.logo-tile:hover img,
+.logo-tile:hover i {
     filter: grayscale(0) opacity(1);
 }
 
 /* Sur mobile le survol n'existe pas : on affiche les logos en couleur directement */
 @media (hover: none) {
-    .logo-tile img {
+    .logo-tile img,
+    .logo-tile i {
         filter: grayscale(0) opacity(0.85);
     }
 }
 
+/* Bandeau "Outils" : pas de niveaux de gris, on veut que les vrais logos des outils
+   soient reconnaissables immédiatement, sans avoir à survoler chaque tuile */
+.logo-marquee-tools .logo-tile img,
+.logo-marquee-tools .logo-tile i {
+    filter: none;
+    opacity: 1;
+}
+
 @media (max-width: 620px) {
     .logo-tile {
         width: 130px;
@@ -1446,6 +1471,11 @@ a.logo-tile:hover {
     object-fit: contain;
 }
 
+.logo-admin-preview i {
+    font-size: 40px;
+    color: var(--text);
+}
+
 .logo-admin-info {
     padding: 14px 16px 4px;
 }
@@ -1564,6 +1594,14 @@ a.logo-tile:hover {
     text-align: center;
 }
 
+/* Vraie image de logo (format "img:URL") pour les outils absents des polices d'icônes */
+.skill-item-visual {
+    width: 18px;
+    height: 18px;
+    object-fit: contain;
+    flex-shrink: 0;
+}
+
 /* Boutons admin dans les cartes de compétences */
 .skill-category .admin-actions {
     margin-top: 18px;
@@ -1955,6 +1993,18 @@ a.card-link::after {
     font-size: 0.85em;
 }
 
+/* Texte d'introduction sous un titre de section admin (voir Logos partenaires) */
+.admin-section-intro {
+    max-width: 1200px;
+    margin: 0 auto 16px;
+    padding: 0 clamp(16px, 4vw, 40px);
+}
+
+.admin-section-intro a {
+    color: var(--accent-light);
+    font-weight: 600;
+}
+
 /* Bloc repliable contenant chaque formulaire */
 .admin-block {
     max-width: 1200px;