menu

a-propos.html

@@ -236,36 +236,45 @@
 
 
     <!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
-    <script>
+<script>
-        function processIncludes() {
+async function processIncludes(maxDepth = 5) {
+    let depth = 0;
+
+    while (depth < maxDepth) {
         const includes = document.querySelectorAll('include[src]');
+        if (includes.length === 0) break;
 
-            if (includes.length === 0) {
+        const promises = Array.from(includes).map(async el => {
-                return;
-            }
-
-            const promises = Array.from(includes).map(el => {
             const src = el.getAttribute('src');
-                return fetch(src)
+
-                    .then(r => {
+            try {
-                        if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
+                const response = await fetch(src, { cache: "no-store" });
-                        return r.text();
+                if (!response.ok) throw new Error(response.status);
-                    })
+                const html = await response.text();
-                    .then(html => {
                 el.outerHTML = html;
-                    })
+            } catch (err) {
-                    .catch(err => {
+                console.error("Erreur include:", src, err);
-                        console.error('Erreur de chargement:', err);
+            }
-                    });
         });
 
-            Promise.all(promises).then(() => {
+        await Promise.all(promises);
-                processIncludes();
+
-            });
+        // Petite pause pour éviter rafale ultra rapide
+        await new Promise(r => setTimeout(r, 50));
+
+        depth++;
     }
 
-        document.addEventListener('DOMContentLoaded', processIncludes);
+    if (depth === maxDepth) {
-    </script>
+        console.warn("Max include depth reached (possible boucle).");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    processIncludes();
+});
+</script>
+
 </body>
 
 </html>

assets/css/_page-content.scss

@@ -1,4 +1,5 @@
 @use "abstracts/mixins.scss" as *;
+@use "abstracts/responsive.scss" as *;
 
 
 .page-content{

assets/css/_page-grid.scss

@@ -1,3 +1,6 @@
+@use "abstracts/mixins.scss" as *;
+@use "abstracts/responsive.scss" as *;
+
 .page-grid{
 
    

assets/css/_page-header.scss

@@ -1,8 +1,8 @@
 @use "abstracts/mixins.scss" as *;
+@use "abstracts/responsive.scss" as *;
 
 .page-header{
-    // margin-top: calc(var(--spacing)*1);
+
-    // margin-bottom: calc(var(--spacing)*2);
 
     color: var(--data-color);
     background-color: var(--data-color-light);

assets/css/_page-nav.scss

@@ -1,4 +1,5 @@
 @use "abstracts/mixins.scss" as *;
+@use "abstracts/responsive.scss" as *;
 
 .page-nav{
 

assets/css/_site-footer.scss

@@ -1,4 +1,5 @@
 @use "abstracts/mixins.scss" as *;
+@use "abstracts/responsive.scss" as *;
 
 #site-footer{
     background-color: var(--color-x-light);

assets/css/_site-header.scss

@@ -1,4 +1,5 @@
 @use "abstracts/mixins.scss" as *;
+@use "abstracts/responsive.scss" as *;
 
 #site-header{
     height: var(--header-h);
@@ -15,39 +16,20 @@
 
     a{ text-decoration: none; }
 
-
-    // #logo-botascopia{
-    //     display: flex;
-    //     align-items: center;
-    //     gap: 10px;
-    //     svg{
-    //         width: 35px;
-    //         fill: var(--color-green);
-    //     }
-    // }
-
-    // h1{
-    //     font-family: var(--font-title);
-    //     color: var(--color-txt);
-    //     text-decoration: none;
-    //     font-size: 25px;
-    //     position: relative;
-    //     top: -2px;
-    //     color: var(--color-green);
-    //     position: absolute;
-    //     opacity: 0;
-    // }
-
     #logo-botascopia{
         svg{ 
+            display: none;
             width: 180px; 
             fill: var(--color-green);
         }
     }
 
     h1{
-         position: absolute;
+        //  position: absolute;
-        opacity: 0;
+        opacity: 1;
+        font-size: var(--fs-normal);
+        font-family: var(--font-title);
+        color: var(--color-green);
     }
 }
 #site-header ul{

assets/css/_site-nav.scss

@@ -1,6 +1,9 @@
+@use "abstracts/mixins.scss" as *;
+@use "abstracts/responsive.scss" as *;
 
 #site-nav{
-    z-index: var(--header-z);
+    position: relative;
+    z-index: calc(var(--header-z) - 10);
 }
 
 
@@ -12,6 +15,9 @@
 #site-nav li{
     font-weight: 500;
     color: var(--color-txt);
+    input[type="radio"]{
+        display: none;
+    }
 }
 
 .arrow{
@@ -35,17 +41,281 @@
     
 }
 
-#site-nav .nav-level-1_ul{
+
+
+
+
+label[for="menu-toggle"]{
+    cursor: pointer;
+    .menu__icon{
+        @include icon(26px);
+    }
+}
+
+#menu-toggle{ display: none; }
+#menu-toggle ~ label[for="menu-toggle"] {
+    .menu__icon--open{ display: flex; }
+    .menu__icon--close{ display: none; }
+}
+
+#menu-toggle:checked ~ label[for="menu-toggle"] {
+    .menu__icon--open{ display: none; }
+    .menu__icon--close{ display: flex; }
+}
+
+
+
+
+
+@media #{$medium}{
+
+
+#menu-toggle ~ #site-nav{
+    top: -100vh;
+}
+
+
+#menu-toggle:checked ~ #site-nav{
+    top: var(--header-h);
+}
+
+
+
+     #site-nav{
+        position: fixed;
+        background-color: white;
+        transition: top .5s ease-in-out;
+        // top: var(--header-h);
+        left: 0px;
+        max-height: calc(100vh - var(--header-h) + 2px);
+        width: 100vw;
+        padding: calc(var(--padding-body)*1);
+        border-bottom: 2px solid var(--color-txt);
+        
+        
+
+        // overflow-y: scroll;
+        overflow: hidden;
+
+
+        .img-menu{
+            position: absolute;
+            top: 25vw;
+            margin-top: -20vw;
+            right: -20vh;
+            width: auto;
+            height: calc(400px + 25vw);
+            z-index: 10;
+            float: right;
+            background-color: var(--color-txt);
             display: flex;
-    gap: calc(var(--padding-inner)*2);
+            img{
+                mix-blend-mode: screen;
+               
+            }
+           
+        }
+
+        #btn__connexion,
+        .nav-level-1_ul{
+            position: relative;
+            z-index: 20;
+        }
+
+        #btn__connexion{
+            display: block;
+            // margin-inline: auto;
+            margin-top: calc(var(--spacing)*2);
+            //   margin-bottom: calc(var(--spacing)*1);
+        
+        }
+
+
+        .nav-level-1_ul{
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+            grid-gap: var(--padding-inner);
+            max-width: 580px;
+            margin-right: 35vw;
+
+           
+            max-height: calc(100% - var(--spacing)*4);
+            overflow-y: scroll;
+        }
+  
+
+        .nav-level-1_li:first-of-type{
+            grid-row: 1/3;
+
+        }
+
+      
+        .nav-level-1_link{
+            display: block;
+            font-size: var(--fs-small);
+            font-family: var(--font-title);
+            padding-top: calc(var(--spacing)*1.5);
+            padding-bottom: calc(var(--spacing)*1);
+            text-decoration: underline 2px;
+            text-underline-offset: 3px;
+            text-transform: uppercase;
+            padding-left: 1.4ch;
+            cursor: auto;
+            .arrow{
+                display: none;
+            }
+            // a{
+            //     pointer-events: none;
+            //     cursor: auto;
+            // }
+        }
+
+       
+
+        .nav-level-2_li{
+            font-size: var(--fs-normal);
+       
+            max-width: 20ch;
+            a{
+                width: 100%;
+                height: 100%;
+                 display: flex;
+                align-items: center;
+                     padding: calc(var(--spacing)*0.35) 1ch;
+            }
+           
+            &:hover{
+                background-color: var(--color-x-light);
+            }
+            
+        }
+        
+    }
+}
+
+
+@media screen and (max-width: 780px){
+
+    #site-nav{
+        height: calc(100vh - var(--header-h) + 10px);
+
+           .nav-level-1_ul{
+            margin-right: 10vw;
+
+            }
+
+           
+
+
+          .img-menu{
+            top: auto;
+            bottom: -60px;
+            height: 400px;
+
+           
+        }
+
+    }
 
 }
+
+
+
+@media #{$x-small}{
+      #site-nav{
+
+
+         .nav-level-2_ul{
+            max-height: 0;
+            transition: max-height .3s ease-in, opacity .2s ease-in;
+            overflow: hidden;
+            opacity: 0;
+        }
+
+        .nav-level-1_ul{
+            display: block;
+            width: calc(100% + var(--padding-body));
+            overflow: hidden;
+
+
+            input:checked + label .arrow svg{
+                 transform: rotate(90deg);
+
+            }
+            input:checked ~ .nav-level-2_ul{
+                max-height: 300px;
+                padding-top: calc(var(--spacing)*0.5);
+                padding-bottom: calc(var(--spacing)*2);
+                opacity: 1;
+            }
+        }
+      
+          .nav-level-1_link{
+                cursor: pointer;
+             }
+
+        #btn__connexion{
+            margin-inline: 0px;
+            position: absolute;
+            bottom: calc(var(--spacing)*1.5);
+
+        }
+
+        .img-menu{
+            // display: none;
+             bottom: -80px;
+        }
+
+
+        .nav-level-1_link{
+            padding-top: calc(var(--spacing) * 0.5);
+            padding-bottom: calc(var(--spacing) * 0.5);
+            text-decoration: none;
+            display: flex;
+            justify-content: space-between;
+            max-width: 26ch;
+
+             .arrow{
+            display: block;
+            padding-left: 2ch;
+            position: relative;
+            top: 1px;
+        }
+        
+        }
+
+       
+
+    
+       
+    }
+}
+
+
+@media #{$medium-up}{
+
+    #menu-toggle,
+    label[for="menu-toggle"]{
+        display: none;
+
+    }
+
+    #site-nav{
+           display: flex;
+    gap: calc(var(--padding-inner)*1);
+    align-items: center;
+    }
+    #site-nav .nav-level-1_ul{
+        display: flex;
+        // gap: calc(var(--padding-inner)*0);
+
+    }
 #site-nav .nav-level-1_li {
     display: block;
-    /* float: left; */
     padding: var(--padding-inner);
     position: relative;
     text-decoration: none;
+    white-space: nowrap;
 
     &:hover{
         color: var(--color-green);
@@ -95,6 +365,16 @@
 
 }
 
+.img-menu{
+    display: none;
+}
+
+}
+
+
+
+
+
 
 
 

assets/css/abstracts/_responsive.scss

@@ -0,0 +1,18 @@
+$desktop: "screen and (min-width: 1200px)";
+$medium: "screen and (max-width: 1080px)";
+$medium-up: "screen and (min-width: 1080px)";
+
+$small-up: "screen and (min-width: 768px)";
+$small: "screen and (max-width: 768px)";
+$x-small-up: "screen and (min-width: 560px)";
+$x-small: "screen and (max-width: 560px)";
+$paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
+
+@media #{$medium}{
+
+}
+
+
+@media #{$x-small}{
+
+}

assets/css/abstracts/_var.scss

@@ -5,8 +5,8 @@
     --font: 'Nunito', Arial, sans-serif;
 
     --fs-small: 14px;
-    --fs-normal: 16px;
+    --fs-normal: 18px;
-     --fs-medium: 22px;
+     --fs-medium: 24px;
     --fs-title-page: 42px;
 
     --spacing: 20px;

assets/css/components/_taxon-card.scss

@@ -1,11 +1,11 @@
 @use "../abstracts/mixins.scss" as *;
 
-
 .species-list{
          display: grid;
-         grid-gap: calc(var(--spacing)*1);
+         grid-gap: calc(var(--spacing)*0.5);
         grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
 
+
         .taxon{
             align-self: start;
         }
@@ -33,16 +33,26 @@
 
     background-color: var(--color-green-light);
     padding: calc(var(--padding-inner)*0.75);
+    border-radius: var(--radius-img);
 
     .name{ order: 1; }
     figure{ order: 2; }
 
     figure{
         @include fig-ratio(1/1);
-
         border-radius: var(--radius-img);
         overflow: hidden;
 
+         img{
+            background-color:  var(--color-green);
+
+            &:nth-of-type(4n){
+                background-color: yellow;
+            }
+        }
+
+       
+        
     }
 
     .vernacular{

assets/css/pages/_home.scss

@@ -43,6 +43,10 @@
         grid-column: span 2;
         text-align: center;
         margin-bottom: calc(var(--spacing)*2);
+
+        border: 2px solid currentColor;
+        border-radius: var(--radius-btn);
+        padding: 1ch calc(var(--spacing)*0.5);
     }
 
     .baseline {
@@ -58,11 +62,6 @@
         .taxon:hover{
             outline: 3px solid var(--color-txt);
         }
-
-        // .taxon:hover{
-        //     border-color: red!important;
-            
-        // }
     }
 
     .species-list .title{
@@ -71,19 +70,11 @@
         color: var(--data-color-light);
     }
 
-
+    .section--content{
-}
-
-
-
-
-.slideshow {
         width: 100%;
-    height: calc(var(--unit)*13);
-
-    figure {
-        height: calc(var(--unit)*11);
     }
+
+
 }
 
 
@@ -91,6 +82,8 @@
 
 
 
+
+
 #home__hero {
     margin-bottom: 0;
     padding-bottom: calc(var(--unit)*1.5) !important;
@@ -104,6 +97,7 @@
 
     .section--title {
         // font-size: 3.6em;
+        border: none;
 
         margin-bottom: calc(var(--unit)*1.5);
         // color: var(--color-orange);
@@ -226,56 +220,17 @@
 }
 
 
-.slideshow-scroll{
-    width: 100vw;
-    position: relative;
-    left: calc((100vw - var(--max-w-home))*-0.5);
-    padding-bottom: 20px;
-   
-    overflow-y: scroll;
-    @include hide-scrollbar();
-    margin-top: calc(var(--spacing) * 4);
-    margin-bottom: calc(var(--spacing) * 4);
-
-    .slideshow-scroll__warpper{
-        // padding-left: calc((100vw - var(--max-w-home))*0.5);
-        padding-left: var(--padding-body);
-        display: flex;
-        gap: var(--padding-inner);
-
-
-        .slideshow-item{
-            flex-shrink: 0;
-            figure{
-                height: 420px;
-                 width: 100%;
-               img{
-                width: 100%;
-                aspect-ratio: 5/3;
-                }
-            }
-        }
-        &::after{
-            content: "........................................";
-            display: block;
-            width: calc((100vw - var(--max-w-home))*1);
-            color: transparent;
-        }
-    }
-}
 
 
 
 .screenshot-booklet{
+
     display: flex;
-    --size-page: 340px;
     --gap: var(--padding-inner);
     gap: var(--gap);
-    width: calc(var(--size-page)*5 + var(--gap)*2);
+      width: 100%;
 
     .cover, .page{     
-        width: 300px;
-     
         img{
                border: 0.5px solid var(--color-txt-light);
             width: 100%;
@@ -293,3 +248,14 @@
     }
 
 }
+
+
+.slider-flex{
+    display: flex;
+    min-height: 500px;
+    background-color: #efefef;
+   
+    .item{
+        display: none;
+    }
+}

assets/css/pages/_species-list.scss

@@ -41,7 +41,7 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
-        gap: calc(var(--spacing)*1);
+        gap: calc(var(--spacing)*0.5);
         margin-bottom: calc(var(--spacing)*3);
          .taxon{
             width: calc(100%/3 - var(--spacing)*2/3);

assets/style.css

@@ -3,8 +3,8 @@
   --font-title: 'Borna', Arial, sans-serif;
   --font: 'Nunito', Arial, sans-serif;
   --fs-small: 14px;
-  --fs-normal: 16px;
+  --fs-normal: 18px;
-  --fs-medium: 22px;
+  --fs-medium: 24px;
   --fs-title-page: 42px;
   --spacing: 20px;
   font-size: 14px;
@@ -129,12 +129,15 @@ figure, picture, img {
   text-decoration: none;
 }
 #site-header #logo-botascopia svg {
+  display: none;
   width: 180px;
   fill: var(--color-green);
 }
 #site-header h1 {
-  position: absolute;
+  opacity: 1;
-  opacity: 0;
+  font-size: var(--fs-normal);
+  font-family: var(--font-title);
+  color: var(--color-green);
 }
 
 #site-header ul {
@@ -155,7 +158,8 @@ figure, picture, img {
 }
 
 #site-nav {
-  z-index: var(--header-z);
+  position: relative;
+  z-index: calc(var(--header-z) - 10);
 }
 
 #site-nav a {
@@ -167,6 +171,9 @@ figure, picture, img {
   font-weight: 500;
   color: var(--color-txt);
 }
+#site-nav li input[type=radio] {
+  display: none;
+}
 
 .arrow {
   --size: 12px;
@@ -185,31 +192,213 @@ figure, picture, img {
   fill: var(--color-txt);
 }
 
-#site-nav .nav-level-1_ul {
+label[for=menu-toggle] {
-  display: flex;
+  cursor: pointer;
-  gap: calc(var(--padding-inner) * 2);
+}
+label[for=menu-toggle] .menu__icon {
+  display: inline-block;
+  width: 26px;
+  height: 26px;
+}
+label[for=menu-toggle] .menu__icon svg {
+  width: 100%;
+  height: 100%;
 }
 
-#site-nav .nav-level-1_li {
+#menu-toggle {
+  display: none;
+}
+
+#menu-toggle ~ label[for=menu-toggle] .menu__icon--open {
+  display: flex;
+}
+#menu-toggle ~ label[for=menu-toggle] .menu__icon--close {
+  display: none;
+}
+
+#menu-toggle:checked ~ label[for=menu-toggle] .menu__icon--open {
+  display: none;
+}
+#menu-toggle:checked ~ label[for=menu-toggle] .menu__icon--close {
+  display: flex;
+}
+
+@media screen and (max-width: 1080px) {
+  #menu-toggle ~ #site-nav {
+    top: -100vh;
+  }
+  #menu-toggle:checked ~ #site-nav {
+    top: var(--header-h);
+  }
+  #site-nav {
+    position: fixed;
+    background-color: white;
+    transition: top 0.5s ease-in-out;
+    left: 0px;
+    max-height: calc(100vh - var(--header-h) + 2px);
+    width: 100vw;
+    padding: calc(var(--padding-body) * 1);
+    border-bottom: 2px solid var(--color-txt);
+    overflow: hidden;
+  }
+  #site-nav .img-menu {
+    position: absolute;
+    top: 25vw;
+    margin-top: -20vw;
+    right: -20vh;
+    width: auto;
+    height: calc(400px + 25vw);
+    z-index: 10;
+    float: right;
+    background-color: var(--color-txt);
+    display: flex;
+  }
+  #site-nav .img-menu img {
+    mix-blend-mode: screen;
+  }
+  #site-nav #btn__connexion,
+  #site-nav .nav-level-1_ul {
+    position: relative;
+    z-index: 20;
+  }
+  #site-nav #btn__connexion {
+    display: block;
+    margin-top: calc(var(--spacing) * 2);
+  }
+  #site-nav .nav-level-1_ul {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    grid-gap: var(--padding-inner);
+    max-width: 580px;
+    margin-right: 35vw;
+    max-height: calc(100% - var(--spacing) * 4);
+    overflow-y: scroll;
+  }
+  #site-nav .nav-level-1_li:first-of-type {
+    grid-row: 1/3;
+  }
+  #site-nav .nav-level-1_link {
+    display: block;
+    font-size: var(--fs-small);
+    font-family: var(--font-title);
+    padding-top: calc(var(--spacing) * 1.5);
+    padding-bottom: calc(var(--spacing) * 1);
+    -webkit-text-decoration: underline 2px;
+            text-decoration: underline 2px;
+    text-underline-offset: 3px;
+    text-transform: uppercase;
+    padding-left: 1.4ch;
+    cursor: auto;
+  }
+  #site-nav .nav-level-1_link .arrow {
+    display: none;
+  }
+  #site-nav .nav-level-2_li {
+    font-size: var(--fs-normal);
+    max-width: 20ch;
+  }
+  #site-nav .nav-level-2_li a {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: calc(var(--spacing) * 0.35) 1ch;
+  }
+  #site-nav .nav-level-2_li:hover {
+    background-color: var(--color-x-light);
+  }
+}
+@media screen and (max-width: 780px) {
+  #site-nav {
+    height: calc(100vh - var(--header-h) + 10px);
+  }
+  #site-nav .nav-level-1_ul {
+    margin-right: 10vw;
+  }
+  #site-nav .img-menu {
+    top: auto;
+    bottom: -60px;
+    height: 400px;
+  }
+}
+@media screen and (max-width: 560px) {
+  #site-nav .nav-level-2_ul {
+    max-height: 0;
+    transition: max-height 0.3s ease-in, opacity 0.2s ease-in;
+    overflow: hidden;
+    opacity: 0;
+  }
+  #site-nav .nav-level-1_ul {
+    display: block;
+    width: calc(100% + var(--padding-body));
+    overflow: hidden;
+  }
+  #site-nav .nav-level-1_ul input:checked + label .arrow svg {
+    transform: rotate(90deg);
+  }
+  #site-nav .nav-level-1_ul input:checked ~ .nav-level-2_ul {
+    max-height: 300px;
+    padding-top: calc(var(--spacing) * 0.5);
+    padding-bottom: calc(var(--spacing) * 2);
+    opacity: 1;
+  }
+  #site-nav .nav-level-1_link {
+    cursor: pointer;
+  }
+  #site-nav #btn__connexion {
+    margin-inline: 0px;
+    position: absolute;
+    bottom: calc(var(--spacing) * 1.5);
+  }
+  #site-nav .img-menu {
+    bottom: -80px;
+  }
+  #site-nav .nav-level-1_link {
+    padding-top: calc(var(--spacing) * 0.5);
+    padding-bottom: calc(var(--spacing) * 0.5);
+    text-decoration: none;
+    display: flex;
+    justify-content: space-between;
+    max-width: 26ch;
+  }
+  #site-nav .nav-level-1_link .arrow {
+    display: block;
+    padding-left: 2ch;
+    position: relative;
+    top: 1px;
+  }
+}
+@media screen and (min-width: 1080px) {
+  #menu-toggle,
+  label[for=menu-toggle] {
+    display: none;
+  }
+  #site-nav {
+    display: flex;
+    gap: calc(var(--padding-inner) * 1);
+    align-items: center;
+  }
+  #site-nav .nav-level-1_ul {
+    display: flex;
+  }
+  #site-nav .nav-level-1_li {
     display: block;
-  /* float: left; */
     padding: var(--padding-inner);
     position: relative;
     text-decoration: none;
-}
+    white-space: nowrap;
-#site-nav .nav-level-1_li:hover {
+  }
+  #site-nav .nav-level-1_li:hover {
     color: var(--color-green);
-}
+  }
-#site-nav .nav-level-1_li:hover .arrow svg {
+  #site-nav .nav-level-1_li:hover .arrow svg {
     transform: rotate(90deg);
     fill: var(--color-green);
-}
+  }
-
+  #site-nav li:hover {
-#site-nav li:hover {
     cursor: pointer;
-}
+  }
-
+  .nav-level-2_ul {
-.nav-level-2_ul {
     visibility: hidden;
     opacity: 0;
     position: absolute;
@@ -221,25 +410,25 @@ figure, picture, img {
     min-width: 24ch;
     z-index: var(--header-z);
     background-color: white;
-}
+  }
-
+  .nav-level-1_ul li:hover > .nav-level-2_ul,
-.nav-level-1_ul li:hover > .nav-level-2_ul,
+  .nav-level-2_ul:hover {
-.nav-level-2_ul:hover {
     visibility: visible;
     opacity: 1;
     display: block;
     z-index: var(--header-z);
-}
+  }
-
+  .nav-level-2_li {
-.nav-level-2_li {
     width: 100%;
     padding: calc(var(--padding-inner) * 0.75) var(--padding-inner);
-}
+  }
-
+  .nav-level-2_li:hover {
-.nav-level-2_li:hover {
     background-color: var(--color-x-light);
+  }
+  .img-menu {
+    display: none;
+  }
 }
-
 #site-footer {
   background-color: var(--color-x-light);
   min-height: 200px;
@@ -1579,7 +1768,7 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
 
 .species-list {
   display: grid;
-  grid-gap: calc(var(--spacing) * 1);
+  grid-gap: calc(var(--spacing) * 0.5);
   grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
 }
 .species-list .taxon {
@@ -1612,6 +1801,7 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   position: relative;
   background-color: var(--color-green-light);
   padding: calc(var(--padding-inner) * 0.75);
+  border-radius: var(--radius-img);
 }
 .species-list .taxon .name {
   order: 1;
@@ -1634,6 +1824,12 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   border-radius: var(--radius-img);
   overflow: hidden;
 }
+.species-list .taxon figure img {
+  background-color: var(--color-green);
+}
+.species-list .taxon figure img:nth-of-type(4n) {
+  background-color: yellow;
+}
 .species-list .taxon .vernacular {
   background-color: var(--color-green);
   color: white;
@@ -1875,6 +2071,9 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   grid-column: span 2;
   text-align: center;
   margin-bottom: calc(var(--spacing) * 2);
+  border: 2px solid currentColor;
+  border-radius: var(--radius-btn);
+  padding: 1ch calc(var(--spacing) * 0.5);
 }
 #main_home .baseline {
   font-size: var(--fs-medium);
@@ -1892,13 +2091,8 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   font-size: var(--fs-medium);
   color: var(--data-color-light);
 }
-
+#main_home .section--content {
-.slideshow {
   width: 100%;
-  height: calc(var(--unit) * 13);
-}
-.slideshow figure {
-  height: calc(var(--unit) * 11);
 }
 
 #home__hero {
@@ -1912,6 +2106,7 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   max-width: 100%;
 }
 #home__hero .section--title {
+  border: none;
   margin-bottom: calc(var(--unit) * 1.5);
 }
 #home__hero {
@@ -2001,54 +2196,11 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   margin-top: calc(var(--unit) * 2);
 }
 
-.slideshow-scroll {
-  width: 100vw;
-  position: relative;
-  left: calc((100vw - var(--max-w-home)) * -0.5);
-  padding-bottom: 20px;
-  overflow-y: scroll;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.slideshow-scroll::-webkit-scrollbar {
-  display: none;
-}
-.slideshow-scroll {
-  margin-top: calc(var(--spacing) * 4);
-  margin-bottom: calc(var(--spacing) * 4);
-}
-.slideshow-scroll .slideshow-scroll__warpper {
-  padding-left: var(--padding-body);
-  display: flex;
-  gap: var(--padding-inner);
-}
-.slideshow-scroll .slideshow-scroll__warpper .slideshow-item {
-  flex-shrink: 0;
-}
-.slideshow-scroll .slideshow-scroll__warpper .slideshow-item figure {
-  height: 420px;
-  width: 100%;
-}
-.slideshow-scroll .slideshow-scroll__warpper .slideshow-item figure img {
-  width: 100%;
-  aspect-ratio: 5/3;
-}
-.slideshow-scroll .slideshow-scroll__warpper::after {
-  content: "........................................";
-  display: block;
-  width: calc((100vw - var(--max-w-home)) * 1);
-  color: transparent;
-}
-
 .screenshot-booklet {
   display: flex;
-  --size-page: 340px;
   --gap: var(--padding-inner);
   gap: var(--gap);
-  width: calc(var(--size-page) * 5 + var(--gap) * 2);
+  width: 100%;
-}
-.screenshot-booklet .cover, .screenshot-booklet .page {
-  width: 300px;
 }
 .screenshot-booklet .cover img, .screenshot-booklet .page img {
   border: 0.5px solid var(--color-txt-light);
@@ -2061,6 +2213,15 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   border-left-color: transparent !important;
 }
 
+.slider-flex {
+  display: flex;
+  min-height: 500px;
+  background-color: #efefef;
+}
+.slider-flex .item {
+  display: none;
+}
+
 [data-page=species-list-by-families] .group-sort-view,
 [data-page=species-list] .group-sort-view {
   display: flex;
@@ -2088,7 +2249,7 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: calc(var(--spacing) * 1);
+  gap: calc(var(--spacing) * 0.5);
   margin-bottom: calc(var(--spacing) * 3);
 }
 [data-page=species-list-by-families] .species-list .taxon {

assets/style.scss

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@forward "css/abstracts/responsive";
 @use "css/abstracts/var";
 @forward "css/abstracts/mixins";
 

cgu.html

@@ -42,35 +42,44 @@
 
 <!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
 <script>
-  function processIncludes() {
+async function processIncludes(maxDepth = 5) {
+    let depth = 0;
+
+    while (depth < maxDepth) {
         const includes = document.querySelectorAll('include[src]');
+        if (includes.length === 0) break;
 
-      if (includes.length === 0) {
+        const promises = Array.from(includes).map(async el => {
-          return; 
-      }
-
-      const promises = Array.from(includes).map(el => {
             const src = el.getAttribute('src');
-          return fetch(src)
+
-              .then(r => {
+            try {
-                  if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
+                const response = await fetch(src, { cache: "no-store" });
-                  return r.text();
+                if (!response.ok) throw new Error(response.status);
-              })
+                const html = await response.text();
-              .then(html => {
                 el.outerHTML = html;
-              })
+            } catch (err) {
-              .catch(err => {
+                console.error("Erreur include:", src, err);
-                  console.error('Erreur de chargement:', err);
+            }
-              });
         });
 
-      Promise.all(promises).then(() => {
+        await Promise.all(promises);
-          processIncludes(); 
+
-      });
+        // Petite pause pour éviter rafale ultra rapide
+        await new Promise(r => setTimeout(r, 50));
+
+        depth++;
     }
 
-  document.addEventListener('DOMContentLoaded', processIncludes);
+    if (depth === maxDepth) {
+        console.warn("Max include depth reached (possible boucle).");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    processIncludes();
+});
 </script>
+
 </body>
 
 </html>

components/icons/menu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 28 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="28" height="20" style="fill:none;"/><clipPath id="_clip1"><rect id="Artboard11" serif:id="Artboard1" x="0" y="0" width="28" height="20"/></clipPath><g clip-path="url(#_clip1)"><rect x="0" y="0" width="28.111" height="2.222"/><rect x="0" y="8.889" width="28.111" height="2.222"/><rect x="0" y="17.778" width="28.111" height="2.222"/></g></svg>

components/search.html

@@ -4,7 +4,7 @@
     
       <label for="search-toggle">
         <span class="search__icon search__icon--open"><include src="/components/icons/search.svg"></include></span>
-        <span class="search__icon search__icon--close"><include src="/components/icons/x-lg.svg"></include></span>
+        <span class="search__icon search__icon--close"><include src="/components/icons/close.svg"></include></span>
         </label>
 
     <div class="search__input-group">

components/site-header.html

@@ -7,8 +7,16 @@
     </a>
 
     <include src="/components/search.html"></include>
+
+
+     <input type="checkbox" id="menu-toggle">
+      <label for="menu-toggle">
+        <span class="menu__icon menu__icon--open"><include src="/components/icons/menu.svg"></include></span>
+        <span class="menu__icon menu__icon--close"><include src="/components/icons/close.svg"></include></span>
+    </label>
+
     <include src="/components/site-nav.html"></include>
 
-    <button id="btn__connexion">Connexion</button>
+    
 
 </header>

components/site-nav.html

@@ -1,8 +1,11 @@
  <nav id="site-nav">
+
+        
+        
         <ul class="nav-level-1_ul">
                 <li class="nav-level-1_li li-dropdown">
-
+                    <input type="radio" name="nav" id="nav-1">
-                <a class="nav-level-1_link" href="#">Le projet <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
+                    <label class="nav-level-1_link" for="nav-1">Le projet <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></label>
                     <ul class="nav-level-2_ul">
                         <li class="nav-level-2_li"><a class="nav-level-2_link" href="/a-propos.html">À propos</a></li>
                         <li class="nav-level-2_li"><a class="nav-level-2_link" href="/a-propos.html#equipe">Équipe</a></li>
@@ -15,25 +18,36 @@
                 </li>
 
             <li class="nav-level-1_li li-dropdown">
-                <a class="nav-level-1_link" href="#">Base de connaissance <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
+                <input type="radio" name="nav" id="nav-2">
+                <label class="nav-level-1_link" for="nav-2">Base de connaissance <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></label>
                 <ul class="nav-level-2_ul">
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="/species-list.html">Explorer les espèces</a></li>
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Contribuer à la base de connaissance</a></li>
                 </ul>
             </li>
             <li class="nav-level-1_li li-dropdown">
-                <a class="nav-level-1_link" href="#">Livrets <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
+                <input type="radio" name="nav" id="nav-3">
+                <label class="nav-level-1_link" for="nav-3">Livrets <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></label>
                  <ul class="nav-level-2_ul">
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Créer un livret</a></li>
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Consulter les livrets</a></li>
                 </ul>
             </li>
             <li class="nav-level-1_li li-dropdown">
-                <a class="nav-level-1_link" href="#">Ateliers <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
+                <input type="radio" name="nav" id="nav-4">
+                <label class="nav-level-1_link" for="nav-4">Ateliers <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></label>
                  <ul class="nav-level-2_ul">
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Organiser un atelier</a></li>
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Kits pédagogiques</a></li>
                 </ul>
             </li>
         </ul>
+
+        <button id="btn__connexion">Connexion</button>
+
+        <figure class="img-menu">
+            <img src="/assets/images/Cerisier.jpg">
+        </figure>
+
+       
     </nav>

index.html

@@ -88,26 +88,18 @@
                 </div>
 
 
-                <div class="slideshow-scroll">
+                <div class="section--content">
-
-                    <div class="slideshow-scroll__warpper">
  
                         <div class="screenshot-booklet">
                             <div class="cover"><img src="/images/livret-1.png"></div>
                             <div class="double">
                                 <div class="page"><img src="/images/livret-2.png"></div>
-                                <div class="page"><img src="/images/livret-3.png"></div>
-                            </div>
-                            <div class="double">
                                 <div class="page"><img src="/images/livret-10.png"></div>
-                                <div class="page"><img src="/images/livret-11.png"></div>
                             </div>
                         </div>
 
                 </div>
 
-                </div>
-
 
 
             </div>
@@ -152,12 +144,9 @@
                 </div>
 
 
-                <div class="slideshow-scroll">
+                <div class="section--content">
-
+                    <div class="slider-flex">
-                    <div class="slideshow-scroll__warpper">
+                        <div class="item" data-item="1">
-
-
-                        <div class="slideshow-item" data-item="1">
                             <figure>
                                 <img src="/images/atelier-2.png">
                             </figure>
@@ -165,7 +154,7 @@
                                 Atelier Lorem Ispsum, Rennes, 23 septembre 2025
                             </figcaption>
                         </div>
-                        <div class="slideshow-item" data-item="2">
+                        <div class="item" data-item="2">
                             <figure>
                                 <img src="/images/atelier-1.png">
                             </figure>
@@ -173,7 +162,7 @@
                                 Atelier 2 Lorem Ispsum, Rennes, 23 septembre 2025
                             </figcaption>
                         </div>
-                        <div class="slideshow-item" data-item="3">
+                        <div class="item" data-item="3">
                             <figure class="schema-collectifs">
                                 <img src="/images/shema-collectifs.png">
                             </figure>
@@ -181,7 +170,7 @@
                                 Accompagnement des collectifs
                             </figcaption>
                         </div>
-                            <div class="slideshow-item" data-item="3">
+                        <div class="item" data-item="3">
                             <figure>
                                 <img src="/images/Epinay3.jpeg">
                             </figure>
@@ -364,36 +353,45 @@
 
 
     <!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
-    <script>
+<script>
-        function processIncludes() {
+async function processIncludes(maxDepth = 5) {
+    let depth = 0;
+
+    while (depth < maxDepth) {
         const includes = document.querySelectorAll('include[src]');
+        if (includes.length === 0) break;
 
-            if (includes.length === 0) {
+        const promises = Array.from(includes).map(async el => {
-                return;
-            }
-
-            const promises = Array.from(includes).map(el => {
             const src = el.getAttribute('src');
-                return fetch(src)
+
-                    .then(r => {
+            try {
-                        if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
+                const response = await fetch(src, { cache: "no-store" });
-                        return r.text();
+                if (!response.ok) throw new Error(response.status);
-                    })
+                const html = await response.text();
-                    .then(html => {
                 el.outerHTML = html;
-                    })
+            } catch (err) {
-                    .catch(err => {
+                console.error("Erreur include:", src, err);
-                        console.error('Erreur de chargement:', err);
+            }
-                    });
         });
 
-            Promise.all(promises).then(() => {
+        await Promise.all(promises);
-                processIncludes();
+
-            });
+        // Petite pause pour éviter rafale ultra rapide
+        await new Promise(r => setTimeout(r, 50));
+
+        depth++;
     }
 
-        document.addEventListener('DOMContentLoaded', processIncludes);
+    if (depth === maxDepth) {
-    </script>
+        console.warn("Max include depth reached (possible boucle).");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    processIncludes();
+});
+</script>
+
 </body>
 
 </html>

species-list-by-families.html

@@ -527,35 +527,44 @@
 
 <!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
 <script>
-  function processIncludes() {
+async function processIncludes(maxDepth = 5) {
+    let depth = 0;
+
+    while (depth < maxDepth) {
         const includes = document.querySelectorAll('include[src]');
+        if (includes.length === 0) break;
 
-      if (includes.length === 0) {
+        const promises = Array.from(includes).map(async el => {
-          return; 
-      }
-
-      const promises = Array.from(includes).map(el => {
             const src = el.getAttribute('src');
-          return fetch(src)
+
-              .then(r => {
+            try {
-                  if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
+                const response = await fetch(src, { cache: "no-store" });
-                  return r.text();
+                if (!response.ok) throw new Error(response.status);
-              })
+                const html = await response.text();
-              .then(html => {
                 el.outerHTML = html;
-              })
+            } catch (err) {
-              .catch(err => {
+                console.error("Erreur include:", src, err);
-                  console.error('Erreur de chargement:', err);
+            }
-              });
         });
 
-      Promise.all(promises).then(() => {
+        await Promise.all(promises);
-          processIncludes(); 
+
-      });
+        // Petite pause pour éviter rafale ultra rapide
+        await new Promise(r => setTimeout(r, 50));
+
+        depth++;
     }
 
-  document.addEventListener('DOMContentLoaded', processIncludes);
+    if (depth === maxDepth) {
+        console.warn("Max include depth reached (possible boucle).");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    processIncludes();
+});
 </script>
+
 </body>
 
 </html>

species-list.html

@@ -85,7 +85,7 @@
 
             <article class="taxon">
                 <figure>
-                    <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
+                    <img src="/img/Acorus_calamus_morphology_outlook_illustration_photo.png">
                 </figure>
                 <div class="name">
                     <div class="name">
@@ -110,7 +110,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
+                        <img src="/img/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Acore odorant</a></h3>
@@ -129,7 +129,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
+                        <img src="/img/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Aulne glutineux</a></h3>
@@ -150,7 +150,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
+                        <img src="/img/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Gouet d'Italie</a></h3>
@@ -171,7 +171,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
+                        <img src="/img/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Charme commun</a></h3>
@@ -192,7 +192,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
+                        <img src="/img/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Acore odorant</a></h3>
@@ -211,7 +211,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
+                        <img src="/img/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Aulne glutineux</a></h3>
@@ -232,7 +232,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
+                        <img src="/img/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Gouet d'Italie</a></h3>
@@ -253,7 +253,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
+                        <img src="/img/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Charme commun</a></h3>
@@ -279,7 +279,7 @@
     
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
+                        <img src="/img/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Acore odorant</a></h3>
@@ -298,7 +298,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
+                        <img src="/img/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Aulne glutineux</a></h3>
@@ -319,7 +319,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
+                        <img src="/img/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Gouet d'Italie</a></h3>
@@ -340,7 +340,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
+                        <img src="/img/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Charme commun</a></h3>
@@ -361,7 +361,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
+                        <img src="/img/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Acore odorant</a></h3>
@@ -380,7 +380,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
+                        <img src="/img/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Aulne glutineux</a></h3>
@@ -401,7 +401,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
+                        <img src="/img/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Gléchome lierre terrestre</a></h3>
@@ -422,7 +422,7 @@
 
                 <article class="taxon">
                     <figure>
-                        <img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
+                        <img src="/img/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
                         <h3 class="vernacular"><a href="/species-single.html" target="_blank">Charme commun</a></h3>
@@ -458,35 +458,44 @@
 
 <!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
 <script>
-  function processIncludes() {
+async function processIncludes(maxDepth = 5) {
+    let depth = 0;
+
+    while (depth < maxDepth) {
         const includes = document.querySelectorAll('include[src]');
+        if (includes.length === 0) break;
 
-      if (includes.length === 0) {
+        const promises = Array.from(includes).map(async el => {
-          return; 
-      }
-
-      const promises = Array.from(includes).map(el => {
             const src = el.getAttribute('src');
-          return fetch(src)
+
-              .then(r => {
+            try {
-                  if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
+                const response = await fetch(src, { cache: "no-store" });
-                  return r.text();
+                if (!response.ok) throw new Error(response.status);
-              })
+                const html = await response.text();
-              .then(html => {
                 el.outerHTML = html;
-              })
+            } catch (err) {
-              .catch(err => {
+                console.error("Erreur include:", src, err);
-                  console.error('Erreur de chargement:', err);
+            }
-              });
         });
 
-      Promise.all(promises).then(() => {
+        await Promise.all(promises);
-          processIncludes(); 
+
-      });
+        // Petite pause pour éviter rafale ultra rapide
+        await new Promise(r => setTimeout(r, 50));
+
+        depth++;
     }
 
-  document.addEventListener('DOMContentLoaded', processIncludes);
+    if (depth === maxDepth) {
+        console.warn("Max include depth reached (possible boucle).");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    processIncludes();
+});
 </script>
+
 </body>
 
 </html>

species-single.html

@@ -896,35 +896,44 @@
 
 <!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
 <script>
-  function processIncludes() {
+async function processIncludes(maxDepth = 5) {
+    let depth = 0;
+
+    while (depth < maxDepth) {
         const includes = document.querySelectorAll('include[src]');
+        if (includes.length === 0) break;
 
-      if (includes.length === 0) {
+        const promises = Array.from(includes).map(async el => {
-          return; 
-      }
-
-      const promises = Array.from(includes).map(el => {
             const src = el.getAttribute('src');
-          return fetch(src)
+
-              .then(r => {
+            try {
-                  if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
+                const response = await fetch(src, { cache: "no-store" });
-                  return r.text();
+                if (!response.ok) throw new Error(response.status);
-              })
+                const html = await response.text();
-              .then(html => {
                 el.outerHTML = html;
-              })
+            } catch (err) {
-              .catch(err => {
+                console.error("Erreur include:", src, err);
-                  console.error('Erreur de chargement:', err);
+            }
-              });
         });
 
-      Promise.all(promises).then(() => {
+        await Promise.all(promises);
-          processIncludes(); 
+
-      });
+        // Petite pause pour éviter rafale ultra rapide
+        await new Promise(r => setTimeout(r, 50));
+
+        depth++;
     }
 
-  document.addEventListener('DOMContentLoaded', processIncludes);
+    if (depth === maxDepth) {
+        console.warn("Max include depth reached (possible boucle).");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    processIncludes();
+});
 </script>
+
 </body>
 
 </html>

template.html

@@ -58,35 +58,44 @@
 
 <!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
 <script>
-  function processIncludes() {
+async function processIncludes(maxDepth = 5) {
+    let depth = 0;
+
+    while (depth < maxDepth) {
         const includes = document.querySelectorAll('include[src]');
+        if (includes.length === 0) break;
 
-      if (includes.length === 0) {
+        const promises = Array.from(includes).map(async el => {
-          return; 
-      }
-
-      const promises = Array.from(includes).map(el => {
             const src = el.getAttribute('src');
-          return fetch(src)
+
-              .then(r => {
+            try {
-                  if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
+                const response = await fetch(src, { cache: "no-store" });
-                  return r.text();
+                if (!response.ok) throw new Error(response.status);
-              })
+                const html = await response.text();
-              .then(html => {
                 el.outerHTML = html;
-              })
+            } catch (err) {
-              .catch(err => {
+                console.error("Erreur include:", src, err);
-                  console.error('Erreur de chargement:', err);
+            }
-              });
         });
 
-      Promise.all(promises).then(() => {
+        await Promise.all(promises);
-          processIncludes(); 
+
-      });
+        // Petite pause pour éviter rafale ultra rapide
+        await new Promise(r => setTimeout(r, 50));
+
+        depth++;
     }
 
-  document.addEventListener('DOMContentLoaded', processIncludes);
+    if (depth === maxDepth) {
+        console.warn("Max include depth reached (possible boucle).");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    processIncludes();
+});
 </script>
+
 </body>
 
 </html>