Bootstrap 5
E Commerce
Detail Produit
Bootstrap 5 Design
Template
Html
Integration List
Page Web
E-commerce Detail Produit avec Bootstrap 5 optimisées pour la visualisation et l'interaction. Composants modernes et responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template Ecommerce Detail Bootstrap 5 2026 23040041 | AngularForAll</title>
<!-- Bootstrap 5 + Icônes -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- AOS Animation -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
* { font-family: 'Inter', sans-serif; }
body {
background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%);
padding-bottom: 3rem;
}
/* Header / Navigation */
.navbar-custom {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
padding: 1rem 0;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
.navbar-brand {
font-weight: 800;
font-size: 1.6rem;
background: linear-gradient(135deg, #1e293b, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Badges et étiquettes */
.badge-new {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 0.35rem 1rem;
border-radius: 100px;
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.3px;
}
.badge-bestseller {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
padding: 0.35rem 1rem;
border-radius: 100px;
font-weight: 600;
font-size: 0.8rem;
}
/* Galerie produit */
.main-product-image {
border-radius: 32px;
box-shadow: 0 30px 50px -15px rgba(0,0,0,0.15);
transition: transform 0.3s ease;
background: linear-gradient(145deg, #ffffff, #f8fafc);
padding: 2rem;
}
.main-product-image:hover {
transform: scale(1.02);
}
.thumbnail-image {
border-radius: 18px;
cursor: pointer;
transition: all 0.2s ease;
border: 2px solid transparent;
background: white;
padding: 0.5rem;
}
.thumbnail-image:hover {
border-color: #3b82f6;
transform: translateY(-3px);
box-shadow: 0 10px 20px -8px rgba(59,130,246,0.3);
}
.thumbnail-image.active {
border-color: #3b82f6;
box-shadow: 0 8px 16px -6px rgba(59,130,246,0.4);
}
/* Prix et informations */
.price-current {
font-size: 3rem;
font-weight: 800;
color: #0f172a;
line-height: 1;
}
.price-original {
font-size: 1.2rem;
color: #94a3b8;
text-decoration: line-through;
}
.discount-badge {
background: #ef4444;
color: white;
font-weight: 700;
padding: 0.2rem 0.8rem;
border-radius: 30px;
font-size: 0.9rem;
}
/* Options de couleur */
.color-option {
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s;
border: 3px solid transparent;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.color-option:hover {
transform: scale(1.15);
}
.color-option.active {
border-color: #3b82f6;
box-shadow: 0 0 0 4px rgba(59,130,246,0.2);
}
/* Boutons */
.btn-add-cart {
background: linear-gradient(135deg, #1e293b, #0f172a);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 60px;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s;
box-shadow: 0 10px 25px -5px rgba(15,23,42,0.3);
}
.btn-add-cart:hover {
background: linear-gradient(135deg, #0f172a, #020617);
transform: translateY(-3px);
box-shadow: 0 20px 30px -8px rgba(15,23,42,0.4);
color: white;
}
.btn-buy-now {
background: white;
color: #1e293b;
border: 2px solid #e2e8f0;
padding: 1rem 2rem;
border-radius: 60px;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s;
}
.btn-buy-now:hover {
background: #f8fafc;
border-color: #cbd5e0;
transform: translateY(-3px);
}
/* Cartes caractéristiques */
.feature-card {
background: white;
border-radius: 24px;
padding: 1.5rem;
box-shadow: 0 10px 25px -8px rgba(0,0,0,0.06);
border: 1px solid rgba(255,255,255,0.5);
transition: transform 0.2s;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 30px -10px rgba(0,0,0,0.1);
}
.feature-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.feature-icon i {
font-size: 1.8rem;
color: #2563eb;
}
/* Avis clients */
.review-card {
background: white;
border-radius: 24px;
padding: 1.8rem;
box-shadow: 0 10px 25px -8px rgba(0,0,0,0.04);
border: 1px solid #f1f5f9;
}
.rating-stars {
color: #fbbf24;
letter-spacing: 2px;
}
.verified-badge {
background: #dcfce7;
color: #166534;
padding: 0.2rem 0.8rem;
border-radius: 30px;
font-size: 0.75rem;
font-weight: 600;
}
/* Produits similaires */
.similar-product-card {
background: white;
border-radius: 24px;
padding: 1.2rem;
transition: all 0.25s;
border: 1px solid #f1f5f9;
cursor: pointer;
}
.similar-product-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 30px -12px rgba(0,0,0,0.1);
border-color: #cbd5e0;
}
/* Accordéon FAQ */
.accordion-faq .accordion-item {
border: none;
background: white;
border-radius: 20px !important;
margin-bottom: 1rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.accordion-faq .accordion-button {
border-radius: 20px !important;
font-weight: 600;
padding: 1.2rem 1.5rem;
background: white;
}
.accordion-faq .accordion-button:not(.collapsed) {
background: #f8fafc;
color: #1e293b;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* Footer */
.footer-section {
background: white;
border-radius: 40px 40px 0 0;
padding: 2.5rem 0;
margin-top: 3rem;
box-shadow: 0 -10px 30px -10px rgba(0,0,0,0.03);
}
/* Responsive */
@media (max-width: 768px) {
.price-current { font-size: 2.5rem; }
.main-product-image { padding: 1rem; }
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-custom sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-headphones me-2"></i>AudioTech
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link fw-semibold px-3" href="#">Produits</a></li>
<li class="nav-item"><a class="nav-link fw-semibold px-3" href="#">Casques</a></li>
<li class="nav-item"><a class="nav-link fw-semibold px-3" href="#">Écouteurs</a></li>
<li class="nav-item"><a class="nav-link fw-semibold px-3" href="#">Accessoires</a></li>
<li class="nav-item"><a class="nav-link fw-semibold px-3" href="#">Support</a></li>
</ul>
<div class="d-flex gap-3">
<button class="btn btn-light rounded-circle p-2 position-relative">
<i class="bi bi-search"></i>
</button>
<button class="btn btn-light rounded-circle p-2 position-relative">
<i class="bi bi-heart"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">2</span>
</button>
<button class="btn btn-primary rounded-pill px-4 fw-semibold">
<i class="bi bi-cart3 me-2"></i>Panier (3)
</button>
</div>
</div>
</div>
</nav>
<!-- Breadcrumb -->
<div class="container mt-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#" class="text-decoration-none text-secondary">Accueil</a></li>
<li class="breadcrumb-item"><a href="#" class="text-decoration-none text-secondary">Casques</a></li>
<li class="breadcrumb-item"><a href="#" class="text-decoration-none text-secondary">Sans fil</a></li>
<li class="breadcrumb-item active fw-semibold" aria-current="page">AudioTech Pro X1</li>
</ol>
</nav>
</div>
<!-- Section principale produit -->
<div class="container mt-3">
<div class="row g-5">
<!-- Galerie gauche -->
<div class="col-lg-6" data-aos="fade-right">
<div class="main-product-image text-center mb-3">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23f1f5f9'/%3E%3Ccircle cx='100' cy='80' r='35' fill='%233b82f6' opacity='0.8'/%3E%3Crect x='70' y='100' width='60' height='45' rx='8' fill='%231e293b'/%3E%3Ccircle cx='80' cy='122' r='8' fill='%23f59e0b'/%3E%3Ccircle cx='120' cy='122' r='8' fill='%23f59e0b'/%3E%3Cpath d='M60 60 L80 40 L120 40 L140 60' stroke='%2394a3b8' stroke-width='3' fill='none'/%3E%3C/svg%3E"
alt="AudioTech Pro X1" class="img-fluid" id="mainProductImage">
</div>
<div class="d-flex gap-3 justify-content-center">
<div class="thumbnail-image active" onclick="changeMainImage(this, 'blue')">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='30' fill='%233b82f6'/%3E%3C/svg%3E" alt="Bleu" class="img-fluid" width="80">
</div>
<div class="thumbnail-image" onclick="changeMainImage(this, 'black')">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='30' fill='%231e293b'/%3E%3C/svg%3E" alt="Noir" class="img-fluid" width="80">
</div>
<div class="thumbnail-image" onclick="changeMainImage(this, 'silver')">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='30' fill='%23cbd5e0'/%3E%3C/svg%3E" alt="Argent" class="img-fluid" width="80">
</div>
<div class="thumbnail-image" onclick="changeMainImage(this, 'red')">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='30' fill='%23ef4444'/%3E%3C/svg%3E" alt="Rouge" class="img-fluid" width="80">
</div>
</div>
</div>
<!-- Infos produit droite -->
<div class="col-lg-6" data-aos="fade-left">
<div class="d-flex gap-2 mb-3">
<span class="badge-new"><i class="bi bi-stars me-1"></i>Nouveau</span>
<span class="badge-bestseller"><i class="bi bi-trophy me-1"></i>Best-seller</span>
</div>
<h1 class="display-5 fw-bold mb-2">AudioTech Pro X1</h1>
<p class="text-secondary mb-4">Casque sans fil à réduction de bruit active · Édition 2026</p>
<!-- Note et avis -->
<div class="d-flex align-items-center gap-3 mb-3">
<div class="d-flex align-items-center">
<span class="rating-stars me-2">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
</span>
<span class="fw-bold">4.8</span>
<span class="text-secondary ms-1">(2,847 avis)</span>
</div>
<span class="verified-badge"><i class="bi bi-patch-check-fill me-1"></i>Vérifié</span>
</div>
<!-- Prix -->
<div class="d-flex align-items-end gap-3 mb-4">
<span class="price-current">249,99 €</span>
<span class="price-original">349,99 €</span>
<span class="discount-badge">-29%</span>
</div>
<p class="text-success small mb-3"><i class="bi bi-check-circle-fill me-1"></i>En stock · Livraison gratuite</p>
<!-- Description courte -->
<p class="mb-4">Découvrez une expérience audio immersive avec la réduction de bruit adaptative, 40h d'autonomie et un design ergonomique premium.</p>
<!-- Choix de couleur -->
<div class="mb-4">
<label class="fw-semibold mb-2">Couleur : <span id="selectedColorName">Bleu Océan</span></label>
<div class="d-flex gap-3">
<div class="color-option active" style="background: #3b82f6;" onclick="selectColor(this, 'Bleu Océan', 'blue')"></div>
<div class="color-option" style="background: #1e293b;" onclick="selectColor(this, 'Noir Minuit', 'black')"></div>
<div class="color-option" style="background: #cbd5e0;" onclick="selectColor(this, 'Argent Lunaire', 'silver')"></div>
<div class="color-option" style="background: #ef4444;" onclick="selectColor(this, 'Rouge Passion', 'red')"></div>
</div>
</div>
<!-- Quantité -->
<div class="mb-4">
<label class="fw-semibold mb-2">Quantité</label>
<div class="d-flex align-items-center gap-3">
<div class="input-group" style="width: 140px;">
<button class="btn btn-outline-secondary" type="button" onclick="updateQuantity(-1)">−</button>
<input type="text" class="form-control text-center border-secondary" id="quantityInput" value="1" readonly>
<button class="btn btn-outline-secondary" type="button" onclick="updateQuantity(1)">+</button>
</div>
<span class="text-secondary small"><i class="bi bi-box-seam me-1"></i>Limite 5 par client</span>
</div>
</div>
<!-- Boutons d'action -->
<div class="d-flex gap-3 mb-4">
<button class="btn-add-cart flex-grow-1"><i class="bi bi-cart-plus me-2"></i>Ajouter au panier</button>
<button class="btn-buy-now flex-grow-1"><i class="bi bi-lightning-charge-fill me-2"></i>Acheter maintenant</button>
<button class="btn btn-outline-secondary rounded-circle p-3"><i class="bi bi-heart"></i></button>
</div>
<!-- Caractéristiques rapides -->
<div class="row g-3 pt-3 border-top">
<div class="col-4">
<div class="d-flex align-items-center gap-2">
<i class="bi bi-bluetooth text-primary"></i>
<span class="small fw-semibold">Bluetooth 5.3</span>
</div>
</div>
<div class="col-4">
<div class="d-flex align-items-center gap-2">
<i class="bi bi-battery-full text-success"></i>
<span class="small fw-semibold">40h autonomie</span>
</div>
</div>
<div class="col-4">
<div class="d-flex align-items-center gap-2">
<i class="bi bi-droplet-half text-info"></i>
<span class="small fw-semibold">IPX4 résistant</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Caractéristiques détaillées -->
<div class="container mt-5 pt-4">
<h2 class="fw-bold mb-4 text-center" data-aos="fade-up">Caractéristiques principales</h2>
<div class="row g-4">
<div class="col-md-3" data-aos="fade-up" data-aos-delay="100">
<div class="feature-card text-center">
<div class="feature-icon mx-auto">
<i class="bi bi-soundwave"></i>
</div>
<h5 class="fw-bold">Audio Spatial</h5>
<p class="small text-secondary">Son 3D immersif avec suivi dynamique des mouvements de tête</p>
</div>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="200">
<div class="feature-card text-center">
<div class="feature-icon mx-auto">
<i class="bi bi-mic"></i>
</div>
<h5 class="fw-bold">6 Microphones</h5>
<p class="small text-secondary">Appels cristallins et réduction de bruit environnementale</p>
</div>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="300">
<div class="feature-card text-center">
<div class="feature-icon mx-auto">
<i class="bi bi-lightning-charge"></i>
</div>
<h5 class="fw-bold">Charge Rapide</h5>
<p class="small text-secondary">10 min de charge = 5 heures d'écoute</p>
</div>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="400">
<div class="feature-card text-center">
<div class="feature-icon mx-auto">
<i class="bi bi-cpu"></i>
</div>
<h5 class="fw-bold">Puce H2</h5>
<p class="small text-secondary">Traitement audio avancé et connexion ultra-stable</p>
</div>
</div>
</div>
</div>
<!-- Spécifications techniques et avis -->
<div class="container mt-5 pt-3">
<div class="row g-4">
<div class="col-lg-7" data-aos="fade-right">
<div class="card border-0 shadow-sm rounded-4 p-4">
<h3 class="fw-bold mb-4"><i class="bi bi-gear me-2"></i>Spécifications techniques</h3>
<div class="row">
<div class="col-sm-6">
<ul class="list-unstyled">
<li class="mb-3 d-flex"><span class="text-secondary w-50">Type</span><span class="fw-semibold">Circum-aural fermé</span></li>
<li class="mb-3 d-flex"><span class="text-secondary w-50">Réponse en fréquence</span><span class="fw-semibold">20 Hz - 40 kHz</span></li>
<li class="mb-3 d-flex"><span class="text-secondary w-50">Impédance</span><span class="fw-semibold">32 Ω</span></li>
<li class="mb-3 d-flex"><span class="text-secondary w-50">Sensibilité</span><span class="fw-semibold">105 dB SPL/mW</span></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="list-unstyled">
<li class="mb-3 d-flex"><span class="text-secondary w-50">Poids</span><span class="fw-semibold">254 g</span></li>
<li class="mb-3 d-flex"><span class="text-secondary w-50">Connectivité</span><span class="fw-semibold">Bluetooth 5.3, Jack 3.5mm, USB-C</span></li>
<li class="mb-3 d-flex"><span class="text-secondary w-50">Codecs supportés</span><span class="fw-semibold">AAC, SBC, LDAC</span></li>
<li class="mb-3 d-flex"><span class="text-secondary w-50">Garantie</span><span class="fw-semibold">2 ans</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-5" data-aos="fade-left">
<div class="card border-0 shadow-sm rounded-4 p-4">
<h3 class="fw-bold mb-4"><i class="bi bi-truck me-2"></i>Livraison & Retours</h3>
<ul class="list-unstyled">
<li class="mb-3"><i class="bi bi-check-circle-fill text-success me-2"></i><span class="fw-semibold">Livraison standard gratuite</span><br><span class="text-secondary ms-4">2-4 jours ouvrés</span></li>
<li class="mb-3"><i class="bi bi-check-circle-fill text-success me-2"></i><span class="fw-semibold">Livraison express</span><br><span class="text-secondary ms-4">24h - 9,99 €</span></li>
<li class="mb-3"><i class="bi bi-arrow-return-left text-primary me-2"></i><span class="fw-semibold">Retours gratuits sous 30 jours</span></li>
<li><i class="bi bi-shield-check text-primary me-2"></i><span class="fw-semibold">Garantie satisfait ou remboursé</span></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Avis clients -->
<div class="container mt-5 pt-3">
<div class="d-flex align-items-center justify-content-between mb-4">
<h2 class="fw-bold mb-0"><i class="bi bi-chat-quote me-2"></i>Avis clients vérifiés</h2>
<a href="#" class="text-decoration-none fw-semibold">Voir tous les avis <i class="bi bi-arrow-right"></i></a>
</div>
<div class="row g-4">
<div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
<div class="review-card">
<div class="d-flex align-items-center gap-3 mb-3">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23e2e8f0'/%3E%3Ccircle cx='24' cy='20' r='8' fill='%2394a3b8'/%3E%3C/svg%3E" alt="Avatar" class="rounded-circle" width="48">
<div>
<h6 class="fw-bold mb-0">Sophie Martin</h6>
<span class="verified-badge"><i class="bi bi-patch-check-fill me-1"></i>Achat vérifié</span>
</div>
</div>
<div class="rating-stars mb-2">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<h6 class="fw-bold">"Qualité audio exceptionnelle"</h6>
<p class="text-secondary small">La réduction de bruit est bluffante. Je les utilise en open space et je n'entends plus rien autour. Le confort est parfait même après plusieurs heures.</p>
<p class="text-secondary small mb-0"><i class="bi bi-clock me-1"></i>Il y a 3 jours</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
<div class="review-card">
<div class="d-flex align-items-center gap-3 mb-3">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23f1f5f9'/%3E%3Ccircle cx='24' cy='20' r='8' fill='%2364748b'/%3E%3C/svg%3E" alt="Avatar" class="rounded-circle" width="48">
<div>
<h6 class="fw-bold mb-0">Thomas Dubois</h6>
<span class="verified-badge"><i class="bi bi-patch-check-fill me-1"></i>Achat vérifié</span>
</div>
</div>
<div class="rating-stars mb-2">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<h6 class="fw-bold">"Design premium et autonomie"</h6>
<p class="text-secondary small">Design sobre et élégant. L'autonomie est incroyable, je les charge une fois par semaine. Application compagnon très complète.</p>
<p class="text-secondary small mb-0"><i class="bi bi-clock me-1"></i>Il y a 1 semaine</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
<div class="review-card">
<div class="d-flex align-items-center gap-3 mb-3">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23fce7f3'/%3E%3Ccircle cx='24' cy='20' r='8' fill='%23ec4899'/%3E%3C/svg%3E" alt="Avatar" class="rounded-circle" width="48">
<div>
<h6 class="fw-bold mb-0">Marie Lefevre</h6>
<span class="verified-badge"><i class="bi bi-patch-check-fill me-1"></i>Achat vérifié</span>
</div>
</div>
<div class="rating-stars mb-2">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i>
</div>
<h6 class="fw-bold">"Très bon mais perfectible"</h6>
<p class="text-secondary small">Son excellent et basses profondes. Petit bémol sur l'application mobile qui pourrait être plus intuitive. Sinon rien à redire.</p>
<p class="text-secondary small mb-0"><i class="bi bi-clock me-1"></i>Il y a 2 semaines</p>
</div>
</div>
</div>
</div>
<!-- Produits similaires -->
<div class="container mt-5 pt-3">
<h2 class="fw-bold mb-4 text-center">Vous pourriez aussi aimer</h2>
<div class="row g-4">
<div class="col-md-3" data-aos="zoom-in" data-aos-delay="100">
<div class="similar-product-card">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%23f8fafc'/%3E%3Ccircle cx='75' cy='60' r='25' fill='%238b5cf6'/%3E%3Crect x='50' y='80' width='50' height='35' rx='6' fill='%231e293b'/%3E%3C/svg%3E" alt="Produit similaire" class="img-fluid mb-3">
<h6 class="fw-bold">AudioTech Air 2</h6>
<p class="small text-secondary mb-2">Écouteurs sans fil</p>
<span class="fw-bold">179,99 €</span>
<span class="text-secondary text-decoration-line-through ms-2 small">199,99 €</span>
</div>
</div>
<div class="col-md-3" data-aos="zoom-in" data-aos-delay="200">
<div class="similar-product-card">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%23f8fafc'/%3E%3Ccircle cx='75' cy='60' r='25' fill='%2310b981'/%3E%3Crect x='50' y='80' width='50' height='35' rx='6' fill='%231e293b'/%3E%3C/svg%3E" alt="Produit similaire" class="img-fluid mb-3">
<h6 class="fw-bold">AudioTech Studio 3</h6>
<p class="small text-secondary mb-2">Casque circum-aural</p>
<span class="fw-bold">299,99 €</span>
</div>
</div>
<div class="col-md-3" data-aos="zoom-in" data-aos-delay="300">
<div class="similar-product-card">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%23f8fafc'/%3E%3Ccircle cx='75' cy='60' r='25' fill='%23f59e0b'/%3E%3Crect x='50' y='80' width='50' height='35' rx='6' fill='%231e293b'/%3E%3C/svg%3E" alt="Produit similaire" class="img-fluid mb-3">
<h6 class="fw-bold">AudioTech Sport</h6>
<p class="small text-secondary mb-2">Écouteurs sport</p>
<span class="fw-bold">149,99 €</span>
</div>
</div>
<div class="col-md-3" data-aos="zoom-in" data-aos-delay="400">
<div class="similar-product-card">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%23f8fafc'/%3E%3Ccircle cx='75' cy='60' r='25' fill='%23ef4444'/%3E%3Crect x='50' y='80' width='50' height='35' rx='6' fill='%231e293b'/%3E%3C/svg%3E" alt="Produit similaire" class="img-fluid mb-3">
<h6 class="fw-bold">AudioTech Pro X1</h6>
<p class="small text-secondary mb-2">Édition limitée</p>
<span class="fw-bold">349,99 €</span>
</div>
</div>
</div>
</div>
<!-- FAQ Accordéon -->
<div class="container mt-5 pt-3">
<h2 class="fw-bold mb-4 text-center">Questions fréquentes</h2>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="accordion accordion-faq" id="faqAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
<i class="bi bi-question-circle me-3 text-primary"></i>Quelle est la durée de vie de la batterie ?
</button>
</h2>
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Le AudioTech Pro X1 offre jusqu'à 40 heures d'autonomie avec la réduction de bruit activée, et jusqu'à 55 heures sans ANC. Une charge rapide de 10 minutes offre 5 heures d'écoute supplémentaires.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
<i class="bi bi-question-circle me-3 text-primary"></i>Le casque est-il compatible avec les assistants vocaux ?
</button>
</h2>
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Oui, le Pro X1 est compatible avec Siri, Google Assistant et Alexa. Activez l'assistant par simple pression sur l'oreillette droite.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
<i class="bi bi-question-circle me-3 text-primary"></i>Qu'y a-t-il dans la boîte ?
</button>
</h2>
<div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
La boîte contient : le casque AudioTech Pro X1, un étui de transport rigide, un câble USB-C, un câble audio jack 3.5mm, et la documentation.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
<i class="bi bi-question-circle me-3 text-primary"></i>Peut-on utiliser le casque en mode filaire ?
</button>
</h2>
<div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Absolument. Le Pro X1 peut être utilisé avec le câble jack 3.5mm fourni, même lorsque la batterie est déchargée (mode passif).
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer-section">
<div class="container">
<div class="row g-4">
<div class="col-md-4">
<h5 class="fw-bold mb-3"><i class="bi bi-headphones me-2"></i>AudioTech</h5>
<p class="text-secondary small">Le son premium accessible à tous. Découvrez notre gamme complète d'équipements audio.</p>
<div class="d-flex gap-3">
<a href="#" class="text-secondary"><i class="bi bi-facebook fs-5"></i></a>
<a href="#" class="text-secondary"><i class="bi bi-twitter fs-5"></i></a>
<a href="#" class="text-secondary"><i class="bi bi-instagram fs-5"></i></a>
<a href="#" class="text-secondary"><i class="bi bi-youtube fs-5"></i></a>
</div>
</div>
<div class="col-md-2">
<h6 class="fw-bold">Produits</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Casques</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Écouteurs</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Accessoires</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Nouveautés</a></li>
</ul>
</div>
<div class="col-md-2">
<h6 class="fw-bold">Support</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Centre d'aide</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Contact</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Garantie</a></li>
<li class="mb-2"><a href="#" class="text-secondary text-decoration-none small">Retours</a></li>
</ul>
</div>
<div class="col-md-4">
<h6 class="fw-bold">Newsletter</h6>
<p class="text-secondary small">Recevez nos offres exclusives</p>
<div class="input-group">
<input type="email" class="form-control" placeholder="Votre email">
<button class="btn btn-dark" type="button">S'abonner</button>
</div>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col text-center text-secondary small">
© 2026 AudioTech. Tous droits réservés. Fait avec <i class="bi bi-heart-fill text-danger"></i> pour une expérience audio exceptionnelle.
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
// Initialisation AOS
AOS.init({ duration: 800, once: true });
// Changement d'image principale
function changeMainImage(element, color) {
document.querySelectorAll('.thumbnail-image').forEach(el => el.classList.remove('active'));
element.classList.add('active');
const mainImg = document.getElementById('mainProductImage');
const colors = {
blue: '3b82f6', black: '1e293b', silver: 'cbd5e0', red: 'ef4444'
};
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 200 200"><rect width="200" height="200" fill="%23f1f5f9"/><circle cx="100" cy="80" r="35" fill="%23${colors[color]}" opacity="0.8"/><rect x="70" y="100" width="60" height="45" rx="8" fill="%231e293b"/><circle cx="80" cy="122" r="8" fill="%23f59e0b"/><circle cx="120" cy="122" r="8" fill="%23f59e0b"/><path d="M60 60 L80 40 L120 40 L140 60" stroke="%2394a3b8" stroke-width="3" fill="none"/></svg>`;
mainImg.src = 'data:image/svg+xml,' + encodeURIComponent(svg);
}
// Sélection de couleur
function selectColor(element, colorName, colorCode) {
document.querySelectorAll('.color-option').forEach(el => el.classList.remove('active'));
element.classList.add('active');
document.getElementById('selectedColorName').textContent = colorName;
}
// Gestion quantité
function updateQuantity(change) {
const input = document.getElementById('quantityInput');
let value = parseInt(input.value) + change;
value = Math.max(1, Math.min(5, value));
input.value = value;
}
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur