Initial commit

2026-06-13 14:57:15 +02:00
commit 48ed7fe65e
209 changed files with 49979 additions and 0 deletions
@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { useUi } from '../../context/UiContext.jsx';
+
+export default function MaFiscaliteSection() {
+  const { pfoAssujetti, setPfoAssujetti } = useUi();
+  const [showPfoDetail, setShowPfoDetail] = useState(false);
+
+  return (
+    <div>
+      <h2 style={{ margin: '0 0 6px', fontSize: 18 }}>Ma fiscalité</h2>
+      <p style={{ margin: '0 0 24px', color: 'var(--text-muted)', fontSize: 13 }}>
+        Paramètres fiscaux personnels applicables à vos revenus de placements.
+      </p>
+
+      <div style={{ fontWeight: 700, fontSize: 'var(--fs-md)', marginBottom: 10 }}>
+        Fiscalité des plateformes étrangères
+      </div>
+
+      <div className="card" style={{ marginBottom: 16, borderLeft: `4px solid ${pfoAssujetti ? 'var(--primary)' : 'var(--border)'}`, transition: 'border-color .2s' }}>
+
+        {/* Ligne titre + chevron + toggle */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <button
+            type="button"
+            onClick={() => setShowPfoDetail(v => !v)}
+            style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', color: 'var(--text)' }}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
+              style={{ transform: showPfoDetail ? 'rotate(180deg)' : 'none', transition: 'transform .2s', marginRight: 6, flexShrink: 0 }}>
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+            <span style={{ fontWeight: 700, fontSize: 'var(--fs-base)' }}>
+              CERFA 2778-SD — Prélèvement Forfaitaire Obligatoire (PFO) pour des revenus de source étrangère
+            </span>
+          </button>
+          <div style={{ marginLeft: 'auto', flexShrink: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
+            <span style={{ fontSize: 'var(--fs-xs)', fontWeight: 600, color: pfoAssujetti ? 'var(--primary)' : 'var(--text-muted)' }}>
+              {pfoAssujetti ? 'Activé' : 'Désactivé'}
+            </span>
+            <button
+              type="button"
+              onClick={() => setPfoAssujetti(!pfoAssujetti)}
+              style={{
+                width: 48, height: 26, borderRadius: 13, border: 'none',
+                background: pfoAssujetti ? 'var(--primary)' : 'var(--border)',
+                cursor: 'pointer', position: 'relative', transition: 'background .2s',
+              }}
+            >
+              <span style={{
+                position: 'absolute', top: 3,
+                left: pfoAssujetti ? 25 : 3,
+                width: 20, height: 20, borderRadius: '50%',
+                background: '#fff', transition: 'left .2s',
+                boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
+              }} />
+            </button>
+          </div>
+        </div>
+
+        {showPfoDetail && (
+          <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
+            <div style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', lineHeight: 1.6 }}>
+              Les intérêts perçus via des plateformes <strong>étrangères</strong> sont soumis à un prélèvement
+              forfaitaire obligatoire non libératoire de <strong>12,8 %</strong> (+ prélèvements sociaux),
+              à déclarer mensuellement via le formulaire <strong>2778-SD</strong> dans les 15 premiers jours
+              du mois suivant l'encaissement.
+            </div>
+            <div style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', lineHeight: 1.6, marginTop: 8 }}>
+              Ce prélèvement s'applique aux personnes physiques fiscalement domiciliées en France dont
+              le <strong>revenu fiscal de référence</strong> de l'avant-dernière année est égal ou supérieur à :
+            </div>
+            <div style={{ display: 'flex', gap: 12, marginTop: 8, flexWrap: 'wrap' }}>
+              <div style={{
+                padding: '6px 14px', borderRadius: 20,
+                background: 'rgba(99,102,241,0.08)', border: '1px solid rgba(99,102,241,0.2)',
+                fontSize: 'var(--fs-sm)', fontWeight: 600,
+              }}>25 000 € — célibataire, divorcé ou veuf</div>
+              <div style={{
+                padding: '6px 14px', borderRadius: 20,
+                background: 'rgba(99,102,241,0.08)', border: '1px solid rgba(99,102,241,0.2)',
+                fontSize: 'var(--fs-sm)', fontWeight: 600,
+              }}>50 000 € — couple marié ou pacsé</div>
+            </div>
+            <div style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', marginTop: 8 }}>
+              En dessous de ces seuils, vous êtes dispensé du PFO — mais les prélèvements sociaux restent dus.
+              Le PFO versé via la 2778-SD constitue un simple acompte d'impôt sur le revenu,
+              imputable sur l'impôt définitif calculé lors de la déclaration 2042.
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}