diff --git a/assets/Logo.webp b/assets/Logo.webp
new file mode 100644
index 0000000..b41191e
Binary files /dev/null and b/assets/Logo.webp differ
diff --git a/assets/bg.jpg b/assets/bg.jpg
new file mode 100644
index 0000000..2881970
Binary files /dev/null and b/assets/bg.jpg differ
diff --git a/assets/dust.webp b/assets/dust.webp
new file mode 100644
index 0000000..993f01e
Binary files /dev/null and b/assets/dust.webp differ
diff --git a/etoiles.png b/assets/etoiles.png
similarity index 100%
rename from etoiles.png
rename to assets/etoiles.png
diff --git a/fond.png b/assets/fond.png
similarity index 100%
rename from fond.png
rename to assets/fond.png
diff --git a/assets/foreground-back.webp b/assets/foreground-back.webp
new file mode 100644
index 0000000..2349c19
Binary files /dev/null and b/assets/foreground-back.webp differ
diff --git a/assets/foreground-front.webp b/assets/foreground-front.webp
new file mode 100644
index 0000000..d17a9b3
Binary files /dev/null and b/assets/foreground-front.webp differ
diff --git a/full.pdn b/assets/full.pdn
similarity index 100%
rename from full.pdn
rename to assets/full.pdn
diff --git a/assets/jax.webp b/assets/jax.webp
new file mode 100644
index 0000000..679763b
Binary files /dev/null and b/assets/jax.webp differ
diff --git a/assets/luna.webp b/assets/luna.webp
new file mode 100644
index 0000000..61a164d
Binary files /dev/null and b/assets/luna.webp differ
diff --git a/assets/manny.webp b/assets/manny.webp
new file mode 100644
index 0000000..c4e6a97
Binary files /dev/null and b/assets/manny.webp differ
diff --git a/personnage1.png b/assets/personnage1.png
similarity index 100%
rename from personnage1.png
rename to assets/personnage1.png
diff --git a/personnage2.png b/assets/personnage2.png
similarity index 100%
rename from personnage2.png
rename to assets/personnage2.png
diff --git a/personnage3.png b/assets/personnage3.png
similarity index 100%
rename from personnage3.png
rename to assets/personnage3.png
diff --git a/personnages.png b/assets/personnages.png
similarity index 100%
rename from personnages.png
rename to assets/personnages.png
diff --git a/photo.png b/assets/photo.png
similarity index 100%
rename from photo.png
rename to assets/photo.png
diff --git a/assets/rays.webp b/assets/rays.webp
new file mode 100644
index 0000000..0e345ae
Binary files /dev/null and b/assets/rays.webp differ
diff --git a/texte.png b/assets/texte.png
similarity index 100%
rename from texte.png
rename to assets/texte.png
diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..9698403
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="9.44" y1="9.43" x2="90.57" y2="90.57" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff001e"/>
+      <stop offset="0.49" stop-color="#d400cf"/>
+      <stop offset="1" stop-color="#004bff"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="Layer_1-2" data-name="Layer 1">
+      <g>
+        <path class="cls-1" d="M90.41,33.37V18.88C90.41,5.1,84.9,0,65.92,0H33.56c-18.55.1-24,5.13-24,19V33.37c0,7.75-3.16,10-9.59,10V56.63c6.53,0,9.59,2.25,9.59,10V81.12c0,13.65,5.42,18.78,24,18.88H65.92c19,0,24.49-5,24.49-19V66.63c0-7.75,3.16-10,9.59-10V43.37C93.47,43.37,90.41,41.12,90.41,33.37Z"/>
+        <g>
+          <path class="cls-2" d="M24.79,72.51h-11V26.67h11ZM25.12,48,37.49,26.67H49L36.17,47.24,50.26,72.51H37.56Z"/>
+          <path class="cls-2" d="M69.64,57.3h-5V72.51h-11V26.67H68.19c12.5,0,19.64,4.89,19.64,14.95C87.83,52.4,80.49,57.3,69.64,57.3ZM68.32,34.47H64.68V49.36h4c5,0,7.8-2.38,7.8-7.74C76.52,36.79,73.81,34.47,68.32,34.47Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/index.html b/index.html
index 4aa0e48..6dcd150 100644
--- a/index.html
+++ b/index.html
@@ -1,44 +1,659 @@
-<!DOCTYPE html>
-<html class="no-js">
-
-<head>
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <title>Charline Pasteur Avocate</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="stylesheet" href="./styles.css" />
-</head>
-
-<body>
-  <div class="navbar">
-    <input type="checkbox" id="menu-toggle">
-    <label for="menu-toggle" class="menu-icon">
-      <span></span>
-      <span></span>
-      <span></span>
-    </label>
-    <nav>
-      <a href="#about">Qui je suis</a>
-      <a href="#how">Ce que je fais</a>
-      <a href="#contact">Contact</a>
-    </nav>
-  </div>
-  <div class="wrapper">
-    <div class="parallax__group hero-container">
-      <div class="parallax__layer sky"></div>
-      <div class="parallax__layer bushes"></div>
-      <div class="parallax__layer water"></div>
-      <div class="parallax__layer people1"></div>
-      <!--<div class="parallax__layer people2"></div>
-        <div class="parallax__layer people3"></div>
-        <div></div>-->
-    </div>
-    <section id="about" class="parallax__group info-container">      
-    </section>
-    <section id="about"></section>
-    <section id="how"></section>
-    <section id="contact"></section>
-  </div>
-</body>
-
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo title here</title>   
+    <link href="./style.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="parallax">      
+      <header class="primary-header">
+        <div class="wrapper">
+          <div class="primary-header__inner">
+            <div class="logo">
+              <img src="./assets/Logo.webp" alt="" />
+            </div>
+            <nav class="primary-nav">
+              <ul role="list">
+                <li><a href="#">Why join us</a></li>
+                <li><a href="#">The founders</a></li>
+                <li><a href="#">Beta info</a></li>
+              </ul>
+            </nav>
+            <div class="flex-group" aria-label="social links">
+              <a href="#">X</a>
+              <a href="#">IG</a>
+              <a href="#">YT</a>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="hero">
+        <div class="wrapper">
+          <h1 class="hero__title">
+            <span>Charline Pasteur</span> Avocate spécialisé mineur
+          </h1>
+          <button class="button">contacter</button>
+        </div>
+      </div>
+
+      <img class="parallax__bg" src="./assets/bg.jpg" alt="" />
+      <img class="parallax__dust" src="./assets/dust.webp" alt="" />
+      <img
+        class="parallax__foreground-back"
+        src="./assets/foreground-back.webp"
+        alt=""
+      />
+      <img
+        class="parallax__foreground-front"
+        src="./assets/foreground-front.webp"
+        alt=""
+      />
+      <img class="parallax__jax" src="./assets/jax.webp" alt="" />
+      <img class="parallax__luna" src="./assets/luna.webp" alt="" />
+      <img class="parallax__manny" src="./assets/manny.webp" alt="" />
+      <img class="parallax__rays" src="./assets/rays.webp" alt="" />
+    </div>
+
+    <main class="main-content">
+      <div class="wrapper">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum nostrum
+          aspernatur nesciunt rem, officiis atque deserunt architecto excepturi
+          ducimus consectetur suscipit dolore sed tempora, assumenda corporis
+          eius quasi quas pariatur.
+        </p>
+        <p>
+          Sed minus alias quidem error fuga sint temporibus, accusamus totam!
+          Voluptates, deserunt? Dolore nulla iure asperiores quibusdam officia
+          pariatur deleniti aspernatur, assumenda numquam blanditiis cumque
+          voluptatem deserunt nesciunt, ea atque!
+        </p>
+        <p>
+          Dolor tenetur error similique, voluptatibus blanditiis deleniti
+          distinctio! Officia a, porro nobis provident illum deleniti nulla
+          consequuntur voluptatum enim repellat, architecto quas mollitia
+          consectetur assumenda rem magnam maiores ad nostrum.
+        </p>
+        <p>
+          Sequi laudantium quaerat necessitatibus voluptates voluptatem maiores
+          animi asperiores tempore error dolore minima autem modi esse sed et
+          pariatur quas, beatae fugit, earum eligendi tenetur! Doloremque
+          consequuntur voluptatem ratione fugiat.
+        </p>
+        <p>
+          Facilis voluptates necessitatibus, aspernatur deleniti nostrum porro
+          consequatur veniam eius aut nihil ut error quam, expedita ipsam dolore
+          ratione. Consequuntur culpa quasi quisquam quos magnam quibusdam vitae
+          asperiores eveniet quam.
+        </p>
+        <p>
+          Illo fuga, facilis cupiditate omnis, consequuntur quae maiores iure ab
+          perferendis obcaecati adipisci voluptatem hic nobis officiis fugit ut
+          voluptas enim? Distinctio, iusto aperiam. Aliquam vitae nobis eos ad
+          perspiciatis?
+        </p>
+        <p>
+          Recusandae quis vitae modi architecto magni error distinctio officiis
+          molestiae mollitia veniam! Cum qui provident sint laudantium
+          voluptatum accusantium debitis repudiandae? Sint laboriosam quis
+          veniam eum amet nesciunt earum perspiciatis?
+        </p>
+        <p>
+          Alias voluptate ad quasi ipsum mollitia optio dolore? Modi et
+          doloremque in harum ab hic, voluptatum odio molestias fuga quas
+          similique natus possimus libero voluptas distinctio beatae dignissimos
+          sunt deleniti.
+        </p>
+        <p>
+          Mollitia et atque impedit non sed, recusandae repudiandae, temporibus
+          ratione ipsam rem, aut consectetur maiores iusto praesentium fuga
+          cupiditate. Officiis assumenda atque saepe optio. Quod saepe et
+          temporibus officia iure?
+        </p>
+        <p>
+          Expedita quia doloremque pariatur natus optio vitae numquam
+          voluptatibus rem minima. In iusto cupiditate aspernatur, laboriosam
+          temporibus mollitia consequuntur veniam voluptatem earum saepe
+          delectus iure, quae maxime. Assumenda, facilis dolore?
+        </p>
+        <p>
+          Incidunt veritatis tempore, expedita, iure temporibus obcaecati
+          suscipit dolores quam nulla reiciendis esse architecto debitis quod
+          dolor maxime neque quas explicabo sed. Quo, corporis? Inventore,
+          ipsam. Quaerat temporibus consequatur beatae.
+        </p>
+        <p>
+          Dolores impedit ipsum facere rerum odio temporibus animi? Rerum eius
+          culpa dolores earum, officia consequatur quaerat pariatur cumque
+          natus, quia voluptatem eveniet doloremque deleniti quibusdam quam
+          impedit? Quam, nihil consequatur?
+        </p>
+        <p>
+          Vel assumenda sapiente numquam. Maxime, ducimus. Recusandae
+          reprehenderit nostrum molestias quia nam, natus aliquid ipsam magni
+          soluta beatae delectus expedita perspiciatis cupiditate iusto minima
+          maxime vitae, quo quos impedit culpa?
+        </p>
+        <p>
+          Quasi nostrum sit sed ducimus autem ab eos odit sunt, nemo libero,
+          quam doloribus laudantium maiores dignissimos veniam animi error.
+          Repellat doloremque nisi maiores voluptatibus animi blanditiis
+          similique repellendus eos.
+        </p>
+        <p>
+          Voluptatibus quo ut incidunt asperiores accusamus, vel deserunt totam
+          qui recusandae. Ipsam maxime omnis saepe dolor soluta tempora vel
+          illo, corporis culpa excepturi consequuntur nobis quaerat, dolorum
+          aliquid provident magni.
+        </p>
+        <p>
+          Quaerat dolores excepturi repudiandae nemo atque sapiente minus
+          nostrum neque cum illum, aspernatur voluptate autem recusandae officia
+          mollitia dolorem doloremque molestias accusantium aperiam at aliquam
+          error facilis alias. Non, dolor!
+        </p>
+        <p>
+          Officiis fugit neque nihil facilis quae molestiae dolor. Illum magnam
+          odit voluptatem quisquam provident illo architecto tenetur et,
+          praesentium sint omnis quod eum alias dolorum doloribus repellendus,
+          aperiam recusandae. Sunt!
+        </p>
+        <p>
+          Maiores, libero perferendis explicabo vel quibusdam laudantium a autem
+          velit, enim temporibus, adipisci inventore. Sapiente quibusdam officia
+          error porro animi nostrum, quam cum aliquid vel dolor, molestias quasi
+          temporibus nesciunt!
+        </p>
+        <p>
+          Dolor optio suscipit illum in, a laudantium consequatur vel incidunt
+          exercitationem, numquam, ratione beatae! Tempora autem porro obcaecati
+          inventore qui modi soluta veritatis nulla? Ut perferendis tempore
+          assumenda consequatur sint!
+        </p>
+        <p>
+          Dolore totam tempora aliquid praesentium qui soluta enim magnam.
+          Aperiam eum ut expedita distinctio amet veritatis iusto laboriosam
+          sapiente odio nostrum eius dignissimos, aliquid eveniet recusandae
+          corrupti ullam, debitis minus?
+        </p>
+        <p>
+          Illum, aperiam alias corrupti dicta nobis accusamus debitis enim
+          possimus accusantium quos modi odit eligendi dolores ut praesentium
+          explicabo a, repellat culpa cum ipsam porro earum quae. Hic, iste
+          odio.
+        </p>
+        <p>
+          Aliquid, vel esse delectus cupiditate obcaecati eum! Fugiat, aut
+          architecto vero, aperiam expedita nisi exercitationem harum reiciendis
+          placeat facilis cum, perspiciatis porro odit! Adipisci est asperiores
+          provident odio perspiciatis quam.
+        </p>
+        <p>
+          Facilis veritatis, aliquid sit itaque debitis veniam, aspernatur
+          deleniti beatae tempora a ut. Minima, doloremque aperiam? Doloremque
+          aspernatur impedit fuga sed nobis deserunt aliquid, atque amet, error
+          officiis molestias aperiam!
+        </p>
+        <p>
+          Doloribus suscipit magni voluptates facilis nam id possimus expedita
+          amet totam quis nisi adipisci praesentium sint quaerat, atque sit
+          nostrum eaque. Facere labore vero nulla tempora quod, modi repellat
+          deleniti!
+        </p>
+        <p>
+          Natus sunt pariatur enim explicabo expedita, magni temporibus vitae
+          distinctio nemo sint fugiat quis repudiandae, deserunt nulla officiis
+          facilis modi quo? Commodi qui veniam est nemo possimus distinctio,
+          libero molestias.
+        </p>
+        <p>
+          Nulla, velit magni cum expedita atque nisi quidem, accusamus similique
+          molestias repellat provident corporis tenetur optio. Tenetur,
+          repellendus, debitis at odio esse expedita commodi culpa quisquam,
+          libero velit sequi impedit?
+        </p>
+        <p>
+          Quidem quas amet reprehenderit dolore fugit asperiores ratione
+          nesciunt, culpa perferendis incidunt velit earum illo ea odio ad ex
+          quae! Doloremque animi eligendi quos culpa deleniti voluptatibus
+          nulla, odio harum.
+        </p>
+        <p>
+          Asperiores tempora corrupti omnis maiores eaque! Dolores quo deleniti
+          modi deserunt rerum officia. Fugit velit, deserunt autem maxime veniam
+          modi, quaerat eligendi, unde pariatur illo accusantium adipisci sunt
+          soluta ratione?
+        </p>
+        <p>
+          Ex obcaecati adipisci, a eos dignissimos quas labore in temporibus
+          quam. Animi assumenda a eaque sapiente esse deleniti sit non
+          accusamus, ab facilis eius magni voluptates natus sunt modi nostrum.
+        </p>
+        <p>
+          Consequatur rem architecto porro laboriosam, itaque earum ipsam quos,
+          consectetur eaque voluptatem quod ipsa eum accusantium! Voluptate
+          magni quas, temporibus cumque rerum sint necessitatibus atque eligendi
+          ex ut maiores veniam?
+        </p>
+        <p>
+          Praesentium at ex illum laboriosam, corporis eum nihil pariatur,
+          veniam consequuntur, eos nobis. Neque accusantium ducimus sit
+          molestias labore assumenda quae suscipit, vero, eius at maiores ipsam,
+          ipsa distinctio minus!
+        </p>
+        <p>
+          Odit itaque ullam iste minus modi quidem voluptas est a, quia nemo.
+          Voluptatibus recusandae quos nostrum sint nihil, consequatur, mollitia
+          laboriosam voluptatem dolores animi impedit! Libero quaerat minima
+          cumque nisi.
+        </p>
+        <p>
+          Aliquid eos, esse facilis temporibus voluptas facere mollitia hic
+          corrupti recusandae placeat delectus ab sunt sequi ipsam maiores
+          tenetur excepturi unde ut perspiciatis quibusdam laudantium nemo.
+          Libero nobis officia et.
+        </p>
+        <p>
+          Tempora non, enim cum harum nihil amet asperiores eius ut possimus
+          saepe culpa incidunt! Assumenda facilis blanditiis, eveniet porro
+          quisquam iste voluptas quae, ea, doloremque magni laudantium animi sit
+          nostrum?
+        </p>
+        <p>
+          Error labore est nemo eveniet placeat doloribus tempora odio eum,
+          voluptatibus assumenda provident amet alias facere ad harum vel, sit
+          perspiciatis, maxime quasi ut! Tempora est facilis tenetur possimus
+          enim!
+        </p>
+        <p>
+          Corrupti ab consequatur dolorem tempore libero neque placeat nisi enim
+          ipsam iusto eveniet voluptas odit ut, sapiente esse aspernatur, ad
+          cumque quibusdam, eum soluta? Delectus magnam asperiores molestias
+          voluptatem obcaecati.
+        </p>
+        <p>
+          Unde nulla alias iusto amet, voluptas similique id illum nesciunt
+          molestiae inventore non esse molestias iure quod rem suscipit facilis
+          ducimus exercitationem blanditiis est delectus, quisquam magnam.
+          Placeat, velit ipsam.
+        </p>
+        <p>
+          Facilis pariatur laudantium dignissimos, officiis sit quidem dolores.
+          Tempora voluptatem deserunt velit excepturi ratione accusamus nulla
+          autem. Blanditiis autem maxime, optio, cupiditate quae quisquam
+          consectetur labore nesciunt debitis ut totam?
+        </p>
+        <p>
+          Consectetur debitis exercitationem facere reiciendis ea corrupti
+          labore praesentium molestias repellat delectus, minima dolores
+          doloremque repellendus odit quia tempora maiores, temporibus eius
+          perferendis? Possimus ex illo earum cupiditate, ratione excepturi?
+        </p>
+        <p>
+          Ea id quidem culpa laborum ad molestias iure ipsa fuga, eius
+          laboriosam praesentium, possimus ratione quibusdam repellendus ducimus
+          adipisci error rerum quos veniam? Maiores voluptatem reiciendis, earum
+          vitae nisi illo.
+        </p>
+        <p>
+          Fugit magnam dolorem nobis quisquam velit, sapiente ut quia molestias,
+          voluptas rem corporis eligendi vero explicabo corrupti voluptatem modi
+          fugiat saepe quaerat! Non sapiente provident inventore corporis
+          nesciunt in tenetur!
+        </p>
+        <p>
+          Voluptatum, quo dolorem. Similique, hic eligendi cupiditate laudantium
+          minus doloremque deleniti ipsum iusto quia iste? Laborum dolor rerum
+          asperiores quo quas accusamus quibusdam atque cum aut! Perspiciatis
+          laboriosam voluptates et.
+        </p>
+        <p>
+          Dicta, explicabo. Esse tenetur obcaecati hic iusto quasi aperiam eius
+          quod distinctio nesciunt nulla! Maiores officia numquam debitis
+          quisquam amet, odio hic illum corporis quidem cupiditate iste sit,
+          aspernatur sunt!
+        </p>
+        <p>
+          Odio veritatis quia sint aut rem quidem veniam quos dolores eos
+          distinctio quas dignissimos voluptatum nam, consequatur, ullam
+          blanditiis assumenda laudantium. Vitae quam exercitationem minus
+          consectetur quasi eaque, doloremque totam.
+        </p>
+        <p>
+          Quidem blanditiis at, suscipit incidunt eligendi aliquam placeat
+          aperiam vitae quam nam quis distinctio iste quod? Voluptatibus, autem
+          atque veritatis, deserunt in error unde porro, est eos sit nihil odit?
+        </p>
+        <p>
+          Ipsa quidem dolorum iusto porro natus consectetur vitae facere amet
+          corrupti nemo quia adipisci nobis, praesentium delectus voluptatum
+          dolores, minus possimus alias odit! Dolorum laboriosam, voluptatum
+          tempore neque eos reiciendis.
+        </p>
+        <p>
+          Aut impedit ipsum molestiae ducimus nihil aliquid. Nihil rerum
+          architecto amet quisquam maxime alias, dolore porro officia labore,
+          saepe recusandae delectus dolorum earum maiores error sapiente,
+          eveniet consectetur. Beatae, nisi.
+        </p>
+        <p>
+          Quia reiciendis rem eius eos ratione quis itaque fugiat dolore in
+          magnam? Mollitia excepturi, fuga eum optio, sunt et a soluta ex cum
+          tempore odit, atque minus rem aspernatur beatae?
+        </p>
+        <p>
+          Ut minima, eius nobis aspernatur iure unde beatae nostrum totam! Nihil
+          in voluptatum voluptas necessitatibus, quaerat amet quibusdam. Quis,
+          numquam! Numquam, sed magni? Aliquam hic in, earum voluptatum officia
+          quis.
+        </p>
+        <p>
+          Consequatur explicabo dignissimos natus dolor accusamus atque quia cum
+          autem aliquam. Eligendi aliquid mollitia, voluptas possimus sit ipsa
+          fugiat inventore? In quo aliquid officiis et incidunt, harum libero a
+          necessitatibus.
+        </p>
+        <p>
+          Saepe beatae illo nam hic optio. Et consectetur, modi unde ducimus
+          corporis animi nam repudiandae voluptates aut ratione, odio eveniet
+          quam ea? Sapiente, quos? At illo facere quod maiores provident?
+        </p>
+        <p>
+          Dolorum incidunt provident cumque veritatis, pariatur dolor dolore
+          deleniti dicta. Maiores laborum iusto ullam dolorem qui ipsum, beatae
+          laboriosam placeat dolores? Expedita, eos ut tempora nam commodi
+          quibusdam earum est!
+        </p>
+        <p>
+          Veniam quidem mollitia consequatur ullam velit ratione nostrum dolorum
+          dolores quos. Dicta dolorum quae perspiciatis, autem repellat itaque
+          praesentium amet possimus quaerat quis quisquam adipisci cumque
+          officiis voluptatem in exercitationem.
+        </p>
+        <p>
+          Eligendi beatae cupiditate perspiciatis at inventore blanditiis et
+          itaque facere. Tenetur pariatur blanditiis recusandae, debitis,
+          assumenda consequuntur molestias beatae quae quibusdam ipsum aliquam
+          nam eaque ut id molestiae iusto deserunt.
+        </p>
+        <p>
+          Dolorum optio itaque officiis at, ex, illum nam earum dolor architecto
+          beatae inventore similique, laborum atque modi! Quae sed debitis
+          repellat possimus odit quis amet. Itaque modi numquam consectetur
+          deserunt!
+        </p>
+        <p>
+          Sapiente provident aspernatur, assumenda maiores cumque suscipit ipsam
+          sit dolores cum architecto dolore numquam sunt doloribus. Eaque
+          expedita, aliquid quas impedit doloribus harum! Perferendis error
+          labore magnam nihil. Quas, assumenda?
+        </p>
+        <p>
+          Maiores quia reiciendis aliquid fuga laudantium, nesciunt laboriosam
+          soluta repudiandae ea ratione enim mollitia eaque eum sed autem porro
+          omnis! Veniam voluptatum, delectus ullam quod numquam enim dolor
+          blanditiis ut!
+        </p>
+        <p>
+          Accusamus inventore rem perferendis eligendi autem laudantium ab
+          veniam facere, accusantium, alias eum eaque commodi sapiente.
+          Blanditiis, voluptatibus natus? Atque sapiente distinctio voluptatum
+          earum! Quidem laboriosam id odio nisi necessitatibus.
+        </p>
+        <p>
+          Itaque, earum nihil? Repudiandae quod dolorem modi tempora corporis,
+          vel ut, soluta sapiente ipsam optio animi ea harum illum totam
+          molestiae voluptatibus nesciunt ipsum unde sunt autem perspiciatis
+          vero voluptatum!
+        </p>
+        <p>
+          Sed amet ducimus provident, nemo eos cumque nihil harum commodi quae
+          placeat deleniti ad animi atque reiciendis ex minima temporibus soluta
+          neque rem enim culpa earum? Hic modi eos corrupti!
+        </p>
+        <p>
+          Quam minima error at eos repellat? Quos doloribus tempora animi unde
+          inventore voluptatibus, harum tenetur numquam exercitationem
+          dignissimos praesentium, magnam aut nisi libero molestiae totam
+          perspiciatis iure natus corrupti obcaecati!
+        </p>
+        <p>
+          Soluta, laboriosam! Quos veniam possimus labore distinctio,
+          voluptatibus corrupti minima quia reiciendis optio! Praesentium velit
+          repudiandae rerum error nemo odit, quis aperiam reprehenderit ab nihil
+          totam accusamus quisquam sunt provident?
+        </p>
+        <p>
+          Totam ipsum corporis quidem iusto fuga, laborum at reiciendis quos
+          officiis laudantium a et. Ratione, animi ut tempora, aliquam vero
+          reprehenderit officia fuga distinctio sint natus eligendi. Quos,
+          inventore nihil.
+        </p>
+        <p>
+          Minus, qui molestias eos eaque nemo placeat dolores cumque accusamus
+          accusantium laborum dolor itaque dignissimos quae rem facere nihil
+          provident rerum error ex ut ab asperiores amet. Veniam, sapiente
+          culpa.
+        </p>
+        <p>
+          Amet ipsa non quibusdam nesciunt possimus accusamus quo veritatis
+          aperiam accusantium distinctio nisi vel, illum unde cum est harum
+          tempora ut quisquam quod ducimus? Ipsam quam exercitationem iure fugit
+          asperiores.
+        </p>
+        <p>
+          Illum, ducimus cumque consectetur eius distinctio labore assumenda
+          illo similique! Quibusdam architecto non ea dolorem repudiandae.
+          Dolores laudantium eligendi vero laboriosam, corporis quos, nemo fuga
+          repellat nulla sunt nihil minus!
+        </p>
+        <p>
+          Eius minus fugit, quasi architecto nesciunt reiciendis eum recusandae
+          dignissimos nulla iusto enim quibusdam perferendis? Ullam beatae ab
+          incidunt tenetur numquam voluptates alias velit est eius at? Fugit,
+          repellendus laborum.
+        </p>
+        <p>
+          Perspiciatis itaque ea odio magni soluta repellat non aut, esse
+          voluptatibus pariatur vero, autem quis ut adipisci maiores? Velit
+          fugiat ea iusto praesentium cupiditate! Assumenda distinctio aliquam
+          error excepturi quos.
+        </p>
+        <p>
+          Reiciendis ducimus dignissimos delectus assumenda ipsa laudantium,
+          inventore, placeat excepturi laboriosam odio eius officiis neque
+          velit, porro qui omnis soluta blanditiis nihil id officia minima
+          expedita laborum esse? Inventore, voluptate.
+        </p>
+        <p>
+          Quo, voluptate possimus ea ratione quidem ad accusamus. Alias cum
+          itaque perspiciatis et, asperiores debitis ratione delectus earum
+          accusamus distinctio doloribus incidunt corrupti quia voluptatum
+          reprehenderit autem nemo! Asperiores, aspernatur.
+        </p>
+        <p>
+          Qui unde impedit aliquid voluptas, obcaecati nihil necessitatibus
+          cumque corrupti harum accusantium tenetur ad eveniet repudiandae quam
+          facere eius est laudantium! Ea sit eaque fugit, dolores accusamus vero
+          soluta provident.
+        </p>
+        <p>
+          Natus, sapiente maxime aliquid modi velit quisquam ullam, vero sunt
+          minus cum sequi distinctio quia dolores possimus. Earum quae quibusdam
+          debitis porro, minima incidunt, eius deleniti, delectus repellat
+          architecto eligendi.
+        </p>
+        <p>
+          Voluptate eaque tenetur autem perferendis deleniti optio error
+          sapiente perspiciatis minus, quidem minima, recusandae illum unde
+          animi in, corrupti assumenda cum eos numquam sit nemo praesentium.
+          Nostrum modi ipsam vero?
+        </p>
+        <p>
+          Perferendis, atque sit. Cupiditate perferendis temporibus vel?
+          Excepturi commodi magnam doloribus, repellat numquam, aperiam ad
+          quisquam est dolorem earum veniam labore nesciunt. Dicta dolorum quam
+          quaerat eos nostrum voluptatem quae.
+        </p>
+        <p>
+          Nisi ab odio quia natus culpa maxime nulla provident illum ipsa iure
+          est, fugiat accusantium ipsum cumque quasi enim molestias deleniti
+          quidem adipisci possimus velit veniam voluptas laboriosam. Incidunt,
+          earum.
+        </p>
+        <p>
+          Iste rem, ullam labore iusto quo eligendi deserunt assumenda omnis
+          corporis earum. Odio laboriosam at harum eaque dolore velit quis
+          voluptates similique sint perferendis, earum illum corporis voluptas,
+          voluptatibus debitis.
+        </p>
+        <p>
+          Unde nam quisquam saepe impedit tempore laudantium omnis perferendis
+          placeat ex! Qui quos eos cupiditate placeat eius recusandae veritatis
+          facere ea, quam reiciendis consectetur ut eum enim, voluptate adipisci
+          quae!
+        </p>
+        <p>
+          Magni, fugit saepe autem dignissimos obcaecati hic dolorum sed.
+          Doloribus eligendi soluta sit dolores quae earum quo velit minima
+          voluptatem. Tempora dicta architecto soluta, corrupti quam culpa
+          praesentium incidunt fugiat?
+        </p>
+        <p>
+          Ipsam tenetur vitae totam neque quam! Assumenda quaerat laboriosam
+          atque voluptate ipsum labore totam perferendis nam numquam tempora
+          pariatur, amet error quidem quisquam iure ex, vero rem? Quisquam, fuga
+          quidem!
+        </p>
+        <p>
+          Autem similique porro reiciendis fugiat perspiciatis ducimus ipsum et
+          esse ratione voluptate exercitationem doloremque amet corporis
+          consequuntur tenetur animi veniam perferendis vitae, ea, sunt illo!
+          Facilis qui ut assumenda officia!
+        </p>
+        <p>
+          Cum, ratione incidunt. Libero repudiandae cum alias minus sit cumque,
+          assumenda beatae, distinctio enim aperiam aut illum voluptas neque
+          veniam aliquid? Ullam perferendis, neque voluptates assumenda tempora
+          repellendus voluptatibus explicabo.
+        </p>
+        <p>
+          Quas quos aut, in a eum beatae impedit, deserunt dolor tempora quae
+          nam iste aspernatur voluptas ut nihil sunt officiis repudiandae
+          recusandae rem saepe, asperiores hic! Cupiditate quidem eos velit.
+        </p>
+        <p>
+          Animi, quaerat consectetur quo aliquid rerum possimus, fugiat ad
+          maiores fuga explicabo eaque ducimus. Quibusdam quos excepturi
+          doloremque a voluptate, tempora beatae blanditiis, pariatur adipisci
+          harum ipsa expedita, ipsam alias!
+        </p>
+        <p>
+          Quae pariatur quam libero non repellendus animi sed, labore sint nisi
+          vel tempora velit dolorem distinctio veritatis suscipit molestias
+          dolor deserunt cum sequi eum ad? Vel reprehenderit ea deleniti earum.
+        </p>
+        <p>
+          Quae fugit iure totam repellendus, facilis reiciendis laborum quaerat
+          praesentium dolores quasi! Pariatur praesentium, blanditiis in nam
+          placeat corporis culpa provident? Sunt repellendus perspiciatis quia
+          minima nihil sit fuga optio!
+        </p>
+        <p>
+          Est provident maxime et architecto reprehenderit a fugit placeat
+          veritatis, distinctio quibusdam illo facere, in laudantium minima
+          labore aperiam rem numquam molestiae mollitia expedita doloribus,
+          temporibus excepturi. Est, sed odio!
+        </p>
+        <p>
+          Ad nihil quas placeat est obcaecati veniam dolore ipsum aliquid
+          corporis reprehenderit soluta voluptatum odit repellat earum
+          voluptatem dicta laudantium autem quis quod, officia impedit nemo
+          cupiditate natus? Sequi, suscipit!
+        </p>
+        <p>
+          Tempora consequuntur est autem tempore maiores eius? Ratione nihil
+          esse architecto deserunt laudantium odio corrupti provident veritatis,
+          officia similique minima sit facere temporibus porro facilis quis
+          distinctio, tenetur neque maiores?
+        </p>
+        <p>
+          Praesentium odit facilis optio numquam, libero necessitatibus maiores
+          rem obcaecati ex ea consequatur laborum possimus! Quasi aut libero ad
+          commodi nisi beatae, a illo neque, cumque nam consectetur!
+          Consectetur, ut.
+        </p>
+        <p>
+          Magnam enim perferendis odit doloremque, provident ipsum laudantium
+          exercitationem minima voluptatibus et natus delectus recusandae quam
+          eligendi assumenda velit nam. Quae harum iusto, excepturi quibusdam
+          provident nulla culpa saepe velit.
+        </p>
+        <p>
+          Hic molestias quos accusamus ea. Quae ullam repellendus voluptates
+          repellat at quibusdam sed laudantium recusandae? Dolore placeat itaque
+          tempora velit facere similique numquam consequatur esse alias? Eius
+          sit quos facere.
+        </p>
+        <p>
+          Adipisci numquam corporis doloremque velit similique suscipit delectus
+          eligendi vero optio illo fugit sapiente at vitae ullam nam qui
+          praesentium, architecto autem laudantium quisquam. Laudantium maxime
+          iusto eum sunt iure?
+        </p>
+        <p>
+          Sint, possimus deleniti ipsum repudiandae praesentium rerum dolorem
+          totam pariatur facilis eos culpa animi cum dolorum excepturi ipsam
+          iusto dolor beatae. Minima, nesciunt repellendus! Velit, illo
+          blanditiis. Recusandae, asperiores explicabo.
+        </p>
+        <p>
+          Facere aperiam dolore, officiis repudiandae repellendus asperiores
+          nihil eum nam quae. Earum recusandae incidunt dolorem praesentium
+          maiores dignissimos ullam, nobis minima et ex, quaerat cum nulla
+          nesciunt sit temporibus. Fugiat!
+        </p>
+        <p>
+          Quidem commodi dolorem ipsum architecto modi veritatis rem excepturi
+          tenetur iste? Error exercitationem doloribus nulla obcaecati quam
+          quaerat rem quibusdam magnam sint similique quia reprehenderit iure
+          nisi, accusantium distinctio est.
+        </p>
+        <p>
+          Sequi animi nemo veniam adipisci laudantium? Aut possimus quis rerum
+          consectetur animi laborum, deleniti a quidem distinctio officia quam.
+          In corporis modi accusantium perferendis eveniet aliquam ducimus ab
+          velit amet.
+        </p>
+        <p>
+          Culpa molestiae, perferendis numquam beatae explicabo provident
+          corporis fugiat neque, expedita mollitia excepturi, quis aut ipsam?
+          Possimus accusantium ratione blanditiis quidem, explicabo vel et fugit
+          fuga excepturi quo tempora! Nulla.
+        </p>
+        <p>
+          Ipsa ipsam aliquid doloribus! Sunt natus, quod earum autem dignissimos
+          blanditiis corporis tempore, odio, deleniti provident ea illo commodi
+          consectetur. Dicta quaerat nostrum odio maxime ut ducimus corrupti
+          quos eaque.
+        </p>
+        <p>
+          Deleniti ipsam, dicta numquam dolore rem magni, porro tempora fuga
+          quibusdam voluptatibus quae labore quaerat nisi necessitatibus optio
+          asperiores alias consequuntur! Laborum possimus quidem vel! Facilis
+          perspiciatis obcaecati nam cumque?
+        </p>
+        <p>
+          Libero soluta quos illo, quisquam doloribus architecto reiciendis
+          consectetur doloremque similique provident cumque sunt totam nisi
+          quam, ab earum veniam fugiat! Consectetur, doloremque? Corrupti
+          quibusdam explicabo quod. Est, sint voluptatum.
+        </p>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..75d740e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,194 @@
+.parallax {
+  /* overflow: hidden; */
+  position: relative;
+  z-index: 0;
+  min-height: 75vh;
+  display: grid;
+  grid-template-areas: "stack";
+}
+
+.parallax > * {
+  grid-area: stack;
+  animation: parallax linear;
+  animation-timeline: scroll();
+}
+
+.parallax > img {
+  width: 100%;
+}
+
+.primary-header,
+.hero {
+  --parallax-speed: 10;
+  z-index: 10;
+}
+
+.parallax__bg {
+  --parallax-speed: -10;
+
+  z-index: 1;
+  min-height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+.parallax__dust {
+  --parallax-speed: -20;
+  z-index: 2;
+}
+
+.parallax__luna {
+  --parallax-speed: 50;
+  z-index: 3;
+}
+
+.parallax__manny {
+  --parallax-speed: 30;
+  z-index: 4;
+}
+
+.parallax__jax {
+  --parallax-speed: 10;
+  z-index: 5;
+}
+
+.parallax__rays {
+  --parallax-speed: 50;
+  z-index: 3;
+}
+
+.parallax__foreground-front,
+.parallax__foreground-back {
+  z-index: 999;
+  align-self: end;
+}
+
+.parallax__foreground-back {
+  transform: scaleY(1.2);
+  transform-origin: bottom;
+  mix-blend-mode: hard-light;
+}
+
+.main-content {
+  position: relative;
+  /* z-index: 1; */
+  background: hsl(238, 100%, 6%);
+  padding-block: 6rem;
+}
+
+@keyframes parallax {
+  to {
+    transform: 
+      translateY(calc(var(--parallax-speed) * 200px));
+  }
+}
+
+/* general styling */
+
+html {
+  color-scheme: normal;
+}
+
+body {
+  margin: 0;
+  font-family: "Rubik", sans-serif;
+  font-size: 1.25rem;
+  font-weight: 700; /* for demo only */
+  text-transform: uppercase; /* for demo only */
+  min-height: 300vh; /* for demo only */
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+.wrapper {
+  width: min(65rem, 100% - 4rem);
+  margin-inline: auto;
+}
+
+.flex-group {
+  display: flex;
+  gap: 1rem;
+}
+
+.button {
+  font: inherit;
+  font-style: italic;
+  text-transform: uppercase;
+  background: rgb(227, 195, 14);
+  padding: 1em 2em;
+  border: 0;
+  border-radius: 0.125em;
+}
+
+.primary-header {
+  padding-block: 2rem;
+}
+
+.primary-header__inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.primary-nav ul {
+  flex: 1;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.primary-nav a {
+  color: white;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.logo {
+  max-width: 100px;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -3rem;
+    z-index: -1;
+    background: radial-gradient(hsl(0 0% 100% / 0.5), transparent 70%);
+  }
+}
+
+.hero {
+  margin-block-start: max(20vh, 8rem);
+}
+
+.hero__title {
+  font-size: 6rem;
+  max-width: 10ch;
+  line-height: 1;
+  font-style: italic;
+  font-weight: 900;
+  position: relative;
+
+  > span {
+    font-style: normal;
+    font-size: 0.5em;
+    display: block;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: black;
+    z-index: -1;
+    scale: 2;
+    opacity: 0.5;
+    filter: blur(5rem);
+    translate: -50%;
+  }
+}
diff --git a/styles copy.css b/styles copy.css
deleted file mode 100644
index dbdb209..0000000
--- a/styles copy.css	
+++ /dev/null
@@ -1,171 +0,0 @@
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  color: black;
-  background-color: #FFEDE5;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: 700;
-  overflow-x: hidden;
-  /* Empêche le scroll horizontal */
-}
-
-.navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background-color: white;
-  height: 4rem;
-  z-index: 1000;
-}
-
-nav {
-  float: right;
-  background-color: transparent;
-  height: 100%;
-}
-
-nav a {
-  display: inline-block;
-  color: rgb(227, 195, 14);
-  padding: 18px 12px;
-  text-decoration: none;
-  transition: ease-in .3s;
-}
-
-nav a:hover {
-  color: white;
-  background: #6aa9e895;
-  cursor: pointer;
-}
-
-.wrapper {
-  padding-top: 12rem;
-  height: 100vh;
-  overflow-x: hidden;
-  overflow-y: auto;
-  perspective: 300px;
-  width: 100vw;
-  /* Force la largeur du viewport */
-  overflow-x: hidden;
-}
-
-.parallax__group {
-  position: relative;
-  height: 100vh;
-  width: 100vw;
-  transform-style: preserve-3d;
-}
-
-.parallax__layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.sky {
-  background-color: white;
-  background: url('fond.png') no-repeat;
-  background-size: contain;
-  transform: translateZ(-600px) scale(3);
-  z-index: 1;
-}
-
-.bushes {
-  background: url('etoiles.png') no-repeat;
-  background-size: contain;
-  transform: translateZ(-525px) scale(2.75);
-  z-index: 2;
-}
-
-.water {
-  background: url('texte.png') no-repeat;
-  background-size: contain;
-  transform: translateZ(-400px) scale(2.33333333);
-  z-index: 3;
-}
-
-.people1 {
-  background: url("personnages.png") no-repeat;
-  background-size: contain;
-  transform: translateZ(-250px) scale(1.833333333);
-  z-index: 4;
-}
-
-.info-container {
-  background-color: #FFEDE5;
-}
-
-/* Style du menu hamburger */
-.menu-icon {
-  display: none;
-  /* Caché par défaut */
-  flex-direction: column;
-  cursor: pointer;
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  z-index: 1001;
-}
-
-.menu-icon span {
-  background: rgb(227, 195, 14);
-  display: block;
-  height: 3px;
-  width: 25px;
-  margin: 5px 0;
-  transition: 0.3s;
-}
-
-/* Masquer la case à cocher */
-#menu-toggle {
-  display: none;
-}
-
-
-@media screen and (min-width:760px) {
-  .sky,
-  .bushes,
-  .water,
-  .people1 {
-    background-size: contain;
-    /* Remplit toute la largeur */
-    /*background-position: center; Centre les images */
-  }
-}
-
-@media screen and (max-width: 760px) {
-  .menu-icon {
-    display: flex;
-  }
-
-  nav {
-    display: none;
-    flex-direction: column;
-    position: absolute;
-    top: 4rem;
-    left: 0;
-    width: 100%;
-    background: white;
-    text-align: center;
-  }
-
-  /* Quand la case est cochée, afficher le menu */
-  #menu-toggle:checked+.menu-icon+nav {
-    display: flex;
-  }
-
-  nav a {
-    padding: 15px;
-    display: block;
-  }
-}
diff --git a/styles.css b/styles.css
deleted file mode 100644
index adf53ff..0000000
--- a/styles.css
+++ /dev/null
@@ -1,239 +0,0 @@
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  color: black;
-  background-color: #FFEDE5;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: 700;
-  overflow-x: hidden;
-  /* Empêche le scroll horizontal */
-}
-
-/*.navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background-color: #d4af37; 
-  height: 4rem;
-  z-index: 1000;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre portée pour donner de la profondeur 
-}
-
-nav a {
-  display: inline-block;
-  color: white; /* Couleur du texte 
-  padding: 18px 12px;
-  text-decoration: none;
-  transition: ease-in .3s;
-}
-
-nav a:hover {
-  color: #d4af37; /* Couleur dorée au survol 
-  background-color: white; /* Fond blanc au survol 
-}*/
-
-.navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background-color: white;
-  height: 4rem;
-  z-index: 1000;
-  overflow: hidden; /* Pour s'assurer que le pseudo-élément reste à l'intérieur */
-}
-
-nav {
-  float: right;
-  background-color: transparent;
-  height: 100%;
-}
-
-nav a {
-  display: inline-block;
-  color: rgb(227, 195, 14);
-  padding: 18px 12px;
-  text-decoration: none;
-  transition: ease-in .3s;
-  font-size: 2rem; /* Augmente la taille de la police */
-  /*font-family: Arial, Helvetica, sans-serif;  Utilise Arial comme police principale */
-  font-family: 'Times New Roman', Times, serif; /* Utilise Times New Roman comme police principale */
-
-}
-
-nav a:hover {
-  color: black;
-  cursor: pointer;
-}
-
-.wrapper {
-  padding-top: 12rem;
-  height: 100vh;
-  overflow-x: hidden;
-  overflow-y: auto;
-  perspective: 300px;
-  width: 100vw;
-  /* Force la largeur du viewport */
-  overflow-x: hidden;
-}
-
-.parallax__group {
-  position: relative;
-  height: 100vh;
-  width: 100vw;
-  transform-style: preserve-3d;
-}
-
-.parallax__layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.sky {
-  background-color: white;
-  background: url('fond.png') no-repeat;
-  background-size: contain;
-  transform: translateZ(-600px) scale(3);
-  z-index: 1;
-}
-
-.bushes {
-  background: url('etoiles.png') no-repeat;
-  background-size: contain;
-  transform: translateZ(-525px) scale(2.75);
-  z-index: 2;
-}
-
-.water {
-  background: url('texte.png') no-repeat;
-  background-size: contain;
-  transform: translateZ(-400px) scale(2.33333333);
-  z-index: 3;
-}
-
-.people1 {
-  background: url("personnages.png") no-repeat;
-  background-size: contain;
-  transform: translateZ(-250px) scale(1.833333333);
-  z-index: 4;
-}
-
-.info-container {
-  background-color: #FFEDE5;
-}
-
-/* Style du menu hamburger */
-.menu-icon {
-  display: none;
-  /* Caché par défaut */
-  flex-direction: column;
-  cursor: pointer;
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  z-index: 1001;
-}
-
-.menu-icon span {
-  background: rgb(227, 195, 14);
-  display: block;
-  height: 3px;
-  width: 25px;
-  margin: 5px 0;
-  transition: 0.3s;
-}
-
-/* Masquer la case à cocher */
-#menu-toggle {
-  display: none;
-}
-
-.info-container {
-  display: flex; /* Utilise flexbox pour aligner le contenu */
-  align-items: center; /* Centre verticalement le contenu */
-  padding: 2rem; /* Espace autour du contenu */
-  background-color: rgba(255, 237, 229, 0.8); /* Fond légèrement coloré */
-}
-
-.about-content {
-  display: flex; /* Utilise flexbox pour le contenu de l'à propos */
-  width: 100%; /* Prend toute la largeur */
-  max-width: 1200px; /* Limite la largeur maximale */
-  margin: 0 auto; /* Centre le contenu */
-}
-
-.about-image {
-  flex: 1; /* Prend un espace flexible */
-  text-align: center; /* Centre l'image horizontalement */
-  padding-right: 1rem; /* Espace entre l'image et le texte */
-}
-
-.about-image img {
-  width: 80%; /* Ajuste la taille de l'image */
-  max-width: 300px; /* Largeur maximale pour l'image */
-  border-radius: 15px; /* Bords arrondis */
-  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); /* Halo lumineux */
-}
-
-.about-text {
-  flex: 2; /* Prend un espace flexible */
-  color: black; /* Couleur du texte */
-}
-
-.about-text h2 {
-  font-size: 2rem; /* Taille de la police pour le titre */
-  margin-bottom: 1rem; /* Espace sous le titre */
-}
-
-.about-text p {
-  font-size: 1rem; /* Taille de la police pour le texte */
-}
-
-@media screen and (min-width:761px) {
-  .sky,
-  .bushes,
-  .water,
-  .people1 {
-    background-size: contain;
-    /* Remplit toute la largeur */
-    /*background-position: center; Centre les images */
-  }
-}
-
-@media screen and (max-width: 760px) {
-  .menu-icon {
-    display: flex;
-  }
-
-  nav {
-    display: none;
-    flex-direction: column;
-    position: absolute;
-    top: 4rem;
-    left: 0;
-    width: 100%;
-    background: white;
-    text-align: center;
-  }
-
-  /* Quand la case est cochée, afficher le menu */
-  #menu-toggle:checked+.menu-icon+nav {
-    display: flex;
-  }
-
-  nav a {
-    padding: 15px;
-    display: block;
-  }
-}