<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Achat d'Art : Découvrez une collection exclusive de peintures, photographies, sculptures, art numérique et musique par des artistes talentueux.">
<meta name="keywords" content="art, peintures, photographies, sculptures, art numérique, musique, achat d'art">
<meta name="author" content="Achat d'Art">
<title>Achat d'Art musique, photographies, tableaux de peintres, art numérique, sculptures</title>
<meta property="og:title" content="Achat d'Art - Galerie d'Art en Ligne">
<meta property="og:description" content="Explorez notre collection unique de peintures, photographies, sculptures, art numérique et musique.">
<meta property="og:image" content="https://images.unsplash.com/photo-1516321497487-e288fb19713f">
<meta property="og:url" content="https://www.achatdart.fr">
<link rel="alternate" hreflang="en-GB" href="https://www.achatdart.fr/en/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Achat d'Art - Galerie d'Art en Ligne">
<meta name="twitter:description" content="Explorez notre collection unique de peintures, photographies, sculptures, art numérique et musique.">
<meta name="twitter:image" content="https://images.unsplash.com/photo-1516321497487-e288fb19713f">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Achat d'Art",
"url": "https://www.achatdart.fr",
"potentialAction": {
"@type": "SearchAction",
"target": "https://www.achatdart.fr/search?q={search_term_string}",
"query-input": "required name=search_term_string"
},
"description": "Galerie d'art en ligne proposant des peintures, photographies, sculptures, art numérique et musique.",
"publisher": {
"@type": "Organization",
"name": "Achat d'Art",
"logo": {
"@type": "ImageObject",
"url": "https://www.achatdart.fr/logo.png"
}
},
"sameAs": [
"https://www.facebook.com/achatdart",
"https://www.instagram.com/achatdart",
"https://www.twitter.com/achatdart"
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ItemList",
"itemListElement": [
{
"@type": "Product",
"name": "Tableau Abstrait",
"image": "https://images.unsplash.com/photo-1506744038136-46273834b3fb",
"description": "Tableau abstrait par Philippe Morel artiste peintre Chamaliérois",
"sku": "ART001",
"brand": {
"@type": "Brand",
"name": "Achat d'Art"
},
"offers": {
"@type": "Offer",
"priceCurrency": "EUR",
"price": "500",
"availability": "https://schema.org/InStock"
}
}
]
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
</noscript>
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/peintures.html", "/photographies.html", "/sculptures.html", "/musique.html"]
}
]
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Playfair Display', serif;
}
body {
background-color: #f8f1e9;
color: #2b2b2b;
line-height: 1.7; /* Enhanced readability with airy line-height */
overflow-x: hidden; /* Prevent horizontal scroll on mobile */
}
/* Animations Keyframes - Respect reduced motion */
@media (prefers-reduced-motion: no-preference) {
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(1rem); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes zoom {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
}
/* Header - Mobile-first: Compact, burger menu */
header {
background: linear-gradient(135deg, #2b2b2b, #4a4a4a);
padding: 1rem 1.5rem; /* Generous but mobile-optimized padding */
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
animation: fadeIn 1s ease-out;
}
header h1 {
color: #fff;
font-size: 1.5rem; /* Responsive font-size for mobile */
letter-spacing: 0.1rem;
margin: 0;
}
/* Burger Menu - Hidden on desktop, toggles nav */
#burger {
display: block; /* Mobile-first: Show on small screens */
background: none;
border: none;
color: #fff;
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
min-height: 44px; /* Touch target min 44px */
min-width: 44px;
border-radius: 4px;
transition: background 0.3s;
}
#burger:hover,
#burger:focus {
background: rgba(255, 255, 255, 0.1);
outline: 2px solid #d4a373;
outline-offset: 2px;
}
#burger:focus-visible {
outline: 2px solid #d4a373;
}
.nav-menu {
display: none; /* Hidden by default on mobile */
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #2b2b2b;
flex-direction: column;
padding: 1rem;
gap: 1rem;
animation: fadeIn 0.3s ease-out;
}
.nav-menu.open {
display: flex; /* Toggle to show */
}
nav ul {
display: flex;
flex-direction: column; /* Stack on mobile */
list-style: none;
gap: 1rem;
width: 100%;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 1.1rem;
padding: 0.75rem 1rem; /* Touch-friendly padding */
border-radius: 4px;
transition: color 0.3s, transform 0.3s;
position: relative;
display: block;
min-height: 44px; /* Touch target */
}
nav a:hover,
nav a:focus {
color: #d4a373;
transform: translateY(-2px);
background: rgba(212, 163, 115, 0.1);
}
nav a:focus {
outline: 2px solid #d4a373;
outline-offset: 2px;
}
nav a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 1rem;
right: 1rem;
background: #d4a373;
transition: width 0.3s;
}
nav a:hover::after,
nav a:focus::after {
width: 100%;
}
nav a:visited {
color: #ccc;
}
/* Hero Section - Responsive height, centered content */
.hero {
height: 70vh; /* Adjusted for mobile viewport */
position: relative;
overflow: hidden;
animation: fadeIn 1.5s ease-out;
display: flex;
align-items: center;
justify-content: center;
}
.carousel {
width: 100%;
height: 100%;
display: flex;
transition: transform 0.5s ease-in-out;
will-change: transform; /* Optimize for touch performance */
}
.carousel-slide {
min-width: 100%;
height: 100%;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
padding: 1rem; /* Airy padding */
flex-shrink: 0; /* Prevent shrinking during swipe */
}
.carousel-slide h2 {
font-size: 2rem; /* Smaller on mobile, scales up */
margin-bottom: 1rem;
}
.carousel-slide p {
font-size: 1.1rem;
max-width: 90%;
margin: 0 auto;
}
/* Carousel Controls - Touch-optimized */
.carousel-controls {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
}
.carousel-controls button {
background: rgba(255, 255, 255, 0.3);
border: none;
width: 2rem;
height: 0.625rem;
cursor: pointer;
border-radius: 0.3125rem;
transition: background 0.3s;
min-height: 44px; /* Ensure tappable via padding if needed */
padding: 1rem 0; /* Vertical touch space */
}
.carousel-controls button.active {
background: #d4a373;
}
.carousel-controls button:hover,
.carousel-controls button:focus {
background: #b88b5a;
}
.carousel-controls button:focus {
outline: 2px solid #d4a373;
outline-offset: 2px;
}
/* Gallery Section - Grid auto-fits to 1 col on mobile */
.gallery {
padding: 2rem 1.5rem; /* Mobile padding, generous */
max-width: 1400px;
margin: 0 auto;
animation: fadeIn 2s ease-out;
}
.gallery h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
color: #2b2b2b;
}
.art-grid {
display: grid;
grid-template-columns: 1fr; /* Mobile: 1 column */
gap: 2rem; /* Airy gaps */
}
.art-item {
position: relative;
overflow: hidden;
border-radius: 0.625rem;
box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
animation: fadeIn 2.5s ease-out;
}
.art-item:hover,
.art-item:focus-within {
transform: translateY(-0.3125rem);
}
.art-item img {
width: 100%;
height: auto; /* Responsive height */
aspect-ratio: 1 / 1.2; /* Maintain proportion */
object-fit: cover;
transition: transform 0.5s;
}
.art-item:hover img,
.art-item:focus-within img {
animation: zoom 0.5s ease-in-out forwards;
}
.art-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
transition: opacity 0.3s;
padding: 1rem;
text-align: center;
}
.art-item:hover .art-overlay,
.art-item:focus-within .art-overlay {
opacity: 1;
}
.art-overlay h3 {
font-size: 1.25rem;
margin-bottom: 0.625rem;
}
.art-overlay p {
font-size: 0.875rem;
margin-bottom: 1.25rem;
}
.art-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
.art-actions button {
background: #d4a373;
border: none;
padding: 0.75rem 1.5rem; /* Touch-friendly */
color: #fff;
font-size: 0.875rem;
cursor: pointer;
border-radius: 0.3125rem;
transition: background 0.3s, transform 0.2s;
min-height: 44px;
min-width: 100px; /* Prevent overlap */
}
.art-actions button:hover,
.art-actions button:focus {
background: #b88b5a;
transform: scale(1.05);
animation: pulse 0.5s;
}
.art-actions button:focus {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Rating System - Keyboard/touch accessible */
.rating {
margin: 0.625rem 0;
font-size: 1.125rem;
display: flex;
justify-content: center;
}
.rating span {
color: #d4a373;
cursor: pointer;
transition: transform 0.2s;
padding: 0.25rem;
min-height: 44px; /* Touch target */
display: inline-flex;
align-items: center;
}
.rating span:hover,
.rating span:focus {
transform: scale(1.2);
}
/* Comment Modal - Full-screen on mobile, accessible trap */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
z-index: 2000;
padding: 1rem;
}
.modal-content {
background: #fff;
padding: 1.5rem;
border-radius: 0.625rem;
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
animation: fadeIn 0.5s ease-out;
}
.modal-content h3 {
margin-bottom: 1rem;
}
.modal-content textarea {
width: 100%;
height: 6.25rem;
margin-bottom: 0.625rem;
padding: 0.75rem;
border-radius: 0.3125rem;
border: 1px solid #ccc;
font-family: inherit;
resize: vertical;
}
.modal-content button {
background: #d4a373;
border: none;
padding: 0.75rem 1.5rem;
color: #fff;
cursor: pointer;
border-radius: 0.3125rem;
transition: background 0.3s;
margin-right: 0.5rem;
min-height: 44px;
}
.modal-content button:hover,
.modal-content button:focus {
background: #b88b5a;
}
.modal-content button:focus {
outline: 2px solid #2b2b2b;
outline-offset: 2px;
}
/* Footer - Stacks on mobile, grid on larger */
footer {
background: #2b2b2b;
color: #fff;
padding: 2rem 1.5rem;
display: grid;
grid-template-columns: 1fr; /* Mobile: Single column */
gap: 2rem;
animation: fadeIn 3s ease-out;
}
footer h3 {
font-size: 1.125rem;
margin-bottom: 0.9375rem;
}
footer a {
color: #d4a373;
text-decoration: none;
display: block;
margin-bottom: 0.625rem;
transition: color 0.3s, transform 0.3s;
padding: 0.25rem 0;
}
footer a:hover,
footer a:focus {
color: #b88b5a;
transform: translateX(0.3125rem);
}
footer a:focus {
outline: 2px solid #d4a373;
outline-offset: 2px;
}
.social-icons a {
font-size: 1.25rem;
margin-right: 0.9375rem;
display: inline-block;
padding: 0.5rem;
min-height: 44px;
}
.footer-bottom {
text-align: center;
margin-top: 1.25rem;
font-size: 0.8125rem;
border-top: 1px solid #4a4a4a;
padding-top: 1rem;
}
/* Media Queries: Tablet+ enhancements */
@media (min-width: 768px) {
header {
padding: 1rem 3rem;
}
header h1 {
font-size: 2rem;
}
#burger {
display: none; /* Hide burger on tablet+ */
}
.nav-menu {
position: static;
display: block; /* Show inline nav */
}
nav ul {
flex-direction: row;
gap: 1.25rem;
}
nav a {
padding: 0.5rem 1rem;
}
.hero {
height: 100vh;
}
.carousel-slide h2 {
font-size: 3.5rem;
}
.carousel-slide p {
font-size: 1.3rem;
max-width: 600px;
}
.gallery {
padding: 5rem 3rem;
}
.gallery h2 {
font-size: 2.5rem;
}
.art-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.875rem;
}
.art-overlay h3 {
font-size: 1.5rem;
}
footer {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
padding: 2.5rem 3rem;
gap: 1.875rem;
}
.footer-bottom {
grid-column: 1 / -1; /* Span full on grid */
margin-top: 1.25rem;
}
}
/* Desktop enhancements */
@media (min-width: 1024px) {
.art-grid {
gap: 2rem;
}
.art-item img {
height: 18.75rem; /* Fixed height on large screens */
}
}
</style>
</head>
<body>
<header role="banner">
<h1>Achat d'Art</h1>
<button id="burger" aria-label="Toggle menu principal" aria-expanded="false" aria-controls="main-nav">☰</button>
<nav aria-label="Menu principal">
<div class="nav-menu" id="main-nav">
<ul>
<li><a href="peintures.html" aria-label="Peintures">Peintures</a></li>
<li><a href="photographies.html" aria-label="Photographies">Photographies</a></li>
<li><a href="sculptures.html" aria-label="Sculptures">Sculptures</a></li>
<li><a href="art-numerique.html" aria-label="Art Numérique">Art Numérique</a></li>
<li><a href="musique.html" aria-label="Musique">Musique</a></li>
<li><a href="cart.html" aria-label="Panier">Panier</a></li>
<li><a href="contact.html" aria-label="Contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main>
<section class="hero" aria-label="Carrousel des œuvres en vedette">
<div class="carousel" id="carousel">
<figure class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1516321497487-e288fb19713f');" role="img" aria-label="Art d'exception">
<figcaption>
<h2>Art d'exception</h2>
<p>Explorez notre collection unique de peintures et sculptures.</p>
</figcaption>
</figure>
<figure class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb');" role="img" aria-label="Photographies uniques">
<figcaption>
<h2>Photographies uniques</h2>
<p>Captures d'instants magiques par des artistes talentueux, en tirages limités exclusifs</p>
</figcaption>
</figure>
<figure class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1518998053901-5348d3961a04');" role="img" aria-label="Art numérique">
<figcaption>
<h2>Art numérique</h2>
<p>Plongez dans l'univers de la création contemporaine.</p>
</figcaption>
</figure>
</div>
<div class="carousel-controls" role="navigation" aria-label="Contrôles du carrousel" id="carouselControls"></div>
</section>
<section class="gallery" id="gallery" aria-label="Galerie d'œuvres">
<h2>Collection</h2>
<div class="art-grid">
<figure class="art-item" data-id="1" tabindex="0">
<img
src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=300"
srcset=" https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=300 300w, https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=600 600w, https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1200 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt="Tableau abstrait par Philippe Morel"
title="Tableau abstrait"
loading="lazy">
<div class="art-overlay">
<h3>Tableau Abstrait</h3>
<p>Artiste: Philippe Morel</p>
<div class="rating" data-id="1" role="group" aria-label="Noter l'œuvre">
<span class="star" data-value="1" tabindex="0" role="button" aria-label="1 étoile">★</span>
<span class="star" data-value="2" tabindex="0" role="button" aria-label="2 étoiles">★</span>
<span class="star" data-value="3" tabindex="0" role="button" aria-label="3 étoiles">★</span>
<span class="star" data-value="4" tabindex="0" role="button" aria-label="4 étoiles">★</span>
<span class="star" data-value="5" tabindex="0" role="button" aria-label="5 étoiles">★</span>
</div>
<div class="art-actions">
<button onclick="openArtPage(1)" aria-label="Voir les détails de l'œuvre">Voir</button>
<button onclick="openCommentModal(1)" aria-label="Commenter l'œuvre">Commenter</button>
<button onclick="addToCart(1)" aria-label="Ajouter l'œuvre au panier">Ajouter au panier</button>
</div>
</div>
</figure>
<!-- autres œuvres ici -->
</div>
</section>
</main>
<div class="modal" id="commentModal" role="dialog" aria-labelledby="commentModalTitle" aria-modal="true">
<div class="modal-content">
<h3 id="commentModalTitle">Laisser un commentaire</h3>
<textarea id="commentText" placeholder="Votre commentaire..." aria-label="Votre commentaire"></textarea>
<button onclick="submitComment()" aria-label="Envoyer le commentaire">Envoyer</button>
<button onclick="closeCommentModal()" aria-label="Fermer la fenêtre">Fermer</button>
</div>
</div>
<footer role="contentinfo">
<div>
<h3>Navigation</h3>
<a href="peintures.html" aria-label="Voir les peintures">Peintures</a>
<a href="photographies.html" aria-label="Voir les photographies">Photographies</a>
<a href="sculptures.html" aria-label="Voir les sculptures">Sculptures</a>
<a href="art-numerique.html" aria-label="Voir l'art numérique">Art Numérique</a>
<a href="musique.html" aria-label="Voir la musique">Musique</a>
</div>
<div>
<h3>Contact</h3>
<p>Email: <a href="mailto:contact@achatdart.fr">contact@achatdart.fr</a></p>
</div>
<div>
<h3>Suivez-nous</h3>
<div class="social-icons">
<a href="#" aria-label="Suivez-nous sur Facebook">Facebook</a>
<a href="#" aria-label="Suivez-nous sur Instagram">Instagram</a>
<a href="#" aria-label="Suivez-nous sur Twitter">Twitter</a>
</div>
</div>
<div>
<h3>Informations</h3>
<a href="terms.html" aria-label="Conditions générales">Conditions Générales</a>
<a href="privacy.html" aria-label="Politique de confidentialité">Politique de Confidentialité</a>
<a href="faq.html" aria-label="Foire aux questions">FAQ</a>
</div>
<div class="footer-bottom">
<p>© 2025 Achat d'Art. Tous droits réservés. <a href="mentions.html">Mentions Légales</a><a href="en/index.html">English version</a></p>
</div>
</footer>
<script>
// Burger menu toggle
const burger = document.getElementById('burger');
const navMenu = document.getElementById('main-nav');
burger.addEventListener('click', () => {
const isOpen = navMenu.classList.toggle('open');
burger.setAttribute('aria-expanded', isOpen);
burger.textContent = isOpen ? '✕' : '☰'; // Visual feedback
});
// Close menu on link click (mobile UX)
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', () => {
if (window.innerWidth < 768) {
navMenu.classList.remove('open');
burger.setAttribute('aria-expanded', 'false');
burger.textContent = '☰';
}
});
});
// Carousel setup
const carousel = document.getElementById('carousel');
const slides = document.querySelectorAll('.carousel-slide');
const controlsContainer = document.getElementById('carouselControls');
let currentSlide = 0;
let isPaused = false;
let startX = 0;
let isDragging = false;
slides.forEach((_, index) => {
const button = document.createElement('button');
button.setAttribute('aria-label', `Aller à la slide ${index + 1}`);
button.classList.toggle('active', index === 0);
button.addEventListener('click', () => goToSlide(index));
controlsContainer.appendChild(button);
});
function autoScroll() {
if (!isPaused) {
currentSlide = (currentSlide + 1) % slides.length;
updateCarousel();
}
}
function goToSlide(index) {
currentSlide = index;
updateCarousel();
}
function updateCarousel() {
carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
document.querySelectorAll('.carousel-controls button').forEach((btn, index) => {
btn.classList.toggle('active', index === currentSlide);
});
}
// Mouse hover pause
carousel.addEventListener('mouseenter', () => (isPaused = true));
carousel.addEventListener('mouseleave', () => (isPaused = false));
// Touch swipe support
carousel.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
isDragging = true;
isPaused = true;
carousel.style.transition = 'none'; // Disable transition during drag
});
carousel.addEventListener('touchmove', (e) => {
if (!isDragging) return;
const currentX = e.touches[0].clientX;
const deltaX = currentX - startX;
const slideWidth = carousel.clientWidth;
const translateX = (-currentSlide * 100 + (deltaX / slideWidth * 100)) + '%';
carousel.style.transform = `translateX(${translateX})`;
});
carousel.addEventListener('touchend', (e) => {
if (!isDragging) return;
isDragging = false;
carousel.style.transition = 'transform 0.5s ease-in-out'; // Re-enable transition
const endX = e.changedTouches[0].clientX;
const deltaX = endX - startX;
const threshold = 50; // Minimum swipe distance
if (Math.abs(deltaX) > threshold) {
if (deltaX > 0) {
// Swipe left (previous slide)
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
} else {
// Swipe right (next slide)
currentSlide = (currentSlide + 1) % slides.length;
}
updateCarousel();
} else {
// Snap back if not enough distance
updateCarousel();
}
isPaused = false;
});
setInterval(autoScroll, 5000);
// Art interactions
function openArtPage(artId) {
window.open(`art.html?id=${artId}`, '_blank');
}
let cart = [];
function addToCart(artId) {
cart.push(artId);
alert(`Œuvre ${artId} ajoutée au panier !`);
}
document.querySelectorAll('.rating').forEach(rating => {
rating.querySelectorAll('.star').forEach(star => {
star.addEventListener('click', () => {
const value = star.getAttribute('data-value');
const artId = rating.getAttribute('data-id');
alert(`Vous avez noté l'œuvre ${artId} avec ${value} étoiles !`);
});
star.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
star.click();
}
});
});
});
let currentArtId = null;
function openCommentModal(artId) {
currentArtId = artId;
const modal = document.getElementById('commentModal');
modal.style.display = 'flex';
modal.querySelector('textarea').focus();
}
function closeCommentModal() {
document.getElementById('commentModal').style.display = 'none';
document.getElementById('commentText').value = '';
currentArtId = null;
}
function submitComment() {
const comment = document.getElementById('commentText').value;
if (comment) {
alert(`Commentaire soumis pour l'œuvre ${currentArtId}: ${comment}`);
closeCommentModal();
} else {
alert('Veuillez entrer un commentaire.');
}
}
// Art item keyboard nav
document.querySelectorAll('.art-item').forEach(item => {
item.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
item.querySelector('.art-actions button').click();
}
});
});
// Global accessibility: Esc to close modal/menu
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
if (document.getElementById('commentModal').style.display === 'flex') {
closeCommentModal();
} else if (navMenu.classList.contains('open')) {
navMenu.classList.remove('open');
burger.setAttribute('aria-expanded', 'false');
burger.textContent = '☰';
}
}
});
</script>
</body>
</html>
