3535 v-if =" isAuthenticated"
3636 class =" btn-icon"
3737 @click =" showChat = false"
38- title =" Retour"
38+ title =" Retour au dashboard "
3939 >
4040 🏠️
4141 </button >
131131 🤖 AutoWallet
132132 </button >
133133 </router-link >
134- <button
135- v-if =" hasValidConfig"
136- class =" chat-access-button"
137- @click =" showChat = true"
138- >
139- 💬 Accéder au Chat
140- </button >
141134 </div >
142135 <div v-else class =" auth-required-section" >
143136 <button
@@ -1652,17 +1645,17 @@ export default {
16521645 display: flex;
16531646 height: 100vh ;
16541647 font- family: " Roboto" , sans- serif;
1655- background: linear- gradient (120deg , rgba ( 28 , 32 , 51 , 0 ), rgba ( 16 , 21 , 33 , 0 ) );
1648+ background: linear- gradient (135deg , # 111421 0 % , # 111421 100 % );
16561649 overflow: hidden;
16571650}
16581651
16591652/* ===== SIDEBAR ===== */
16601653.sidebar {
16611654 position: fixed;
1662- top: 10vh ;
1663- left: 5vh ;
1664- width: 28vh ;
1665- height: 80vh ;
1655+ top: 20px ;
1656+ left: 20px ;
1657+ width: 320px ;
1658+ height: calc ( 100vh - 40px ) ;
16661659 background: rgba (255 , 255 , 255 , 0.1 );
16671660 backdrop- filter: blur (20px );
16681661 border- radius: 24px ;
@@ -1672,7 +1665,10 @@ export default {
16721665 display: flex;
16731666 flex- direction: column;
16741667 gap: 20px ;
1675- overflow: hidden;
1668+ overflow- y: auto;
1669+ z- index: 4 ;
1670+ box- sizing: border- box;
1671+ margin- right: 20px ;
16761672}
16771673.sidebar - header {
16781674 margin- bottom: 35px ;
@@ -1710,7 +1706,7 @@ export default {
17101706/* Contrôles de la sidebar */
17111707.chat - controls {
17121708 display: flex;
1713- gap: 84px ;
1709+ gap: 60px ;
17141710 flex- shrink: 0 ;
17151711}
17161712
@@ -1957,12 +1953,18 @@ export default {
19571953/* ===== CONTENU PRINCIPAL ===== */
19581954.main - content {
19591955 flex: 1 ;
1956+ margin- left: 380px ;
19601957 padding: 50px ;
19611958 display: flex;
19621959 flex- direction: column;
19631960 align- items: center;
19641961 background: linear- gradient (135deg , #111421 0 % , #111421 100 % );
19651962 overflow- y: auto;
1963+ min- height: 100vh ;
1964+ width: calc (100 % - 380px );
1965+ box- sizing: border- box;
1966+ position: relative;
1967+ z- index: 1 ;
19661968}
19671969
19681970/* En-tête */
@@ -2058,6 +2060,8 @@ export default {
20582060 max- width: 1200px ;
20592061 width: 100 % ;
20602062 animation: fadeInUp 0 .6s ease;
2063+ position: relative;
2064+ z- index: 4 ;
20612065}
20622066
20632067.widgets - container {
@@ -2066,6 +2070,8 @@ export default {
20662070 gap: 30px ;
20672071 margin- top: 150px ;
20682072 flex- wrap: wrap;
2073+ position: relative;
2074+ z- index: 4 ;
20692075}
20702076/* Bento Grid Layout */
20712077/* Bento Grid Layout - Style Apple */
@@ -2078,6 +2084,8 @@ export default {
20782084 max- width: 1000px ;
20792085 margin: 40px auto;
20802086 padding: 0 20px ;
2087+ position: relative;
2088+ z- index: 4 ;
20812089}
20822090
20832091/* Widgets */
@@ -2110,6 +2118,7 @@ export default {
21102118 cursor: pointer;
21112119 box- shadow: 0 8px 32px rgba (0 , 0 , 0 , 0.12 );
21122120 box- shadow: 0 1px 10px rgba (0 , 0 , 0 , 0.15 );
2121+ z- index: 4 ;
21132122}
21142123
21152124.crypto - widget:: before,
@@ -2806,6 +2815,29 @@ export default {
28062815 backdrop- filter: blur (1px );
28072816}
28082817
2818+ /* Responsive Design - Tablettes */
2819+ @media (max - width : 1200px ) {
2820+ .sidebar {
2821+ width: 280px ;
2822+ }
2823+
2824+ .main - content {
2825+ margin- left: 340px ;
2826+ width: calc (100 % - 340px );
2827+ }
2828+ }
2829+
2830+ @media (max - width : 1024px ) {
2831+ .sidebar {
2832+ width: 260px ;
2833+ }
2834+
2835+ .main - content {
2836+ margin- left: 320px ;
2837+ width: calc (100 % - 320px );
2838+ }
2839+ }
2840+
28092841/* Responsive Design Simple */
28102842@media (max - width : 1024px ) {
28112843 .bento - grid {
0 commit comments