:root {
–primary-color: #2c5f7e;
–secondary-color: #4a8bad;
–accent-color: #5cb85c;
–light-color: #f8f9fa;
–dark-color: #343a40;
–light-green: #e8f5e9;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}

body {
background-color: #f5f7fa;
color: var(–dark-color);
line-height: 1.6;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
}

header {
text-align: center;
margin-bottom: 20px;
padding: 15px 0;
background: linear-gradient(135deg, var(–primary-color), var(–accent-color));
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
color: white;
}

h1 {
font-size: 1.5rem;
margin-bottom: 8px;
}

.description {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
max-width: 100%;
margin: 0 auto;
padding: 0 10px;
}

.main-content {
display: flex;
flex-direction: column;
gap: 15px;
}

@media (min-width: 768px) {
.main-content {
flex-direction: row;
align-items: flex-start;
}

.calculator-container {
flex: 2;
}

.volume-details {
flex: 1;
position: sticky;
top: 15px;
}
}

.calculator {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 15px;
border: 1px solid var(–light-green);
margin-bottom: 15px;
}

.room-selector {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
justify-content: center;
}

.room-btn {
padding: 8px 12px;
background-color: var(–light-color);
border: 2px solid #ddd;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
font-weight: 500;
font-size: 0.85rem;
}

.room-btn.active {
background-color: var(–primary-color);
color: white;
border-color: var(–primary-color);
}

.items-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 15px;
}

.item-card {
background-color: var(–light-green);
border-radius: 6px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.3s ease;
border: 1px solid #c8e6c9;
}

.item-icon {
font-size: 1.3rem;
margin-bottom: 6px;
color: var(–primary-color);
}

.item-name {
font-size: 0.8rem;
text-align: center;
margin-bottom: 4px;
font-weight: 500;
}

.item-volume {
font-size: 0.75rem;
color: var(–secondary-color);
margin-bottom: 6px;
}

.item-controls {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}

.quantity-btn {
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
background-color: var(–primary-color);
color: white;
font-size: 0.8rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.quantity-display {
min-width: 24px;
text-align: center;
font-weight: bold;
font-size: 0.85rem;
}

/* Volume details sidebar */
.volume-details {
background: linear-gradient(135deg, var(–light-green), white);
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 15px;
border: 1px solid #c8e6c9;
margin-bottom: 15px;
}

.room-results {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 15px;
}

.room-result-card {
background-color: white;
border-radius: 6px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border: 1px solid #e0e0e0;
}

.room-result-card h3 {
font-size: 0.85rem;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
color: var(–primary-color);
}

.room-volume {
font-size: 0.9rem;
font-weight: bold;
color: var(–secondary-color);
text-align: right;
}

.total-results {
padding-top: 10px;
border-top: 1px dashed #c8e6c9;
}

.total-volume {
font-size: 1.5rem;
color: var(–primary-color);
margin: 8px 0;
font-weight: bold;
text-align: center;
}

.reset-btn {
padding: 10px 15px;
background-color: var(–accent-color);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
width: 100%;
font-size: 0.85rem;
}

/* Truck recommendation */
.truck-recommendation {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 15px;
border: 1px solid var(–light-green);
margin-top: 15px;
}

.truck-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
margin-top: 10px;
}

.truck-option {
padding: 10px;
border-radius: 8px;
background-color: #f8f9fa;
display: flex;
align-items: center;
gap: 10px;
}

.truck-option.recommended {
border: 2px solid var(–accent-color);
background-color: #e8f5e9;
}

.truck-icon {
font-size: 1.5rem;
color: var(–primary-color);
}

.truck-info {
flex: 1;
}

.truck-name {
font-weight: bold;
font-size: 0.9rem;
}

.truck-capacity {
font-size: 0.8rem;
color: var(–secondary-color);
}

.hidden {
display: none;
}

// Données des objets par pièce avec volumes approximatifs en m³
const itemsData = {
salon: [
{ name: « Canapé 2 places », icon: « fa-couch », volume: 1.5 },
{ name: « Canapé 3 places », icon: « fa-couch », volume: 2.2 },
{ name: « Fauteuil », icon: « fa-chair », volume: 0.8 },
{ name: « Table basse », icon: « fa-coffee », volume: 0.5 },
{ name: « Bibliothèque », icon: « fa-book », volume: 1.2 },
{ name: « Télévision », icon: « fa-tv », volume: 0.3 },
{ name: « Table à manger », icon: « fa-utensils », volume: 1.0 },
{ name: « Chaise », icon: « fa-chair », volume: 0.2 },
{ name: « Lampadaire », icon: « fa-lightbulb », volume: 0.4 },
{ name: « Tapis », icon: « fa-rug », volume: 0.3 }
],
cuisine: [
{ name: « Réfrigérateur », icon: « fa-refrigerator », volume: 1.0 },
{ name: « Four », icon: « fa-fire », volume: 0.6 },
{ name: « Lave-vaisselle », icon: « fa-soap », volume: 0.6 },
{ name: « Micro-ondes », icon: « fa-microphone », volume: 0.2 },
{ name: « Table de cuisson », icon: « fa-fire-burner », volume: 0.5 },
{ name: « Machine à café », icon: « fa-coffee », volume: 0.1 },
{ name: « Buffet », icon: « fa-warehouse », volume: 0.8 },
{ name: « Tabouret », icon: « fa-stool », volume: 0.15 },
{ name: « Ustensiles », icon: « fa-utensil-spoon », volume: 0.3 },
{ name: « Vaisselle », icon: « fa-plate », volume: 0.4 }
],
chambre: [
{ name: « Lit 1 place », icon: « fa-bed », volume: 1.2 },
{ name: « Lit 2 places », icon: « fa-bed », volume: 1.8 },
{ name: « Armoire », icon: « fa-wardrobe », volume: 1.5 },
{ name: « Commode », icon: « fa-dresser », volume: 0.7 },
{ name: « Table de nuit », icon: « fa-bed-side », volume: 0.3 },
{ name: « Miroir », icon: « fa-mirror », volume: 0.4 },
{ name: « Valise », icon: « fa-suitcase », volume: 0.2 },
{ name: « Coffre », icon: « fa-trunk », volume: 0.5 },
{ name: « Lampe », icon: « fa-lightbulb », volume: 0.1 },
{ name: « Penderie », icon: « fa-hanger », volume: 0.6 }
],
bureau: [
{ name: « Bureau », icon: « fa-desk », volume: 0.8 },
{ name: « Chaise de bureau », icon: « fa-chair-office », volume: 0.3 },
{ name: « Ordinateur », icon: « fa-computer », volume: 0.2 },
{ name: « Imprimante », icon: « fa-print », volume: 0.4 },
{ name: « Étagère », icon: « fa-shelves », volume: 0.6 },
{ name: « Classeur », icon: « fa-filing-cabinet », volume: 0.5 },
{ name: « Livre », icon: « fa-book », volume: 0.1 },
{ name: « Tableau », icon: « fa-chalkboard », volume: 0.3 },
{ name: « Lampe de bureau », icon: « fa-lamp-desk », volume: 0.1 },
{ name: « Dossier », icon: « fa-folder », volume: 0.05 }
],
« salle-de-bain »: [
{ name: « Lavabo », icon: « fa-sink », volume: 0.4 },
{ name: « Baignoire », icon: « fa-bath », volume: 1.0 },
{ name: « Douche », icon: « fa-shower », volume: 0.8 },
{ name: « WC », icon: « fa-toilet », volume: 0.6 },
{ name: « Meuble de toilette », icon: « fa-cabinet », volume: 0.5 },
{ name: « Miroir », icon: « fa-mirror », volume: 0.3 },
{ name: « Machine à laver », icon: « fa-washing-machine », volume: 0.7 },
{ name: « Sèche-linge », icon: « fa-dryer », volume: 0.7 },
{ name: « Serviette », icon: « fa-towel », volume: 0.1 },
{ name: « Produits », icon: « fa-pump-soap », volume: 0.2 }
],
garage: [
{ name: « Vélo », icon: « fa-bicycle », volume: 0.8 },
{ name: « Outils », icon: « fa-tools », volume: 0.5 },
{ name: « Établi », icon: « fa-hammer », volume: 1.0 },
{ name: « Tondeuse », icon: « fa-mower », volume: 0.7 },
{ name: « BBQ », icon: « fa-grill », volume: 0.4 },
{ name: « Caisse », icon: « fa-box », volume: 0.3 },
{ name: « Vélos enfants », icon: « fa-biking », volume: 0.5 },
{ name: « Pneus », icon: « fa-tire », volume: 0.6 },
{ name: « Échelle », icon: « fa-ladder », volume: 0.9 },
{ name: « Meubles de jardin », icon: « fa-umbrella-beach », volume: 1.2 }
] };

// Noms affichés pour les pièces
const roomNames = {
salon: « Salon »,
cuisine: « Cuisine »,
chambre: « Chambre »,
bureau: « Bureau »,
« salle-de-bain »: « Salle de bain »,
garage: « Garage »
};

// Icônes pour les pièces
const roomIcons = {
salon: « fa-couch »,
cuisine: « fa-utensils »,
chambre: « fa-bed »,
bureau: « fa-laptop »,
« salle-de-bain »: « fa-bath »,
garage: « fa-car »
};

// État de l’application
const state = {
currentRoom: « salon »,
items: {},
roomVolumes: {}
};

// Initialiser l’état pour tous les objets
function initializeState() {
for (const room in itemsData) {
state.items[room] = {};
state.roomVolumes[room] = 0;
itemsData[room].forEach(item => {
state.items[room][item.name] = 0;
});
}
}

// Afficher les objets pour la pièce actuelle
function renderCurrentRoom() {
// Masquer toutes les pièces
document.querySelectorAll(‘.items-container’).forEach(container => {
container.classList.add(‘hidden’);
});

// Afficher la pièce actuelle
document.getElementById(`${state.currentRoom}-items`).classList.remove(‘hidden’);

// Mettre à jour les boutons de pièce
document.querySelectorAll(‘.room-btn’).forEach(btn => {
if (btn.dataset.room === state.currentRoom) {
btn.classList.add(‘active’);
} else {
btn.classList.remove(‘active’);
}
});
}

// Rendre les objets pour une pièce donnée
function renderItemsForRoom(room) {
const container = document.getElementById(`${room}-items`);
container.innerHTML =  »;

itemsData[room].forEach(item => {
const itemCard = document.createElement(‘div’);
itemCard.className = ‘item-card’;
itemCard.innerHTML = `

`;
container.appendChild(itemCard);
});

// Ajouter les écouteurs d’événements
document.querySelectorAll(‘.minus’).forEach(btn => {
btn.addEventListener(‘click’, decrementItem);
});

document.querySelectorAll(‘.plus’).forEach(btn => {
btn.addEventListener(‘click’, incrementItem);
});
}

// Incrémenter un objet
function incrementItem(e) {
const room = e.target.dataset.room;
const item = e.target.dataset.item;
state.items[room][item]++;
updateItemDisplay(room, item);
updateVolumes();
updateTruckRecommendation();
}

// Décrémenter un objet
function decrementItem(e) {
const room = e.target.dataset.room;
const item = e.target.dataset.item;
if (state.items[room][item] > 0) {
state.items[room][item]–;
updateItemDisplay(room, item);
updateVolumes();
updateTruckRecommendation();
}
}

// Mettre à jour l’affichage d’un objet
function updateItemDisplay(room, item) {
const display = document.getElementById(`${room}-${item}-quantity`);
if (display) {
display.textContent = state.items[room][item];
}
}

// Calculer les volumes par pièce et le total
function calculateVolumes() {
let total = 0;

for (const room in state.items) {
let roomVolume = 0;

for (const itemName in state.items[room]) {
const quantity = state.items[room][itemName];
if (quantity > 0) {
const item = itemsData[room].find(i => i.name === itemName);
if (item) {
roomVolume += quantity * item.volume;
}
}
}

state.roomVolumes[room] = roomVolume;
total += roomVolume;
}

return total;
}

// Mettre à jour l’affichage des volumes
function updateVolumes() {
const total = calculateVolumes();

// Mettre à jour l’affichage des pièces
const roomResultsContainer = document.getElementById(‘room-results’);
roomResultsContainer.innerHTML =  »;

let hasItems = false;

for (const room in state.roomVolumes) {
if (state.roomVolumes[room] > 0) {
hasItems = true;
const roomCard = document.createElement(‘div’);
roomCard.className = ‘room-result-card’;
roomCard.innerHTML = `

${roomNames[room]}

`;
roomResultsContainer.appendChild(roomCard);
}
}

if (!hasItems) {
roomResultsContainer.innerHTML = `

`;
}

// Mettre à jour le total
document.getElementById(‘total-volume’).textContent = total.toFixed(1);
}

// Mettre à jour la recommandation de camion
function updateTruckRecommendation() {
const totalVolume = calculateVolumes();
const truckMessage = document.getElementById(‘truck-message’);
const truckOptions = document.querySelectorAll(‘.truck-option’);

if (totalVolume === 0) {
truckMessage.textContent = « Ajoutez des objets pour voir les recommandations »;
truckMessage.style.display = « block »;

truckOptions.forEach(option => {
option.classList.remove(‘recommended’);
});
return;
}

truckMessage.style.display = « none »;

let recommendedTruck = null;

truckOptions.forEach(option => {
const min = parseFloat(option.dataset.min);
const max = parseFloat(option.dataset.max);
option.classList.remove(‘recommended’);

if (totalVolume > min && totalVolume {
btn.addEventListener(‘click’, function() {
state.currentRoom = this.dataset.room;
renderCurrentRoom();
});
});

// Ajouter l’écouteur d’événements pour le bouton de réinitialisation
document.getElementById(‘reset-btn’).addEventListener(‘click’, resetAll);
}

// Démarrer l’application
init();