remove useless classes

assets/css/style.css

@@ -193,13 +193,6 @@ a :visited {
 /*HEADER*/
 
 
-body[data-menu] .mlink--header,
-.link--header {
-  font-size: 26px;
-  color: var(--color-link);
-}
-
-
 header {
   display: flex;
   margin-top: auto;
@@ -310,12 +303,10 @@ header {
   font-size: 38px;
   margin-top: 0;
   text-align: center;
-  font-family: 'moodboardFont';
   font-weight: 300;
-  background: black;
   margin-left: -10vw;
   margin-right: -3vw;
-  color: white;
+  font-family: 'Sora', sans-serif;
   text-transform: uppercase;
 }
 
@@ -421,13 +412,6 @@ img {
   position: static;
 }
 
-.highlight {
-  background: linear-gradient(120deg, #ff00e329 0%, #74ff0069 100%);
-  background-repeat: no-repeat;
-  background-size: 100% 20%;
-  background-position: 0 60%;
-}
-
 .miroframe {
   max-width: 100%;
   min-width: 100%;
@@ -485,34 +469,6 @@ body[data-menu] {
   padding: 2rem;
 }
 
-
-.content__objet {
-  background-color: #CDFB52;
-  margin-left: 0em;
-  margin-right: -3rem;
-  padding: 1em;
-  line-height: 1.45;
-  color: var(--color-txt-b);
-}
-
-.section__color {
-  padding-bottom: 4em;
-}
-
-.section__color--pink {
-  background-color: #ff00c84b;
-}
-
-.section__color--green {
-  background-color: #CDFB52;
-  color: var(--color-txt-b);
-}
-
-.section__color--blue {
-  background-color: #B4E9FF;
-  color: var(--color-txt-b);
-}
-
 /* Slideshow container */
 .slideshow-container {
   max-width: 1000px;
@@ -618,12 +574,6 @@ body[data-menu] {
   float: inherit;
 }
 
-.section__color--slot {
-  box-shadow: 13em 2em 11em -2em #EDCCE7;
-  padding: 10px;
-  margin-bottom: 15px;
-}
-
 .details[open] {
   border-radius: 5%;
 }
@@ -786,95 +736,6 @@ footer {
   fill: var(--color-icone);
 }
 
-@media only screen and (min-width: 800px) {
-
-  .grid {
-    display: grid;
-    grid-template-columns: 1fr 6fr 6fr 1fr 1fr;
-    padding-left: 0;
-    padding-right: 0;
-    gap: 3em 20px;
-  }
-
-  .grid>* {
-    grid-column: 1/-1;
-  }
-
-  .grid>figure {
-    margin: 0;
-  }
-
-
-  .tgrid-start01 {
-    grid-column-start: 1;
-  }
-
-  .tgrid-start02 {
-    grid-column-start: 2;
-  }
-
-  .tgrid-start03 {
-    grid-column-start: 3;
-  }
-
-  .tgrid-start04 {
-    grid-column-start: 4;
-  }
-
-  .tgrid-start05 {
-    grid-column-start: 5;
-
-  }
-
-  .tgrid-start06 {
-    grid-column-start: 5;
-
-  }
-
-  .tgrid-end01 {
-    grid-column-end: 1;
-  }
-
-  .tgrid-end02 {
-    grid-column-end: 2;
-  }
-
-  .tgrid-end03 {
-    grid-column-end: 3;
-  }
-
-  .tgrid-end04 {
-    grid-column-end: 4;
-  }
-
-  .tgrid-end05 {
-    grid-column-end: 5;
-  }
-
-  .tgrid-end06 {
-    grid-column-end: 6;
-  }
-
-  .tgrid-end07 {
-    grid-column-end: 7;
-  }
-
-  header {
-    top: 0em;
-    height: 2%;
-    width: 71%;
-  }
-
-
-}
-
-.list--header,
-.list {
-  text-decoration: none;
-  list-style: none;
-  display: flex;
-  gap: 46px;
-}
 
 @media only screen and (min-width: 750px) {
   .header__navigation {
@@ -954,15 +815,6 @@ footer {
     grid-column-end: 7;
   }
 
-  .title {
-    font-size: 47px;
-    margin-top: 0;
-    text-align: center;
-    font-family: 'moodboardFont';
-    font-weight: 300;
-  }
-
-
   .header--second {
     border: none;
     box-shadow: .5em 0 0 #FF00C7, -.5em 0 0 #FF00C7;
@@ -1118,9 +970,6 @@ footer {
     gap: 3em 20px;
   }
 
-  .grid--content {
-    gap: 9em 20px;
-  }
 
 
   /*HEADER*/

index.html

@@ -26,6 +26,9 @@
     <!-- CSS and Javascript -->
     <link rel="stylesheet" href="assets/css/normalize.css">
     <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@600&display=swap" rel="stylesheet">
     <script src="assets/js/app.js" defer></script>
 </head>
 
@@ -50,36 +53,36 @@
 
                     <ul class="list--header">
                         <li>
-                            <a class="link link--header" href="#partie0">0</a>
+                            <a class="link" href="#partie0">0</a>
                         </li>
 
                         <li>
-                            <a class="link link--header" href="#partie1">1</a>
+                            <a class="link" href="#partie1">1</a>
                         </li>
                         <li>
-                            <a class="link link--header" href="#partie2">2</a>
+                            <a class="link" href="#partie2">2</a>
                         </li>
 
                         <li>
-                            <a class="link link--header" href="#partie3">3</a>
+                            <a class="link" href="#partie3">3</a>
                         </li>
                         <li>
-                            <a class="link link--header" href="#partie4">4</a>
+                            <a class="link" href="#partie4">4</a>
                         </li>
                         <li>
-                            <a class="link link--header" href="#partie5">5</a>
+                            <a class="link" href="#partie5">5</a>
                         </li>
                         <li>
-                            <a class="link link--header" href="#partie6">6</a>
+                            <a class="link" href="#partie6">6</a>
                         </li>
                         <li>
-                            <a class="link link--header" href="#partie7">7</a>
+                            <a class="link" href="#partie7">7</a>
                         </li>
                         <li>
-                            <a class="link link--header" href="#partie8">8</a>
+                            <a class="link" href="#partie8">8</a>
                         </li>
                         <li>
-                            <a class="link link--header" href="#partie9">9</a>
+                            <a class="link" href="#partie9">9</a>
                         </li>
                     </ul>
 
@@ -162,12 +165,12 @@
             repenser l’usage de la cour en proposant des moyens d’agencement. Pour réaliser cela, on a eu recours à
             notre stratégie d’apprentissage ! </p>
         <p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05  dgrid-start03 dgrid-end07 content__objet">
-            La fusion d'un <span class="highlight">travail collaboratif</span>, des travaux de recherches qui nous
+            La fusion d'un travail collaboratif, des travaux de recherches qui nous
             permettent d’aller découvrir le monde
-            extérieur et <span class="highlight">nos utilisateurs</span> et le travail pratique, ainsi que la partie
+            extérieur et nos utilisateurs et le travail pratique, ainsi que la partie
             individuelle pour mettre en œuvre notre
             site web, qui représente le fruit de notre travail. On réalisera alors notre étude de cas ! Notre
-            <span class="highlight">Case-study</span> pour
+            Case-study pour
             faire plus élégant.
         </p>
     </section>
@@ -176,14 +179,14 @@
                 class="number-nav">3 </span>Prémices
             bis</h2>
         <p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">La première étape à été
-            d'<span class="highlight">observer la
+            d'observer la
-                cour</span> afin d'avoir un visuel plus
+                cour afin d'avoir un visuel plus
             globale sur la cour.</p>
         <p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05"> Une fois terminé, la
             classe qui était bavarde se
             retrouve tout de suite dans un silence le plus total.
             J'écrivais beaucoup de questions que je pourrais poser au directeur. Seulement les questions n’ont pas
-            été posées dans un <span class="highlight">ordre précis.</span></p>
+            été posées dans un ordre précis.</p>
         <p class="mgrid-start02 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">Le directeur, celui qui
             était censé répondre à
             nos questions, a
@@ -212,10 +215,10 @@
             je suis partie du
             principe que je ne sais pas
             ce qu'il faut pour résoudre ce besoin. Même si nos futurs utilisateurs sont des élèves comme moi et mes
-            camarades, il est important de comprendre <span class="highlight">les utilisateurs, leurs
+            camarades, il est important de comprendre les utilisateurs, leurs
-                raisonnements</span> comment ils utilisent la cour, leur temps libre.</p>
+                raisonnements comment ils utilisent la cour, leur temps libre.</p>
         <p class="mgrid-start01 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05"> Et pour cela, on
-            prépare un <span class="highlight">guide d'entretien</span></p>
+            prépare un guide d'entretien</p>
         <details class="section__color--slot tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05" open="">
             <summary class="title__slot">Voici le guide d'entretiens en entier:</summary>
             <ul class="guide__liste">
@@ -265,16 +268,16 @@
             <summary class="title__slot">Réponses généralisé:</summary>
             <ul>
                 <li>Q : Que penses tu de l’HEAJ et de ses environnements ?</li>
-                <li>R : Les locaux sont mal indiqués, triste et <span class="highlight">manque de vie</span> dans
+                <li>R : Les locaux sont mal indiqués, triste et manque de vie dans
                     l’école</li>
                 <li>Q : Si tu devais améliorer une partie de l’école, laquelle serait-il ? Pourquoi ? Comment ?
                 </li>
-                <li>R : <span class="highlight">Plus de vert</span>, retravailler les extérieurs avec des jeux </li>
+                <li>R : Plus de vert, retravailler les extérieurs avec des jeux </li>
                 <li>Q : Dans quels endroits extérieur te sens-tu le mieux ? Pourquoi ? </li>
-                <li>R : Là, où il y a de la <span class="highlight">verdure</span> et <span class="highlight">de la
+                <li>R : Là, où il y a de la verdure et de la
-                        vie</span> en générale.</li>
+                        vie en générale.</li>
                 <li>Q : Si tu avais une baguette magique, que changerais-tu dans la cour ?</li>
-                <li>R : Des tables, du sport, <span class="highlight">de la verdure.</span></li>
+                <li>R : Des tables, du sport, de la verdure.</li>
                 <li>Q : Si ton dessin se réalisait, passerais-tu plus de temps dans la cour ?
                 </li>
                 <li>R : Oui principalement</li>
@@ -293,7 +296,7 @@
         <p class="mgrid-start01 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end03">Le résultat de
             interviews ont démontré que ce qui
             revenait souvent était la
-            volonté <span class="highlight">d’ajouter des verdures</span>, ainsi qu’un espace pour travailler. </p>
+            volonté d’ajouter des verdures, ainsi qu’un espace pour travailler. </p>
         <p class="mgrid-start02 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end03">Suite à cela, on
             pouvait choisir quel
             Top task nous intéressait le plus parmis celle qu'on aurait voté.</p>
@@ -382,7 +385,7 @@
             recherches et améliorations selon
             un ou des
             problème(s) trouvé(s), cela permet d’améliorer nos projets et de trouver une solution plus optimale pour le
-            projet. <span class="highlight">Slidez</span> pour naviguer dans les différentes situations</p>
+            projet. Slidez pour naviguer dans les différentes situations</p>
         <ul>
             <li class="slide"> <img class="image_slide" src="assets/images/user1.png"
                     alt="User journey réalisé sous forme d'une image d'un personnage 3D et de tableau expliquant le déroulement de l'étape"
@@ -419,7 +422,7 @@
                 decoding="async">
 
         </figure>
-        <figure class="img__content dgrid-start02 dgrid-end05">
+        <figure class="img__content dgrid-start02 dgrid-end04">
             <img class="image_sequence" src="assets/images/bancs.png" srcset="assets/images/bancs@2x.png 2x"
                 alt="Illustration 3D d'un banc formant un S fait de bois pour la surface du dessus et de pierres."
                 loading="lazy" decoding="async">
@@ -449,7 +452,7 @@
         <figure class="img__content dgrid-start02 dgrid-end05">
             <img class="image_sequence" src="assets/images/pneu.png" srcset="assets/images/pneu@2x.png 2x"
                 alt="Illustration 3D d'un gros pneu utilisé pour être assis dessus." loading="lazy"
-                decoding="async">grid-end06
+                decoding="async">
             <figcaption class="figcaption"> → Un gros pneu posé au sol et que l'ont peut tirer.
             </figcaption>
         </figure>
@@ -473,7 +476,7 @@
             en codant.</p>
         <p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end04">
             Tout d'abord il y a eu le burger menu. La navigation avait un fond bleu, et était placée de façon latérale,
-            sur le coté gauche du mobile. Mais en le <span class="highlight">testant </span>sur le téléphone, je me suis
+            sur le coté gauche du mobile. Mais en le testant sur le téléphone, je me suis
             bien vite rendue compte que ça n'était pas facile d'accéder aux différents liens avec une main.</p>
         <p class="dgrid-start02 dgrid-end05">On navigue très peu souvent sur un smartphone en ayant celui-çi posé sur un
             bureau. On ressent très vite le besoin de le maintenir en main pour avoir une libertée de controle. C'est