diff --git a/assets/Logo.webp b/assets/Logo.webp
deleted file mode 100644
index b41191e..0000000
Binary files a/assets/Logo.webp and /dev/null differ
diff --git a/assets/bg.jpg b/assets/bg.jpg
deleted file mode 100644
index 2881970..0000000
Binary files a/assets/bg.jpg and /dev/null differ
diff --git a/assets/dust.webp b/assets/dust.webp
deleted file mode 100644
index 993f01e..0000000
Binary files a/assets/dust.webp and /dev/null differ
diff --git a/assets/etoiles.png b/assets/etoiles.png
deleted file mode 100644
index 242e84c..0000000
Binary files a/assets/etoiles.png and /dev/null differ
diff --git a/assets/fond.png b/assets/fond.png
deleted file mode 100644
index 0794998..0000000
Binary files a/assets/fond.png and /dev/null differ
diff --git a/assets/foreground-back.webp b/assets/foreground-back.webp
deleted file mode 100644
index 2349c19..0000000
Binary files a/assets/foreground-back.webp and /dev/null differ
diff --git a/assets/foreground-front-2.webp b/assets/foreground-front-2.webp
deleted file mode 100644
index 5d99c3a..0000000
Binary files a/assets/foreground-front-2.webp and /dev/null differ
diff --git a/assets/foreground-front.webp b/assets/foreground-front.webp
deleted file mode 100644
index d17a9b3..0000000
Binary files a/assets/foreground-front.webp and /dev/null differ
diff --git a/assets/img/accueil.jpg b/assets/img/accueil.jpg
new file mode 100644
index 0000000..c5706b0
Binary files /dev/null and b/assets/img/accueil.jpg differ
diff --git a/assets/img/logo.jpg b/assets/img/logo.jpg
new file mode 100644
index 0000000..f284696
Binary files /dev/null and b/assets/img/logo.jpg differ
diff --git a/assets/img/logo.png b/assets/img/logo.png
new file mode 100644
index 0000000..93d50ee
Binary files /dev/null and b/assets/img/logo.png differ
diff --git a/assets/jax.webp b/assets/jax.webp
deleted file mode 100644
index 679763b..0000000
Binary files a/assets/jax.webp and /dev/null differ
diff --git a/assets/logo1cp.png b/assets/logo1cp.png
deleted file mode 100644
index 2eeb2cb..0000000
Binary files a/assets/logo1cp.png and /dev/null differ
diff --git a/assets/luna.webp b/assets/luna.webp
deleted file mode 100644
index 61a164d..0000000
Binary files a/assets/luna.webp and /dev/null differ
diff --git a/assets/manny.webp b/assets/manny.webp
deleted file mode 100644
index c4e6a97..0000000
Binary files a/assets/manny.webp and /dev/null differ
diff --git a/assets/personnages.png b/assets/personnages.png
deleted file mode 100644
index f3f4b0a..0000000
Binary files a/assets/personnages.png and /dev/null differ
diff --git a/assets/rays.webp b/assets/rays.webp
deleted file mode 100644
index 0e345ae..0000000
Binary files a/assets/rays.webp and /dev/null differ
diff --git a/assets/texte.png b/assets/texte.png
deleted file mode 100644
index d44b351..0000000
Binary files a/assets/texte.png and /dev/null differ
diff --git a/favicon.svg b/favicon.svg
deleted file mode 100644
index 9698403..0000000
--- a/favicon.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<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 9cb1e57..1daeeef 100644
--- a/index.html
+++ b/index.html
@@ -1,657 +1,102 @@
 <!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>
+<html lang="fr">
 
-  <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="" />-->
-              <img src="./assets/logo1cp.png" alt="logo lettre C et P collés en doré" />
-            </div>
-            <nav class="primary-nav">
-              <ul role="list">
-                <li><a href="#">Qui je suis</a></li>
-                <li><a href="#">Ce que je fait</a></li>
-                <li><a href="#">Contact</a></li>
-              </ul>
-            </nav>           
-          </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>
+<head>
+    <meta charset="utf-8" />
+    <meta http‑equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Maître Charline Pasteur – Avocate au barreau de Nantes</title>
+    <meta name="description"
+        content="Conseil et contentieux en droit pénal, droit de la famille, droit du travail à Paris et Île‑de‑France." />
+    <link rel="preload" href="assets/fonts/WorkSans-Regular.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="canonical" href="https://www.charline‑pasteur‑avocate.fr/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Maître Charline Pasteur – Avocate au barreau de Nantes" />
+    <meta property="og:description"
+        content="Conseil et contentieux en droit pénal, droit de la famille, droit du travail à Paris et Île‑de‑France." />
+    <meta property="og:url" content="https://www.charline‑pasteur‑avocate.fr/" />
+    <meta property="og:image" content="assets/img/og-cover.jpg" />
+</head>
 
-      <!--<img class="parallax__bg" src="./assets/bg.jpg" alt="" />-->
-      <img class="parallax__bg" src="./assets/fond.png" alt="" />
-      <!--<img class="parallax__dust" src="./assets/dust.webp" alt="" />-->
-      <img class="parallax__dust" src="./assets/etoiles.png" 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/personnages.png" 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="" />-->
+<body>
+    <header class="header">
+        <a href="index.html" class="logo">
+            <img src="assets/img/logo.png" alt="Logo – Charline Pasteur Avocate">
+            Charline Pasteur, Avocate
+        </a>
+
+        <input class="menu-btn" type="checkbox" id="menu-btn" />
+        <label class="menu-icon" for="menu-btn">
+            <span class="navicon"></span>
+        </label>
+
+        <!-- Placer <nav> ici, mais gardez <ul> au même niveau que <input> -->
+        <nav class="nav-wrapper" aria-label="Menu principal">
+            <ul class="menu">
+                <li><a href="index.html">Accueil</a></li>
+                <li><a href="assistance_educative.html">Assistance éducative</a></li>
+                <li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
+                <li><a href="droit_education.html">Droit de l'éducation</a></li>
+                <li><a href="droit_etrangers.html">Droit des étrangers</a></li>
+                <li><a href="honnoraires.html">Honorraires</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <div class="banner">
     </div>
+    <main>
+        <section id="accueil">
+            <h2>Spécialiste droit des enfants</h2>
+            <p>Ayant obtenu mon certificat d’aptitude à la profession d’Avocat au sein de l’École de Formation du
+                Barreau à Paris, j’ai débuté mon exercice en tant qu’avocate au sein du Barreau de Nantes en janvier
+                2018.
+                Conformément au serment que j’ai prêté, j’exerce ma profession avec dignité, humanité, probité,
+                conscience et indépendance.
+            </p>
+            <p>Au quotidien, j’ai à cœur de mettre mes compétences au service de causes individuelles mais aussi de
+                causes collectives, le droit étant à mes yeux avant tout un outil au service des droits humains. Parmi
+                ces causes, défendre l’intérêt supérieur de l’enfant et porter leur parole m’animent particulièrement.
+            </p>
+            <p>La justice des mineurs étant une justice spécialisée, j’ai souhaité me former davantage à travers une
+                année de formation en 2022/2023 auprès de l’Université de Bordeaux m’ayant permis d’obtenir le Diplôme
+                Universitaire « Protection de l’Enfance ».
+            </p>
+            <p>J’ai également obtenu le certificat de spécialisation « Droit des enfants » en décembre 2024 me
+                permettant aujourd’hui d’exercer comme avocate spécialiste.
+            </p>
+            <p>Je pratique ainsi les contentieux de l’assistance éducative, du droit pénal des mineurs, du droit de la
+                famille et du droit de l’éducation. J’exerce également dans le domaine du droit des étrangers.
+            </p>
+            <p>Je suis membre de l’Association de Défense du droit des mineurs à Nantes et j’anime la commission
+                mineure du Syndicat des Avocats de France.
+            </p>
+        </section>
 
-    <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>
+        <section id="domaines">
+            <h2>Domaines d'intervention</h2>
+            <ul id="menu" class="nav-list">
+                <li><a href="assistance_educative.html">Assistance éducative</a></li>
+                <li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
+                <li><a href="droit_education.html">Droit de l'éducation</a></li>
+                <li><a href="droit_etrangers.html">Droit des étrangers</a></li>
+            </ul>
+        </section>
+
+        <section id="contact">
+            <h2>Contactez-moi</h2>
+            <p>Vous pouvez me contacter à l'adresse email suivante : <a
+                    href="mailto:votre@email.com">votre@email.com</a></p>
+        </section>
     </main>
-  </body>
-</html>
+
+    <!-- ===== PIED‑DE‑PAGE ===== -->
+    <footer class="site-footer">
+        <p>&copy; 2025 – Maître Charline Pasteur. Tous droits réservés.</p>
+        <p><a href="mentions.html">Mentions légales</a></p>
+    </footer>
+    <script src="script.js" defer></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/script.js
@@ -0,0 +1 @@
+
diff --git a/style.css b/style.css
index 9d34fd1..236886f 100644
--- a/style.css
+++ b/style.css
@@ -1,195 +1,202 @@
-.parallax {
-  /* overflow: hidden; */
-  position: relative;
-  z-index: 0;
-  min-height: 75vh;
-  display: grid;
-  grid-template-areas: "stack";
-  background-color: #FFEDE5;
-}
-
-.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:  #FFEDE5;
-  padding-block: 6rem;
-}
-
-@keyframes parallax {
-  to {
-    transform: 
-      translateY(calc(var(--parallax-speed) * 200px));
-  }
-}
-
-/* general styling */
-
-html {
-  color-scheme: normal;
+/* Style de la bannière */
+.banner {
+    background-image: url('assets/img/accueil.jpg');
+    /* Remplace 'ton-image-de-fond.jpg' par le chemin de ton image */
+    background-size: cover;
+    /* L'image couvre tout l'espace disponible */
+    background-position: center;
+    /* Centre l'image */
+    /*color: #fff;
+    /* Texte en blanc sur l'image */
+    /*text-align: center;
+    padding: 4rem 2rem;
+    Ajoute de l'espace intérieur 
+    display: flex;
+    justify-content: center;
+    Centre le contenu horizontalement 
+    align-items: center;
+    Centre le contenu verticalement */
+    min-height: 50vh;
+    /* Hauteur minimum de la bannière (50% de la hauteur de la fenêtre) */
 }
 
 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 */
+    font-family: sans-serif;
+    /* Police de caractères par défaut */
+    line-height: 1.6;
+    /* Espacement entre les lignes pour une meilleure lisibilité */
+    margin: 0;
+    /* Supprime les marges par défaut du body */
+    padding: 0;
+    /* Supprime les paddings par défaut du body */
+    background-color: #F9E7DB;
+    /* Couleur de fond légère */
+    color: #333;
+    /* Couleur de texte principale */
 }
 
-img {
-  display: block;
-  max-width: 100%;
+.header {
+    background-color: #F9E7DB;
+    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
+    position: fixed;
+    width: 100%;
+    z-index: 3;
 }
 
-.wrapper {
-  width: min(65rem, 100% - 4rem);
-  margin-inline: auto;
+.header ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow: hidden;
 }
 
-.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:  rgb(227, 195, 14);
-  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: 2rem;
-  max-width: 3ch;
-  line-height: 1;
-  font-style: italic;
-  font-weight: 300;
-  position: relative;
-
-  > span {
-    font-style: normal;
-    font-size: 0.5em;
+.header li a {
     display: block;
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: white;
-    z-index: -1;
-    scale: 2;
-    opacity: 0.5;
-    filter: blur(5rem);
-    translate: -50%;
-  }
+    padding: 0.5rem;
+    border-right: 1px solid #F9E7DB;
+    text-decoration: none;
 }
+
+.header li a:hover,
+.header .menu-btn:hover {
+    background-color: #F9E7DB;
+}
+
+.header .logo {
+    display: block;
+    float: left;
+    padding: 10px 20px;
+    text-decoration: none;
+}
+
+/* menu */
+
+.header .menu {
+    clear: both;
+    max-height: 0;
+    transition: max-height .2s ease-out;
+}
+
+/* menu icon */
+
+.header .menu-icon {
+    cursor: pointer;
+    display: inline-block;
+    float: right;
+    padding: 28px 20px;
+    position: relative;
+    user-select: none;
+}
+
+.header .menu-icon .navicon {
+    background: #333;
+    display: block;
+    height: 2px;
+    position: relative;
+    transition: background .2s ease-out;
+    width: 18px;
+}
+
+.header .menu-icon .navicon:before,
+.header .menu-icon .navicon:after {
+    background: #333;
+    content: '';
+    display: block;
+    height: 100%;
+    position: absolute;
+    transition: all .2s ease-out;
+    width: 100%;
+}
+
+.header .menu-icon .navicon:before {
+    top: 5px;
+}
+
+.header .menu-icon .navicon:after {
+    top: -5px;
+}
+
+/* menu btn */
+
+.header .menu-btn {
+    display: none;
+}
+
+.header .menu-btn:checked~nav .menu {
+    max-height: 240px;
+}
+
+.header .menu-btn:checked~.menu-icon .navicon {
+    background: transparent;
+}
+
+.header .menu-btn:checked~.menu-icon .navicon:before {
+    transform: rotate(-45deg);
+}
+
+.header .menu-btn:checked~.menu-icon .navicon:after {
+    transform: rotate(45deg);
+}
+
+.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
+.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
+    top: 0;
+}
+
+main {
+    padding: 2rem;
+    max-width: 800px;
+    /* Limite la largeur du contenu pour une meilleure lecture */
+    margin: 0 auto;
+    /* Centre le contenu horizontalement */
+}
+
+section {
+    margin-bottom: 2rem;
+}
+
+h1,
+h2 {
+    color: #CC4331;
+    line-height: 1.2;
+}
+
+footer {
+    background-color: #CC4331;
+    text-align: center;
+    padding: 0.5rem 0;
+    /* Suppression de la propriété sticky */
+    bottom: 0;
+    /* Assure qu'il reste en bas du viewport initialement */
+    width: 100%;
+    font-size: 0.9rem;
+    /* Optionnel */
+}
+
+
+/* Styles pour les écrans plus petits (téléphones) */
+@media (min-width: 48em) {
+    .banner {
+        padding: 2rem 1rem;
+        min-height: 70vh;
+        /* Prend plus de hauteur sur les petits écrans */
+    }
+
+    .header li {
+        float: left;
+    }
+
+    .header li a {
+        padding: 0.5rem;
+    }
+
+    .header .menu {
+        clear: none;
+        float: right;
+        max-height: none;
+    }
+
+    .header .menu-icon {
+        display: none;
+    }
+}
\ No newline at end of file