search

assets/css/_page-header.scss

@@ -1,3 +1,4 @@
+@use "abstracts/mixins.scss" as *;
 
 .page-header{
     // margin-top: calc(var(--spacing)*1);

assets/css/_site-header.scss

@@ -1,3 +1,5 @@
+@use "abstracts/mixins.scss" as *;
+
 #site-header{
     height: var(--header-h);
     width: 100vw;
@@ -13,63 +15,31 @@
 
     a{ text-decoration: none; }
 
+
+    #logo-botascopia{
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        svg{
+            width: 35px;
+            fill: var(--color-green);
+        }
+    }
+
     h1{
         font-family: var(--font-title);
         color: var(--color-txt);
         text-decoration: none;
-        font-size: 1.2rem;
+        font-size: 25px;
+        position: relative;
+        top: -2px;
+        color: var(--color-green);
     }
 }
 #site-header ul{
     list-style: none;
 }
 
-/*----------------*/
-/*   search bar   */
-/*----------------*/
-
-.search {
-    display: flex;
-    flex-direction: row-reverse;
-    height: calc(var(--unit)*1.5);
-    flex-grow: 2;
-}
-
-.search__toggle {
-    display: none;
-}
-.search__label {
-    cursor: pointer;
-    user-select: none;
-    width: calc(var(--unit)*1.5);
-    height: calc(var(--unit)*1.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.search__input {
-    display: none;
-}
-.search__icon{
-    width: var(--unit);
-}
-
-.search__icon--open {
-    display: block;
-}
-.search__icon--close {
-    display: none;
-}
-
-.search__toggle:checked ~ .search__input {
-    display: block;
-}
-.search__toggle:checked ~ .search__label .search__icon--open {
-    display: none;
-}
-.search__toggle:checked ~ .search__label .search__icon--close {
-    display: block;
-}
 
 #btn__connexion{
     font-weight: 500;

assets/css/abstracts/_var.scss

@@ -56,6 +56,7 @@
     --color-green-black:    #016042;
 
     --color-txt:       rgb(41, 41, 41);
+    --color-txt: #0D2846;
     --color-txt-light: #a5a9a9;
     --color-light:      #DCDDDD;
     --color-x-light:    #eaebeb;

assets/css/components/_buttons.scss

@@ -11,7 +11,7 @@
     align-items: center;
     justify-content: center;
     height: calc(var(--unit)*1.5);
-
+    min-width: calc(var(--unit)*1.5);
     border-radius: var(--radius-btn);
     cursor: pointer;
 

assets/css/components/_search.scss

@@ -0,0 +1,110 @@
+@use "../abstracts/mixins.scss" as *;
+
+.search {
+    display: flex;
+    height: calc(var(--unit)*1.5);
+    flex-grow: 2;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: calc(var(--padding-inner)*0.5);
+
+    svg {
+        @include icon(18px);
+        stroke-width: 1px;
+        stroke: var(--color-txt);
+    }
+
+
+
+    .search__input-group {
+        display: grid;
+        grid-template-columns: var(--unit) 1fr;
+        width: 100%;
+        height: calc(var(--unit)*1.5);
+
+
+        input {
+            grid-column: 1/end;
+            grid-row: 1;
+            padding-left: calc(var(--padding-inner)*2.5);
+            font-family: sans-serif;
+            font-family: var(--font);
+            font-size: var(--fs-normal);
+            font-weight: 500;
+            border-radius: var(--radius-small);
+            border: 1px solid var(--color-txt-light);
+            outline: none;
+
+            &::placeholder {
+                font-family: var(--font);
+                font-size: var(--fs-normal);
+            }
+
+            &:focus {
+                outline: 1px solid var(--color-violet);
+            }
+
+        }
+
+        button {
+            grid-column: 1;
+            grid-row: 1;
+            z-index: 10;
+            align-self: center;
+            position: relative;
+            left: 10px;
+            top: 2px;
+
+        }
+    }
+
+    .search__icon {
+        width: calc(var(--unit)*1.25);
+        height: calc(var(--unit)*1.25);
+        // background-color: red;
+        border-radius: var(--radius-btn);
+        border: 1px solid var(--color-txt);
+        // background-color: var(--color-x-light);
+        cursor: pointer;
+
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+ 
+        &:hover {
+            background-color: var(--color-x-light);
+        }
+    }
+
+}
+
+
+#search-toggle {
+    display: none;
+}
+
+
+#search-toggle~[for="search-toggle"] .search__icon--open {
+    display: flex;
+}
+
+#search-toggle~[for="search-toggle"] .search__icon--close {
+    display: none;
+}
+
+#search-toggle~.search__input-group {
+    display: none;
+}
+
+#search-toggle:checked~[for="search-toggle"] .search__icon--open {
+    display: none;
+}
+
+#search-toggle:checked~[for="search-toggle"] .search__icon--close {
+    display: flex;
+}
+
+#search-toggle:checked~.search__input-group {
+    display: grid;
+}

assets/css/components/_taxon-card-inline.scss

@@ -31,10 +31,7 @@
         }
         &:first-of-type::before{ border-color: var(--color-green-light);}
 
-        .chart-edit {
-            display: block;
-            margin-right: var(--padding-inner);
-        }
+       
 
        
 
@@ -96,4 +93,8 @@
             display: block!important;
             z-index: 30;
     }
+     .taxon .chart-edit {
+            display: block;
+            margin-right: var(--padding-inner);
+        }
 }

assets/css/components/_taxon-card.scss

@@ -74,7 +74,6 @@
 
     &:hover{
         outline: 2px solid var(--color-green);
-        background-color: var(--color-green-medium);
 
     }
 

assets/css/pages/_home-item-nav.scss

@@ -13,10 +13,8 @@
     display: flex;
     flex-direction: column;
 
-    &:hover{
-        background-color: var(--color-light);
-        // color: white;
-    }
+    text-decoration: none;
+
 
     cursor: pointer;
 
@@ -46,7 +44,12 @@
     }
 
     &:hover{
-        border-color: var(--color-txt);
+        // .title{
+        //     color: var(--data-color);
+        // }
+        background-color: var(--data-color-light);
+       
+        // border-color: var(--color-txt);
         .btn--go-to{
             left: calc(var(--unit)*0.25);
         }

assets/css/pages/_home.scss

@@ -55,6 +55,11 @@
 
     .species-list{
         margin-bottom: calc(var(--spacing)*3);
+
+        .taxon:hover{
+            border-color: red!important;
+            
+        }
     }
 
     .species-list .title{
@@ -95,10 +100,10 @@
     }
 
     .section--title {
-        font-size: 3.6em;
+        // font-size: 3.6em;
 
         margin-bottom: calc(var(--unit)*1.5);
-        color: var(--color-green);
+        // color: var(--color-orange);
 
 
     }

assets/style.css

@@ -38,6 +38,7 @@
   --color-green-x-light: #eef7f4;
   --color-green-black: #016042;
   --color-txt: rgb(41, 41, 41);
+  --color-txt: #0D2846;
   --color-txt-light: #a5a9a9;
   --color-light: #DCDDDD;
   --color-x-light: #eaebeb;
@@ -127,71 +128,29 @@ figure, picture, img {
 #site-header a {
   text-decoration: none;
 }
+#site-header #logo-botascopia {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+#site-header #logo-botascopia svg {
+  width: 35px;
+  fill: var(--color-green);
+}
 #site-header h1 {
   font-family: var(--font-title);
   color: var(--color-txt);
   text-decoration: none;
-  font-size: 1.2rem;
+  font-size: 25px;
+  position: relative;
+  top: -2px;
+  color: var(--color-green);
 }
 
 #site-header ul {
   list-style: none;
 }
 
-/*----------------*/
-/*   search bar   */
-/*----------------*/
-.search {
-  display: flex;
-  flex-direction: row-reverse;
-  height: calc(var(--unit) * 1.5);
-  flex-grow: 2;
-}
-
-.search__toggle {
-  display: none;
-}
-
-.search__label {
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  width: calc(var(--unit) * 1.5);
-  height: calc(var(--unit) * 1.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.search__input {
-  display: none;
-}
-
-.search__icon {
-  width: var(--unit);
-}
-
-.search__icon--open {
-  display: block;
-}
-
-.search__icon--close {
-  display: none;
-}
-
-.search__toggle:checked ~ .search__input {
-  display: block;
-}
-
-.search__toggle:checked ~ .search__label .search__icon--open {
-  display: none;
-}
-
-.search__toggle:checked ~ .search__label .search__icon--close {
-  display: block;
-}
-
 #btn__connexion {
   font-weight: 500;
   font-size: 1rem;
@@ -297,6 +256,108 @@ figure, picture, img {
   padding: var(--padding-body);
 }
 
+.search {
+  display: flex;
+  height: calc(var(--unit) * 1.5);
+  flex-grow: 2;
+  flex-direction: row-reverse;
+  align-items: center;
+  gap: calc(var(--padding-inner) * 0.5);
+}
+.search svg {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+}
+.search svg svg {
+  width: 100%;
+  height: 100%;
+}
+.search svg {
+  stroke-width: 1px;
+  stroke: var(--color-txt);
+}
+.search .search__input-group {
+  display: grid;
+  grid-template-columns: var(--unit) 1fr;
+  width: 100%;
+  height: calc(var(--unit) * 1.5);
+}
+.search .search__input-group input {
+  grid-column: 1/end;
+  grid-row: 1;
+  padding-left: calc(var(--padding-inner) * 2.5);
+  font-family: sans-serif;
+  font-family: var(--font);
+  font-size: var(--fs-normal);
+  font-weight: 500;
+  border-radius: var(--radius-small);
+  border: 1px solid var(--color-txt-light);
+  outline: none;
+}
+.search .search__input-group input::-moz-placeholder {
+  font-family: var(--font);
+  font-size: var(--fs-normal);
+}
+.search .search__input-group input::placeholder {
+  font-family: var(--font);
+  font-size: var(--fs-normal);
+}
+.search .search__input-group input:focus {
+  outline: 1px solid var(--color-violet);
+}
+.search .search__input-group button {
+  grid-column: 1;
+  grid-row: 1;
+  z-index: 10;
+  align-self: center;
+  position: relative;
+  left: 10px;
+  top: 2px;
+}
+.search .search__icon {
+  width: calc(var(--unit) * 1.25);
+  height: calc(var(--unit) * 1.25);
+  border-radius: var(--radius-btn);
+  border: 1px solid var(--color-txt);
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.search .search__icon:hover {
+  background-color: var(--color-x-light);
+}
+
+#search-toggle {
+  display: none;
+}
+
+#search-toggle ~ [for=search-toggle] .search__icon--open {
+  display: flex;
+}
+
+#search-toggle ~ [for=search-toggle] .search__icon--close {
+  display: none;
+}
+
+#search-toggle ~ .search__input-group {
+  display: none;
+}
+
+#search-toggle:checked ~ [for=search-toggle] .search__icon--open {
+  display: none;
+}
+
+#search-toggle:checked ~ [for=search-toggle] .search__icon--close {
+  display: flex;
+}
+
+#search-toggle:checked ~ .search__input-group {
+  display: grid;
+}
+
 .btn--solid {
   font-weight: 600;
   font-size: 1.2rem;
@@ -306,6 +367,7 @@ figure, picture, img {
   align-items: center;
   justify-content: center;
   height: calc(var(--unit) * 1.5);
+  min-width: calc(var(--unit) * 1.5);
   border-radius: var(--radius-btn);
   cursor: pointer;
 }
@@ -1494,7 +1556,6 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
 }
 .species-list .taxon:hover {
   outline: 2px solid var(--color-green);
-  background-color: var(--color-green-medium);
 }
 
 #view-edit:checked ~ .page-species-list .family .species-list,
@@ -1535,13 +1596,6 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
 #view-list:checked ~ .page-species-list .species-list .taxon:first-of-type::before {
   border-color: var(--color-green-light);
 }
-#view-edit:checked ~ .page-species-list .family .species-list .taxon .chart-edit,
-#view-edit:checked ~ .page-species-list .species-list .taxon .chart-edit,
-#view-list:checked ~ .page-species-list .family .species-list .taxon .chart-edit,
-#view-list:checked ~ .page-species-list .species-list .taxon .chart-edit {
-  display: block;
-  margin-right: var(--padding-inner);
-}
 #view-edit:checked ~ .page-species-list .family .species-list .taxon figure,
 #view-edit:checked ~ .page-species-list .species-list .taxon figure,
 #view-list:checked ~ .page-species-list .family .species-list .taxon figure,
@@ -1633,6 +1687,11 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   display: block !important;
   z-index: 30;
 }
+#view-edit:checked ~ .page-species-list .family .species-list .taxon .chart-edit,
+#view-edit:checked ~ .page-species-list .species-list .taxon .chart-edit {
+  display: block;
+  margin-right: var(--padding-inner);
+}
 
 .item-nav {
   border: 1.5px solid var(--color-txt);
@@ -1644,11 +1703,7 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   min-height: calc(var(--unit) * 5);
   display: flex;
   flex-direction: column;
-}
-.item-nav:hover {
-  background-color: var(--color-light);
-}
-.item-nav {
+  text-decoration: none;
   cursor: pointer;
 }
 .item-nav .title {
@@ -1674,7 +1729,7 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   padding-right: 2ch;
 }
 .item-nav:hover {
-  border-color: var(--color-txt);
+  background-color: var(--data-color-light);
 }
 .item-nav:hover .btn--go-to {
   left: calc(var(--unit) * 0.25);
@@ -1725,6 +1780,9 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
 #main_home .species-list {
   margin-bottom: calc(var(--spacing) * 3);
 }
+#main_home .species-list .taxon:hover {
+  border-color: red !important;
+}
 #main_home .species-list .title {
   grid-column: 1/end;
   font-size: var(--fs-medium);
@@ -1750,9 +1808,7 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   max-width: 100%;
 }
 #home__hero .section--title {
-  font-size: 3.6em;
   margin-bottom: calc(var(--unit) * 1.5);
-  color: var(--color-green);
 }
 #home__hero {
   /* button{ display: none;} */

assets/style.scss

@@ -6,6 +6,7 @@
 @use "css/site-header";
 @use "css/site-nav";
 @use "css/site-footer";
+@use "css/components/search";
 @use "css/components/buttons";
 @use "css/components/slideshow";
 @use "css/components/logos-container";

components/icons/search.svg

@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
-  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
-</svg>
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z" fill-rule="nonzero"/></svg>

components/logo-botascopiasvg.svg

@@ -0,0 +1,19 @@
+<svg width="100%" height="100%" viewBox="0 0 1442 1442" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-175923,-10468)">
+        <g transform="matrix(0.126462,0,0,0.463357,154606,3775.53)">
+            <rect x="168566" y="14444.6" width="11393.4" height="3109.18" style="fill:none;"/>
+            <g transform="matrix(-20.6186,1.98779,-7.28325,-5.62735,180138,17172.1)">
+                <path d="M263.708,85.044L263.823,85.003L263.824,85.003L454.395,152.187L441.576,188.704C357.004,168.958 335.533,184.057 301.483,172.029C294.583,169.592 284.067,165.336 275.642,155.646C247.658,123.456 263.708,85.044 263.708,85.044Z"/>
+            </g>
+            <g transform="matrix(20.6186,1.98779,7.28325,-5.62735,168387,17172.1)">
+                <path d="M263.708,85.044L263.823,85.003L263.824,85.003L454.395,152.187L441.576,188.704C357.004,168.958 335.533,184.057 301.483,172.029C294.583,169.592 284.067,165.336 275.642,155.646C247.658,123.456 263.708,85.044 263.708,85.044Z"/>
+            </g>
+            <g transform="matrix(7.79856,0,0,2.93676,-726462,-119045)">
+                <path d="M115415,46482.9L114917,46482.9L114917,46425.5L116082,46425.5L116082,46482.9L115584,46482.9C115579,46495.4 115564,46504.7 115545,46504.7L115453,46504.7C115435,46504.7 115419,46495.4 115415,46482.9Z"/>
+            </g>
+            <g transform="matrix(-2.88055,0.786179,-1.95001,-0.532209,552896,-42467.8)">
+                <path d="M103151,42843.5C103222,42877.1 103292,42939.9 103353,43030C103478,43213.3 103525,43456 103485,43638.6C103361,43698 103197,43627.4 103073,43444.1C103010,43351.1 102967,43242.8 102945,43134.9C102929,43147 102913,43158.1 102897,43168C102951,43327.3 102983,43524.6 102983,43738C102983,44147 102865,44496.6 102700,44634.1C102534,44496.6 102417,44147 102417,43738C102417,43524.6 102449,43327.3 102503,43168C102484,43156.7 102466,43143.9 102448,43129.6C102427,43236.9 102385,43344.9 102322,43437.4C102202,43614.7 102043,43683 101924,43625.6C101885,43448.9 101931,43214.1 102051,43036.7C102112,42947.2 102182,42885.4 102253,42853.6C102243,42831 102235,42807.7 102227,42783.7C102123,42855.5 101996,42897.6 101860,42897.6C101583,42897.6 101346,42723.8 101253,42479.5C101346,42235.1 101583,42061.3 101860,42061.3C101990,42061.3 102111,42099.8 102213,42165.9C102219,42144.4 102225,42123.3 102232,42102.8C102168,42067.9 102104,42008.5 102048,41926.2C101925,41744.4 101878,41503.8 101917,41322.7C102040,41263.9 102203,41333.8 102326,41515.6C102380,41594.9 102419,41685.4 102443,41777.3C102456,41766.1 102470,41755.7 102484,41746.2C102441,41598.5 102417,41423.5 102417,41236.1C102417,40827.1 102534,40477.6 102700,40340C102865,40477.6 102983,40827.1 102983,41236.1C102983,41423.5 102958,41598.5 102916,41746.2C102929,41755.2 102942,41765 102955,41775.6C102979,41687 103017,41599.9 103069,41523.4C103192,41341.8 103355,41271.9 103477,41330.7C103517,41511.6 103470,41752 103347,41933.5C103293,42013.3 103231,42071.5 103169,42106.7C103176,42127.2 103182,42148.3 103188,42169.8C103291,42101.3 103414,42061.3 103547,42061.3C103824,42061.3 104060,42235.1 104153,42479.5C104060,42723.8 103824,42897.6 103547,42897.6C103408,42897.6 103279,42854 103174,42779.7C103167,42801.5 103159,42822.8 103151,42843.5ZM102700,41942.8C102510,41942.8 102356,42170.6 102356,42451.1C102356,42731.7 102510,42959.4 102700,42959.4C102890,42959.4 103044,42731.7 103044,42451.1C103044,42170.6 102890,41942.8 102700,41942.8Z"/>
+            </g>
+        </g>
+    </g>
+</svg>

components/search.html

@@ -1,8 +1,14 @@
 <div class="search">
     <input type="checkbox" id="search-toggle" class="search__toggle">
-    <label for="search-toggle" class="search__label">
+  
+    
+      <label for="search-toggle">
         <span class="search__icon search__icon--open"><include src="/components/icons/search.svg"></include></span>
         <span class="search__icon search__icon--close"><include src="/components/icons/x-lg.svg"></include></span>
-    </label>
-    <input type="text" class="search__input" placeholder="Recherchez une plante ou un livret">
+        </label>
+
+    <div class="search__input-group">
+        <button><include src="/components/icons/search.svg"></include></button>
+        <input type="text" id="search__input" placeholder="Recherchez une plante ou un livret">
+    </div>
 </div>

components/site-header.html

@@ -1,5 +1,26 @@
 <header id="site-header">
-    <a href="/">
+    <a id="logo-botascopia" href="/">
+        <div class="logo-botascopia">
+            <svg width="100%" height="100%" viewBox="0 0 1442 1442"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+                <g transform="matrix(1,0,0,1,-175923,-10468)">
+                    <g transform="matrix(0.126462,0,0,0.463357,154606,3775.53)">
+                        <rect x="168566" y="14444.6" width="11393.4" height="3109.18" style="fill:none;"/>
+                        <g transform="matrix(-20.6186,1.98779,-7.28325,-5.62735,180138,17172.1)">
+                            <path d="M263.708,85.044L263.823,85.003L263.824,85.003L454.395,152.187L441.576,188.704C357.004,168.958 335.533,184.057 301.483,172.029C294.583,169.592 284.067,165.336 275.642,155.646C247.658,123.456 263.708,85.044 263.708,85.044Z"/>
+                        </g>
+                        <g transform="matrix(20.6186,1.98779,7.28325,-5.62735,168387,17172.1)">
+                            <path d="M263.708,85.044L263.823,85.003L263.824,85.003L454.395,152.187L441.576,188.704C357.004,168.958 335.533,184.057 301.483,172.029C294.583,169.592 284.067,165.336 275.642,155.646C247.658,123.456 263.708,85.044 263.708,85.044Z"/>
+                        </g>
+                        <g transform="matrix(7.79856,0,0,2.93676,-726462,-119045)">
+                            <path d="M115415,46482.9L114917,46482.9L114917,46425.5L116082,46425.5L116082,46482.9L115584,46482.9C115579,46495.4 115564,46504.7 115545,46504.7L115453,46504.7C115435,46504.7 115419,46495.4 115415,46482.9Z"/>
+                        </g>
+                        <g transform="matrix(-2.88055,0.786179,-1.95001,-0.532209,552896,-42467.8)">
+                            <path d="M103151,42843.5C103222,42877.1 103292,42939.9 103353,43030C103478,43213.3 103525,43456 103485,43638.6C103361,43698 103197,43627.4 103073,43444.1C103010,43351.1 102967,43242.8 102945,43134.9C102929,43147 102913,43158.1 102897,43168C102951,43327.3 102983,43524.6 102983,43738C102983,44147 102865,44496.6 102700,44634.1C102534,44496.6 102417,44147 102417,43738C102417,43524.6 102449,43327.3 102503,43168C102484,43156.7 102466,43143.9 102448,43129.6C102427,43236.9 102385,43344.9 102322,43437.4C102202,43614.7 102043,43683 101924,43625.6C101885,43448.9 101931,43214.1 102051,43036.7C102112,42947.2 102182,42885.4 102253,42853.6C102243,42831 102235,42807.7 102227,42783.7C102123,42855.5 101996,42897.6 101860,42897.6C101583,42897.6 101346,42723.8 101253,42479.5C101346,42235.1 101583,42061.3 101860,42061.3C101990,42061.3 102111,42099.8 102213,42165.9C102219,42144.4 102225,42123.3 102232,42102.8C102168,42067.9 102104,42008.5 102048,41926.2C101925,41744.4 101878,41503.8 101917,41322.7C102040,41263.9 102203,41333.8 102326,41515.6C102380,41594.9 102419,41685.4 102443,41777.3C102456,41766.1 102470,41755.7 102484,41746.2C102441,41598.5 102417,41423.5 102417,41236.1C102417,40827.1 102534,40477.6 102700,40340C102865,40477.6 102983,40827.1 102983,41236.1C102983,41423.5 102958,41598.5 102916,41746.2C102929,41755.2 102942,41765 102955,41775.6C102979,41687 103017,41599.9 103069,41523.4C103192,41341.8 103355,41271.9 103477,41330.7C103517,41511.6 103470,41752 103347,41933.5C103293,42013.3 103231,42071.5 103169,42106.7C103176,42127.2 103182,42148.3 103188,42169.8C103291,42101.3 103414,42061.3 103547,42061.3C103824,42061.3 104060,42235.1 104153,42479.5C104060,42723.8 103824,42897.6 103547,42897.6C103408,42897.6 103279,42854 103174,42779.7C103167,42801.5 103159,42822.8 103151,42843.5ZM102700,41942.8C102510,41942.8 102356,42170.6 102356,42451.1C102356,42731.7 102510,42959.4 102700,42959.4C102890,42959.4 103044,42731.7 103044,42451.1C103044,42170.6 102890,41942.8 102700,41942.8Z"/>
+                        </g>
+                    </g>
+                </g>
+            </svg>
+        </div>
         <h1>Botascopia</h1>
     </a>
 

index.html

@@ -71,18 +71,18 @@
 
 
                     <div class="item-nav__group">
-                        <div class="item-nav">
+                        <a href="#" class="item-nav">
                             <h3 class="title">Consulter des livrets</h3>
                             <p class="description">Consultez et téléchargez librement les&nbsp;livrets existants.</p>
                             <button class="btn--go-to">→</button>
-                        </div>
+                        </a>
 
-                        <div class="item-nav">
+                        <a href="#" class="item-nav">
                             <h3 class="title">Créer un livret</h3>
                             <p class="description">À partir d’une liste d’espèces, générez un&nbsp;livret avec
                                 sa&nbsp;clé de&nbsp;détermination.</p>
                             <button class="btn--go-to">→</button>
-                        </div>
+                        </a>
                     </div>
 
                 </div>
@@ -132,19 +132,19 @@
 
                     <div class="item-nav__group">
 
-                        <div class="item-nav">
+                        <a href="#" class="item-nav">
                             <h3 class="title">Organiser une animation</h3>
                             <p class="description">Trouvez des exemples d’activités mobilisant un livret et explorer les
                                 kits pédagogiques.</p>
                             <button class="btn--go-to">→</button>
-                        </div>
+                        </a>
 
-                        <div class="item-nav">
+                        <a href="#"class="item-nav">
                             <h3 class="title">Organiser un atelier supervisé</h3>
                             <p class="description">Appuyez vos enseignements en faisant contribuer vos apprenants à la
                                 base de connaissance.</p>
                             <button class="btn--go-to">→</button>
-                        </div>
+                        </a>
                     </div>
 
 
@@ -204,18 +204,18 @@
 
                     <div class="item-nav__group">
 
-                        <div class="item-nav">
+                        <a href="/species-list.html" class="item-nav">
                             <h3 class="title">Explorer les espèces</h3>
                             <p class="description">Accédez à l'ensemble de la base ou consultez et téléchargez les
                                 fiches des espèces vérifiées.</p>
                             <button class="btn--go-to">→</button>
-                        </div>
+                        </a>
 
-                        <div class="item-nav">
+                         <a href="#" class="item-nav">
                             <h3 class="title">Contribuer à la base de connaissance</h3>
                             <p class="description">Enrichir ou relire, botanistes avertis, contactez-nous ! </p>
                             <button class="btn--go-to">→</button>
-                        </div>
+                         </a>
 
                     </div>
 
@@ -230,7 +230,7 @@
                         <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Acore odorant</a></h3>
                         <p class="latin">Acorus calamus L.</p>
                     </div>
 
@@ -239,7 +239,7 @@
                     <button class="btn-edit">
                         <include src="/components/icons/edit.svg"></include>
                     </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
             
@@ -249,7 +249,7 @@
                         <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Aulne glutineux</a></h3>
                         <p class="latin">Alnus glutinosa</p>
                     </div>
 
@@ -260,7 +260,7 @@
                     <button class="btn-edit">
                         <include src="/components/icons/edit.svg"></include>
                     </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -268,7 +268,7 @@
                         <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Aulne glutineux</a></h3>
                         <p class="latin">Alnus glutinosa</p>
                     </div>
 
@@ -279,7 +279,7 @@
                     <button class="btn-edit">
                         <include src="/components/icons/edit.svg"></include>
                     </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -287,7 +287,7 @@
                         <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Gouet d'Italie</a></h3>
                         <p class="latin">Arum Italicum Mill.</p>
                     </div>
 
@@ -298,7 +298,7 @@
                     <button class="btn-edit">
                         <include src="/components/icons/edit.svg"></include>
                     </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
 

species-list-by-families.html

@@ -131,7 +131,7 @@
                 </figure>
                 <div class="name">
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Acore odorant</a></h3>
                         <p class="latin">Acorus calamus L.</p>
                     </div>
                 </div>
@@ -143,7 +143,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                <a class="link-block" href="#" target="_blank"></a>
+                <a class="link-block" href="/species-single.html" target="_blank"></a>
             </article>
 
         </div>
@@ -168,7 +168,7 @@
                         <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Acore odorant</a></h3>
                         <p class="latin">Acorus calamus L.</p>
                     </div>
 
@@ -179,7 +179,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -187,7 +187,7 @@
                         <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Aulne glutineux</a></h3>
                         <p class="latin">Alnus glutinosa</p>
                     </div>
 
@@ -200,7 +200,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -208,7 +208,7 @@
                         <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Gouet d'Italie</a></h3>
                         <p class="latin">Arum Italicum Mill.</p>
                     </div>
 
@@ -221,7 +221,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -229,7 +229,7 @@
                         <img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Charme commun</a></h3>
                         <p class="latin">Carpinus betulus L.</p>
                     </div>
 
@@ -242,7 +242,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -250,7 +250,7 @@
                         <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Acore odorant</a></h3>
                         <p class="latin">Acorus calamus L.</p>
                     </div>
 
@@ -261,7 +261,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -269,7 +269,7 @@
                         <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Aulne glutineux</a></h3>
                         <p class="latin">Alnus glutinosa</p>
                     </div>
 
@@ -282,7 +282,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -290,7 +290,7 @@
                         <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Gouet d'Italie</a></h3>
                         <p class="latin">Arum Italicum Mill.</p>
                     </div>
 
@@ -303,7 +303,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -311,7 +311,7 @@
                         <img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Charme commun</a></h3>
                         <p class="latin">Carpinus betulus L.</p>
                     </div>
 
@@ -324,7 +324,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
 
@@ -348,7 +348,7 @@
                         <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Acore odorant</a></h3>
                         <p class="latin">Acorus calamus L.</p>
                     </div>
 
@@ -359,7 +359,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -367,7 +367,7 @@
                         <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Aulne glutineux</a></h3>
                         <p class="latin">Alnus glutinosa</p>
                     </div>
 
@@ -380,7 +380,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -388,7 +388,7 @@
                         <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Gouet d'Italie</a></h3>
                         <p class="latin">Arum Italicum Mill.</p>
                     </div>
 
@@ -401,7 +401,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -409,7 +409,7 @@
                         <img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Charme commun</a></h3>
                         <p class="latin">Carpinus betulus L.</p>
                     </div>
 
@@ -422,7 +422,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -430,7 +430,7 @@
                         <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Acore odorant</a></h3>
                         <p class="latin">Acorus calamus L.</p>
                     </div>
 
@@ -441,7 +441,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -449,7 +449,7 @@
                         <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Aulne glutineux</a></h3>
                         <p class="latin">Alnus glutinosa</p>
                     </div>
 
@@ -462,7 +462,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -470,7 +470,7 @@
                         <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Gléchome lierre terrestre</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Gléchome lierre terrestre</a></h3>
                         <p class="latin">Glechoma hederacea</p>
                     </div>
 
@@ -483,7 +483,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -491,7 +491,7 @@
                         <img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
+                        <h3 class="vernacular"><a href="/species-list.html" target="_blank">Charme commun</a></h3>
                         <p class="latin">Carpinus betulus L.</p>
                     </div>
 
@@ -504,7 +504,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
 

species-list.html

@@ -89,7 +89,7 @@
                 </figure>
                 <div class="name">
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Acore odorant</a></h3>
                         <p class="latin">Acorus calamus L.</p>
                     </div>
                 </div>
@@ -101,7 +101,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                <a class="link-block" href="#" target="_blank"></a>
+                <a class="link-block" href="/species-single.html" target="_blank"></a>
             </article>
 
 
@@ -113,7 +113,7 @@
                         <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Acore odorant</a></h3>
                         <p class="latin">Acorus calamus L.</p>
                     </div>
 
@@ -124,7 +124,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -132,7 +132,7 @@
                         <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Aulne glutineux</a></h3>
                         <p class="latin">Alnus glutinosa</p>
                     </div>
 
@@ -145,7 +145,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -153,7 +153,7 @@
                         <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Gouet d'Italie</a></h3>
                         <p class="latin">Arum Italicum Mill.</p>
                     </div>
 
@@ -166,7 +166,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -174,7 +174,7 @@
                         <img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Charme commun</a></h3>
                         <p class="latin">Carpinus betulus L.</p>
                     </div>
 
@@ -187,7 +187,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -195,7 +195,7 @@
                         <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Acore odorant</a></h3>
                         <p class="latin">Acorus calamus L.</p>
                     </div>
 
@@ -206,7 +206,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -214,7 +214,7 @@
                         <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Aulne glutineux</a></h3>
                         <p class="latin">Alnus glutinosa</p>
                     </div>
 
@@ -227,7 +227,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -235,7 +235,7 @@
                         <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Gouet d'Italie</a></h3>
                         <p class="latin">Arum Italicum Mill.</p>
                     </div>
 
@@ -248,7 +248,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -256,7 +256,7 @@
                         <img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Charme commun</a></h3>
                         <p class="latin">Carpinus betulus L.</p>
                     </div>
 
@@ -269,7 +269,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
 
@@ -282,7 +282,7 @@
                         <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Acore odorant</a></h3>
                         <p class="latin">Acorus calamus L.</p>
                     </div>
 
@@ -293,7 +293,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -301,7 +301,7 @@
                         <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Aulne glutineux</a></h3>
                         <p class="latin">Alnus glutinosa</p>
                     </div>
 
@@ -314,7 +314,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -322,7 +322,7 @@
                         <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Gouet d'Italie</a></h3>
                         <p class="latin">Arum Italicum Mill.</p>
                     </div>
 
@@ -335,7 +335,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -343,7 +343,7 @@
                         <img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Charme commun</a></h3>
                         <p class="latin">Carpinus betulus L.</p>
                     </div>
 
@@ -356,7 +356,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -364,7 +364,7 @@
                         <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Acore odorant</a></h3>
                         <p class="latin">Acorus calamus L.</p>
                     </div>
 
@@ -375,7 +375,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -383,7 +383,7 @@
                         <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Aulne glutineux</a></h3>
                         <p class="latin">Alnus glutinosa</p>
                     </div>
 
@@ -396,7 +396,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -404,7 +404,7 @@
                         <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Gléchome lierre terrestre</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Gléchome lierre terrestre</a></h3>
                         <p class="latin">Glechoma hederacea</p>
                     </div>
 
@@ -417,7 +417,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -425,7 +425,7 @@
                         <img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Charme commun</a></h3>
                         <p class="latin">Carpinus betulus L.</p>
                     </div>
 
@@ -438,7 +438,7 @@
                     <span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
                     </a>
                 </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>