166 lines
10 KiB
TypeScript
166 lines
10 KiB
TypeScript
"use client";
|
||
|
||
import React from 'react';
|
||
import { Mic, Info } from 'lucide-react';
|
||
|
||
function euro(n: number) {
|
||
return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(n);
|
||
}
|
||
|
||
const InfoRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||
<div className="flex items-start gap-2">
|
||
<div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center">
|
||
<Info className="w-3.5 h-3.5 text-slate-600" aria-hidden="true" />
|
||
</div>
|
||
<p className="text-sm text-slate-600">{children}</p>
|
||
</div>
|
||
);
|
||
|
||
export default function ArtistesInterpretes() {
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* En-tête */}
|
||
<section className="rounded-2xl border bg-white p-6">
|
||
<div className="flex items-start gap-3">
|
||
<div className="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center">
|
||
<Mic className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<h2 className="text-xl font-semibold text-slate-900">Artistes Interprètes</h2>
|
||
<p className="text-sm text-slate-600">Salaires minima applicables au 1er janvier 2025 (Avenant n°20 du 29 novembre 2024, non étendu)</p>
|
||
<p className="text-xs text-slate-500 mt-1">Rémunération au cachet</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Émissions dramatiques */}
|
||
<section className="rounded-2xl border overflow-hidden">
|
||
<div className="bg-indigo-600 text-white px-4 py-3 text-sm font-semibold">Émissions dramatiques (article 5.14.1)</div>
|
||
<div className="grid grid-cols-2 text-sm font-semibold text-white">
|
||
<div className="bg-indigo-600/90 px-4 py-2.5">Définition</div>
|
||
<div className="bg-indigo-600/90 px-4 py-2.5">Cachet</div>
|
||
</div>
|
||
{[{def:"Journée de répétition ou d'enregistrement",val:289.23},{def:'Journée unique',val:304.99},{def:"Prestation de lecture d'une durée inférieure à 4 heures",val:152.49}].map((r,idx)=> (
|
||
<div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
|
||
<div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
|
||
<div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
|
||
</div>
|
||
))}
|
||
</section>
|
||
|
||
{/* Émissions de variétés */}
|
||
<section className="rounded-2xl border overflow-hidden">
|
||
<div className="bg-indigo-600 text-white px-4 py-3 text-sm font-semibold">Émissions de variétés (article 5.14.2)</div>
|
||
<div className="px-4 py-2 bg-slate-50 text-sm font-semibold text-slate-800">Répétitions effectuées en dehors de la journée d'enregistrement</div>
|
||
<div className="grid grid-cols-2 text-sm font-semibold text-white">
|
||
<div className="bg-indigo-600/90 px-4 py-2.5">Définition</div>
|
||
<div className="bg-indigo-600/90 px-4 py-2.5">Cachet</div>
|
||
</div>
|
||
{[{def:"Répétition d'une durée inférieure ou égale à 4 heures",val:184.90},{def:"Répétition d'une durée supérieure à 4 heures",val:289.23}].map((r,idx)=> (
|
||
<div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
|
||
<div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
|
||
<div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
|
||
</div>
|
||
))}
|
||
<div className="grid grid-cols-2 text-sm">
|
||
<div className="border-t px-4 py-3 text-slate-900">Enregistrement</div>
|
||
<div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(419.31)}</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Émissions lyriques */}
|
||
<section className="rounded-2xl border overflow-hidden">
|
||
<div className="bg-indigo-600 text-white px-4 py-3 text-sm font-semibold">Émissions lyriques (article 5.14.3)</div>
|
||
<div className="px-4 py-2 bg-slate-50 text-sm font-semibold text-slate-800">Répétition ou enregistrement</div>
|
||
<div className="grid grid-cols-2 text-sm font-semibold text-white">
|
||
<div className="bg-indigo-600/90 px-4 py-2.5">Définition</div>
|
||
<div className="bg-indigo-600/90 px-4 py-2.5">Cachet</div>
|
||
</div>
|
||
{[{def:'Soliste',val:432.86},{def:'Artistes des chœurs',val:289.23}].map((r,idx)=> (
|
||
<div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
|
||
<div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
|
||
<div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
|
||
</div>
|
||
))}
|
||
<div className="px-4 py-2 bg-slate-50 text-sm font-semibold text-slate-800">Préparation ou déchiffrage (3 heures maximum)</div>
|
||
{[{def:'Soliste',val:165.96},{def:"Artistes des chœurs",val:110.89}].map((r,idx)=> (
|
||
<div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
|
||
<div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
|
||
<div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
|
||
</div>
|
||
))}
|
||
</section>
|
||
|
||
{/* Émissions chorégraphiques */}
|
||
<section className="rounded-2xl border overflow-hidden">
|
||
<div className="bg-indigo-600 text-white px-4 py-3 text-sm font-semibold">Émissions chorégraphiques (article 5.14.4)</div>
|
||
<div className="px-4 py-2 bg-slate-50 text-sm font-semibold text-slate-800">Répétition ou enregistrement (6h de travail effectif au maximum)</div>
|
||
{[{def:'Soliste',val:432.86},{def:'Corps de ballet',val:289.23}].map((r,idx)=> (
|
||
<div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
|
||
<div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
|
||
<div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
|
||
</div>
|
||
))}
|
||
</section>
|
||
|
||
{/* Reportages / Actualité */}
|
||
<section className="rounded-2xl border overflow-hidden">
|
||
<div className="bg-indigo-600 text-white px-4 py-3 text-sm font-semibold">Reportages / Actualité</div>
|
||
<div className="grid grid-cols-2 text-sm font-semibold text-white">
|
||
<div className="bg-indigo-600/90 px-4 py-2.5">Définition</div>
|
||
<div className="bg-indigo-600/90 px-4 py-2.5">Cachet</div>
|
||
</div>
|
||
<div className="grid grid-cols-2 text-sm">
|
||
<div className="border-t px-4 py-3 text-slate-900">Reportage (art. 6.2.1.b, pas de gré à gré)</div>
|
||
<div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(73.64)}</div>
|
||
</div>
|
||
<div className="grid grid-cols-2 text-sm">
|
||
<div className="border-t px-4 py-3 text-slate-900">Prestation d'actualité (art. 6.3.1, pas de gré à gré)</div>
|
||
<div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(170.16)}</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Indemnités de costumes */}
|
||
<section className="rounded-2xl border overflow-hidden">
|
||
<div className="bg-indigo-600 text-white px-4 py-3 text-sm font-semibold">Indemnités de costumes (article 5.13)</div>
|
||
<div className="px-4 py-2 bg-slate-50 text-sm font-semibold text-slate-800">Indemnités visées à l'article 5.13.1</div>
|
||
<div className="grid grid-cols-2 text-sm font-semibold text-white">
|
||
<div className="bg-indigo-600/90 px-4 py-2.5">Définition</div>
|
||
<div className="bg-indigo-600/90 px-4 py-2.5">Montant</div>
|
||
</div>
|
||
{[{def:'Engagement pour une journée unique — Tenue de ville',val:18.34},{def:'Engagement pour une journée unique — Tenue de soirée',val:30.10},{def:'Engagement pour plusieurs jours — Tenue de ville',val:14.67},{def:'Engagement pour plusieurs jours — Tenue de soirée',val:24.77}].map((r,idx)=> (
|
||
<div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
|
||
<div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
|
||
<div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
|
||
</div>
|
||
))}
|
||
<div className="px-4 py-2 bg-slate-50 text-sm font-semibold text-slate-800">Indemnités visées à l'article 5.13.2</div>
|
||
{[{def:'Homme — pourpoint',val:14.56},{def:'Femme — Tutu court',val:14.56},{def:'Femme — Tutu romantique',val:24.77},{def:'Chaussons',val:5.60}].map((r,idx)=> (
|
||
<div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
|
||
<div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
|
||
<div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
|
||
</div>
|
||
))}
|
||
</section>
|
||
|
||
{/* Notes et définitions */}
|
||
<section className="rounded-2xl border bg-white p-6 space-y-3">
|
||
<InfoRow>
|
||
La durée du travail journalière est de <strong>9 heures</strong> (6 heures pour les mineurs de moins de 16 ans), y compris le temps passé à l'habillage et au maquillage, dans la limite d'une heure. La durée du travail hebdomadaire est de <strong>45 heures</strong> (5 × 9 heures) pour les adultes.
|
||
</InfoRow>
|
||
<InfoRow>
|
||
<strong>Émissions dramatiques</strong> : artistes engagés pour la réalisation télévisuelle d'œuvres ou extraits d'œuvres dramatiques (...), y compris artistes sans texte à respecter (voix hors champ, lectures de commentaires).
|
||
</InfoRow>
|
||
<InfoRow>
|
||
<strong>Émissions chorégraphiques</strong> : réalisations télévisuelles d'œuvres chorégraphiques (suite de pas/enchaînements réglés), à l'exclusion des artistes d'interprétation d'un texte parlé/chanté ou d'un numéro de variétés.
|
||
</InfoRow>
|
||
<InfoRow>
|
||
<strong>Émissions lyriques</strong> : réalisations télévisuelles d'œuvres lyriques ou émissions avec extraits lyriques ; inclut artistes des chœurs à l'image si intégrés à l'action dramatique. À l'exclusion des artistes d'interprétation d'un texte parlé/numéro de variétés ou de danse (ces derniers relèvent des dispositions des émissions dramatiques).
|
||
</InfoRow>
|
||
<InfoRow>
|
||
<strong>Émissions de variétés</strong> : prestations dans des conditions autres que celles prévues pour les émissions dramatiques, lyriques ou chorégraphiques, à l'exclusion des artistes chorégraphiques.
|
||
</InfoRow>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|