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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 1 : / Ligne 1 : @@
-/* Wrapper avec overflow pour le sticky */
+/* Container avec sticky */
-.accueil-search-wrapper {
+.accueil-search-container {
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: 2rem;
-}
-/* Container sticky */
-.accueil-search-sticky {
    position: sticky;
    top: 0;
-   z-index: 10;
+   z-index: 100;
    background: var(--color-surface-0);
-   padding: 1rem;
+   padding: 1rem 0;
+  margin-bottom: 2rem;
+  box-shadow: 0 1px 0 var(--border-color-base);
 }
-/* Barre de recherche - largeur limitée et centrée */
+/* Barre de recherche centrée avec largeur limitée */
-.accueil-search-sticky .citizen-command-palette__search {
+.accueil-search-bar {
    display: flex;
    align-items: center;
-   gap: 12px;
+   gap: 10px;
    max-width: 600px;
    margin: 0 auto;
-   padding: 12px 16px;
+   padding: 10px 16px;
-   font-size: 0.95rem;
+   font-size: 0.9375rem;
-   line-height: 1.5;
+   line-height: 1.6;
    cursor: pointer;
    border-radius: 8px;
@@ Ligne 31 : / Ligne 26 : @@
    border-style: solid;
    border-color: var(--border-color-base);
-   transition-property: background-color, border-color, transform;
+   transition-property: background-color, border-color;
    transition-duration: 0.2s;
    transition-timing-function: ease;
@@ Ligne 37 : / Ligne 32 : @@
 /* États interactifs */
-.accueil-search-sticky .citizen-command-palette__search:hover {
+.accueil-search-bar:hover {
    background-color: var(--color-surface-2);
    border-color: var(--color-progressive);
 }
-.accueil-search-sticky .citizen-command-palette__search:active {
+.accueil-search-bar:active {
-   transform: scale(0.995);
+   transform: translateY(1px);
 }
-/* Icône de recherche - taille fixe */
+/* Icône SVG - reprend l'icône native de Citizen */
 .accueil-search-icon {
-  display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
-  position: relative;
    opacity: 0.87;
-}
-/* Loupe en CSS */
-.accueil-search-icon::before {
-  content: '';
-  position: absolute;
-  width: 9px;
-  height: 9px;
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--color-subtle);
-  border-radius: 50%;
-  top: 1px;
-  left: 1px;
-}
-.accueil-search-icon::after {
-  content: '';
-  position: absolute;
-  width: 2px;
-  height: 5px;
-  background-color: var(--color-subtle);
-  transform: rotate(45deg);
-  bottom: 1px;
-  right: 1px;
 }
@@ Ligne 86 : / Ligne 54 : @@
    user-select: none;
    flex: 1;
+  min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
+  font-weight: 400;
+}
+/* Animation au focus/hover */
+.accueil-search-bar:hover .accueil-search-icon {
+  opacity: 1;
+}
+/* Responsive - adaptation tablette */
+@media (max-width: 1000px) {
+  .accueil-search-container {
+    padding: 0.75rem 1rem;
+  }
+  .accueil-search-bar {
+    max-width: 100%;
+  }
 }
-/* Responsive */
+/* Responsive - adaptation mobile */
 @media (max-width: 768px) {
-   .accueil-search-sticky {
+   .accueil-search-container {
-     padding: 0.75rem 0.5rem;
+     padding: 0.5rem 0.75rem;
+    margin-bottom: 1.5rem;
    }
-   .accueil-search-sticky .citizen-command-palette__search {
+   .accueil-search-bar {
-    max-width: 100%;
+     padding: 9px 12px;
-     padding: 10px 14px;
+     font-size: 0.875rem;
-     font-size: 0.9rem;
+  }
+  .accueil-search-icon {
+    width: 16px;
+    height: 16px;
    }
 }
@@ Ligne 107 : / Ligne 98 : @@
 @media (max-width: 480px) {
    .accueil-search-text {
-     font-size: 0.85rem;
+     font-size: 0.8125rem;
    }
 }