renaud/espace-paie-odentas
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Minima

Browse source
This commit is contained in:
Renaud 2025-10-18 00:29:58 +02:00
parent e5382f6491
commit 5c36a4a8ee
15 changed files with 1804 additions and 579 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/(app)/minima-ccn/ccneac/artistes-cirque-data.tsx
View file

@ -66,30 +66,27 @@ export default function ArtistesCirqueContent() {
<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">Taille du plateau</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Cachet représentation</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Cachet fractionné</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Salaire mensuel</th>
<th rowSpan={2} className="text-left p-3 text-pink-900 font-bold border border-pink-200">Nombre de cachet par mois</th>
<th colSpan={2} className="text-center p-2 text-[10px] leading-tight text-pink-900 font-bold border border-pink-200">Nombre de cachet par mois</th>
<th rowSpan={2} className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Salaire mensuel</th>
</tr>
<tr className="bg-pink-50">
<th className="text-center p-2 text-[10px] leading-tight text-pink-900 font-bold border border-pink-200">1 à 2</th>
<th className="text-center p-2 text-[10px] leading-tight text-pink-900 font-bold border border-pink-200">+ de 2</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200 font-semibold">
<Users className="w-4 h-4 inline-block mr-1 text-pink-600" />
Plateau ≤ 5 artistes
</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(159.56)}</td>
<td className="p-3 border border-pink-200 font-semibold">Plateau inférieur ou égal à 5 artistes</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(159.56)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(138.85)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(2252.37)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2252.37)}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200 font-semibold">
<Users className="w-4 h-4 inline-block mr-1 text-pink-600" />
Plateau &gt; 5 artistes
</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(138.85)}</td>
<td className="p-3 border border-pink-200 font-semibold">Plateau sup. à 5 artistes</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(138.85)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(2252.37)}</td>
<td className="text-center p-3 font-semibold border border-pink-200">{euro(138.85)}</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2252.37)}</td>
</tr>
</tbody>
</table>
@ -118,10 +115,7 @@ export default function ArtistesCirqueContent() {
</thead>
<tbody>
<tr className="hover:bg-amber-50/30">
<td className="p-3 border border-amber-200 font-semibold">
<Calendar className="w-4 h-4 inline-block mr-1 text-amber-600" />
Cachet de base par jour
</td>
<td className="p-3 border border-amber-200 font-semibold">Cachet de base par jour</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200 bg-amber-50">{euro(122.10)}</td>
</tr>
<tr className="hover:bg-amber-50/30">

6
app/(app)/minima-ccn/ccneac/artistes-musiciens-data.tsx
View file

@ -70,7 +70,7 @@ export default function ArtistesMusiciensContent() {
}`}
>
<Piano className="w-4 h-4 inline-block mr-1" />
Musique de chambre
Engagés au sein d'autres entreprises
</button>
</div>
@ -296,14 +296,14 @@ export default function ArtistesMusiciensContent() {
</div>
)}
{/* Section Musique de chambre */}
{/* Section Engagés au sein d'autres entreprises */}
{activeSection === 'chambre' && (
<div className="space-y-6">
{/* Minima mensuels */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-indigo-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-indigo-500"></span>
Minima mensuels - Musique de chambre
Minima mensuels
</h3>
<div className="overflow-x-auto">

344
app/(app)/minima-ccn/ccneac/emplois-non-artistiques-data.tsx Normal file
View file

@ -0,0 +1,344 @@
"use client";
import React, { useState } from 'react';
import { Briefcase, ChevronDown, Search } from 'lucide-react';
const euro = (n: number) => new Intl.NumberFormat('fr-FR', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(n) + '€';
// Données des minima par groupe et échelon
const minimaData = {
'Groupe 1': [3495.87, 3600.75, 3705.62, 3810.50, 3915.37, 4020.25, 4125.13, 4230.00, 4334.88, 4439.75, 4544.63, 4649.51],
'Groupe 2': [2734.91, 2816.96, 2899.00, 2981.05, 3063.10, 3145.15, 3227.19, 3309.24, 3391.29, 3473.34, 3555.38, 3637.43],
'Groupe 3': [2522.44, 2598.11, 2673.79, 2749.46, 2825.13, 2900.81, 2976.48, 3052.15, 3127.83, 3203.50, 3279.17, 3354.85],
'Groupe 4': [2324.51, 2394.25, 2463.98, 2533.72, 2603.45, 2673.19, 2742.92, 2812.66, 2882.39, 2952.13, 3021.86, 3091.60],
'Groupe 5': [1991.44, 2051.18, 2110.93, 2170.67, 2230.41, 2290.16, 2349.90, 2409.64, 2469.39, 2529.13, 2588.87, 2648.62],
'Groupe 6': [1870.99, 1927.12, 1983.25, 2039.38, 2095.51, 2151.64, 2207.77, 2263.90, 2320.03, 2376.16, 2432.29, 2488.42],
'Groupe 7': [1811.69, 1866.04, 1920.39, 1974.74, 2029.09, 2083.44, 2137.79, 2192.14, 2246.50, 2300.85, 2355.20, 2409.55],
'Groupe 8': [1784.42, 1837.95, 1891.49, 1945.02, 1998.55, 2052.08, 2105.62, 2159.15, 2212.68, 2266.21, 2319.75, 2373.28],
'Groupe 9': [1770.58, 1823.70, 1876.81, 1929.93, 1983.05, 2036.17, 2089.28, 2142.40, 2195.52, 2248.64, 2301.75, 2354.87],
};
// Liste des professions et leurs groupes
const professionsData = [
{ profession: "Directeur", groupe: 1 },
{ profession: "Administrateur", groupe: 2 },
{ profession: "Secrétaire Général", groupe: 3 },
{ profession: "Directeur de Production", groupe: 3 },
{ profession: "Conseiller Technique", groupe: 4 },
{ profession: "Responsable d'Administration", groupe: 4 },
{ profession: "Chef Comptable", groupe: 4 },
{ profession: "Collaborateur de Direction", groupe: 4 },
{ profession: "Administrateur de Production", groupe: 4 },
{ profession: "Administrateur de Diffusion", groupe: 4 },
{ profession: "Programmateur Artistique", groupe: 4 },
{ profession: "Secrétaire de Direction", groupe: 5 },
{ profession: "Comptable Principal", groupe: 5 },
{ profession: "Chargé de Production", groupe: 5 },
{ profession: "Chargé de Diffusion", groupe: 5 },
{ profession: "Bibliothécaire Musical", groupe: 5 },
{ profession: "Copiste", groupe: 5 },
{ profession: "Attaché de Programmation", groupe: 6 },
{ profession: "Attaché de Production", groupe: 6 },
{ profession: "Attaché de Diffusion", groupe: 6 },
{ profession: "Attaché d'Administration", groupe: 6 },
{ profession: "Comptable", groupe: 7 },
{ profession: "Secrétaire", groupe: 8 },
{ profession: "Secrétaire-Comptable", groupe: 8 },
{ profession: "Aide-Comptable", groupe: 9 },
{ profession: "Caissier", groupe: 9 },
{ profession: "Standardiste", groupe: 9 },
{ profession: "Employé de Bureau", groupe: 9 },
{ profession: "Agent de Catering", groupe: 9 },
{ profession: "Directeur de la Communication", groupe: 3 },
{ profession: "Directeur des Relations Publiques", groupe: 3 },
{ profession: "Directeur de l'Action Culturelle", groupe: 3 },
{ profession: "Responsable des relations avec la presse", groupe: 4 },
{ profession: "Responsable de Formation", groupe: 4 },
{ profession: "Responsable de l'Action Culturelle", groupe: 4 },
{ profession: "Responsable du secteur de l'information", groupe: 4 },
{ profession: "Chargé du secteur des relations avec le public", groupe: 5 },
{ profession: "Attaché à l'Accueil", groupe: 6 },
{ profession: "Attaché à l'information", groupe: 6 },
{ profession: "Attaché aux relations avec le public", groupe: 6 },
{ profession: "Attaché à l'accompagnement des pratiques artistiques et culturelles", groupe: 6 },
{ profession: "Graphiste ou Infographiste", groupe: 6 },
{ profession: "Documentaliste", groupe: 7 },
{ profession: "Maquettiste PAO", groupe: 7 },
{ profession: "Caissier-hôte d'accueil", groupe: 8 },
{ profession: "Hôte(sse) d'accueil", groupe: 9 },
{ profession: "Contrôleur", groupe: 9 },
{ profession: "Hôte(sse) de salle", groupe: 9 },
{ profession: "Employé de routage", groupe: 9 },
{ profession: "Employé de bar", groupe: 9 },
{ profession: "Directeur technique", groupe: 3 },
{ profession: "Scénographe", groupe: 3 },
{ profession: "Régisseur général", groupe: 4 },
{ profession: "Concepteur", groupe: 4 },
{ profession: "Eclairagiste", groupe: 4 },
{ profession: "Concepteur lumière", groupe: 4 },
{ profession: "Ingénieur du son", groupe: 4 },
{ profession: "Concepteur des costumes", groupe: 4 },
{ profession: "Concepteur des maquillages", groupe: 4 },
{ profession: "Concepteur des perruques", groupe: 4 },
{ profession: "Concepteur des coiffures", groupe: 4 },
{ profession: "Concepteur des artifices", groupe: 4 },
{ profession: "Décorateur", groupe: 4 },
{ profession: "Pyrotechnicien", groupe: 4 },
{ profession: "Concepteur images-vidéo", groupe: 4 },
{ profession: "Concepteur de structure scénique ou acrobatique", groupe: 4 },
{ profession: "Réalisateur des costumes", groupe: 5 },
{ profession: "Réalisateur des chapeaux", groupe: 5 },
{ profession: "Réalisateur des maquillages", groupe: 5 },
{ profession: "Réalisateur des masques", groupe: 5 },
{ profession: "Réalisateur des coiffures", groupe: 5 },
{ profession: "Réalisateur des perruques", groupe: 5 },
{ profession: "Réalisateur son", groupe: 5 },
{ profession: "Réalisateur lumière", groupe: 5 },
{ profession: "Réalisateur pyrotechnique", groupe: 5 },
{ profession: "Réalisateur de décor", groupe: 5 },
{ profession: "Réalisateur de structure scénique ou acrobatique", groupe: 5 },
{ profession: "Réalisateur d'accessoires", groupe: 5 },
{ profession: "Régisseur principal ou de site", groupe: 5 },
{ profession: "Régisseur de structure mobile, acrobatique ou scénique", groupe: 5 },
{ profession: "Régisseur de scène ou de plateau", groupe: 6 },
{ profession: "Régisseur d'orchestre", groupe: 6 },
{ profession: "Régisseur de choeurs", groupe: 6 },
{ profession: "Régisseur lumière", groupe: 6 },
{ profession: "Régisseur son", groupe: 6 },
{ profession: "Régisseur de lieux de répétition", groupe: 6 },
{ profession: "Régisseur audiovisuel-vidéo de spectacle", groupe: 6 },
{ profession: "Régisseur de production", groupe: 6 },
{ profession: "Technicien de réalisation", groupe: 6 },
{ profession: "Tapissier de théâtre", groupe: 6 },
{ profession: "Ensemblier", groupe: 6 },
{ profession: "Menuisier de théâtre", groupe: 6 },
{ profession: "Peintre décorateur", groupe: 6 },
{ profession: "Peintre de théâtre", groupe: 6 },
{ profession: "Sculpteur de théâtre", groupe: 6 },
{ profession: "Serrurier", groupe: 6 },
{ profession: "Serrurier métallier", groupe: 6 },
{ profession: "Staffeur", groupe: 6 },
{ profession: "Chef-machiniste", groupe: 6 },
{ profession: "Dessinateur DAO-CAO", groupe: 7 },
{ profession: "Constructeur", groupe: 7 },
{ profession: "Machiniste", groupe: 7 },
{ profession: "Opérateur projectionniste", groupe: 7 },
{ profession: "Electricien", groupe: 7 },
{ profession: "Technicien hydraulique-de structure", groupe: 7 },
{ profession: "Technicien lumière", groupe: 7 },
{ profession: "Technicien son", groupe: 7 },
{ profession: "Technicien console", groupe: 7 },
{ profession: "Technicien vidéo", groupe: 7 },
{ profession: "Technicien image", groupe: 7 },
{ profession: "Technicien effets spéciaux", groupe: 7 },
{ profession: "Technicien groupe électrogène", groupe: 7 },
{ profession: "Technicien instruments", groupe: 7 },
{ profession: "Technicien de sécurité", groupe: 7 },
{ profession: "Monteur de structure mobile", groupe: 8 },
{ profession: "Monteur de structure acrobatique ou scénique", groupe: 8 },
{ profession: "Assistant instrument de musique (backline)", groupe: 8 },
{ profession: "Cintrier", groupe: 8 },
{ profession: "Ouvrier professionnel", groupe: 8 },
{ profession: "Ouvrier son", groupe: 8 },
{ profession: "Ouvrier prompteur", groupe: 8 },
{ profession: "Ouvrier lumière-poursuiteur", groupe: 8 },
{ profession: "Ouvrier vidéo-images", groupe: 8 },
{ profession: "Ouvrier accrocheur (rigger)", groupe: 8 },
{ profession: "Perruquier", groupe: 8 },
{ profession: "Chapelier", groupe: 8 },
{ profession: "Bottier", groupe: 8 },
{ profession: "Maquilleur", groupe: 8 },
{ profession: "Posticheur", groupe: 8 },
{ profession: "Coiffeur", groupe: 8 },
{ profession: "Habilleur", groupe: 8 },
{ profession: "Armurier", groupe: 8 },
{ profession: "Artificier", groupe: 8 },
{ profession: "Accessoiriste", groupe: 8 },
{ profession: "Lingère", groupe: 8 },
{ profession: "Repasseur·se", groupe: 8 },
{ profession: "Retoucheur·se", groupe: 8 },
{ profession: "Chauffeur-coursier", groupe: 9 },
{ profession: "Employé de nettoyage", groupe: 9 },
{ profession: "Gardien", groupe: 9 },
{ profession: "Employé polyvalent", groupe: 9 },
];
export default function EmploisNonArtistiquesContent() {
const [selectedGroupe, setSelectedGroupe] = useState<string>('Groupe 1');
const [searchTerm, setSearchTerm] = useState<string>('');
const [searchResults, setSearchResults] = useState<typeof professionsData>([]);
const [selectedProfession, setSelectedProfession] = useState<string>('');
const handleSearch = (term: string) => {
setSearchTerm(term);
if (term.trim() === '') {
setSearchResults([]);
return;
}
const results = professionsData.filter(item =>
item.profession.toLowerCase().includes(term.toLowerCase())
);
setSearchResults(results);
};
const selectProfession = (profession: string, groupe: number) => {
setSelectedGroupe(`Groupe ${groupe}`);
setSelectedProfession(profession);
setSearchTerm('');
setSearchResults([]);
};
return (
<div className="space-y-6">
{/* En-tête */}
<div className="rounded-xl border bg-gradient-to-br from-slate-50 to-gray-50 p-4">
<h2 className="text-lg font-semibold text-slate-900 mb-1">
Emplois non artistiques
</h2>
<p className="text-sm text-slate-700">
Minima mensuels conventionnels pour les emplois administratifs, techniques et commerciaux
</p>
<p className="text-xs text-slate-600 mt-2">
Grille de salaires applicable au 1er juin 2024
</p>
</div>
{/* Recherche et sélection côte à côte */}
<div className="rounded-xl border bg-white p-5">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{/* Moteur de recherche de profession */}
<div>
<label htmlFor="profession-search" className="block text-sm font-semibold text-slate-900 mb-3 flex items-center gap-2">
<Search className="w-4 h-4" />
Rechercher une profession
</label>
<div className="relative">
<input
id="profession-search"
type="text"
value={searchTerm}
onChange={(e) => handleSearch(e.target.value)}
placeholder="Tapez le nom d'une profession..."
className="w-full px-4 py-3 pl-10 rounded-lg border-2 border-slate-200 bg-white text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all"
/>
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
</div>
{/* Résultats de recherche */}
{searchResults.length > 0 && (
<div className="mt-3 border border-slate-200 rounded-lg divide-y divide-slate-100 max-h-60 overflow-y-auto shadow-lg">
{searchResults.map((result, index) => (
<button
key={index}
onClick={() => selectProfession(result.profession, result.groupe)}
className="w-full px-4 py-3 text-left hover:bg-indigo-50 transition-colors flex items-center justify-between group"
>
<span className="text-sm text-slate-900 font-medium">{result.profession}</span>
<span className="text-xs font-bold text-indigo-600 bg-indigo-100 px-2 py-1 rounded group-hover:bg-indigo-200">
Groupe {result.groupe}
</span>
</button>
))}
</div>
)}
{searchTerm && searchResults.length === 0 && (
<div className="mt-3 p-4 bg-amber-50 border border-amber-200 rounded-lg">
<p className="text-sm text-amber-800">
Aucune profession trouvée pour "{searchTerm}".
</p>
</div>
)}
{/* Profession sélectionnée */}
{selectedProfession && (
<div className="mt-3 p-3 bg-green-50 border border-green-200 rounded-lg">
<p className="text-xs text-green-700 font-medium mb-1">Profession sélectionnée :</p>
<p className="text-sm text-green-900 font-bold">{selectedProfession}</p>
</div>
)}
</div>
{/* Sélecteur de groupe */}
<div>
<label htmlFor="groupe-select" className="block text-sm font-semibold text-slate-900 mb-3">
Ou sélectionnez directement un groupe :
</label>
<div className="relative">
<select
id="groupe-select"
value={selectedGroupe}
onChange={(e) => {
setSelectedGroupe(e.target.value);
setSelectedProfession('');
}}
className="w-full appearance-none px-4 py-3 pr-10 rounded-lg border-2 border-slate-200 bg-white text-slate-900 font-semibold focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all cursor-pointer"
>
{Object.keys(minimaData).map((groupe) => (
<option key={groupe} value={groupe}>
{groupe}
</option>
))}
</select>
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 pointer-events-none" />
</div>
</div>
</div>
</div>
{/* Tableau des minima pour le groupe sélectionné */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-indigo-900 mb-4 flex items-center gap-2">
<Briefcase className="w-5 h-5" />
Minima mensuels - {selectedGroupe}
</h3>
<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>
{Array.from({ length: 12 }, (_, i) => (
<th key={i + 1} className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">
Échelon {i + 1}
</th>
))}
</tr>
</thead>
<tbody>
<tr className="hover:bg-indigo-50/30">
<td className="p-3 border border-indigo-200 font-semibold text-indigo-900">Mensuel</td>
{minimaData[selectedGroupe as keyof typeof minimaData].map((montant, index) => (
<td key={index} className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50/50">
{euro(montant)}
</td>
))}
</tr>
<tr className="hover:bg-indigo-50/30">
<td className="p-3 border border-indigo-200 font-semibold text-indigo-900">Taux horaire</td>
{minimaData[selectedGroupe as keyof typeof minimaData].map((montant, index) => (
<td key={index} className="text-center p-3 font-semibold text-indigo-700 border border-indigo-200">
{euro(montant / 151.4)}
</td>
))}
</tr>
</tbody>
</table>
</div>
{/* Note explicative */}
<div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
<p className="text-xs text-blue-900">
<span className="font-semibold">💡 Note :</span> Ces montants correspondent aux salaires mensuels minimaux bruts
pour les emplois non artistiques selon la classification conventionnelle CCNEAC.
Chaque groupe comporte 12 échelons représentant une progression salariale.
</p>
</div>
</div>
</div>
);
}

175
app/(app)/minima-ccn/ccneac/page.tsx
View file

@ -3,17 +3,85 @@
import React, { useEffect, useState } from 'react';
import { usePageTitle } from '@/hooks/usePageTitle';
import Link from 'next/link';
import { ArrowLeft, Scale, Calculator } from 'lucide-react';
import { ArrowLeft, Scale, Calculator, X } from 'lucide-react';
import ArtistesDramatiquesContent from './artistes-dramatiques-data';
import ArtistesMusiciensContent from './artistes-musiciens-data';
import ArtistesLyriquesContent from './artistes-lyriques-data';
import ArtistesCirqueContent from './artistes-cirque-data';
import Sidebar from '@/components/ui/Sidebar';
import EmploisNonArtistiquesContent from './emplois-non-artistiques-data';
import SimulateurContent from '@/components/simulateur/SimulateurContent';
import CalculatorComponent from '@/components/Calculator';
export default function CCNEACPage() {
usePageTitle("Minima CCNEAC");
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const [isSimulateurOpen, setIsSimulateurOpen] = useState(false);
const [isCalculatorOpen, setIsCalculatorOpen] = useState(false);
const [modalPosition, setModalPosition] = useState({ x: 0, y: 0 });
const [isDragging, setIsDragging] = useState(false);
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
const modalRef = React.useRef<HTMLDivElement>(null);
// Gestion du drag & drop du modal
const handleMouseDown = (e: React.MouseEvent) => {
if (!modalRef.current) return;
// Si c'est le premier drag, calculer la position réelle du modal
if (modalPosition.x === 0 && modalPosition.y === 0) {
const rect = modalRef.current.getBoundingClientRect();
setModalPosition({ x: rect.left, y: rect.top });
setDragOffset({
x: e.clientX - rect.left,
y: e.clientY - rect.top,
});
} else {
setDragOffset({
x: e.clientX - modalPosition.x,
y: e.clientY - modalPosition.y,
});
}
setIsDragging(true);
};
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
if (!isDragging) return;
const newX = e.clientX - dragOffset.x;
const newY = e.clientY - dragOffset.y;
setModalPosition({
x: newX,
y: newY,
});
};
const handleMouseUp = () => {
setIsDragging(false);
};
if (isDragging) {
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [isDragging, dragOffset]);
// Écouter les messages de l'iframe pour ouvrir la calculatrice
useEffect(() => {
const handleMessage = (event: MessageEvent) => {
if (event.data?.type === 'openCalculator') {
setIsCalculatorOpen(true);
}
};
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
}, []);
useEffect(() => {
// Script de gestion des onglets
@ -153,18 +221,9 @@ export default function CCNEACPage() {
{/* Onglets */}
<section className="rounded-2xl border bg-white p-6 ccneac-tabs">
<div className="flex items-center justify-between mb-4">
<p className="text-sm text-slate-600">
Cliquez sur un onglet pour accéder aux minima par catégorie d'artistes ou de personnel.
</p>
<button
onClick={() => setIsSidebarOpen(true)}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 hover:from-amber-500 hover:to-amber-600 transition-all shadow-sm"
>
<Calculator className="w-4 h-4" />
Simulateur
</button>
</div>
<p className="text-sm text-slate-600 mb-4">
Cliquez sur un onglet pour accéder aux minima par catégorie d'artistes ou de personnel.
</p>
<div role="tablist" aria-label="Onglets CCNEAC">
<button
@ -199,6 +258,14 @@ export default function CCNEACPage() {
>
Artistes de cirque
</button>
<button
role="tab"
aria-selected="false"
aria-controls="ccneac-emplois-non-artistiques"
tabIndex={-1}
>
Emplois non artistiques
</button>
</div>
{/* Panneaux */}
@ -214,17 +281,79 @@ export default function CCNEACPage() {
<div id="ccneac-artistes-cirque" className="ccneac-panel" role="tabpanel" hidden>
<ArtistesCirqueContent />
</div>
<div id="ccneac-emplois-non-artistiques" className="ccneac-panel" role="tabpanel" hidden>
<EmploisNonArtistiquesContent />
</div>
</section>
{/* Sidebar pour le simulateur */}
<Sidebar
isOpen={isSidebarOpen}
onClose={() => setIsSidebarOpen(false)}
title="Simulateur de paie intermittent"
width="1200px"
{/* Bouton flottant Simulateur */}
<button
onClick={() => setIsSimulateurOpen(!isSimulateurOpen)}
className="fixed bottom-6 right-6 z-50 inline-flex items-center gap-2 px-5 py-3 rounded-full text-sm font-bold bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 hover:from-amber-500 hover:to-amber-600 transition-all shadow-lg hover:shadow-xl hover:scale-105"
>
<SimulateurContent />
</Sidebar>
<Calculator className="w-5 h-5" />
Simulateur
</button>
{/* Modale compacte qui sort du bouton */}
{isSimulateurOpen && (
<>
{/* Overlay transparent pour fermer au clic */}
<div
className="fixed inset-0 z-40"
onClick={() => {
setIsSimulateurOpen(false);
setModalPosition({ x: 0, y: 0 }); // Réinitialiser la position
}}
/>
{/* Modale compacte déplaçable */}
<div
ref={modalRef}
className="fixed z-50 w-[500px] max-h-[600px] bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden animate-in slide-in-from-bottom-4 duration-300"
style={{
left: modalPosition.x !== 0 ? `${modalPosition.x}px` : 'auto',
top: modalPosition.y !== 0 ? `${modalPosition.y}px` : 'auto',
bottom: modalPosition.x === 0 && modalPosition.y === 0 ? '6rem' : 'auto',
right: modalPosition.x === 0 && modalPosition.y === 0 ? '1.5rem' : 'auto',
}}
onClick={(e) => e.stopPropagation()}
>
{/* Header draggable */}
<div
className="flex items-center justify-between px-4 py-3 border-b bg-gradient-to-r from-amber-50 to-orange-50 cursor-move select-none"
onMouseDown={handleMouseDown}
>
<h3 className="text-sm font-bold text-slate-900 flex items-center gap-2">
<Calculator className="w-4 h-4 text-amber-600" />
Simulateur de paie
</h3>
<button
onClick={() => {
setIsSimulateurOpen(false);
setModalPosition({ x: 0, y: 0 }); // Réinitialiser la position
}}
className="p-1.5 rounded-lg hover:bg-slate-100 transition-colors"
aria-label="Fermer le simulateur"
onMouseDown={(e) => e.stopPropagation()}
>
<X className="w-4 h-4 text-slate-600" />
</button>
</div>
{/* Content avec scroll */}
<div className="flex-1 overflow-auto p-4">
<SimulateurContent hideInfoPanel />
</div>
</div>
</>
)}
{/* Calculatrice globale */}
<CalculatorComponent
isOpen={isCalculatorOpen}
onClose={() => setIsCalculatorOpen(false)}
/>
</div>
);
}

78
app/(app)/minima-ccn/ccnsvp/annexe2-data.tsx
View file

@ -292,9 +292,11 @@ export default function Annexe2Content({}: Annexe2ContentProps) {
</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 flex items-center gap-2">
<Mic2 className="w-4 h-4" />
Chanteurs
<td colSpan={5} className="p-2 pl-3 font-semibold text-pink-900 border border-pink-200">
<div className="flex items-center gap-2">
<Mic2 className="w-4 h-4" />
Chanteurs
</div>
</td>
</tr>
<tr className="hover:bg-pink-50/30">
@ -413,9 +415,11 @@ export default function Annexe2Content({}: Annexe2ContentProps) {
</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 flex items-center gap-2">
<Mic2 className="w-4 h-4" />
Chanteurs
<td colSpan={5} className="p-2 pl-3 font-semibold text-fuchsia-900 border border-fuchsia-200">
<div className="flex items-center gap-2">
<Mic2 className="w-4 h-4" />
Chanteurs
</div>
</td>
</tr>
<tr className="hover:bg-fuchsia-50/30">
@ -485,9 +489,6 @@ export default function Annexe2Content({}: Annexe2ContentProps) {
</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 */}
@ -715,7 +716,7 @@ export default function Annexe2Content({}: Annexe2ContentProps) {
</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">Salaire mensuel 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>
@ -794,95 +795,76 @@ export default function Annexe2Content({}: Annexe2ContentProps) {
<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">Salles</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) &gt; 300 places</td>
<td colSpan={4} className="p-2 pl-3 font-semibold text-blue-900 border border-blue-200">Cadres (Gr2)</td>
</tr>
<tr className="hover:bg-blue-50/30">
<td className="p-3 pl-6 border border-blue-200 text-xs leading-relaxed">
<td rowSpan={2} 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">&gt; 300 places</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) &lt; 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">&lt; 300 places</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 &gt; 300 places</td>
<td colSpan={4} className="p-2 pl-3 font-semibold text-indigo-900 border border-indigo-200">Agent de maîtrise</td>
</tr>
<tr className="hover:bg-indigo-50/30">
<td className="p-3 pl-6 border border-indigo-200 text-xs leading-relaxed">
<td rowSpan={2} 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">&gt; 300 places</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 &lt; 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">&lt; 300 places</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) &gt; 300 places</td>
<td colSpan={4} className="p-2 pl-3 font-semibold text-cyan-900 border border-cyan-200">Employés qualifiés (Gr1)</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 pl-6 border border-cyan-200 text-xs leading-relaxed">
<td rowSpan={2} 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">&gt; 300 places</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) &lt; 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">&lt; 300 places</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) &gt; 300 places</td>
<td colSpan={4} className="p-2 pl-3 font-semibold text-teal-900 border border-teal-200">Employés qualifiés (Gr2)</td>
</tr>
<tr className="hover:bg-teal-50/30">
<td className="p-3 pl-6 border border-teal-200 text-xs leading-relaxed">
<td rowSpan={2} 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">&gt; 300 places</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) &lt; 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">&lt; 300 places</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>
@ -892,7 +874,7 @@ export default function Annexe2Content({}: Annexe2ContentProps) {
<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>ℹ️ <span className="font-semibold">[1] Amplitude journalière</span> : En cas d'amplitude journalière excédant une durée de 10 heures, les heures de travail effectif au-delà de 8 heures effectuées au cours d'une même journée, feront l'objet d'un paiement majoré de 25 %. Cette majoration sera déduite de l'éventuelle majoration pour heures supplémentaires que le (la) salarié(e) pourrait être amenée à percevoir dans les conditions prévues par la présente annexe.</div>
</div>
</div>
@ -965,7 +947,7 @@ export default function Annexe2Content({}: Annexe2ContentProps) {
<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>ℹ️ <span className="font-semibold">[1] Amplitude journalière</span> : En cas d'amplitude journalière excédant une durée de 10 heures, les heures de travail effectif au-delà de 8 heures effectuées au cours d'une même journée, feront l'objet d'un paiement majoré de 25 %. Cette majoration sera déduite de l'éventuelle majoration pour heures supplémentaires que le (la) salarié(e) pourrait être amenée à percevoir dans les conditions prévues par la présente annexe.</div>
</div>
</div>
</div>

658
app/(app)/minima-ccn/ccnsvp/annexe3-data.tsx
View file

@ -90,14 +90,19 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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>
<th rowSpan={2} className="text-left p-3 text-rose-900 font-bold border border-rose-200"></th>
<th colSpan={2} className="text-center p-2 text-rose-900 font-bold border border-rose-200">Cachet minimum isolé<br/>jusqu'à 7 cachets dans le mois</th>
<th colSpan={2} className="text-center p-2 text-rose-900 font-bold border border-rose-200">Plus de 7 cachets<br/>dans le mois hors<br/>mensualisation</th>
<th colSpan={3} className="text-center p-2 text-rose-900 font-bold border border-rose-200 bg-rose-100">Salaire mensuel</th>
</tr>
<tr className="bg-rose-50">
<th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 text-[10px] leading-tight">Pour une<br/>soirée ou<br/>matinée<br/>de une<br/>représentation</th>
<th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 text-[10px] leading-tight">Pour une soirée<br/>ou matinée<br/>de deux<br/>représentations<br/>consécutives</th>
<th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 text-[10px] leading-tight">Pour une<br/>soirée ou<br/>matinée<br/>de une<br/>représentation</th>
<th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 text-[10px] leading-tight">Pour une soirée<br/>ou matinée<br/>de deux<br/>représentations<br/>consécutives</th>
<th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 bg-rose-100 text-[10px] leading-tight">Pour 26 à 30<br/>représentations<br/>mois non<br/>consécutives</th>
<th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 bg-rose-100 text-[10px] leading-tight">Pour 52 à 56<br/>représentations<br/>mois<br/>consécutives<br/>mini 2 à 2</th>
<th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 bg-rose-100 text-[10px] leading-tight">Pour 26 soirées<br/>dont 13 à deux<br/>représentations<br/>consécutives</th>
</tr>
</thead>
<tbody>
@ -235,14 +240,19 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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>
<th rowSpan={2} className="text-left p-3 text-pink-900 font-bold border border-pink-200"></th>
<th colSpan={2} className="text-center p-2 text-pink-900 font-bold border border-pink-200">Cachet minimum isolé<br/>jusqu'à 7 cachets dans le mois</th>
<th colSpan={2} className="text-center p-2 text-pink-900 font-bold border border-pink-200">Plus de 7 cachets<br/>dans le mois hors<br/>mensualisation</th>
<th colSpan={3} className="text-center p-2 text-pink-900 font-bold border border-pink-200 bg-pink-100">Salaire mensuel</th>
</tr>
<tr className="bg-pink-50">
<th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 text-[10px] leading-tight">Pour une<br/>soirée ou<br/>matinée<br/>de une<br/>représentation</th>
<th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 text-[10px] leading-tight">Pour une soirée<br/>ou matinée<br/>de deux<br/>représentations<br/>consécutives</th>
<th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 text-[10px] leading-tight">Pour une<br/>soirée ou<br/>matinée<br/>de une<br/>représentation</th>
<th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 text-[10px] leading-tight">Pour une soirée<br/>ou matinée<br/>de deux<br/>représentations<br/>consécutives</th>
<th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 bg-pink-100 text-[10px] leading-tight">Pour 26 à 30<br/>représentations<br/>mois non<br/>consécutives</th>
<th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 bg-pink-100 text-[10px] leading-tight">Pour 52 à 56<br/>représentations<br/>mois<br/>consécutives<br/>mini 2 à 2</th>
<th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 bg-pink-100 text-[10px] leading-tight">Pour 26 soirées<br/>dont 13 à deux<br/>représentations<br/>consécutives</th>
</tr>
</thead>
<tbody>
@ -389,10 +399,13 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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>
<th rowSpan={2} className="text-left p-3 text-rose-900 font-bold border border-rose-200"></th>
<th colSpan={3} className="text-center p-2 text-rose-900 font-bold border border-rose-200">Nombre de représentations par mois</th>
</tr>
<tr className="bg-rose-50">
<th className="text-center p-3 text-rose-900 font-semibold border border-rose-200">1 à 7</th>
<th className="text-center p-3 text-rose-900 font-semibold border border-rose-200">8 à 15</th>
<th className="text-center p-3 text-rose-900 font-semibold border border-rose-200">16 à 24</th>
</tr>
</thead>
<tbody>
@ -453,10 +466,13 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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>
<th rowSpan={2} className="text-left p-3 text-pink-900 font-bold border border-pink-200"></th>
<th colSpan={3} className="text-center p-2 text-pink-900 font-bold border border-pink-200">Nombre de représentations par mois</th>
</tr>
<tr className="bg-pink-50">
<th className="text-center p-3 text-pink-900 font-semibold border border-pink-200">1 à 7</th>
<th className="text-center p-3 text-pink-900 font-semibold border border-pink-200">8 à 15</th>
<th className="text-center p-3 text-pink-900 font-semibold border border-pink-200">16 à 24</th>
</tr>
</thead>
<tbody>
@ -538,11 +554,12 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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>
<th className="text-left p-3 text-blue-900 font-bold border border-blue-200">Fonction</th>
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200">Niveau de<br/>qualification</th>
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200 bg-blue-100">Heures</th>
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200 bg-blue-100">Heures de<br/>0 à 2 heures</th>
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200">Mois</th>
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200">Mois de travail<br/>de 0 à 2 heures</th>
</tr>
</thead>
<tbody>
@ -550,6 +567,7 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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 text-xs border border-blue-200">Cadre<br/>groupe 2</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>
@ -559,6 +577,7 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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 text-xs border border-blue-200">Cadre<br/>groupe 2</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>
@ -567,67 +586,73 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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>
<div className="text-slate-600 text-xs mt-1">Connaît les 3 domaines avec une spécialisation particulière son, lumière ou 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>
<td className="text-center p-3 text-xs border border-blue-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(16.97)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(18.68)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2573.84)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2647.43)}</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>
<td className="text-center p-3 text-xs border border-blue-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(17.09)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(18.79)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2592.04)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2666.15)}</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>
<td className="text-center p-3 text-xs border border-blue-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(15.31)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(16.85)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2322.07)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2388.46)}</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>
<div className="font-semibold text-blue-900">Régisseur (cabaret jusqu'à 300 places)</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>
<td className="text-center p-3 text-xs border border-blue-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(13.55)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(14.90)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2055.13)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2113.89)}</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>
<div className="font-semibold text-blue-900">Régisseur adjoint, sous-chef machiniste, électricien spectacle, électricien site, 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>
<td className="text-center p-3 text-xs border border-blue-200">Employés<br/>qualifiés<br/>groupe 1</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(12.72)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(13.93)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1929.24)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1984.40)}</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>
<td className="text-center p-3 text-xs border border-blue-200">Employés<br/>qualifiés<br/>groupe 2</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(12.50)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(13.74)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1895.88)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1950.08)}</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>
<div className="font-semibold text-blue-900">Manutentionnaire 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>
<td className="text-center p-3 text-xs border border-blue-200">Employés</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(12.38)}</td>
<td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(13.63)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1877.67)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1931.35)}</td>
</tr>
</tbody>
</table>
@ -637,17 +662,18 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
{/* 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
📍 Salles de 300 à 700 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>
<th className="text-left p-3 text-cyan-900 font-bold border border-cyan-200">Fonction</th>
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">Niveau de<br/>qualification</th>
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200 bg-cyan-100">Heures</th>
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200 bg-cyan-100">Heures de<br/>0 à 2 heures</th>
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">Mois</th>
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">Mois de travail<br/>de 0 à 2 heures</th>
</tr>
</thead>
<tbody>
@ -655,6 +681,7 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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 text-xs border border-cyan-200">Cadre<br/>groupe 2</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>
@ -664,6 +691,7 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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 text-xs border border-cyan-200">Cadre<br/>groupe 2</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>
@ -672,87 +700,84 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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>
<div className="text-slate-600 text-xs mt-1">Connaît les 3 domaines avec une spécialisation particulière son, lumière ou 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>
<td className="text-center p-3 text-xs border border-cyan-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(18.86)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(20.74)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2859.77)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2941.53)}</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>
<td className="text-center p-3 text-xs border border-cyan-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(18.70)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(20.66)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2848.73)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2930.18)}</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>
<td className="text-center p-3 text-xs border border-cyan-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(16.85)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(18.53)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2555.34)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2628.40)}</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>
<div className="font-semibold text-cyan-900">Régisseur adjoint, sous-chef machiniste, électricien spectacle, électricien site, accessoiriste, machiniste</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>
<td className="text-center p-3 text-xs border border-cyan-200">Employés<br/>qualifiés<br/>groupe 1</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(13.94)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(15.33)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2113.67)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2174.10)}</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>
<td className="text-center p-3 text-xs border border-cyan-200">Employés<br/>qualifiés<br/>groupe 2</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(13.84)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(15.23)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2099.48)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2159.50)}</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>
<div className="font-semibold text-cyan-900">Manutentionnaire 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>
<td className="text-center p-3 text-xs border border-cyan-200">Employés</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(13.61)}</td>
<td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(14.98)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2064.77)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2123.80)}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Salles > 600 places */}
{/* Salles > 700 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
📍 Salles supérieures à 700 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>
<th className="text-left p-3 text-teal-900 font-bold border border-teal-200">Fonction</th>
<th className="text-center p-3 text-teal-900 font-bold border border-teal-200">Niveau de<br/>qualification</th>
<th className="text-center p-3 text-teal-900 font-bold border border-teal-200 bg-teal-100">Heures</th>
<th className="text-center p-3 text-teal-900 font-bold border border-teal-200 bg-teal-100">Heures de<br/>0 à 2 heures</th>
<th className="text-center p-3 text-teal-900 font-bold border border-teal-200">Mois</th>
<th className="text-center p-3 text-teal-900 font-bold border border-teal-200">Mois de travail<br/>de 0 à 2 heures</th>
</tr>
</thead>
<tbody>
@ -760,6 +785,7 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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 text-xs border border-teal-200">Cadre<br/>groupe 2</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>
@ -769,6 +795,7 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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 text-xs border border-teal-200">Cadre<br/>groupe 2</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>
@ -777,67 +804,63 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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>
<div className="text-slate-600 text-xs mt-1">Connaît les 3 domaines avec une spécialisation particulière son, lumière ou 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>
<td className="text-center p-3 text-xs border border-teal-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(19.60)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(21.56)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2973.34)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3058.35)}</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>
<td className="text-center p-3 text-xs border border-teal-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(19.54)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(21.50)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2963.87)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3048.61)}</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>
<td className="text-center p-3 text-xs border border-teal-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(17.51)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(19.27)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2656.29)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2732.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>
<div className="font-semibold text-teal-900">Régisseur adjoint, sous-chef machiniste, électricien spectacle, électricien site, accessoiriste, machiniste</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>
<td className="text-center p-3 text-xs border border-teal-200">Employés<br/>qualifiés<br/>groupe 1</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(14.50)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(15.94)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2198.85)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2261.72)}</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>
<td className="text-center p-3 text-xs border border-teal-200">Employés<br/>qualifiés<br/>groupe 2</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(14.40)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(15.85)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2184.65)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2247.11)}</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>
<div className="font-semibold text-teal-900">Manutentionnaire 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>
<td className="text-center p-3 text-xs border border-teal-200">Employés</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(14.15)}</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(15.57)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2146.80)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2208.16)}</td>
</tr>
</tbody>
</table>
@ -867,18 +890,21 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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>
<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">Niveau de<br/>qualification</th>
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Heures</th>
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Heures de<br/>0 à 2 heures</th>
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200">Mois</th>
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200">Mois de travail<br/>de 0 à 2 heures</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>
<div className="font-semibold text-purple-900">Costumier(ère)</div>
<div className="text-slate-600 text-xs mt-1">[1] Costumière : responsable création des costumes</div>
</td>
<td className="text-center p-3 text-xs border border-purple-200">Cadre<br/>groupe 2</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>
@ -886,66 +912,73 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
</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>
<div className="font-semibold text-purple-900">Chef habilleur(euse) 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>
<td className="text-center p-3 text-xs border border-purple-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(13.78)}</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(15.16)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(2090.01)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(2149.77)}</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>
<div className="font-semibold text-purple-900">Couturier(ère) senior (G1)</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>
<td className="text-center p-3 text-xs border border-purple-200">Employé<br/>Groupe 1</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(12.45)}</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(13.70)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1888.29)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1942.28)}</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>
<div className="font-semibold text-purple-900">Couturier(ère)</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>
<td className="text-center p-3 text-xs border border-purple-200">Employé<br/>Groupe 2</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(12.13)}</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(13.34)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1839.76)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1892.36)}</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>
<div className="font-semibold text-purple-900">Habilleur(euse)</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>
<td className="text-center p-3 text-xs border border-purple-200">Employé</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(11.72)}</td>
<td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(12.90)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1777.57)}</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1828.39)}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Salles 300-600 places */}
{/* Salles 300-700 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
📍 Salles de 300 à 700 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>
<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">Niveau de<br/>qualification</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Heures</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Heures de<br/>0 à 2 heures</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Mois</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Mois de travail<br/>de 0 à 2 heures</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>
<div className="font-semibold text-fuchsia-900">Costumier(ère)</div>
<div className="text-slate-600 text-xs mt-1">[1] Costumière : responsable création des costumes</div>
</td>
<td className="text-center p-3 text-xs border border-fuchsia-200">Cadre<br/>groupe 2</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>
@ -953,66 +986,73 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
</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>
<div className="font-semibold text-fuchsia-900">Chef habilleur(euse) 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>
<td className="text-center p-3 text-xs border border-fuchsia-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(15.31)}</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(16.85)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2322.07)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2388.46)}</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>
<div className="font-semibold text-fuchsia-900">Couturier(ère) senior (G1)</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>
<td className="text-center p-3 text-xs border border-fuchsia-200">Employé<br/>Groupe 1</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(13.76)}</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(15.13)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2086.98)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2146.65)}</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>
<div className="font-semibold text-fuchsia-900">Couturier(ère)</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>
<td className="text-center p-3 text-xs border border-fuchsia-200">Employé<br/>Groupe 2</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(12.83)}</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(14.11)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(1945.93)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2001.56)}</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>
<div className="font-semibold text-fuchsia-900">Habilleur(euse)</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>
<td className="text-center p-3 text-xs border border-fuchsia-200">Employé</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(12.71)}</td>
<td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(13.98)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(1927.73)}</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(1982.84)}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Salles > 600 places */}
{/* Salles > 700 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
📍 Salles supérieures à 700 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>
<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">Niveau de<br/>qualification</th>
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200 bg-violet-100">Heures</th>
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200 bg-violet-100">Heures de<br/>0 à 2 heures</th>
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200">Mois</th>
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200">Mois de travail<br/>de 0 à 2 heures</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>
<div className="font-semibold text-violet-900">Costumier(ère)</div>
<div className="text-slate-600 text-xs mt-1">[1] Costumière : responsable création des costumes</div>
</td>
<td className="text-center p-3 text-xs border border-violet-200">Cadre<br/>groupe 2</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>
@ -1020,39 +1060,43 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
</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>
<div className="font-semibold text-violet-900">Chef habilleur(euse) 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>
<td className="text-center p-3 text-xs border border-violet-200">Agent de<br/>maîtrise</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(15.92)}</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(17.51)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2414.59)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2483.62)}</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>
<div className="font-semibold text-violet-900">Couturier(ère) senior (G1)</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>
<td className="text-center p-3 text-xs border border-violet-200">Employé<br/>Groupe 1</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(14.29)}</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(15.71)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2167.36)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2229.33)}</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>
<div className="font-semibold text-violet-900">Couturier(ère)</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>
<td className="text-center p-3 text-xs border border-violet-200">Employé<br/>Groupe 2</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(13.35)}</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(14.68)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2024.79)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2082.68)}</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>
<div className="font-semibold text-violet-900">Habilleur(euse)</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>
<td className="text-center p-3 text-xs border border-violet-200">Employé</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(13.22)}</td>
<td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(14.54)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2005.08)}</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2062.40)}</td>
</tr>
</tbody>
</table>
@ -1076,125 +1120,107 @@ export default function Annexe3Content({}: Annexe3ContentProps) {
<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 rowSpan={2} className="text-left p-3 text-amber-900 font-bold border border-amber-200">Niveau de qualification</th>
<th rowSpan={2} className="text-center p-3 text-amber-900 font-bold border border-amber-200">Échelon</th>
<th colSpan={2} className="text-center p-3 text-amber-900 font-bold border border-amber-200 bg-amber-100">Salaire<br/>Contrats de plus de 6 heures semaine</th>
<th rowSpan={2} className="text-center p-3 text-amber-900 font-bold border border-amber-200">Salaire<br/>Contrat de 6 heures semaine<br/><br/>Taux horaire</th>
</tr>
<tr className="bg-amber-50">
<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>
<th className="text-center p-3 text-amber-900 font-bold border border-amber-200 bg-amber-100">Salaire mensuel<br/>base 151,67 heures</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 border border-amber-200"></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>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(22.57)}</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 border border-amber-200"></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>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(18.59)}</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
<div className="font-semibold text-amber-900">Cadres groupes 3</div>
</td>
<td className="text-center p-3 border border-amber-200"></td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(14.51)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(2200.73)}</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(15.96)}</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 rowSpan={2} className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Agents de maîtrise</div>
</td>
<td className="text-center p-3 border border-amber-200">1</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.45)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1888.29)}</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.70)}</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="text-center p-3 border border-amber-200">2</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.64)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1917.11)}</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.90)}</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td rowSpan={2} className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Employés qualifiés groupe 1</div>
</td>
<td className="text-center p-3 border border-amber-200">1</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.22)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1853.41)}</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.44)}</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="text-center p-3 border border-amber-200">2</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.32)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1868.57)}</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.55)}</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td rowSpan={2} className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Employés qualifiés groupe 2</div>
</td>
<td className="text-center p-3 border border-amber-200">1</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(11.90)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1804.87)}</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.09)}</td>
</tr>
<tr className="hover:bg-amber-50/30">
<td className="text-center p-3 border border-amber-200">2</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.14)}</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 rowSpan={2} className="p-3 border border-amber-200">
<div className="font-semibold text-amber-900">Employés</div>
</td>
<td className="text-center p-3 border border-amber-200">1</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(11.71)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1776.06)}</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.88)}</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>
<td className="text-center p-3 border border-amber-200">2</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(11.82)}</td>
<td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1792.74)}</td>
<td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.00)}</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>
)}

159
app/(app)/minima-ccn/ccnsvp/annexe4-data.tsx
View file

@ -274,6 +274,46 @@ export default function Annexe4Content({}: Annexe4ContentProps) {
</div>
</div>
{/* Orchestres symphoniques */}
<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>
Orchestres symphoniques et lyriques de droit privé (à partir de 10 musiciens et plus)
</h3>
<div className="space-y-4">
<div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
<div className="text-sm text-blue-900 space-y-2">
<div>
<span className="font-bold">Cachet minimum de représentation :</span> {euro(108.38)}
</div>
<div className="text-xs text-blue-700">
(incluant un raccord d'une heure avant le concert)
</div>
</div>
</div>
<div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
<div className="text-sm text-blue-900 space-y-2">
<div>
<span className="font-bold">Journée de répétitions (2 services) :</span> {euro(93.65)}
</div>
</div>
</div>
<div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
<div className="text-sm text-blue-900 space-y-2">
<div>
<span className="font-bold">Salaire minimum mensuel :</span> {euro(2591.77)}
</div>
<div className="text-xs text-blue-700">
À partir de 22 services jusqu'à 30, au-delà il sera versé une rémunération supplémentaire au pro rata temporis
</div>
</div>
</div>
</div>
</div>
{/* Comédies musicales */}
<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">
@ -515,51 +555,11 @@ export default function Annexe4Content({}: Annexe4ContentProps) {
{/* Section Musiciens */}
{activeSection === 'musiciens' && (
<div className="space-y-6">
{/* Orchestres symphoniques */}
<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>
Orchestres symphoniques et lyriques de droit privé (à partir de 10 musiciens et plus)
</h3>
<div className="space-y-4">
<div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
<div className="text-sm text-blue-900 space-y-2">
<div>
<span className="font-bold">Cachet minimum de représentation :</span> {euro(108.38)}
</div>
<div className="text-xs text-blue-700">
(incluant un raccord d'une heure avant le concert)
</div>
</div>
</div>
<div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
<div className="text-sm text-blue-900 space-y-2">
<div>
<span className="font-bold">Journée de répétitions (2 services) :</span> {euro(93.65)}
</div>
</div>
</div>
<div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
<div className="text-sm text-blue-900 space-y-2">
<div>
<span className="font-bold">Salaire minimum mensuel :</span> {euro(2591.77)}
</div>
<div className="text-xs text-blue-700">
À partir de 22 services jusqu'à 30, au-delà il sera versé une rémunération supplémentaire au pro rata temporis
</div>
</div>
</div>
</div>
</div>
{/* Autres musiciens */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-cyan-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-cyan-500"></span>
Autres musiciens - En tournée
Musiciens - En tournée
</h3>
<div className="overflow-x-auto">
@ -649,13 +649,18 @@ export default function Annexe4Content({}: Annexe4ContentProps) {
<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 Show</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">2 Shows<br/>consécutifs</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Dîner +<br/>1 Show</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Dîner +<br/>2 Shows</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Mensuel<br/>1 Show</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Mensuel<br/>2 Shows</th>
<th rowSpan={2} className="text-left p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Fonction</th>
<th colSpan={2} className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200">Cachet minimum isolé jusqu'à 7 cachets</th>
<th colSpan={2} className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200">Plus de 7 cachets</th>
<th colSpan={2} className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Salaire mensuel</th>
</tr>
<tr className="bg-fuchsia-50">
<th className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200">Pour une soirée ou matinée de une représentation</th>
<th className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200">Pour une soirée ou matinée de deux représentations consécutives</th>
<th className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200">Pour une soirée ou matinée de une représentation</th>
<th className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200">Pour une soirée ou matinée de deux représentations consécutives</th>
<th className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Pour 26 à 30 représentation mois non consécutives</th>
<th className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Pour 52 à 56 représentations mois consécutives mini 2 à 2</th>
</tr>
</thead>
<tbody>
@ -765,10 +770,13 @@ export default function Annexe4Content({}: Annexe4ContentProps) {
<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>
<th rowSpan={2} className="text-left p-3 text-rose-900 font-bold border border-rose-200">Fonction</th>
<th colSpan={3} className="text-center p-2 text-[10px] leading-tight text-rose-900 font-bold border border-rose-200">Nombre de cachets</th>
</tr>
<tr className="bg-rose-50">
<th className="text-center p-2 text-[10px] leading-tight text-rose-900 font-bold border border-rose-200">De 1 à 7</th>
<th className="text-center p-2 text-[10px] leading-tight text-rose-900 font-bold border border-rose-200">De 8 à 15</th>
<th className="text-center p-2 text-[10px] leading-tight text-rose-900 font-bold border border-rose-200">De 16 à 24</th>
</tr>
</thead>
<tbody>
@ -843,8 +851,8 @@ export default function Annexe4Content({}: Annexe4ContentProps) {
<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-left p-3 text-teal-900 font-bold border border-teal-200">Fonctions</th>
<th className="text-center p-3 text-teal-900 font-bold border border-teal-200 bg-teal-100">Taux horaire [1]</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 bg-teal-100">Taux horaire</th>
<th className="text-center p-3 text-teal-900 font-bold border border-teal-200">Salaire mensuel (35 heures hebdo)</th>
</tr>
</thead>
<tbody>
@ -864,7 +872,7 @@ export default function Annexe4Content({}: Annexe4ContentProps) {
directeur(trice) de production
</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(20.03)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3037.14)}</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3037.55)}</td>
</tr>
<tr className="bg-cyan-100/30">
@ -886,7 +894,7 @@ export default function Annexe4Content({}: Annexe4ContentProps) {
régisseur(euse) accessoires
</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-cyan-50">{euro(17.08)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-teal-200">{euro(2590.53)}</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-teal-200">{euro(2590.85)}</td>
</tr>
<tr className="bg-blue-100/30">
@ -907,7 +915,7 @@ export default function Annexe4Content({}: Annexe4ContentProps) {
assistant(e) lumière, assistant(e) de production
</td>
<td className="text-center p-3 font-semibold border border-teal-200 bg-blue-50">{euro(14.73)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-teal-200">{euro(2234.11)}</td>
<td className="text-center p-3 font-bold text-blue-900 border border-teal-200">{euro(2233.48)}</td>
</tr>
<tr className="bg-indigo-100/30">
@ -928,10 +936,6 @@ export default function Annexe4Content({}: Annexe4ContentProps) {
</tbody>
</table>
</div>
<div className="mt-4 space-y-2 text-xs text-slate-600">
<div><span className="font-semibold">[1]</span> En cas d'amplitude journalière excédant une durée de 10 heures, les heures de travail effectif au-delà de 8 heures effectuées au cours d'une même journée, feront l'objet d'un paiement majoré de 25 %. Cette majoration sera déduite de l'éventuelle majoration pour heures supplémentaires que le salarié pourrait être amenée à percevoir dans les conditions prévues par la présente annexe.</div>
</div>
</div>
{/* Note importante */}
@ -950,39 +954,6 @@ export default function Annexe4Content({}: Annexe4ContentProps) {
</div>
</div>
)}
{/* Défraiements et indemnités */}
<div className="rounded-xl border bg-gradient-to-br from-green-50 to-emerald-50 p-5">
<h3 className="text-base font-bold text-green-900 mb-3 flex items-center gap-2">
<Coins className="w-5 h-5" />
Défraiements et indemnités
</h3>
<div className="space-y-3 text-sm">
<div className="bg-white rounded-lg p-3 border border-green-200">
<div className="font-semibold text-green-900 mb-1">Défraiement journalier</div>
<div className="text-slate-700">
Montant total : <span className="font-bold text-green-900">{euro(104.73)}</span> par jour
</div>
<div className="text-xs text-slate-600 mt-2 space-y-1">
<div>• Chambre et petit déjeuner : {euro(69.45)}</div>
<div>• Chaque repas principal : {euro(17.64)}</div>
</div>
<div className="text-xs text-slate-600 mt-2">
Ces défraiements s'appliquent aux artistes, techniciens et personnels administratifs en tournée
</div>
</div>
<div className="bg-white rounded-lg p-3 border border-green-200">
<div className="font-semibold text-green-900 mb-1">Indemnité vestimentaire pour les artistes dramatiques</div>
<div className="text-xs text-slate-600 space-y-1">
<div>• Costume de ville : {euro(9.00)}</div>
<div>• Tenue de soirée : {euro(12.46)}</div>
<div>• Plafond de rémunération journalière jusqu'auquel cette indemnité est due : {euro(265.17)}</div>
</div>
</div>
</div>
</div>
</div>
);
}

38
app/(app)/minima-ccn/ccnsvp/annexe5-data.tsx
View file

@ -79,10 +79,13 @@ export default function Annexe5Content({}: Annexe5ContentProps) {
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-orange-50">
<th className="text-left p-3 text-orange-900 font-bold border border-orange-200">Type</th>
<th className="text-center p-3 text-orange-900 font-bold border border-orange-200">Cachet</th>
<th className="text-center p-3 text-orange-900 font-bold border border-orange-200">1/2 cachet<br/>(demi-représentation)</th>
<th className="text-center p-3 text-orange-900 font-bold border border-orange-200 bg-orange-100">Mensuel</th>
<th rowSpan={2} className="text-left p-3 text-orange-900 font-bold border border-orange-200"></th>
<th colSpan={2} className="text-center p-2 text-[10px] leading-tight text-orange-900 font-bold border border-orange-200">Nombre de cachet par mois</th>
<th rowSpan={2} className="text-center p-3 text-orange-900 font-bold border border-orange-200 bg-orange-100">Salaire mensuel</th>
</tr>
<tr className="bg-orange-50">
<th className="text-center p-2 text-[10px] leading-tight text-orange-900 font-bold border border-orange-200">1 à 7</th>
<th className="text-center p-2 text-[10px] leading-tight text-orange-900 font-bold border border-orange-200">8 à 11</th>
</tr>
</thead>
<tbody>
@ -107,10 +110,13 @@ export default function Annexe5Content({}: Annexe5ContentProps) {
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-red-50">
<th className="text-left p-3 text-red-900 font-bold border border-red-200">Type</th>
<th className="text-center p-3 text-red-900 font-bold border border-red-200">Cachet</th>
<th className="text-center p-3 text-red-900 font-bold border border-red-200">1/2 cachet<br/>(demi-représentation)</th>
<th className="text-center p-3 text-red-900 font-bold border border-red-200 bg-red-100">Mensuel</th>
<th rowSpan={2} className="text-left p-3 text-red-900 font-bold border border-red-200"></th>
<th colSpan={2} className="text-center p-2 text-[10px] leading-tight text-red-900 font-bold border border-red-200">Nombre de cachet par mois</th>
<th rowSpan={2} className="text-center p-3 text-red-900 font-bold border border-red-200 bg-red-100">Salaire mensuel</th>
</tr>
<tr className="bg-red-50">
<th className="text-center p-2 text-[10px] leading-tight text-red-900 font-bold border border-red-200">1 à 7</th>
<th className="text-center p-2 text-[10px] leading-tight text-red-900 font-bold border border-red-200">8 à 11</th>
</tr>
</thead>
<tbody>
@ -163,22 +169,6 @@ export default function Annexe5Content({}: Annexe5ContentProps) {
<span className="font-semibold">Note :</span> La rémunération mensuelle est entendue pour <span className="font-bold">151,67 heures</span>, pour un contrat d'une durée minimale d'un mois de date à date, sur une durée de 5 jours par semaine.
</div>
</div>
{/* Note informative */}
<div className="rounded-xl border bg-gradient-to-br from-blue-50 to-cyan-50 p-4">
<h4 className="text-sm font-bold text-blue-900 mb-2 flex items-center gap-2">
<Lightbulb className="w-4 h-4" />
Informations importantes
</h4>
<div className="text-sm text-blue-800 space-y-2">
<p>
Les minima salariaux présentés s'appliquent aux artistes-interprètes du cirque et aux musiciens(nnes) engagés dans le cadre de spectacles de cirque.
</p>
<p className="text-xs text-blue-700">
Ces tarifs sont applicables que l'artiste soit en situation d'itinérance sous chapiteau ou en tournée dans des lieux fixes.
</p>
</div>
</div>
</div>
)}

16
app/(app)/minima-ccn/ccnsvp/annexe6-data.tsx
View file

@ -158,22 +158,6 @@ export default function Annexe6Content({}: Annexe6ContentProps) {
</table>
</div>
</div>
{/* Note informative */}
<div className="rounded-xl border bg-gradient-to-br from-blue-50 to-cyan-50 p-4">
<h4 className="text-sm font-bold text-blue-900 mb-2 flex items-center gap-2">
<Lightbulb className="w-4 h-4" />
Informations importantes
</h4>
<div className="text-sm text-blue-800 space-y-2">
<p>
Les minima salariaux présentés s'appliquent aux artistes-interprètes engagés dans le cadre de spectacles de bals avec ou sans orchestre, organisés par des producteurs, diffuseurs ou organisateurs occasionnels (y compris les particuliers).
</p>
<p className="text-xs text-blue-700 font-semibold">
Les services indiqués (4h00 ou 3h00) sont indivisibles et constituent la durée minimale de prestation.
</p>
</div>
</div>
</div>
);
}

10
app/(app)/minima-ccn/ccnsvp/clauses-communes-data.tsx
View file

@ -559,7 +559,9 @@ export default function ClausesCommunesContent({}: ClausesCommunesContentProps)
{filieres.gestion.echelons.map((montant: number | null, i: number) =>
montant ? (
<div key={i} className="bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-200 rounded-lg px-4 py-2.5 min-w-[110px]">
<div className="text-xs text-indigo-600 font-semibold">Échelon {i + 1}</div>
<div className="text-xs text-indigo-600 font-semibold">
{groupe === "Cadres Groupe 1" ? "Échelon unique" : `Échelon ${i + 1}`}
</div>
<div className="text-xl font-bold text-indigo-900">{euro(montant)}</div>
</div>
) : null
@ -749,12 +751,12 @@ export default function ClausesCommunesContent({}: ClausesCommunesContentProps)
</div>
)}
{/* Sûreté / Sécurité */}
{specialites.securite && specialites.securite.metiers.length > 0 && (
{/* Infrastructure du spectacle */}
{specialites.surete && specialites.surete.metiers.length > 0 && (
<div className="border-l-4 border-red-400 pl-3 py-1">
<h4 className="text-xs font-semibold text-red-700 mb-1 flex items-center gap-1">
<Shield className="w-3 h-3" />
Sûreté / Sécurité
Infrastructure du spectacle
</h4>
<p className="text-xs text-slate-600">
{specialites.surete.metiers.join(' • ')}

163
app/(app)/minima-ccn/ccnsvp/page.tsx
View file

@ -3,7 +3,7 @@
import React, { useEffect, useState } from 'react';
import { usePageTitle } from '@/hooks/usePageTitle';
import Link from 'next/link';
import { ArrowLeft, Scale, Calculator, AlertTriangle } from 'lucide-react';
import { ArrowLeft, Scale, Calculator, AlertTriangle, X } from 'lucide-react';
import Annexe1Content from './annexe1-data';
import ClausesCommunesContent from './clauses-communes-data';
import Annexe2Content from './annexe2-data';
@ -11,12 +11,79 @@ import Annexe3Content from './annexe3-data';
import Annexe4Content from './annexe4-data';
import Annexe5Content from './annexe5-data';
import Annexe6Content from './annexe6-data';
import Sidebar from '@/components/ui/Sidebar';
import SimulateurContent from '@/components/simulateur/SimulateurContent';
import CalculatorComponent from '@/components/Calculator';
export default function CCNSVPPage() {
usePageTitle("Minima CCNSVP");
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const [isSimulateurOpen, setIsSimulateurOpen] = useState(false);
const [isCalculatorOpen, setIsCalculatorOpen] = useState(false);
const [modalPosition, setModalPosition] = useState({ x: 0, y: 0 });
const [isDragging, setIsDragging] = useState(false);
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
const modalRef = React.useRef<HTMLDivElement>(null);
// Gestion du drag & drop du modal
const handleMouseDown = (e: React.MouseEvent) => {
if (!modalRef.current) return;
// Si c'est le premier drag, calculer la position réelle du modal
if (modalPosition.x === 0 && modalPosition.y === 0) {
const rect = modalRef.current.getBoundingClientRect();
setModalPosition({ x: rect.left, y: rect.top });
setDragOffset({
x: e.clientX - rect.left,
y: e.clientY - rect.top,
});
} else {
setDragOffset({
x: e.clientX - modalPosition.x,
y: e.clientY - modalPosition.y,
});
}
setIsDragging(true);
};
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
if (!isDragging) return;
const newX = e.clientX - dragOffset.x;
const newY = e.clientY - dragOffset.y;
setModalPosition({
x: newX,
y: newY,
});
};
const handleMouseUp = () => {
setIsDragging(false);
};
if (isDragging) {
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [isDragging, dragOffset]);
// Écouter les messages de l'iframe pour ouvrir la calculatrice
useEffect(() => {
const handleMessage = (event: MessageEvent) => {
if (event.data?.type === 'openCalculator') {
setIsCalculatorOpen(true);
}
};
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
}, []);
useEffect(() => {
// Script de gestion des onglets
@ -415,18 +482,9 @@ export default function CCNSVPPage() {
{/* Onglets */}
<section className="rounded-2xl border bg-white p-6 ccnsvp-tabs">
<div className="flex items-center justify-between mb-4">
<p className="text-sm text-slate-600">
Survolez le nom d'une annexe pour connaître son titre exact, cliquez sur l'annexe pour accéder aux détails.
</p>
<button
onClick={() => setIsSidebarOpen(true)}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 hover:from-amber-500 hover:to-amber-600 transition-all shadow-sm"
>
<Calculator className="w-4 h-4" />
Simulateur
</button>
</div>
<p className="text-sm text-slate-600 mb-4">
Survolez le nom d'une annexe pour connaître son titre exact, cliquez sur l'annexe pour accéder aux détails.
</p>
<div role="tablist" aria-label="Onglets CCNSVP">
<button
@ -524,15 +582,74 @@ export default function CCNSVPPage() {
</div>
</section>
{/* Sidebar pour le simulateur */}
<Sidebar
isOpen={isSidebarOpen}
onClose={() => setIsSidebarOpen(false)}
title="Simulateur de paie intermittent"
width="1200px"
{/* Bouton flottant Simulateur */}
<button
onClick={() => setIsSimulateurOpen(!isSimulateurOpen)}
className="fixed bottom-6 right-6 z-50 inline-flex items-center gap-2 px-5 py-3 rounded-full text-sm font-bold bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 hover:from-amber-500 hover:to-amber-600 transition-all shadow-lg hover:shadow-xl hover:scale-105"
>
<SimulateurContent />
</Sidebar>
<Calculator className="w-5 h-5" />
Simulateur
</button>
{/* Modale compacte qui sort du bouton */}
{isSimulateurOpen && (
<>
{/* Overlay transparent pour fermer au clic */}
<div
className="fixed inset-0 z-40"
onClick={() => {
setIsSimulateurOpen(false);
setModalPosition({ x: 0, y: 0 }); // Réinitialiser la position
}}
/>
{/* Modale compacte déplaçable */}
<div
ref={modalRef}
className="fixed z-50 w-[500px] max-h-[600px] bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden animate-in slide-in-from-bottom-4 duration-300"
style={{
left: modalPosition.x !== 0 ? `${modalPosition.x}px` : 'auto',
top: modalPosition.y !== 0 ? `${modalPosition.y}px` : 'auto',
bottom: modalPosition.x === 0 && modalPosition.y === 0 ? '6rem' : 'auto',
right: modalPosition.x === 0 && modalPosition.y === 0 ? '1.5rem' : 'auto',
}}
onClick={(e) => e.stopPropagation()}
>
{/* Header draggable */}
<div
className="flex items-center justify-between px-4 py-3 border-b bg-gradient-to-r from-amber-50 to-orange-50 cursor-move select-none"
onMouseDown={handleMouseDown}
>
<h3 className="text-sm font-bold text-slate-900 flex items-center gap-2">
<Calculator className="w-4 h-4 text-amber-600" />
Simulateur de paie
</h3>
<button
onClick={() => {
setIsSimulateurOpen(false);
setModalPosition({ x: 0, y: 0 }); // Réinitialiser la position
}}
className="p-1.5 rounded-lg hover:bg-slate-100 transition-colors"
aria-label="Fermer le simulateur"
onMouseDown={(e) => e.stopPropagation()}
>
<X className="w-4 h-4 text-slate-600" />
</button>
</div>
{/* Content avec scroll */}
<div className="flex-1 overflow-auto p-4">
<SimulateurContent hideInfoPanel />
</div>
</div>
</>
)}
{/* Calculatrice globale */}
<CalculatorComponent
isOpen={isCalculatorOpen}
onClose={() => setIsCalculatorOpen(false)}
/>
</div>
);
}

268
components/Calculator.tsx Normal file
View file

@ -0,0 +1,268 @@
"use client";
import React, { useState, useEffect } from 'react';
import { X } from 'lucide-react';
interface CalculatorProps {
isOpen: boolean;
onClose: () => void;
onUseResult?: (value: number) => void;
}
export default function Calculator({ isOpen, onClose, onUseResult }: CalculatorProps) {
const [display, setDisplay] = useState('0');
const [operator, setOperator] = useState('');
const [firstValue, setFirstValue] = useState('');
const [waitingForSecond, setWaitingForSecond] = useState(false);
const [position, setPosition] = useState<{ x: number; y: number } | null>(null);
const [isDragging, setIsDragging] = useState(false);
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
// Initialiser la position au centre à l'ouverture
useEffect(() => {
if (isOpen && position === null) {
const centerX = (window.innerWidth - 280) / 2;
const centerY = (window.innerHeight - 450) / 2;
setPosition({ x: centerX, y: centerY });
}
}, [isOpen, position]);
// Réinitialiser la position quand on ferme
useEffect(() => {
if (!isOpen) {
setPosition(null);
}
}, [isOpen]);
const resetCalculator = () => {
setDisplay('0');
setOperator('');
setFirstValue('');
setWaitingForSecond(false);
};
const handleNumber = (num: string) => {
if (waitingForSecond) {
setDisplay(num);
setWaitingForSecond(false);
} else {
setDisplay(display === '0' ? num : display + num);
}
};
const handleOperator = (op: string) => {
if (operator && !waitingForSecond) {
calculate();
}
setFirstValue(display);
setOperator(op);
setWaitingForSecond(true);
};
const calculate = () => {
const first = parseFloat(firstValue);
const second = parseFloat(display);
let result = 0;
switch(operator) {
case '+': result = first + second; break;
case '-': result = first - second; break;
case '*': result = first * second; break;
case '/': result = second !== 0 ? first / second : 0; break;
}
setDisplay(result.toString());
setOperator('');
setFirstValue('');
setWaitingForSecond(false);
};
const handleDecimal = () => {
if (waitingForSecond) {
setDisplay('0.');
setWaitingForSecond(false);
} else if (!display.includes('.')) {
setDisplay(display + '.');
}
};
const handleMouseDown = (e: React.MouseEvent) => {
if (!position) return;
setIsDragging(true);
setDragOffset({
x: e.clientX - position.x,
y: e.clientY - position.y,
});
};
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
if (!isDragging) return;
const newX = e.clientX - dragOffset.x;
const newY = e.clientY - dragOffset.y;
const maxX = window.innerWidth - 280;
const maxY = window.innerHeight - 450;
setPosition({
x: Math.max(0, Math.min(newX, maxX)),
y: Math.max(0, Math.min(newY, maxY)),
});
};
const handleMouseUp = () => {
setIsDragging(false);
};
if (isDragging) {
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [isDragging, dragOffset]);
const handleUse = () => {
const result = parseFloat(display);
if (!isNaN(result) && result > 0 && onUseResult) {
onUseResult(result);
onClose();
}
};
// Gestion du clavier
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (e: KeyboardEvent) => {
// Empêcher le comportement par défaut pour les touches de la calculatrice
if (['0','1','2','3','4','5','6','7','8','9','+','-','*','/','Enter','Escape','Backspace','Delete','c','C','.'].includes(e.key)) {
e.preventDefault();
}
// Chiffres
if (e.key >= '0' && e.key <= '9') {
handleNumber(e.key);
}
// Opérateurs
else if (e.key === '+') {
handleOperator('+');
}
else if (e.key === '-') {
handleOperator('-');
}
else if (e.key === '*' || e.key === 'x' || e.key === 'X') {
handleOperator('*');
}
else if (e.key === '/') {
handleOperator('/');
}
// Égal
else if (e.key === 'Enter' || e.key === '=') {
if (operator) calculate();
}
// Clear
else if (e.key === 'Escape' || e.key === 'c' || e.key === 'C') {
resetCalculator();
}
// Backspace / Delete
else if (e.key === 'Backspace' || e.key === 'Delete') {
if (display.length > 1) {
setDisplay(display.slice(0, -1));
} else {
setDisplay('0');
}
}
// Point décimal
else if (e.key === '.' || e.key === ',') {
handleDecimal();
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [isOpen, display, operator, firstValue, waitingForSecond]);
// Focus automatique sur la calculatrice à l'ouverture
const calculatorRef = React.useRef<HTMLDivElement>(null);
useEffect(() => {
if (isOpen && calculatorRef.current) {
calculatorRef.current.focus();
}
}, [isOpen]);
if (!isOpen || position === null) return null;
return (
<div
ref={calculatorRef}
tabIndex={-1}
className="fixed bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden focus:outline-none"
style={{
left: `${position.x}px`,
top: `${position.y}px`,
width: '280px',
zIndex: 9999,
}}
>
{/* Header draggable */}
<div
className="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-indigo-600 to-indigo-500 cursor-move select-none"
onMouseDown={handleMouseDown}
>
<span className="text-white font-semibold text-sm">Calculatrice</span>
<button
onClick={onClose}
className="w-7 h-7 flex items-center justify-center rounded-lg bg-white/20 hover:bg-white/30 transition-colors"
onMouseDown={(e) => e.stopPropagation()}
>
<X className="w-4 h-4 text-white" />
</button>
</div>
{/* Body */}
<div className="p-4">
{/* Display */}
<div className="bg-gradient-to-br from-slate-100 to-slate-200 border-2 border-slate-300 rounded-xl p-4 text-right text-2xl font-semibold text-slate-900 mb-4 min-h-[50px] break-all">
{display || '0'}
</div>
{/* Buttons */}
<div className="grid grid-cols-4 gap-2">
<button onClick={() => resetCalculator()} className="col-span-1 p-4 rounded-lg font-semibold bg-gradient-to-br from-red-500 to-red-600 text-white hover:from-red-600 hover:to-red-700 transition-all hover:shadow-md active:scale-95">C</button>
<button onClick={() => handleOperator('/')} className="p-4 rounded-lg font-semibold bg-gradient-to-br from-orange-400 to-orange-500 text-white hover:from-orange-500 hover:to-orange-600 transition-all hover:shadow-md active:scale-95">/</button>
<button onClick={() => handleOperator('*')} className="p-4 rounded-lg font-semibold bg-gradient-to-br from-orange-400 to-orange-500 text-white hover:from-orange-500 hover:to-orange-600 transition-all hover:shadow-md active:scale-95">×</button>
<button onClick={() => handleOperator('-')} className="p-4 rounded-lg font-semibold bg-gradient-to-br from-orange-400 to-orange-500 text-white hover:from-orange-500 hover:to-orange-600 transition-all hover:shadow-md active:scale-95">−</button>
<button onClick={() => handleNumber('7')} className="p-4 rounded-lg font-semibold bg-white border border-slate-200 hover:bg-slate-50 transition-all hover:shadow-md active:scale-95">7</button>
<button onClick={() => handleNumber('8')} className="p-4 rounded-lg font-semibold bg-white border border-slate-200 hover:bg-slate-50 transition-all hover:shadow-md active:scale-95">8</button>
<button onClick={() => handleNumber('9')} className="p-4 rounded-lg font-semibold bg-white border border-slate-200 hover:bg-slate-50 transition-all hover:shadow-md active:scale-95">9</button>
<button onClick={() => handleOperator('+')} className="row-span-2 p-4 rounded-lg font-semibold bg-gradient-to-br from-orange-400 to-orange-500 text-white hover:from-orange-500 hover:to-orange-600 transition-all hover:shadow-md active:scale-95">+</button>
<button onClick={() => handleNumber('4')} className="p-4 rounded-lg font-semibold bg-white border border-slate-200 hover:bg-slate-50 transition-all hover:shadow-md active:scale-95">4</button>
<button onClick={() => handleNumber('5')} className="p-4 rounded-lg font-semibold bg-white border border-slate-200 hover:bg-slate-50 transition-all hover:shadow-md active:scale-95">5</button>
<button onClick={() => handleNumber('6')} className="p-4 rounded-lg font-semibold bg-white border border-slate-200 hover:bg-slate-50 transition-all hover:shadow-md active:scale-95">6</button>
<button onClick={() => handleNumber('1')} className="p-4 rounded-lg font-semibold bg-white border border-slate-200 hover:bg-slate-50 transition-all hover:shadow-md active:scale-95">1</button>
<button onClick={() => handleNumber('2')} className="p-4 rounded-lg font-semibold bg-white border border-slate-200 hover:bg-slate-50 transition-all hover:shadow-md active:scale-95">2</button>
<button onClick={() => handleNumber('3')} className="p-4 rounded-lg font-semibold bg-white border border-slate-200 hover:bg-slate-50 transition-all hover:shadow-md active:scale-95">3</button>
<button onClick={() => operator ? calculate() : null} className="row-span-2 p-4 rounded-lg font-semibold bg-gradient-to-br from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transition-all hover:shadow-md active:scale-95">=</button>
<button onClick={() => handleNumber('0')} className="col-span-2 p-4 rounded-lg font-semibold bg-white border border-slate-200 hover:bg-slate-50 transition-all hover:shadow-md active:scale-95">0</button>
<button onClick={handleDecimal} className="p-4 rounded-lg font-semibold bg-white border border-slate-200 hover:bg-slate-50 transition-all hover:shadow-md active:scale-95">.</button>
{onUseResult && (
<button onClick={handleUse} className="col-span-4 mt-2 p-3 rounded-lg font-semibold text-sm bg-gradient-to-br from-indigo-600 to-indigo-500 text-white hover:from-indigo-700 hover:to-indigo-600 transition-all hover:shadow-md active:scale-95">
Utiliser le résultat
</button>
)}
</div>
</div>
</div>
);
}

4
components/Sidebar.tsx
View file

@ -455,14 +455,14 @@ export default function Sidebar({ clientInfo, isStaff = false, mobile = false, o
</span>
</Link>
)}
{/* <Link href="/minima-ccn" onClick={() => onNavigate && onNavigate()} className={`block px-3 py-2 rounded-xl text-sm transition truncate ${
<Link href="/minima-ccn" onClick={() => onNavigate && onNavigate()} className={`block px-3 py-2 rounded-xl text-sm transition truncate ${
isActivePath(pathname, "/minima-ccn") ? "bg-gradient-to-r from-indigo-200 via-purple-200 to-pink-200 text-slate-700 font-semibold" : "hover:bg-slate-50"
}`} title="Minima CCN">
<span className="inline-flex items-center gap-2">
<Scale className="w-4 h-4" aria-hidden />
<span>Minima CCN</span>
</span>
</Link> */}
</Link>
<Link href="/simulateur" onClick={() => onNavigate && onNavigate()} className={`block px-3 py-2 rounded-xl text-sm transition truncate ${
isActivePath(pathname, "/simulateur") ? "bg-gradient-to-r from-indigo-200 via-purple-200 to-pink-200 text-slate-700 font-semibold" : "hover:bg-slate-50"
}`} title="Simulateur de paie">

14
components/simulateur/SimulateurContent.tsx
View file

@ -4,7 +4,11 @@ import React, { useEffect } from 'react';
import { Info, AlertTriangle, Scale } from 'lucide-react';
import { usePostHog } from 'posthog-js/react';
export default function SimulateurContent() {
interface SimulateurContentProps {
hideInfoPanel?: boolean;
}
export default function SimulateurContent({ hideInfoPanel = false }: SimulateurContentProps) {
const posthog = usePostHog();
// 📊 Écouter les messages de l'iframe pour tracker les calculs
@ -92,8 +96,9 @@ export default function SimulateurContent() {
/>
</div>
{/* Panneau d'information (optionnel, masqué sur petits écrans) */}
<aside className="hidden xl:block w-80 border-l bg-slate-50 p-5 space-y-4 overflow-y-auto" aria-label="Aide et explications">
{/* Panneau d'information (optionnel, masqué sur petits écrans ou en mode compact) */}
{!hideInfoPanel && (
<aside className="hidden xl:block w-80 border-l bg-slate-50 p-5 space-y-4 overflow-y-auto" aria-label="Aide et explications">
{/* Card : Mode d'emploi */}
<div className="bg-white rounded-xl shadow-sm border border-slate-200/80 p-4">
@ -189,7 +194,8 @@ export default function SimulateurContent() {
</div>
</div>
</aside>
</aside>
)}
</div>
</div>
);

416
public/simulateur-embed.html
View file

@ -125,6 +125,21 @@
</span>
</label>
<input type="number" id="montantInput" step="0.01" placeholder="Ex: 2000">
<button id="openCalculatorBtn" type="button" style="margin-top: 6px; padding: 3px 8px; font-size: 0.6875rem; background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: all 0.2s; width: auto; font-weight: 400;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;">
<rect width="16" height="20" x="4" y="2" rx="2"/>
<line x1="8" x2="16" y1="6" y2="6"/>
<line x1="16" x2="16" y1="14" y2="14"/>
<path d="M16 10h.01"/>
<path d="M12 10h.01"/>
<path d="M8 10h.01"/>
<path d="M12 14h.01"/>
<path d="M8 14h.01"/>
<path d="M12 18h.01"/>
<path d="M8 18h.01"/>
</svg>
Calculatrice
</button>
<div class="options">
<label><input type="radio" name="type" value="brut" checked> Salaire Brut</label>
@ -153,6 +168,41 @@
<!-- Détail des cotisations -->
<div class="detail-table" id="detailTable"></div>
<!-- Calculatrice draggable -->
<div id="calculator" class="calculator-modal" style="display: none;">
<div class="calculator-header">
<span class="calculator-title">🧮 Calculatrice</span>
<button id="closeCalculator" class="calculator-close">×</button>
</div>
<div class="calculator-body">
<div class="calculator-display" id="calcDisplay">0</div>
<div class="calculator-buttons">
<button class="calc-btn calc-clear" data-value="C">C</button>
<button class="calc-btn calc-operator" data-value="/">/</button>
<button class="calc-btn calc-operator" data-value="*">×</button>
<button class="calc-btn calc-operator" data-value="-">−</button>
<button class="calc-btn calc-number" data-value="7">7</button>
<button class="calc-btn calc-number" data-value="8">8</button>
<button class="calc-btn calc-number" data-value="9">9</button>
<button class="calc-btn calc-operator calc-plus" data-value="+">+</button>
<button class="calc-btn calc-number" data-value="4">4</button>
<button class="calc-btn calc-number" data-value="5">5</button>
<button class="calc-btn calc-number" data-value="6">6</button>
<button class="calc-btn calc-number" data-value="1">1</button>
<button class="calc-btn calc-number" data-value="2">2</button>
<button class="calc-btn calc-number" data-value="3">3</button>
<button class="calc-btn calc-equals" data-value="=">=</button>
<button class="calc-btn calc-number calc-zero" data-value="0">0</button>
<button class="calc-btn calc-number" data-value=".">.</button>
<button class="calc-btn calc-use" id="useCalcResult">Utiliser</button>
</div>
</div>
</div>
<!-- Flatpickr & SweetAlert -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
@ -996,6 +1046,7 @@ const nonAbattementCodes = [
});
let html = `<h4>Détail des cotisations</h4>
<div class="cotisations-scroll-container">
<table class="cotisations-table">
<tr>
<th>Cotisation</th>
@ -1098,7 +1149,7 @@ if (isTechnicien() && window.lastFillon && window.lastFillon.total > 0) {
</tr>`;
}
html += `</table>`;
html += `</table></div>`;
return html;
}
@ -1433,7 +1484,7 @@ document.getElementById('calcBtn').addEventListener('click', function() {
<tr>
<th>Brut</th>
<th>Net avant PAS</th>
<th>Coût Total Employeur</th>
<th>Coût<br>Employeur</th>
</tr>
<tr>
<td>${fmtEuro(brut)} €</td>
@ -1558,6 +1609,172 @@ window.odentasSimulation = {
}, 0);
});
})();
/* ===== Calculatrice ===== */
(function() {
let calcDisplay = '';
let calcOperator = '';
let calcFirstValue = '';
let calcWaitingForSecond = false;
const calculator = document.getElementById('calculator');
const display = document.getElementById('calcDisplay');
const openBtn = document.getElementById('openCalculatorBtn');
const closeBtn = document.getElementById('closeCalculator');
const useBtn = document.getElementById('useCalcResult');
const calcButtons = document.querySelectorAll('.calc-btn');
// Ouvrir/Fermer la calculatrice
openBtn.addEventListener('click', () => {
// Envoyer un message à la page parent pour ouvrir la calculatrice
if (window.parent && window.parent !== window) {
window.parent.postMessage({ type: 'openCalculator' }, '*');
} else {
// Fallback si pas dans un iframe
calculator.style.display = 'block';
resetCalculator();
}
});
closeBtn.addEventListener('click', () => {
calculator.style.display = 'none';
});
// Drag & Drop de la calculatrice
let isDragging = false;
let dragOffsetX = 0;
let dragOffsetY = 0;
const header = calculator.querySelector('.calculator-header');
header.addEventListener('mousedown', (e) => {
if (e.target === closeBtn) return;
e.preventDefault();
isDragging = true;
const rect = calculator.getBoundingClientRect();
dragOffsetX = e.clientX - rect.left;
dragOffsetY = e.clientY - rect.top;
// Empêcher l'iframe de capturer les événements
document.body.style.userSelect = 'none';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
e.preventDefault();
const newLeft = e.clientX - dragOffsetX;
const newTop = e.clientY - dragOffsetY;
// Limiter aux bords de la fenêtre
const maxX = window.innerWidth - calculator.offsetWidth;
const maxY = window.innerHeight - calculator.offsetHeight;
calculator.style.left = Math.max(0, Math.min(newLeft, maxX)) + 'px';
calculator.style.top = Math.max(0, Math.min(newTop, maxY)) + 'px';
calculator.style.transform = 'none';
});
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
document.body.style.userSelect = '';
}
});
// Logique de la calculatrice
function resetCalculator() {
calcDisplay = '0';
calcOperator = '';
calcFirstValue = '';
calcWaitingForSecond = false;
updateDisplay();
}
function updateDisplay() {
display.textContent = calcDisplay || '0';
}
function handleNumber(num) {
if (calcWaitingForSecond) {
calcDisplay = num;
calcWaitingForSecond = false;
} else {
calcDisplay = calcDisplay === '0' ? num : calcDisplay + num;
}
updateDisplay();
}
function handleOperator(op) {
if (calcOperator && !calcWaitingForSecond) {
calculate();
}
calcFirstValue = calcDisplay;
calcOperator = op;
calcWaitingForSecond = true;
}
function calculate() {
const first = parseFloat(calcFirstValue);
const second = parseFloat(calcDisplay);
let result = 0;
switch(calcOperator) {
case '+': result = first + second; break;
case '-': result = first - second; break;
case '*': result = first * second; break;
case '/': result = second !== 0 ? first / second : 0; break;
}
calcDisplay = result.toString();
calcOperator = '';
calcFirstValue = '';
calcWaitingForSecond = false;
updateDisplay();
}
function handleClear() {
resetCalculator();
}
function handleDecimal() {
if (calcWaitingForSecond) {
calcDisplay = '0.';
calcWaitingForSecond = false;
} else if (!calcDisplay.includes('.')) {
calcDisplay += '.';
}
updateDisplay();
}
// Événements des boutons
calcButtons.forEach(btn => {
btn.addEventListener('click', () => {
const value = btn.dataset.value;
if (!isNaN(value)) {
handleNumber(value);
} else if (value === '.') {
handleDecimal();
} else if (value === 'C') {
handleClear();
} else if (value === '=') {
if (calcOperator) calculate();
} else if (['+', '-', '*', '/'].includes(value)) {
handleOperator(value);
}
});
});
// Bouton "Utiliser" - injecte le résultat dans le champ montant
useBtn.addEventListener('click', () => {
const result = parseFloat(calcDisplay);
if (!isNaN(result) && result > 0) {
document.getElementById('montantInput').value = result.toFixed(2);
calculator.style.display = 'none';
}
});
})();
</script>
<style>
@ -1684,6 +1901,36 @@ window.odentasSimulation = {
transform: translateY(0) !important;
}
/* Bouton calculatrice - override */
.simulateur #openCalculatorBtn {
width: auto !important;
padding: 3px 8px !important;
margin-top: 6px !important;
font-size: 0.6875rem !important;
font-weight: 400 !important;
background: #f1f5f9 !important;
color: #64748b !important;
border: 1px solid #e2e8f0 !important;
border-radius: 4px !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
}
.simulateur #openCalculatorBtn:hover {
background: #e2e8f0 !important;
color: #475569 !important;
border-color: #cbd5e1 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
transform: none !important;
}
.simulateur #openCalculatorBtn:active {
background: #cbd5e1 !important;
transform: none !important;
}
.result, .detail-table {
margin: 24px auto !important;
background: #ffffff !important;
@ -1768,25 +2015,37 @@ window.odentasSimulation = {
background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%) !important;
font-weight: 700 !important;
color: #166534 !important;
line-height: 1.3 !important;
padding: 8px 12px !important;
}
.result-table td {
font-weight: 600 !important;
color: #15803d !important;
white-space: nowrap !important;
}
.cotisations-scroll-container {
overflow-x: auto !important;
margin: 0 -20px !important;
padding: 0 20px !important;
}
.cotisations-table {
font-size: 0.875rem !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
min-width: 800px !important;
}
.cotisations-table th {
background: #f8fafc !important;
white-space: nowrap !important;
}
.cotisations-table td {
font-weight: normal !important;
white-space: nowrap !important;
}
#daysCount {
@ -1861,4 +2120,157 @@ window.odentasSimulation = {
font-weight: 500 !important;
cursor: pointer !important;
}
/* Calculatrice */
.calculator-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 280px;
background: white;
border-radius: 16px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
z-index: 9999;
overflow: hidden;
pointer-events: auto;
}
.calculator-header {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
color: white;
padding: 12px 16px;
cursor: move;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
.calculator-title {
font-weight: 600;
font-size: 0.9375rem;
}
.calculator-close {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 28px;
height: 28px;
border-radius: 6px;
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.calculator-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.calculator-body {
padding: 16px;
}
.calculator-display {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
border: 2px solid #cbd5e1;
border-radius: 10px;
padding: 16px;
text-align: right;
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 16px;
min-height: 50px;
word-break: break-all;
}
.calculator-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.calc-btn {
padding: 16px 8px;
border: none;
border-radius: 8px;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
background: #f8fafc;
color: #1e293b;
border: 1px solid #e2e8f0;
}
.calc-btn:hover {
background: #f1f5f9;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.calc-btn:active {
transform: translateY(0);
}
.calc-number {
background: white;
color: #1e293b;
}
.calc-operator {
background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
color: white;
border: none;
}
.calc-operator:hover {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}
.calc-clear {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
border: none;
}
.calc-clear:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}
.calc-equals {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
grid-row: span 2;
border: none;
}
.calc-equals:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.calc-plus {
grid-row: span 2;
}
.calc-zero {
grid-column: span 2;
}
.calc-use {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
color: white;
font-size: 0.9375rem;
border: none;
}
.calc-use:hover {
background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}
</style></body></html>