954 lines
73 KiB
TypeScript
954 lines
73 KiB
TypeScript
"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 Annexe2ContentProps {}
|
||
|
||
export default function Annexe2Content({}: Annexe2ContentProps) {
|
||
const [activeSection, setActiveSection] = useState<'artistes' | 'techniciens'>('artistes');
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* En-tête */}
|
||
<div className="rounded-xl border bg-gradient-to-br from-purple-50 to-indigo-50 p-4">
|
||
<h2 className="text-lg font-semibold text-purple-900 mb-1">
|
||
Annexe 2 - Variétés, Jazz, Musiques actuelles
|
||
</h2>
|
||
<p className="text-sm text-purple-700">
|
||
Exploitants de lieux, producteurs ou diffuseurs de spectacles de chanson, variétés, jazz, musiques actuelles
|
||
</p>
|
||
<p className="text-xs text-purple-600 mt-2">
|
||
En application du titre VI des clauses communes et du titre V de l'annexe 2
|
||
</p>
|
||
</div>
|
||
|
||
{/* Navigation */}
|
||
<div className="flex gap-3 border-b pb-2">
|
||
<button
|
||
onClick={() => setActiveSection('artistes')}
|
||
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
||
activeSection === 'artistes'
|
||
? 'bg-gradient-to-r from-purple-500 to-pink-600 text-white shadow-md'
|
||
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||
}`}
|
||
>
|
||
🎤 Artistes-interprètes
|
||
</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-purple-500 to-pink-600 text-white shadow-md'
|
||
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||
}`}
|
||
>
|
||
🔧 Techniciens
|
||
</button>
|
||
</div>
|
||
|
||
{/* Section Artistes-interprètes */}
|
||
{activeSection === 'artistes' && (
|
||
<div className="space-y-6">
|
||
{/* Artistes-interprètes Création/Production */}
|
||
<div className="rounded-xl border bg-white p-5">
|
||
<h3 className="text-base font-bold text-purple-900 mb-3 flex items-center gap-2">
|
||
<span className="inline-block w-2 h-2 rounded-full bg-purple-500"></span>
|
||
Artistes-interprètes - Création/Production
|
||
</h3>
|
||
<p className="text-xs text-slate-600 mb-4">
|
||
Le salaire mensuel s'applique à compter du 22e jour travaillé ou de 24 représentations par mois, de date à date, répétitions non incluses
|
||
</p>
|
||
|
||
<div className="space-y-4">
|
||
{/* Salles ≤ 300 places */}
|
||
<div className="border-l-4 border-pink-400 pl-4">
|
||
<h4 className="text-sm font-semibold text-pink-700 mb-2">📍 Salles ≤ 300 places (ou 1ères parties et plateaux découvertes)</h4>
|
||
|
||
<div className="bg-pink-50 border border-pink-200 rounded-lg p-4">
|
||
<div className="text-xs text-pink-700 mb-2 font-semibold">
|
||
Artiste soliste • Groupe constitué d'artistes solistes • Choriste • Danseur
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 mt-3">
|
||
<div className="bg-white rounded-lg p-3 border border-pink-200">
|
||
<div className="text-xs text-pink-600 mb-1">1 à 7 cachets/mois</div>
|
||
<div className="text-lg font-bold text-pink-900">{euro(99.38)}</div>
|
||
<div className="text-xs text-pink-600">par représentation</div>
|
||
</div>
|
||
<div className="bg-white rounded-lg p-3 border border-pink-200">
|
||
<div className="text-xs text-pink-600 mb-1">8 cachets et plus/mois</div>
|
||
<div className="text-lg font-bold text-pink-900">{euro(90.84)}</div>
|
||
<div className="text-xs text-pink-600">par représentation</div>
|
||
</div>
|
||
<div className="bg-white rounded-lg p-3 border border-pink-200">
|
||
<div className="text-xs text-pink-600 mb-1">Salaire mensuel</div>
|
||
<div className="text-lg font-bold text-pink-900">{euro(1777.90)}</div>
|
||
<div className="text-xs text-pink-600">≥ 22 jours ou 24 repr.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Autres salles */}
|
||
<div className="border-l-4 border-purple-400 pl-4">
|
||
<h4 className="text-sm font-semibold text-purple-700 mb-3">📍 Autres salles</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"></th>
|
||
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200">1 à 7</th>
|
||
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200">8 à 15</th>
|
||
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200">16 et plus</th>
|
||
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Salaire mensuel</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="hover:bg-purple-50/30">
|
||
<td className="p-3 border border-purple-200">Artiste soliste</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(144.71)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(128.55)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(115.40)}</td>
|
||
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2307.92)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-purple-50/30">
|
||
<td className="p-3 border border-purple-200">Groupe constitué d'artistes solistes</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(129.17)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(115.95)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(103.34)}</td>
|
||
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(1795.69)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-purple-50/30">
|
||
<td className="p-3 border border-purple-200">Choriste dont la partie est intégrée au score du chef d'orchestre</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(126.74)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(113.60)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(101.54)}</td>
|
||
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2020.91)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-purple-50/30">
|
||
<td className="p-3 border border-purple-200">Choriste</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(102.52)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(91.46)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(81.70)}</td>
|
||
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(1777.90)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-purple-50/30">
|
||
<td className="p-3 border border-purple-200">Danseur</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(102.52)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(91.46)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(81.11)}</td>
|
||
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(1777.90)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="text-xs text-slate-600 mt-2">
|
||
💡 Rémunération par représentation • Salaire mensuel : ≥ 22 jours travaillés ou 24 représentations
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Artistes Musiciens Création/Production */}
|
||
<div className="rounded-xl border bg-white p-5">
|
||
<h3 className="text-base font-bold text-indigo-900 mb-3 flex items-center gap-2">
|
||
<span className="inline-block w-2 h-2 rounded-full bg-indigo-500"></span>
|
||
Artistes Musiciens - Création/Production
|
||
</h3>
|
||
<p className="text-xs text-slate-600 mb-4">
|
||
Le salaire mensuel s'entend pour 30 représentations au plus par mois, de date à date, répétitions non incluses
|
||
</p>
|
||
|
||
<div className="space-y-4">
|
||
{/* Musiciens ≤ 300 places */}
|
||
<div className="border-l-4 border-indigo-400 pl-4">
|
||
<h4 className="text-sm font-semibold text-indigo-700 mb-3">🎸 Salles ≤ 300 places (ou 1ères parties, plateaux découvertes et spectacles promotionnels en tournée)</h4>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-xs border-collapse">
|
||
<thead>
|
||
<tr className="bg-indigo-50">
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">1 à 7</th>
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">8 et plus</th>
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200 bg-indigo-100">Salaire mensuel</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="hover:bg-indigo-50/30">
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(119.01)}</td>
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(103.76)}</td>
|
||
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(1969.20)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="text-xs text-slate-600 mt-2 space-y-1">
|
||
<div>💡 Rémunération par représentation</div>
|
||
<div>ℹ️ <span className="font-semibold">Instruments multiples</span> (hors instruments de même famille) : minimum ne peut être inférieur à 110% du minimum conventionnel</div>
|
||
<div>ℹ️ <span className="font-semibold">Spectacle promotionnel en tournée</span> : 119,01€</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Musiciens autres salles */}
|
||
<div className="border-l-4 border-blue-400 pl-4">
|
||
<h4 className="text-sm font-semibold text-blue-700 mb-3">🎸 Autres salles</h4>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-xs border-collapse">
|
||
<thead>
|
||
<tr className="bg-blue-50">
|
||
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200">1 à 7</th>
|
||
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200">8 à 15</th>
|
||
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200">16 et plus</th>
|
||
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200 bg-blue-100">Salaire mensuel</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="hover:bg-blue-50/30">
|
||
<td className="text-center p-3 font-semibold border border-blue-200">{euro(174.36)}</td>
|
||
<td className="text-center p-3 font-semibold border border-blue-200">{euro(153.25)}</td>
|
||
<td className="text-center p-3 font-semibold border border-blue-200">{euro(134.86)}</td>
|
||
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(2968.47)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="text-xs text-slate-600 mt-2">
|
||
ℹ️ <span className="font-semibold">Instruments multiples</span> (hors instruments de même famille) : minimum ne peut être inférieur à 110% du minimum conventionnel
|
||
</div>
|
||
</div>
|
||
|
||
{/* Comédies musicales */}
|
||
<div className="border-l-4 border-cyan-400 pl-4">
|
||
<h4 className="text-sm font-semibold text-cyan-700 mb-3">🎭 Comédies musicales / orchestres > 10 musiciens</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"></th>
|
||
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">1 à 7</th>
|
||
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">8 à 15</th>
|
||
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">16 et plus</th>
|
||
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200 bg-cyan-100">Salaire mensuel</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="hover:bg-cyan-50/30">
|
||
<td className="p-3 border border-cyan-200">Engagement < 1 mois</td>
|
||
<td className="text-center p-3 font-semibold border border-cyan-200">{euro(129.89)}</td>
|
||
<td className="text-center p-3 font-semibold border border-cyan-200">{euro(129.89)}</td>
|
||
<td className="text-center p-3 font-semibold border border-cyan-200">{euro(129.89)}</td>
|
||
<td className="text-center p-3 border border-cyan-200 bg-cyan-50">—</td>
|
||
</tr>
|
||
<tr className="hover:bg-cyan-50/30">
|
||
<td className="p-3 border border-cyan-200">Engagement > 1 mois</td>
|
||
<td className="text-center p-3 border border-cyan-200">—</td>
|
||
<td className="text-center p-3 border border-cyan-200">—</td>
|
||
<td className="text-center p-3 border border-cyan-200">—</td>
|
||
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(2591.66)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="text-xs text-slate-600 mt-2">
|
||
ℹ️ <span className="font-semibold">Instruments multiples</span> (hors instruments de même famille) : minimum ne peut être inférieur à 110% du minimum conventionnel
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Comédies musicales/Spectacles variétés - Création */}
|
||
<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>
|
||
Comédies musicales / Spectacles de variétés - Création
|
||
</h3>
|
||
<p className="text-xs text-slate-600 mb-4">
|
||
Le salaire mensuel s'applique dès lors que le contrat de travail a une durée minimale d'un mois
|
||
</p>
|
||
|
||
<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 à 7</th>
|
||
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200">8 à 15</th>
|
||
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200">16 et plus</th>
|
||
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Salaire mensuel</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="bg-pink-100/50">
|
||
<td colSpan={5} className="p-2 pl-3 font-semibold text-pink-900 border border-pink-200">🎤 Chanteurs</td>
|
||
</tr>
|
||
<tr className="hover:bg-pink-50/30">
|
||
<td className="p-3 pl-6 border border-pink-200">1er chanteur soliste / 1er rôle</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(177.89)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(160.22)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(144.31)}</td>
|
||
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2886.29)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-pink-50/30">
|
||
<td className="p-3 pl-6 border border-pink-200">Chanteur soliste / 2nd rôle</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(142.55)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(127.23)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(113.68)}</td>
|
||
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2274.87)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-pink-50/30">
|
||
<td className="p-3 pl-6 border border-pink-200">Choriste</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(100.51)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(89.21)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(87.67)}</td>
|
||
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(1777.90)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-pink-100/50">
|
||
<td colSpan={5} className="p-2 pl-3 font-semibold text-pink-900 border border-pink-200">💃 Danseurs</td>
|
||
</tr>
|
||
<tr className="hover:bg-pink-50/30">
|
||
<td className="p-3 pl-6 border border-pink-200">1er danseur soliste / 1er rôle</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(177.89)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(160.22)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(144.31)}</td>
|
||
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2886.29)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-pink-50/30">
|
||
<td className="p-3 pl-6 border border-pink-200">Danseur soliste / 2nd rôle</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(166.11)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(146.08)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(129.00)}</td>
|
||
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2575.28)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-pink-50/30">
|
||
<td className="p-3 pl-6 border border-pink-200">Artiste chorégraphique d'ensemble</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(142.55)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(127.23)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(113.68)}</td>
|
||
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2274.87)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-pink-100/50">
|
||
<td colSpan={5} className="p-2 pl-3 font-semibold text-pink-900 border border-pink-200">🎪 Autres artistes</td>
|
||
</tr>
|
||
<tr className="hover:bg-pink-50/30">
|
||
<td className="p-3 pl-6 border border-pink-200">Artiste de music-hall, illusionniste, numéro visuel (jonglage, acrobaties, etc.)</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(177.89)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(164.34)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(147.86)}</td>
|
||
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2956.98)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-pink-50/30">
|
||
<td className="p-3 pl-6 border border-pink-200">Artiste dramatique, comédien / 1er rôle</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(177.89)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(164.34)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(147.86)}</td>
|
||
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2956.98)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-pink-50/30">
|
||
<td className="p-3 pl-6 border border-pink-200">Doublure</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(100.51)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(89.21)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(79.70)}</td>
|
||
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(1777.90)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-pink-50/30">
|
||
<td className="p-3 pl-6 border border-pink-200">1er assistant des attractions</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(97.54)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(88.03)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(81.80)}</td>
|
||
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(1777.90)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-pink-50/30">
|
||
<td className="p-3 pl-6 border border-pink-200">Autre assistant</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(87.77)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(81.45)}</td>
|
||
<td className="text-center p-3 font-semibold border border-pink-200">{euro(79.60)}</td>
|
||
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(1777.90)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="text-xs text-slate-600 mt-2">
|
||
💡 Rémunération par représentation • Salaire mensuel : contrat d'une durée minimale d'un mois
|
||
</div>
|
||
</div>
|
||
|
||
{/* Comédies musicales/Spectacles variétés - En tournée */}
|
||
<div className="rounded-xl border bg-white p-5">
|
||
<h3 className="text-base font-bold text-fuchsia-900 mb-3 flex items-center gap-2">
|
||
<span className="inline-block w-2 h-2 rounded-full bg-fuchsia-500"></span>
|
||
Comédies musicales / Spectacles de variétés - En tournée
|
||
</h3>
|
||
<p className="text-xs text-slate-600 mb-4">
|
||
Cachet par représentation selon le nombre de représentations par mois
|
||
</p>
|
||
|
||
<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">Fonction</th>
|
||
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">1 à 7</th>
|
||
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">8 à 15</th>
|
||
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">16 et plus</th>
|
||
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Salaire mensuel</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="bg-fuchsia-100/50">
|
||
<td colSpan={5} className="p-2 pl-3 font-semibold text-fuchsia-900 border border-fuchsia-200">🎤 Chanteurs</td>
|
||
</tr>
|
||
<tr className="hover:bg-fuchsia-50/30">
|
||
<td className="p-3 pl-6 border border-fuchsia-200">1er chanteur soliste / 1er rôle</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(212.64)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(190.27)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(171.41)}</td>
|
||
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(3423.49)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-fuchsia-50/30">
|
||
<td className="p-3 pl-6 border border-fuchsia-200">Chanteur soliste / 2nd rôle</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(170.82)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(150.80)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(134.89)}</td>
|
||
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(2698.99)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-fuchsia-50/30">
|
||
<td className="p-3 pl-6 border border-fuchsia-200">Choriste</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(119.56)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(105.36)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(94.56)}</td>
|
||
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(1888.97)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-fuchsia-100/50">
|
||
<td colSpan={5} className="p-2 pl-3 font-semibold text-fuchsia-900 border border-fuchsia-200">💃 Danseurs</td>
|
||
</tr>
|
||
<tr className="hover:bg-fuchsia-50/30">
|
||
<td className="p-3 pl-6 border border-fuchsia-200">1er danseur soliste / 1er rôle</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(212.65)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(190.27)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(171.41)}</td>
|
||
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(3423.49)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-fuchsia-50/30">
|
||
<td className="p-3 pl-6 border border-fuchsia-200">Danseur soliste / 2nd rôle</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(198.50)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(173.77)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(152.56)}</td>
|
||
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(3054.76)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-fuchsia-50/30">
|
||
<td className="p-3 pl-6 border border-fuchsia-200">Artiste chorégraphique d'ensemble</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(170.82)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(150.80)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(134.89)}</td>
|
||
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(2698.99)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-fuchsia-100/50">
|
||
<td colSpan={5} className="p-2 pl-3 font-semibold text-fuchsia-900 border border-fuchsia-200">🎪 Autres artistes</td>
|
||
</tr>
|
||
<tr className="hover:bg-fuchsia-50/30">
|
||
<td className="p-3 pl-6 border border-fuchsia-200">Artiste de music-hall, illusionniste</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(212.65)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(190.27)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(171.41)}</td>
|
||
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(3423.49)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-fuchsia-50/30">
|
||
<td className="p-3 pl-6 border border-fuchsia-200">1er assistant des attractions</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(116.01)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(104.17)}</td>
|
||
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(93.98)}</td>
|
||
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(1879.45)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="text-xs text-slate-600 mt-2">
|
||
💡 Cachet par représentation • Salaire mensuel selon nombre de représentations
|
||
</div>
|
||
</div>
|
||
|
||
{/* Spectacles de variétés/concerts - En tournée */}
|
||
<div className="rounded-xl border bg-white p-5">
|
||
<h3 className="text-base font-bold text-violet-900 mb-3 flex items-center gap-2">
|
||
<span className="inline-block w-2 h-2 rounded-full bg-violet-500"></span>
|
||
Spectacles de variétés / Concerts - En tournée
|
||
</h3>
|
||
<p className="text-xs text-slate-600 mb-4">
|
||
Artistes de variétés en tournée - Cachet par représentation
|
||
</p>
|
||
|
||
<div className="space-y-4">
|
||
{/* Salles < 300 places */}
|
||
<div className="border-l-4 border-violet-400 pl-4">
|
||
<h4 className="text-sm font-semibold text-violet-700 mb-3">📍 Salles de moins de 300 places (ou premières parties de spectacles ou spectacles promotionnels)</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">Fonction</th>
|
||
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200">1 à 7</th>
|
||
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200">8 à 11</th>
|
||
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200">12 à 15</th>
|
||
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200">16 et plus</th>
|
||
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200 bg-violet-100">Salaire mensuel</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="hover:bg-violet-50/30">
|
||
<td className="p-3 border border-violet-200">Chanteur soliste</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(119.01)}</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(108.36)}</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(98.26)}</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(90.00)}</td>
|
||
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200 bg-violet-50">{euro(1953.76)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-violet-50/30">
|
||
<td className="p-3 border border-violet-200">Groupe constitué d'artistes solistes</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(119.01)}</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(108.36)}</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(98.26)}</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(90.00)}</td>
|
||
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200 bg-violet-50">{euro(1953.76)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-violet-50/30">
|
||
<td className="p-3 border border-violet-200">Choriste</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(119.01)}</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(108.36)}</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(98.26)}</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(90.00)}</td>
|
||
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200 bg-violet-50">{euro(1953.76)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-violet-50/30">
|
||
<td className="p-3 border border-violet-200">Danseur</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(119.01)}</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(108.36)}</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(98.26)}</td>
|
||
<td className="text-center p-3 font-semibold border border-violet-200">{euro(90.00)}</td>
|
||
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200 bg-violet-50">{euro(1953.76)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="text-xs text-slate-600 mt-2">
|
||
ℹ️ <span className="font-semibold">Spectacle promotionnel</span> : 119,01€
|
||
</div>
|
||
</div>
|
||
|
||
{/* Autres salles */}
|
||
<div className="border-l-4 border-purple-400 pl-4">
|
||
<h4 className="text-sm font-semibold text-purple-700 mb-3">📍 Autres salles</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">Fonction</th>
|
||
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200">1 à 7</th>
|
||
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200">8 à 11</th>
|
||
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200">12 à 15</th>
|
||
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200">16 et plus</th>
|
||
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Salaire mensuel</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="hover:bg-purple-50/30">
|
||
<td className="p-3 border border-purple-200">Chanteur soliste</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(174.66)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(155.02)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(139.56)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(124.43)}</td>
|
||
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2927.05)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-purple-50/30">
|
||
<td className="p-3 border border-purple-200">Groupe constitué d'artistes solistes</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(155.02)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(138.06)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(124.81)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(114.64)}</td>
|
||
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2436.83)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-purple-50/30">
|
||
<td className="p-3 border border-purple-200">Choriste dont la partie est intégrée au score</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(151.11)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(134.45)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(122.55)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(119.59)}</td>
|
||
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2391.62)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-purple-50/30">
|
||
<td className="p-3 border border-purple-200">Choriste</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(122.59)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(109.06)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(100.05)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(92.28)}</td>
|
||
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(1907.86)}</td>
|
||
</tr>
|
||
<tr className="hover:bg-purple-50/30">
|
||
<td className="p-3 border border-purple-200">Danseur</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(122.59)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(109.06)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(100.05)}</td>
|
||
<td className="text-center p-3 font-semibold border border-purple-200">{euro(92.28)}</td>
|
||
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(1907.86)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="text-xs text-slate-600 mt-2">
|
||
ℹ️ <span className="font-semibold">Spectacle promotionnel</span> tel que défini au II.3, art. 4.3 : 119,01€
|
||
</div>
|
||
</div>
|
||
|
||
{/* Artistes musiciens */}
|
||
<div className="border-l-4 border-indigo-400 pl-4">
|
||
<h4 className="text-sm font-semibold text-indigo-700 mb-3">🎸 Artistes musiciens</h4>
|
||
|
||
<div className="space-y-3">
|
||
{/* Petites salles */}
|
||
<div>
|
||
<div className="text-xs font-semibold text-indigo-800 mb-2">Petites salles ou premières parties et spectacles promotionnels</div>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-xs border-collapse">
|
||
<thead>
|
||
<tr className="bg-indigo-50">
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">Moins de 8</th>
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">De 8 à 15</th>
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">16 et plus</th>
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200 bg-indigo-100">Salaire mensuel</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="hover:bg-indigo-50/30">
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(121.34)}</td>
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(106.03)}</td>
|
||
<td className="text-center p-3 border border-indigo-200">—</td>
|
||
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2002.74)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Autres salles */}
|
||
<div>
|
||
<div className="text-xs font-semibold text-indigo-800 mb-2">Autres salles</div>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-xs border-collapse">
|
||
<thead>
|
||
<tr className="bg-indigo-50">
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">Moins de 8</th>
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">De 8 à 15</th>
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">16 et plus</th>
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200 bg-indigo-100">Salaire mensuel</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="hover:bg-indigo-50/30">
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(176.09)}</td>
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(154.80)}</td>
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(136.25)}</td>
|
||
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2998.16)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Comédies musicales */}
|
||
<div>
|
||
<div className="text-xs font-semibold text-indigo-800 mb-2">Comédies musicales et orchestres de plus de 10 musiciens</div>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-xs border-collapse">
|
||
<thead>
|
||
<tr className="bg-indigo-50">
|
||
<th className="text-left p-3 text-indigo-900 font-bold border border-indigo-200"></th>
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">Moins de 8</th>
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">De 8 à 15</th>
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">16 et plus</th>
|
||
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200 bg-indigo-100">Salaire mensuel</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="hover:bg-indigo-50/30">
|
||
<td className="p-3 border border-indigo-200">Engagement < 1 mois</td>
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(131.19)}</td>
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(131.19)}</td>
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(131.19)}</td>
|
||
<td className="text-center p-3 border border-indigo-200 bg-indigo-50">—</td>
|
||
</tr>
|
||
<tr className="hover:bg-indigo-50/30">
|
||
<td className="p-3 border border-indigo-200">Engagement > 1 mois</td>
|
||
<td className="text-center p-3 border border-indigo-200">—</td>
|
||
<td className="text-center p-3 border border-indigo-200">—</td>
|
||
<td className="text-center p-3 border border-indigo-200">—</td>
|
||
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2604.62)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="text-xs text-slate-600 mt-3 space-y-1">
|
||
<div>💡 <span className="font-semibold">Pour 24 représentations ou journées de répétition par mois</span> (II.5, art. 1er)</div>
|
||
<div>ℹ️ <span className="font-semibold">Petites salles</span> : salles avoisinant 300 places (agréées par la commission paritaire)</div>
|
||
<div>ℹ️ <span className="font-semibold">Premières parties</span> : tarifs applicables ne dépassant pas 45 minutes (II.3, art. 4.1)</div>
|
||
<div>ℹ️ <span className="font-semibold">Spectacle promotionnel en tournée</span> (II.3, art. 4.3) : 119,01€</div>
|
||
<div>ℹ️ <span className="font-semibold">Instruments multiples</span> (hors instruments de même famille) : minimum ne peut être inférieur à 110% du minimum conventionnel</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Indemnités */}
|
||
<div className="rounded-xl border bg-white p-5">
|
||
<h3 className="text-base font-bold text-amber-900 mb-3 flex items-center gap-2">
|
||
<span className="inline-block w-2 h-2 rounded-full bg-amber-500"></span>
|
||
Indemnités de répétition et de déplacement
|
||
</h3>
|
||
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
<div className="border-l-4 border-amber-400 pl-4">
|
||
<h4 className="text-sm font-semibold text-amber-700 mb-2">🎭 Cachets de répétition</h4>
|
||
<div className="space-y-2">
|
||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
|
||
<div className="text-xs text-amber-700">Cachet de base (journée complète)</div>
|
||
<div className="text-lg font-bold text-amber-900">{euro(104.94)}</div>
|
||
</div>
|
||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
|
||
<div className="text-xs text-amber-700">Service isolé de 3 heures</div>
|
||
<div className="text-lg font-bold text-amber-900">{euro(72.95)}</div>
|
||
</div>
|
||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
|
||
<div className="text-xs text-amber-700">Instruments volumineux (transport A/R)</div>
|
||
<div className="text-lg font-bold text-amber-900">{euro(12.44)}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border-l-4 border-emerald-400 pl-4">
|
||
<h4 className="text-sm font-semibold text-emerald-700 mb-2">✈️ Indemnités de déplacement (France)</h4>
|
||
<div className="space-y-2">
|
||
<div className="bg-emerald-50 border border-emerald-200 rounded-lg p-3">
|
||
<div className="text-xs text-emerald-700">Indemnité journalière</div>
|
||
<div className="text-lg font-bold text-emerald-900">{euro(104.73)}</div>
|
||
</div>
|
||
<div className="bg-emerald-50 border border-emerald-200 rounded-lg p-3">
|
||
<div className="text-xs text-emerald-700">Chambre et petit-déjeuner</div>
|
||
<div className="text-lg font-bold text-emerald-900">{euro(69.45)}</div>
|
||
</div>
|
||
<div className="bg-emerald-50 border border-emerald-200 rounded-lg p-3">
|
||
<div className="text-xs text-emerald-700">Chaque repas principal</div>
|
||
<div className="text-lg font-bold text-emerald-900">{euro(17.64)}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Section Techniciens */}
|
||
{activeSection === 'techniciens' && (
|
||
<div className="space-y-6">
|
||
{/* Techniciens Production/Création/Salles */}
|
||
<div className="rounded-xl border bg-white p-5">
|
||
<h3 className="text-base font-bold text-blue-900 mb-3 flex items-center gap-2">
|
||
<span className="inline-block w-2 h-2 rounded-full bg-blue-500"></span>
|
||
Techniciens - Production/Création/Salles (hors tournée)
|
||
</h3>
|
||
<p className="text-xs text-slate-600 mb-4">
|
||
Classification commune nouvelle convention - Salaire horaire et mensuel (35 heures hebdo)
|
||
</p>
|
||
|
||
<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">Salaire horaire</th>
|
||
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200 bg-blue-100">Salaire mensuel<br/>(35h hebdo)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="bg-blue-100/50">
|
||
<td colSpan={3} className="p-2 pl-3 font-semibold text-blue-900 border border-blue-200">Cadres (Gr2) > 300 places</td>
|
||
</tr>
|
||
<tr className="hover:bg-blue-50/30">
|
||
<td className="p-3 pl-6 border border-blue-200 text-xs leading-relaxed">
|
||
Directeur technique, régisseur général, concepteur du son, ingénieur du son, concepteur lumière/éclairagiste, réalisateur vidéo, directeur décorateur, architecte-décorateur, scénographe, costumier/ensemblier, chef costumier, concepteur costumes, couturier coiffure perruquier, concepteur pour diffusion intégrée au spectacle, ingénieur du son-vidéo, chef opérateur, directeur technique site, régisseur général site
|
||
</td>
|
||
<td className="text-center p-3 font-semibold border border-blue-200">{euro(19.08)}</td>
|
||
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(2894.60)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-blue-100/50">
|
||
<td colSpan={3} className="p-2 pl-3 font-semibold text-blue-900 border border-blue-200">Cadres (Gr 2) < 300 places</td>
|
||
</tr>
|
||
<tr className="hover:bg-blue-50/30">
|
||
<td className="p-3 pl-6 border border-blue-200 text-xs leading-relaxed">
|
||
Directeur technique, régisseur général, concepteur du son, ingénieur du son, concepteur lumière/éclairagiste, réalisateur vidéo, directeur décorateur, architecte-décorateur, scénographe, costumier/ensemblier, chef costumier, concepteur costumes, couturier coiffure perruquier, concepteur pour diffusion intégrée au spectacle, ingénieur du son-vidéo, chef opérateur, directeur technique site, régisseur général site
|
||
</td>
|
||
<td className="text-center p-3 font-semibold border border-blue-200">{euro(17.32)}</td>
|
||
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(2626.59)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-indigo-100/50">
|
||
<td colSpan={3} className="p-2 pl-3 font-semibold text-indigo-900 border border-indigo-200">Agent de maîtrise > 300 places</td>
|
||
</tr>
|
||
<tr className="hover:bg-indigo-50/30">
|
||
<td className="p-3 pl-6 border border-indigo-200 text-xs leading-relaxed">
|
||
Régisseur, régisseur d'orchestre, régisseur de production, conseiller technique effets spéciaux, concepteur artificier, régisseur de scène, régisseur lumière, régisseur son, opérateur son, preneur de son, technicien console, sonorisateur CAO, projectionniste vidéo, régisseur vidéo, chef électricien, technicien CAO PAO, opérateur lumière, pupitreur, chef machiniste, régisseur plateau, chef monteur de structures, ensemblier décorateur de spectacle, réalisateur coiffure perruques, réalisateur costumes, réalisateur maquillages, masques, responsable costumes, responsable couture, chef habilleur, chef couturier/brodeur, opérateur vidéo, régisseur audiovisuel, chef de la sécurité, chef d'équipe site, régisseur de site
|
||
</td>
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(16.14)}</td>
|
||
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2447.91)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-indigo-100/50">
|
||
<td colSpan={3} className="p-2 pl-3 font-semibold text-indigo-900 border border-indigo-200">Agent de maîtrise < 300 places</td>
|
||
</tr>
|
||
<tr className="hover:bg-indigo-50/30">
|
||
<td className="p-3 pl-6 border border-indigo-200 text-xs leading-relaxed">
|
||
Régisseur, régisseur d'orchestre, régisseur de production, conseiller technique effets spéciaux, concepteur artificier, régisseur de scène, régisseur lumière, régisseur son, opérateur son, preneur de son, technicien console, sonorisateur CAO, projectionniste vidéo, régisseur vidéo, chef électricien, technicien CAO PAO, opérateur lumière, pupitreur, chef machiniste, régisseur plateau, chef monteur de structures, ensemblier décorateur de spectacle, réalisateur coiffure perruques, réalisateur costumes, réalisateur maquillages, masques, responsable costumes, responsable couture, chef habilleur, chef couturier/brodeur, opérateur vidéo, régisseur audiovisuel, chef de la sécurité, chef d'équipe site, régisseur de site
|
||
</td>
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(13.78)}</td>
|
||
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2090.55)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-cyan-100/50">
|
||
<td colSpan={3} className="p-2 pl-3 font-semibold text-cyan-900 border border-cyan-200">Employés qualifiés (Gr1) > 300 places</td>
|
||
</tr>
|
||
<tr className="hover:bg-cyan-50/30">
|
||
<td className="p-3 pl-6 border border-cyan-200 text-xs leading-relaxed">
|
||
Régisseur adjoint, technicien de maintenance en tournée et festival, technicien de pyrotechnie, technicien effets spéciaux, artificier, technicien groupe électrogène, technicien son, instruments, accordeur, électricien, technicien lumière, accessoiriste, accessoiriste-constructeur, accrocheur-rigger, assistant décorateur, cintier, constructeur décors structures, manufacturier de spectacle, serrurier métallurgie soudure, serrurier de spectacle, staffeur, constructeur machiniste, machiniste, tapissier de spectacle, sous-chef machinerie, technicien de structures, monteur de structures, nacelliste de spectacle, SCAFF holder, couturier, manutentionnaire de spectacle, technicien hydraulique, coiffeur/posticheur, couturier Gr1, maquilleur, modiste de spectacle, perruquier, plumassier/parementier, peintre décor tissu, peintre de spectacle, peintre en tournée, technicien vidéo, projectionniste, technicien prompteur, technicien visuel site, électricien site, monteur de structures site, serrurier site, tapissier site
|
||
</td>
|
||
<td className="text-center p-3 font-semibold border border-cyan-200">{euro(13.49)}</td>
|
||
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(2045.87)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-cyan-100/50">
|
||
<td colSpan={3} className="p-2 pl-3 font-semibold text-cyan-900 border border-cyan-200">Employés qualifiés (Gr1) < 300 places</td>
|
||
</tr>
|
||
<tr className="hover:bg-cyan-50/30">
|
||
<td className="p-3 pl-6 border border-cyan-200 text-xs leading-relaxed">
|
||
Régisseur adjoint, technicien de maintenance en tournée et festival, technicien de pyrotechnie, technicien effets spéciaux, artificier, technicien groupe électrogène, technicien son, instruments, accordeur, électricien, technicien lumière, accessoiriste, accessoiriste-constructeur, accrocheur-rigger, assistant décorateur, cintier, constructeur décors structures, manufacturier de spectacle, serrurier métallurgie soudure, serrurier de spectacle, staffeur, constructeur machiniste, machiniste, tapissier de spectacle, sous-chef machinerie, technicien de structures, monteur de structures, nacelliste de spectacle, SCAFF holder, couturier, manutentionnaire de spectacle, technicien hydraulique, coiffeur/posticheur, couturier Gr1, maquilleur, modiste de spectacle, perruquier, plumassier/parementier, peintre décor tissu, peintre de spectacle, peintre en tournée, technicien vidéo, projectionniste, technicien prompteur, technicien visuel site, électricien site, monteur de structures site, serrurier site, tapissier site
|
||
</td>
|
||
<td className="text-center p-3 font-semibold border border-cyan-200">{euro(12.42)}</td>
|
||
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(1884.21)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-teal-100/50">
|
||
<td colSpan={3} className="p-2 pl-3 font-semibold text-teal-900 border border-teal-200">Employés qualifiés (Gr2) > 300 places</td>
|
||
</tr>
|
||
<tr className="hover:bg-teal-50/30">
|
||
<td className="p-3 pl-6 border border-teal-200 text-xs leading-relaxed">
|
||
Technicien de plateau ou brigadier, prompteur, souffleur, poursuiveur, peintre, cariste de spectacles, habilleur-couturier, habilleur-perruquier, couturier, agent de sécurité, peintre site, cariste site, chauffeur, électricien d'entretien
|
||
</td>
|
||
<td className="text-center p-3 font-semibold border border-teal-200">{euro(12.67)}</td>
|
||
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200 bg-teal-50">{euro(1921.43)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-teal-100/50">
|
||
<td colSpan={3} className="p-2 pl-3 font-semibold text-teal-900 border border-teal-200">Employés qualifiés (Gr2) < 300 places</td>
|
||
</tr>
|
||
<tr className="hover:bg-teal-50/30">
|
||
<td className="p-3 pl-6 border border-teal-200 text-xs leading-relaxed">
|
||
Technicien de plateau ou brigadier, prompteur, souffleur, poursuiveur, peintre, cariste de spectacles, habilleur-couturier, habilleur-perruquier, couturier, agent de sécurité, peintre site, cariste site, chauffeur, électricien d'entretien
|
||
</td>
|
||
<td className="text-center p-3 font-semibold border border-teal-200">{euro(12.06)}</td>
|
||
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200 bg-teal-50">{euro(1828.83)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div className="text-xs text-slate-600 mt-3 space-y-1">
|
||
<div>💡 Salaire mensuel calculé sur 35 heures hebdomadaires</div>
|
||
<div>ℹ️ <span className="font-semibold">Amplitude journalière</span> : en cas d'amplitude excédant 10 heures, les heures effectuées au-delà de 8h feront l'objet d'un paiement majoré de 25%</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Techniciens en tournée */}
|
||
<div className="rounded-xl border bg-white p-5">
|
||
<h3 className="text-base font-bold text-cyan-900 mb-3 flex items-center gap-2">
|
||
<span className="inline-block w-2 h-2 rounded-full bg-cyan-500"></span>
|
||
Techniciens - En tournée
|
||
</h3>
|
||
<p className="text-xs text-slate-600 mb-4">
|
||
Classification commune nouvelle convention - Salaire horaire et mensuel (35 heures hebdo)
|
||
</p>
|
||
|
||
<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">Salaire horaire</th>
|
||
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200 bg-cyan-100">Salaire mensuel<br/>(35h hebdo)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="bg-cyan-100/50">
|
||
<td colSpan={3} className="p-2 pl-3 font-semibold text-cyan-900 border border-cyan-200">Cadres (Gr 2)</td>
|
||
</tr>
|
||
<tr className="hover:bg-cyan-50/30">
|
||
<td className="p-3 pl-6 border border-cyan-200 text-xs leading-relaxed">
|
||
Directeur technique, régisseur général, concepteur du son, ingénieur du son, concepteur lumière/éclairagiste, réalisateur vidéo, directeur décorateur, architecte-décorateur, scénographe, costumier/ensemblier, chef costumier, concepteur costumes, concepteur coiffure perruques, concepteur maquillage, masques, réalisateur pour diffusion intégrée au spectacle, ingénieur du son-vidéo, chef opérateur, directeur technique site, régisseur général site
|
||
</td>
|
||
<td className="text-center p-3 font-semibold border border-cyan-200">{euro(20.03)}</td>
|
||
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(3037.55)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-teal-100/50">
|
||
<td colSpan={3} className="p-2 pl-3 font-semibold text-teal-900 border border-teal-200">Agent de maîtrise</td>
|
||
</tr>
|
||
<tr className="hover:bg-teal-50/30">
|
||
<td className="p-3 pl-6 border border-teal-200 text-xs leading-relaxed">
|
||
Régisseur, régisseur d'orchestre, régisseur de production, conseiller technique effets spéciaux, concepteur artificier, régisseur plateau, régisseur son, régisseur lumière, régisseur de scène, régisseur de chœur, opérateur son, preneur de son, technicien console, sonorisateur, réalisateur son, monteur son, régisseur lumière, chef électricien, pupitreur, régisseur vidéo, CAO PAO, opérateur lumière, chef machiniste, régisseur plateau, chef monteur de structures, ensemblier de spectacle, réalisateur coiffure perruques, réalisateur costumes, réalisateur maquillages, masques, responsable costumes, responsable couture, chef habilleur, chef couturier/brodeur, chef atelier de costumes, cadreur, monteur, opérateur image/pupitreur, opérateur vidéo, régisseur audiovisuel, chef de la sécurité, chef d'équipe site, régisseur de site
|
||
</td>
|
||
<td className="text-center p-3 font-semibold border border-teal-200">{euro(17.08)}</td>
|
||
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200 bg-teal-50">{euro(2590.85)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-blue-100/50">
|
||
<td colSpan={3} className="p-2 pl-3 font-semibold text-blue-900 border border-blue-200">Employés qualifiés (Gr 1)</td>
|
||
</tr>
|
||
<tr className="hover:bg-blue-50/30">
|
||
<td className="p-3 pl-6 border border-blue-200 text-xs leading-relaxed">
|
||
Régisseur adjoint, technicien de maintenance en tournée et festival, technicien de pyrotechnie, technicien effets spéciaux, artificier, technicien groupe électrogène, technicien son, technicien instruments, accordeur, électricien, technicien lumière, accessoiriste, accessoiriste-constructeur, accrocheur-rigger, assistant décorateur, cintier, constructeur décors structures, menuisier de spectacle, peintre décorateur, sculpteur de spectacle, serrurier de spectacle, staffeur, constructeur machiniste, machiniste, tapissier de spectacle, sous-chef machinerie, technicien de structures, monteur de structures, monteur SCAFF holder de spectacle, nacelliste de spectacle, technicien hydraulique, coiffeur/posticheur, couturier Gr1, maquilleur, modiste de spectacle, perruquier, plumassier/parementier de spectacle, tailleur, costumier (spectacle en tournée), technicien vidéo, projectionniste, technicien prompteur, technicien visuel site, électricien site, monteur de structures site, serrurier site, tapissier site
|
||
</td>
|
||
<td className="text-center p-3 font-semibold border border-blue-200">{euro(14.73)}</td>
|
||
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(2233.48)}</td>
|
||
</tr>
|
||
|
||
<tr className="bg-indigo-100/50">
|
||
<td colSpan={3} className="p-2 pl-3 font-semibold text-indigo-900 border border-indigo-200">Employés qualifiés (Gr 2)</td>
|
||
</tr>
|
||
<tr className="hover:bg-indigo-50/30">
|
||
<td className="p-3 pl-6 border border-indigo-200 text-xs leading-relaxed">
|
||
Technicien de plateau ou brigadier, prompteur, souffleur, poursuiveur, peintre, cariste de spectacles, habilleur-couturier, habilleur-perruquier, couturier, agent de sécurité, peintre site, cariste site, chauffeur, électricien d'entretien
|
||
</td>
|
||
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(13.55)}</td>
|
||
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2054.82)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div className="text-xs text-slate-600 mt-3 space-y-1">
|
||
<div>💡 Salaire mensuel calculé sur 35 heures hebdomadaires</div>
|
||
<div>ℹ️ <span className="font-semibold">Amplitude journalière</span> : en cas d'amplitude excédant 10 heures, les heures effectuées au-delà de 8h feront l'objet d'un paiement majoré de 25%. Cette majoration sera déduite de l'éventuelle majoration pour heures supplémentaires que le salaire pourrait être amené à percevoir dans les conditions prévues par la présente annexe.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|