Implémentation des modifs v3

system/styles/scss/rings.scss

@@ -11,11 +11,11 @@
     margin: 0 auto;
     color: $white-light;
 
-    #air   { left:  86px; top:  69px; } // haut-gauche (−36°)
-    #water { left: 174px; top:  69px; } // haut-droite ( 36°)
-    #fire  { left:  59px; top: 153px; } // gauche      (252°)
-    #earth { left: 201px; top: 153px; } // droite      (108°)
-    #void  { left: 130px; top: 205px; } // bas         (180°)
+    #air   { left:  86px; top:  59px; z-index: 2; } // haut-gauche (−36°)
+    #water { left: 174px; top:  59px; z-index: 2; } // haut-droite ( 36°)
+    #fire  { left:  59px; top: 153px; z-index: 1; } // gauche      (252°)
+    #earth { left: 201px; top: 153px; z-index: 1; } // droite      (108°)
+    #void  { left: 130px; top: 205px; z-index: 1; } // bas         (180°)
 
     // — Common ring cell —
     #earth,
@@ -95,6 +95,16 @@
     // — Solaire / Lunaire : masqués sur les anneaux, affichés latéralement —
     .ring-type { display: none; }
 
+    // Air et Eau : label texte flottant AU-DESSUS de l'icône, hors du flux
+    // (position: absolute → ne décale pas le cercle, ne casse pas l'espacement)
+    #air label strong, #water label strong {
+        position: absolute;
+        bottom: calc(100% + 0.3rem); // au-dessus du ring-circle
+        left: 0; right: 0;
+        text-align: center;
+        visibility: visible;
+    }
+
     // Label vertical "☀ SOLAIRE" sur le côté gauche (entre Air et Feu)
     &::before {
         content: "☀ SOLAIRE";