/* ═══════════════════════════════════════════════
   ARCE.CSS — Panel Calculateur Capital ARCE
   ═══════════════════════════════════════════════ */

#panel-arce {
  --navy:#06122b; --navy2:#0f2454; --indigo:#4338ca; --blue:#1756f8; --blue-dk:#0e40c0;
  --blue-lt:#dbeafe; --blue-bg:#eff6ff; --violet:#7c3aed; --violet-lt:#ede9fe;
  --violet-bg:#f5f3ff; --teal:#0d9488; --teal-lt:#99f6e4; --teal-bg:#f0fdfa;
  --green:#16a34a; --green-lt:#bbf7d0; --green-bg:#f0fdf4; --amber:#d97706;
  --amber-lt:#fde68a; --amber-bg:#fffbeb; --orange:#ea580c; --orange-lt:#fed7aa;
  --orange-bg:#fff7ed; --red:#dc2626; --red-lt:#fecaca; --red-bg:#fef2f2;
  --slate:#64748b; --slate2:#334155; --border:#e2e8f0; --surface:#f1f5f9;
  --white:#ffffff; --text:#0f172a; --text2:#475569; --text3:#94a3b8;
  --mono:'DM Mono',monospace; --r:12px; --r-lg:18px;
}

/* ── Header ───────────────────────────────── */
#panel-arce .header { background:linear-gradient(140deg,var(--navy) 0%,var(--navy2) 45%,#1e2f6b 80%,#2d1f7a 100%); position:relative; overflow:hidden; }
#panel-arce .header::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 8% 65%,rgba(67,56,202,.4) 0%,transparent 52%),radial-gradient(ellipse at 88% 12%,rgba(124,58,237,.25) 0%,transparent 48%); pointer-events:none; }
#panel-arce .header::after  { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); }
#panel-arce .header-inner   { max-width:1380px; margin:0 auto; padding:36px 24px 32px; position:relative; }
#panel-arce .header-tag     { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:5px 13px; color:rgba(255,255,255,.82); font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; margin-bottom:14px; backdrop-filter:blur(10px); }
#panel-arce .header-tag-dot { width:7px; height:7px; background:#a78bfa; border-radius:50%; animation:pulse-arce 2s infinite; }
@keyframes pulse-arce { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
#panel-arce h1              { color:#fff; font-size:clamp(20px,3.5vw,28px); font-weight:800; letter-spacing:-.5px; margin-bottom:7px; }
#panel-arce .header-desc    { color:rgba(255,255,255,.65); font-size:13.5px; line-height:1.7; max-width:560px; margin-bottom:20px; }
#panel-arce .formula-banner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:12px 16px; backdrop-filter:blur(8px); }
#panel-arce .formula-chip   { font-family:var(--mono); font-size:11.5px; background:rgba(124,58,237,.4); color:#c4b5fd; border:1px solid rgba(196,181,253,.3); border-radius:6px; padding:4px 10px; white-space:nowrap; }
#panel-arce .formula-arrow  { color:rgba(255,255,255,.3); font-size:13px; }

/* ── Page / Layout ────────────────────────── */
#panel-arce .page      { max-width:1380px; margin:0 auto; padding:28px 24px 56px; }
#panel-arce .three-col { display:grid; grid-template-columns:330px 1fr 1fr; gap:18px; align-items:start; }
@media(max-width:1100px){ #panel-arce .three-col { grid-template-columns:300px 1fr 1fr; } }
@media(max-width:820px) { #panel-arce .three-col { grid-template-columns:1fr 1fr; } }
@media(max-width:580px) { #panel-arce .three-col { grid-template-columns:1fr; } }

/* ── Colonne étapes ───────────────────────── */
#panel-arce #panel_arce_col-steps { position:sticky; top:0; max-height:100vh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
#panel-arce #panel_arce_col-steps::-webkit-scrollbar { width:5px; }
#panel-arce #panel_arce_col-steps::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

/* ── Card ─────────────────────────────────── */
#panel-arce .card           { background:var(--white); border-radius:var(--r-lg); border:1.5px solid var(--border); box-shadow:0 1px 6px rgba(0,0,0,.04); overflow:hidden; margin-bottom:16px; }
#panel-arce .card:last-child{ margin-bottom:0; }
#panel-arce .card-head      { padding:16px 20px 13px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:11px; }
#panel-arce .card-head-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
#panel-arce .card-head-title{ font-size:14.5px; font-weight:700; color:var(--text); }
#panel-arce .card-head-sub  { font-size:11.5px; color:var(--text3); margin-top:1px; }
#panel-arce .card-body      { padding:20px; }

/* ── Formulaire ───────────────────────────── */
#panel-arce .field          { margin-bottom:16px; }
#panel-arce .field:last-child { margin-bottom:0; }
#panel-arce .field-label    { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--slate2); margin-bottom:6px; }
#panel-arce .field-badge    { font-family:var(--mono); font-size:10px; background:var(--violet-bg); color:var(--violet); border:1px solid var(--violet-lt); border-radius:5px; padding:1px 6px; }
#panel-arce .field-hint     { font-size:11px; color:var(--text3); margin-top:4px; line-height:1.5; }
#panel-arce .input-wrap     { position:relative; }
#panel-arce .input-prefix   { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:13px; font-weight:600; color:var(--text3); pointer-events:none; }
#panel-arce .input-suffix   { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:11.5px; font-weight:600; color:var(--text3); pointer-events:none; }
#panel-arce input[type=number] { width:100%; padding:10px 44px 10px 30px; border:1.5px solid var(--border); border-radius:var(--r); font-family:'DM Sans',sans-serif; font-size:14.5px; font-weight:600; color:var(--text); background:#fafcff; outline:none; transition:border-color .18s,box-shadow .18s; -moz-appearance:textfield; }
#panel-arce input[type=number]::-webkit-inner-spin-button,
#panel-arce input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; }
#panel-arce input[type=number]:focus { border-color:var(--violet); background:var(--white); box-shadow:0 0 0 3.5px rgba(124,58,237,.1); }
#panel-arce input[type=number]:hover:not(:focus) { border-color:#94a3b8; }
#panel-arce input[type=number].error { border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.08); }
#panel-arce .taux-toggle    { display:grid; grid-template-columns:1fr 1fr; border:1.5px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:6px; }
#panel-arce .taux-btn       { padding:10px 8px; text-align:center; cursor:pointer; border:none; background:transparent; font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:600; color:var(--slate); transition:all .15s; display:flex; flex-direction:column; align-items:center; gap:2px; }
#panel-arce .taux-btn:first-child { border-right:1px solid var(--border); }
#panel-arce .taux-btn.active { background:var(--violet); color:#fff; }
#panel-arce .taux-btn .taux-pct  { font-size:18px; font-weight:800; line-height:1; }
#panel-arce .taux-btn .taux-date { font-size:10px; opacity:.8; }
#panel-arce .btn-calc        { width:100%; padding:13px; margin-top:4px; background:linear-gradient(135deg,var(--violet),var(--indigo)); color:#fff; border:none; border-radius:var(--r); font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:all .18s; box-shadow:0 4px 16px rgba(124,58,237,.35); display:flex; align-items:center; justify-content:center; gap:8px; }
#panel-arce .btn-calc:hover  { transform:translateY(-1px); box-shadow:0 6px 22px rgba(124,58,237,.45); }
#panel-arce .btn-calc:active { transform:translateY(0); }
#panel-arce .btn-reset       { width:100%; padding:9px; margin-top:8px; background:transparent; border:1.5px solid var(--border); border-radius:var(--r); font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:600; color:var(--slate); cursor:pointer; transition:all .15s; }
#panel-arce .btn-reset:hover { background:var(--surface); border-color:#94a3b8; }
#panel-arce .err-msg         { background:var(--red-bg); border:1px solid var(--red-lt); border-radius:var(--r); padding:10px 14px; font-size:12.5px; color:var(--red); display:none; margin-top:10px; }

/* ── Résultats ────────────────────────────── */
#panel-arce #panel_arce_results { display:none; animation:fadeSlide-arce .3s ease both; }
@keyframes fadeSlide-arce { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
#panel-arce .result-hero   { border-radius:var(--r-lg); padding:22px 22px 18px; margin-bottom:16px; position:relative; overflow:hidden; }
#panel-arce .hero-gradient { background:linear-gradient(140deg,#0f1d4a 0%,#1e1060 50%,#3b0764 100%); }
#panel-arce .result-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 80% 20%,rgba(255,255,255,.07) 0%,transparent 60%); pointer-events:none; }
#panel-arce .hero-label    { color:rgba(255,255,255,.55); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin-bottom:4px; }
#panel-arce .hero-amount   { font-size:clamp(28px,5vw,40px); font-weight:800; color:#fff; letter-spacing:-1px; line-height:1; margin-bottom:2px; }
#panel-arce .hero-amount span { font-size:.5em; font-weight:600; opacity:.75; margin-left:3px; }
#panel-arce .hero-note     { color:rgba(255,255,255,.55); font-size:12px; margin-top:6px; }
#panel-arce .hero-pills    { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
#panel-arce .hero-pill     { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:8px; padding:6px 12px; display:flex; flex-direction:column; }
#panel-arce .hero-pill-val { color:#fff; font-size:15px; font-weight:800; }
#panel-arce .hero-pill-lbl { color:rgba(255,255,255,.55); font-size:10px; margin-top:1px; }
#panel-arce .taux-badge    { display:inline-flex; align-items:center; gap:5px; margin-top:12px; background:rgba(167,139,250,.2); border:1px solid rgba(167,139,250,.35); border-radius:20px; padding:4px 11px; color:#c4b5fd; font-size:11.5px; font-weight:700; }

/* ── Timeline versements ──────────────────── */
#panel-arce .timeline       { position:relative; padding-left:28px; margin:4px 0; }
#panel-arce .timeline::before { content:''; position:absolute; left:9px; top:8px; bottom:8px; width:2px; background:linear-gradient(to bottom,var(--violet),var(--teal)); border-radius:2px; }
#panel-arce .tl-item        { position:relative; margin-bottom:14px; }
#panel-arce .tl-item:last-child { margin-bottom:0; }
#panel-arce .tl-dot         { position:absolute; left:-21px; top:8px; width:14px; height:14px; border-radius:50%; border:2px solid var(--white); z-index:1; flex-shrink:0; }
#panel-arce .tl-dot-v1      { background:var(--violet); box-shadow:0 0 0 2px rgba(124,58,237,.25); }
#panel-arce .tl-dot-v2      { background:var(--teal);   box-shadow:0 0 0 2px rgba(13,148,136,.25); }
#panel-arce .tl-box         { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); padding:11px 14px; }
#panel-arce .tl-when        { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text3); margin-bottom:3px; }
#panel-arce .tl-title       { font-size:13px; font-weight:700; color:var(--text); margin-bottom:2px; }
#panel-arce .tl-amount      { font-family:var(--mono); font-size:17px; font-weight:700; }
#panel-arce .tl-note        { font-size:11.5px; color:var(--text3); margin-top:4px; line-height:1.5; }

/* ── Tableau récap ────────────────────────── */
#panel-arce .sum-table { width:100%; border-collapse:collapse; }
#panel-arce .sum-table tr { border-bottom:1px solid var(--border); }
#panel-arce .sum-table tr:last-child { border-bottom:none; }
#panel-arce .sum-table td { padding:9px 4px; font-size:12.5px; vertical-align:middle; }
#panel-arce .sum-table td:first-child { color:var(--text2); font-weight:500; }
#panel-arce .sum-table td:last-child  { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--text); text-align:right; }
#panel-arce .sum-table .total-row td  { padding-top:12px; border-top:2px solid var(--border); }
#panel-arce .sum-table .total-row td:first-child { font-size:13.5px; font-weight:700; color:var(--text); }
#panel-arce .sum-table .total-row td:last-child  { font-size:15px; color:var(--violet); }
#panel-arce .tag   { display:inline-block; font-family:'DM Sans',sans-serif; font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px; margin-left:5px; }
#panel-arce .tag-v { background:var(--violet-bg); color:var(--violet); border:1px solid var(--violet-lt); }
#panel-arce .tag-g { background:var(--green-bg);  color:var(--green);  border:1px solid var(--green-lt); }
#panel-arce .tag-a { background:var(--amber-bg);  color:var(--amber);  border:1px solid var(--amber-lt); }
#panel-arce .tag-r { background:var(--red-bg);    color:var(--red);    border:1px solid var(--red-lt); }

/* ── Cas d'échec + Différé ────────────────── */
#panel-arce .echec-box      { background:var(--orange-bg); border:1.5px solid var(--orange-lt); border-radius:var(--r); padding:14px 16px; margin-top:4px; }
#panel-arce .echec-title    { font-size:12.5px; font-weight:700; color:var(--orange); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
#panel-arce .echec-row      { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid rgba(234,88,12,.12); font-size:12.5px; }
#panel-arce .echec-row:last-child { border-bottom:none; padding-bottom:0; }
#panel-arce .echec-row span:first-child { color:#92400e; }
#panel-arce .echec-row span:last-child  { font-family:var(--mono); font-weight:700; color:var(--orange); }
#panel-arce .differe-box    { background:var(--amber-bg); border:1.5px solid var(--amber-lt); border-radius:var(--r); padding:14px 16px; margin-top:4px; }
#panel-arce .differe-title  { font-size:12.5px; font-weight:700; color:var(--amber); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
#panel-arce .differe-val    { font-family:var(--mono); font-size:22px; font-weight:800; color:var(--amber); }
#panel-arce .differe-note   { font-size:11.5px; color:#92400e; line-height:1.55; margin-top:4px; }

/* ── Étapes de calcul ─────────────────────── */
#panel-arce .steps-head { font-size:12.5px; font-weight:700; color:var(--slate2); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
#panel-arce .steps-head::after { content:''; flex:1; height:1px; background:var(--border); }
#panel-arce .step       { display:flex; gap:11px; padding:10px 12px; border-radius:var(--r); margin-bottom:7px; border:1px solid transparent; transition:border-color .15s; }
#panel-arce .step:hover { border-color:var(--border); }
#panel-arce .step-num   { width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }
#panel-arce .step-content { flex:1; min-width:0; }
#panel-arce .step-name  { font-size:12px; font-weight:600; color:var(--text2); margin-bottom:4px; }
#panel-arce .step-formula { font-family:var(--mono); font-size:11px; background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:6px 9px; color:var(--slate2); line-height:1.65; margin-bottom:4px; word-break:break-word; }
#panel-arce .step-formula .hl   { color:var(--violet); font-weight:500; }
#panel-arce .step-formula .res  { color:var(--green);  font-weight:700; }
#panel-arce .step-formula .warn { color:var(--amber);  font-weight:600; }
#panel-arce .step-result { font-size:12px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:5px; }
#panel-arce .val-chip    { font-family:var(--mono); font-size:12px; padding:2px 7px; border-radius:5px; }
#panel-arce .vc-violet { background:var(--violet-bg); color:var(--violet); border:1px solid var(--violet-lt); }
#panel-arce .vc-green  { background:var(--green-bg);  color:var(--green);  border:1px solid var(--green-lt); }
#panel-arce .vc-amber  { background:var(--amber-bg);  color:var(--amber);  border:1px solid var(--amber-lt); }
#panel-arce .vc-red    { background:var(--red-bg);    color:var(--red);    border:1px solid var(--red-lt); }
#panel-arce .vc-teal   { background:var(--teal-bg);   color:var(--teal);   border:1px solid var(--teal-lt); }
#panel-arce .vc-blue   { background:var(--blue-bg);   color:var(--blue);   border:1px solid var(--blue-lt); }
#panel-arce .s-violet { background:var(--violet-bg); } #panel-arce .s-teal { background:var(--teal-bg); }
#panel-arce .s-green  { background:var(--green-bg);  } #panel-arce .s-amber { background:var(--amber-bg); }
#panel-arce .s-red    { background:var(--red-bg);    } #panel-arce .s-blue  { background:var(--blue-bg); }
#panel-arce .s-slate  { background:#f8fafc; }
#panel-arce .n-violet { background:var(--violet); color:#fff; } #panel-arce .n-teal  { background:var(--teal);   color:#fff; }
#panel-arce .n-green  { background:var(--green);  color:#fff; } #panel-arce .n-amber { background:var(--amber);  color:#fff; }
#panel-arce .n-red    { background:var(--red);    color:#fff; } #panel-arce .n-blue  { background:var(--blue);   color:#fff; }
#panel-arce .n-slate  { background:var(--slate);  color:#fff; }

/* ── Conditions d'éligibilité ─────────────── */
#panel-arce .prereq-card  { background:linear-gradient(135deg,var(--violet-bg),#faf5ff); border:1.5px solid var(--violet-lt); border-radius:var(--r); padding:14px 16px; }
#panel-arce .prereq-title { font-size:12.5px; font-weight:700; color:var(--violet); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
#panel-arce .prereq-item  { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:#4c1d95; line-height:1.5; margin-bottom:7px; }
#panel-arce .prereq-item:last-child { margin-bottom:0; }
#panel-arce .prereq-dot   { width:18px; height:18px; border-radius:5px; background:var(--violet); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }

/* ── Footer ───────────────────────────────── */
#panel-arce footer        { background:#1e293b; padding:18px 24px; }
#panel-arce .footer-inner { max-width:1380px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
#panel-arce footer p      { font-size:11.5px; color:rgba(255,255,255,.42); }
#panel-arce footer a      { color:#818cf8; text-decoration:none; }

/* ── Responsive ───────────────────────────── */
@media(max-width:600px) {
  #panel-arce .formula-banner { display:none; }
  #panel-arce .hero-amount    { font-size:28px; }
  #panel-arce .card-body      { padding:14px; }
  #panel-arce .page           { padding:16px 12px 48px; }
}