Bootstrap
Bootstrap5
Beauty
Html
Css
Template de beauté Bootstrap 5 avec design élégant et moderne.
<!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">
<title>Website Beauty Bootstrap 5 | AngularForAll</title>
<!-- Bootstrap 5 + Icons -->
<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=Cormorant+Garamond:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #fdfbf9;
color: #2c2c2c;
}
h1, h2, h3, h4, .navbar-brand, .section-title {
font-family: 'Cormorant Garamond', serif;
}
/* Navbar */
.navbar {
padding: 1rem 0;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
}
.navbar-brand {
font-weight: 700;
font-size: 2rem;
color: #9b6b43 !important;
}
.navbar-brand i {
color: #c49a6c;
}
.nav-link {
font-weight: 500;
color: #4a4a4a !important;
margin: 0 0.5rem;
transition: color 0.2s;
}
.nav-link:hover {
color: #9b6b43 !important;
}
.btn-appointment {
background: #9b6b43;
color: white;
border-radius: 40px;
padding: 0.6rem 1.8rem;
font-weight: 600;
border: none;
transition: all 0.2s;
}
.btn-appointment:hover {
background: #7e5433;
transform: scale(1.03);
}
/* Hero Section */
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
url('https://images.pexels.com/photos/3993449/pexels-photo-3993449.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
background-size: cover;
background-position: center 40%;
padding: 6rem 0;
margin-top: -1px;
}
.hero-title {
font-weight: 700;
font-size: 4rem;
color: white;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1.3rem;
color: #f5e6d8;
font-weight: 300;
}
/* Section Title */
.section-title {
font-weight: 700;
font-size: 2.8rem;
color: #2c2c2c;
margin-bottom: 0.5rem;
}
.section-subtitle {
color: #9b6b43;
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 4px;
}
.divider {
width: 70px;
height: 2px;
background: #c49a6c;
margin: 1rem auto;
}
/* Service Cards */
.service-card {
border: none;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: 100%;
background: white;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 45px rgba(155, 107, 67, 0.12);
}
.service-img-wrapper {
position: relative;
height: 260px;
overflow: hidden;
}
.service-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s;
}
.service-card:hover .service-img-wrapper img {
transform: scale(1.08);
}
.price-tag {
position: absolute;
bottom: 20px;
right: 20px;
background: #9b6b43;
color: white;
padding: 0.5rem 1.5rem;
border-radius: 40px;
font-weight: 700;
font-size: 1.3rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.duration {
color: #9b6b43;
font-weight: 600;
font-size: 0.9rem;
}
/* Prestation Cards */
.prestation-card {
background: white;
border-radius: 20px;
padding: 2rem 1.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
border: 1px solid #f0e4d8;
transition: all 0.3s;
height: 100%;
text-align: center;
}
.prestation-card:hover {
border-color: #c49a6c;
box-shadow: 0 15px 35px rgba(155, 107, 67, 0.08);
}
.prestation-icon {
width: 85px;
height: 85px;
background: #f8f0e8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.prestation-icon i {
font-size: 2.5rem;
color: #9b6b43;
}
/* Équipe Cards */
.team-card {
border: none;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
transition: all 0.3s;
background: white;
}
.team-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 35px rgba(155, 107, 67, 0.1);
}
.team-img {
height: 320px;
overflow: hidden;
}
.team-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.team-card:hover .team-img img {
transform: scale(1.05);
}
.team-social a {
color: #9b6b43;
margin: 0 8px;
font-size: 1.2rem;
transition: color 0.2s;
}
.team-social a:hover {
color: #7e5433;
}
/* Gallery */
.gallery-item {
position: relative;
border-radius: 20px;
overflow: hidden;
margin-bottom: 24px;
}
.gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.5s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-overlay {
position: absolute;
inset: 0;
background: rgba(155, 107, 67, 0.4);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay i {
color: white;
font-size: 2.5rem;
}
/* Avis */
.testi-card {
background: white;
border-radius: 30px;
padding: 2.5rem 2rem;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
border-bottom: 4px solid #c49a6c;
}
.stars {
color: #fbbf24;
letter-spacing: 3px;
}
.avatar-testi {
width: 65px;
height: 65px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #c49a6c;
}
/* Promotion Banner */
.promo-banner {
background: linear-gradient(135deg, #9b6b43 0%, #7e5433 100%);
border-radius: 30px;
padding: 3rem 2.5rem;
color: white;
}
.btn-promo {
background: white;
color: #9b6b43;
border-radius: 50px;
padding: 0.9rem 2.5rem;
font-weight: 700;
border: none;
}
.btn-promo:hover {
background: #f5e6d8;
}
/* Footer */
footer {
background: #1f1a16;
color: #c4b4a8;
padding: 3.5rem 0 2rem;
}
.footer-link {
color: #b8a898;
text-decoration: none;
font-size: 0.95rem;
transition: color 0.2s;
}
.footer-link:hover {
color: #c49a6c;
}
.social-icon {
background: #2c241e;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #d4c4b5;
transition: all 0.2s;
}
.social-icon:hover {
background: #9b6b43;
color: white;
}
/* Responsive */
@media (max-width: 768px) {
.hero-title {
font-size: 2.8rem;
}
.section-title {
font-size: 2.2rem;
}
.promo-banner {
padding: 2rem 1.5rem;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 2.2rem;
}
}
</style>
</head>
<body>
<!-- ==================== NAVBAR ==================== -->
<nav class="navbar navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-scissors me-2"></i>L'Atelier
</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 active" href="#">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">L'équipe</a></li>
<li class="nav-item"><a class="nav-link" href="#">Galerie</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
<a href="#" class="btn btn-appointment"><i class="bi bi-calendar2-week me-2"></i>Prendre RDV</a>
</div>
</div>
</nav>
<!-- ==================== HERO ==================== -->
<section class="hero-section d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-lg-7 text-white">
<span class="badge bg-light bg-opacity-25 text-white mb-3 px-4 py-2 rounded-pill">
<i class="bi bi-star-fill me-1"></i> Salon premium Paris 8
</span>
<h1 class="hero-title">Révélez votre beauté<br>naturelle</h1>
<p class="hero-subtitle mb-4">Coiffure · Coloration · Soins · Barbier</p>
<div class="d-flex gap-3">
<a href="#" class="btn btn-light btn-lg rounded-pill px-4 py-3 fw-semibold">Découvrir nos services</a>
<a href="#" class="btn btn-outline-light btn-lg rounded-pill px-4 py-3">Prendre rendez-vous</a>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== PRESTATIONS ==================== -->
<section class="container my-5 pt-4">
<div class="text-center mb-5">
<span class="section-subtitle">Ce que nous proposons</span>
<h2 class="section-title">Nos prestations</h2>
<div class="divider"></div>
<p class="text-secondary">Des services personnalisés pour sublimer votre style</p>
</div>
<div class="row g-4">
<div class="col-md-3 col-6">
<div class="prestation-card">
<div class="prestation-icon">
<i class="bi bi-scissors"></i>
</div>
<h5 class="fw-bold mb-2">Coupe Femme</h5>
<p class="text-secondary small">Shampoing, coupe, brushing personnalisé</p>
<span class="fw-bold" style="color:#9b6b43;">à partir de 55€</span>
</div>
</div>
<div class="col-md-3 col-6">
<div class="prestation-card">
<div class="prestation-icon">
<i class="bi bi-palette"></i>
</div>
<h5 class="fw-bold mb-2">Coloration</h5>
<p class="text-secondary small">Mèches, balayage, coloration végétale</p>
<span class="fw-bold" style="color:#9b6b43;">à partir de 75€</span>
</div>
</div>
<div class="col-md-3 col-6">
<div class="prestation-card">
<div class="prestation-icon">
<i class="bi bi-droplet"></i>
</div>
<h5 class="fw-bold mb-2">Soins capillaires</h5>
<p class="text-secondary small">Kératine, botox, soin profond</p>
<span class="fw-bold" style="color:#9b6b43;">à partir de 45€</span>
</div>
</div>
<div class="col-md-3 col-6">
<div class="prestation-card">
<div class="prestation-icon">
<i class="bi bi-gem"></i>
</div>
<h5 class="fw-bold mb-2">Coiffure de mariage</h5>
<p class="text-secondary small">Chignons, essais, forfaits mariée</p>
<span class="fw-bold" style="color:#9b6b43;">à partir de 120€</span>
</div>
</div>
</div>
</section>
<!-- ==================== SERVICES DÉTAILLÉS ==================== -->
<section class="bg-light py-5 mt-4">
<div class="container">
<div class="text-center mb-5">
<span class="section-subtitle">Découvrez</span>
<h2 class="section-title">Nos services phares</h2>
<div class="divider"></div>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="service-card">
<div class="service-img-wrapper">
<img src="https://images.pexels.com/photos/3993470/pexels-photo-3993470.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Coupe" onerror="this.src='https://placehold.co/400x300/9b6b43/white?text=Coupe'">
<span class="price-tag">55€</span>
</div>
<div class="card-body p-4">
<h5 class="fw-bold mb-2">Coupe & Brushing</h5>
<p class="text-secondary small mb-2">Diagnostic personnalisé, shampooing relaxant, coupe sur-mesure et brushing adapté à votre morphologie.</p>
<span class="duration"><i class="bi bi-clock me-1"></i> 1h - 1h30</span>
<a href="#" class="stretched-link text-decoration-none d-block mt-3 fw-semibold" style="color:#9b6b43;">Réserver <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="service-card">
<div class="service-img-wrapper">
<img src="https://images.pexels.com/photos/3356175/pexels-photo-3356175.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Balayage" onerror="this.src='https://placehold.co/400x300/c49a6c/white?text=Balayage'">
<span class="price-tag">120€</span>
</div>
<div class="card-body p-4">
<h5 class="fw-bold mb-2">Balayage Californien</h5>
<p class="text-secondary small mb-2">Technique de balayage pour un effet soleil naturel. Éclaircissement progressif et lumineux.</p>
<span class="duration"><i class="bi bi-clock me-1"></i> 2h - 2h30</span>
<a href="#" class="stretched-link text-decoration-none d-block mt-3 fw-semibold" style="color:#9b6b43;">Réserver <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="service-card">
<div class="service-img-wrapper">
<img src="https://images.pexels.com/photos/1813272/pexels-photo-1813272.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Barbier" onerror="this.src='https://placehold.co/400x300/7e5433/white?text=Barbier'">
<span class="price-tag">35€</span>
</div>
<div class="card-body p-4">
<h5 class="fw-bold mb-2">Taille de barbe</h5>
<p class="text-secondary small mb-2">Taille et définition de la barbe, contour de nuque, soin hydratant. Pour un style impeccable.</p>
<span class="duration"><i class="bi bi-clock me-1"></i> 30 - 45 min</span>
<a href="#" class="stretched-link text-decoration-none d-block mt-3 fw-semibold" style="color:#9b6b43;">Réserver <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== L'ÉQUIPE ==================== -->
<section class="container my-5 py-4">
<div class="text-center mb-5">
<span class="section-subtitle">Des experts à votre écoute</span>
<h2 class="section-title">Notre équipe</h2>
<div class="divider"></div>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-3">
<div class="team-card">
<div class="team-img">
<img src="https://images.pexels.com/photos/3771097/pexels-photo-3771097.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Sophie" onerror="this.src='https://placehold.co/300x400/9b6b43/white?text=Sophie'">
</div>
<div class="card-body text-center p-4">
<h5 class="fw-bold mb-1">Sophie Martin</h5>
<p class="text-secondary small mb-2">Directrice artistique</p>
<p class="small text-secondary">Experte en coloration et coiffure de mariage</p>
<div class="team-social">
<a href="#"><i class="bi bi-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="team-card">
<div class="team-img">
<img src="https://images.pexels.com/photos/3760258/pexels-photo-3760258.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Thomas" onerror="this.src='https://placehold.co/300x400/c49a6c/white?text=Thomas'">
</div>
<div class="card-body text-center p-4">
<h5 class="fw-bold mb-1">Thomas Bernard</h5>
<p class="text-secondary small mb-2">Maître barbier</p>
<p class="small text-secondary">Spécialiste barbe et coupes homme tendance</p>
<div class="team-social">
<a href="#"><i class="bi bi-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="team-card">
<div class="team-img">
<img src="https://images.pexels.com/photos/3806287/pexels-photo-3806287.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Julie" onerror="this.src='https://placehold.co/300x400/7e5433/white?text=Julie'">
</div>
<div class="card-body text-center p-4">
<h5 class="fw-bold mb-1">Julie Dubois</h5>
<p class="text-secondary small mb-2">Coloriste</p>
<p class="small text-secondary">Spécialiste balayage et mèches</p>
<div class="team-social">
<a href="#"><i class="bi bi-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="team-card">
<div class="team-img">
<img src="https://images.pexels.com/photos/3993466/pexels-photo-3993466.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Emma" onerror="this.src='https://placehold.co/300x400/9b6b43/white?text=Emma'">
</div>
<div class="card-body text-center p-4">
<h5 class="fw-bold mb-1">Emma Leroy</h5>
<p class="text-secondary small mb-2">Coiffeuse styliste</p>
<p class="small text-secondary">Coupes tendance et coiffures événementielles</p>
<div class="team-social">
<a href="#"><i class="bi bi-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== GALERIE ==================== -->
<section class="bg-light py-5">
<div class="container">
<div class="text-center mb-5">
<span class="section-subtitle">Inspirations</span>
<h2 class="section-title">Galerie</h2>
<div class="divider"></div>
</div>
<div class="row g-3">
<div class="col-6 col-md-4 col-lg-3">
<div class="gallery-item">
<img src="https://images.pexels.com/photos/3065209/pexels-photo-3065209.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Gallery 1" onerror="this.src='https://placehold.co/300/9b6b43/white?text=Coiffure'">
<div class="gallery-overlay">
<i class="bi bi-zoom-in"></i>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="gallery-item">
<img src="https://images.pexels.com/photos/3993472/pexels-photo-3993472.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Gallery 2" onerror="this.src='https://placehold.co/300/c49a6c/white?text=Coloration'">
<div class="gallery-overlay">
<i class="bi bi-zoom-in"></i>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="gallery-item">
<img src="https://images.pexels.com/photos/3992868/pexels-photo-3992868.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Gallery 3" onerror="this.src='https://placehold.co/300/7e5433/white?text=Barbier'">
<div class="gallery-overlay">
<i class="bi bi-zoom-in"></i>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="gallery-item">
<img src="https://images.pexels.com/photos/3992864/pexels-photo-3992864.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Gallery 4" onerror="this.src='https://placehold.co/300/9b6b43/white?text=Chignon'">
<div class="gallery-overlay">
<i class="bi bi-zoom-in"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== AVIS CLIENTS ==================== -->
<section class="container my-5 py-4">
<div class="text-center mb-5">
<span class="section-subtitle">Ils nous font confiance</span>
<h2 class="section-title">Avis clients</h2>
<div class="divider"></div>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="testi-card">
<div class="stars mb-3">★★★★★</div>
<p class="fst-italic mb-4">"Un accueil chaleureux et un résultat magnifique ! Sophie a parfaitement compris ce que je voulais. Je recommande vivement."</p>
<div class="d-flex align-items-center gap-3">
<img src="https://placehold.co/100/c49a6c/white?text=CL" class="avatar-testi" alt="avatar" onerror="this.src='https://placehold.co/100/9b6b43/white?text=C'">
<div>
<h6 class="fw-bold mb-0">Camille L.</h6>
<small class="text-secondary">Coupe & Balayage</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="testi-card">
<div class="stars mb-3">★★★★★</div>
<p class="fst-italic mb-4">"Thomas est un véritable artiste de la barbe. Service impeccable, salon très agréable. Ma nouvelle adresse !"</p>
<div class="d-flex align-items-center gap-3">
<img src="https://placehold.co/100/c49a6c/white?text=AR" class="avatar-testi" alt="avatar" onerror="this.src='https://placehold.co/100/7e5433/white?text=A'">
<div>
<h6 class="fw-bold mb-0">Antoine R.</h6>
<small class="text-secondary">Taille de barbe</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== PROMOTION ==================== -->
<section class="container mb-5">
<div class="promo-banner">
<div class="row align-items-center">
<div class="col-lg-8">
<h3 class="fw-bold display-6 text-white mb-3">-20% sur votre première visite</h3>
<p class="text-white-50 mb-lg-0">Offre de bienvenue pour toute nouvelle cliente. Sur présentation de ce bon.</p>
</div>
<div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
<a href="#" class="btn btn-promo"><i class="bi bi-gift me-2"></i>Profiter de l'offre</a>
</div>
</div>
</div>
</section>
<!-- ==================== FOOTER ==================== -->
<footer>
<div class="container">
<div class="row gy-4">
<div class="col-md-4">
<h4 class="text-white fw-bold"><i class="bi bi-scissors me-2"></i>L'Atelier</h4>
<p class="small" style="color:#b8a898;">Salon de coiffure premium · Coupe · Coloration · Soins</p>
<p class="small" style="color:#b8a898;"><i class="bi bi-geo-alt-fill me-1"></i> 42 avenue Montaigne, 75008 Paris</p>
<p class="small" style="color:#b8a898;"><i class="bi bi-telephone me-1"></i> +33 1 42 68 55 90</p>
<p class="small" style="color:#b8a898;"><i class="bi bi-envelope me-1"></i> contact@latelier-coiffure.fr</p>
<div class="d-flex gap-3 mt-3">
<a href="#" class="social-icon"><i class="bi bi-instagram"></i></a>
<a href="#" class="social-icon"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-icon"><i class="bi bi-pinterest"></i></a>
</div>
</div>
<div class="col-6 col-md-2">
<h6 class="text-white fw-semibold">Services</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="footer-link">Coupe femme</a></li>
<li class="mb-2"><a href="#" class="footer-link">Coloration</a></li>
<li class="mb-2"><a href="#" class="footer-link">Balayage</a></li>
<li class="mb-2"><a href="#" class="footer-link">Barbier</a></li>
</ul>
</div>
<div class="col-6 col-md-2">
<h6 class="text-white fw-semibold">Infos</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="footer-link">Tarifs</a></li>
<li class="mb-2"><a href="#" class="footer-link">Réservation</a></li>
<li class="mb-2"><a href="#" class="footer-link">Recrutement</a></li>
<li class="mb-2"><a href="#" class="footer-link">Blog</a></li>
</ul>
</div>
<div class="col-md-3">
<h6 class="text-white fw-semibold">Horaires</h6>
<ul class="list-unstyled small" style="color:#b8a898;">
<li class="mb-2 d-flex justify-content-between"><span>Lundi</span> <span>Fermé</span></li>
<li class="mb-2 d-flex justify-content-between"><span>Mardi - Vendredi</span> <span>10h - 19h</span></li>
<li class="mb-2 d-flex justify-content-between"><span>Samedi</span> <span>9h - 18h</span></li>
<li class="mb-2 d-flex justify-content-between"><span>Dimanche</span> <span>Fermé</span></li>
</ul>
</div>
</div>
<hr class="opacity-25 mt-4">
<div class="d-flex flex-wrap justify-content-between small" style="color:#8a7a6c;">
<span>© 2026 L'Atelier. Tous droits réservés.</span>
<span>
<a href="#" class="footer-link me-3">Mentions légales</a>
<a href="#" class="footer-link">CGV</a>
</span>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>