* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.body-main {
    padding: 0 8px;
}

.promotion-details-section {
  margin: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: linear-gradient(180deg, #ffffff 0%, #ff0000 20%, #ffffff 100%);
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Background slideshow container: 3:2 ratio, full cover */
.promotion-details-content {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  height: auto;
  aspect-ratio: 2 / 1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background-image 0.6s ease-in-out;
  border-radius: 18px;
}

/* Cross-fade slide layers */
.promo-slide-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  aspect-ratio: 2 / 1;
  transition: opacity 700ms ease-in-out, transform 700ms ease-in-out;
  opacity: 0;
  will-change: opacity, transform;
  border-radius: 18px;
}

@media (max-width: 668px) {
  .promotion-details-content,
  .promo-slide-layer {
    aspect-ratio: 5 / 4;
  }

  .promotion-details-section {
    padding: 8px;
  }
}

.promo-slide-layer.visible {
  opacity: 1;
  transform: scale(1);
}

/* subtle parallax / zoom on enter */
.promo-slide-layer.enter {
  transform: scale(1.02);
}

/* Bottom center thumbnail bar */
.promo-bottom-thumbs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 99;
}

.promo-rating-badge {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 8px;
    border: 1.5px solid #ffb800f2;
    background: #ffb7007a;
    color: #ffb800f2;
    box-shadow: 0 8px 22px #ffb800f2;
    backdrop-filter: blur(4px);
    z-index: 100;
    font-size: 16px;
    font-weight: 700;
}

.promo-discount-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 56px;
    height: 76px;
    border-radius: 40%;
    background: radial-gradient(circle at 35% 30%, #ff6a6a 0%, #e52b2b 62%, #b71010 100%);
    border: 2px solid rgba(255, 184, 0, 0.95);
    color: #fff;
    z-index: 105;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    box-shadow: 0 10px 26px rgba(229, 43, 43, 0.55);
    overflow: hidden;
    animation: promoDiscountPulse 1800ms ease-in-out infinite;
    font-family: 'Arial Black', Arial, Helvetica, sans-serif;
}

.promo-discount-badge::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px dashed #ffb800f2;
    animation: promoDiscountSpin 4s linear infinite;
}

.promo-discount-badge .line-main {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    max-width: 82px;
    color: #ffb700;
}

.promo-discount-badge .line-off {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1;
    margin-bottom: 4px;
}

.promo-discount-badge .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

@keyframes promoDiscountPulse {
    0% { transform: translateZ(0) scale(1); }
    50% { transform: translateZ(0) scale(1.06); }
    100% { transform: translateZ(0) scale(1); }
}

@keyframes promoDiscountSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 668px) {
  .promo-bottom-thumbs {
    width: 80%;
  }

  .promo-rating-badge {
    top: 6px;
  }

    .promo-discount-badge {
        top: -8px;
        right: -8px;
        width: 82px;
        height: 82px;
    }
}

.promo-thumbs-inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  -webkit-overflow-scrolling: touch;
}

.promo-thumb {
  width: 56px;
  height: 40px;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  flex: 0 0 auto;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  opacity: 0.3;
  border: 2px solid transparent;
  transform: scale(1);
}

.promo-thumb:hover {
  opacity: 0.6;
  border-color: rgba(255, 255, 255, 0.8);
  transform: scale3d(1.1, 1.2, 1.1);
}

.promo-thumb.active {
  opacity: 1;
  border-color: blueviolet;
  transform: scale(1.08);
}

/* hide native scrollbar visual but keep scrollable */
.promo-thumbs-inner::-webkit-scrollbar {
  height: 6px;
}

.promo-thumbs-inner::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
}

/* Overlay content (left column) */
.promo-content-overlay {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 48%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  padding: 12px;
  z-index: 99;
  background: rgba(255, 255, 255, 0.64);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);
  color: #111;
}

/* Right-center realtime products collage */
.promo-products-collage {
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    width: 40%;
    height: 100%;
    overflow: hidden;
    z-index: 991;
}

@media (max-width: 668px) {
    .promo-content-overlay {
        width: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .promo-products-collage {
        width: 100%;
        right: 1%;
        z-index: 91;
    }
}

.promo-product-item {
    position: absolute;
    left: var(--xpx, 10px);
    top: var(--ypx, 10px);
    width: var(--size, 116px);
    transform-origin: center center;
    animation:
        promoProductEntry 520ms cubic-bezier(.2, .8, .2, 1) both,
        promoProductSpin var(--spin-duration, 4800ms) ease-in-out infinite alternate;
    animation-delay: var(--enter-delay, 0ms), 0ms;
}

.promo-product-card-inner {
    background: #fff;
    padding: 8px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.promo-product-media {
    width: 100%;
    aspect-ratio: 1.1;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.promo-product-media img {
    display: block;
    width: 100%;
    aspect-ratio: 1.1;
    height: 100%;
}

.promo-product-name {
    width: 100%;
    color: #111;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promo-pin {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #f7f7f7 0%, #b7b7b7 65%, #8e8e8e 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.36);
    z-index: 2;
}

.promo-pin.pin-left-top { left: 2px; top: 2px; }
.promo-pin.pin-right-top { right: 2px; top: 2px; }
.promo-pin.pin-left-bottom { left: 2px; bottom: 2px; }
.promo-pin.pin-right-bottom { right: 2px; bottom: 2px; }

@keyframes promoProductEntry {
    from { opacity: 0; transform: translateY(12px) scale(0.92) rotate(0deg); }
    to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot-start, 0deg)); }
}

@keyframes promoProductSpin {
    0% { transform: rotate(var(--rot-start, 0deg)); }
    50% { transform: rotate(var(--rot-end, 4deg)); }
    100% { transform: rotate(var(--rot-start, 0deg)); }
}

@media (max-width: 668px) {
  .promo-content-overlay {
    width: 70%;
  }

    .promo-products-collage {
        width: 56%;
        height: 76%;
        right: 1%;
    }

    .promo-product-item {
        width: min(var(--size, 96px), 110px);
    }
}

.promo-row {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 12px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border: 1.5px solid transparent;
}

.promo-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.05;
  color: red;
}

.promo-slogan {
  color: #666;
  font-size: 13px;
}

.promo-desc {
  color: #111;
  font-size: 14px;
  display: -webkit-box;
    line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promo-desc a.more {
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 6px;
  font-size: 13px;
}

.promo-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-block;
}

.promo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* simple modal for full description */
.promo-desc-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.promo-desc-modal .modal-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 860px;
  width: min(50%, 100%);
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.promo-desc-modal .modal-close {
  background: none;
  border: 1.5px solid grey;
  border-radius: 12px;
  color: grey;
  cursor: pointer;
  font-size: 20px;
}

.promo-desc-modal .modal-close:hover {
  background-color: blueviolet;
  transform: scale(1.05);
  color: white;
  border: none;
}





/* <section class="promotion-list-product-section">
        <div class="list-product-promotion">
            <div class="btn-shop-filters-horiz" role="toolbar" aria-label="Barre de filtres">
                <button class="filter-btn" aria-label="Ouvrir les filtres" title="Filtres">
                    <!-- Inline SVG icon (Filter Alt style) -->
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" />
                    </svg>
                    <span>Filtres</span>
                    <span class="filter-active-count" style="display:none">0</span>
                </button>
                <!-- Filtres actifs dynamiques -->
                <div class="active-filters-btns"></div>
            </div>
            <div class="list-best-product-horiz">
                <!-- Liste de 5 produits vedette affichés horizontalement, gérés par list-product-vedette.js/.css -->
            </div>
            <div class="list-product-grid">
                <!-- Liste en grille des produits, gérés par list-product-vedette.js/.css -->
            </div>
        </div>
        <div class="shop-products-promotion-section">
            <div class="shop-filters-products-promotion">
                <div class="filters-title-row">
                    <span class="filters-icon">
                        <!-- Filtre icon -->
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" />
                        </svg>
                    </span>
                    <span class="filters-title-text">Filtres</span>
                    <button type="button" class="modal-filters-close" style="display: none;"
                        aria-label="Fermer les filtres" title="Fermer">&times;</button>
                </div>
                <form id="filters-form" autocomplete="off">
                    <div class="filters-field">
                        <span class="filters-icon">
                            <!-- Search icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
                                <circle cx="11" cy="11" r="8" stroke-linecap="round" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M20 20l-3.5-3.5" />
                            </svg>
                        </span>
                        <input type="text" name="search" placeholder="Mot clés" class="filters-input"
                            list="filters-suggestions" />
                        <datalist id="filters-suggestions">
                            <option value="Sport">
                            <option value="Eco">
                            <option value="Maryy">
                            <option value="Accessoires">
                            <option value="Été">
                        </datalist>
                    </div>

                    <div class="filters-field">
                        <span class="filters-icon">
                            <!-- Trier icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
                            </svg>
                        </span>
                        <label class="filters-label">Trier par
                            <select name="sort" class="filters-select">
                                <option value="updatedAt desc">Plus récent</option>
                                <option value="price asc">Prix croissant</option>
                                <option value="price desc">Prix décroissant</option>
                                <option value="best">Meilleur score</option>
                            </select>
                        </label>
                    </div>

                    <div class="filters-field">
                        <span class="filters-icon">
                            <!-- Category icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
                            </svg>
                        </span>
                        <label class="filters-label">Catégorie
                            <select name="category" class="filters-select">
                                <option value="">Toutes</option>
                                <option value="Accessoires">Accessoires</option>
                                <option value="Sport">Sport</option>
                            </select>
                        </label>
                    </div>

                    <div class="filters-field">
                        <span class="filters-icon">
                            <!-- Price range icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
                            </svg>
                        </span>
                        <label class="filters-label">Tranche de prix
                            <div class="filters-pricerange">
                                <input type="number" name="minPrice" placeholder="Min"
                                    class="filters-input filters-input-price" min="0" />
                                <span class="filters-price-sep">-</span>
                                <input type="number" name="maxPrice" placeholder="Max"
                                    class="filters-input filters-input-price" min="0" />
                            </div>
                        </label>
                    </div>

                    <div class="filters-field filters-field-row">
                        <span class="filters-icon"
                            style="border:2px solid #28a745;background:#e6ffe6;border-radius:50%;padding:3px;">
                            <!-- Livraison gratuite icon green -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="#28a745">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
                            </svg>
                        </span>
                        <label class="filters-label">Livraison gratuite
                            <input type="checkbox" name="freeDelivery" class="filters-checkbox" />
                        </label>
                    </div>

                    <button type="button" id="filters-reset-btn" class="filters-reset-btn" style="display:none">
                        <span class="filters-reset-icon">
                            <!-- Reset icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M4.5 4.5v6h6m-2.25-9a9 9 0 1 1 9 9" />
                            </svg>
                        </span>
                        <span>Réinitialiser</span>
                    </button>
                </form>
            </div>
            <!-- Section Notes et Avis - affichage centré colonne -->
            <section class="notes-avis-section">
                <h2 class="notes-title">Notes et avis <span class="notes-count">(124)</span></h2>
                <div class="notes-row-average">
                    <span class="notes-average">5</span>
                    <span class="notes-over">/5</span>
                </div>
                <div class="notes-bars-list">
                    <!-- Barres de progression 1 à 5 -->
                    <div class="notes-bar-item">
                        <div class="notes-bar-row">
                            <i class="fas fa-star star-icon"></i>
                            <span class="bar-label">5</span>
                            <div class="bar-progress">
                                <div class="bar" style="width: 78%"></div>
                            </div>
                            <span class="bar-count">0</span>
                        </div>
                    </div>
                    <div class="notes-bar-item">
                        <div class="notes-bar-row">
                            <i class="fas fa-star star-icon"></i>
                            <span class="bar-label">4</span>
                            <div class="bar-progress">
                                <div class="bar" style="width: 21%"></div>
                            </div>
                            <span class="bar-count">0</span>
                        </div>
                    </div>
                    <div class="notes-bar-item">
                        <div class="notes-bar-row">
                            <i class="fas fa-star star-icon"></i>
                            <span class="bar-label">3</span>
                            <div class="bar-progress">
                                <div class="bar" style="width: 5%"></div>
                            </div>
                            <span class="bar-count">0</span>
                        </div>
                    </div>
                    <div class="notes-bar-item">
                        <div class="notes-bar-row">
                            <i class="fas fa-star star-icon"></i>
                            <span class="bar-label">2</span>
                            <div class="bar-progress">
                                <div class="bar" style="width: 2%"></div>
                            </div>
                            <span class="bar-count">0</span>
                        </div>
                    </div>
                    <div class="notes-bar-item">
                        <div class="notes-bar-row">
                            <i class="fas fa-star star-icon"></i>
                            <span class="bar-label">1</span>
                            <div class="bar-progress">
                                <div class="bar" style="width: 1%"></div>
                            </div>
                            <span class="bar-count">0</span>
                        </div>
                    </div>
                </div>
                <div class="notes-row-center">
                    <button class="star-btn"><i class="far fa-star"></i></button>
                    <button class="star-btn"><i class="far fa-star"></i></button>
                    <button class="star-btn"><i class="far fa-star"></i></button>
                    <button class="star-btn"><i class="far fa-star"></i></button>
                    <button class="star-btn"><i class="far fa-star"></i></button>
                </div>
                <div class="notes-form">
                    <div class="notes-input-row">
                        <span class="input-prefix"><i class="fas fa-keyboard"></i></span>
                        <input type="text" class="notes-input" placeholder="Laisser un avis..." />
                        <span class="input-suffix">
                            <button class="icon-btn"><i class="far fa-plus-square"></i></button>
                            <button class="icon-btn send"><i class="fas fa-paper-plane"></i></button>
                        </span>
                    </div>
                </div>
                <div class="notes-relevant">
                    Les avis les plus pertinents <span class="notes-relevant-count">(12)</span>
                </div>
                <div class="notes-avis-list">
                    <!-- Item avis exemple -->
                    <div class="notes-avis-item">
                        <div class="notes-avis-avatar">
                            <span class="avatar-circle">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="avatar" />
                            </span>
                        </div>
                        <div class="notes-avis-content">
                            <div class="notes-avis-username">JeanBaptiste</div>
                            <div class="notes-avis-meta-row">
                                <span class="notes-avis-date">2025-11-28</span>
                                <span class="notes-avis-rating">
                                    <i class="fas fa-star star-icon filled"></i>
                                    <i class="fas fa-star star-icon filled"></i>
                                    <i class="fas fa-star-half-alt star-icon filled"></i>
                                    <i class="far fa-star star-icon"></i>
                                    <i class="far fa-star star-icon"></i>
                                </span>
                            </div>
                            <div class="notes-avis-message">
                                Super produit, très bonne qualité et livraison rapide !
                            </div>
                            <div class="notes-avis-actions-row">
                                <button class="notes-action-btn outline"><i class="fas fa-share"></i> </button>
                                <button class="notes-action-btn outline"><i class="far fa-thumbs-up"></i> </button>
                                <button class="notes-action-btn outline"><i class="far fa-thumbs-down"></i> </button>
                            </div>
                        </div>
                    </div>
                    <!-- ... autres avis ... -->
                </div>
            </section>
        </div>
    </section>  */