Patch img home page

styles/primary_css.css

@@ -1,5 +1,3 @@
-/* ---- LE CSS EST SOIT GÉNÉRÉ PAR INTEL ARTI SOIT RÉUTILISÉ D'UN AUTRE PROJET ---- */
-
 /* ---- Variables globales du thème (sombre par défaut) ---- */
 :root {
     --bg: #0a0a10;
@@ -1387,10 +1385,11 @@ img {
     }
 }
 
-/* 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 */
+/* Carte derrière chaque logo : suit le thème actif comme le reste des cartes du site.
+   C'est possible parce que les logos posés dessus ne sont plus affichés tels quels mais
+   aplatis en silhouette monochrome adaptée au thème (voir la règle suivante) : sans ça,
+   un logo blanc sur fond transparent (3S Sécurité, TerraTech) disparaîtrait sur une
+   tuile claire, et un logo noir (Magyar, Gamm Vert) sur une tuile sombre */
 .logo-tile {
     flex-shrink: 0;
     display: flex;
@@ -1399,8 +1398,8 @@ img {
     width: 160px;
     height: 90px;
     padding: 18px 24px;
-    background: #14141c;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: var(--surface);
+    border: 1px solid var(--border);
     border-radius: var(--radius);
     text-decoration: none;
     transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
@@ -1409,44 +1408,76 @@ img {
 a.logo-tile:hover {
     transform: translateY(-3px);
     border-color: var(--accent-border);
-    background: #1c1c26;
+    background: var(--surface-2);
 }
 
+/* Bandeau "Ils m'ont fait confiance" : les logos fournis par les entreprises ont des
+   teintes très variables (certains blancs, d'autres noirs, tous sur fond transparent).
+   brightness(0) les aplatit en silhouette noire, invert(1) la repasse en blanc pour le
+   thème sombre : lisible dans les deux thèmes, et rendu uniforme façon mur de partenaires.
+   Le bandeau des outils, lui, garde les vraies couleurs (voir .logo-marquee-tools) */
 .logo-tile img,
 .logo-tile i {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
-    filter: grayscale(1) opacity(0.6);
+    filter: brightness(0) invert(1) opacity(0.55);
     transition: filter 0.25s ease;
 }
 
+[data-theme="light"] .logo-tile img,
+[data-theme="light"] .logo-tile i {
+    filter: brightness(0) opacity(0.45);
+}
+
 /* 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) */
+/* La couleur suit le thème, sinon l'icône serait invisible sur la tuile en thème clair.
+   :not(.colored) laisse intactes les icônes Devicon affichées aux couleurs de la marque
+   dans le bandeau des outils (voir afficherVisuelItem dans functions/listSkills.php) */
 .logo-tile i {
     font-size: 44px;
     line-height: 1;
+}
+
+.logo-tile i:not(.colored) {
     color: #e8e8f2;
 }
 
+[data-theme="light"] .logo-tile i:not(.colored) {
+    color: #191924;
+}
+
 .logo-tile:hover img,
 .logo-tile:hover i {
-    filter: grayscale(0) opacity(1);
+    filter: brightness(0) invert(1) opacity(1);
 }
 
-/* Sur mobile le survol n'existe pas : on affiche les logos en couleur directement */
+[data-theme="light"] .logo-tile:hover img,
+[data-theme="light"] .logo-tile:hover i {
+    filter: brightness(0) opacity(1);
+}
+
+/* Sur mobile le survol n'existe pas : on affiche les logos plus contrastés directement */
 @media (hover: none) {
     .logo-tile img,
     .logo-tile i {
-        filter: grayscale(0) opacity(0.85);
+        filter: brightness(0) invert(1) opacity(0.8);
+    }
+
+    [data-theme="light"] .logo-tile img,
+    [data-theme="light"] .logo-tile i {
+        filter: brightness(0) opacity(0.7);
     }
 }
 
 /* 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 {
+.logo-marquee-tools .logo-tile i,
+.logo-marquee-tools .logo-tile:hover img,
+.logo-marquee-tools .logo-tile:hover i,
+[data-theme="light"] .logo-marquee-tools .logo-tile img,
+[data-theme="light"] .logo-marquee-tools .logo-tile i {
     filter: none;
     opacity: 1;
 }