Ajout d'un panneau vertical pour le resultat de la recerche

css/style.css

@@ -5,12 +5,29 @@ body, html {
 
 body {
     pointer-events: none;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+
+    min-height: 100vh;
 }
 
 body > * {
     pointer-events: all;
 }
 
+body > hr {
+	border: none;
+	padding: 0;
+	margin: 0;
+	flex: 1;
+	min-height: 50vh;
+	flex-shrink: 0;
+	pointer-events: none;
+}
+
 /* HEADER and NAV */
 
 #main-header {
@@ -112,4 +129,89 @@ body > * {
     filter: drop-shadow(0 0 10px black);
     opacity: clamp(0, calc( 1 - ( var(--zoom-level) - 18 ) ), 1) ;
     pointer-events: none;
-}
+}
+
+/* SAERCH FORM */
+
+#search-section {
+	position: sticky;
+	top: 0;
+	left: 0;
+	z-index: 100i;
+}
+
+/* PANEL */
+
+#result-panel {
+	background: black;
+	border-top: 3px white solid;
+
+	color: white;
+}
+
+#result-panel.empty,
+#result-panel:empty{
+	display:none;
+}
+
+#result-panel > * {
+	padding: 1em;
+	margin: 0;
+}
+
+#result-panel::part(navigation-panel) {
+	background: black;
+	color: white;
+	box-shadow: 0 0 10px black;
+	border-top: solid 1px rgba(255, 255, 255, 0.5);
+}
+
+#result-panel::part(dot),
+#result-panel::part(dot-active) {
+	border-radius: 0;
+	width: 1ex;
+	height: 1ex;
+	margin-top: 0.5ex;
+}
+
+#result-panel::part(dot-active) {
+	transform-origin: 0% 100%;
+	transform: scaleX(1) scaleY(1.5);
+}
+
+camp-feature-short-header {
+	display: grid;
+	grid-template-rows: 1fr min-content;
+	grid-template-columns: 1fr;
+}
+
+camp-feature-short-header h2 {
+	margin: 0;
+	padding: 0;
+	font-size: 1em;
+	font-weight: bold;
+}
+
+camp-feature-short-header .feature-location {
+	margin: 0;
+	padding: 0;
+	font-size: 0.6em;
+	opacity: 0.75;
+}
+
+#search-result {
+	list-style-type: none;
+}
+
+#search-result > li:not(:first-child) {
+	margin-top: 1em;
+}
+
+#search-result > li:not(:last-child) {
+	margin-bottom: 1em;
+}
+
+#search-result > li > a {
+	text-decoration: none;
+	color: inherit;
+}