espace-paie-odentas/app/(app)/minima-ccn/ccnsvp/annexe3-data.tsx
2025-10-17 13:02:39 +02:00

1198 lines
88 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
import React, { useState } from 'react';
const euro = (n: number) => new Intl.NumberFormat('fr-FR', {
minimumFractionDigits: Number.isInteger(n) ? 0 : 2,
maximumFractionDigits: 2
}).format(n) + '€';
interface Annexe3ContentProps {}
export default function Annexe3Content({}: Annexe3ContentProps) {
const [activeSection, setActiveSection] = useState<'troupe' | 'hors-troupe' | 'techniciens' | 'salle-cuisine'>('troupe');
return (
<div className="space-y-6">
{/* En-tête */}
<div className="rounded-xl border bg-gradient-to-br from-rose-50 to-pink-50 p-4">
<h2 className="text-lg font-semibold text-rose-900 mb-1">
Annexe 3 - Cabarets
</h2>
<p className="text-sm text-rose-700">
Exploitants de lieux, producteurs ou diffuseurs de spectacles de cabarets
</p>
<p className="text-xs text-rose-600 mt-2">
En application du titre VI des clauses communes et de l'article 4.7 de l'annexe 3
</p>
</div>
{/* Navigation */}
<div className="flex gap-3 border-b pb-2 flex-wrap">
<button
onClick={() => setActiveSection('troupe')}
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
activeSection === 'troupe'
? 'bg-gradient-to-r from-rose-500 to-pink-600 text-white shadow-md'
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
}`}
>
🎭 Troupe constituée
</button>
<button
onClick={() => setActiveSection('hors-troupe')}
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
activeSection === 'hors-troupe'
? 'bg-gradient-to-r from-rose-500 to-pink-600 text-white shadow-md'
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
}`}
>
🎤 Hors troupe constituée
</button>
<button
onClick={() => setActiveSection('techniciens')}
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
activeSection === 'techniciens'
? 'bg-gradient-to-r from-rose-500 to-pink-600 text-white shadow-md'
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
}`}
>
🔧 Techniciens
</button>
<button
onClick={() => setActiveSection('salle-cuisine')}
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
activeSection === 'salle-cuisine'
? 'bg-gradient-to-r from-rose-500 to-pink-600 text-white shadow-md'
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
}`}
>
🍽 Salle/Cuisine/Plonge
</button>
</div>
{/* Section Troupe constituée */}
{activeSection === 'troupe' && (
<div className="space-y-6">
{/* Salles ≤ 300 places */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-rose-900 mb-3 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-rose-500"></span>
Salles avoisinant 300 places au maximum
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-rose-50">
<th className="text-left p-3 text-rose-900 font-bold border border-rose-200">Fonction</th>
<th className="text-center p-3 text-rose-900 font-bold border border-rose-200">1 Show</th>
<th className="text-center p-3 text-rose-900 font-bold border border-rose-200">2 Shows<br/>consécutifs</th>
<th className="text-center p-3 text-rose-900 font-bold border border-rose-200">Dîner +<br/>1 Show</th>
<th className="text-center p-3 text-rose-900 font-bold border border-rose-200">Dîner +<br/>2 Shows</th>
<th className="text-center p-3 text-rose-900 font-bold border border-rose-200 bg-rose-100">Mensuel<br/>1 Show</th>
<th className="text-center p-3 text-rose-900 font-bold border border-rose-200 bg-rose-100">Mensuel<br/>2 Shows</th>
<th className="text-center p-3 text-rose-900 font-bold border border-rose-200 bg-rose-100">Mensuel<br/>mixte</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Capitaine niveau 1</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(111.02)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(172.10)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(108.16)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(151.41)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2739.74)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3835.63)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3287.69)}</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Capitaine niveau 2</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(101.77)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(157.77)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(99.13)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(138.79)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2511.43)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3516.00)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3013.71)}</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Danseurs solistes et autres artistes solistes</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(92.98)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(144.11)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(90.56)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(126.79)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2294.27)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3211.99)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2753.12)}</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Danseurs de revue</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(86.76)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(134.46)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(84.15)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(118.30)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2144.06)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3001.70)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2572.88)}</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Autres artistes de revue</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(84.28)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(130.63)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(82.10)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(114.93)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2082.09)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2914.94)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2498.53)}</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Chanteur</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(112.95)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(175.07)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(110.02)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(154.01)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2787.81)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3902.93)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3345.37)}</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Musicien avant spectacle sur scène</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(112.95)}</td>
<td className="text-center p-3 border border-rose-200"></td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(110.02)}</td>
<td className="text-center p-3 border border-rose-200"></td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2787.81)}</td>
<td className="text-center p-3 border border-rose-200 bg-rose-50"></td>
<td className="text-center p-3 border border-rose-200 bg-rose-50"></td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Musicien accompagnant tout le show</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(112.95)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(175.07)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(110.02)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(154.01)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2787.81)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3902.93)}</td>
<td className="text-center p-3 border border-rose-200 bg-rose-50"></td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Musicien dîner + 1er Show</td>
<td className="text-center p-3 border border-rose-200"></td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(175.07)}</td>
<td className="text-center p-3 border border-rose-200"></td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(154.01)}</td>
<td className="text-center p-3 border border-rose-200 bg-rose-50"></td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3902.93)}</td>
<td className="text-center p-3 border border-rose-200 bg-rose-50"></td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Musicien dîner + 2 Shows</td>
<td className="text-center p-3 border border-rose-200"></td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(236.36)}</td>
<td className="text-center p-3 border border-rose-200"></td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(208.00)}</td>
<td className="text-center p-3 border border-rose-200 bg-rose-50"></td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(5275.20)}</td>
<td className="text-center p-3 border border-rose-200 bg-rose-50"></td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Attraction/artiste de variété</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(112.95)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(175.07)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(110.02)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(154.01)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2787.81)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3902.93)}</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3345.37)}</td>
</tr>
</tbody>
</table>
</div>
<div className="mt-4 space-y-2 text-xs text-slate-600">
<div className="font-semibold">Prime de capitaine remplaçant :</div>
<div> Niveau 1 : une représentation {euro(17.94)} ; deux représentations {euro(25.10)}</div>
<div> Niveau 2 : une représentation {euro(8.98)} ; deux représentations {euro(12.55)}</div>
<div className="mt-2 font-semibold">Répétition d'entretien :</div>
<div>Pour un service de 3 heures 30 minutes échauffement compris : {euro(46.65)}</div>
</div>
</div>
{/* Salles > 300 places */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-pink-900 mb-3 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-pink-500"></span>
Salles supérieures à 300 places
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-pink-50">
<th className="text-left p-3 text-pink-900 font-bold border border-pink-200">Fonction</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200">1 Show</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200">2 Shows<br/>consécutifs</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200">Dîner +<br/>1 Show</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200">Dîner +<br/>2 Shows</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Mensuel<br/>1 Show</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Mensuel<br/>2 Shows</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Mensuel<br/>mixte</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Capitaine niveau 1</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(118.96)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(184.39)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(115.88)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(162.22)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2935.24)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(4109.38)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3522.31)}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Capitaine niveau 2</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(109.35)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(169.50)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(106.50)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(149.12)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2698.06)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3777.35)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3237.71)}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Danseurs solistes et autres artistes solistes</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(99.61)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(154.41)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(97.04)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(135.84)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2458.02)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3441.31)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2949.66)}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Danseurs de revue</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(90.56)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(140.38)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(88.20)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(123.50)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2234.50)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3128.30)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2681.40)}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Autres artistes de revue</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(88.15)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(136.64)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(85.85)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(120.19)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2174.97)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3044.97)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2609.98)}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Chanteur</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(120.18)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(186.28)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(117.05)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(163.87)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2965.12)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(4151.17)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3558.16)}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Musicien avant spectacle sur scène</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(122.56)}</td>
<td className="text-center p-3 border border-pink-200">—</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(119.36)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(167.12)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3023.90)}</td>
<td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
<td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Musicien accompagnant tout le show</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(122.56)}</td>
<td className="text-center p-3 border border-pink-200">—</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(119.36)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(167.12)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3023.90)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(4233.53)}</td>
<td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Musicien dîner + 1er Show</td>
<td className="text-center p-3 border border-pink-200">—</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(186.28)}</td>
<td className="text-center p-3 border border-pink-200">—</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(167.12)}</td>
<td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(4233.53)}</td>
<td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Musicien dîner + 2 Shows</td>
<td className="text-center p-3 border border-pink-200">—</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(250.43)}</td>
<td className="text-center p-3 border border-pink-200">—</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(225.39)}</td>
<td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(5709.55)}</td>
<td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Attraction/artiste de variété</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(122.56)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(189.96)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(119.36)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(167.12)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3023.90)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(4233.53)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3628.73)}</td>
</tr>
</tbody>
</table>
</div>
<div className="mt-4 space-y-2 text-xs text-slate-600">
<div>💡 <span className="font-semibold">Shows consécutifs</span> : deux shows dont le temps de pause entre les deux est au minimum de 35 minutes et au maximum de 60 minutes</div>
<div>💡 Pour les artistes polycompétents, la rémunération ci-dessus ne correspond qu'à la prestation en présence du public</div>
<div className="font-semibold mt-3">Prime de capitaine remplaçant :</div>
<div> Niveau 1 : une représentation {euro(18.82)} ; deux représentations {euro(26.37)}</div>
<div> Niveau 2 : une représentation {euro(9.40)} ; deux représentations {euro(13.19)}</div>
<div className="mt-2 font-semibold">Répétition d'entretien :</div>
<div>Pour un service de 3 heures 30 minutes échauffement compris : {euro(46.65)}</div>
</div>
</div>
</div>
)}
{/* Section Hors troupe constituée */}
{activeSection === 'hors-troupe' && (
<div className="space-y-6">
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-rose-900 mb-3">
Artistes hors troupe constituée
</h3>
<div className="space-y-4">
{/* Salles ≤ 300 places */}
<div>
<h4 className="text-sm font-semibold text-rose-700 mb-2">📍 Salles avoisinant 300 places au maximum</h4>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-rose-50">
<th className="text-left p-3 text-rose-900 font-bold border border-rose-200">Fonction</th>
<th className="text-center p-3 text-rose-900 font-bold border border-rose-200">1 Show</th>
<th className="text-center p-3 text-rose-900 font-bold border border-rose-200">Dîner +<br/>1 Show</th>
<th className="text-center p-3 text-rose-900 font-bold border border-rose-200">Dîner +<br/>2 Shows</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Danseurs solistes et autre artiste de cabaret soliste</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(92.98)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(90.04)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(88.22)}</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Danseurs et autres artistes de cabaret</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(86.94)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(85.08)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(83.38)}</td>
</tr>
<tr className="bg-rose-100/50">
<td colSpan={4} className="p-2 pl-3 font-semibold text-rose-900 border border-rose-200">Artiste de variété/attraction</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 pl-6 border border-rose-200">Pour 40 min</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(96.61)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(88.38)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(86.60)}</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 pl-6 border border-rose-200">Pour 60 min</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(120.17)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(109.95)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(107.74)}</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 pl-6 border border-rose-200">Pour 80 min</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(142.77)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(130.64)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(128.01)}</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Chanteur soliste ou groupe de chanteurs solistes</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(108.16)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(98.97)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(96.98)}</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Musicien</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(108.16)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(98.97)}</td>
<td className="text-center p-3 font-semibold border border-rose-200">{euro(96.98)}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Salles > 300 places */}
<div>
<h4 className="text-sm font-semibold text-pink-700 mb-2">📍 Salles supérieures à 300 places</h4>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-pink-50">
<th className="text-left p-3 text-pink-900 font-bold border border-pink-200">Fonction</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200">1 Show</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200">Dîner +<br/>1 Show</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200">Dîner +<br/>2 Shows</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Danseurs solistes</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(118.49)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(108.40)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(106.23)}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Danseurs et autres artistes de cabaret</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(107.33)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(98.20)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(96.22)}</td>
</tr>
<tr className="bg-pink-100/50">
<td colSpan={4} className="p-2 pl-3 font-semibold text-pink-900 border border-pink-200">Artiste de variété/attraction</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 pl-6 border border-pink-200">Pour 40 min</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(149.76)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(137.02)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(134.28)}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 pl-6 border border-pink-200">Pour 60 min</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(202.89)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(185.65)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(181.93)}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 pl-6 border border-pink-200">Pour 80 min</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(234.63)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(214.68)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(210.38)}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Chanteur soliste ou groupe de chanteurs solistes</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(129.74)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(118.72)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(116.33)}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Musicien</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(129.74)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(118.72)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(116.33)}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="mt-4 text-xs text-slate-600">
💡 Temps de travail effectué sur scène
</div>
</div>
</div>
)}
{/* Section Techniciens */}
{activeSection === 'techniciens' && (
<div className="space-y-6">
{/* Techniciens du spectacle */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-blue-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-blue-500"></span>
Techniciens du spectacle
</h3>
<div className="space-y-6">
{/* Salles ≤ 300 places */}
<div>
<h4 className="text-sm font-semibold text-blue-700 mb-3 px-3 py-2 bg-blue-50 rounded-lg inline-block">
📍 Salles avoisinant 300 places au maximum
</h4>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-blue-50">
<th className="text-left p-3 text-blue-900 font-bold border border-blue-200">Classification</th>
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200 bg-blue-100">Taux horaire</th>
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200 bg-blue-100">Taux horaire<br/>(variante)</th>
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200">Mensuel</th>
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200">Mensuel<br/>(variante)</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">
<div className="font-semibold text-blue-900">Directeur technique</div>
</td>
<td className="text-center p-3 border border-blue-200 bg-blue-50 text-slate-400">—</td>
<td className="text-center p-3 border border-blue-200 bg-blue-50 text-slate-400">—</td>
<td className="text-center p-3 border border-blue-200 text-slate-400">—</td>
<td className="text-center p-3 border border-blue-200 text-slate-400">—</td>
</tr>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">
<div className="font-semibold text-blue-900">Régisseur général</div>
</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(17.67)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(19.44)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2680.01)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2756.63)}</td>
</tr>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">
<div className="font-semibold text-blue-900">Régisseur de scène</div>
</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(17.67)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(19.44)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2680.01)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2756.63)}</td>
</tr>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">
<div className="font-semibold text-blue-900">Chef machiniste</div>
</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(17.67)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(19.44)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2680.01)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2756.63)}</td>
</tr>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">
<div className="font-semibold text-blue-900">Régisseur son, lumière, plateau</div>
</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(17.67)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(19.44)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2680.01)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2756.63)}</td>
</tr>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">
<div className="font-semibold text-blue-900">Régisseur (cabaret de 300 places maximum)</div>
</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(16.14)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(17.75)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2447.66)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2517.74)}</td>
</tr>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">
<div className="font-semibold text-blue-900">Régisseur adjoint, sous-chef machiniste</div>
<div className="text-slate-600 text-xs mt-1">Électricien, accessoiriste, machiniste</div>
</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(13.49)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(14.84)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2046.38)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2104.65)}</td>
</tr>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">
<div className="font-semibold text-blue-900">Brigadier</div>
</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(12.67)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(13.94)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1921.59)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1976.94)}</td>
</tr>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">
<div className="font-semibold text-blue-900">Manutentionnaire</div>
<div className="text-slate-600 text-xs mt-1">Personnel entretien</div>
</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(12.06)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(13.27)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1829.04)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1881.50)}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Salles 300-600 places */}
<div>
<h4 className="text-sm font-semibold text-cyan-700 mb-3 px-3 py-2 bg-cyan-50 rounded-lg inline-block">
📍 Salles de 300 à 600 places
</h4>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-cyan-50">
<th className="text-left p-3 text-cyan-900 font-bold border border-cyan-200">Classification</th>
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200 bg-cyan-100">Taux horaire</th>
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200 bg-cyan-100">Taux horaire<br/>(variante)</th>
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">Mensuel</th>
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">Mensuel<br/>(variante)</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">
<div className="font-semibold text-cyan-900">Directeur technique</div>
</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(23.45)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(25.79)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3556.96)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3658.65)}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">
<div className="font-semibold text-cyan-900">Régisseur général</div>
</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(22.28)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(24.50)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3378.72)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3475.32)}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">
<div className="font-semibold text-cyan-900">Régisseur de scène</div>
</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(22.28)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(24.50)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3378.72)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3475.32)}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">
<div className="font-semibold text-cyan-900">Chef machiniste</div>
</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(22.28)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(24.50)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3378.72)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3475.32)}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">
<div className="font-semibold text-cyan-900">Régisseur son, lumière, plateau</div>
</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(22.28)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(24.50)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3378.72)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3475.32)}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">
<div className="font-semibold text-cyan-900">Régisseur (cabaret de 300 places maximum)</div>
</td>
<td className="text-center p-3 border border-cyan-200 bg-cyan-50 text-slate-400">—</td>
<td className="text-center p-3 border border-cyan-200 bg-cyan-50 text-slate-400">—</td>
<td className="text-center p-3 border border-cyan-200 text-slate-400">—</td>
<td className="text-center p-3 border border-cyan-200 text-slate-400">—</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">
<div className="font-semibold text-cyan-900">Régisseur adjoint, sous-chef machiniste</div>
<div className="text-slate-600 text-xs mt-1">Électricien, accessoiriste, machiniste</div>
</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(17.01)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(18.71)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2580.18)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2653.30)}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">
<div className="font-semibold text-cyan-900">Brigadier</div>
</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(15.97)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(17.57)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2422.13)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2491.83)}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">
<div className="font-semibold text-cyan-900">Manutentionnaire</div>
<div className="text-slate-600 text-xs mt-1">Personnel entretien</div>
</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(15.20)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(16.72)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2305.30)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2371.43)}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Salles > 600 places */}
<div>
<h4 className="text-sm font-semibold text-teal-700 mb-3 px-3 py-2 bg-teal-50 rounded-lg inline-block">
📍 Salles supérieures à 600 places
</h4>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-teal-50">
<th className="text-left p-3 text-teal-900 font-bold border border-teal-200">Classification</th>
<th className="text-center p-3 text-teal-900 font-bold border border-teal-200 bg-teal-100">Taux horaire</th>
<th className="text-center p-3 text-teal-900 font-bold border border-teal-200 bg-teal-100">Taux horaire<br/>(variante)</th>
<th className="text-center p-3 text-teal-900 font-bold border border-teal-200">Mensuel</th>
<th className="text-center p-3 text-teal-900 font-bold border border-teal-200">Mensuel<br/>(variante)</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">
<div className="font-semibold text-teal-900">Directeur technique</div>
</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(24.39)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(26.82)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3698.93)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3804.68)}</td>
</tr>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">
<div className="font-semibold text-teal-900">Régisseur général</div>
</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(23.16)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(25.48)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3512.80)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3613.23)}</td>
</tr>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">
<div className="font-semibold text-teal-900">Régisseur de scène</div>
</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(23.16)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(25.48)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3512.80)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3613.23)}</td>
</tr>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">
<div className="font-semibold text-teal-900">Chef machiniste</div>
</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(23.16)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(25.48)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3512.80)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3613.23)}</td>
</tr>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">
<div className="font-semibold text-teal-900">Régisseur son, lumière, plateau</div>
</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(23.16)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(25.48)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3512.80)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3613.23)}</td>
</tr>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">
<div className="font-semibold text-teal-900">Régisseur (cabaret de 300 places maximum)</div>
</td>
<td className="text-center p-3 border border-teal-200 bg-teal-50 text-slate-400">—</td>
<td className="text-center p-3 border border-teal-200 bg-teal-50 text-slate-400">—</td>
<td className="text-center p-3 border border-teal-200 text-slate-400">—</td>
<td className="text-center p-3 border border-teal-200 text-slate-400">—</td>
</tr>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">
<div className="font-semibold text-teal-900">Régisseur adjoint, sous-chef machiniste</div>
<div className="text-slate-600 text-xs mt-1">Électricien, accessoiriste, machiniste</div>
</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(17.69)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(19.46)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2682.88)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2759.09)}</td>
</tr>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">
<div className="font-semibold text-teal-900">Brigadier</div>
</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(16.60)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(18.26)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2517.40)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2589.53)}</td>
</tr>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">
<div className="font-semibold text-teal-900">Manutentionnaire</div>
<div className="text-slate-600 text-xs mt-1">Personnel entretien</div>
</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(15.81)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(17.39)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2397.48)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2465.90)}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="mt-4 text-xs text-slate-600 space-y-1">
<div>💡 <span className="font-semibold">Majoration 0h-2h :</span> +10% du taux horaire pour les heures effectuées entre 0h et 2h du matin</div>
</div>
</div>
{/* Personnel costumes */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-purple-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-purple-500"></span>
Personnel des costumes
</h3>
<div className="space-y-6">
{/* Salles ≤ 300 places */}
<div>
<h4 className="text-sm font-semibold text-purple-700 mb-3 px-3 py-2 bg-purple-50 rounded-lg inline-block">
📍 Salles avoisinant 300 places au maximum
</h4>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-purple-50">
<th className="text-left p-3 text-purple-900 font-bold border border-purple-200">Classification</th>
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Taux horaire</th>
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Taux horaire<br/>(variante)</th>
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200">Mensuel</th>
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200">Mensuel<br/>(variante)</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-purple-50/30">
<td className="p-3 border border-purple-200">
<div className="font-semibold text-purple-900">Costumier</div>
</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(17.32)}</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(19.05)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(2626.92)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(2702.03)}</td>
</tr>
<tr className="hover:bg-purple-50/30">
<td className="p-3 border border-purple-200">
<div className="font-semibold text-purple-900">Chef habilleur / Chef couturier</div>
</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(16.14)}</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(17.75)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(2447.66)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(2517.74)}</td>
</tr>
<tr className="hover:bg-purple-50/30">
<td className="p-3 border border-purple-200">
<div className="font-semibold text-purple-900">Couturier senior (Groupe 1)</div>
</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(13.49)}</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(14.84)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(2046.38)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(2104.65)}</td>
</tr>
<tr className="hover:bg-purple-50/30">
<td className="p-3 border border-purple-200">
<div className="font-semibold text-purple-900">Couturier (Groupe 2)</div>
</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(12.67)}</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(13.94)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1921.59)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1976.94)}</td>
</tr>
<tr className="hover:bg-purple-50/30">
<td className="p-3 border border-purple-200">
<div className="font-semibold text-purple-900">Habilleur</div>
</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(12.06)}</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(13.27)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1829.04)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1881.50)}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Salles 300-600 places */}
<div>
<h4 className="text-sm font-semibold text-fuchsia-700 mb-3 px-3 py-2 bg-fuchsia-50 rounded-lg inline-block">
📍 Salles de 300 à 600 places
</h4>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-fuchsia-50">
<th className="text-left p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Classification</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Taux horaire</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Taux horaire<br/>(variante)</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Mensuel</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Mensuel<br/>(variante)</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-fuchsia-50/30">
<td className="p-3 border border-fuchsia-200">
<div className="font-semibold text-fuchsia-900">Costumier</div>
</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(19.25)}</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(21.17)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2919.65)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(3003.12)}</td>
</tr>
<tr className="hover:bg-fuchsia-50/30">
<td className="p-3 border border-fuchsia-200">
<div className="font-semibold text-fuchsia-900">Chef habilleur / Chef couturier</div>
</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(17.94)}</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(19.73)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2721.05)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2798.11)}</td>
</tr>
<tr className="hover:bg-fuchsia-50/30">
<td className="p-3 border border-fuchsia-200">
<div className="font-semibold text-fuchsia-900">Couturier senior (Groupe 1)</div>
</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(15.01)}</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(16.51)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2276.48)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2341.69)}</td>
</tr>
<tr className="hover:bg-fuchsia-50/30">
<td className="p-3 border border-fuchsia-200">
<div className="font-semibold text-fuchsia-900">Couturier (Groupe 2)</div>
</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(14.08)}</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(15.49)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2135.61)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2196.41)}</td>
</tr>
<tr className="hover:bg-fuchsia-50/30">
<td className="p-3 border border-fuchsia-200">
<div className="font-semibold text-fuchsia-900">Habilleur</div>
</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(13.41)}</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(14.75)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2034.00)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2091.66)}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Salles > 600 places */}
<div>
<h4 className="text-sm font-semibold text-violet-700 mb-3 px-3 py-2 bg-violet-50 rounded-lg inline-block">
📍 Salles supérieures à 600 places
</h4>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-violet-50">
<th className="text-left p-3 text-violet-900 font-bold border border-violet-200">Classification</th>
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200 bg-violet-100">Taux horaire</th>
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200 bg-violet-100">Taux horaire<br/>(variante)</th>
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200">Mensuel</th>
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200">Mensuel<br/>(variante)</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-violet-50/30">
<td className="p-3 border border-violet-200">
<div className="font-semibold text-violet-900">Costumier</div>
</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(20.02)}</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(22.02)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(3036.43)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(3123.25)}</td>
</tr>
<tr className="hover:bg-violet-50/30">
<td className="p-3 border border-violet-200">
<div className="font-semibold text-violet-900">Chef habilleur / Chef couturier</div>
</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(18.67)}</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(20.54)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2831.68)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2913.18)}</td>
</tr>
<tr className="hover:bg-violet-50/30">
<td className="p-3 border border-violet-200">
<div className="font-semibold text-violet-900">Couturier senior (Groupe 1)</div>
</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(15.61)}</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(17.17)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2367.10)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2435.09)}</td>
</tr>
<tr className="hover:bg-violet-50/30">
<td className="p-3 border border-violet-200">
<div className="font-semibold text-violet-900">Couturier (Groupe 2)</div>
</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(14.65)}</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(16.12)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2221.98)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2285.23)}</td>
</tr>
<tr className="hover:bg-violet-50/30">
<td className="p-3 border border-violet-200">
<div className="font-semibold text-violet-900">Habilleur</div>
</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(13.95)}</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(15.35)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2115.15)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2175.08)}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
)}
{/* Section Salle/Cuisine/Plonge */}
{activeSection === 'salle-cuisine' && (
<div className="space-y-6">
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-amber-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-amber-500"></span>
Personnel de Salle, Cuisine et Plonge
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-amber-50">
<th className="text-left p-3 text-amber-900 font-bold border border-amber-200">Classification</th>
<th className="text-center p-3 text-amber-900 font-bold border border-amber-200 bg-amber-100">Taux horaire</th>
<th className="text-center p-3 text-amber-900 font-bold border border-amber-200">Mensuel</th>
</tr>
</thead>
<tbody>
<tr className="bg-amber-100/30">
<td colSpan={3} className="p-2 pl-3 font-bold text-amber-900 border border-amber-200">
CADRES
</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Cadres groupe 1</div>
</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(20.52)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(3112.27)}</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Cadres groupe 2</div>
</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(16.90)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(2563.22)}</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Cadres groupe 3</div>
</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.78)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(2090.19)}</td>
</tr>
<tr className="bg-amber-100/30">
<td colSpan={3} className="p-2 pl-3 font-bold text-amber-900 border border-amber-200">
AGENTS DE MAÎTRISE
</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Agents de maîtrise niveau 1</div>
</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.27)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(2012.72)}</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Agents de maîtrise niveau 2</div>
</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.42)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1884.34)}</td>
</tr>
<tr className="bg-amber-100/30">
<td colSpan={3} className="p-2 pl-3 font-bold text-amber-900 border border-amber-200">
EMPLOYÉS QUALIFIÉS GROUPE 1
</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Employés qualifiés groupe 1 - niveau 1</div>
</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.42)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1884.34)}</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Employés qualifiés groupe 1 - niveau 2</div>
</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.06)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1829.04)}</td>
</tr>
<tr className="bg-amber-100/30">
<td colSpan={3} className="p-2 pl-3 font-bold text-amber-900 border border-amber-200">
EMPLOYÉS QUALIFIÉS GROUPE 2
</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Employés qualifiés groupe 2 - niveau 1</div>
</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.06)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1829.04)}</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Employés qualifiés groupe 2 - niveau 2</div>
</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(11.88)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1801.84)}</td>
</tr>
<tr className="bg-amber-100/30">
<td colSpan={3} className="p-2 pl-3 font-bold text-amber-900 border border-amber-200">
EMPLOYÉS
</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Employés niveau 1</div>
</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(11.88)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1801.84)}</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Employés niveau 2</div>
</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(11.88)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1801.84)}</td>
</tr>
</tbody>
</table>
</div>
<div className="mt-4 text-xs text-slate-600">
💡 Ces grilles s'appliquent au personnel de salle, cuisine et plonge dans les établissements de cabarets
</div>
</div>
</div>
)}
</div>
);
}