reorganisation style

assets/css/_base.scss

@@ -32,3 +32,16 @@ button{
     background: none;
     border: none;
 }
+figure, picture, img{
+    width: 100%;
+}
+
+.link-block{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    cursor: pointer;
+}

assets/css/_home-highlight.scss

@@ -1,74 +0,0 @@
-
-.highlight-block{
-
- 
-        background-color: var(--color);
-        border: 1px solid var(--color-txt-light);
-        border-radius: var(--radius-small);
-        padding: calc(var(--padding-inner)*1.5) var(--padding-inner); 
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: space-between;
-        gap: var(--unit);
-
-        figure{
-            width: 100%;
-            max-width: 160px;
-            aspect-ratio: 4/5;
-            border: 1px solid var(--color-medium);
-            border-radius: var(--radius-small);
-            overflow: hidden;
-
-            img{
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-            }
-        }
-
-        .label{
-            font-weight: 600;
-            margin-bottom: calc(var(--unit)*0.5);
-            /* text-decoration: 1px underline;
-            text-underline-offset: 3px; */
-            color: var(--color);
-
-            display: inline-flex;
-            align-items: center;
-            background-color: var(--color-light);
-            height: var(--unit);
-            padding: 0px 1ch;
-            border-radius: var(--radius-btn);
-        }
-
-        .title{
-            font-family: var(--font-title);
-            font-size: 1.4rem;
-            font-weight: normal;
-            margin-top: 0.5em;
-             margin-bottom: 0.25em;
-             color: var(--color-light);
-
-        }
-        .details{
-              margin-bottom: calc(var(--unit)*0.75);
-            //   font-size: 0.8rem;
-              color: var(--color-light);
-              font-weight: 500;
-
-        }
-
-        .content{
-            position: relative;
-        }
-
-        .see-more{
-            position: absolute;
-            bottom: 0;
-            font-size: var(--fs-small);
-            --hover-bg: var(--color);
-        }
-        
-
-}

assets/css/_home.scss

@@ -1,30 +1,17 @@
 @use "abstracts/mixins.scss" as *;
 
-#home__livrets {
-    --color: var(--color-violet);
-    --color-medium: var(--color-violet-medium);
-    --color-light: var(--color-violet-light);
+
+.home--section-tool{
     background-color: var(--color);
-    color: var(--white);
+    &[data-type="base-connaissance"],
+    &[data-type="livrets"]{
+        color: var(--white);
+    }
 }
 
 
-#home__animations {
-    --color: var(--color-yellow);
-    --color-medium: var(--color-yellow-medium);
-    --color-light: var(--color-yellow-light);
-    background-color: var(--color);
 
 
-      color: var(--color-txt);
-}
-#home__base-connaissance {
-    --color: var(--color-orange);
-    --color-medium: var(--color-orange-medium);
-    --color-light: var(--color-orange-light);
-    background-color: var(--color);
-}
-
 
 
 

assets/css/_page-content.scss

@@ -0,0 +1,3 @@
+.page-content{
+    font-size: var(--fs-medium);
+}

assets/css/abstracts/_var.scss

@@ -62,14 +62,14 @@
     --color: var(--color-green);
     --color-medium: var(--color-green-medium);
     --color-light: var(--color-green-light);
-
- 
-
-    
 }
 
 
-[data-type="livret"]{
+
+
+
+
+[data-type="livrets"]{
     --color: var(--color-violet);
     --color-medium: var(--color-violet-medium);
     --color-light: var(--color-violet-light);
@@ -77,13 +77,21 @@
 
 
 [data-type="base-connaissance"]{
+    --color: var(--color-green);
+    --color-medium: var(--color-green-medium);
+    --color-light: var(--color-green-light);
+
+}
+
+[data-type="animations"]{
+    --color: var(--color-orange);
+    --color-medium: var(--color-orange-medium);
+    --color-light: var(--color-orange-light);
+}
+
+[data-type="methodologie"]{
+ 
     --color: var(--color-yellow);
     --color-medium: var(--color-yellow-medium);
     --color-light: var(--color-yellow-light);
 }
-
-[data-type="atelier"]{
-    --color: var(--color-orange);
-    --color-medium: var(--color-orange-medium);
-    --color-light: var(--color-orange-light);
-}

assets/css/components/_species-list.scss

@@ -14,7 +14,6 @@
 
 
     .taxon{
-        // width: calc(100%/3 - var(--spacing)*4/3);
           width: calc(100%/3 - var(--spacing)*3/3);
     }
 

assets/css/components/_taxon-card.scss

@@ -1,4 +1,4 @@
-@use "abstracts/mixins.scss" as *;
+@use "../abstracts/mixins.scss" as *;
 
 .species-list .taxon{
 
@@ -18,7 +18,7 @@
 
     display: flex;
     flex-direction: column;
-    // margin-bottom: calc(var(--spacing)*2);
+    position: relative;
 
     background-color: var(--color-green-light);
     padding: 20px;
@@ -36,26 +36,35 @@
     }
 
     .vernacular{
-        // font-size: var(--fs-medium);
-        // color: var(--color-green);
         background-color: var(--color-green);
         color: white;
         border-radius: var(--radius-small);
         padding: 4px 1ch;
         margin-bottom: calc(var(--spacing)*0.25);
+        a{
+            color: white;
+            text-decoration: none;
+        }
     }
 
     .latin{
         font-weight: normal;
         font-weight: 500;
         font-style: italic;
-                margin-bottom: calc(var(--spacing)*0.75);
+        margin-bottom: calc(var(--spacing)*0.75);
+        color: var(--color-txt);
     }
 
     .vernacular, .latin{
         text-align: center;
     }
 
+    &:hover{
+        outline: 2px solid var(--color-green);
+        background-color: var(--color-green-medium);
+
+    }
+
   
 
 }

assets/css/components/_team.scss

@@ -0,0 +1,10 @@
+.team{
+    .member{
+        img{
+            width: 60px;
+            aspect-ratio: 1/1;
+            background-color: #cfcfcf;
+            border-radius: var(--radius-img);
+        }
+    }
+}