feat(features): améliorer comportement hover et état initial des cartes

p/assets/styles/main.css

@@ -1,12 +1,10 @@
 @import "./var.css";
 
-/* MAIN PAGE STYLES - focused on the hero and features */
-
 :root {
   --main-max: 1200px;
 }
 
-/* Layout container for injected page content */
+
 main[data-page-content] {
   margin: 0 auto;
   max-width: var(--main-max);
@@ -14,19 +12,18 @@ main[data-page-content] {
   box-sizing: border-box;
 }
 
-/* HERO */
+.grid { display: block; }
+
+
 .hero {
   background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
   box-shadow: var(--shadow);
   border-radius: 1rem;
   padding: clamp(2rem, 4.5vw, 3.5rem);
   color: var(--text);
-  display: block;
 }
 
-.hero-inner {
+.hero-inner { width: 100%; }
-  width: 100%;
-}
 
 .eyebrow {
   color: var(--accent);
@@ -36,7 +33,7 @@ main[data-page-content] {
   margin: 0 0 0.6rem;
 }
 
-.hero-title { /* previously .hero h1 */
+.hero-title {
   font-family: "Georgia", "Palatino Linotype", serif;
   font-size: clamp(3rem, 8vw, 5rem);
   line-height: 0.95;
@@ -63,6 +60,7 @@ main[data-page-content] {
   flex-wrap: wrap;
 }
 
+
 .button {
   display: inline-flex;
   align-items: center;
@@ -84,73 +82,124 @@ main[data-page-content] {
   color: var(--text);
 }
 
-/* FEATURES - refined layout */
+
 .features {
   margin-top: 1.5rem;
-  display: grid;
+  display: flex;
-  grid-template-columns: 1fr 420px;
-  grid-auto-rows: minmax(120px, auto);
   gap: 1rem;
+  align-items: stretch;
 }
 
 .features .card {
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 11rem;
   background: rgba(255,255,255,0.02);
-  padding: 1.25rem;
+  padding: 1.5rem;
   border-radius: 0.75rem;
   box-shadow: 0 8px 22px rgba(2,6,23,0.45);
-  transition: transform 180ms ease, box-shadow 180ms ease;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
 }
 
-.features .card:first-child {
+.features .card h2 {
-  grid-column: 1 / 2;
+  margin: 0;
-  grid-row: 1 / span 2;
+  font-family: "Georgia", serif;
-  min-height: 220px;
+  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
+  line-height: 1.1;
+  transition: transform 220ms ease;
 }
 
-.features .card + .card { /* second item */
+.features .card p {
-  grid-column: 2 / 3;
+  margin: 0;
+  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
+  line-height: 1.6;
+  position: absolute;
+  left: 1.5rem;
+  right: 1.5rem;
+  bottom: 1.35rem;
+  padding: 0.85rem 1rem;
+  opacity: 0;
+  transform: translateY(0.5rem);
+  transition: opacity 180ms ease, transform 220ms ease;
+  pointer-events: none;
 }
 
-.features .card:nth-child(3) { grid-column: 2 / 3; }
+.features:not(:hover) .card:first-child,
-.features .card:nth-child(4) { grid-column: 1 / 3; }
+.features .card:first-child:hover,
+.features .card:first-child:focus {
+  flex-grow: 2.6;
+  justify-content: flex-start;
+}
 
-.features .card h2 { margin: 0 0 0.5rem; font-family: "Georgia", serif; }
+.features:not(:hover) .card:first-child p,
-.features .card p { margin: 0; color: var(--muted); }
+.features .card:first-child:hover p,
+.features .card:first-child:focus p {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.features:hover .card:first-child:not(:hover):not(:focus) {
+  flex-grow: 1;
+  justify-content: center;
+}
+
+.features:hover .card:first-child:not(:hover):not(:focus) p {
+  opacity: 0;
+  transform: translateY(0.5rem);
+}
+
+.features .card:hover,
+.features .card:focus {
+  flex-grow: 2.6;
+  justify-content: flex-start;
+  transform: translateY(-6px);
+  box-shadow: 0 22px 60px rgba(2,6,23,0.55);
+  z-index: 2;
+}
+
+.features .card:hover p,
+.features .card:focus p {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.features .card:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
 
-.features .card:hover { transform: translateY(-6px); box-shadow: 0 22px 60px rgba(2,6,23,0.55); }
 
 @media (max-width: 980px) {
   .hero-title { font-size: clamp(2.2rem, 7vw, 4rem); }
-  .features { grid-template-columns: 1fr; }
+
-  .features .card { grid-column: auto; grid-row: auto; }
+  .features {
+    flex-direction: column;
+  }
+
+  .features .card {
+    cursor: default;
+  }
+
+  .features .card:hover,
+  .features .card:focus {
+    transform: none;
+  }
+
+  .features .card p {
+    position: static;
+    margin-top: 0.85rem;
+    opacity: 1;
+    transform: none;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+    pointer-events: auto;
+  }
 }
-
-/* Focus states controlled by JS: when a card is focused it expands (spans both columns)
-   and others collapse slightly so the focused card shows full content. */
-.features[class*="focus-"] .card { transition: all 220ms ease; }
-.features.focus-1 .card:nth-child(1),
-.features.focus-2 .card:nth-child(2),
-.features.focus-3 .card:nth-child(3),
-.features.focus-4 .card:nth-child(4) {
-  grid-column: 1 / 3;
-  transform: none;
-  box-shadow: 0 28px 80px rgba(2,6,23,0.7);
-  z-index: 3;
-}
-
-.features.focus-1 .card:not(:nth-child(1)),
-.features.focus-2 .card:not(:nth-child(2)),
-.features.focus-3 .card:not(:nth-child(3)),
-.features.focus-4 .card:not(:nth-child(4)) {
-  opacity: 0.95;
-  transform: translateY(0) scale(0.98);
-}
-
-@media (max-width: 980px) {
-  .features[class*="focus-"] .card { transform: none; box-shadow: none; opacity: 1; }
-  .features[class*="focus-"] .card { grid-column: auto; }
-}
-
-/* small helper spacing */
-.grid { display: block; }
-