« Modèle:Accueil/shared/styles.css » : différence entre les versions

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 160 : / Ligne 160 : @@
 /* ====================================
-. EVENT (Bannière événement)
+. EVENT BAR (Bannière événement)
     ==================================== */
-.home-event {
+.home-event-bar {
-     display: grid;
+     display: flex;
-     grid-template-columns: 300px 1fr;
+     align-items: center;
-     gap: 1.5rem;
+     gap: 1rem;
-     padding: 1.5rem;
+     padding: 0.75rem 1.5rem;
-     background: var(--color-surface-0);
+     background: linear-gradient(135deg, rgba(238, 165, 41, 0.1) 0%, rgba(135, 191, 219, 0.1) 100%);
-     border: 2px solid var(--border-color-base);
+     border-left: 4px solid var(--color-secondary);
-     border-radius: var(--radius-xl);
+     border-radius: var(--radius-md);
      margin-bottom: 2rem;
-     overflow: hidden;
+     transition: all 0.3s ease;
 }
-.home-event__image {
+.home-event-bar:hover {
-     width: 100%;
+     background: linear-gradient(135deg, rgba(238, 165, 41, 0.15) 0%, rgba(135, 191, 219, 0.15) 100%);
-    height: 100%;
+     transform: translateX(4px);
-     object-fit: cover;
-    border-radius: var(--radius-lg);
 }
-.home-event__content {
+.home-event-bar__icon {
+    font-size: 1.5rem;
+    line-height: 1;
+    flex-shrink: 0;
+}
+.home-event-bar__content {
+    flex: 1;
      display: flex;
-     flex-direction: column;
+     align-items: center;
-     justify-content: center;
+     gap: 0.75rem;
 }
-.home-event__badge {
+.home-event-bar__label {
-    display: inline-flex;
+     font-size: 0.75rem;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    background: rgba(238, 165, 41, 0.15);
-    border: 1px solid var(--color-secondary);
-    border-radius: 50px;
-     font-size: 0.875rem;
      font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
      color: var(--color-secondary);
-     margin-bottom: 1rem;
+     padding: 0.25rem 0.5rem;
+    background: rgba(238, 165, 41, 0.2);
+    border-radius: 4px;
 }
-.home-event__title {
+.home-event-bar__title {
-     font-size: 1.75rem;
+     font-size: 0.95rem;
-     font-weight: 700;
+     font-weight: 600;
      color: var(--color-base);
-    margin-bottom: 0.75rem;
 }
-.home-event__description {
+.home-event-bar__link {
-     font-size: 1rem;
+     font-size: 0.875rem;
-     color: var(--color-subtle);
+    font-weight: 600;
-     line-height: 1.6;
+     color: var(--color-primary);
-     margin-bottom: 1rem;
+     text-decoration: none;
+    white-space: nowrap;
+    transition: color 0.2s;
+}
+.home-event-bar__link:hover {
+     color: var(--color-secondary);
 }
-.home-event__date {
+@media (max-width: 768px) {
-    font-size: 0.875rem;
+    .home-event-bar {
-     color: var(--color-primary);
+        flex-direction: column;
-     font-weight: 600;
+        align-items: flex-start;
+        gap: 0.5rem;
+        padding: 1rem;
+    }
+     .home-event-bar__content {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+     }
+    .home-event-bar__link {
+        align-self: flex-end;
+    }
 }
 /* ====================================