fix(copy): corrections textes environnements

p/assets/styles/main.css

@@ -187,6 +187,78 @@ main[data-page-content] {
   align-items: stretch;
 }
 
+.env-choices {
+  margin-top: 1.8rem;
+  display: grid;
+  gap: 1rem;
+  padding: clamp(1rem, 2.4vw, 1.5rem);
+  border-radius: 1rem;
+  background: rgba(255, 255, 255, 0.02);
+  box-shadow: 0 8px 22px rgba(2, 6, 23, 0.35);
+}
+
+.env-choices-header h2 {
+  margin: 0 0 0.45rem;
+  font-family: "Georgia", "Palatino Linotype", serif;
+  font-size: clamp(1.6rem, 3vw, 2.2rem);
+}
+
+.env-choices-header p {
+  margin: 2rem 0 1rem;
+  color: var(--muted);
+  max-width: 78ch;
+}
+
+.env-row {
+  display: grid;
+  grid-template-columns: minmax(170px, 0.9fr) minmax(0, 2.1fr);
+  gap: clamp(0.85rem, 2vw, 1.35rem);
+  align-items: stretch;
+}
+
+.env-row.is-reverse {
+  grid-template-columns: minmax(0, 2.1fr) minmax(170px, 0.9fr);
+}
+
+.env-media,
+.env-text {
+  margin: 0;
+  border-radius: 0.8rem;
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  overflow: hidden;
+  background: rgba(2, 6, 23, 0.22);
+}
+
+.env-media {
+  min-height: clamp(140px, 20vw, 190px);
+}
+
+.env-media img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.env-text {
+  padding: clamp(1rem, 2.4vw, 1.4rem);
+  display: grid;
+  align-content: center;
+  gap: 0.55rem;
+}
+
+.env-text h3 {
+  margin: 0;
+  font-family: "Georgia", "Palatino Linotype", serif;
+  font-size: clamp(1.25rem, 2vw, 1.6rem);
+}
+
+.env-text p {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.65;
+}
+
 .features .card {
   flex: 1 1 0;
   min-width: 0;
@@ -288,6 +360,15 @@ main[data-page-content] {
     flex-direction: column;
   }
 
+  .env-row,
+  .env-row.is-reverse {
+    grid-template-columns: 1fr;
+  }
+
+  .env-media {
+    min-height: 185px;
+  }
+
   .features .card {
     cursor: default;
   }

p/index/index.html

@@ -31,7 +31,6 @@
           <button class="hero-control" type="button" data-hero-next aria-label="Image suivante">›</button>
         </div>
       </section>
-
       <section class="features">
         <article class="card" tabindex="0">
           <h2>Installation simplifiée</h2>
@@ -53,6 +52,65 @@
         </article>
 
       </section>
+
+      <section class="env-choices" aria-labelledby="env-choices-title">
+        <header class="env-choices-header">
+          <h2 id="env-choices-title">Choisissez votre environnement a l'installation</h2>
+          <p>FWS Linux vous laisse choisir l'interface qui correspond a votre usage. Vous pouvez demarrer en CLI minimale ou installer un bureau complet des le debut.</p>
+        </header>
+
+        
+        <article class="env-row is-reverse">
+          <div class="env-text">
+            <h3>KDE Plasma</h3>
+            <p>Interface moderne, complete et hautement personnalisable. Un excellent choix si vous voulez un bureau riche avec de nombreux outils integres.</p>
+          </div>
+          <figure class="env-media">
+            <img src="/p/assets/img/hero/KDE.png" alt="Capture de l'environnement KDE Plasma" loading="lazy" />
+          </figure>
+        </article>
+        
+        <article class="env-row">
+          <figure class="env-media">
+            <img src="/p/assets/img/hero/gnome.png" alt="Capture de l'environnement Gnome" loading="lazy" />
+          </figure>
+          <div class="env-text">
+            <h3>Gnome</h3>
+            <p>Experience epuree et orientee productivite. Gnome met l'accent sur la simplicite d'utilisation et un flux de travail propre sans surcharge visuelle.</p>
+          </div>
+        </article>
+        
+        <article class="env-row is-reverse">
+          <div class="env-text">
+            <h3>XFCE</h3>
+            <p>Environnement leger et tres stable, ideal pour les machines modestes ou pour privilegier les performances au quotidien.</p>
+          </div>
+          <figure class="env-media">
+            <img src="/p/assets/img/hero/xfce.png" alt="Capture de l'environnement XFCE" loading="lazy" />
+          </figure>
+        </article>
+        
+        <article class="env-row">
+          <figure class="env-media">
+            <img src="/p/assets/img/hero/hyprland.png" alt="Capture de l'environnement Hyprland" loading="lazy" />
+          </figure>
+          <div class="env-text">
+            <h3>Hyprland</h3>
+            <p>Tiling Wayland rapide et moderne, pense pour un workflow clavier et une grande efficacite. Parfait pour les utilisateurs techniques qui aiment optimiser leur espace de travail.</p>
+          </div>
+        </article>
+        <article class="env-row is-reverse">
+          <div class="env-text">
+            <h3>CLI (sans environnement)</h3>
+            <p>Version minimale pour les utilisateurs avances, les serveurs ou ceux qui veulent construire leur systeme a la carte. Aucun bureau graphique n'est preinstalle.</p>
+          </div>
+          <figure class="env-media">
+            <img src="/p/assets/img/hero/install.png" alt="Capture de l'environnement CLI" loading="lazy" />
+          </figure>
+        </article>
+      </section>
+      
+      
     </main>
     
     <script src="../assets/js/hero-carousel.js"></script>