back species

assets/css/components/_buttons.scss

@@ -104,3 +104,27 @@ label.btn-action{
 
     }
 }
+
+.link-back{
+     a{
+        text-decoration: none;
+        color: var(--color-txt);
+        font-size: var(--fs-small);
+        &::before{
+            content: "←";
+            font-family: var(--font-title);
+            font-size: 0.9em;
+            position: relative;
+            left: -1.5ch;
+            transition: left .4s ease-in-out;
+            text-decoration: 1px underline transparent;
+        }
+    }
+    &:hover{
+        opacity: 0.8;
+        a::before{
+            left: -2.5ch;
+        }
+
+    }
+}

assets/css/components/_slideshow.scss

@@ -42,11 +42,26 @@ $slideshow-items: 3;
         }
     }
 
+    .schema-collectifs{
+        background-color: white;
+        img{
+        object-fit: contain; 
+        }
+    }
+
     figcaption{
         width: calc(100% - var(--arrow-space)*2);
-        font-size: var(--fs-small);
+        font-size: var(--fs-normal);
-        height: calc(var(--unit)*2);
+        font-weight: 500;
         padding-top: calc(var(--padding-inner)*0.5);
+        text-align: left;
+        width: 100%;
+        margin-top: calc(var(--spacing)*0.5);
+        &::before{
+            content: '→';
+            font-family: var(--font-title);
+            padding-right: 2ch;
+        }
     }
 }
 

assets/css/pages/_home.scss

@@ -55,11 +55,14 @@
 
     .species-list{
         margin-bottom: calc(var(--spacing)*3);
-
         .taxon:hover{
-            border-color: red!important;
+            outline: 3px solid var(--color-txt);
-            
         }
+
+        // .taxon:hover{
+        //     border-color: red!important;
+            
+        // }
     }
 
     .species-list .title{

assets/css/pages/_species-single.scss

@@ -8,30 +8,45 @@
         .page-header__inner{
             display: grid;
             grid-template-columns: var(--w-fig) 1fr;
-            grid-gap: var(--padding-body);
+            grid-column-gap: var(--padding-body);
            
         
         }
 
+         .link-back{
+               grid-column: 1;
+                  grid-row: 1;
+                text-align: left;
+                position: relative;
+                top: calc(var(--spacing)*-1);
+                a{  
+                    color: var(--color-green)!important;
+
+                }
+              
+                padding-left: 1.5ch;
+
+            }
+
       
         figure, picture{
             border-radius: var(--radius-img);
             grid-column: 1;
-            grid-row: 1/3;
+            grid-row: 2/4;
             @include fig-ratio(1/1);
         }
 
         .group-title{
             grid-column: 2;
-            grid-row: 1;
+            grid-row: 2;
             align-self: start;
             padding-top: calc(var(--spacing)*0.5);
-        
+            padding-bottom: calc(var(--spacing)*1);
         }
 
          .saviez-vous{
             grid-column: 2;
-            grid-row: 2;
+            grid-row: 3;
              align-self: start;
         }
 
@@ -56,12 +71,14 @@
         }
 
         .btn--group{
+       
             grid-column: span 2;
             display: flex;
             justify-content: right;
             gap: var(--padding-inner);
             position: relative;
             top: calc(var(--spacing)*-1);
+           
         }
 
 

assets/style.css

@@ -499,6 +499,28 @@ label.btn-action .text {
   left: 2.5ch;
 }
 
+.link-back a {
+  text-decoration: none;
+  color: var(--color-txt);
+  font-size: var(--fs-small);
+}
+.link-back a::before {
+  content: "←";
+  font-family: var(--font-title);
+  font-size: 0.9em;
+  position: relative;
+  left: -1.5ch;
+  transition: left 0.4s ease-in-out;
+  -webkit-text-decoration: 1px underline transparent;
+          text-decoration: 1px underline transparent;
+}
+.link-back:hover {
+  opacity: 0.8;
+}
+.link-back:hover a::before {
+  left: -2.5ch;
+}
+
 .slideshow {
   height: 100%;
   width: 100%;
@@ -539,11 +561,26 @@ label.btn-action .text {
   -o-object-fit: cover;
      object-fit: cover;
 }
+.slideshow-item .schema-collectifs {
+  background-color: white;
+}
+.slideshow-item .schema-collectifs img {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
 .slideshow-item figcaption {
   width: calc(100% - var(--arrow-space) * 2);
-  font-size: var(--fs-small);
+  font-size: var(--fs-normal);
-  height: calc(var(--unit) * 2);
+  font-weight: 500;
   padding-top: calc(var(--padding-inner) * 0.5);
+  text-align: left;
+  width: 100%;
+  margin-top: calc(var(--spacing) * 0.5);
+}
+.slideshow-item figcaption::before {
+  content: "→";
+  font-family: var(--font-title);
+  padding-right: 2ch;
 }
 
 /* Display slides (input checked) 
@@ -1848,7 +1885,7 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   margin-bottom: calc(var(--spacing) * 3);
 }
 #main_home .species-list .taxon:hover {
-  border-color: red !important;
+  outline: 3px solid var(--color-txt);
 }
 #main_home .species-list .title {
   grid-column: 1/end;
@@ -2099,12 +2136,25 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
 [data-page=species-single] .page-header .page-header__inner {
   display: grid;
   grid-template-columns: var(--w-fig) 1fr;
-  grid-gap: var(--padding-body);
+  grid-column-gap: var(--padding-body);
+}
+[data-page=species-single] .page-header .link-back {
+  grid-column: 1;
+  grid-row: 1;
+  text-align: left;
+  position: relative;
+  top: calc(var(--spacing) * -1);
+}
+[data-page=species-single] .page-header .link-back a {
+  color: var(--color-green) !important;
+}
+[data-page=species-single] .page-header .link-back {
+  padding-left: 1.5ch;
 }
 [data-page=species-single] .page-header figure, [data-page=species-single] .page-header picture {
   border-radius: var(--radius-img);
   grid-column: 1;
-  grid-row: 1/3;
+  grid-row: 2/4;
   width: 100%;
   overflow: hidden;
 }
@@ -2117,13 +2167,14 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
 }
 [data-page=species-single] .page-header .group-title {
   grid-column: 2;
-  grid-row: 1;
+  grid-row: 2;
   align-self: start;
   padding-top: calc(var(--spacing) * 0.5);
+  padding-bottom: calc(var(--spacing) * 1);
 }
 [data-page=species-single] .page-header .saviez-vous {
   grid-column: 2;
-  grid-row: 2;
+  grid-row: 3;
   align-self: start;
 }
 [data-page=species-single] .page-header .page-title {

index.html

@@ -159,7 +159,7 @@
 
                         <div class="slideshow-item" data-item="1">
                             <figure>
-                                <img src="/content/images/atelier-2.png">
+                                <img src="/images/atelier-2.png">
                             </figure>
                             <figcaption>
                                 Atelier Lorem Ispsum, Rennes, 23 septembre 2025
@@ -167,15 +167,23 @@
                         </div>
                         <div class="slideshow-item" data-item="2">
                             <figure>
-                                <img src="/content/images/atelier-1.png">
+                                <img src="/images/atelier-1.png">
                             </figure>
                             <figcaption>
                                 Atelier 2 Lorem Ispsum, Rennes, 23 septembre 2025
                             </figcaption>
+                        </div>
+                        <div class="slideshow-item" data-item="3">
+                            <figure class="schema-collectifs">
+                                <img src="/images/shema-collectifs.png">
+                            </figure>
+                             <figcaption>
+                                Accompagnement des collectifs
+                            </figcaption>
                         </div>
                             <div class="slideshow-item" data-item="3">
                             <figure>
-                                <img src="/content/images/Epinay3.jpeg">
+                                <img src="/images/Epinay3.jpeg">
                             </figure>
                             <figcaption>
                                 Atelier 3 Lorem Ispsum, Epinay, 23 septembre 2025

species-single.html

@@ -19,10 +19,9 @@
     <main data-page="species-single">
 
             <header class="page-header">
+           
             <div class="page-header__inner">
-
+                 <button class="link-back"><a href="species-list.html">Liste des espèces</a></button>
-               
-
                 <div class="group-title">
                     <h2 class="page-title">Ailante glanduleux</h2>
                     <p class="latin"><i>Ailanthus altissima</i> <span>Swingle</span> — Simaroubaceae</p>
@@ -38,6 +37,7 @@
                     </div>
 
                     <div class="btn--group">
+                   
                         <button class="btn-action btn-download">
                             <a href="#" download>
                             <span class="icon"><include src="/components/icons/download.svg"></include></span> <span class="text">Télécharger la fiche</span>
@@ -864,11 +864,16 @@
 
                         </section>
 
-
-                
-
                     </div>
 
+
+                    
+                    <!-- For mobile -->
+                    <section id="saviez-vous">
+                    <h3 class="section-title">Le saviez-vous ? </h3>
+                    <p>Originaire de Chine, et introduite en 1751 en Europe, elle est aujourd'hui très envahissante par ses drageons.</p>
+                    </section>
+
                     <section id="credits">
                         <p class="title">Crédits</p>
                         <ul>