home replace texte

assets/css/_home.scss

@@ -35,22 +35,36 @@
          }
     }
 
-   
-}
-
-
-.item-nav__group{
+    .item-nav__group{
     display: flex;
     flex-direction: column;
     gap: var(--unit);
 }
 
-.section--title{
-    font-size: 2.8rem;
-    font-family: var(--font-title);
+.section--header{
        margin-bottom: calc(var(--unit)*3);
 }
 
+    .section--title{
+        font-size: 2.8rem;
+        font-family: var(--font-title);
+        margin-bottom: calc(var(--unit)*1);
+    }
+
+    .baseline{
+        font-size: var(--fs-medium);
+        max-width: 46ch;
+        
+
+    }
+
+
+    
+   
+}
+
+
+
 
 .slideshow{
     width: 100%;
@@ -70,7 +84,7 @@
      grid-template-columns: 4fr 5fr;
      column-gap: calc(var(--unit)*3);
 
-    .section--title{
+    .section--header{
         grid-column: 1/end;
         width: 100%;
     }
@@ -109,7 +123,8 @@
 
     /* button{ display: none;} */
     .description{
-        font-size: 1.6rem;
+        font-size: var(--fs-medium);
+
         max-width: 48ch;
         margin: 0 auto;
         margin-bottom: calc(var(--unit)*1.5);

assets/style.css

@@ -704,17 +704,22 @@ span.controls::after {
   max-width: 1100px;
   margin: 0 auto;
 }
-
-.item-nav__group {
+#main_home .item-nav__group {
   display: flex;
   flex-direction: column;
   gap: var(--unit);
 }
-
-.section--title {
+#main_home .section--header {
+  margin-bottom: calc(var(--unit) * 3);
+}
+#main_home .section--title {
   font-size: 2.8rem;
   font-family: var(--font-title);
-  margin-bottom: calc(var(--unit) * 3);
+  margin-bottom: calc(var(--unit) * 1);
+}
+#main_home .baseline {
+  font-size: var(--fs-medium);
+  max-width: 46ch;
 }
 
 .slideshow {
@@ -731,7 +736,7 @@ span.controls::after {
   -moz-column-gap: calc(var(--unit) * 3);
        column-gap: calc(var(--unit) * 3);
 }
-.home--section-tool .section--inner .section--title {
+.home--section-tool .section--inner .section--header {
   grid-column: 1/end;
   width: 100%;
 }
@@ -760,7 +765,7 @@ span.controls::after {
   color: var(--color);
 }
 #home__hero .description {
-  font-size: 1.6rem;
+  font-size: var(--fs-medium);
   max-width: 48ch;
   margin: 0 auto;
   margin-bottom: calc(var(--unit) * 1.5);

index.html

@@ -23,12 +23,14 @@
     <section id="home__hero">
         <div class="section--inner">
 
+           
             <h2 class="section--title">Botascopia</h2>
 
             <div class="content">
                 <p class="description">Botascopia est un projet de recherche mêlant botanique, informatique et didactique. Son objectif est de développer des outils de transmission et de partage des connaissances botaniques. Découvrez ci-dessous nos <strong>principaux outils</strong>.</p>
             </div>
            
+
                 <div class="search--container">
                     <div class="icon"><include src="/components/search.html"></include></div>
                     <input type="text" class="" placeholder="Recherchez une plante ou un livret">
@@ -54,18 +56,23 @@
 
     <section class="home--section-tool" id="home__livrets">
         <div class="section--inner">
+
+             <div class="section--header">
                 <h2 class="section--title">Livrets</h2>
+                <p class="baseline">Grâce à Botascopia, il est facile de générer des petites flores (environ 30 à 60 espèces) sous forme de livrets imprimables A5. Les livrets se composent d'une <strong>cé de détermination</strong> pour observer et identifier les plantes inconnues, et  d'une partie « <strong>fiches-espèce</strong> » pour vérifier et en  apprendre plus.</p>
+            </div>
+
 
                <div class="item-nav__group">
                     <div class="item-nav">
-                        <h3 class="title">Créer un livret</h3>
-                        <p class="description">Inventoriez un terrain, créez votre collection et générez un livret avec sa clé de détermination.</p>
+                        <h3 class="title">Consulter des livrets</h3>
+                        <p class="description">Consultez et téléchargez librement les livrets existants.</p>
                         <button class="btn--go-to">→</button>
                     </div>
 
                     <div class="item-nav">
-                        <h3 class="title">Rechercher un livret</h3>
-                        <p class="description">Consultez et téléchargez librement les livrets existants.</p>
+                        <h3 class="title">Créer un livret</h3>
+                        <p class="description">À partir d’une liste d’espèces, générez un livret avec sa clé de détermination</p>
                         <button class="btn--go-to">→</button>
                     </div>
                 </div>
@@ -86,19 +93,24 @@
 
      <section class="home--section-tool" id="home__base-connaissance">
         <div class="section--inner">
+
+
+              <div class="section--header">
                     <h2 class="section--title">Base de connaissance</h2>
+                    <p class="baseline">Collaborative, la base de connaissance botanique est la source permettant de générer les livrets. Elle comporte actuellement xxx espèces dont xxx vérifiées.</p>
+                </div>
 
             <div class="item-nav__group">
 
                 <div class="item-nav">
                     <h3 class="title">Explorer les espèces</h3>
-                    <p class="description">Consultez et téléchargez les fiches des espèces vérifiées par Botascopia.</p>
+                    <p class="description">CAccédez à l'ensemble de la base ou consultez et téléchargez les fiches des espèces vérifiées.</p>
                     <button class="btn--go-to">→</button>
                 </div>
 
                 <div class="item-nav">
                     <h3 class="title">Contribuer à la base de connaissance</h3>
-                    <p class="description">Seul·e ou dans le cadre d'une activité pédagogique en botanique, contactez-nous!</p>
+                    <p class="description">Enrichir ou relire, botanistes avertis, contactez-nous !   </p>
                     <button class="btn--go-to">→</button>
                 </div>
 
@@ -121,7 +133,14 @@
 
         <section class="home--section-tool" id="home__ateliers">
         <div class="section--inner">
+
+              <div class="section--header">
+
+          
             <h2 class="section--title">Ateliers</h2>
+
+                </div>
+                
             <div class="item-nav__group">
 
             <div class="item-nav">