Formulaire de recherche

themes/2026/assets/css/header.css

@@ -45,6 +45,44 @@ body > header > section:first-of-type > a img {
     height: auto;
 }
 
+body > header > section:first-of-type > form.site-search {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+body > header > section:first-of-type > form.site-search > input[type="search"] {
+    width: min(22rem, 36vw);
+    min-width: 12rem;
+    min-height: 2.35rem;
+    padding: 0.45rem 0.65rem;
+    border: 1px solid var(--color-border-strong);
+    background-color: color-mix(in srgb, var(--color-background-alt) 88%, #000000 12%);
+    color: var(--color-heading);
+    font-family: var(--font-body);
+    font-size: 1rem;
+}
+
+body > header > section:first-of-type > form.site-search > input[type="search"]:focus-visible {
+    border-color: var(--color-accent-1);
+    outline: 2px solid color-mix(in srgb, var(--color-accent-1) 78%, transparent);
+    outline-offset: 1px;
+}
+
+body > header > section:first-of-type > form.site-search > button.ui-button {
+    width: 2.35rem;
+    min-height: 2.35rem;
+    min-width: 2.35rem;
+    padding: 0;
+}
+
+body > header > section:first-of-type > form.site-search > button.ui-button > svg {
+    width: 1.05rem;
+    height: 1.05rem;
+    fill: currentColor;
+}
+
 body > header > section.site-stats {
     margin-top: var(--space-5);
 }

themes/2026/assets/css/index.css

@@ -5,6 +5,7 @@
 @import "article-header.css";
 @import "content.css";
 @import "list.css";
+@import "search.css";
 @import "home.css";
 @import "footer.css";
 @import "responsive.css";

themes/2026/assets/css/responsive.css

@@ -136,6 +136,17 @@
         max-width: 100%;
     }
 
+    body > header > section:first-of-type > form.site-search {
+        flex: 1 1 100%;
+        margin-left: 0;
+    }
+
+    body > header > section:first-of-type > form.site-search > input[type="search"] {
+        flex: 1 1 auto;
+        width: auto;
+        min-width: 0;
+    }
+
     main nav.articles-list > ol {
         grid-template-columns: 1fr;
     }
@@ -356,6 +367,28 @@
         letter-spacing: 0.02em;
     }
 
+    body > header > section:first-of-type > form.site-search {
+        gap: var(--space-1);
+    }
+
+    body > header > section:first-of-type > form.site-search > input[type="search"] {
+        min-height: 2.2rem;
+        padding: 0.4rem 0.55rem;
+        font-size: 0.98rem;
+    }
+
+    body > header > section:first-of-type > form.site-search > button.ui-button {
+        width: 2.2rem;
+        min-height: 2.2rem;
+        min-width: 2.2rem;
+        padding: 0;
+    }
+
+    body > header > section:first-of-type > form.site-search > button.ui-button > svg {
+        width: 0.95rem;
+        height: 0.95rem;
+    }
+
     body > header:has(> h1) > h1 {
         font-size: clamp(1.6rem, 8.2vw, 2.25rem);
     }

themes/2026/assets/css/search.css

@@ -0,0 +1,72 @@
+body > main.search-page {
+    gap: var(--space-4);
+}
+
+body > main.search-page > section.listing-search {
+    border-top: var(--border-width-regular) solid var(--color-accent-1);
+    padding-top: var(--space-2);
+}
+
+body > main.search-page .search-page-status {
+    margin-top: 0;
+    min-height: 1.4rem;
+    color: var(--color-text-muted);
+}
+
+body > main.search-page > section.listing-articles > nav.search-results {
+    margin-top: var(--space-3);
+}
+
+body > main.search-page > section.listing-articles > nav.search-results > ol {
+    list-style: none;
+    display: grid;
+    gap: var(--space-3);
+}
+
+body > main.search-page > section.listing-articles > nav.search-results > ol > li {
+    border-top: 1px solid var(--color-border);
+    padding-top: var(--space-3);
+}
+
+body > main.search-page > section.listing-articles > nav.search-results > ol > li:first-child {
+    border-top: 0;
+    padding-top: 0;
+}
+
+body > main.search-page > section.listing-articles > nav.search-results article {
+    margin-top: 0;
+    border-top: 0;
+    padding-top: 0;
+}
+
+body > main.search-page > section.listing-articles > nav.search-results article h3 {
+    font-size: clamp(1.14rem, 1.9vw, 1.55rem);
+}
+
+body > main.search-page > section.listing-articles > nav.search-results article h3 > a {
+    color: var(--color-heading);
+    text-decoration: none;
+}
+
+body > main.search-page > section.listing-articles > nav.search-results article h3 > a:is(:hover, :focus-visible) {
+    color: var(--color-link-hover);
+    text-decoration: underline;
+}
+
+body > main.search-page > section.listing-articles > nav.search-results article p.search-result-meta {
+    margin-top: var(--space-1);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1);
+    font-size: 0.86rem;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-family: var(--font-heading);
+}
+
+body > main.search-page > section.listing-articles > nav.search-results article p.search-result-path {
+    margin-top: var(--space-1);
+    color: var(--color-text-muted);
+    font-size: 0.95rem;
+}

themes/2026/layouts/_partials/header-brand.html

@@ -1,3 +1,3 @@
 <section>
-  {{ partialCached "site-title.html" (dict "Site" .) .Title (.Params.logo | default "logo-large.png") }}
+  {{ partialCached "site-title.html" (dict "Site" .) .Title (.Params.logo | default "logo-large.png") .Params.search.action .Params.search.param }}
 </section>

themes/2026/layouts/_partials/site-title.html

@@ -11,3 +11,11 @@
   {{- end -}}
   <strong>{{ $site.Title }}</strong>
 </a>
+<form class="site-search" role="search" method="get" action="{{ $site.Params.search.action | relURL }}" aria-label="Recherche">
+  <input id="header-search-input" type="search" name="{{ $site.Params.search.param }}" required aria-label="Recherche">
+  <button type="submit" class="ui-button" aria-label="Lancer la recherche" title="Lancer la recherche">
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M11 4a7 7 0 1 0 4.9 12l4.5 4.5 1.4-1.4-4.5-4.5A7 7 0 0 0 11 4Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z"></path>
+    </svg>
+  </button>
+</form>