finish page species

assets/css/_page-nav.scss

@@ -1,8 +1,14 @@
+@use "abstracts/mixins.scss" as *;
+
 .page-nav{
 
 
     .toc{
         list-style: none;
+        max-height: calc(100vh - var(--top-target) - 10px);
+        overflow: scroll;
+        @include hide-scrollbar();
+        padding-bottom: 10vh;
 
         li{
                 font-size: var(--fs-normal);

assets/css/components/_sort.scss

@@ -9,7 +9,9 @@
     }
     .is-selected{
            background-color: var(--color-txt);
+           border-color: var(--color-txt);
             color: var(--white);
+            cursor: auto;
             a{
               color: var(--white);  
             }
@@ -22,11 +24,4 @@
 }
 
 
-.group-sort-view{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-        margin-bottom: calc(var(--spacing)*1.5);
 
-}

assets/css/components/_species-list.scss

@@ -1,17 +1,3 @@
-.species-list{
-
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: calc(var(--spacing)*1);
-    margin-bottom: calc(var(--spacing)*3);
-
-    .taxon{
-          width: calc(100%/3 - var(--spacing)*3/3);
-    }
-
-    
-}
 
 .family{
     margin-bottom: calc(var(--spacing)*4);

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

@@ -1,7 +1,7 @@
-#view-edit:checked ~ .family .species-list,
+#view-edit:checked ~ .page-species .family .species-list,
-#view-edit:checked ~ .species-list,
+#view-edit:checked ~ .page-species .species-list,
-#view-list:checked ~ .family .species-list,
+#view-list:checked ~ .page-species .family .species-list,
-#view-list:checked ~ .species-list {
+#view-list:checked ~ .page-species .species-list {
     display: block;
     
 
@@ -90,10 +90,10 @@
 }
 
 
-#view-edit:checked ~ .family .species-list,
+#view-edit:checked ~ .page-species .family .species-list,
-#view-edit:checked ~ .species-list{
+#view-edit:checked ~ .page-species .species-list{
     .taxon .btn-edit{
             display: block!important;
-            z-index: 100;
+            z-index: 30;
-        }
+    }
 }

assets/css/components/_view-toggle.scss

@@ -33,6 +33,7 @@ input#view-list:checked ~ .view-toggle label[for="view-list"],
 input#view-grid:checked ~ .view-toggle label[for="view-grid"]{
     background-color: var(--color-txt);
     color: var(--white);
+    border-color: var(--color-txt);
     svg {
         fill: var(--white);
     }

assets/css/pages/_home.scss

@@ -1,4 +1,4 @@
-@use "abstracts/mixins.scss" as *;
+@use "../abstracts/mixins.scss" as *;
 
 
 .home--section-tool{

assets/css/pages/_species.scss

@@ -0,0 +1,77 @@
+[data-page="species-by-families"],
+[data-page="species"]{
+
+    .group-sort-view{
+        display: flex;
+        justify-content: space-between;
+   
+        flex-wrap: wrap;
+
+        grid-column: span 2;
+        width: 100%;
+         max-width: 100%;
+        border-bottom: 1px solid var(--color-x-light);
+        padding-top: calc(var(--spacing)*1);
+        padding-bottom: calc(var(--spacing)*0.5);
+        margin-bottom: calc(var(--spacing)*1.5);
+
+        position: sticky;
+        top: 0;
+        background-color: var(--white);
+        z-index: 50;
+    }
+
+    .page-species{
+        margin-bottom: 30vh;
+    }
+
+
+
+
+}
+
+
+[data-page="species-by-families"]{
+  .species-list{
+         align-items: center;
+
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: calc(var(--spacing)*1);
+        margin-bottom: calc(var(--spacing)*3);
+         .taxon{
+            width: calc(100%/3 - var(--spacing)*2/3);
+        }
+
+    }
+}
+
+
+
+
+
+
+
+
+[data-page="species"]{
+
+    .page-species{
+        grid-column: span 2;
+        width: 100%;
+        max-width: 100%;
+    }
+
+
+    .species-list{
+         display: grid;
+         grid-gap: calc(var(--spacing)*1);
+        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+
+        .taxon{
+            align-self: start;
+        }
+
+    }
+
+}

assets/style.css

@@ -659,7 +659,9 @@ span.controls::after {
 }
 .sort .is-selected {
   background-color: var(--color-txt);
+  border-color: var(--color-txt);
   color: var(--white);
+  cursor: auto;
 }
 .sort .is-selected a {
   color: var(--white);
@@ -668,14 +670,6 @@ span.controls::after {
   fill: var(--white);
 }
 
-.group-sort-view {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-bottom: calc(var(--spacing) * 1.5);
-}
-
 input#view-edit,
 input#view-grid,
 input#view-list {
@@ -704,6 +698,7 @@ input#view-list:checked ~ .view-toggle label[for=view-list],
 input#view-grid:checked ~ .view-toggle label[for=view-grid] {
   background-color: var(--color-txt);
   color: var(--white);
+  border-color: var(--color-txt);
 }
 input#view-edit:checked ~ .group-sort-view .view-toggle label[for=view-edit] svg,
 input#view-list:checked ~ .group-sort-view .view-toggle label[for=view-list] svg,
@@ -769,6 +764,16 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
 
 .page-nav .toc {
   list-style: none;
+  max-height: calc(100vh - var(--top-target) - 10px);
+  overflow: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.page-nav .toc::-webkit-scrollbar {
+  display: none;
+}
+.page-nav .toc {
+  padding-bottom: 10vh;
 }
 .page-nav .toc li {
   font-size: var(--fs-normal);
@@ -826,6 +831,245 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   padding-top: var(--top-target);
 }
 
+.family {
+  margin-bottom: calc(var(--spacing) * 4);
+}
+.family:target {
+  padding-top: var(--top-target);
+}
+.family .family__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 2ch;
+  margin-bottom: calc(var(--spacing) * 1.5);
+  border-radius: var(--radius-small);
+  background-color: var(--color-violet-light);
+  color: var(--color-violet);
+  border: var(--w-border) solid var(--color-violet);
+}
+.family .family__header .title {
+  font-size: var(--fs-medium);
+}
+.family .family__header .nbr-species {
+  font-weight: 500;
+}
+
+.species-list .taxon .chart-edit {
+  width: 40px;
+  height: 40px;
+}
+.species-list .taxon .chart-edit svg {
+  width: 100%;
+  height: 100%;
+}
+.species-list .taxon .chart-edit svg circle {
+  fill: #efefef;
+}
+.species-list .taxon .chart-edit svg .filled {
+  fill: var(--color-orange-medium);
+}
+.species-list .taxon .chart-edit svg .verified {
+  fill: var(--color-green);
+}
+.species-list .taxon .chart-edit, .species-list .taxon .btn-edit {
+  display: none;
+}
+.species-list .taxon {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background-color: var(--color-green-light);
+  padding: calc(var(--padding-inner) * 0.75);
+}
+.species-list .taxon .name {
+  order: 1;
+}
+.species-list .taxon figure {
+  order: 2;
+}
+.species-list .taxon figure {
+  width: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.species-list .taxon figure img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.species-list .taxon figure {
+  border-radius: var(--radius-img);
+  overflow: hidden;
+}
+.species-list .taxon .vernacular {
+  background-color: var(--color-green);
+  color: white;
+  border-radius: var(--radius-small);
+  padding: 4px 1ch;
+  margin-bottom: calc(var(--spacing) * 0.25);
+  font-size: var(--fs-normal);
+  line-height: 1.1;
+}
+.species-list .taxon .vernacular a {
+  color: white;
+  text-decoration: none;
+}
+.species-list .taxon .latin {
+  font-weight: normal;
+  font-weight: 500;
+  font-style: italic;
+  margin-bottom: calc(var(--spacing) * 0.75);
+  color: var(--color-txt);
+  font-size: var(--fs-small);
+}
+.species-list .taxon .vernacular, .species-list .taxon .latin {
+  text-align: center;
+}
+.species-list .taxon:hover {
+  outline: 2px solid var(--color-green);
+  background-color: var(--color-green-medium);
+}
+
+#view-edit:checked ~ .page-species .family .species-list,
+#view-edit:checked ~ .page-species .species-list,
+#view-list:checked ~ .page-species .family .species-list,
+#view-list:checked ~ .page-species .species-list {
+  display: block;
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon,
+#view-edit:checked ~ .page-species .species-list .taxon,
+#view-list:checked ~ .page-species .family .species-list .taxon,
+#view-list:checked ~ .page-species .species-list .taxon {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: transparent;
+  padding-inline: 0;
+  gap: calc(var(--padding-inner) * 1);
+  outline: none;
+  border-bottom: 1px solid var(--color-green-light);
+  padding-top: calc(var(--padding-inner) * 0.5);
+  padding-bottom: calc(var(--padding-inner) * 0.5);
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon::before,
+#view-edit:checked ~ .page-species .species-list .taxon::before,
+#view-list:checked ~ .page-species .family .species-list .taxon::before,
+#view-list:checked ~ .page-species .species-list .taxon::before {
+  content: "";
+  width: 100%;
+  border-top: 1px solid transparent;
+  position: absolute;
+  top: -1px;
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon:first-of-type::before,
+#view-edit:checked ~ .page-species .species-list .taxon:first-of-type::before,
+#view-list:checked ~ .page-species .family .species-list .taxon:first-of-type::before,
+#view-list:checked ~ .page-species .species-list .taxon:first-of-type::before {
+  border-color: var(--color-green-light);
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon .chart-edit,
+#view-edit:checked ~ .page-species .species-list .taxon .chart-edit,
+#view-list:checked ~ .page-species .family .species-list .taxon .chart-edit,
+#view-list:checked ~ .page-species .species-list .taxon .chart-edit {
+  display: block;
+  margin-right: var(--padding-inner);
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon figure,
+#view-edit:checked ~ .page-species .species-list .taxon figure,
+#view-list:checked ~ .page-species .family .species-list .taxon figure,
+#view-list:checked ~ .page-species .species-list .taxon figure {
+  order: 1;
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon .name,
+#view-edit:checked ~ .page-species .species-list .taxon .name,
+#view-list:checked ~ .page-species .family .species-list .taxon .name,
+#view-list:checked ~ .page-species .species-list .taxon .name {
+  order: 2;
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon .chart-edit,
+#view-edit:checked ~ .page-species .species-list .taxon .chart-edit,
+#view-list:checked ~ .page-species .family .species-list .taxon .chart-edit,
+#view-list:checked ~ .page-species .species-list .taxon .chart-edit {
+  order: 3;
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon .btn-edit,
+#view-edit:checked ~ .page-species .species-list .taxon .btn-edit,
+#view-list:checked ~ .page-species .family .species-list .taxon .btn-edit,
+#view-list:checked ~ .page-species .species-list .taxon .btn-edit {
+  order: 4;
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon figure,
+#view-edit:checked ~ .page-species .species-list .taxon figure,
+#view-list:checked ~ .page-species .family .species-list .taxon figure,
+#view-list:checked ~ .page-species .species-list .taxon figure {
+  width: 60px;
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon .name,
+#view-edit:checked ~ .page-species .species-list .taxon .name,
+#view-list:checked ~ .page-species .family .species-list .taxon .name,
+#view-list:checked ~ .page-species .species-list .taxon .name {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon .name .vernacular, #view-edit:checked ~ .page-species .family .species-list .taxon .name .latin,
+#view-edit:checked ~ .page-species .species-list .taxon .name .vernacular,
+#view-edit:checked ~ .page-species .species-list .taxon .name .latin,
+#view-list:checked ~ .page-species .family .species-list .taxon .name .vernacular,
+#view-list:checked ~ .page-species .family .species-list .taxon .name .latin,
+#view-list:checked ~ .page-species .species-list .taxon .name .vernacular,
+#view-list:checked ~ .page-species .species-list .taxon .name .latin {
+  padding: 0;
+  margin: 0;
+  text-align: left;
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon .name .vernacular,
+#view-edit:checked ~ .page-species .species-list .taxon .name .vernacular,
+#view-list:checked ~ .page-species .family .species-list .taxon .name .vernacular,
+#view-list:checked ~ .page-species .species-list .taxon .name .vernacular {
+  background-color: transparent;
+  color: var(--color-green);
+  font-size: var(--fs-medium);
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon .name .vernacular a,
+#view-edit:checked ~ .page-species .species-list .taxon .name .vernacular a,
+#view-list:checked ~ .page-species .family .species-list .taxon .name .vernacular a,
+#view-list:checked ~ .page-species .species-list .taxon .name .vernacular a {
+  color: var(--color-green);
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon .name .latin,
+#view-edit:checked ~ .page-species .species-list .taxon .name .latin,
+#view-list:checked ~ .page-species .family .species-list .taxon .name .latin,
+#view-list:checked ~ .page-species .species-list .taxon .name .latin {
+  text-align: left;
+  padding-bottom: calc(var(--spacing) * 0.25);
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon:hover,
+#view-edit:checked ~ .page-species .species-list .taxon:hover,
+#view-list:checked ~ .page-species .family .species-list .taxon:hover,
+#view-list:checked ~ .page-species .species-list .taxon:hover {
+  outline: none;
+  background-color: var(--color-green-x-light);
+  border-color: var(--color-green);
+}
+#view-edit:checked ~ .page-species .family .species-list .taxon:hover::before,
+#view-edit:checked ~ .page-species .species-list .taxon:hover::before,
+#view-list:checked ~ .page-species .family .species-list .taxon:hover::before,
+#view-list:checked ~ .page-species .species-list .taxon:hover::before {
+  border-color: var(--color-green);
+}
+
+#view-edit:checked ~ .page-species .family .species-list .taxon .btn-edit,
+#view-edit:checked ~ .page-species .species-list .taxon .btn-edit {
+  display: block !important;
+  z-index: 30;
+}
+
 .item-nav {
   border: 1.5px solid var(--color-txt);
   border-radius: var(--radius-btn);
@@ -1082,252 +1326,50 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   border-left-color: transparent !important;
 }
 
-.species-list {
+[data-page=species-by-families] .group-sort-view,
+[data-page=species] .group-sort-view {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  grid-column: span 2;
+  width: 100%;
+  max-width: 100%;
+  border-bottom: 1px solid var(--color-x-light);
+  padding-top: calc(var(--spacing) * 1);
+  padding-bottom: calc(var(--spacing) * 0.5);
+  margin-bottom: calc(var(--spacing) * 1.5);
+  position: sticky;
+  top: 0;
+  background-color: var(--white);
+  z-index: 50;
+}
+[data-page=species-by-families] .page-species,
+[data-page=species] .page-species {
+  margin-bottom: 30vh;
+}
+
+[data-page=species-by-families] .species-list {
+  align-items: center;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: calc(var(--spacing) * 1);
   margin-bottom: calc(var(--spacing) * 3);
 }
-.species-list .taxon {
+[data-page=species-by-families] .species-list .taxon {
-  width: calc(33.3333333333% - var(--spacing) * 3 / 3);
+  width: calc(33.3333333333% - var(--spacing) * 2 / 3);
 }
 
-.family {
+[data-page=species] .page-species {
-  margin-bottom: calc(var(--spacing) * 4);
+  grid-column: span 2;
-}
-.family:target {
-  padding-top: var(--top-target);
-}
-.family .family__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 5px 2ch;
-  margin-bottom: calc(var(--spacing) * 1.5);
-  border-radius: var(--radius-small);
-  background-color: var(--color-violet-light);
-  color: var(--color-violet);
-  border: var(--w-border) solid var(--color-violet);
-}
-.family .family__header .title {
-  font-size: var(--fs-medium);
-}
-.family .family__header .nbr-species {
-  font-weight: 500;
-}
-
-.species-list .taxon .chart-edit {
-  width: 40px;
-  height: 40px;
-}
-.species-list .taxon .chart-edit svg {
   width: 100%;
-  height: 100%;
+  max-width: 100%;
 }
-.species-list .taxon .chart-edit svg circle {
+[data-page=species] .species-list {
-  fill: #efefef;
+  display: grid;
+  grid-gap: calc(var(--spacing) * 1);
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
 }
-.species-list .taxon .chart-edit svg .filled {
+[data-page=species] .species-list .taxon {
-  fill: var(--color-orange-medium);
+  align-self: start;
-}
-.species-list .taxon .chart-edit svg .verified {
-  fill: var(--color-green);
-}
-.species-list .taxon .chart-edit, .species-list .taxon .btn-edit {
-  display: none;
-}
-.species-list .taxon {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  background-color: var(--color-green-light);
-  padding: calc(var(--padding-inner) * 0.75);
-}
-.species-list .taxon .name {
-  order: 1;
-}
-.species-list .taxon figure {
-  order: 2;
-}
-.species-list .taxon figure {
-  width: 100%;
-  aspect-ratio: 1;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-.species-list .taxon figure img {
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-.species-list .taxon figure {
-  border-radius: var(--radius-img);
-  overflow: hidden;
-}
-.species-list .taxon .vernacular {
-  background-color: var(--color-green);
-  color: white;
-  border-radius: var(--radius-small);
-  padding: 4px 1ch;
-  margin-bottom: calc(var(--spacing) * 0.25);
-  font-size: var(--fs-normal);
-  line-height: 1.1;
-}
-.species-list .taxon .vernacular a {
-  color: white;
-  text-decoration: none;
-}
-.species-list .taxon .latin {
-  font-weight: normal;
-  font-weight: 500;
-  font-style: italic;
-  margin-bottom: calc(var(--spacing) * 0.75);
-  color: var(--color-txt);
-  font-size: var(--fs-small);
-}
-.species-list .taxon .vernacular, .species-list .taxon .latin {
-  text-align: center;
-}
-.species-list .taxon:hover {
-  outline: 2px solid var(--color-green);
-  background-color: var(--color-green-medium);
-}
-
-#view-edit:checked ~ .family .species-list,
-#view-edit:checked ~ .species-list,
-#view-list:checked ~ .family .species-list,
-#view-list:checked ~ .species-list {
-  display: block;
-}
-#view-edit:checked ~ .family .species-list .taxon,
-#view-edit:checked ~ .species-list .taxon,
-#view-list:checked ~ .family .species-list .taxon,
-#view-list:checked ~ .species-list .taxon {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  background-color: transparent;
-  padding-inline: 0;
-  gap: calc(var(--padding-inner) * 1);
-  outline: none;
-  border-bottom: 1px solid var(--color-green-light);
-  padding-top: calc(var(--padding-inner) * 0.5);
-  padding-bottom: calc(var(--padding-inner) * 0.5);
-}
-#view-edit:checked ~ .family .species-list .taxon::before,
-#view-edit:checked ~ .species-list .taxon::before,
-#view-list:checked ~ .family .species-list .taxon::before,
-#view-list:checked ~ .species-list .taxon::before {
-  content: "";
-  width: 100%;
-  border-top: 1px solid transparent;
-  position: absolute;
-  top: -1px;
-}
-#view-edit:checked ~ .family .species-list .taxon:first-of-type::before,
-#view-edit:checked ~ .species-list .taxon:first-of-type::before,
-#view-list:checked ~ .family .species-list .taxon:first-of-type::before,
-#view-list:checked ~ .species-list .taxon:first-of-type::before {
-  border-color: var(--color-green-light);
-}
-#view-edit:checked ~ .family .species-list .taxon .chart-edit,
-#view-edit:checked ~ .species-list .taxon .chart-edit,
-#view-list:checked ~ .family .species-list .taxon .chart-edit,
-#view-list:checked ~ .species-list .taxon .chart-edit {
-  display: block;
-  margin-right: var(--padding-inner);
-}
-#view-edit:checked ~ .family .species-list .taxon figure,
-#view-edit:checked ~ .species-list .taxon figure,
-#view-list:checked ~ .family .species-list .taxon figure,
-#view-list:checked ~ .species-list .taxon figure {
-  order: 1;
-}
-#view-edit:checked ~ .family .species-list .taxon .name,
-#view-edit:checked ~ .species-list .taxon .name,
-#view-list:checked ~ .family .species-list .taxon .name,
-#view-list:checked ~ .species-list .taxon .name {
-  order: 2;
-}
-#view-edit:checked ~ .family .species-list .taxon .chart-edit,
-#view-edit:checked ~ .species-list .taxon .chart-edit,
-#view-list:checked ~ .family .species-list .taxon .chart-edit,
-#view-list:checked ~ .species-list .taxon .chart-edit {
-  order: 3;
-}
-#view-edit:checked ~ .family .species-list .taxon .btn-edit,
-#view-edit:checked ~ .species-list .taxon .btn-edit,
-#view-list:checked ~ .family .species-list .taxon .btn-edit,
-#view-list:checked ~ .species-list .taxon .btn-edit {
-  order: 4;
-}
-#view-edit:checked ~ .family .species-list .taxon figure,
-#view-edit:checked ~ .species-list .taxon figure,
-#view-list:checked ~ .family .species-list .taxon figure,
-#view-list:checked ~ .species-list .taxon figure {
-  width: 60px;
-}
-#view-edit:checked ~ .family .species-list .taxon .name,
-#view-edit:checked ~ .species-list .taxon .name,
-#view-list:checked ~ .family .species-list .taxon .name,
-#view-list:checked ~ .species-list .taxon .name {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-#view-edit:checked ~ .family .species-list .taxon .name .vernacular, #view-edit:checked ~ .family .species-list .taxon .name .latin,
-#view-edit:checked ~ .species-list .taxon .name .vernacular,
-#view-edit:checked ~ .species-list .taxon .name .latin,
-#view-list:checked ~ .family .species-list .taxon .name .vernacular,
-#view-list:checked ~ .family .species-list .taxon .name .latin,
-#view-list:checked ~ .species-list .taxon .name .vernacular,
-#view-list:checked ~ .species-list .taxon .name .latin {
-  padding: 0;
-  margin: 0;
-  text-align: left;
-}
-#view-edit:checked ~ .family .species-list .taxon .name .vernacular,
-#view-edit:checked ~ .species-list .taxon .name .vernacular,
-#view-list:checked ~ .family .species-list .taxon .name .vernacular,
-#view-list:checked ~ .species-list .taxon .name .vernacular {
-  background-color: transparent;
-  color: var(--color-green);
-  font-size: var(--fs-medium);
-}
-#view-edit:checked ~ .family .species-list .taxon .name .vernacular a,
-#view-edit:checked ~ .species-list .taxon .name .vernacular a,
-#view-list:checked ~ .family .species-list .taxon .name .vernacular a,
-#view-list:checked ~ .species-list .taxon .name .vernacular a {
-  color: var(--color-green);
-}
-#view-edit:checked ~ .family .species-list .taxon .name .latin,
-#view-edit:checked ~ .species-list .taxon .name .latin,
-#view-list:checked ~ .family .species-list .taxon .name .latin,
-#view-list:checked ~ .species-list .taxon .name .latin {
-  text-align: left;
-  padding-bottom: calc(var(--spacing) * 0.25);
-}
-#view-edit:checked ~ .family .species-list .taxon:hover,
-#view-edit:checked ~ .species-list .taxon:hover,
-#view-list:checked ~ .family .species-list .taxon:hover,
-#view-list:checked ~ .species-list .taxon:hover {
-  outline: none;
-  background-color: var(--color-green-x-light);
-  border-color: var(--color-green);
-}
-#view-edit:checked ~ .family .species-list .taxon:hover::before,
-#view-edit:checked ~ .species-list .taxon:hover::before,
-#view-list:checked ~ .family .species-list .taxon:hover::before,
-#view-list:checked ~ .species-list .taxon:hover::before {
-  border-color: var(--color-green);
-}
-
-#view-edit:checked ~ .family .species-list .taxon .btn-edit,
-#view-edit:checked ~ .species-list .taxon .btn-edit {
-  display: block !important;
-  z-index: 100;
 }/*# sourceMappingURL=style.css.map */

assets/style.scss

@@ -20,10 +20,12 @@
 @use "css/page-content";
 
 
-@use "css/home-item-nav";
-@use "css/home";
-
 @use "css/components/species-list";
 @use "css/components/taxon-card";
 @use "css/components/taxon-card-inline";
 
+
+@use "css/pages/home-item-nav";
+@use "css/pages/home";
+@use "css/pages/species";
+

species-list-by-families.html

@@ -0,0 +1,561 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Botascopia</title>
+
+    <link rel="stylesheet" type="text/css" href="/assets/style.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/borna/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/nunita/stylesheet.css">
+
+</head>
+
+<body>
+
+    <include src="/components/site-header.html"></include>
+
+    <main data-page="species-by-families">
+
+        <header class="page-header">
+            <div class="page-header__inner">
+
+            <h2 class="page-title">Liste des espèces</h2>
+
+            <p class="description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quasi facilis, explicabo similique molestiae dolorem consequuntur fugiat itaque iure fuga.
+            </p>
+
+            <div class="details">
+         
+                <div class="details__item">
+                    <p class="nbr">876</p>
+                    <p class="text">espèces répertoriées</p>
+                </div>
+                    <div class="details__item">
+                    <p class="nbr">53</p>
+                    <p class="text">contributeur·ices</p>
+                    <button class="link-with-arrow"><a href="#">Voir la communuauté</a></button>
+                </div>
+            </div>
+
+        </div>
+
+        </header>
+
+
+
+        <div class="page-grid">
+
+        <input type="radio" id="view-grid" name="view" value="grid"  checked />
+        <input type="radio" id="view-list" name="view" value="list"/>
+        <input type="radio" id="view-edit" name="view" value="edit"  />
+
+        <div class="group-sort-view">
+
+            <div class="sort">
+                <p>Trier par</p>
+                <button class="btn-action">
+                    <a class="text" href="/species-list.html">Nom</a>
+                </button>
+                <button class="btn-action is-selected">
+                    <a class="text" href="#">Familles d’espèces</a>
+                </button>
+        
+            </div>
+        
+              <div class="view-toggle">
+                <p>Vue</p>
+                <label for="view-grid" class="btn-action"><span class="icon"><include src="/components/icons/view-grid.svg"></include></span> <span class="text">Galerie</span></label>
+                <label for="view-list" class="btn-action"><span class="icon"><include src="/components/icons/view-list.svg"></include></span> <span class="text">Liste</span></label>
+                <label for="view-edit" class="btn-action"><span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Édition</span></label>
+
+            </div>
+
+        </div>
+
+
+      
+         <nav class="page-nav">
+            <ul class="toc">
+                <li><a href="#acanthaceae">Acanthaceae (1)</a></li>
+                <li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
+                <li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
+               <li><a href="#acanthaceae">Acanthaceae (1)</a></li>
+                <li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
+                <li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
+                <li><a href="#acanthaceae">Acanthaceae (1)</a></li>
+                <li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
+                <li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
+                <li><a href="#acanthaceae">Acanthaceae (1)</a></li>
+                <li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
+                <li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
+       <li><a href="#acanthaceae">Acanthaceae (1)</a></li>
+                <li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
+                <li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
+                <li><a href="#acanthaceae">Acanthaceae (1)</a></li>
+                <li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
+                <li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
+                <li><a href="#acanthaceae">Acanthaceae (1)</a></li>
+                <li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
+                <li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
+
+
+               
+
+               
+            </ul>
+            </nav>
+
+          
+          
+
+        <section class="page-species">
+
+   
+
+        <section class="family"  id="acanthaceae">
+
+            <div class="family__header">
+                <h2 class="title">Acanthaceae</h2>
+                <p class="nbr-species">1 espèce</p>
+            </div>
+            
+
+             <div class="species-list">
+
+            <article class="taxon">
+                <figure>
+                    <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
+                </figure>
+                <div class="name">
+                    <div class="name">
+                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <p class="latin">Acorus calamus L.</p>
+                    </div>
+                </div>
+
+                <div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
+
+                <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+            </article>
+
+        </div>
+
+        </section>
+
+       
+
+
+        <section class="family" id="amaranthaceae">
+
+            <div class="family__header" >
+                <h2 class="title">Amaranthaceae</h2>
+                <p class="nbr-species">7 espèces</p>
+            </div>
+
+
+            <div class="species-list">
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Acorus calamus L.</p>
+                    </div>
+
+                    <div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Alnus glutinosa</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Arum Italicum Mill.</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Carpinus betulus L.</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Acorus calamus L.</p>
+                    </div>
+
+                    <div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Alnus glutinosa</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Arum Italicum Mill.</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Carpinus betulus L.</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+
+            </div>
+
+        </section>
+
+
+        <section class="family" id="amaryllidaceae">
+
+            <div class="family__header">
+                <h2 class="title">Amaryllidaceae</h2>
+                <p class="nbr-species">14 espèces</p>
+            </div>
+
+
+            <div class="species-list">
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Acorus calamus L.</p>
+                    </div>
+
+                    <div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Alnus glutinosa</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Arum Italicum Mill.</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Carpinus betulus L.</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Acorus calamus L.</p>
+                    </div>
+
+                    <div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Alnus glutinosa</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Glechoma hederacea</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Carpinus betulus L.</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+
+            </div>
+
+        </section>
+
+
+         </section>
+
+        </div>
+
+    </main>
+
+
+
+<include src="/components/site-footer.html"></include>
+
+
+
+<!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
+<script>
+  function processIncludes() {
+      const includes = document.querySelectorAll('include[src]');
+
+      if (includes.length === 0) {
+          return; 
+      }
+
+      const promises = Array.from(includes).map(el => {
+          const src = el.getAttribute('src');
+          return fetch(src)
+              .then(r => {
+                  if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
+                  return r.text();
+              })
+              .then(html => {
+                  el.outerHTML = html;
+              })
+              .catch(err => {
+                  console.error('Erreur de chargement:', err);
+              });
+      });
+
+      Promise.all(promises).then(() => {
+          processIncludes(); 
+      });
+  }
+
+  document.addEventListener('DOMContentLoaded', processIncludes);
+</script>
+</body>
+
+</html>

species-list.html

@@ -16,7 +16,7 @@
 
     <include src="/components/site-header.html"></include>
 
-    <main id="main_species-list">
+    <main data-page="species">
 
         <header class="page-header">
             <div class="page-header__inner">
@@ -47,51 +47,26 @@
 
 
         <div class="page-grid">
-      
-         <nav class="page-nav">
-            <ul class="toc">
-                <li><a href="#acanthaceae">Acanthaceae (1)</a></li>
-                <li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
-                <li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
-               <li><a href="#acanthaceae">Acanthaceae (1)</a></li>
-                <li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
-                <li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
-                <li><a href="#acanthaceae">Acanthaceae (1)</a></li>
-                <li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
-                <li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
-                <li><a href="#acanthaceae">Acanthaceae (1)</a></li>
-                <li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
-                <li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
 
 
-               
-            </ul>
-            </nav>
-
-        <section class="page-species">
-
         <input type="radio" id="view-grid" name="view" value="grid"  checked />
         <input type="radio" id="view-list" name="view" value="list"/>
         <input type="radio" id="view-edit" name="view" value="edit"  />
 
-
-
         <div class="group-sort-view">
 
             <div class="sort">
                 <p>Trier par</p>
-                <button class="btn-action">
+                <button class="btn-action is-selected">
                     <a class="text" href="#">Nom</a>
                 </button>
-                <button class="btn-action is-selected">
+                <button class="btn-action">
-                    <a class="text" href="#">Familles d’espèces</a>
+                    <a class="text" href="/species-list-by-families.html">Familles d’espèces</a>
                 </button>
         
             </div>
         
-
+              <div class="view-toggle">
-
-            <div class="view-toggle">
                 <p>Vue</p>
                 <label for="view-grid" class="btn-action"><span class="icon"><include src="/components/icons/view-grid.svg"></include></span> <span class="text">Galerie</span></label>
                 <label for="view-list" class="btn-action"><span class="icon"><include src="/components/icons/view-list.svg"></include></span> <span class="text">Liste</span></label>
@@ -99,17 +74,14 @@
 
             </div>
 
-          </div>
+        </div>
 
-        <section class="family"  id="acanthaceae">
+      
+       
 
-            <div class="family__header">
+        <section class="page-species">
-                <h2 class="title">Acanthaceae</h2>
-                <p class="nbr-species">1 espèce</p>
-            </div>
-            
 
-             <div class="species-list">
+        <div class="species-list">
 
             <article class="taxon">
                 <figure>
@@ -132,203 +104,179 @@
                 <a class="link-block" href="#" target="_blank"></a>
             </article>
 
-        </div>
 
-        </section>
+
+       
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Acorus calamus L.</p>
+                    </div>
+
+                    <div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Alnus glutinosa</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Arum Italicum Mill.</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Carpinus betulus L.</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Acorus calamus L.</p>
+                    </div>
+
+                    <div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Alnus glutinosa</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Arum Italicum Mill.</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
+                <article class="taxon">
+                    <figure>
+                        <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>
+                        <p class="latin">Carpinus betulus L.</p>
+                    </div>
+
+                    <div class="chart-edit">
+                        <abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
+                    </div>
+
+                    <button class="btn-action btn-edit">
+                    <a href="#" target="_blank">
+                    <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>
+                </article>
+
 
        
 
 
-        <section class="family" id="amaranthaceae">
+    
-
-            <div class="family__header" >
-                <h2 class="title">Amaranthaceae</h2>
-                <p class="nbr-species">7 espèces</p>
-            </div>
-
-
-            <div class="species-list">
-
-                <article class="taxon">
-                    <figure>
-                        <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>
-                        <p class="latin">Acorus calamus L.</p>
-                    </div>
-
-                    <div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
-
-                    <button class="btn-action btn-edit">
-                    <a href="#" target="_blank">
-                    <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>
-                </article>
-
-                <article class="taxon">
-                    <figure>
-                        <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>
-                        <p class="latin">Alnus glutinosa</p>
-                    </div>
-
-                    <div class="chart-edit">
-                        <abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
-                    </div>
-
-                    <button class="btn-action btn-edit">
-                    <a href="#" target="_blank">
-                    <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>
-                </article>
-
-                <article class="taxon">
-                    <figure>
-                        <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>
-                        <p class="latin">Arum Italicum Mill.</p>
-                    </div>
-
-                    <div class="chart-edit">
-                        <abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
-                    </div>
-
-                    <button class="btn-action btn-edit">
-                    <a href="#" target="_blank">
-                    <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>
-                </article>
-
-                <article class="taxon">
-                    <figure>
-                        <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>
-                        <p class="latin">Carpinus betulus L.</p>
-                    </div>
-
-                    <div class="chart-edit">
-                        <abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
-                    </div>
-
-                    <button class="btn-action btn-edit">
-                    <a href="#" target="_blank">
-                    <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>
-                </article>
-
-                <article class="taxon">
-                    <figure>
-                        <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>
-                        <p class="latin">Acorus calamus L.</p>
-                    </div>
-
-                    <div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
-
-                    <button class="btn-action btn-edit">
-                    <a href="#" target="_blank">
-                    <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>
-                </article>
-
-                <article class="taxon">
-                    <figure>
-                        <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>
-                        <p class="latin">Alnus glutinosa</p>
-                    </div>
-
-                    <div class="chart-edit">
-                        <abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
-                    </div>
-
-                    <button class="btn-action btn-edit">
-                    <a href="#" target="_blank">
-                    <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>
-                </article>
-
-                <article class="taxon">
-                    <figure>
-                        <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>
-                        <p class="latin">Arum Italicum Mill.</p>
-                    </div>
-
-                    <div class="chart-edit">
-                        <abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
-                    </div>
-
-                    <button class="btn-action btn-edit">
-                    <a href="#" target="_blank">
-                    <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>
-                </article>
-
-                <article class="taxon">
-                    <figure>
-                        <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>
-                        <p class="latin">Carpinus betulus L.</p>
-                    </div>
-
-                    <div class="chart-edit">
-                        <abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
-                    </div>
-
-                    <button class="btn-action btn-edit">
-                    <a href="#" target="_blank">
-                    <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>
-                </article>
-
-
-            </div>
-
-        </section>
-
-
-        <section class="family" id="amaryllidaceae">
-
-            <div class="family__header">
-                <h2 class="title">Amaryllidaceae</h2>
-                <p class="nbr-species">14 espèces</p>
-            </div>
-
-
-            <div class="species-list">
-
                 <article class="taxon">
                     <figure>
                         <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
@@ -494,9 +442,6 @@
                 </article>
 
 
-            </div>
-
-        </section>
 
 
          </section>