feat: modal détail produit plein écran avec données étendues

- Modal utilise un portal React pour s'afficher au-dessus de toute la page
- Affichage plein écran (100vh) avec scroll interne
- Support des données étendues scrapées (a_propos, description, caractéristiques, détails)
- Image plus grande (300x300) avec lightbox
- Layout responsive pour mobile

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/styles/global.scss

@@ -995,31 +995,66 @@ a {
   font-size: 0.85rem;
 }
 
-// Product Detail Modal
+// Product Detail Modal (Fullscreen)
-.modal-detail {
+.modal-fullscreen {
-  max-width: 800px;
+  padding: 0;
+  align-items: stretch;
 }
 
-.detail-layout {
+.modal-detail-fullscreen {
+  max-width: 100%;
+  width: 100%;
+  height: 100vh;
+  max-height: 100vh;
+  border-radius: 0;
   display: flex;
-  gap: 24px;
+  flex-direction: column;
 
-  @media (max-width: 600px) {
+  .modal-header {
+    flex-shrink: 0;
+    border-bottom: 1px solid $bg;
+    background: $card;
+
+    h2 {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      i {
+        color: $accent;
+      }
+    }
+  }
+
+  .modal-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px 32px;
+  }
+}
+
+// Section principale (image + infos essentielles)
+.detail-main {
+  display: flex;
+  gap: 32px;
+  margin-bottom: 32px;
+
+  @media (max-width: 900px) {
     flex-direction: column;
   }
 }
 
-.detail-image {
+.detail-image-large {
   flex-shrink: 0;
-  width: 200px;
+  width: 300px;
-  height: 200px;
+  height: 300px;
   background: #fff;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  padding: 12px;
+  padding: 16px;
   position: relative;
 
   &.clickable {
@@ -1038,32 +1073,33 @@ a {
 
   .no-image {
     color: $text-muted;
-    font-size: 3rem;
+    font-size: 4rem;
   }
 
   .image-zoom-hint {
     position: absolute;
-    bottom: 8px;
+    bottom: 12px;
-    right: 8px;
+    right: 12px;
     background: rgba(0, 0, 0, 0.7);
     color: white;
-    padding: 6px 10px;
+    padding: 8px 12px;
     border-radius: 6px;
-    font-size: 0.75rem;
+    font-size: 0.8rem;
     opacity: 0;
     transition: opacity 0.2s;
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 6px;
   }
 
-  @media (max-width: 600px) {
+  @media (max-width: 900px) {
     width: 100%;
-    height: 180px;
+    max-width: 300px;
+    margin: 0 auto;
   }
 }
 
-.detail-content {
+.detail-essential {
   flex: 1;
   min-width: 0;
 }
@@ -1072,17 +1108,20 @@ a {
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 
   .boutique {
-    font-size: 0.85rem;
+    font-size: 0.9rem;
     color: $accent;
     font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 6px;
   }
 
   .status {
-    font-size: 0.7rem;
+    font-size: 0.75rem;
-    padding: 3px 8px;
+    padding: 4px 10px;
     border-radius: 4px;
     font-weight: 500;
 
@@ -1098,25 +1137,25 @@ a {
   }
 }
 
-.detail-title {
+.detail-title-large {
-  font-size: 1.1rem;
+  font-size: 1.4rem;
   font-weight: 600;
-  margin: 0 0 12px 0;
+  margin: 0 0 16px 0;
   line-height: 1.4;
 }
 
 .detail-badges {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 8px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }
 
-.detail-grid {
+.detail-price-stock {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 
   @media (max-width: 600px) {
     grid-template-columns: 1fr;
@@ -1126,43 +1165,49 @@ a {
 .detail-section {
   background: $bg;
   border-radius: 8px;
-  padding: 12px;
+  padding: 16px;
 
   h4 {
-    margin: 0 0 10px 0;
+    margin: 0 0 12px 0;
-    font-size: 0.8rem;
+    font-size: 0.85rem;
     color: $accent;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
 
     i {
-      font-size: 0.85rem;
+      font-size: 0.9rem;
     }
   }
 }
 
-.detail-meta-section {
+.detail-meta {
-  grid-column: 1 / -1;
+  margin-bottom: 0;
 }
 
 .detail-data-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
+}
+
+.detail-data-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 10px;
 }
 
 .detail-data-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 0.85rem;
+  font-size: 0.9rem;
 
   .label {
     color: $text-muted;
-    font-size: 0.75rem;
+    font-size: 0.8rem;
   }
 
   .value {
@@ -1170,7 +1215,7 @@ a {
 
     &.price-current {
       color: $accent;
-      font-size: 1.1rem;
+      font-size: 1.3rem;
     }
 
     &.strikethrough {
@@ -1198,12 +1243,12 @@ a {
       color: $accent-yellow;
 
       i {
-        font-size: 0.75rem;
+        font-size: 0.8rem;
       }
 
       .review-count {
         color: $text-muted;
-        font-size: 0.75rem;
+        font-size: 0.8rem;
         font-weight: 400;
       }
     }
@@ -1211,8 +1256,9 @@ a {
     &.mono {
       font-family: monospace;
       background: rgba($card-hover, 0.5);
-      padding: 2px 6px;
+      padding: 3px 8px;
       border-radius: 4px;
+      font-size: 0.85rem;
     }
   }
 }
@@ -1220,7 +1266,69 @@ a {
 .detail-data-empty {
   color: $text-muted;
   font-style: italic;
+  font-size: 0.9rem;
+}
+
+// Sections étendues (a_propos, description, caractéristiques, détails)
+.detail-extended {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.detail-section-full {
+  width: 100%;
+}
+
+.detail-bullets {
+  margin: 0;
+  padding-left: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  li {
+    font-size: 0.9rem;
+    line-height: 1.5;
+    color: $text;
+  }
+}
+
+.detail-description {
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: $text;
+}
+
+.detail-table {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 8px;
+}
+
+.detail-table-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 8px 12px;
+  background: rgba($card, 0.5);
+  border-radius: 6px;
   font-size: 0.85rem;
+  gap: 16px;
+
+  .detail-table-key {
+    color: $text-muted;
+    flex-shrink: 0;
+    max-width: 40%;
+  }
+
+  .detail-table-value {
+    color: $text;
+    text-align: right;
+    word-break: break-word;
+  }
 }
 
 .btn-detail {