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;
   }