Implémentation des modifs v3

system/styles/scss/rings.scss

@@ -1,23 +1,21 @@
-/** Rings — disposition en grille 2×2 + Vide centré en bas **/
+/** Rings — disposition pentagonale (5 éléments autour d'un cercle) **/
+// Centre (130, 130), rayon 75px, sens horaire depuis le haut (-90°)
+// Air(-90°) Eau(-18°) Feu(54°) Terre(126°) Vide(198°)
 
 .rings {
-    display: grid;
-    grid-template-areas:
-        "air   water"
-        "fire  earth"
-        "void  void";
-    grid-template-columns: 1fr 1fr;
-    gap: 0.5rem;
-    min-height: 0;
-    padding: 0.25rem;
+    position: relative;
+    width: 260px;
+    height: 260px;
     list-style: none;
+    padding: 0;
+    margin: 0 auto;
     color: $white-light;
 
-    #air   { grid-area: air; }
-    #water { grid-area: water; }
-    #fire  { grid-area: fire; }
-    #earth { grid-area: earth; }
-    #void  { grid-area: void; justify-self: center; }
+    #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°)
 
     // — Common ring cell —
     #earth,
@@ -25,7 +23,8 @@
     #water,
     #fire,
     #void {
-        position: relative;
+        position: absolute;
+        transform: translate(-50%, -50%);
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -93,27 +92,46 @@
         }
     }
 
-    // — Solaire / Lunaire badges —
-    .ring-type {
-        display: block;
-        text-align: center;
-        font-size: 0.62rem;
-        line-height: 1.2 !important;
-        font-weight: bold;
-        text-transform: uppercase;
-        letter-spacing: 0.07em;
-        white-space: nowrap;
-        margin-top: 0.1rem;
-        pointer-events: none;
+    // — Solaire / Lunaire : masqués sur les anneaux, affichés latéralement —
+    .ring-type { display: none; }
 
-        &.solaire {
-            color: #f5c842;
-            text-shadow: 0 0 4px rgba(245, 180, 0, 0.6);
-        }
-        &.lunaire {
-            color: #9ecfef;
-            text-shadow: 0 0 4px rgba(100, 180, 230, 0.6);
-        }
+    // Label vertical "☀ SOLAIRE" sur le côté gauche (entre Air et Feu)
+    &::before {
+        content: "☀ SOLAIRE";
+        position: absolute;
+        left: 0;
+        top: 80px;
+        writing-mode: vertical-lr;
+        transform: rotate(180deg); // lecture de bas en haut
+        font-size: 0.7rem;
+        font-weight: bold;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: #ffe066;
+        background: rgba(0, 0, 0, 0.55);
+        padding: 4px 2px;
+        border-radius: 3px;
+        text-shadow: 0 0 4px #000, 0 0 8px rgba(255, 180, 0, 0.9);
+        pointer-events: none;
+    }
+
+    // Label vertical "☽ LUNAIRE" sur le côté droit (entre Eau et Terre)
+    &::after {
+        content: "☽ LUNAIRE";
+        position: absolute;
+        right: 0;
+        top: 80px;
+        writing-mode: vertical-lr;
+        font-size: 0.7rem;
+        font-weight: bold;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: #b8e4ff;
+        background: rgba(0, 0, 0, 0.55);
+        padding: 4px 2px;
+        border-radius: 3px;
+        text-shadow: 0 0 4px #000, 0 0 8px rgba(80, 160, 255, 0.9);
+        pointer-events: none;
     }
 
     // — Ring colors —
@@ -122,4 +140,15 @@
     #water { color: $l5r5e-water; input { background: rgba($l5r5e-water, 0.7); } }
     #fire  { color: $l5r5e-fire;  input { background: rgba($l5r5e-fire, 0.7); } }
     #earth { color: $l5r5e-earth; input { background: rgba($l5r5e-earth, 0.7); } }
+
+    // — Input value orienté vers le centre du pentagone —
+    // #air (haut-gauche)  → centre est bas-droite  → default (bottom/right) ✓
+    // #water (haut-droite) → centre est bas-gauche  → bottom / left
+    #water .ring-circle input { right: auto; left: -0.5rem; }
+    // #fire (gauche)        → centre est haut-droite → top / right
+    #fire  .ring-circle input { bottom: auto; top: -0.5rem; }
+    // #earth (droite)       → centre est haut-gauche → top / left
+    #earth .ring-circle input { bottom: auto; top: -0.5rem; right: auto; left: -0.5rem; }
+    // #void (bas)           → centre est haut-centre → top / centré
+    #void  .ring-circle input { bottom: auto; top: -0.5rem; right: auto; left: 50%; transform: translateX(-50%); }
 }