/* ═══════════════════════════════════════════ ESPACE CLIENT — Style bancaire institutionnel Référence : BNP Paribas, Société Générale, Boursorama ════════════════════════════════════════════ */ /* Prevent double-tap zoom on iOS without disabling pinch-to-zoom */ html, body { touch-action: manipulation; } :root{ --brand:#0B5E8A; /* bleu bancaire principal */ --brand-d:#094d73; --brand-light:#EEF5FA; --teal:#0B9E8A; /* accent secondaire (teal) */ --teal-light:#E6F7F5; --coral:#0C2D5E; /* boutons CTA — même couleur que le site public */ --coral-d:#091f42; --navy:#12263A; /* textes titres */ --bg:#F6F9FC; /* fond page */ --card:#FFFFFF; --border:#E2E6EA; --border-s:#CDD3DA; --muted:#6B7A8D; --muted-2:#A8B2BE; --text:#1A2433; --text-2:#3D4F63; --red:#C0392B; --red-light:#FDF0EF; --green:#1A7F5A; --green-light:#EAF7F1; --radius:10px; --radius-sm:6px; --shadow-xs:0 1px 2px rgba(0,0,0,.04); --shadow-sm:0 1px 4px rgba(0,0,0,.06); --shadow-md:0 2px 12px rgba(0,0,0,.08); } *{ box-sizing:border-box; } /* Les bannières verrouillent le scroll en passant en position:fixed (ecOpenModal/pfOpenModal) ; lui-même garde le fond blanc par défaut de style.css, ce qui peut faire flasher ce blanc pendant le repositionnement de sur Safari/WebKit. On aligne sur le vrai fond de page pour éliminer ce flash. */ html{ background:#EDF0F5; } .ec-body{ background:var(--bg);min-height:100vh; font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--text);-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .ec-dash-body{ padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)); } /* ════════════════════════════ AUTH PAGES — style Franfinance ════════════════════════════ */ .ec-login-body{ background:#f2f2f2;min-height:100vh; font-family:'Inter',system-ui,-apple-system,sans-serif; color:#111;-webkit-font-smoothing:antialiased; padding-top:38px; } .ec-login-wrap{ max-width:480px;margin:0 auto;padding:2.5rem 1rem 2rem; display:flex;flex-direction:column;gap:1rem; } /* Carte principale */ .ec-login-card{ background:#fff;border-radius:12px; padding:2.6rem 2rem 2.4rem; box-shadow:0 2px 20px rgba(0,0,0,.09); } /* Logo dans la carte */ .ec-login-brand{ margin-bottom:2.4rem;text-align:center; } .ec-login-brand-name{ font-size:2.1rem;font-weight:900;color:#111; text-decoration:none;letter-spacing:.06em; display:inline-block; } /* Titre uppercase bold */ .ec-login-title{ font-size:1.8rem;font-weight:900;color:#111; line-height:1.15;margin:0 0 2rem;letter-spacing:-.01em; } /* Champs */ .ec-login-field-wrap{ position:relative;margin-bottom:1.1rem; } .ec-login-inp{ width:100%;border:1.5px solid #c8c8c8;border-radius:6px; padding:1.05rem 1.1rem;font-size:1.05rem;font-family:inherit; color:#111;background:#fff;outline:none; transition:border-color .18s,box-shadow .18s; } .ec-login-inp::placeholder{ color:#999;font-size:1rem; } .ec-login-inp:focus{ border-color:#555;box-shadow:none; } .ec-login-eye{ position:absolute;right:.9rem;top:50%;transform:translateY(-50%); background:none;border:none;cursor:pointer;color:#a8b2be; padding:0;display:flex;align-items:center;transition:color .15s; } .ec-login-eye:hover{ color:#1a2433; } /* Lien oublié */ .ec-login-forgot-row{ text-align:right;margin:-.3rem 0 1rem; } .ec-login-forgot{ font-size:.88rem;color:#333;text-decoration:underline; text-underline-offset:3px; } /* Toggle souvenir */ .ec-login-remember-row{ margin-bottom:1.6rem; } /* Bouton principal — gris comme Franfinance */ .ec-login-btn{ display:block;width:100%;padding:1.05rem;border-radius:6px; background:#6b6b6b;color:#fff;border:none; font-size:1.05rem;font-weight:600;font-family:inherit; cursor:pointer;transition:background .2s,transform .12s; text-align:center;text-decoration:none;letter-spacing:.01em; } .ec-login-btn:hover{ background:#555; } .ec-login-btn:active{ transform:scale(.98); } /* Bouton outline */ .ec-login-btn-outline{ display:block;width:100%;padding:1rem;border-radius:6px; background:#fff;color:#111;border:1.5px solid #c8c8c8; font-size:1.05rem;font-weight:600;font-family:inherit; cursor:pointer;transition:all .2s;text-align:center;text-decoration:none; margin-top:.1rem; } .ec-login-btn-outline:hover{ border-color:#555;background:#f5f5f5; } /* Séparateur ou */ .ec-auth-sep{ display:flex;align-items:center;gap:.8rem; margin:1.3rem 0;color:#a8b2be;font-size:.82rem; } .ec-auth-sep::before,.ec-auth-sep::after{ content:'';flex:1;height:1px;background:#e2e6ea; } /* Bouton retour 2FA */ .ec-auth-back-btn{ display:block;width:100%;margin:.6rem 0 0; padding:.8rem;background:none;border:none; color:#6b7a8d;font-size:.83rem;cursor:pointer; font-family:inherit;text-align:center; } .ec-auth-back-btn:hover{ color:#0f1f35; } /* Banner fraudes pleine largeur */ .ec-login-fraud{ background:#2d1f5e;border-radius:10px;overflow:hidden; } .ec-login-fraud-inner{ padding:1.4rem 1.4rem; } .ec-login-fraud-head{ display:flex;align-items:center;gap:.6rem; font-size:.95rem;font-weight:900;color:#fff; text-transform:uppercase;letter-spacing:.04em;margin-bottom:.8rem; } .ec-login-fraud-body{ font-size:.8rem;color:rgba(255,255,255,.75); line-height:1.6;margin:0 0 .4rem; } .ec-login-fraud-body:last-child{ margin-bottom:0; } .ec-login-fraud-body strong{ color:#fff; } .ec-login-fraud-body a{ color:rgba(255,255,255,.9);text-decoration:underline; } /* Footer liens */ .ec-login-footer-links{ display:flex;flex-wrap:wrap;justify-content:center; align-items:center;gap:.3rem .4rem; font-size:.74rem;padding:.5rem 0; } .ec-login-footer-links a{ color:var(--coral);text-decoration:none; } .ec-login-footer-links a:hover{ text-decoration:underline; } .ec-login-footer-links span{ color:#cdd3da; } /* ── Héritage pour pages qui utilisent encore ec-auth-* ── */ .ec-auth-wrap{ min-height:calc(100vh - 44px);display:flex;flex-direction:column; align-items:center;justify-content:center; padding:2rem 1.2rem 1rem; background:linear-gradient(150deg,#071325 0%,#0B1D3A 55%,#0E2847 100%); } .ec-auth-logo{ font-size:1.9rem;font-weight:800;color:#fff; text-decoration:none;margin-bottom:.25rem;letter-spacing:-.04em; } .ec-auth-sub{ font-size:.8rem;font-weight:600;color:rgba(255,255,255,.35); letter-spacing:.14em;text-transform:uppercase;margin-bottom:2.4rem; } .ec-auth-card{ width:100%;max-width:420px;background:#fff; border-radius:16px;padding:2.4rem 2rem; box-shadow:0 24px 70px rgba(0,0,0,.35); } .ec-auth-title{ font-size:1.35rem;font-weight:700;color:var(--navy); margin:0 0 .3rem;letter-spacing:-.02em; } .ec-auth-hint{ font-size:.84rem;color:var(--muted);margin-bottom:1.8rem;line-height:1.55; } .ec-auth-row-between{ display:flex;align-items:center;justify-content:space-between; margin:-.1rem 0 1rem;gap:.5rem; } /* Toggle "Se souvenir de moi" */ .ec-remember-toggle{ display:flex;align-items:center;gap:.55rem;cursor:pointer; } .ec-remember-toggle input{ display:none; } .ec-toggle-track{ width:34px;height:20px;border-radius:20px; background:#DDE3EA;position:relative; transition:background .2s;flex-shrink:0; } .ec-toggle-thumb{ position:absolute;top:3px;left:3px; width:14px;height:14px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; } .ec-remember-toggle input:checked ~ .ec-toggle-track{ background:var(--brand); } .ec-remember-toggle input:checked ~ .ec-toggle-track .ec-toggle-thumb{ transform:translateX(14px); } .ec-remember-lbl{ font-size:.9rem;color:#333;white-space:nowrap; } /* Bouton retour 2FA */ .ec-auth-back-btn{ display:block;width:calc(100% - 4rem);margin:.6rem 2rem 0; padding:.8rem;background:none;border:none; color:var(--muted);font-size:.83rem;cursor:pointer; font-family:inherit;text-align:center; } .ec-auth-back-btn:hover{ color:var(--navy); } /* Banner anti-fraude */ .ec-auth-fraud-banner{ width:100%;max-width:420px;margin-top:1.1rem; background:rgba(7,19,37,.75);border:1px solid rgba(255,255,255,.08); border-radius:10px;padding:1rem 1.1rem; display:flex;gap:.8rem;align-items:flex-start; backdrop-filter:blur(4px); } .ec-auth-fraud-icon{ color:#f0a500;flex-shrink:0;margin-top:.1rem; } .ec-auth-fraud-text{ font-size:.74rem;color:rgba(255,255,255,.6);line-height:1.55; } .ec-auth-fraud-text strong{ display:block;color:#f0a500;font-size:.72rem; letter-spacing:.1em;margin-bottom:.3rem; } .ec-auth-fraud-text a{ color:rgba(255,255,255,.75);text-decoration:underline; } /* Footer liens */ .ec-auth-footer-links{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:.4rem .5rem;margin-top:1.2rem; font-size:.8rem;color:rgba(255,255,255,.3); } .ec-auth-footer-links a{ color:rgba(255,255,255,.45);text-decoration:none; } .ec-auth-footer-links a:hover{ color:rgba(255,255,255,.75); } .ec-auth-footer-links span{ color:rgba(255,255,255,.2); } /* Mention légale crédit sticky en bas */ .ec-credit-legal-bar{ position:fixed;bottom:0;left:0;right:0;z-index:999; background:#0B1D3A;border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.45);font-size:.68rem; text-align:center;padding:.6rem 1.5rem; font-family:'Inter',system-ui,sans-serif; line-height:1.4; } /* Form */ .ec-form-group{ margin-bottom:1rem; } .ec-lbl{ display:block;font-size:.72rem;font-weight:600; color:var(--text-2);margin-bottom:.4rem; letter-spacing:.03em;text-transform:uppercase; } .ec-req{ color:var(--brand); } .ec-inp{ width:100%;border:1.5px solid var(--border); border-radius:var(--radius-sm);padding:.76rem .92rem; font-size:.92rem;font-family:inherit; color:var(--text);background:#fff;outline:none; transition:border-color .18s,box-shadow .18s; } .ec-inp::placeholder{ color:var(--muted-2); } .ec-inp:focus{ border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,94,138,.1); } .ec-inp[type="number"]{ -webkit-appearance:none;appearance:none; } .ec-inp.err{ border-color:var(--red); } .ec-inp option{ font-family:inherit; } .ec-row2{ display:grid;grid-template-columns:1fr 1fr;gap:.8rem; } @media(max-width:420px){ .ec-row2{grid-template-columns:1fr;} } .ec-pwd-wrap,.ec-pwd-field{ position:relative; } .ec-pwd-wrap .ec-inp,.ec-pwd-field .ec-inp{ padding-right:2.8rem; } .ec-eye-btn{ position:absolute;right:.85rem;top:50%;transform:translateY(-50%); background:none;border:none;cursor:pointer;color:var(--muted); padding:0;line-height:1;display:flex;align-items:center;transition:color .15s; } .ec-eye-btn:hover{ color:var(--text); } .ec-pwd-strength{ display:flex;gap:4px;margin-top:.5rem;height:3px; } .ec-pwd-strength span{ flex:1;border-radius:4px;background:#E5E7EB;transition:background .3s; } .ec-pwd-strength.weak span:nth-child(1){ background:var(--red); } .ec-pwd-strength.medium span:nth-child(-n+2){ background:#E67E22; } .ec-pwd-strength.strong span{ background:var(--teal); } .ec-form-err{ background:var(--red-light);border:1px solid rgba(192,57,43,.15); border-radius:var(--radius-sm);padding:.8rem .9rem; font-size:.82rem;color:var(--red);margin-bottom:.9rem;line-height:1.45; } .ec-field-note{ font-size:.74rem;color:var(--muted);margin-top:.3rem;display:block; } .ec-forgot{ display:block;text-align:right;font-size:.78rem; color:var(--brand);text-decoration:none;font-weight:600;white-space:nowrap; } .ec-btn-primary{ display:block;width:100%;padding:.85rem;border-radius:2rem; background:var(--coral);color:#fff;border:none; font-size:.94rem;font-weight:700;font-family:inherit; cursor:pointer;transition:background .2s,transform .12s; text-align:center;text-decoration:none;letter-spacing:-.01em; } .ec-btn-primary:hover{ background:var(--coral-d); } .ec-btn-primary:active{ transform:scale(.98); } .ec-btn-secondary{ display:block;width:100%;padding:.82rem;border-radius:var(--radius-sm); background:#fff;color:var(--navy);border:1.5px solid var(--border-s); font-size:.94rem;font-weight:600;font-family:inherit; cursor:pointer;transition:all .2s;text-align:center;text-decoration:none; } .ec-btn-secondary:hover{ border-color:var(--navy);background:var(--bg); } .ec-auth-sep{ display:flex;align-items:center;gap:.8rem; margin:1.3rem 0;color:var(--muted);font-size:.79rem; } .ec-auth-sep::before,.ec-auth-sep::after{ content:'';flex:1;height:1px;background:var(--border); } .ec-check-item{ display:flex;align-items:flex-start;gap:.8rem;cursor:pointer;margin-top:1rem; } .ec-check-item input{ display:none; } .ec-check-box{ width:18px;height:18px;min-width:18px;border-radius:4px; border:1.5px solid #C8D0DC;background:#fff;margin-top:.1rem; transition:all .18s;position:relative; } .ec-check-item input:checked + .ec-check-box{ background:var(--brand);border-color:var(--brand); } .ec-check-item input:checked + .ec-check-box::after{ content:'';position:absolute;left:4px;top:2px;width:6px;height:9px; border:2px solid #fff;border-top:none;border-left:none;transform:rotate(42deg); } .ec-check-txt{ font-size:.81rem;color:#555;line-height:1.55; } .ec-check-txt a{ color:var(--brand);text-decoration:underline; } .ec-switch-link{ text-align:center;font-size:.83rem;color:var(--muted);margin-top:1.2rem; } .ec-switch-link a{ color:var(--brand);text-decoration:none;font-weight:600; } .ec-auth-legal{ text-align:center;font-size:.71rem;color:rgba(255,255,255,.32); margin-top:1.6rem;line-height:1.6; } .ec-auth-legal a{ color:rgba(255,255,255,.55);text-decoration:underline; } /* ════════════════════════════ HEADER ════════════════════════════ */ .ec-header{ position:fixed;top:0;left:0;right:0;z-index:300; height:56px; background:#fff; border-bottom:1px solid var(--border); display:flex;align-items:center; justify-content:space-between; padding:0 1.25rem; box-shadow:var(--shadow-xs); } .ec-hd-logo{ font-size:1.2rem;font-weight:800;color:var(--navy); text-decoration:none;letter-spacing:-.04em; display:flex;align-items:center; } .ec-hd-logo-icon{ width:36px;height:36px;display:block; } .ec-hd-right{ display:flex;align-items:center;gap:.6rem; } .ec-hd-avatar{ width:34px;height:34px;border-radius:50%; background:var(--brand); color:#fff;display:flex;align-items:center;justify-content:center; font-size:.8rem;font-weight:700;flex-shrink:0; cursor:pointer;text-decoration:none;overflow:hidden; transition:opacity .15s; } .ec-hd-avatar:hover{ opacity:.88; } .ec-hd-user-info{ display:flex;flex-direction:column;gap:.05rem; } .ec-hd-label{ font-size:.65rem;font-weight:500;color:var(--muted);line-height:1; } .ec-hd-name{ font-size:.9rem;font-weight:700;color:var(--navy);line-height:1.2; } @media(max-width:340px){ .ec-hd-user-info{display:none;} } .ec-hd-logout{ display:flex;align-items:center;gap:.4rem; background:var(--bg);border:1px solid var(--border); border-radius:var(--radius-sm);padding:.4rem .8rem; font-size:.78rem;font-weight:600;color:var(--muted); cursor:pointer;font-family:inherit;transition:all .2s; } .ec-hd-logout:hover{ background:#E8EBF0;color:var(--text); } /* ════════════════════════════ SIDEBAR — éléments cachés sur mobile ════════════════════════════ */ .ec-sidebar-brand{ display:none; } .ec-sidebar-user-card{ display:none; } .ec-sidebar-divider{ display:none; } .ec-sidebar-logout{ display:none; } /* ════════════════════════════ BOTTOM NAV (mobile) ════════════════════════════ */ .ec-bottom-nav{ position:fixed;bottom:0;left:0;right:0;z-index:200; background:#fff; border-top:1px solid var(--border); display:flex;align-items:center;height:68px; padding:0 .25rem; padding-bottom:env(safe-area-inset-bottom,0); } .ec-bnav-link{ flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:.28rem; text-decoration:none;color:var(--muted); font-size:.6rem;font-weight:600;letter-spacing:.02em; text-transform:uppercase;transition:color .2s; border:none;background:none;cursor:pointer; font-family:inherit;padding:.4rem .3rem; border-radius:8px;position:relative; } .ec-bnav-link svg{ transition:stroke .2s;stroke-width:1.6; } .ec-bnav-link.active{ color:var(--brand); } .ec-bnav-link.active svg{ stroke:var(--brand); } .ec-bnav-dot{ display:none; } .ec-bnav-link.active::before{ content:'';position:absolute;top:5px; width:40px;height:30px; background:var(--brand-light); border-radius:8px;z-index:0; } .ec-bnav-link svg, .ec-bnav-link span{ position:relative;z-index:1; } /* Barre du bas réduite à un seul bouton (pages profil, suivi de dossier) */ .ec-bottom-nav--single{ justify-content:center; } .ec-bottom-nav--single .ec-bnav-link{ flex:0 0 auto;padding:.4rem 2.5rem;color:var(--brand); } .ec-bottom-nav--single .ec-bnav-link svg{ stroke:var(--brand); } /* ════════════════════════════ MAIN ════════════════════════════ */ .ec-main{ max-width:640px;margin:0 auto; padding:calc(56px + 1.25rem) 1rem 1.5rem; } /* Sous-pages mobile (suivi-dossier, profil, mes-documents…) : réserve assez d'espace en bas pour ne pas passer sous la barre de navigation fixe. */ @media (max-width: 767px) { .ec-main, .pf-main { padding-bottom: calc(var(--nav-h, 62px) + env(safe-area-inset-bottom, 0px) + 1.5rem) !important; } } /* En-tête de page */ .ec-welcome{ display:flex;justify-content:space-between;align-items:flex-start; margin-bottom:1.5rem;padding-bottom:1.25rem; border-bottom:1px solid var(--border); } .ec-welcome-sub{ font-size:.68rem;font-weight:600;color:var(--muted); text-transform:uppercase;letter-spacing:.1em;margin-bottom:.22rem; } .ec-welcome-title{ font-size:1.3rem;font-weight:700;color:var(--navy); margin:0;letter-spacing:-.02em; } .ec-welcome-date{ font-size:.72rem;color:var(--muted);text-align:right; background:var(--card);border:1px solid var(--border); border-radius:var(--radius-sm);padding:.35rem .8rem; white-space:nowrap; } .ec-section-title{ font-size:.64rem;font-weight:700;color:var(--muted); text-transform:uppercase;letter-spacing:.12em; margin:1.6rem 0 .6rem; } /* ════════════════════════════ SOLDE — style bancaire sobre ════════════════════════════ */ .ec-solde-block{ background:#fff; border:none; border-radius:18px; padding:1.6rem 1.4rem 1.3rem; margin-bottom:1rem; box-shadow:0 2px 20px rgba(0,0,0,.08); } .ec-solde-cols{ display:flex;align-items:flex-start;gap:0; margin-bottom:1.1rem; } .ec-solde-col{ flex:1; display:flex;flex-direction:column;gap:.5rem; align-items:center;text-align:center; } .ec-solde-col:last-child{ padding-left:.8rem; } .ec-solde-divider{ width:1px;background:#E5E7EB; margin:0;flex-shrink:0;align-self:stretch; } .ec-solde-lbl{ font-size:.58rem;font-weight:500;color:#B0B8C4; text-transform:uppercase;letter-spacing:.13em; } .ec-solde-amt{ font-size:1.3rem;font-weight:400;color:#1C1C2E; letter-spacing:-.01em;font-variant-numeric:tabular-nums; transition:opacity .18s;line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .ec-hide-bal-row{ display:flex;align-items:center;justify-content:center;gap:.4rem; width:100%; background:none;border:none;padding:0; color:#9CA3AF;font-size:.78rem;font-weight:400; cursor:pointer;font-family:inherit; margin-bottom:.85rem;transition:color .15s; } .ec-hide-bal-row:hover{ color:#6B7280; } .ec-iban-row{ display:flex;align-items:center;justify-content:center;gap:.4rem; margin-top:.6rem; } .ec-iban-lbl{ font-size:.72rem;font-weight:500;color:#B0B8C4; flex-shrink:0;letter-spacing:.02em; } .ec-iban-val{ font-size:.72rem;font-weight:400;color:#4B5563; font-variant-numeric:tabular-nums; white-space:nowrap; } .ec-iban-copy{ background:none;border:none;padding:0;cursor:pointer; color:#9CA3AF;display:flex;align-items:center; flex-shrink:0;transition:color .15s; } .ec-iban-copy:hover{ color:#4B5563; } .ec-iban-copy svg{ stroke:currentColor; } /* Action pills — horizontal icon+texte côte à côte */ .ec-action-pills{ display:flex;gap:.5rem; margin-bottom:1.2rem; overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding-bottom:2px; } .ec-action-pills::-webkit-scrollbar{ display:none; } .ec-pill-btn{ display:flex;flex-direction:row;align-items:center;gap:.5rem; background:#2D2D2D; border:none;border-radius:14px; padding:.65rem .8rem; color:#fff;cursor:pointer; font-size:.76rem;font-weight:600;font-family:inherit; flex:1;min-width:max-content; transition:background .18s,transform .12s; white-space:nowrap; } .ec-pill-btn:hover{ background:#3D3D3D; } .ec-pill-btn:active{ transform:scale(.96); } .ec-pill-ico{ width:30px;height:30px;border-radius:50%; display:flex;align-items:center;justify-content:center;flex-shrink:0; } .ec-pill-ico--green{ background:rgba(52,211,153,.2); } .ec-pill-ico--green svg{ stroke:#34D399; } .ec-pill-ico--blue{ background:rgba(96,165,250,.2); } .ec-pill-ico--blue svg{ stroke:#60A5FA; } .ec-pill-ico--teal{ background:rgba(45,212,191,.2); } .ec-pill-ico--teal svg{ stroke:#2DD4BF; } .ec-pill-ico--orange{ background:rgba(251,191,36,.2); } .ec-pill-ico--orange svg{ stroke:#FBBF24; } /* Legacy */ .ec-solde-actions{ display:none; } .ec-eye-circle{ display:none; } /* ════════════════════════════ CARTE CRÉDIT — clean professional ════════════════════════════ */ .ec-credit-card{ background:linear-gradient(135deg,#a8d8ec 0%,#c5e8f5 100%); border:none; border-radius:18px; padding:0; margin-bottom:1rem; box-shadow:0 4px 24px rgba(168,216,236,.4); overflow:hidden; } .ec-credit-card-inner{ padding:1.4rem 1.4rem 1.3rem; } .ec-credit-card::before{ display:none; } .ec-credit-card::after{ display:none; } .ec-credit-card-top{ display:flex;justify-content:space-between;align-items:center; margin-bottom:1.2rem; } .ec-credit-type{ font-size:.58rem;font-weight:600;color:rgba(10,50,80,.55); text-transform:uppercase;letter-spacing:.13em;margin-bottom:.3rem; } .ec-credit-label{ font-size:.95rem;font-weight:700;color:#0a2a3f;letter-spacing:-.01em; } .ec-credit-badge{ background:rgba(255,255,255,.6);color:#0B5E8A; border:none;border-radius:20px; padding:.28rem .85rem;font-size:.62rem;font-weight:700; text-transform:uppercase;letter-spacing:.06em; white-space:nowrap;backdrop-filter:blur(4px); } .ec-credit-stats{ display:grid;grid-template-columns:repeat(3,1fr); gap:0;margin-bottom:0; padding:1.1rem 0; border-top:1px solid rgba(255,255,255,.45); border-bottom:1px solid rgba(255,255,255,.45); } .ec-credit-stat{ display:flex;flex-direction:column;gap:.3rem; padding:0 .5rem; border-right:1px solid rgba(255,255,255,.45); } .ec-credit-stat:first-child{ padding-left:0; } .ec-credit-stat:last-child{ border-right:none; } .ec-cs-lbl{ font-size:.58rem;color:rgba(10,50,80,.55);font-weight:600; text-transform:uppercase;letter-spacing:.09em; } .ec-cs-val{ font-size:.95rem;font-weight:700;color:#0a2a3f; font-variant-numeric:tabular-nums; } .ec-credit-prog-wrap{ padding:1.1rem 1.4rem 1.4rem; border-top:1px solid rgba(255,255,255,.45); } .ec-credit-prog-lbl{ display:flex;justify-content:space-between; font-size:.63rem;color:rgba(10,50,80,.6);font-weight:500; margin-bottom:.5rem; } .ec-credit-prog-track{ height:4px;background:rgba(255,255,255,.4);border-radius:4px; overflow:hidden; } .ec-credit-prog-fill{ height:100%; background:linear-gradient(90deg,#0B5E8A,#0B9E8A); border-radius:4px; transition:width .8s cubic-bezier(.22,1,.36,1);width:0%; } /* ════════════════════════════ PROCHAINE ÉCHÉANCE ════════════════════════════ */ .ec-echeance-card{ background:var(--card);border-radius:var(--radius); border:1px solid var(--border);padding:.9rem 1.1rem; display:flex;justify-content:space-between;align-items:center; box-shadow:var(--shadow-sm); } .ec-echeance-left{ display:flex;align-items:center;gap:.8rem; } .ec-echeance-ico{ width:38px;height:38px;border-radius:var(--radius-sm); background:var(--brand-light); display:flex;align-items:center;justify-content:center; color:var(--brand);flex-shrink:0; } .ec-echeance-lbl{ font-size:.62rem;color:var(--muted);font-weight:600;margin-bottom:.15rem; text-transform:uppercase;letter-spacing:.07em; } .ec-echeance-date{ font-size:.86rem;font-weight:600;color:var(--text); } .ec-echeance-amt{ font-size:1rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums; } /* ════════════════════════════ TRANSACTIONS ════════════════════════════ */ /* Cartes séparées par item — comme la référence */ .ec-tx-list{ display:flex;flex-direction:column;gap:.55rem; } .ec-tx-item{ background:#fff; padding:1.1rem 1.2rem; display:flex;align-items:center;gap:1.5rem; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.07); border:none; transition:box-shadow .15s; } .ec-tx-item:hover{ box-shadow:0 4px 16px rgba(0,0,0,.11); } .ec-tx-item--clickable{ cursor:pointer; } .ec-tx-item--clickable:active{ box-shadow:0 1px 6px rgba(0,0,0,.08); } /* Date à gauche — même taille que le nom, poids normal, gris foncé */ .ec-tx-date{ font-size:.88rem;color:#555;font-weight:400; white-space:nowrap;flex-shrink:0;min-width:54px; line-height:1.3; } /* Nom + sous-label au centre */ .ec-tx-info{ flex:1;min-width:0; } .ec-tx-name{ font-size:.88rem;font-weight:500;color:#1C1C2E; margin-bottom:.18rem; word-break:break-word; } .ec-tx-type{ font-size:.62rem;font-weight:700;text-transform:uppercase; letter-spacing:.06em; } .ec-tx-type--in{ color:#B59A55; } .ec-tx-type--out{ color:#B59A55; } .ec-tx-type--conv{ color:var(--teal); } /* Montant à droite — grand, bold, GRIS comme référence */ .ec-tx-amt{ font-size:1.05rem;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;flex-shrink:0;color:#6B7280;letter-spacing:-.01em; } .ec-tx-amt--out{ color:#6B7280; } .ec-tx-amt--in{ color:#6B7280; } .ec-tx-card{ background:transparent;border-radius:0; border:none;overflow:visible;box-shadow:none; padding:0; } .ec-tx-detail{ display:flex;flex-direction:column;align-items:center;gap:1rem; } .ec-tx-d-amt{ font-size:2rem;font-weight:700;color:var(--text); letter-spacing:-.03em;font-variant-numeric:tabular-nums; } .ec-tx-d-status{ margin-bottom:.4rem; } .ec-tx-d-rows{ width:100%;background:var(--bg);border-radius:var(--radius); border:1px solid var(--border);overflow:hidden; } .ec-tx-d-row{ display:flex;justify-content:space-between;align-items:center; padding:.75rem 1rem;border-bottom:1px solid var(--border);gap:1rem; } .ec-tx-d-lbl{ font-size:.8rem;font-weight:600;color:var(--muted); text-transform:uppercase;letter-spacing:.05em;flex-shrink:0; } .ec-tx-d-val{ font-size:.88rem;font-weight:600;color:var(--text);text-align:right; } .ec-tx-d-mono{ font-family:monospace;font-size:.8rem;color:var(--muted); } .ec-tx-empty{ text-align:center;padding:2.2rem 1rem; font-size:.85rem;color:var(--muted); background:var(--card);border-radius:var(--radius); border:1px solid var(--border); } .ec-tx-header{ display:flex;justify-content:space-between;align-items:center; margin:1.6rem 0 .6rem; } .ec-tx-header .ec-section-title{ margin:0; } .ec-tx-voir-tout{ font-size:.75rem;font-weight:600;color:var(--brand); text-decoration:none; } .ec-section-title--lg{ font-size:1.25rem;font-weight:700;color:#1C1C2E; text-transform:none;letter-spacing:-.01em; } .ec-tx-voir-tout--lg{ font-size:.88rem;color:var(--teal);font-weight:600; } /* ════════════════════════════ ACCÈS RAPIDE ════════════════════════════ */ .ec-quick-grid{ display:grid;grid-template-columns:1fr 1fr;gap:.6rem; } .ec-quick-card{ background:var(--card);border-radius:var(--radius); border:1px solid var(--border); padding:.95rem 1rem;text-decoration:none;color:var(--text); display:flex;flex-direction:column;gap:.5rem; transition:border-color .18s,box-shadow .18s; box-shadow:var(--shadow-sm); } .ec-quick-card:hover{ border-color:var(--brand); box-shadow:0 2px 8px rgba(11,94,138,.1); } .ec-quick-card span{ font-size:.82rem;font-weight:600;color:var(--text-2); } /* ════════════════════════════ DOCUMENTS ════════════════════════════ */ .ec-doc-filter{ display:flex;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap; } .ec-doc-ftab{ padding:.34rem .8rem;border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--card);font-size:.74rem;font-weight:600; color:var(--muted);cursor:pointer;font-family:inherit;transition:all .18s; } .ec-doc-ftab.active{ background:var(--navy);border-color:var(--navy);color:#fff; } .ec-doc-list{ display:flex;flex-direction:column;gap:.5rem; } .ec-doc-item{ background:var(--card);border-radius:var(--radius); border:1px solid var(--border); padding:.82rem .95rem;display:flex;align-items:center;gap:.8rem; box-shadow:var(--shadow-sm);transition:border-color .15s; } .ec-doc-item:hover{ border-color:var(--border-s); } .ec-doc-item.hidden{ display:none; } .ec-doc-icon{ width:38px;height:38px;border-radius:var(--radius-sm); display:flex;align-items:center;justify-content:center; font-size:.6rem;font-weight:700;flex-shrink:0; position:relative; } .ec-doc-icon svg{ width:18px;height:18px; } .ec-doc-icon-pdf{ background:#FDECEA;color:var(--red); } .ec-doc-icon-xls{ background:var(--green-light);color:var(--green); } .ec-doc-icon-tag{ position:absolute;left:50%;bottom:-5px;transform:translateX(-50%); background:var(--red);color:#fff;font-size:.42rem;font-weight:800; letter-spacing:.03em;padding:1.5px 4px;border-radius:4px;line-height:1.3; box-shadow:0 1px 3px rgba(0,0,0,.2);white-space:nowrap; } .ec-doc-info{ flex:1;min-width:0; } .ec-doc-name{ font-size:.86rem;font-weight:600;color:var(--text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .ec-doc-meta{ font-size:.71rem;color:var(--muted);margin-top:.1rem; } .ec-doc-dl{ width:34px;height:34px;border-radius:50%; background:var(--bg);border:1px solid var(--border);cursor:pointer; display:flex;align-items:center;justify-content:center; color:var(--text-2);transition:all .18s;flex-shrink:0; } .ec-doc-dl svg{ width:15px;height:15px; } @media (hover:hover){ .ec-doc-dl:hover{ background:var(--brand);color:#fff;border-color:var(--brand); } } .ec-doc-dl:active{ transform:scale(.94); } .ec-doc-dl.is-loading{ pointer-events:none; } .ec-doc-dl.is-loading svg{ animation:ecDocDlSpin .8s linear infinite; } @keyframes ecDocDlSpin{ to{ transform:rotate(360deg); } } .ec-doc-dl-req{ width:auto;padding:0 .8rem;font-size:.72rem;font-weight:600; font-family:inherit;color:var(--brand);background:var(--brand-light); border:1px solid rgba(11,94,138,.2);border-radius:var(--radius-sm);height:32px; cursor:pointer;transition:all .18s; } @media (hover:hover){ .ec-doc-dl-req:hover{ background:var(--brand);color:#fff; } } /* ════════════════════════════ SUIVI DOSSIER ════════════════════════════ */ .ec-suivi-search{ background:var(--card);border-radius:var(--radius); border:1px solid var(--border); padding:1.1rem;margin-bottom:1.4rem;box-shadow:var(--shadow-sm); } .ec-suivi-row{ display:flex;gap:.6rem;margin-top:.5rem; } .ec-suivi-row .ec-inp{ flex:1;height:38px;padding-top:0;padding-bottom:0;box-sizing:border-box; } .ec-suivi-btn{ width:auto;height:38px;padding:0 .8rem;border-radius:var(--radius-sm);white-space:nowrap;font-size:.86rem; box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;line-height:normal; -webkit-appearance:none;appearance:none; } .ec-suivi-header{ background:var(--card);border-radius:var(--radius); border:1px solid var(--border); padding:.95rem 1.1rem; display:flex;justify-content:space-between;align-items:center; margin-bottom:1.2rem;box-shadow:var(--shadow-sm); } .ec-suivi-ref-lbl{ font-size:.62rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em; } .ec-suivi-ref-num{ font-size:.98rem;font-weight:700;color:var(--text);margin-top:.2rem;letter-spacing:.04em; } .ec-suivi-badge{ background:var(--teal-light);color:var(--teal); border:1px solid rgba(11,158,138,.2);border-radius:4px; padding:.28rem .8rem;font-size:.68rem;font-weight:700; text-transform:uppercase;letter-spacing:.05em; } .ec-suivi-timeline{ background:var(--card);border-radius:var(--radius); border:1px solid var(--border); padding:1.2rem 1rem;box-shadow:var(--shadow-sm);margin-bottom:1rem; } .ec-tl-item{ display:flex;padding-left:1.5rem;position:relative;padding-bottom:1.3rem; } .ec-tl-item:last-child{ padding-bottom:0; } .ec-tl-dot{ position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%; background:var(--teal);display:flex;align-items:center;justify-content:center;z-index:1; } .ec-tl-dot svg{ width:13px;height:13px;stroke-width:2.2; } .ec-tl-pulse{ position:absolute;inset:-4px;border-radius:50%; border:2px solid var(--teal);opacity:.3; animation:ecPulse 2s ease-in-out infinite; } @keyframes ecPulse{ 0%,100%{transform:scale(1);opacity:.3;} 50%{transform:scale(1.3);opacity:.05;} } .ec-tl-dot-pending{ background:#E2E6EA;border:1.5px solid #CDD3DA; } .ec-tl-line{ position:absolute;left:12px;top:28px; width:2px;height:calc(100% - 20px); background:var(--border);z-index:0; } .ec-tl-line-last{ display:none; } .ec-tl-content{ flex:1;padding-left:1.1rem; } .ec-tl-title{ font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:.16rem; } .ec-tl-desc{ font-size:.75rem;color:var(--muted);line-height:1.55; } .ec-tl-date{ font-size:.68rem;color:var(--brand);font-weight:600;margin-top:.25rem; } .ec-tl-item.pending .ec-tl-title{ color:var(--muted); } .ec-tl-item.pending .ec-tl-desc{ color:var(--muted-2); } .ec-tl-dot-active{ background:var(--teal) !important; } .ec-tl-item.done .ec-tl-dot{ background:var(--teal); } .ec-tl-item.active .ec-tl-dot{ background:var(--teal); } .ec-tl-item.pending .ec-tl-dot{ background:#E2E6EA; border:1.5px solid #CDD3DA; } .ec-tl-item.done .ec-tl-line{ background:var(--teal); } .ec-tl-item.active .ec-tl-line{ background:linear-gradient(to bottom,var(--teal),var(--border)); } .ec-suivi-contact{ display:flex;align-items:center;gap:.6rem; font-size:.8rem;color:var(--muted); padding:.82rem .95rem;background:var(--card); border-radius:var(--radius);border:1px solid var(--border); box-shadow:var(--shadow-sm); } .ec-suivi-contact a{ color:var(--brand);text-decoration:none;font-weight:600; } /* ════════════════════════════ PAGES PRO (Suivi de dossier, Mes documents) Refonte premium façon grande banque ════════════════════════════ */ .ec-page-pro{ max-width:680px; } /* À partir de la même largeur que l'accueil (701px), la page respecte la même logique de marges généreuses que le dashboard (.gd-section--last) au lieu de s'étirer sur toute la largeur disponible. Sélecteur combiné pour l'emporter sur la marge de décalage de la sidebar (.ec-main). */ @media (min-width: 701px) { .ec-main.ec-page-pro{ max-width:none; padding-left:8rem; padding-right:8rem; } } /* — Hero — */ .ec-pro-hero{ display:flex;align-items:center;gap:1.1rem; background:linear-gradient(135deg,#0B5E8A 0%,#12263A 100%); color:#fff;border-radius:18px; padding:1.6rem 1.5rem;margin-bottom:1.6rem; box-shadow:0 14px 34px rgba(11,94,138,.24); position:relative;overflow:hidden; } .ec-pro-hero::before{ content:'';position:absolute;right:-50px;top:-50px; width:180px;height:180px;border-radius:50%; background:rgba(255,255,255,.06);pointer-events:none; } .ec-pro-hero::after{ content:'';position:absolute;right:20px;bottom:-70px; width:140px;height:140px;border-radius:50%; background:rgba(11,158,138,.14);pointer-events:none; } .ec-pro-hero-ico{ width:54px;height:54px;border-radius:15px;flex-shrink:0; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); display:flex;align-items:center;justify-content:center; position:relative;z-index:1; } .ec-pro-hero-ico svg{ width:27px;height:27px;stroke:#fff; } .ec-pro-hero-txt{ position:relative;z-index:1;min-width:0; } .ec-pro-hero-eyebrow{ font-size:.66rem;font-weight:700;text-transform:uppercase; letter-spacing:.15em;color:rgba(255,255,255,.72);margin:0 0 .28rem; } .ec-pro-hero-title{ font-size:1.4rem;font-weight:800;margin:0; letter-spacing:-.02em;line-height:1.12;color:#fff; } .ec-pro-hero-sub{ font-size:.82rem;color:rgba(255,255,255,.82); margin:.42rem 0 0;line-height:1.5; } .ec-page-pro .ec-inp{ border-radius:11px;padding:.88rem 1rem; } .ec-page-pro .ec-suivi-btn{ border-radius:11px;padding:.88rem 1.5rem;font-weight:700; } /* — Filtres documents : segmented control — */ .ec-page-pro .ec-doc-filter{ background:#fff;border:1px solid #EAEEF2;border-radius:13px; padding:.32rem;gap:.22rem;flex-wrap:nowrap; box-shadow:0 2px 12px rgba(18,38,58,.05);margin-bottom:1.2rem; } .ec-page-pro .ec-doc-ftab{ flex:1;border:none;background:none;border-radius:9px; padding:.55rem .35rem;font-size:.75rem;font-weight:600; color:var(--muted);text-align:center;transition:all .18s; } .ec-page-pro .ec-doc-ftab.active{ background:var(--navy);color:#fff; box-shadow:0 3px 10px rgba(18,38,58,.22); } /* — Lignes documents premium — */ .ec-page-pro .ec-doc-list{ gap:.7rem; } .ec-page-pro .ec-doc-item{ border-radius:15px;border:1px solid #EAEEF2;padding:1rem 1.05rem; box-shadow:0 3px 16px rgba(18,38,58,.05);gap:1rem; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } @media (hover:hover){ .ec-page-pro .ec-doc-item:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(18,38,58,.11);border-color:#D8E0E8; } } .ec-page-pro .ec-doc-icon{ width:48px;height:48px;border-radius:14px; font-size:.62rem;letter-spacing:.03em; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .ec-page-pro .ec-doc-icon svg{ width:21px;height:21px; } .ec-page-pro .ec-doc-icon-pdf{ background:linear-gradient(135deg,#FDECEA,#FBD9D4);color:var(--red); } .ec-page-pro .ec-doc-icon-tag{ font-size:.44rem;bottom:-6px;padding:2px 5px;border-radius:5px; } .ec-page-pro .ec-doc-name{ font-size:.92rem;font-weight:700;color:var(--navy); } .ec-page-pro .ec-doc-meta{ font-size:.74rem;margin-top:.18rem; } .ec-page-pro .ec-doc-dl{ width:44px;height:44px;border-radius:50%; background:linear-gradient(135deg,var(--brand),#0a4d73); border-color:transparent;color:#fff; box-shadow:0 4px 14px rgba(11,94,138,.28); transition:transform .18s ease,box-shadow .18s ease; } .ec-page-pro .ec-doc-dl svg{ width:16px;height:16px; } @media (hover:hover){ .ec-page-pro .ec-doc-dl:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 8px 22px rgba(11,94,138,.4); color:#fff; } } .ec-page-pro .ec-doc-dl:active{ transform:translateY(0) scale(.95); } .ec-page-pro .ec-doc-dl-req{ width:auto;height:44px;border-radius:14px;font-weight:700;background:var(--brand-light);color:var(--brand);box-shadow:none; } .ec-page-pro .ec-doc-dl-req:hover{ background:var(--brand);color:#fff; } /* — Bloc contact / aide : lien discret, pas une carte — */ .ec-page-pro .ec-suivi-contact{ background:none;border:none;box-shadow:none; padding:.4rem 1.1rem 0;justify-content:center;text-align:center; } /* ════════════════════════════ MODALS ════════════════════════════ */ .ec-modal-overlay{ position:fixed;inset:0;z-index:500; background:rgba(0,0,0,.3); display:flex;align-items:flex-end;justify-content:center; opacity:0;pointer-events:none;transition:opacity .22s; overscroll-behavior:contain; /* Pas de backdrop-filter ici : le flou recomposé pendant la transition d'opacity produisait un flash gris clair sur Safari/WebKit. */ will-change:opacity; transform:translateZ(0);-webkit-transform:translateZ(0); } .ec-modal-overlay.open{ opacity:1;pointer-events:all; } .ec-modal-card{ background:#fff;border-radius:14px 14px 0 0; width:100%;max-width:540px; padding:1.4rem 1.4rem 2.8rem; transform:translateY(48px); transition:transform .3s cubic-bezier(.22,1,.36,1); box-shadow:0 -2px 20px rgba(0,0,0,.1); max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch; } .ec-modal-overlay.open .ec-modal-card{ transform:translateY(0); } .ec-modal-card--sm{ border-radius:12px;margin:auto; max-width:340px;text-align:center;padding:2.2rem 1.8rem 2rem; } .ec-modal-handle{ width:32px;height:3px;border-radius:2px;background:var(--border-s);margin:0 auto 1.3rem; } .ec-modal-header{ display:flex;justify-content:space-between;align-items:center;margin-bottom:1.3rem; } .ec-modal-title{ font-size:1rem;font-weight:700;color:var(--text);letter-spacing:-.02em; } .ec-modal-close{ background:var(--bg);border:1px solid var(--border);cursor:pointer; width:28px;height:28px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--muted);transition:all .15s; } .ec-modal-close:hover{ background:var(--border);color:var(--text); } .ec-modal-body{ display:flex;flex-direction:column;gap:0; -webkit-user-select:none;user-select:none;-webkit-touch-callout:none; } .ec-modal-body input,.ec-modal-body textarea{ -webkit-user-select:text;user-select:text;-webkit-touch-callout:default; } .ec-modal-err{ background:var(--red-light);border:1px solid rgba(192,57,43,.15); border-radius:var(--radius-sm); padding:.65rem .9rem;font-size:.82rem;color:var(--red);margin-bottom:.8rem; } .ec-amount-wrap{ position:relative; } .ec-amount-wrap .ec-inp{ padding-right:2.4rem;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums; } .ec-amount-euro{ position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-weight:600;color:var(--muted);pointer-events:none; } .ec-convert-row{ display:flex;gap:.8rem;margin-bottom:1rem; } .ec-convert-result{ background:var(--brand-light);border:1px solid rgba(11,94,138,.15); border-radius:var(--radius);padding:1.1rem;text-align:center;margin-bottom:.8rem; } .ec-conv-res-lbl{ font-size:.63rem;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem; } .ec-conv-res-amt{ font-size:1.65rem;font-weight:700;color:var(--text);margin-bottom:.3rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums; } .ec-conv-res-rate{ font-size:.74rem;color:var(--muted); } .ec-conv-note{ font-size:.69rem;color:var(--muted);text-align:center;line-height:1.5; } .ec-success-ico{ width:58px;height:58px;border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--green)); display:flex;align-items:center;justify-content:center; margin:0 auto 1rem; } .ec-success-title{ font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:.4rem;letter-spacing:-.02em; } .ec-success-msg{ font-size:.84rem;color:var(--muted);line-height:1.55; } .ec-vir-success-ico{ width:48px;height:48px;border-radius:50%; background:#DCFCE7; display:flex;align-items:center;justify-content:center; margin:0 auto 1rem; } /* ════════════════════════════ PROFIL ════════════════════════════ */ .pf-hero{ background:#fff;border-bottom:1px solid var(--border); padding:calc(56px + 1.5rem) 1.25rem 1.5rem; display:flex;align-items:center;gap:1.1rem; } .pf-avatar-wrap{ position:relative;display:inline-flex; align-items:center;justify-content:center;flex-shrink:0; } .pf-avatar{ width:64px;height:64px;border-radius:50%; background:var(--brand); color:#fff;font-size:1.5rem;font-weight:700; display:flex;align-items:center;justify-content:center; border:3px solid var(--brand-light); } .pf-edit-avatar{ position:absolute;bottom:-2px;right:-2px; width:22px;height:22px;border-radius:50%; background:var(--teal);color:#fff;border:2px solid #fff; display:flex;align-items:center;justify-content:center;cursor:pointer; } .pf-hero-info{ flex:1;min-width:0; } .pf-name{ font-size:1.15rem;font-weight:700;color:var(--navy);letter-spacing:-.02em;margin-bottom:.15rem; } .pf-email{ font-size:.8rem;color:var(--muted); } .pf-badge{ display:inline-flex;align-items:center;gap:.3rem; background:var(--teal-light);border:1px solid rgba(11,158,138,.2); border-radius:4px;padding:.22rem .6rem; font-size:.63rem;font-weight:700;color:var(--teal); text-transform:uppercase;letter-spacing:.08em;margin-top:.5rem; } .pf-main{ padding:0 1rem 2rem;max-width:640px;margin:0 auto; } .pf-section-lbl{ font-size:.63rem;font-weight:700;color:var(--muted); text-transform:uppercase;letter-spacing:.13em;padding:.9rem .05rem .45rem; } .pf-group{ background:var(--card);border-radius:var(--radius); border:1px solid var(--border);overflow:hidden; box-shadow:var(--shadow-sm);margin-bottom:.5rem; } .pf-item{ display:flex;align-items:center;gap:.85rem; padding:.88rem 1rem;cursor:pointer;transition:background .15s; border-bottom:1px solid var(--border);text-decoration:none; } .pf-item:last-child{ border-bottom:none; } .pf-item:hover{ background:#F8F9FB; } .pf-item-ico{ width:34px;height:34px;border-radius:var(--radius-sm); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .pf-item-txt{ flex:1;min-width:0; } .pf-item-label{ font-size:.86rem;font-weight:600;color:var(--text);display:block;letter-spacing:-.01em; } .pf-item-sub{ font-size:.72rem;color:var(--muted);margin-top:.08rem;display:block; } .pf-item-right{ display:flex;align-items:center;gap:.4rem;color:var(--muted-2);flex-shrink:0; } .pf-badge-sm{ font-size:.62rem;font-weight:700;padding:.16rem .48rem; border-radius:4px;background:var(--teal-light);color:var(--teal); text-transform:uppercase;letter-spacing:.06em; } .pf-logout-btn{ display:flex;align-items:center;justify-content:center;gap:.5rem; width:100%;padding:.86rem;border-radius:var(--radius-sm); background:var(--red-light);color:var(--red); border:1px solid rgba(192,57,43,.15); font-size:.9rem;font-weight:600;font-family:inherit; cursor:pointer;margin-top:1rem;transition:all .18s; } .pf-logout-btn:hover{ background:#FADDDA;border-color:rgba(192,57,43,.25); } .pf-modal-overlay{ position:fixed;inset:0;z-index:500; background:rgba(0,0,0,.3); display:flex;align-items:flex-end;justify-content:center; opacity:0;pointer-events:none;transition:opacity .22s; backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); } .pf-modal-overlay.open{ opacity:1;pointer-events:all; } .pf-modal-card{ background:#fff;border-radius:14px 14px 0 0; width:100%;max-width:540px;padding:1.4rem 1.4rem 3rem; transform:translateY(48px); transition:transform .3s cubic-bezier(.22,1,.36,1); box-shadow:0 -2px 20px rgba(0,0,0,.1); max-height:90vh;overflow-y:auto; } .pf-modal-overlay.open .pf-modal-card{ transform:translateY(0); } .pf-modal-handle{ width:32px;height:3px;border-radius:2px;background:var(--border-s);margin:0 auto 1.3rem; } .pf-modal-header{ display:flex;justify-content:space-between;align-items:center;margin-bottom:1.3rem; } .pf-modal-title{ font-size:1rem;font-weight:700;color:var(--text);letter-spacing:-.02em; } .pf-modal-close{ background:var(--bg);border:1px solid var(--border);cursor:pointer; width:28px;height:28px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--muted);transition:all .15s; } .pf-modal-close:hover{ background:var(--border);color:var(--text); } .pf-toast{ position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(8px); background:var(--navy);color:#fff;padding:.6rem 1.2rem;border-radius:var(--radius-sm); font-size:.81rem;font-weight:500;opacity:0;transition:opacity .2s,transform .2s; pointer-events:none;z-index:999;white-space:nowrap;box-shadow:var(--shadow-md); } .pf-toast.show{ opacity:1;transform:translateX(-50%) translateY(0); } /* ════════════════════════════ MOT DE PASSE ════════════════════════════ */ .ec-pwd-field{ position:relative; } .ec-pwd-field .ec-inp{ padding-right:2.8rem; } .ec-pwd-field .ec-eye-btn{ position:absolute;right:.75rem;top:50%;transform:translateY(-50%);opacity:.6;transition:opacity .15s; } .ec-pwd-field .ec-eye-btn:hover{ opacity:1; } /* ════════════════════════════ TABLETTE ≥ 768px ════════════════════════════ */ @media(min-width:768px){ /* ── Sidebar fixe ── */ .ec-bottom-nav{ left:0;top:0;bottom:0;right:auto; width:240px;height:100vh; flex-direction:column;justify-content:flex-start; padding:0 .85rem 1.5rem; border-top:none;border-right:1px solid var(--border); gap:.08rem;background:#fff;overflow-y:auto; } .ec-sidebar-brand{ display:block;padding:1.4rem .75rem 1rem;flex-shrink:0; } .ec-sidebar-logo{ font-size:1.25rem;font-weight:800;color:var(--navy); text-decoration:none;letter-spacing:-.04em;display:flex;align-items:center;gap:.5rem; } .ec-sidebar-logo img{ width:28px;height:28px; } .ec-sidebar-tagline{ font-size:.56rem;font-weight:600;color:var(--muted); text-transform:uppercase;letter-spacing:.13em;margin-top:.25rem;padding-left:2px; } .ec-sidebar-user-card{ display:flex;align-items:center;gap:.65rem; background:var(--bg);border-radius:10px;border:1px solid var(--border); padding:.65rem .8rem;margin-bottom:.5rem;flex-shrink:0; } .ec-sidebar-avatar{ width:36px;height:36px;border-radius:50%;background:var(--brand); color:#fff;display:flex;align-items:center;justify-content:center; font-size:.8rem;font-weight:700;flex-shrink:0;overflow:hidden; } .ec-sidebar-user-info{ min-width:0; } .ec-sidebar-user-name{ font-size:.8rem;font-weight:700;color:var(--navy); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .ec-sidebar-user-id{ font-size:.64rem;color:var(--muted);margin-top:.05rem; font-family:monospace;letter-spacing:.02em; } .ec-sidebar-divider{ display:block;height:1px;background:var(--border);margin:.35rem 0 .5rem;flex-shrink:0; } .ec-sidebar-logout{ display:flex;align-items:center;gap:.55rem;margin-top:auto;width:100%; padding:.65rem .85rem;border-radius:var(--radius-sm);border:none;background:none; font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer; font-family:inherit;transition:all .18s;flex-shrink:0; } .ec-sidebar-logout:hover{ background:var(--red-light);color:var(--red); } /* Nav links */ .ec-bnav-link{ flex:none;flex-direction:row;justify-content:flex-start; width:100%;padding:.8rem .9rem;border-radius:8px; font-size:.83rem;text-transform:none;letter-spacing:0;gap:.8rem; color:var(--text-2);font-weight:500; } .ec-bnav-link svg{ width:17px;height:17px;stroke-width:1.7; } .ec-bnav-link span{ font-size:.83rem; } .ec-bnav-link .ec-bnav-dot{ display:none; } .ec-bnav-link.active{ color:var(--brand);font-weight:600;background:var(--brand-light); } .ec-bnav-link.active::before{ display:none; } .ec-bnav-link.active svg{ stroke:var(--brand); } .ec-bnav-link:hover:not(.active){ background:var(--bg); } /* Bouton Virement (sidebar PC) */ .ec-bnav-center{ order:-1; width:100%;height:auto;min-width:0; flex-direction:row;justify-content:flex-start;gap:.8rem; border-radius:8px;border:none; background:var(--brand);color:#fff; padding:.8rem .9rem;margin:.3rem 0 .6rem; font-size:.83rem;font-weight:600;font-family:inherit; box-shadow:none; } .ec-bnav-center::after{ content:'Virement'; } .ec-bnav-center:hover{ opacity:.9; } /* ── Header ── */ .ec-hd-logo{ display:none; } .ec-hd-logout--mobile{ display:none; } .ec-hd-avatar{ display:none; } .ec-hd-logout{ display:none; } .ec-header{ left:240px;padding:0 2rem; background:#fff;border-bottom:1px solid var(--border); } /* ── Main ── */ .ec-dash-body{ padding-bottom:0; } .ec-main{ margin-left:240px;max-width:none; padding:calc(56px + 2rem) 2rem 3rem; } /* ── Welcome ── */ .ec-welcome{ margin-bottom:1.5rem; } .ec-welcome-sub{ font-size:.8rem;letter-spacing:.1em; } .ec-welcome-title{ font-size:1.6rem;font-weight:800; } .ec-welcome-date{ background:#fff;border:1px solid var(--border);border-radius:8px; padding:.35rem .85rem;font-size:.78rem;font-weight:500; } /* ── Dashboard grid 1 colonne ── */ .ec-dashboard-grid{ display:block; } .ec-dashboard-col-left{ min-width:0; } .ec-dashboard-col-right{ min-width:0; position:sticky;top:calc(56px + 1.5rem); display:flex;flex-direction:column;gap:0; } /* ── Cartes : même style que mobile ── */ /* ── Section titles ── */ .ec-section-title{ font-size:.63rem;margin:1.8rem 0 .8rem; } .ec-section-title--lg{ font-size:1rem;font-weight:700; } .ec-tx-voir-tout--lg{ font-size:.84rem; } /* ── Transactions ── */ .ec-tx-item{ padding:1rem 1.2rem; } .ec-tx-ico{ width:42px;height:42px;border-radius:10px; } .ec-tx-name{ font-size:.88rem; } .ec-tx-amt{ font-size:.92rem; } /* ── Échéance ── */ .ec-echeance-card{ padding:1rem 1.3rem; } .ec-echeance-amt{ font-size:1.1rem; } /* ── Quick actions (col droite) ── */ .ec-quick-actions{ display:flex; } /* Modals centrées */ .ec-modal-overlay{ align-items:center; } .ec-modal-card{ border-radius:14px;transform:scale(.97); max-width:480px;padding:2rem 2.2rem 2.4rem; } .ec-modal-overlay.open .ec-modal-card{ transform:scale(1); } .ec-modal-handle{ display:none; } .pf-modal-overlay{ align-items:center; } .pf-modal-card{ border-radius:14px;transform:scale(.97); max-width:480px;padding:2rem 2.2rem 2.4rem; } .pf-modal-overlay.open .pf-modal-card{ transform:scale(1); } .pf-modal-handle{ display:none; } .pf-toast{ bottom:2rem; } /* Profil */ .pf-main{ max-width:720px;padding:0 2rem 2.5rem; } .pf-hero{ padding:calc(56px + 1.8rem) 2rem 1.8rem; } } /* ════════════════════════════ GRAND ÉCRAN ≥ 1100px ════════════════════════════ */ @media(min-width:1100px){ .ec-main{ padding:calc(56px + 2.5rem) 3rem 3rem; } .ec-welcome-title{ font-size:1.8rem; } /* Sidebar plus large */ .ec-bottom-nav{ width:260px;padding:0 1rem 1.5rem; } .ec-header{ left:260px; } .ec-main{ margin-left:260px; } .ec-credit-prog-wrap{ padding:1.2rem 1.8rem 1.6rem; } .ec-credit-card-inner{ padding:1.8rem 1.8rem 1.4rem; } } /* ════════════════════════════ ANIMATIONS ════════════════════════════ */ @keyframes ecShake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} } /* ════════════════════════════ SÉLECTEUR DE LANGUE ════════════════════════════ */ .ec-lang-switcher{ display:flex;flex-wrap:wrap;gap:.3rem;padding:.5rem 0; } .ec-lang-btn{ background:none;border:1px solid var(--border);border-radius:var(--radius-sm); padding:.28rem .55rem;font-size:.72rem;font-weight:600;cursor:pointer; color:var(--muted);transition:background .15s,color .15s,border-color .15s; display:flex;align-items:center;gap:.25rem; } .ec-lang-btn:hover{background:var(--brand-light);border-color:var(--brand);color:var(--brand);} .ec-lang-btn.active{background:var(--brand);border-color:var(--brand);color:#fff;} /* Wrapper dans le header */ .ec-hd-lang{position:relative;} .ec-hd-lang-toggle{ background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3); border-radius:var(--radius-sm);padding:.3rem .65rem;color:#fff; font-size:.75rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.3rem; transition:background .15s; } .ec-hd-lang-toggle:hover{background:rgba(255,255,255,.25);} .ec-hd-lang-dropdown{ position:absolute;top:calc(100% + 6px);right:0; background:var(--card);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow-md);padding:.5rem;min-width:220px;z-index:500; display:none; } .ec-hd-lang-dropdown.open{display:block;} @keyframes ecFadeIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } /* ════════════════════════════ ALERTE BANNIÈRE ════════════════════════════ */ .ec-alert-banner{ background:#FFF8E1;border-bottom:2px solid #F59E0B; padding:.65rem 1.2rem;display:flex;align-items:center;gap:.65rem; font-size:.82rem;color:#92400E;position:relative;z-index:200; } .ec-alert-banner svg{flex-shrink:0;color:#F59E0B;} .ec-alert-close{ margin-left:auto;background:none;border:none;cursor:pointer; color:#92400E;opacity:.7;padding:.2rem;line-height:1;font-size:1.1rem; } .ec-alert-close:hover{opacity:1;} /* ════════════════════════════ CLOCHE NOTIFS ════════════════════════════ */ .ec-hd-bell{ position:relative;background:none;border:none;cursor:pointer; padding:.4rem;color:rgba(255,255,255,.85);display:flex;align-items:center; border-radius:var(--radius-sm);transition:background .15s; } .ec-hd-bell:hover{background:rgba(255,255,255,.12);} .ec-hd-bell-dot{ position:absolute;top:4px;right:4px;width:8px;height:8px; background:var(--coral);border-radius:50%;border:2px solid var(--brand); } /* ════════════════════════════ SANTÉ FINANCIÈRE ════════════════════════════ */ .ec-health-card{ background:var(--card);border:1px solid var(--border); border-radius:var(--radius);padding:1rem 1.2rem; display:flex;align-items:center;gap:1.2rem; box-shadow:var(--shadow-xs);margin-bottom:1rem; } .ec-health-left{flex-shrink:0;} .ec-health-lbl{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem;} .ec-health-score{font-size:1.15rem;font-weight:700;color:var(--navy);} .ec-health-score.excellent{color:var(--teal);} .ec-health-score.bon{color:#2563EB;} .ec-health-score.correct{color:#F59E0B;} .ec-health-score.surveiller{color:var(--coral);} .ec-health-right{flex:1;} .ec-health-bar-track{ height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:.4rem; } .ec-health-bar-fill{ height:100%;border-radius:3px;background:var(--teal); transition:width .6s ease;width:0%; } .ec-health-detail{font-size:.76rem;color:var(--muted);} /* ════════════════════════════ BOUTON REMBOURSEMENT ANTICIPÉ ════════════════════════════ */ .ec-remb-btn{ display:flex;align-items:center;justify-content:center;gap:.5rem; width:100%; background:rgba(255,255,255,.55);border:none; color:#0a2a3f;padding:.8rem 1rem; border-radius:10px;font-size:.8rem;font-weight:500;font-family:inherit; cursor:pointer;margin-top:1rem; transition:background .15s;backdrop-filter:blur(4px); } .ec-remb-btn svg{ stroke:#0B5E8A; } .ec-remb-btn:hover{ background:rgba(255,255,255,.75); } /* ════════════════════════════ FILTRES TRANSACTIONS ════════════════════════════ */ .ec-tx-filters{ display:flex;gap:.4rem;flex-wrap:wrap;padding:0 1.2rem .8rem; } .ec-tx-ftab{ background:none;border:1px solid var(--border);border-radius:20px; padding:.3rem .85rem;font-size:.78rem;color:var(--muted);cursor:pointer; transition:background .15s,color .15s,border-color .15s; } .ec-tx-ftab:hover{background:var(--brand-light);border-color:var(--brand);color:var(--brand);} .ec-tx-ftab.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;} /* ════════════════════════════ GRAPHIQUE DÉPENSES ════════════════════════════ */ .ec-chart-card{ background:var(--card);border:1px solid var(--border);border-radius:var(--radius); padding:1.2rem;box-shadow:var(--shadow-xs); display:flex;align-items:center;gap:1.4rem; } .ec-chart-wrap{position:relative;flex-shrink:0;} .ec-donut-center{ position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;pointer-events:none; } .ec-donut-total{font-size:.95rem;font-weight:700;color:var(--navy);} .ec-donut-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;} .ec-chart-legend{flex:1;} .ec-chart-legend-item{ display:flex;align-items:center;gap:.5rem;font-size:.78rem; color:var(--text-2);margin-bottom:.4rem; } .ec-chart-legend-dot{ width:10px;height:10px;border-radius:50%;flex-shrink:0; } .ec-chart-legend-pct{margin-left:auto;font-weight:600;color:var(--text);} /* ════════════════════════════ APERÇU MESSAGERIE (dashboard) ════════════════════════════ */ .ec-msg-preview-card{ background:var(--card);border:1px solid var(--border);border-radius:var(--radius); padding:1.1rem 1.2rem;box-shadow:var(--shadow-xs); display:flex;align-items:center;gap:1rem;cursor:pointer; text-decoration:none;transition:box-shadow .15s; } .ec-msg-preview-card:hover{box-shadow:var(--shadow-md);} .ec-msg-preview-ico{ width:40px;height:40px;border-radius:50%; background:var(--brand-light);display:flex;align-items:center;justify-content:center; color:var(--brand);flex-shrink:0; } .ec-msg-preview-txt{flex:1;} .ec-msg-preview-title{font-size:.88rem;font-weight:600;color:var(--navy);} .ec-msg-preview-sub{font-size:.75rem;color:var(--muted);margin-top:.15rem;} /* Actions rapides colonne droite desktop */ .ec-quick-actions{ display:none; /* caché sur mobile */ flex-direction:column;gap:.5rem; margin-bottom:1rem; } .ec-quick-action-btn{ display:flex;align-items:center;gap:.85rem; background:#fff;border:1px solid var(--border);border-radius:12px; padding:.8rem 1rem;cursor:pointer;font-family:inherit; font-size:.83rem;font-weight:500;color:var(--text); transition:border-color .15s,box-shadow .15s;text-align:left;width:100%; box-shadow:var(--shadow-xs); } .ec-quick-action-btn:hover{ border-color:var(--brand);box-shadow:var(--shadow-sm); } .ec-qa-ico{ width:36px;height:36px;border-radius:10px; display:flex;align-items:center;justify-content:center;flex-shrink:0; } @media(min-width:768px){ .ec-quick-actions{ display:flex; } } /* ════════════════════════════ MODAL RIB ════════════════════════════ */ .ec-rib-card{padding:.4rem 0;} .ec-rib-bank-name{ font-size:1.05rem;font-weight:700;color:var(--brand); margin-bottom:1rem;display:flex;align-items:center;gap:.5rem; } .ec-rib-row{ display:flex;justify-content:space-between;align-items:center; border-bottom:1px solid var(--border);padding:.6rem 0; } .ec-rib-row:last-of-type{border-bottom:none;} .ec-rib-lbl{font-size:.75rem;color:var(--muted);font-weight:500;} .ec-rib-val{font-size:.88rem;color:var(--text);font-weight:600;} .ec-rib-mono{font-family:'Courier New',monospace;letter-spacing:.05em;font-size:.82rem;} .ec-rib-actions{display:flex;gap:.8rem;margin-top:1.2rem;} .ec-rib-copy-btn,.ec-rib-dl-btn{ flex:1;padding:.6rem;border-radius:var(--radius-sm); font-size:.82rem;font-weight:600;cursor:pointer;border:none; display:flex;align-items:center;justify-content:center;gap:.4rem;transition:opacity .15s; } .ec-rib-copy-btn{background:var(--brand-light);color:var(--brand);} .ec-rib-copy-btn:hover{opacity:.8;} .ec-rib-dl-btn{background:var(--brand);color:#fff;} .ec-rib-dl-btn:hover{opacity:.85;} .ec-rib-copied{ text-align:center;font-size:.78rem;color:var(--teal);font-weight:600; margin-top:.5rem;min-height:1.1rem; } /* ════════════════════════════ MODAL REMBOURSEMENT ANTICIPÉ ════════════════════════════ */ .ec-remb-rows{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin:.8rem 0;} .ec-remb-row{ display:flex;justify-content:space-between;align-items:center; padding:.65rem 1rem;border-bottom:1px solid var(--border); } .ec-remb-row:last-child{border-bottom:none;} .ec-remb-row--total{background:var(--brand-light);} .ec-remb-lbl{font-size:.82rem;color:var(--text-2);} .ec-remb-val{font-size:.88rem;font-weight:700;color:var(--navy);} .ec-remb-row--total .ec-remb-lbl,.ec-remb-row--total .ec-remb-val{color:var(--brand);} .ec-remb-note{ font-size:.73rem;color:var(--muted);background:var(--bg); border:1px solid var(--border);border-radius:var(--radius-sm); padding:.6rem .8rem;line-height:1.5; } /* ════════════════════════════ MODAL ALERTES / NOTIFS ════════════════════════════ */ .ec-notif-list{display:flex;flex-direction:column;gap:.5rem;max-height:300px;overflow-y:auto;} .ec-notif-empty{ text-align:center;padding:2rem;color:var(--muted);font-size:.85rem; } .ec-notif-item{ display:flex;gap:.75rem;padding:.8rem; background:var(--bg);border-radius:var(--radius-sm);align-items:flex-start; } .ec-notif-item--warn{border-left:3px solid #F59E0B;} .ec-notif-item--info{border-left:3px solid var(--brand);} .ec-notif-dot{ width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px; } .ec-notif-dot--warn{background:#F59E0B;} .ec-notif-dot--info{background:var(--brand);} .ec-notif-txt{font-size:.82rem;color:var(--text-2);line-height:1.5;} .ec-notif-txt strong{color:var(--navy);} .ec-fade-in{ animation:ecFadeIn .3s ease both; } /* ═══════════════════════════════════════════════════════════════ RAIFFEISEN THEME — Espace Client redesign Override section — does not affect auth or other pages ════════════════════════════════════════════════════════════════ */ /* Body background */ .ec-body { background: #FAFAFA; } /* Header — minimal, transparent */ .ec-header { background: transparent !important; border-bottom: none !important; box-shadow: none !important; } .ec-hd-logout { display: none !important; } /* Pages secondaires (profil, documents, suivi de dossier…) : bouton retour masqué partout, la barre de navigation (.v2-nav) a déjà "Accueil". */ .ec-subpage .ec-header { display: none !important; } .ec-subpage .ec-main, .ec-subpage .pf-main { padding-top: 1.5rem; } .ec-hd-back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #F2F4F7; color: var(--navy); text-decoration: none; flex-shrink: 0; transition: background .15s; } .ec-hd-back:hover { background: #E5E8EC; } /* Notification bell (in welcome section) */ #ec-notif-bell { background: #fff; border: none; border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08); flex-shrink: 0; color: #333; } /* Welcome / greeting */ .ec-welcome { border-bottom: none !important; margin-bottom: .75rem !important; padding-bottom: .5rem !important; align-items: center !important; } .ec-welcome-title { font-size: 1.45rem !important; font-weight: 800 !important; color: #1A1A1A !important; margin: 0 0 .15rem !important; letter-spacing: -.02em !important; } .ec-welcome-sub { font-size: .83rem !important; color: #888 !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; } /* Solde block — transparent background, left-aligned, big number */ .ec-solde-block { background: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: .5rem 0 1rem !important; margin: 0 !important; } /* Label row: "Solde disponible" + eye icon inline */ .ec-solde-header-row { display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; } .ec-solde-lbl { font-size: .78rem !important; color: #888 !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; } .ec-solde-eye-btn { background: none; border: none; cursor: pointer; color: #888; padding: 0; display: flex; align-items: center; line-height: 1; } /* The big balance amount */ .ec-solde-amt { font-size: 2.2rem !important; font-weight: 800 !important; color: #1A1A1A !important; letter-spacing: -.035em !important; line-height: 1.1 !important; margin-bottom: .6rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* IBAN / ID row */ .ec-iban-row { justify-content: flex-start !important; gap: .45rem !important; } .ec-iban-lbl { font-size: .72rem; color: #aaa; font-weight: 500; } .ec-iban-val { font-size: .72rem; color: #666; } /* Date separator row */ .ec-tx-date-sep { display: flex; align-items: center; justify-content: space-between; padding: .6rem .1rem .3rem; font-size: .72rem; color: #888; font-weight: 500; background: transparent; border: none; } /* Group card containing all transactions of one date */ .ec-tx-group { background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: .5rem; overflow: hidden; } /* Transaction item — flat within group */ .ec-tx-item { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid #EAECEF; background: transparent; border-radius: 0 !important; box-shadow: none !important; cursor: pointer; } .ec-tx-item:last-child { border-bottom: none; } /* Avatar circle with initials */ .ec-tx-avatar { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: #E8E8E8; color: #555; font-size: .78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Transaction name */ .ec-tx-name { color: #1A56BB !important; font-weight: 700 !important; font-size: .9rem !important; line-height: 1.25 !important; } /* Sub description */ .ec-tx-sub { color: #888; font-size: .72rem; margin-top: .1rem; } /* Amount */ .ec-tx-amt { font-size: .9rem; font-weight: 700; margin-left: auto; white-space: nowrap; flex-shrink: 0; } .ec-tx-amt--out { color: #CC0000 !important; } .ec-tx-amt--in { color: #007A00 !important; } /* Empty state as white card */ .ec-tx-empty { background: #fff; border-radius: 12px; padding: 1.5rem 1rem; text-align: center; color: #888; font-size: .85rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); } /* Bottom nav — mobile Raiffeisen style (mobile uniquement, le PC garde la sidebar) */ @media (max-width: 767px) { .ec-bottom-nav { background: #fff !important; height: 70px !important; display: flex !important; align-items: center !important; justify-content: space-around !important; border-top: 1px solid #EAECEF !important; padding: 0 .5rem !important; width: 100% !important; left: 0 !important; bottom: 0 !important; position: fixed !important; z-index: 200 !important; gap: 0 !important; } .ec-bnav-link { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important; font-size: .6rem !important; color: #888 !important; text-decoration: none !important; font-weight: 500 !important; flex: 1 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; } .ec-bnav-link::before { display: none !important; } .ec-bnav-link svg { stroke: #888 !important; } .ec-bnav-link.active { color: #1A4BBC !important; } .ec-bnav-link.active svg { stroke: #1A4BBC !important; } .ec-bnav-dot { display: none !important; } /* Center FAB button masqué sur mobile */ .ec-bnav-center { display: none !important; width: 56px !important; height: 56px !important; min-width: 56px !important; border-radius: 50% !important; background: #1A4BBC !important; color: #fff !important; font-size: 1.4rem !important; font-weight: 700 !important; border: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 12px !important; box-shadow: 0 4px 12px rgba(26,75,188,.35) !important; flex-shrink: 0 !important; position: relative !important; z-index: 1 !important; } /* Hide sidebar desktop elements en mobile */ .ec-sidebar-brand, .ec-sidebar-user-card, .ec-sidebar-divider, .ec-sidebar-logout { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ N26 THEME — Dashboard complet ════════════════════════════════════════════════════════════════ */ /* Reset main pour N26 */ .ec-n26-main { padding: 0 !important; max-width: 480px !important; margin: 0 auto !important; background: #fff !important; min-height: 100vh; } /* ── Header ── */ .ec-n26-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.3rem .8rem; } .ec-n26-logo { font-size: 1.15rem; font-weight: 800; color: #111; letter-spacing: .02em; text-decoration: none; } .ec-n26-icon-btn { background: none; border: none; cursor: pointer; color: #333; padding: .3rem; display: flex; align-items: center; text-decoration: none; border-radius: 50%; transition: background .15s; } .ec-n26-icon-btn:hover { background: #f5f5f5; } /* ── Balance section ── */ .ec-n26-balance-section { text-align: center; padding: 1.8rem 1.3rem 0; position: relative; } .ec-n26-balance-eye { background: none; border: none; cursor: pointer; color: #999; padding: 0; display: inline-flex; align-items: center; margin-bottom: .4rem; } .ec-n26-balance-amt { font-size: 2.4rem; font-weight: 700; color: #111; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 1rem; } .ec-n26-quick-actions { display: none; } /* ── Onglets ── */ .ec-n26-tabs { display: flex; border-bottom: 1px solid #E5E7EB; margin: 0 -1.3rem; padding: 0 1.3rem; } .ec-n26-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; padding: .8rem .5rem; font-size: .82rem; font-weight: 500; color: #999; cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s; margin-bottom: -1px; } .ec-n26-tab--active { color: #3FBFA0; border-bottom-color: #3FBFA0; font-weight: 700; } /* ── Section transactions ── */ .ec-n26-tx-section { padding: 0; margin-top: 1.5rem; } /* Groupe de date */ .ec-n26-date-label { font-size: .85rem; font-weight: 700; color: #3FBFA0; padding: 1rem 1.3rem .45rem; } /* Ligne de transaction */ .ec-n26-tx-item { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.3rem; border-bottom: 1px solid #F3F4F6; cursor: pointer; transition: background .12s; } .ec-n26-tx-item:hover { background: #FAFAFA; } .ec-n26-tx-item:last-child { border-bottom: none; } /* Transaction remboursée : trait uniquement sur le nom et sur le montant (pas sur la date, pas une ligne pleine largeur). */ .fid-refund-strike-txt { text-decoration: line-through; opacity: .7; } /* Icône catégorie */ .ec-n26-tx-icon { width: 40px; height: 40px; min-width: 40px; display: flex; align-items: center; justify-content: center; color: #555; flex-shrink: 0; } /* Infos transaction */ .ec-n26-tx-info { flex: 1; min-width: 0; } .ec-n26-tx-name { font-size: .9rem; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ec-n26-tx-date { font-size: .75rem; color: #999; margin-top: .1rem; } /* Montant */ .ec-n26-tx-amt { font-size: .9rem; font-weight: 600; color: #111; white-space: nowrap; flex-shrink: 0; } .ec-n26-tx-amt--in { background: #E6F7F3; color: #1A9478; padding: .22rem .55rem; border-radius: 20px; font-weight: 700; } /* Message vide */ .ec-n26-tx-empty { padding: 2rem 1.3rem; color: #999; font-size: .85rem; text-align: center; } /* ── Bottom nav N26 (mobile uniquement, le PC garde la sidebar) ── */ @media (max-width: 767px) { .ec-bottom-nav { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 66px !important; background: #fff !important; border-top: 1px solid #E5E7EB !important; display: flex !important; align-items: center !important; justify-content: space-around !important; padding: 0 !important; z-index: 200 !important; padding-bottom: env(safe-area-inset-bottom, 0) !important; } .ec-bnav-link { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; flex: 1 !important; height: 100% !important; color: #999 !important; text-decoration: none !important; background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; gap: 0 !important; font-size: 0 !important; } .ec-bnav-link svg { stroke: #999 !important; } .ec-bnav-link.active svg { stroke: #111 !important; } .ec-bnav-link::before { display: none !important; } .ec-bnav-dot { display: none !important; } .ec-bnav-link span { display: none !important; } /* Barre réduite à un seul bouton Accueil (profil, suivi de dossier) : on le rend visible et lisible avec son libellé, centré, en couleur de marque */ .ec-bottom-nav--single{ justify-content:center !important; } .ec-bottom-nav--single .ec-bnav-link{ flex:0 0 auto !important;color:var(--brand) !important; font-size:.72rem !important;gap:.28rem !important;padding:0 2.5rem !important; text-transform:uppercase;letter-spacing:.03em;font-weight:700; } .ec-bottom-nav--single .ec-bnav-link svg{ stroke:var(--brand) !important; } .ec-bottom-nav--single .ec-bnav-link span{ display:block !important; } /* Bouton + central masqué sur mobile (Qonto 5-tab style sans +) */ .ec-bnav-center { display: none !important; } .ec-sidebar-brand, .ec-sidebar-user-card, .ec-sidebar-divider, .ec-sidebar-logout { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ DASHBOARD SECTIONS — Prêt en ligne ════════════════════════════════════════════════════════════════ */ .ec-ds-sections { padding: .5rem 1rem 6rem; display: flex; flex-direction: column; gap: .85rem; } .ec-ds-card { background: #fff; border: 1px solid #F0F1F3; border-radius: 16px; padding: 1.1rem 1.2rem; box-shadow: 0 1px 4px rgba(0,0,0,.04); } .ec-ds-card-title { font-size: .82rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; } .ec-ds-card-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; } .ec-ds-ref { font-size: .8rem; color: #bbb; } /* Badge statut */ .ec-ds-badge { font-size: .75rem; font-weight: 700; padding: .25rem .8rem; border-radius: 20px; background: #E6F7F3; color: #1A9478; } .ec-ds-badge--pending { background: #FFF8E1; color: #F59E0B; } .ec-ds-badge--approved { background: #E6F7F3; color: #1A9478; } .ec-ds-badge--active { background: #E6F0FF; color: #4F6EF7; } .ec-ds-badge--closed { background: #F3F4F6; color: #999; } /* Stats crédit */ .ec-ds-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .9rem; } .ec-ds-stat { text-align: center; } .ec-ds-stat-val { font-size: .95rem; font-weight: 700; color: #111; } .ec-ds-stat-lbl { font-size: .8rem; color: #999; margin-top: .15rem; } /* Barre progression */ .ec-ds-prog-wrap { display: flex; align-items: center; gap: .75rem; } .ec-ds-prog-bar { flex: 1; height: 6px; background: #F3F4F6; border-radius: 10px; overflow: hidden; } .ec-ds-prog-fill { height: 100%; background: #3FBFA0; border-radius: 10px; width: 0; transition: width .6s ease; } .ec-ds-prog-pct { font-size: .8rem; font-weight: 700; color: #3FBFA0; flex-shrink: 0; } /* Prochaine échéance */ .ec-ds-echea { display: flex; align-items: center; justify-content: space-between; } .ec-ds-echea-date { font-size: 1rem; font-weight: 600; color: #111; } .ec-ds-countdown { font-size: .78rem; color: #3FBFA0; margin-top: .2rem; } .ec-ds-echea-amt { font-size: 1.35rem; font-weight: 700; color: #111; } /* Score ring */ .ec-ds-score-wrap { position: relative; width: 100px; height: 100px; margin: 0 auto .5rem; } .ec-ds-score-ring { width: 100%; height: 100%; } .ec-ds-score-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ec-ds-score-val { font-size: 1.25rem; font-weight: 800; color: #111; line-height: 1; } .ec-ds-score-sub { font-size: .65rem; color: #999; margin-top: .15rem; } /* Historique paiements */ .ec-ds-hist-list { display: flex; flex-direction: column; gap: 0; } .ec-ds-hist-empty { font-size: .82rem; color: #bbb; text-align: center; padding: .5rem 0; } .ec-ds-hist-item { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid #F3F4F6; } .ec-ds-hist-item:last-child { border-bottom: none; } .ec-ds-hist-date { font-size: .82rem; color: #555; } .ec-ds-hist-amt { font-size: .85rem; font-weight: 600; color: #111; } .ec-ds-hist-ok { width: 18px; height: 18px; background: #E6F7F3; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* Alertes */ .ec-ds-alert-list { display: flex; flex-direction: column; gap: .5rem; } .ec-ds-alert-item { display: flex; align-items: flex-start; gap: .8rem; padding: .65rem .75rem; background: #FFF8E1; border-radius: 10px; } .ec-ds-alert-item--info { background: #E6F0FF; } .ec-ds-alert-ico { flex-shrink: 0; color: #F59E0B; } .ec-ds-alert-item--info .ec-ds-alert-ico { color: #4F6EF7; } .ec-ds-alert-txt { font-size: .82rem; color: #555; line-height: 1.4; } /* Conseiller */ .ec-ds-advisor { display: flex; align-items: center; gap: .85rem; } .ec-ds-advisor-avatar { width: 40px; height: 40px; background: #3FBFA0; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; } .ec-ds-advisor-info { flex: 1; } .ec-ds-advisor-name { font-size: .9rem; font-weight: 600; color: #111; } .ec-ds-advisor-role { font-size: .75rem; color: #999; margin-top: .1rem; } .ec-ds-advisor-btn { background: #3FBFA0; color: #fff; border: none; border-radius: 20px; padding: .4rem .9rem; font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; } /* Documents */ .ec-ds-doc-link { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; text-decoration: none; color: #111; font-size: .88rem; font-weight: 500; } .ec-ds-doc-link span { flex: 1; } /* Offres */ .ec-ds-offers { display: flex; flex-direction: column; gap: .75rem; } .ec-ds-offer { display: flex; align-items: center; gap: .85rem; padding: .65rem 0; border-bottom: 1px solid #F3F4F6; } .ec-ds-offer:last-child { border-bottom: none; } .ec-ds-offer-icon { width: 38px; height: 38px; background: #E6F7F3; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ec-ds-offer-info { flex: 1; } .ec-ds-offer-name { font-size: .88rem; font-weight: 600; color: #111; } .ec-ds-offer-desc { font-size: .75rem; color: #999; margin-top: .1rem; } .ec-ds-offer-btn { background: #F3F4F6; color: #333; border: none; border-radius: 20px; padding: .38rem .85rem; font-size: .78rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; } /* Simulateur */ .ec-ds-sim-desc { font-size: .83rem; color: #666; margin-bottom: .9rem; line-height: 1.5; } .ec-ds-sim-btn { width: 100%; background: #3FBFA0; color: #fff; border: none; border-radius: 12px; padding: .8rem 1rem; font-size: .88rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s; } .ec-ds-sim-btn:hover { background: #35a88e; } .ec-ds-hist-label { font-size: .83rem; font-weight: 500; color: #111; } .ec-ds-hist-amt--out { color: #111; } /* Historique paiements inline — style discret avant les transactions */ .ec-ds-hist-inline { padding: .75rem 1.3rem .25rem; background: transparent; } .ec-ds-hist-inline-title { font-size: .75rem; font-weight: 700; color: #C4C6CA; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .5rem; } .ec-ds-hist-inline .ec-ds-hist-item { border-bottom: 1px solid #F5F6F7; padding: .55rem 0; } .ec-ds-hist-inline .ec-ds-hist-label { font-size: .82rem; color: #999; } .ec-ds-hist-inline .ec-ds-hist-date { font-size: .72rem; color: #C4C6CA; } .ec-ds-hist-inline .ec-ds-hist-amt { font-size: .82rem; color: #AAB0B8; } .ec-ds-hist-inline .ec-ds-hist-empty { font-size: .78rem; color: #D0D3D8; text-align: center; padding: .25rem 0 .5rem; } /* Modal Détails crédit */ .ec-credit-detail-rows { display: flex; flex-direction: column; gap: 0; } .ec-credit-detail-row { display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; border-bottom: 1px solid #F3F4F6; } .ec-credit-detail-row:last-of-type { border-bottom: none; } .ec-credit-detail-lbl { font-size: .83rem; color: #888; } .ec-credit-detail-val { font-size: .88rem; font-weight: 600; color: #111; } .ec-credit-detail-val--teal { color: #3FBFA0; } .ec-credit-detail-prog-wrap { display: flex; align-items: center; gap: .75rem; padding: .9rem 0 .25rem; } .ec-credit-detail-prog-bar { flex: 1; height: 6px; background: #F3F4F6; border-radius: 10px; overflow: hidden; } .ec-credit-detail-prog-fill { height: 100%; background: #3FBFA0; border-radius: 10px; width: 0; transition: width .6s ease; } .ec-credit-detail-prog-pct { font-size: .8rem; font-weight: 700; color: #3FBFA0; flex-shrink: 0; } /* Statut du dossier */ .ec-statut-card { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.3rem; margin: 0 1rem .5rem; background: #fff; border: 1px solid #F0F1F3; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.04); } .ec-statut-lbl { font-size: .85rem; font-weight: 600; color: #333; } .ec-score-card { padding: .9rem 1.3rem; margin: 0 1rem .5rem; background: #fff; border: 1px solid #F0F1F3; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.04); } .ec-score-card-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; } .ec-score-icon { font-size: 1.1rem; line-height: 1; } .ec-score-lbl { flex: 1; font-size: .85rem; font-weight: 600; color: #333; } .ec-score-pct-val { font-size: .9rem; font-weight: 700; color: #3FBFA0; } .ec-score-bar { height: 8px; border-radius: 4px; background: #F0F1F3; overflow: hidden; } .ec-score-bar-fill { height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, #3FBFA0, #2FA98C); transition: width .6s ease; } /* Modal plein écran transactions */ .ec-modal-overlay--fullscreen { align-items: stretch !important; justify-content: stretch !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .ec-modal-overlay--fullscreen .ec-modal-card--fullscreen { max-height: 100% !important; height: 100% !important; max-width: 100% !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; transform: translateX(100%) !important; transition: transform .3s cubic-bezier(.22,1,.36,1) !important; box-shadow: none !important; padding: 0 !important; } .ec-modal-overlay--fullscreen.open .ec-modal-card--fullscreen { transform: translateX(0) !important; } .ec-all-tx-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 1.5rem; } /* Empêche le décalage gauche-droite au scroll et à l'ouverture des modals */ html { overflow-y: scroll; scrollbar-width: none; } html::-webkit-scrollbar { display: none; } /* ── Dashboard N26 sur PC : mise en page deux colonnes adaptée à l'écran ── */ @media (min-width: 768px) and (max-width: 1023px) { .ec-n26-main { margin-left: 240px !important; margin-right: auto !important; max-width: 480px !important; } } @media (min-width: 1024px) { .ec-n26-main { margin-left: 240px !important; margin-right: 0 !important; max-width: none !important; width: calc(100% - 240px); padding: 2.6rem 3.5rem 3rem !important; box-sizing: border-box; display: grid; grid-template-columns: minmax(360px, 440px) 1fr; column-gap: 3rem; row-gap: 0; align-items: start; } .ec-n26-main { max-width: 1480px !important; grid-template-areas: "header header" "balance tx" "cards tx"; } .ec-n26-main .ec-alert-banner { grid-column: 1 / -1; } .ec-n26-header { grid-area: header; padding: 0 0 1.8rem; } .ec-n26-header .ec-n26-logo { font-size: 1.3rem; font-weight: 800; } .ec-n26-balance-section { grid-area: balance; text-align: left; background: #fff; border: 1px solid #F0F1F3; border-radius: 18px; padding: 1.8rem 1.8rem 1.3rem; box-shadow: 0 1px 4px rgba(0,0,0,.04); } .ec-n26-balance-eye { margin-left: 0; } .ec-n26-balance-amt { font-size: 2.8rem; } /* Actions rapides (PC uniquement) */ .ec-n26-quick-actions { display: flex !important; gap: .8rem; margin: 1.1rem 0 1.4rem; } .ec-n26-quick-actions button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; background: #F7F8FA; border: 1px solid #F0F1F3; border-radius: 12px; padding: .8rem .4rem; font-family: inherit; font-size: .72rem; font-weight: 600; color: #333; cursor: pointer; transition: background .15s; } .ec-n26-quick-actions button:hover { background: #EFF1F3; } .ec-n26-quick-actions svg { stroke: #3FBFA0; } .ec-n26-tx-section { grid-area: tx; margin-top: 0; background: #fff; border: 1px solid #F0F1F3; border-radius: 18px; padding: .4rem 0 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.04); } .ec-n26-side-cards { grid-area: cards; margin-top: 1.2rem; display: flex; gap: 1rem; } .ec-n26-side-cards > * { flex: 1; } .ec-statut-card, .ec-score-card { margin: 0 !important; height: 100%; box-sizing: border-box; } } @media (min-width: 1440px) { .ec-n26-main { padding-left: 5rem !important; padding-right: 5rem !important; grid-template-columns: minmax(380px, 480px) 1fr; column-gap: 4rem; } } /* ══════════════════════════════════════════════════════════════════ FIDEXICO V3 — Premium Fintech Design System Inspiré Revolut Business · Qonto · Mercury · Stripe · Wise Dark sidebar · Emerald accent · Gold verified · Glassmorphism ══════════════════════════════════════════════════════════════════ */ /* ── Design Tokens ── */ :root { /* Page */ --p-bg: #EDF0F5; --p-surface: #FFFFFF; --p-border: #DDE3ED; --p-border-2: #C8D1E0; /* Typography */ --p-ink: #0B1526; --p-ink-2: #2D3A4E; --p-muted: #607088; --p-subtle: #9BAAB8; /* Emerald accent */ --p-em: #0BAA6E; --p-em-2: #089058; --p-em-3: #067045; --p-em-lt: #D1FAE5; --p-em-lt2: #ECFDF5; /* Gold accent */ --p-gold: #C9A84C; --p-gold-2: #A88930; --p-gold-lt: #FEF9E7; /* Status */ --p-red: #EF4444; --p-red-lt: #FEF2F2; --p-blue: #2563EB; --p-blue-lt: #EFF6FF; --p-amber: #D97706; --p-amber-lt: #FFFBEB; /* Sidebar (blanc) */ --sb-bg: #FFFFFF; --sb-bg-2: #F8FAFC; --sb-border: rgba(0,0,0,.07); --sb-ink: rgba(15,23,42,.5); --sb-ink-2: rgba(15,23,42,.8); --sb-ink-3: #0F172A; --sb-active: rgba(11,170,110,.1); --sb-active-bd:rgba(11,170,110,.4); --sb-hover: rgba(15,23,42,.04); /* Shadows */ --sh-xs: 0 1px 2px rgba(11,21,38,.04); --sh-sm: 0 1px 3px rgba(11,21,38,.05), 0 4px 12px rgba(11,21,38,.05); --sh-md: 0 4px 16px rgba(11,21,38,.08), 0 1px 4px rgba(11,21,38,.04); --sh-lg: 0 8px 32px rgba(11,21,38,.12), 0 2px 8px rgba(11,21,38,.06); --sh-em: 0 4px 16px rgba(11,170,110,.25); /* Layout */ --sidebar-w: 252px; --nav-h: 62px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px; } /* ── Reset ── */ html { overflow-y: scroll; scrollbar-width: none; } html::-webkit-scrollbar { display: none; } *, *::before, *::after { box-sizing: border-box; } button { cursor: pointer; font-family: inherit; } body.ec-body { background: var(--p-bg); margin: 0; padding: 0 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Entrance Animations ── */ @keyframes v3FadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes v3FadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes v3ScaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } @keyframes v3PulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(1.3); } } @keyframes v3ProgFill { from { width: 0; } } /* ══ MOBILE LAYOUT ══ */ .v2-main { min-height: 100vh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + .5rem); animation: v3FadeIn .3s ease; } /* ── Top bar ── */ .v2-topbar { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem .75rem; background: var(--p-surface); border-bottom: 1px solid var(--p-border); position: sticky; top: 0; z-index: 40; } .v2-topbar-brand { display: flex; align-items: center; } .v2-topbar-logo { display: none; /* caché sur mobile */ align-items: center; text-decoration: none; } .v2-notif-mobile { display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--p-border); border-radius: var(--r-sm); padding: .42rem .55rem; color: var(--p-ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; } .v2-logo-wordmark { font-family: 'Montserrat', 'Inter', Arial, sans-serif; font-size: 1.45rem; font-weight: 800; color: #0C2D5E; letter-spacing: -.5px; line-height: 1; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; } .v2-topbar-title { display: none; flex: 1; font-size: .88rem; font-weight: 700; color: var(--p-ink); letter-spacing: -.01em; } .v2-topbar-right { margin-left: auto; display: flex; align-items: center; gap: .45rem; } .v2-topbar-ghost { display: none; align-items: center; gap: .4rem; background: transparent; border: 1px solid var(--p-border); border-radius: var(--r-sm); padding: .42rem .8rem; font-size: .78rem; font-weight: 500; color: var(--p-ink-2); transition: background .15s, border-color .15s; } .v2-topbar-notif { display: inline-flex; padding: .42rem .55rem; position: relative; } .v2-topbar-notif { display: none; } .v2-topbar-notif .v2-notif-label { display: none; } .v2-topbar-ghost:hover { background: var(--p-bg); border-color: var(--p-border-2); } .v2-topbar-primary { display: none; align-items: center; gap: .4rem; background: var(--p-em); border: none; border-radius: var(--r-sm); padding: .44rem .9rem; font-size: .78rem; font-weight: 700; color: #fff; transition: background .15s, box-shadow .15s; box-shadow: var(--sh-em); } .v2-topbar-primary:hover { background: var(--p-em-2); box-shadow: 0 6px 20px rgba(11,170,110,.3); } .v2-topbar-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--p-em-lt2); border: 1.5px solid var(--p-border); display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--p-em); transition: border-color .15s, box-shadow .15s; } .v2-topbar-avatar svg { stroke: var(--p-em); } .v2-topbar-avatar:hover { border-color: var(--p-em); box-shadow: 0 0 0 3px var(--p-em-lt); } /* ── HERO ── */ .v2-hero { margin: 1rem; border-radius: var(--r-xl); background: var(--p-surface); border: 1px solid var(--p-border); box-shadow: var(--sh-md); padding: 1.4rem 1.25rem 0; position: relative; overflow: hidden; animation: v3ScaleIn .35s cubic-bezier(.22,1,.36,1); } /* Subtle emerald glow top-right */ .v2-hero::before { content: ''; position: absolute; top: -60px; right: -40px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(11,170,110,.07) 0%, transparent 70%); pointer-events: none; } /* Emerald left accent bar */ .v2-hero::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--p-em) 0%, var(--p-em-2) 100%); border-radius: var(--r-xl) 0 0 var(--r-xl); } .v2-hero-deco { display: none; } /* Eye button */ .v2-eye-btn { position: absolute; top: 1rem; right: 1rem; background: var(--p-bg); border: 1px solid var(--p-border); border-radius: 8px; padding: .38rem .45rem; color: var(--p-muted); display: flex; align-items: center; z-index: 2; transition: background .15s, border-color .15s; } .v2-eye-btn svg { stroke: var(--p-muted); } .v2-eye-btn:hover { background: var(--p-em-lt2); border-color: rgba(11,170,110,.2); } /* Hero body: mobile = column */ .v2-hero-body { display: flex; flex-direction: column; position: relative; z-index: 1; padding-left: .75rem; } /* Greeting above hero card */ .v2-hero-greeting-above { padding: .6rem 1rem .1rem; font-size: .88rem; font-weight: 600; color: var(--p-ink-2); letter-spacing: -.01em; } .v2-hero-greeting { display: none; } .v2-hero-label { font-size: .58rem; font-weight: 700; letter-spacing: .1em; color: var(--p-subtle); margin-bottom: .4rem; } .v2-hero-amount { font-size: 2.8rem; font-weight: 800; color: var(--p-ink); letter-spacing: -.04em; line-height: 1; margin-bottom: .75rem; font-variant-numeric: tabular-nums; } .v2-hero-tags { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .5rem; } .v2-tag-live { display: inline-flex; align-items: center; gap: .3rem; font-size: .64rem; font-weight: 600; color: var(--p-em-3); background: var(--p-em-lt2); border: 1px solid rgba(11,170,110,.2); border-radius: 20px; padding: .22rem .6rem; } .v2-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--p-em); animation: v3PulseDot 2s ease-in-out infinite; flex-shrink: 0; } .v2-tag-verified { display: inline-flex; align-items: center; gap: .3rem; font-size: .64rem; font-weight: 700; color: var(--p-gold); background: var(--p-gold-lt); border: 1px solid rgba(201,168,76,.25); border-radius: 20px; padding: .22rem .6rem; } .v2-tag-verified svg { stroke: var(--p-gold); } .v2-hero-limit { font-size: .8rem; color: var(--p-muted); margin-bottom: .9rem; } .v2-hero-limit strong { color: var(--p-ink-2); font-weight: 600; } /* Desktop actions inside hero (hidden on mobile) */ .v2-hero-right { display: none; } /* Mobile pills row — bottom of hero */ .v2-hero-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .25rem; padding: .9rem .75rem 1rem; border-top: 1px solid var(--p-border); position: relative; z-index: 1; } .v2-pill { display: flex; align-items: center; justify-content: center; gap: .4rem; background: var(--p-bg); border: 1px solid var(--p-border); border-radius: 10px; padding: .55rem .4rem; font-size: .72rem; font-weight: 600; color: var(--p-ink-2); transition: background .15s, border-color .15s; white-space: nowrap; } .v2-pill svg { stroke: var(--p-muted); } .v2-pill:hover { background: var(--p-em-lt2); border-color: rgba(11,170,110,.2); color: var(--p-em-3); } .v2-pill--primary { background: var(--p-em); border-color: transparent; color: #fff; box-shadow: var(--sh-em); } .v2-pill--primary svg { stroke: #fff; } .v2-pill--primary:hover { background: var(--p-em-2); } /* ── KPI STRIP ── */ .v2-kpi-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: .6rem 1rem; animation: v3FadeUp .4s .1s both ease; } .v2-kpi-card { background: var(--p-surface); border-radius: var(--r-md); padding: .9rem .75rem .75rem; border: 1px solid var(--p-border); box-shadow: var(--sh-sm); transition: box-shadow .2s, transform .2s; } @media (hover:hover){ .v2-kpi-card:hover { box-shadow: var(--sh-md); transform: translateY(-1px); } } .v2-kpi-lbl { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--p-muted); margin-bottom: .4rem; line-height: 1.3; } .v2-kpi-val { font-size: 1.1rem; font-weight: 800; color: var(--p-ink); letter-spacing: -.025em; line-height: 1; margin-bottom: .25rem; font-variant-numeric: tabular-nums; } .v2-kpi-val--date { font-size: .92rem; color: var(--p-em); } .v2-kpi-sub { font-size: .6rem; color: var(--p-subtle); line-height: 1.3; } /* ── CONTENT GRID ── */ .v2-grid { display: flex; flex-direction: column; gap: .65rem; padding: .25rem 1rem 1rem; animation: v3FadeUp .45s .15s both ease; } .v2-col-left, .v2-col-right { display: flex; flex-direction: column; gap: .65rem; } /* ── CARD ── */ .v2-card { background: var(--p-surface); border-radius: var(--r-md); border: 1px solid var(--p-border); box-shadow: var(--sh-sm); padding: 1.1rem 1.15rem 1rem; transition: box-shadow .2s; } .v2-card:hover { box-shadow: var(--sh-md); } .v2-card-hd { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; flex-wrap: wrap; } .v2-card-title { font-size: .88rem; font-weight: 700; color: var(--p-ink); letter-spacing: -.01em; flex: 1; } .v2-card-hd-r { display: flex; align-items: center; gap: .5rem; } .v2-link-btn { background: none; border: none; padding: 0; font-size: .74rem; font-weight: 600; color: var(--p-em); text-decoration: none; transition: color .15s; } .v2-link-btn:hover { color: var(--p-em-2); } /* ── Status badge (JS-generated) ── */ .fd-status-badge { font-size: .66rem; font-weight: 700; border-radius: 20px; padding: .2rem .6rem; display: inline-block; background: var(--p-bg); color: var(--p-muted); border: 1px solid var(--p-border); } .fd-status--active { background: var(--p-em-lt); color: var(--p-em-3); border-color: rgba(11,170,110,.25); } .fd-status--approved { background: var(--p-blue-lt); color: var(--p-blue); border-color: rgba(37,99,235,.2); } .fd-status--pending { background: var(--p-amber-lt); color: var(--p-amber); border-color: rgba(217,119,6,.2); } .fd-status--closed { background: var(--p-bg); color: var(--p-muted); border-color: var(--p-border); } /* ── Loan stats ── */ .v2-loan-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--p-border); } .v2-ls-lbl { font-size: .6rem; font-weight: 600; color: var(--p-muted); margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .05em; } .v2-ls-val { font-size: 1.05rem; font-weight: 800; color: var(--p-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .v2-ls-val--date { color: var(--p-em); font-size: .88rem; font-weight: 700; } /* ── Progress ── */ .v2-prog-wrap { margin-bottom: .85rem; } .v2-prog-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: .45rem; } .v2-prog-lbl { font-size: .68rem; font-weight: 600; color: var(--p-muted); } .v2-prog-pct { font-size: .72rem; font-weight: 800; color: var(--p-em); } .v2-prog-track { height: 7px; background: var(--p-bg); border-radius: 99px; overflow: hidden; border: 1px solid var(--p-border); } .v2-prog-fill { height: 100%; background: linear-gradient(90deg, var(--p-em), #2DD4A0); border-radius: 99px; width: 0; transition: width 1.4s cubic-bezier(.22,1,.36,1); position: relative; } .v2-prog-fill::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--p-em); opacity: 0; transition: opacity .3s .5s; } .v2-prog-fill[style*="width"]:not([style*="width: 0"]):not([style*="width:0"])::after { opacity: 1; } .v2-text-link { background: none; border: none; padding: 0; font-size: .72rem; font-weight: 500; color: var(--p-muted); display: block; text-align: left; transition: color .15s; } .v2-text-link:hover { color: var(--p-em); } /* ── Timeline ── */ .v2-tl { list-style: none; padding: 0; margin: 0; } .v2-tl-item { display: flex; gap: .9rem; padding: .65rem 0; position: relative; } .v2-tl-item:not(:last-child)::after { content: ''; position: absolute; left: 7.5px; top: 30px; bottom: -2px; width: 1px; background: var(--p-border); } .v2-tl-done:not(:last-child)::after { background: var(--p-em-lt); } .v2-tl-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--p-border); background: var(--p-surface); flex-shrink: 0; margin-top: .2rem; position: relative; z-index: 1; transition: border-color .2s, background .2s; } .v2-tl-done .v2-tl-dot { background: var(--p-em); border-color: var(--p-em); } .v2-tl-done .v2-tl-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: rgba(255,255,255,.5); } .v2-tl-active .v2-tl-dot { background: var(--p-em); border-color: var(--p-em); box-shadow: 0 0 0 4px var(--p-em-lt); } .v2-tl-body { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex: 1; } .v2-tl-step { font-size: .82rem; font-weight: 600; color: var(--p-ink); flex: 1; } .v2-tl-pending .v2-tl-step { color: var(--p-muted); } .v2-tl-tag { font-size: .63rem; font-weight: 700; border-radius: 20px; padding: .18rem .55rem; white-space: nowrap; } .v2-tl-tag--done { background: var(--p-em-lt); color: var(--p-em-3); } .v2-tl-tag--active { background: var(--p-blue-lt); color: var(--p-blue); } .v2-tl-tag--pending { background: var(--p-bg); color: var(--p-subtle); border: 1px solid var(--p-border); } /* ── Activity (JS-generated classes) ── */ .fd-activity-empty { font-size: .8rem; color: var(--p-muted); padding: 1.25rem 0; text-align: center; } .fd-tx-item { display: flex; align-items: center; gap: .85rem; padding: .75rem 0; border-bottom: 1px solid var(--p-border); transition: background .12s; } .fd-tx-item:last-of-type { border-bottom: none; } .fd-tx-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--p-bg); transition: transform .2s; } .fd-tx-item:hover .fd-tx-icon { transform: scale(1.05); } .fd-tx-icon--in { background: var(--p-em-lt2); } .fd-tx-icon--in svg { stroke: var(--p-em); } .fd-tx-icon--out { background: var(--p-red-lt); } .fd-tx-icon--out svg { stroke: var(--p-red); } .fd-tx-info { flex: 1; min-width: 0; } .fd-tx-name { font-size: .83rem; font-weight: 600; color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fd-tx-date { font-size: .8rem; color: var(--p-muted); margin-top: .1rem; } .fd-tx-right { text-align: right; flex-shrink: 0; } .fd-tx-amt { font-size: .88rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .fd-tx-amt--in { color: var(--p-em); } .fd-tx-amt--out { color: var(--p-ink); } .fd-tx-status { font-size: .6rem; font-weight: 700; color: var(--p-em-3); background: var(--p-em-lt); border-radius: 20px; padding: .1rem .45rem; display: inline-block; margin-top: .15rem; text-transform: uppercase; letter-spacing: .04em; } .fd-see-all { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; margin-top: .8rem; padding: .65rem; background: var(--p-bg); border: 1px solid var(--p-border); border-radius: var(--r-sm); font-size: .76rem; font-weight: 600; color: var(--p-em); transition: background .15s, border-color .15s; } .fd-see-all:hover { background: var(--p-em-lt2); border-color: var(--p-em-lt); } /* ── Documents ── */ .v2-docs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; } .v2-doc { display: flex; align-items: center; gap: .8rem; padding: .8rem .8rem; border-radius: var(--r-sm); border: 1px solid var(--p-border); background: var(--p-surface); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; } .v2-doc:hover { background: var(--p-em-lt2); border-color: rgba(11,170,110,.2); box-shadow: var(--sh-xs); } .v2-doc-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--p-bg); border: 1px solid var(--p-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; } .v2-doc:hover .v2-doc-ico { background: var(--p-em-lt); } .v2-doc-ico svg { stroke: var(--p-em); } .v2-doc-name { flex: 1; font-size: .8rem; font-weight: 600; color: var(--p-ink); } .v2-doc-tag { font-size: .6rem; font-weight: 800; color: var(--p-em-3); background: var(--p-em-lt); border-radius: 6px; padding: .15rem .42rem; letter-spacing: .04em; } /* ══ BOTTOM NAV (mobile) ══ */ .v2-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); background: var(--p-surface); border-top: 1px solid var(--p-border); display: flex; align-items: flex-start; justify-content: space-around; padding: 0 .5rem; z-index: 100; box-shadow: 0 -4px 20px rgba(11,21,38,.06); } /* Sidebar-only elements hidden on mobile */ .v2-sidebar-brand, .v2-sidebar-sep, .v2-sidebar-spacer, .v2-sidebar-logout, .v2-nav-desktop-only { display: none !important; } .v2-nav-link { display: flex; flex-direction: column; align-items: center; gap: .22rem; background: none; border: none; font-size: .6rem; font-weight: 500; color: var(--p-subtle); padding: .4rem .6rem; border-radius: var(--r-sm); text-decoration: none; transition: color .15s; min-width: 44px; position: relative; } .v2-nav-link svg { width: 22px; height: 22px; stroke: var(--p-subtle); transition: stroke .15s; flex-shrink: 0; } .v2-nav-link--active { color: var(--p-em); font-weight: 700; } .v2-nav-link--active svg { stroke: var(--p-em); } /* Active indicator dot */ .v2-nav-link--active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--p-em); } .v2-nav-link:hover:not(.v2-nav-link--active) { color: var(--p-ink-2); } .v2-nav-link:hover:not(.v2-nav-link--active) svg { stroke: var(--p-ink-2); } /* ══════════════════════════════════════════ DESKTOP ≥ 1024px ══════════════════════════════════════════ */ @media (min-width: 1024px) { /* ── Dark Sidebar fixed left ── */ .v2-nav { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); height: 100vh; flex-direction: column; justify-content: flex-start; align-items: stretch; border-top: none; border-right: 1px solid var(--sb-border); padding: 0; gap: 0; background: var(--sb-bg); box-shadow: 4px 0 24px rgba(0,0,0,.06); overflow-y: auto; scrollbar-width: none; } .v2-nav::-webkit-scrollbar { display: none; } /* Brand & User area */ .v2-sidebar-brand { display: block !important; padding: 1.4rem 1.25rem 1rem; border-bottom: 1px solid var(--sb-border); } .v2-sidebar-logo-row { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; } .v2-sidebar-favicon { border-radius: 8px; } .v2-sidebar-name { font-size: .95rem; font-weight: 800; color: var(--sb-ink-3); letter-spacing: -.01em; } .v2-sidebar-tagline { font-size: .65rem; color: var(--sb-ink); font-weight: 500; } .v2-sidebar-user-row { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; background: var(--sb-bg-2); border-radius: var(--r-sm); border: 1px solid var(--sb-border); } .v2-sidebar-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--p-em); color: #fff; font-size: .82rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(11,170,110,.4); } .v2-sidebar-uname { font-size: .78rem; font-weight: 600; color: var(--sb-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2-sidebar-uid { font-size: .63rem; color: var(--sb-ink); margin-top: .05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2-sidebar-sep { display: block !important; height: 1px; background: var(--sb-border); margin: .25rem 0; } /* Nav links on dark sidebar */ .v2-nav-link { flex-direction: row; justify-content: flex-start; font-size: .82rem; font-weight: 500; color: var(--sb-ink); padding: .68rem 1.25rem; border-radius: 0; gap: .8rem; min-width: unset; } .v2-nav-link svg { stroke: var(--sb-ink); } .v2-nav-link--active { background: var(--sb-active); color: var(--sb-ink-3); font-weight: 700; border-left: 2px solid var(--p-em); padding-left: calc(1.25rem - 2px); } .v2-nav-link--active svg { stroke: var(--p-em); } .v2-nav-link--active::after { display: none; } .v2-nav-link:hover:not(.v2-nav-link--active) { background: var(--sb-hover); color: var(--sb-ink-2); } .v2-nav-link:hover:not(.v2-nav-link--active) svg { stroke: var(--sb-ink-2); } .v2-nav-desktop-only { display: flex !important; } .v2-nav-desktop-only.ec-sig-hidden { display: none !important; } .v2-sidebar-spacer { display: block !important; flex: 1; min-height: 2rem; } .v2-sidebar-logout { display: flex !important; flex-direction: row; align-items: center; gap: .8rem; padding: .8rem 1.25rem 1.4rem; font-size: .8rem; font-weight: 500; color: var(--sb-ink); background: none; border: none; width: 100%; text-align: left; transition: color .15s; border-top: 1px solid var(--sb-border); } .v2-sidebar-logout svg { stroke: var(--sb-ink); transition: stroke .15s; flex-shrink: 0; } .v2-sidebar-logout:hover { color: #EF4444; } .v2-sidebar-logout:hover svg { stroke: #EF4444; } /* ── Main content: offset for sidebar ── */ .v2-main { margin-left: var(--sidebar-w); padding-bottom: 3rem; --main-px: 3rem; } /* ── Sous-pages (mes-documents, profil, suivi-dossier) : même offset ── */ .ec-main, .pf-main { margin-left: var(--sidebar-w); } .ec-subpage .ec-main, .ec-subpage .pf-main { padding-top: 2rem; } /* ── Top bar desktop ── */ .v2-topbar { padding: .85rem 2.25rem; border-bottom: 1px solid var(--p-border); background: var(--p-surface); } .v2-topbar-brand { display: flex; } .v2-topbar-title { display: none; } .v2-notif-mobile { display: none; } .gd-topbar-greeting { display: block; font-size: 1.15rem; font-weight: 800; color: #0F172A; letter-spacing: -.02em; flex: 1; } .v2-topbar-ghost, .v2-topbar-primary { display: inline-flex; } .v2-topbar-avatar { display: none; } .v2-topbar-notif { display: inline-flex; padding: .42rem .8rem; } .v2-topbar-notif .v2-notif-label { display: inline; } .v2-notif-mobile { display: none; } /* ── Greeting above hero ── */ .v2-hero-greeting-above { padding: 1.75rem 2rem .5rem; font-size: .95rem; } /* ── Hero desktop ── */ .v2-hero { margin: 0 2rem 0; padding: 2rem 2rem 1.6rem 2.75rem; } .v2-hero-body { flex-direction: row; align-items: flex-start; gap: 1.5rem; padding-left: 0; } .v2-hero-left { flex: 1; } .v2-hero-greeting { padding-right: 0; font-size: .82rem; } .v2-hero-amount { font-size: 3.4rem; margin-bottom: .85rem; } .v2-hero-limit { margin-bottom: 0; } /* Right: action buttons (vertical column) */ .v2-hero-right { display: flex; flex-direction: column; gap: .45rem; min-width: 200px; flex-shrink: 0; } .v2-ha { display: flex; align-items: center; gap: .5rem; background: var(--p-bg); border: 1px solid var(--p-border); border-radius: 10px; padding: .62rem 1rem; font-size: .78rem; font-weight: 600; color: var(--p-ink-2); text-align: left; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; } .v2-ha svg { stroke: var(--p-muted); transition: stroke .15s; } .v2-ha:hover { background: var(--p-em-lt2); border-color: rgba(11,170,110,.2); color: var(--p-em-3); } .v2-ha:hover svg { stroke: var(--p-em); } .v2-ha--primary { background: var(--p-em); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(11,170,110,.3); } .v2-ha--primary svg { stroke: #fff; } .v2-ha--primary:hover { background: var(--p-em-2); color: #fff; } .v2-ha--primary:hover svg { stroke: #fff; } /* Hide mobile pills on desktop */ .v2-hero-pills { display: none; } /* ── KPI strip ── */ .v2-kpi-strip { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; padding: 1.25rem 2rem 1.1rem; } .v2-kpi-card { padding: 1.3rem 1.4rem 1.1rem; } .v2-kpi-lbl { font-size: .62rem; margin-bottom: .5rem; } .v2-kpi-val { font-size: 1.55rem; margin-bottom: .3rem; } .v2-kpi-val--date { font-size: 1.25rem; } .v2-kpi-sub { font-size: .66rem; } /* ── Content grid ── */ .v2-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.25rem; padding: 0 2rem 2.5rem; align-items: start; } .v2-col-left, .v2-col-right { gap: 1.25rem; } .v2-card { padding: 1.5rem 1.6rem 1.25rem; } .v2-card-title { font-size: .9rem; } .v2-ls-val { font-size: 1.15rem; } .v2-loan-row { gap: .75rem; } .fd-tx-name { font-size: .85rem; } .fd-tx-amt { font-size: .9rem; } } /* ══════════════════════════════════════════ WIDE ≥ 1440px ══════════════════════════════════════════ */ @media (min-width: 1440px) { .v2-hero-greeting-above { padding: 2rem 2.5rem .5rem; font-size: 1rem; } .v2-hero { margin: 0 2.5rem 0; padding: 2.25rem 2.5rem 1.75rem 3rem; } .v2-kpi-strip { padding: 1.4rem 2.5rem 1.25rem; gap: 1.25rem; } .v2-grid { padding: 0 2.5rem 3rem; gap: 1.5rem; } .v2-topbar { padding: .9rem 2.75rem; } .v2-hero-amount { font-size: 3.8rem; } .v2-kpi-val { font-size: 1.8rem; } } /* ══════════════════════════════════════════ V4 — Premium Enhancements ══════════════════════════════════════════ */ /* ── Hero V4 subtle glow ── */ @keyframes v4GlowPulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } } .v2-hero::before { animation: v4GlowPulse 5s ease-in-out infinite; } /* ── KPI icons ── */ .v2-kpi-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: .65rem; flex-shrink: 0; } .v2-kpi-icon svg { flex-shrink: 0; } .v2-kpi-icon--em { background: var(--p-em-lt2); } .v2-kpi-icon--em svg { stroke: var(--p-em); } .v2-kpi-icon--blue { background: var(--p-blue-lt); } .v2-kpi-icon--blue svg { stroke: var(--p-blue); } .v2-kpi-icon--amber { background: var(--p-amber-lt); } .v2-kpi-icon--amber svg { stroke: var(--p-amber); } /* ── Chart section ── */ .v4-chart-section { padding: .25rem 1rem .5rem; animation: v3FadeUp .5s .2s both ease; } .v4-chart-card { background: var(--p-surface); border-radius: var(--r-md); border: 1px solid var(--p-border); box-shadow: var(--sh-sm); padding: 1.1rem 1.15rem 1rem; } .v4-chart-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; } .v4-chart-title { font-size: .88rem; font-weight: 700; color: var(--p-ink); letter-spacing: -.01em; } .v4-chart-sub { font-size: .8rem; color: var(--p-muted); margin-top: .15rem; } .v4-chart-badges { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; } .v4-chart-badge { font-size: .6rem; font-weight: 700; border-radius: 20px; padding: .18rem .55rem; display: inline-flex; align-items: center; gap: .3rem; } .v4-chart-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .v4-chart-badge--em { background: var(--p-em-lt); color: var(--p-em-3); } .v4-chart-badge--em::before { background: var(--p-em); } .v4-chart-badge--blue { background: var(--p-blue-lt); color: var(--p-blue); } .v4-chart-badge--blue::before { background: var(--p-blue); } .v4-chart-wrap { position: relative; height: 200px; } .v4-chart-wrap canvas { width: 100% !important; } /* ── Sidebar Premium badge ── */ .v2-sidebar-avatar-wrap { position: relative; flex-shrink: 0; } .v2-sidebar-avatar-status { position: absolute; bottom: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: #4ADE80; border: 1.5px solid var(--sb-bg-2); } .v2-sidebar-uname-row { display: flex; align-items: center; gap: .4rem; } .v2-sidebar-premium-badge { font-size: .5rem; font-weight: 800; letter-spacing: .06em; color: var(--p-gold); background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.3); border-radius: 4px; padding: .08rem .3rem; flex-shrink: 0; line-height: 1.4; } .v2-sidebar-verified-row { display: none; align-items: center; gap: .3rem; font-size: .62rem; font-weight: 600; color: var(--p-gold); margin-top: .5rem; padding: .3rem .8rem; background: rgba(201,168,76,.08); border-radius: var(--r-sm); border: 1px solid rgba(201,168,76,.18); } .v2-sidebar-verified-row svg { stroke: var(--p-gold); flex-shrink: 0; } /* ── Document enhancements ── */ .v2-doc { align-items: center; cursor: default; } .v2-doc-body { flex: 1; min-width: 0; } .v2-doc-meta { display: flex; align-items: center; gap: .35rem; margin-top: .2rem; flex-wrap: wrap; } .v2-doc-signed { font-size: .6rem; font-weight: 700; color: var(--p-em-3); background: var(--p-em-lt); border-radius: 5px; padding: .1rem .35rem; } .v2-doc-pages { font-size: .6rem; color: var(--p-subtle); } .v2-doc-actions { display: flex; gap: .3rem; flex-shrink: 0; } .v2-doc-btn { width: 28px; height: 28px; border-radius: 8px; background: var(--p-bg); border: 1px solid var(--p-border); display: flex; align-items: center; justify-content: center; color: var(--p-muted); transition: background .15s, border-color .15s, color .15s; } .v2-doc-btn svg { stroke: currentColor; } .v2-doc-btn:hover { background: var(--p-em-lt2); border-color: rgba(11,170,110,.2); color: var(--p-em); } .v2-doc-btn--dl:hover { background: var(--p-blue-lt); border-color: rgba(37,99,235,.2); color: var(--p-blue); } /* ── Counter animation ── */ @keyframes v4CountUp { from { opacity: .4; } to { opacity: 1; } } .v4-counting { animation: v4CountUp .1s ease; } /* ═══ Desktop V4 overrides ═══ */ @media (min-width: 1024px) { /* Chart section */ .v4-chart-section { padding: .5rem 2rem 0; } .v4-chart-card { padding: 1.5rem 1.6rem 1.25rem; } .v4-chart-wrap { height: 240px; } /* Sidebar verified row */ .v2-sidebar-verified-row { display: flex; } /* Sidebar avatar bigger */ .v2-sidebar-avatar { width: 38px; height: 38px; font-size: .9rem; } } @media (min-width: 1440px) { .v4-chart-section { padding: .5rem 2.5rem 0; } .v4-chart-wrap { height: 260px; } } /* ── SGP: Suivi et Gestion du Prêt ──────────────────────────────────────── */ .sgp-section { margin: 1.5rem var(--main-px) 2rem; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-sm); } .sgp-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem 0; } .sgp-header-left { display: flex; align-items: center; gap: .85rem; } .sgp-header-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--p-em); flex-shrink: 0; } .sgp-title { font-size: 1rem; font-weight: 700; color: var(--p-ink); letter-spacing: -.02em; margin: 0; } .sgp-subtitle { font-size: .75rem; color: var(--p-ink-3); margin: .1rem 0 0; } /* Tabs */ .sgp-tabs { display: flex; gap: .25rem; padding: 1rem 1.5rem .75rem; border-bottom: 1px solid var(--p-border); } .sgp-tab { display: flex; align-items: center; gap: .4rem; padding: .42rem .9rem; border-radius: 8px; border: 1px solid transparent; background: none; font-size: .8rem; font-weight: 500; color: var(--p-ink-3); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .sgp-tab:hover { background: var(--p-bg); color: var(--p-ink-2); } .sgp-tab--active { background: var(--p-em) !important; color: #fff !important; border-color: var(--p-em) !important; } /* Panes */ .sgp-pane { padding: 1.25rem 1.5rem 1.5rem; } .sgp-pane--hidden { display: none; } /* Pane top row */ .sgp-pane-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .sgp-legend { display: flex; align-items: center; gap: .6rem; font-size: .75rem; color: var(--p-ink-3); } .sgp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .sgp-dot--paid { background: #10b981; } .sgp-dot--current { background: #3b82f6; } .sgp-dot--future { background: var(--p-border); } .sgp-search-wrap { display: flex; align-items: center; gap: .4rem; background: var(--p-bg); border: 1px solid var(--p-border); border-radius: 8px; padding: .35rem .8rem; color: var(--p-ink-3); } .sgp-search { border: none; background: none; font-size: .8rem; color: var(--p-ink); outline: none; width: 160px; } .sgp-search::placeholder { color: var(--p-ink-3); } /* Table */ .sgp-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--p-border); } .sgp-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .sgp-table thead th { background: var(--p-bg); padding: .65rem 1rem; text-align: left; font-size: .72rem; font-weight: 600; color: var(--p-ink-3); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--p-border); white-space: nowrap; } .sgp-table tbody tr { border-bottom: 1px solid var(--p-border); transition: background .1s; } .sgp-table tbody tr:last-child { border-bottom: none; } .sgp-table tbody tr:hover { background: var(--p-bg); } .sgp-table tbody td { padding: .8rem 1rem; color: var(--p-ink-2); } .sgp-row--paid td { color: var(--p-ink-3); } .sgp-row--current { background: #eff6ff !important; } .sgp-row--current td { color: var(--p-ink); font-weight: 500; } .sgp-td-n { color: var(--p-ink-3) !important; font-size: .78rem; } .sgp-td-amt { font-weight: 600; color: var(--p-ink) !important; } .sgp-td-int { color: #f59e0b !important; } .sgp-badge { display: inline-block; padding: .18rem .55rem; border-radius: 20px; font-size: .8rem; font-weight: 600; white-space: nowrap; } .sgp-badge--paid { background: #d1fae5; color: #065f46; } .sgp-badge--current { background: #dbeafe; color: #1d4ed8; } .sgp-badge--future { background: var(--p-bg); color: var(--p-ink-3); border: 1px solid var(--p-border); } .sgp-empty { text-align: center; padding: 2rem; color: var(--p-ink-3); font-size: .85rem; } /* Totals */ .sgp-totals { display: flex; gap: 1.5rem; margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--p-bg); border-radius: 10px; border: 1px solid var(--p-border); flex-wrap: wrap; } .sgp-total-item { display: flex; flex-direction: column; gap: .2rem; } .sgp-total-lbl { font-size: .72rem; color: var(--p-ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; } .sgp-total-val { font-size: .95rem; font-weight: 700; color: var(--p-ink); } .sgp-total-val--int { color: #f59e0b; } .sgp-total-val--cost { color: var(--p-em); } /* Historique */ .sgp-hist-filters { display: flex; gap: .4rem; margin-bottom: 1rem; } .sgp-filter-btn { padding: .35rem .85rem; border-radius: 20px; border: 1px solid var(--p-border); background: none; font-size: .78rem; font-weight: 500; color: var(--p-ink-3); cursor: pointer; transition: all .15s; } .sgp-filter-btn:hover { background: var(--p-bg); color: var(--p-ink); } .sgp-filter-btn--active { background: var(--p-em); color: #fff; border-color: var(--p-em); } .sgp-hist-list { display: flex; flex-direction: column; gap: .5rem; } .sgp-hist-item { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; background: var(--p-bg); border-radius: 10px; border: 1px solid var(--p-border); transition: background .1s; } .sgp-hist-item:hover { background: #f0fdf4; } .sgp-hist-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sgp-hist-icon--in { background: #d1fae5; color: #059669; } .sgp-hist-icon--out { background: #fee2e2; color: #dc2626; } .sgp-hist-info { flex: 1; min-width: 0; } .sgp-hist-name { font-size: .85rem; font-weight: 600; color: var(--p-ink); } .sgp-hist-motif { font-size: .75rem; color: var(--p-ink-3); margin-top: .1rem; } .sgp-hist-date { font-size: .73rem; color: var(--p-ink-3); margin-top: .15rem; } .sgp-hist-right { text-align: right; flex-shrink: 0; } .sgp-hist-amt { font-size: .9rem; font-weight: 700; } .sgp-hist-amt--in { color: #059669; } .sgp-hist-amt--out { color: #dc2626; } .sgp-hist-status { font-size: .8rem; color: var(--p-ink-3); margin-top: .2rem; } /* Flexibilité */ .sgp-flex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .sgp-flex-card { padding: 1.5rem; background: var(--p-bg); border: 1px solid var(--p-border); border-radius: 12px; display: flex; flex-direction: column; gap: .75rem; transition: box-shadow .2s; } .sgp-flex-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.07); } .sgp-flex-card-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .sgp-flex-card-icon--green { background: #d1fae5; color: #059669; } .sgp-flex-card-icon--amber { background: #fef3c7; color: #d97706; } .sgp-flex-card-icon--blue { background: #dbeafe; color: #2563eb; } .sgp-flex-card-title { font-size: .92rem; font-weight: 700; color: var(--p-ink); margin: 0; } .sgp-flex-card-desc { font-size: .8rem; color: var(--p-ink-3); line-height: 1.5; margin: 0; flex: 1; } .sgp-flex-card-tags { display: flex; gap: .35rem; flex-wrap: wrap; } .sgp-tag { display: inline-block; padding: .15rem .5rem; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 20px; font-size: .8rem; color: var(--p-ink-3); } .sgp-flex-btn { padding: .6rem 1rem; border-radius: 8px; border: 1px solid var(--p-border); background: var(--p-surface); font-size: .82rem; font-weight: 600; color: var(--p-ink); cursor: pointer; transition: all .15s; text-align: center; } .sgp-flex-btn:hover { background: var(--p-bg); border-color: var(--p-em); color: var(--p-em); } .sgp-flex-btn--primary { background: var(--p-em); color: #fff; border-color: var(--p-em); } .sgp-flex-btn--primary:hover { background: var(--p-em-2, #059669); color: #fff; } /* Modal SGP */ .sgp-modal-intro { font-size: .83rem; color: var(--p-ink-3); line-height: 1.5; margin: 0 0 1.1rem; padding: .75rem 1rem; background: var(--p-bg); border-radius: 8px; border-left: 3px solid var(--p-em); } .sgp-radio-group { display: flex; gap: .75rem; flex-wrap: wrap; } .sgp-radio-opt { display: flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 1px solid var(--p-border); border-radius: 8px; cursor: pointer; font-size: .83rem; color: var(--p-ink-2); transition: all .15s; } .sgp-radio-opt:has(input:checked) { border-color: var(--p-em); background: #ecfdf5; color: var(--p-em); font-weight: 600; } .sgp-radio-opt input { display: none; } .sgp-textarea { resize: vertical; min-height: 70px; line-height: 1.5; } /* Day picker grid */ .sgp-day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; margin-top: .5rem; } .sgp-day-btn { aspect-ratio: 1; border: 1px solid var(--p-border); background: var(--p-bg); border-radius: 8px; font-size: .82rem; font-weight: 500; color: var(--p-ink-2); cursor: pointer; transition: all .15s; } .sgp-day-btn:hover { border-color: var(--p-em); color: var(--p-em); background: #ecfdf5; } .sgp-day-btn--active { background: var(--p-em); color: #fff; border-color: var(--p-em); } .sgp-selected-day-info { font-size: .82rem; color: var(--p-ink-3); margin-top: .6rem; padding: .5rem .75rem; background: var(--p-bg); border-radius: 8px; border: 1px solid var(--p-border); } .sgp-selected-day-info strong { color: var(--p-em); } /* Mobile */ @media (max-width: 700px) { .sgp-section { margin: 1rem .75rem 2rem; } .sgp-pane { padding: 1rem; } .sgp-pane-top { flex-direction: column; align-items: flex-start; } .sgp-tabs { padding: .75rem 1rem .5rem; gap: .2rem; overflow-x: auto; } .sgp-tab { white-space: nowrap; font-size: .78rem; padding: .38rem .8rem; } .sgp-flex-grid { grid-template-columns: 1fr; } .sgp-totals { gap: 1rem; } .sgp-search { width: 120px; } .sgp-day-grid { grid-template-columns: repeat(7, 1fr); gap: .3rem; } } /* ── RFD: Référence transaction style (grouped by date) ──────────────────── */ .rfd-date-hd { display: flex; align-items: center; justify-content: space-between; padding: .9rem .1rem .4rem; font-size: .78rem; font-weight: 500; color: #6b7280; } .rfd-date-lbl { letter-spacing: .01em; } .rfd-date-net { font-weight: 500; color: #6b7280; } .rfd-group-card { background: #fff; border-radius: 16px; border: none; box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05); overflow: hidden; margin-bottom: 1rem; } .rfd-item { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.1rem; } .rfd-sep { height: 1px; background: #f3f4f6; margin: 0; } .rfd-avatar { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #374151; flex-shrink: 0; letter-spacing: .02em; } .rfd-info { flex: 1; min-width: 0; } .rfd-sub { font-size: .75rem; color: var(--p-ink-3); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rfd-amt { font-size: .95rem; font-weight: 800; white-space: nowrap; flex-shrink: 0; letter-spacing: -.01em; } .rfd-amt--in { color: #15803d; } .rfd-amt--out { color: #dc2626; } .rfd-name { font-size: .9rem; font-weight: 600; color: #1a3a8f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── GD: Grey-style Dashboard ─────────────────────────────────────────────── */ .v2-main { background: #F5F7FA !important; } /* Greeting */ .gd-greeting-row { padding: 1.5rem var(--main-px) .4rem; } .gd-greeting-name { font-size: 1.3rem; font-weight: 700; color: #0F172A; letter-spacing: -.02em; } .gd-greeting-sub { font-size: .78rem; color: #9CA3AF; margin-top: .2rem; } /* Balance + 3 buttons */ .gd-balance-section { padding: 1.25rem var(--main-px) 1.1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .gd-balance-left {} .gd-balance-label { font-size: .8rem; font-weight: 700; color: #9CA3AF; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; } .gd-eye-btn { background: none; border: none; color: #9CA3AF; cursor: pointer; padding: 0; display: flex; align-items: center; transition: color .15s; } .gd-eye-btn:hover { color: #374151; } .gd-balance-amount { font-size: 2rem; font-weight: 800; color: #0F172A; letter-spacing: -.04em; line-height: 1.05; } .gd-action-btns { display: flex; align-items: center; gap: 1.75rem; flex-shrink: 0; } .gd-action-btn { display: flex; flex-direction: column; align-items: center; gap: .45rem; background: none; border: none; cursor: pointer; font-size: .78rem; font-weight: 500; color: #374151; font-family: inherit; } .gd-action-circle { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid #E5E7EB; box-shadow: 0 1px 5px rgba(0,0,0,.07); display: flex; align-items: center; justify-content: center; color: #1F2937; transition: background .15s, transform .12s; } .gd-action-btn:hover .gd-action-circle { background: #F3F4F6; transform: scale(1.07); } /* Sections */ .gd-section { padding: 0 var(--main-px) 1.5rem; } .gd-section--last { padding-bottom: 2.5rem; } .gd-section-title { font-size: .68rem; font-weight: 700; color: #9CA3AF; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .9rem; } .gd-section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; } .gd-section-hd .gd-section-title { margin: 0; } .gd-topbar-greeting { display: none; } .gd-see-all-btn, .gd-see-all-link { font-size: .8rem; font-weight: 600; color: #3B5BDB; background: none; border: none; cursor: pointer; font-family: inherit; } /* Mes comptes cards */ .gd-balances-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; } .gd-bc { background: #fff; border-radius: 16px; padding: 1.1rem 1rem; border: 1px solid #F1F3F5; box-shadow: 0 1px 6px rgba(0,0,0,.045); display: flex; align-items: flex-start; gap: .8rem; transition: box-shadow .15s; } .gd-bc:hover { box-shadow: 0 3px 12px rgba(0,0,0,.08); } .gd-bc-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gd-bc-icon--eur { background: #EFF6FF; color: #2563EB; } .gd-bc-icon--loan { background: #ECFDF5; color: #059669; } .gd-bc-icon--cal { background: #FEF3C7; color: #D97706; } .gd-bc-body { flex: 1; min-width: 0; } .gd-bc-name { font-size: .75rem; color: #6B7280; font-weight: 500; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-bottom: .3rem; } .gd-bc-amount { font-size: 1.05rem; font-weight: 800; color: #0F172A; letter-spacing: -.02em; } .gd-bc-amount--date { font-size: .9rem; font-weight: 700; color: #374151; } .gd-bc-sub { font-size: .8rem; color: #9CA3AF; margin-top: .3rem; display: flex; align-items: center; gap: .4rem; } .gd-bc-sub span { color: #374151; font-weight: 600; } .gd-bc-prog-track { flex: 1; height: 4px; background: #E5E7EB; border-radius: 2px; overflow: hidden; } .gd-bc-prog-fill { height: 100%; background: var(--p-em); border-radius: 2px; width: 0%; transition: width .6s ease; } .gd-bc-prog-pct { font-weight: 700; color: #374151; font-size: .8rem; white-space: nowrap; } /* Quick actions */ .gd-qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; } .gd-qa-card { background: #fff; border-radius: 16px; padding: 1.15rem 1rem; border: 1px solid #F1F3F5; box-shadow: 0 1px 6px rgba(0,0,0,.045); cursor: pointer; transition: box-shadow .15s, transform .12s; display: flex; flex-direction: column; gap: .55rem; } @media (hover:hover){ .gd-qa-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.09); transform: translateY(-1px); } } .gd-qa-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; } .gd-qa-icon--green { background: #ECFDF5; color: #059669; } .gd-qa-icon--blue { background: #EFF6FF; color: #2563EB; } .gd-qa-icon--amber { background: #FEF3C7; color: #D97706; } .gd-qa-icon--purple { background: #F5F3FF; color: #7C3AED; } .gd-qa-title { font-size: .85rem; font-weight: 700; color: #1F2937; } .gd-qa-desc { font-size: .73rem; color: #6B7280; line-height: 1.45; } /* ── Carte Prêt Premium (v2) ── */ .gd-loan-card { background: #fff; border-radius: 18px; padding: 1.1rem 1.2rem 1rem; cursor: pointer; box-shadow: 0 1px 8px rgba(0,0,0,.06); transition: transform .16s, box-shadow .16s; color: #1F2937; position: relative; overflow: hidden; border-top: 3px solid #0B5E8A; } .gd-loan-card:active { transform: scale(.985); } .gd-lc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; } .gd-lc-label { font-size: .65rem; font-weight: 700; letter-spacing: .12em; color: #9CA3AF; } .gd-lc-badge { font-size: .68rem; font-weight: 700; padding: .22rem .65rem; border-radius: 999px; letter-spacing: .03em; } .gd-loan-badge--pending { background: #FEF3C7; color: #B45309; } .gd-loan-badge--approved { background: #EDE9FE; color: #6D28D9; } .gd-loan-badge--active { background: #D1FAE5; color: #065F46; } .gd-loan-badge--closed { background: #F3F4F6; color: #6B7280; } .gd-lc-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; } .gd-lc-amount { font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; line-height: 1; } .gd-lc-prog-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; min-width: 90px; } .gd-lc-prog-pct { font-size: .72rem; font-weight: 700; color: #0B5E8A; letter-spacing: .03em; } .gd-lc-prog-track { width: 90px; height: 5px; background: #E5E7EB; border-radius: 999px; overflow: hidden; } .gd-lc-prog-fill { height: 100%; background: linear-gradient(90deg, #34D399, #10B981); border-radius: 999px; width: 0%; transition: width 1s cubic-bezier(.4,0,.2,1); } .gd-lc-stats { display: flex; align-items: stretch; gap: 0; background: #F8FAFC; border-radius: 10px; padding: .6rem 0; margin-bottom: .75rem; } .gd-lc-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .18rem; padding: 0 .3rem; } .gd-lc-divider { width: 1px; background: #E5E7EB; margin: .1rem 0; } .gd-lc-stat-lbl { font-size: .58rem; font-weight: 600; color: #9CA3AF; text-transform: uppercase; letter-spacing: .07em; text-align: center; } .gd-lc-stat-val { font-size: .8rem; font-weight: 700; color: #1F2937; text-align: center; } .gd-lc-stat-val--green { color: #059669; } .gd-lc-footer { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: #9CA3AF; padding-top: .6rem; border-top: 1px solid #E5E7EB; } /* ── Bannière Suivi de dossier (statut courant uniquement) ── */ .gd-suivi-banner { background: #fff; border-radius: 18px; padding: 1.25rem 1.3rem 1.2rem; box-shadow: 0 1px 8px rgba(0,0,0,.06); border: 1px solid #F1F3F5; } .gd-suivi-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .85rem; } .gd-suivi-icon-wrap { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #EFF6FF; color: #2563EB; } .gd-suivi-icon-wrap--done { background: #ECFDF5; color: #059669; } .gd-suivi-icon-wrap--refused { background: #FEF2F2; color: #DC2626; } .gd-suivi-icon-wrap--blocked { background: #F3F4F6; color: #6B7280; } .gd-suivi-icon-spin { animation: gd-suivi-spin 1.6s linear infinite; transform-origin: center; } @keyframes gd-suivi-spin { to { transform: rotate(360deg); } } .gd-suivi-eyebrow { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9CA3AF; margin-bottom: .2rem; } .gd-suivi-title { font-size: .98rem; font-weight: 800; color: #1F2937; line-height: 1.25; } .gd-suivi-desc { font-size: .82rem; color: #6B7280; line-height: 1.55; margin-bottom: 1.05rem; } .gd-suivi-progress-track { width: 100%; height: 6px; background: #E5E7EB; border-radius: 999px; overflow: hidden; } .gd-suivi-progress-fill { height: 100%; background: linear-gradient(90deg, #34D399, #10B981); border-radius: 999px; width: 0%; transition: width 1s cubic-bezier(.4,0,.2,1); } .gd-suivi-step-lbl { font-size: .7rem; font-weight: 700; color: #0B5E8A; letter-spacing: .02em; text-align: right; margin-top: .4rem; } .gd-suivi-more-link { display: flex; align-items: center; justify-content: center; gap: .3rem; margin-top: 1.1rem; padding-top: .95rem; border-top: 1px solid #F1F3F5; font-size: .82rem; font-weight: 700; color: #0B5E8A; text-decoration: none; } @media(hover:hover){ .gd-suivi-more-link:hover { color: #084a6e; } } .gd-suivi-more-link svg { flex-shrink: 0; } /* ── Guide dossier : FAQ accordéon (grande carte contenant les petites cartes blanches) ── */ .gd-faq-section { background: #fff; border-radius: 28px; box-shadow: 0 2px 14px rgba(15,23,42,.07); padding: 1.8rem 1.1rem 1.5rem; margin: 1rem 0 1.6rem; } .gd-faq-page-title { font-family: 'Poppins', sans-serif; font-size: 2.1rem; font-weight: 700; color: #1F2937; line-height: 1.3; text-align: center; margin: 0 0 1.5rem; } .gd-faq-list { display: flex; flex-direction: column; } .gd-faq-item { background: #F3F4F6; border-radius: 16px; margin-bottom: .8rem; overflow: hidden; } .gd-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.2rem; background: none; border: none; cursor: pointer; font-family: inherit; font-size: .95rem; font-weight: 700; color: #1F2937; text-align: left; -webkit-tap-highlight-color: transparent; outline: none; } .gd-faq-chevron { flex-shrink: 0; color: #0B5E8A; transition: transform .25s ease; } .gd-faq-item.open .gd-faq-chevron { transform: rotate(180deg); } .gd-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .gd-faq-item.open .gd-faq-a { max-height: 600px; } .gd-faq-a p { margin: 0 1.2rem 1.1rem; font-size: .87rem; color: #6B7280; line-height: 1.6; } /* Transactions table */ .gd-tx-wrap { background: #fff; border-radius: 16px; border: 1px solid #F1F3F5; box-shadow: 0 1px 6px rgba(0,0,0,.045); overflow: hidden; } .gd-tx-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .gd-tx-table thead th { padding: .85rem 1.1rem; text-align: left; font-size: .68rem; font-weight: 700; color: #9CA3AF; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid #F3F4F6; background: #fff; white-space: nowrap; } .gd-tx-table tbody tr { border-bottom: 1px solid #F9FAFB; transition: background .1s; cursor: pointer; } .gd-tx-table tbody tr:last-child { border-bottom: none; } .gd-tx-table tbody tr:hover { background: #F9FAFB; } .gd-tx-table tbody td { padding: .9rem 1.1rem; vertical-align: middle; } .gd-tx-empty { text-align: center; padding: 2.5rem; color: #9CA3AF; font-size: .83rem; } .gd-tx-date-val { font-size: .8rem; color: #374151; font-weight: 500; } .gd-tx-amt-val { font-size: .88rem; font-weight: 700; white-space: nowrap; } .gd-tx-amt-val--in { color: #059669; } .gd-tx-amt-val--out { color: #1F2937; } .gd-tx-type-val { font-size: .78rem; color: #6B7280; } .gd-tx-desc-cell { display: flex; align-items: flex-start; gap: .65rem; } .gd-tx-avatar { width: 34px; height: 34px; border-radius: 50%; background: #E5E7EB; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; color: #374151; flex-shrink: 0; letter-spacing: .02em; } .gd-tx-avatar--img, .atx-avatar--img { background: transparent !important; border-radius: 8px !important; overflow: hidden; padding: 0 !important; } .gd-tx-desc-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .gd-tx-desc-text { font-size: .82rem; font-weight: 600; color: #1F2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; } .gd-tx-desc-sub { font-size: .8rem; color: #9CA3AF; white-space: nowrap; } .gd-tx-status-val { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: #374151; white-space: nowrap; } .gd-tx-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; flex-shrink: 0; } .gd-tx-chevron-val { color: #D1D5DB; font-size: 1rem; } /* Mobile */ @media (max-width: 700px) { .gd-action-btns { display: none; } .gd-main-card { background: #fff; border-radius: 18px; box-shadow: 0 1px 8px rgba(0,0,0,.06); margin: .75rem .85rem 1rem; overflow: hidden; } .gd-greeting-row { padding: 1rem .85rem .3rem; } .gd-greeting-name { font-size: 1.1rem; } .gd-balance-section { flex-direction: column; align-items: center; text-align: center; padding: 1rem .85rem 1rem; } .gd-balance-label { justify-content: center; } .gd-balance-amount { font-size: 2rem; } .gd-action-btns { gap: 1.8rem; } .gd-action-circle { width: 46px; height: 46px; } .gd-section { padding: 0 .85rem 1.1rem; } .gd-balances-wrap { grid-template-columns: repeat(2, 1fr); gap: .65rem; } .gd-qa-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; } /* Responsive table → list on mobile */ .gd-tx-table thead { display: none; } .gd-tx-table, .gd-tx-table tbody { display: block; } .gd-tx-table tbody tr { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid #F3F4F6; } .gd-tx-table tbody tr:hover { background: transparent; } .gd-tx-table tbody td { display: none; padding: 0; } /* Show only description (col 4) and amount (col 2) — desc left, amount right */ .gd-tx-table td:nth-child(4) { display: flex; flex: 1; min-width: 0; order: 1; } .gd-tx-table td:nth-child(2) { display: block; text-align: right; order: 2; font-size: .88rem; font-weight: 700; } /* Always show empty-state message */ .gd-tx-table td.gd-tx-empty { display: block; width: 100%; } .gd-tx-desc-text { max-width: none; } .gd-tx-desc-cell { max-width: none; } } /* ── GD: Hero fond bleu clair — scopé UNIQUEMENT à la zone du haut (topbar, salutation, carte solde), sans toucher au reste (crédit, nav, chat, transactions, modales). Mesures reprises et validées lors d'une précédente itération : couleur/hauteur/courbe confirmées correctes par comparaison pixel par pixel avec la référence. ── */ @media (max-width: 700px) { .gd-hero { position: relative; z-index: 2; background: #CFEEF6; padding: calc(20px + env(safe-area-inset-top)) 16px 20px; overflow: visible; } /* Le bleu clair descend en bosse au centre et remonte sur les bords — mesuré précisément sur la référence (le bleu se termine ~18px plus bas au centre que sur les bords). */ .gd-hero::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 100%; height: 18px; background: #CFEEF6; border-radius: 0 0 50% 50% / 0 0 100% 100%; pointer-events: none; } .gd-hero .v2-topbar, .gd-hero .gd-greeting-row, .gd-hero .gd-main-card { position: relative; z-index: 1; } .gd-hero .v2-topbar { background: transparent; border-bottom: none; box-shadow: none; padding: 0; position: static; } /* Icône profil : sans contour/fond. Icône messages : remplace la notification supprimée — bulle cerclée (fond blanc + contour fin), avec pastille de badge quand un message n'est pas lu. */ .gd-hero .v2-topbar-brand { gap: 14px; } .gd-hero .v2-topbar-avatar { width: 44px; height: 44px; border-radius: 14px; background: transparent; border: none; color: #0B1B35; } .gd-hero .v2-topbar-avatar svg { width: 22px; height: 22px; stroke: #0B1B35; } .gd-hero .v2-notif-mobile { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #E4E9F0; color: #0B1B35; position: relative; box-shadow: 0 2px 6px rgba(16,34,53,.06); } .gd-hero .v2-notif-mobile svg { width: 20px; height: 20px; stroke: #0B1B35; } .gd-hero .v2-notif-message-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 3px; background: #ef4444; border-radius: 999px; border: 2px solid #CFEEF6; box-shadow: 0 1px 4px rgba(239,68,68,.4); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 800; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; } .gd-hero .gd-greeting-row { padding: 0; } .gd-hero .gd-greeting-name { font-size: 19px; line-height: 23px; font-weight: 750; letter-spacing: -0.3px; margin: 26px 0 20px; color: #0B1B35; } /* La carte solde est plus étroite que la topbar/salutation (marge ~25px contre ~16px), mesuré précisément sur la référence : le hero apporte déjà 16px via son padding, +9px de marge propre à la carte. */ .gd-hero .gd-main-card { width: auto; background: #fff; border-radius: 24px; box-shadow: 0 12px 30px rgba(16,34,53,.12); margin: 0 9px; overflow: hidden; } .gd-hero .gd-balance-section { flex-direction: column; align-items: center; text-align: center; width: 100%; padding: 22px 20px 24px; box-sizing: border-box; } /* Tailles de police ci-dessous mesurées précisément sur la référence (hauteur de capitale/chiffre convertie en px CSS via le facteur d'échelle de l'image de référence, ~2.1846). */ .gd-hero .gd-balance-label { justify-content: center; font-size: 12px; line-height: 16px; font-weight: 750; letter-spacing: 1.5px; } .gd-hero .gd-eye-btn svg { width: 16px; height: 16px; } .gd-hero .gd-balance-amount { font-size: 29px; line-height: 34px; font-weight: 800; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #0B1B35; margin-top: 12px; } /* Zone blanche : espace sous la courbe avant les transactions. Fond explicitement blanc — sans cette règle, la section n'a aucun fond propre et laisse voir le fond de page par défaut (--p-bg: #EDF0F5, un gris-bleu, pas du blanc), ce qui cassait le contraste avec la zone grise du crédit juste en dessous. */ .gd-section.gd-section--last { background: #fff; padding-top: 40px; } /* Couleurs de texte mesurées sur la référence : la plupart des libellés "gris" y sont en réalité proches du noir (#9CA3AF hérité de la base est bien trop clair/délavé comparé à la référence). */ .gd-section.gd-section--last .gd-section-title { font-size: 12px; color: #111827; } .gd-tx-empty { font-size: 14px; color: #111827; } /* La carte transactions flotte sur un fond BLANC (comme elle) : l'ombre très subtile héritée de la base (rgba(0,0,0,.045)) la rendait quasiment invisible, sans aucun contour visible. Ombre nettement plus marquée, mobile uniquement, pour qu'elle se détache clairement comme sur la référence. */ .gd-tx-wrap { border: none; box-shadow: 0 8px 20px rgba(16,34,53,.10); } /* Carte crédit : retire l'accent bleu marine en haut (absent de la référence), mobile uniquement — la version PC garde son accent actuel. */ .gd-loan-card { border-top: none; padding: .9rem 1.2rem .85rem; box-shadow: 0 12px 30px rgba(16,34,53,.11); } /* Fond de la zone crédit : gris légèrement plus marqué, mesuré sur la référence (#EBEBEB), pour un meilleur contraste avec les cartes blanches. Le padding-bottom prolonge ce fond gris jusqu'à la nav fixe en bas (mesuré sur la référence : la zone grise fait ~256px de haut, contre ~170px avant ce correctif — elle s'arrêtait bien avant la nav, laissant un bandeau de mauvaise couleur visible juste au-dessus). .v2-main a son propre fond (#F5F7FA !important, règle globale) qui reste visible dans le padding-bottom réservé par .v2-main pour la nav — sa hauteur réelle varie selon les données (nombre de transactions, hauteur d'écran), donc le padding-bottom fixe ci-dessus ne suffit pas toujours à couvrir tout cet espace. On aligne directement le fond de .v2-main sur cette page pour qu'aucun bandeau de mauvaise couleur n'apparaisse entre la zone grise et la nav flottante, quelle que soit la hauteur du contenu. */ body.ec-dash-body:not(.ec-subpage):not(.msgc-locked) .v2-main { background: #EBEBEB !important; } #gd-loan-card-section { background: #EBEBEB; padding-top: 18px; padding-bottom: 200px; box-sizing: border-box; } .gd-lc-label { font-size: 12px; color: #111827; } .gd-lc-top { margin-bottom: .6rem; } .gd-lc-stats { padding: .5rem 0; margin-bottom: .6rem; } .gd-lc-stat { min-width: 0; padding: 0 .2rem; } .gd-lc-stat-lbl { color: #4B5563; } .gd-lc-stat-val { font-size: 13.5px; white-space: nowrap; } .gd-lc-footer { color: #111827; } /* ── GD: Nav du bas — pilule flottante entièrement arrondie, avec un "chip" gris derrière l'onglet actif (icône + libellé en bleu), comme la référence fournie. Scopé STRICTEMENT à la page d'accueil via body.ec-dash-body sans .ec-subpage/.msgc-locked (marqueur exclusif à espace-client.html) : .v2-nav est un composant PARTAGÉ avec mes-documents.html, profil.html, messagerie.html, guide-dossier.html, aide.html — ces pages ne doivent JAMAIS être affectées par ce restylage (régression déjà rencontrée et corrigée une fois, à ne pas reproduire). Le bouton de chat (#ec-chat-fab) n'est volontairement pas touché ici. */ body.ec-dash-body:not(.ec-subpage):not(.msgc-locked) .v2-nav { width: calc(100% - 32px); max-width: 398px; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); right: auto; border-top: none; border-radius: 28px; box-shadow: 0 10px 28px rgba(16,34,53,.16); height: 74px; align-items: center; padding: 8px; } body.ec-dash-body:not(.ec-subpage):not(.msgc-locked) .v2-nav-link { border-radius: 18px; padding: .5rem .7rem; } /* Onglet actif (Startseite) : aucune distinction visuelle demandée — même couleur et même absence de fond que les onglets inactifs. */ body.ec-dash-body:not(.ec-subpage):not(.msgc-locked) .v2-nav-link--active { background: transparent; color: var(--p-subtle); font-weight: 500; } body.ec-dash-body:not(.ec-subpage):not(.msgc-locked) .v2-nav-link--active svg { stroke: var(--p-subtle); } body.ec-dash-body:not(.ec-subpage):not(.msgc-locked) .v2-nav-link--active::after { display: none; } /* Bulle de chat flottante : masquée sur mobile, redevenue redondante depuis l'ajout de l'icône messages dans le bandeau du haut (même destination). #ec-chat-fab n'existe que sur cette page (pas partagé avec mes-documents.html/profil.html/etc.), donc aucun risque de fuite. */ #ec-chat-fab { display: none; } } @media (min-width: 701px) and (max-width: 1024px) { .gd-balances-wrap { grid-template-columns: repeat(3, 1fr); } .gd-qa-grid { grid-template-columns: repeat(2, 1fr); } .v2-main { --main-px: 2rem; } } /* ── ALL-TX PAGE (Grey style) ── */ .atx-page { display: flex; flex-direction: column; background: #F5F7FA; padding: 0 !important; border-radius: 0 !important; } .atx-header { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1rem .6rem; background: #F5F7FA; position: sticky; top: 0; z-index: 2; } .atx-back-btn { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid #E5E7EB; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,.07); } .atx-title { font-size: 1.25rem; font-weight: 700; color: #0F172A; } .atx-search-row { display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem .75rem; background: #F5F7FA; } .atx-search-wrap { flex: 1; display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: .6rem .85rem; } .atx-search-icon { color: #9CA3AF; flex-shrink: 0; } .atx-search-input { border: none; outline: none; background: transparent; font-size: .88rem; color: #1F2937; width: 100%; } .atx-search-input::placeholder { color: #9CA3AF; } .atx-filter-btn { width: 42px; height: 42px; border-radius: 10px; background: #fff; border: 1px solid #E5E7EB; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: #374151; } .atx-label { font-size: .75rem; font-weight: 600; color: #6B7280; padding: 0 1rem .5rem; text-transform: none; } .atx-list { flex: 1; overflow-y: auto; background: #fff; margin: 0 1rem 1.5rem; border-radius: 16px; box-shadow: 0 1px 6px rgba(0,0,0,.045); } .atx-row { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-bottom: 1px solid #F3F4F6; cursor: pointer; } .atx-row:last-child { border-bottom: none; } .atx-row:active { background: #F9FAFB; } .atx-avatar { width: 40px; height: 40px; border-radius: 50%; background: #E5E7EB; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #374151; flex-shrink: 0; letter-spacing: .02em; } .atx-info { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .atx-name { font-size: .9rem; font-weight: 600; color: #0F172A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atx-date { font-size: .75rem; color: #9CA3AF; } .atx-amt { font-size: .88rem; font-weight: 700; color: #1F2937; white-space: nowrap; text-align: right; } .atx-amt--in { color: #16A34A; } .atx-empty { padding: 2rem 1rem; text-align: center; color: #9CA3AF; font-size: .88rem; } /* ── ATX mobile/pc visibility ── */ .atx-mobile-only { display: flex; } .atx-pc-only { display: none; } /* ── ATX PC styles ── */ @media (min-width: 701px) { .atx-mobile-only { display: none !important; } .atx-pc-only { display: flex; } .ec-modal-overlay--fullscreen#ec-modal-all-tx { left: var(--sidebar-w, 220px) !important; background: #F5F7FA !important; align-items: flex-start !important; overflow-y: auto; } .ec-modal-overlay--fullscreen#ec-modal-all-tx .ec-modal-card--fullscreen { transform: none !important; transition: opacity .2s !important; opacity: 0; width: 100%; max-width: none; background: #F5F7FA; padding: 2rem 8rem 3rem !important; overflow: visible; } .ec-modal-overlay--fullscreen#ec-modal-all-tx.open .ec-modal-card--fullscreen { opacity: 1; } /* PC header */ .atx-pc-header { flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; width: 100%; } .atx-pc-title-row { display: flex; align-items: center; width: 100%; } .atx-pc-title { font-size: 1.75rem; font-weight: 800; color: #0F172A; letter-spacing: -.02em; } /* PC filter bar */ .atx-pc-filter-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .atx-pc-filter-label { font-size: .82rem; color: #6B7280; font-weight: 500; } .atx-pc-select { border: 1px solid #E5E7EB; border-radius: 8px; padding: .45rem .8rem; font-size: .82rem; color: #374151; background: #fff; cursor: pointer; outline: none; font-family: inherit; } .atx-pc-search-wrap { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: .45rem .75rem; margin-left: auto; } .atx-pc-search-input { border: none; outline: none; background: transparent; font-size: .82rem; color: #1F2937; width: 180px; font-family: inherit; } .atx-pc-search-input::placeholder { color: #9CA3AF; } /* PC table card */ .atx-list { background: #fff; border-radius: 16px; box-shadow: 0 1px 6px rgba(0,0,0,.06); margin: 0; overflow: visible; } .atx-pc-table { width: 100%; border-collapse: collapse; } .atx-pc-th { font-size: .8rem; font-weight: 700; color: #9CA3AF; letter-spacing: .1em; text-transform: uppercase; padding: .9rem 1.25rem; text-align: left; border-bottom: 1px solid #F1F5F9; } .atx-pc-row { cursor: pointer; transition: background .12s; } .atx-pc-row:hover { background: #F9FAFB; } .atx-pc-row:not(:last-child) td { border-bottom: 1px solid #F1F5F9; } .atx-pc-td { padding: 1rem 1.25rem; font-size: .88rem; color: #374151; vertical-align: middle; } .atx-pc-td--date { color: #6B7280; } .atx-pc-td--type { color: #6B7280; } .atx-pc-td--chev { color: #9CA3AF; font-size: 1.2rem; text-align: right; width: 30px; } .atx-pc-amt--in { color: #16A34A; font-weight: 700; } .atx-pc-amt--out { color: #1F2937; font-weight: 700; } .atx-pc-status { display: inline-block; padding: .25rem .75rem; border: 1px solid #16A34A; border-radius: 20px; color: #16A34A; font-size: .78rem; font-weight: 500; } .atx-pc-empty { padding: 3rem; text-align: center; color: #9CA3AF; font-size: .9rem; } /* PC Pagination */ .atx-pc-pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; gap: 1rem; } .atx-pc-pg-btn { padding: .45rem 1rem; border: 1px solid #E5E7EB; border-radius: 8px; background: #fff; font-size: .82rem; color: #374151; cursor: pointer; font-family: inherit; } .atx-pc-pg-btn:disabled { opacity: .4; cursor: default; } .atx-pc-pg-nums { display: flex; gap: .4rem; } .atx-pc-pg-num { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #E5E7EB; background: #fff; font-size: .82rem; color: #374151; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; } .atx-pc-pg-num--active { background: #0F172A; color: #fff; border-color: #0F172A; } } /* ── TX DETAIL PAGE (Grey style) ── */ .txd-page { display: flex; flex-direction: column; background: #F5F7FA; padding: 0 !important; border-radius: 0 !important; } .txd-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1rem .5rem; background: transparent; position: sticky; top: 0; z-index: 2; } .txd-topbar-amt { font-size: .95rem; font-weight: 700; color: #1F2937; } .txd-topbar-title { display: none; font-size: 1rem; font-weight: 700; color: #0F172A; flex: 1; } .txd-body { flex: 1; overflow-y: auto; } /* Hero */ .txd-hero { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.2rem 1rem 0; background: #F5F7FA; } .txd-hero-icon { width: 64px; height: 64px; border-radius: 50%; background: #E5E7EB; display: flex; align-items: center; justify-content: center; color: #374151; margin-bottom: .3rem; } .txd-hero-icon--in { background: #DCFCE7; color: #16A34A; } .txd-hero-amt { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: #1F2937; } .txd-hero-sub { font-size: .82rem; font-weight: 600; color: #374151; } .txd-hero-date { font-size: .72rem; color: #9CA3AF; } /* Wavy divider */ .txd-wavy { width: 100%; height: 24px; background: #F5F7FA; margin-top: 1.2rem; } .txd-wavy svg { display: block; width: 100%; height: 24px; } /* Sections */ .txd-section { background: #fff; margin: 0 0 .75rem; padding: 1.1rem 1rem; } .txd-section-title { font-size: .82rem; font-weight: 700; color: #0F172A; margin-bottom: .8rem; } .txd-rows {} .txd-row { display: flex; align-items: center; justify-content: space-between; padding: .55rem 0; border-bottom: 1px dashed #F3F4F6; } .txd-row:last-child { border-bottom: none; } .txd-lbl { font-size: .7rem; color: #9CA3AF; } .txd-val { font-size: .7rem; color: #374151; text-align: right; } .txd-val--bold { font-weight: 700; color: #0F172A; } .txd-mono { font-family: monospace; font-size: .6rem !important; } .txd-status-badge { display: inline-flex; align-items: center; gap: .35rem; background: #DCFCE7; color: #16A34A; border-radius: 20px; padding: .2rem .65rem; font-size: .68rem; font-weight: 700; } .txd-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; } /* Timeline */ .txd-timeline { display: flex; flex-direction: column; gap: 0; } .txd-tl-item { display: flex; align-items: flex-start; gap: .85rem; position: relative; } .txd-tl-dot { width: 28px; height: 28px; border-radius: 50%; background: #16A34A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; } .txd-tl-line { position: absolute; left: 13px; top: 28px; width: 2px; height: calc(100% + 12px); background: #DCFCE7; z-index: 0; } .txd-tl-item--last .txd-tl-line { display: none; } .txd-tl-body { padding-bottom: 1.2rem; } .txd-tl-title { font-size: .88rem; font-weight: 700; color: #0F172A; } .txd-tl-sub { font-size: .78rem; color: #6B7280; margin-top: .15rem; } .txd-tl-date { font-size: .73rem; color: #9CA3AF; margin-top: .15rem; } /* Actions */ .txd-actions { padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom, 0)); display: flex; flex-direction: column; gap: .65rem; flex-shrink: 0; background: #fff; border-top: 1px solid #E5E7EB; } .txd-btn-primary { width: 100%; padding: .95rem; border: none; border-radius: 12px; background: var(--coral); color: #fff; font-size: .92rem; font-weight: 700; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } @media (hover:hover){ .txd-btn-primary:hover { background: var(--coral-d); } } .txd-btn-secondary { width: 100%; padding: .85rem; border: 1.5px solid #E5E7EB; border-radius: 12px; background: #fff; color: #374151; font-size: .92rem; font-weight: 600; font-family: inherit; cursor: pointer; } @media (min-width: 701px) { /* PC: modal centré, pas fullscreen */ .ec-modal-overlay--fullscreen#ec-modal-tx { align-items: center !important; justify-content: center !important; background: rgba(15,23,42,.45) !important; } .ec-modal-overlay--fullscreen#ec-modal-tx .ec-modal-card--fullscreen { transform: translateY(20px) !important; transition: opacity .25s, transform .25s !important; opacity: 0; width: 520px !important; max-width: 95vw; height: auto !important; min-height: unset !important; max-height: 75vh !important; border-radius: 20px !important; overflow: hidden !important; overflow-y: auto !important; margin: auto !important; } .ec-modal-overlay--fullscreen#ec-modal-tx.open .ec-modal-card--fullscreen { opacity: 1; transform: translateY(0) !important; } /* PC topbar → titre "Détails" */ .txd-topbar { padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid #F1F5F9; background: #fff; } .txd-topbar-amt { display: none; } .txd-topbar-title { display: block; } /* PC hero */ .txd-hero { background: #fff; padding: 1.5rem 1.5rem .5rem; } .txd-hero-icon { width: 60px; height: 60px; border-radius: 50%; } .txd-hero-amt { font-size: 1.5rem; } /* PC wavy hidden */ .txd-wavy { display: none; } /* PC sections */ .txd-section { padding: 1rem 1.5rem; background: #fff; } .txd-section:not(:last-of-type) { border-bottom: 1px solid #F1F5F9; } /* PC actions */ .txd-actions { padding: 1.25rem 1.5rem 1.75rem; background: #fff; border-top: 1px solid #F1F5F9; } .txd-btn-primary { border-radius: 10px; } .txd-btn-secondary { border-radius: 10px; } } /* ── PC-ONLY SECTIONS ── */ .gd-pc-only { display: none; } /* Bouton Virement PC */ .gd-vir-btn-pc { display: none; } @media (min-width: 701px) { .gd-action-btns { display: none; } .gd-vir-btn-pc { display: inline-flex; align-items: center; gap: .45rem; background: #06c2b0; color: #fff; border: none; border-radius: 999px; padding: .6rem 1.4rem; font-size: .9rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s; } .gd-vir-btn-pc:hover { background: #05a99a; } .gd-pc-only { display: block; } .gd-greeting-row { display: none; } /* PC Balance grid */ .gd-tx-desc-sub { display: none; } .gd-pc-bal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .gd-pc-bal-card { background: #fff; border-radius: 14px; padding: 1.4rem 1.25rem; box-shadow: 0 1px 5px rgba(0,0,0,.045); display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; transition: box-shadow .15s; } .gd-pc-bal-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.09); } .gd-pc-bal-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: .3rem; } .gd-pc-bal-icon--eur { background: #EFF6FF; color: #3B82F6; } .gd-pc-bal-icon--loan { background: #ECFDF5; color: #059669; } .gd-pc-bal-icon--cal { background: #FEF3C7; color: #D97706; } .gd-pc-bal-icon--purple { background: #F5F3FF; color: #7C3AED; } .gd-pc-bal-name { font-size: .82rem; color: #6B7280; } .gd-pc-bal-amt { font-size: 1.3rem; font-weight: 800; color: #0F172A; letter-spacing: -.02em; } .gd-pc-bal-amt--date { font-size: 1rem; font-weight: 700; } .gd-pc-bal-sub { font-size: .75rem; color: #9CA3AF; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } /* PC Quick Actions grid */ .gd-pc-qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .gd-pc-qa-card { background: #fff; border-radius: 14px; padding: 1.3rem 1.1rem 1.1rem; box-shadow: 0 1px 5px rgba(0,0,0,.045); cursor: pointer; transition: box-shadow .15s, transform .12s; } @media (hover:hover){ .gd-pc-qa-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); } } .gd-pc-qa-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: .85rem; } .gd-pc-qa-icon--green { background: #ECFDF5; color: #059669; } .gd-pc-qa-icon--blue { background: #EFF6FF; color: #3B82F6; } .gd-pc-qa-icon--amber { background: #FEF3C7; color: #D97706; } .gd-pc-qa-icon--purple{ background: #F5F3FF; color: #7C3AED; } .gd-pc-qa-title { font-size: .95rem; font-weight: 700; color: #0F172A; margin-bottom: .3rem; } .gd-pc-qa-desc { font-size: .78rem; color: #6B7280; line-height: 1.4; } /* PC main card */ .gd-main-card { background: #fff; border-radius: 18px; box-shadow: 0 1px 8px rgba(0,0,0,.06); margin: 2rem 8rem 1.5rem; overflow: hidden; } .gd-main-card-divider { height: 1px; background: #F1F5F9; margin: 0 1.5rem; } /* PC balance section: bigger layout */ .gd-balance-section { padding: 1.75rem 2rem 1.5rem; border-bottom: none; } .gd-section.gd-pc-only { padding: 1.25rem 8rem; } .gd-balance-label { font-size: .82rem; font-weight: 600; letter-spacing: .06em; } .gd-balance-amount { font-size: 2.2rem; } .gd-action-circle { width: 48px; height: 48px; } /* PC greeting */ .gd-greeting-name { font-size: 1.5rem; } /* Loan card section: align with other PC cards */ #gd-loan-card-section { padding: 0 8rem 1.5rem; } /* Recent transactions card */ .gd-section--last { background: #fff; border-radius: 18px; box-shadow: 0 1px 8px rgba(0,0,0,.06); margin: 0 8rem 2rem; padding: 1.5rem 2rem 1.75rem; } .gd-section--last .gd-section-hd { margin-bottom: 1rem; } } /* ════════════════════════════ SERVICE CARDS ════════════════════════════ */ .svc-section { padding: 0 1rem 1.25rem; } .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .72rem; } .svc-card { background: #fff; border-radius: 16px; padding: 1.1rem 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: var(--text); border: 1.5px solid rgba(0,0,0,.06); cursor: pointer; text-align: left; font-family: inherit; font-size: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.04); -webkit-tap-highlight-color: transparent; transition: box-shadow .18s, transform .12s; } .svc-card:active { transform: scale(.97); } /* Open Banking featured card */ .svc-card--ob { background: linear-gradient(135deg, #0B5E8A 0%, #0B9E8A 100%); border-color: transparent; grid-column: span 2; flex-direction: row; align-items: center; gap: 1rem; padding: 1.2rem 1.1rem; } .svc-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .svc-icon--blue { background: #EEF5FA; color: var(--brand); } .svc-icon--teal { background: #E6F7F5; color: var(--teal); } .svc-icon--purple { background: #F3F0FB; color: #6B5CE7; } .svc-icon--orange { background: #FFF4EC; color: #E8721B; } .svc-icon--green { background: #EAF7F1; color: var(--green); } .svc-icon--pink { background: #FEF0F5; color: #D63A7A; } .svc-icon--white { background: rgba(255,255,255,.2); color: #fff; } .svc-title { font-size: .84rem; font-weight: 700; color: var(--text); line-height: 1.2; } .svc-desc { font-size: .73rem; color: var(--muted); line-height: 1.4; } .svc-ob-body { flex: 1; } .svc-ob-arrow { flex-shrink: 0; } .svc-card--ob .svc-title { color: #fff; font-size: .9rem; margin-bottom: .1rem; } .svc-card--ob .svc-desc { color: rgba(255,255,255,.82); font-size: .78rem; } .svc-ob-tag { display: inline-flex; align-items: center; gap: .25rem; background: rgba(255,255,255,.22); border-radius: 20px; padding: .18rem .55rem; font-size: .68rem; font-weight: 600; color: #fff; margin-top: .3rem; width: fit-content; } /* Tablet */ @media (min-width: 540px) and (max-width: 700px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: .8rem; } .svc-card--ob { grid-column: span 3; } } /* PC */ @media (min-width: 701px) { .svc-section { padding: 0 2rem 1.5rem; } .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } .svc-card--ob { grid-column: span 3; gap: 1.5rem; padding: 1.4rem 1.5rem; } .svc-card { padding: 1.3rem; border-radius: 18px; box-shadow: 0 1px 6px rgba(0,0,0,.05); } @media (hover:hover){ .svc-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.1); transform: translateY(-2px); } .svc-card--ob:hover { transform: translateY(-2px); } } .svc-icon { width: 46px; height: 46px; border-radius: 13px; } .svc-title { font-size: .9rem; } .svc-desc { font-size: .78rem; } .svc-card--ob .svc-title { font-size: .98rem; } .svc-card--ob .svc-desc { font-size: .82rem; } } /* ════════════════════════════ MODAL OPEN BANKING ════════════════════════════ */ .ob-hero { text-align: center; padding: .5rem 0 1.4rem; } .ob-hero-icon { width: 60px; height: 60px; background: var(--brand-light); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto .9rem; color: var(--brand); } .ob-hero-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .45rem; } .ob-hero-desc { font-size: .8rem; color: var(--muted); line-height: 1.55; } .ob-features { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.2rem; background: var(--bg); border-radius: var(--radius); padding: .85rem .95rem; } .ob-feature { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--text-2); } .ob-feature svg { color: var(--teal); flex-shrink: 0; } .ob-balance-card { background: linear-gradient(135deg, #0B5E8A 0%, #0B9E8A 100%); border-radius: 14px; padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; color: #fff; } .ob-balance-bank { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: .4rem; margin-bottom: .55rem; text-transform: uppercase; letter-spacing: .07em; } .ob-balance-amt { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-bottom: .3rem; } .ob-balance-updated { font-size: .8rem; color: rgba(255,255,255,.65); } .ob-alert-section { background: var(--bg); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1rem; } .ob-alert-title { font-size: .8rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: .4rem; margin-bottom: .75rem; } .ob-alert-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .ob-alert-lbl { font-size: .8rem; color: var(--text-2); } .ob-disconnect-btn { margin-top: .6rem; width: 100%; background: none; border: 1.5px solid var(--border-s); border-radius: var(--radius); padding: .62rem; font-size: .8rem; font-weight: 600; color: var(--red); cursor: pointer; font-family: inherit; transition: background .15s; } .ob-disconnect-btn:hover { background: var(--red-light); } /* ════════════════════════════ MODAL PAUSE MENSUALITÉS ════════════════════════════ */ .pm-current-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg); border-radius: var(--radius); padding: .9rem 1rem; } .pm-current-lbl { font-size: .78rem; color: var(--muted); font-weight: 500; } .pm-current-amt { font-size: 1rem; font-weight: 800; color: var(--brand); letter-spacing: -.02em; } .pm-duration-grid { display: flex; gap: .6rem; margin-top: .5rem; } .pm-duration-opt { flex: 1; position: relative; cursor: pointer; } .pm-duration-opt input[type="radio"] { position: absolute; opacity: 0; width: 0; } .pm-duration-opt span { display: flex; align-items: center; justify-content: center; padding: .62rem .5rem; border-radius: var(--radius-sm); border: 2px solid var(--border); font-size: .82rem; font-weight: 600; color: var(--text-2); background: #fff; transition: border-color .15s, color .15s, background .15s; text-align: center; } .pm-duration-opt input:checked + span { border-color: var(--brand); color: var(--brand); background: var(--brand-light); } .pm-notice { display: flex; align-items: flex-start; gap: .5rem; background: #FFF8EC; border: 1px solid rgba(232,114,27,.2); border-radius: var(--radius-sm); padding: .65rem .8rem; font-size: .76rem; color: #E8721B; line-height: 1.5; margin-top: 1rem; } .pm-notice svg { flex-shrink: 0; margin-top: .05rem; } /* ════════════════════════════ MODAL E-RELEVÉ ════════════════════════════ */ .er-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; } .er-toggle-title { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: .2rem; } .er-toggle-sub { font-size: .76rem; color: var(--muted); line-height: 1.4; } .er-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; } .er-toggle input { opacity: 0; width: 0; height: 0; } .er-toggle-slider { position: absolute; inset: 0; background: var(--border-s); border-radius: 24px; transition: background .22s; } .er-toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .22s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .er-toggle input:checked + .er-toggle-slider { background: var(--teal); } .er-toggle input:checked + .er-toggle-slider::before { transform: translateX(20px); } .er-eco-note { display: flex; align-items: flex-start; gap: .5rem; background: var(--green-light); border: 1px solid rgba(26,127,90,.15); border-radius: var(--radius-sm); padding: .65rem .8rem; font-size: .76rem; color: var(--green); line-height: 1.5; margin-top: .9rem; margin-bottom: .5rem; } .er-eco-note svg { flex-shrink: 0; margin-top: .05rem; } /* PC — modal max-width */ @media (min-width: 701px) { #ec-modal-open-banking .ec-modal-card, #ec-modal-pause-mens .ec-modal-card, #ec-modal-e-releve .ec-modal-card { border-radius: 20px; max-width: 480px; margin: auto; } #ec-modal-open-banking, #ec-modal-pause-mens, #ec-modal-e-releve { align-items: center; } } /* ════════════════════════════ MOBILE NAV — bouton Plus ════════════════════════════ */ .v2-nav-mobile-only { display: flex; } @media (min-width: 701px) { .v2-nav-mobile-only { display: none !important; } } /* ════════════════════════════ BOTTOM SHEET PLUS (mobile) ════════════════════════════ */ .more-sheet { padding: 1rem 1.2rem 2.6rem; } .more-sheet-title { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; text-align: center; } .more-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem 0; } .more-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; background: none; border: none; cursor: pointer; font-family: inherit; font-size: .72rem; font-weight: 600; color: var(--text-2); text-decoration: none; padding: .8rem .3rem; border-radius: 12px; transition: background .15s; -webkit-tap-highlight-color: transparent; } .more-item:active { background: var(--bg); } .more-item-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; } .more-item-icon--blue { background: #EEF5FA; color: var(--brand); } .more-item-icon--teal { background: #E6F7F5; color: var(--teal); } .more-item-icon--purple { background: #F3F0FB; color: #6B5CE7; } .more-item-icon--orange { background: #FFF4EC; color: #E8721B; } .more-item-icon--green { background: #EAF7F1; color: var(--green); } .more-item-icon--pink { background: #FEF0F5; color: #D63A7A; } /* ════════════════════════════ COUNTDOWN CHIP (dashboard) ════════════════════════════ */ .gd-echeance-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--brand-light); color: var(--brand); border-radius: 20px; padding: .28rem .8rem; font-size: .72rem; font-weight: 700; margin-top: .55rem; width: fit-content; } .gd-echeance-chip--urgent { background: #FDF0EF; color: var(--red); } /* ════════════════════════════ CREDIT DETAIL — chart + btns ════════════════════════════ */ .ec-cd-chart-wrap { margin-top: 1.1rem; background: var(--bg); border-radius: var(--radius); padding: .85rem .9rem .65rem; } .ec-cd-chart-title { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; margin-bottom: .8rem; } .ec-cd-actions { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; } .ec-cd-btn-sec { width: 100%; background: none; border: 1.5px solid var(--border-s); border-radius: var(--radius); padding: .8rem; font-size: .9rem; font-weight: 600; color: var(--text-2); cursor: pointer; font-family: inherit; transition: background .15s; } .ec-cd-btn-sec:hover { background: var(--bg); } /* ════════════════════════════ HISTORIQUE CONNEXIONS ════════════════════════════ */ .cx-list { display: flex; flex-direction: column; gap: 0; max-height: 320px; overflow-y: auto; } .cx-empty { text-align: center; padding: 2rem; color: var(--muted); font-size: .85rem; } .cx-item { display: flex; align-items: center; gap: .85rem; padding: .75rem .05rem; border-bottom: 1px solid var(--border); } .cx-item:last-child { border-bottom: none; } .cx-item-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cx-item-icon--current { background: var(--green-light); color: var(--green); } .cx-item-body { flex: 1; min-width: 0; } .cx-item-title { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: .1rem; } .cx-item-sub { font-size: .72rem; color: var(--muted); } .cx-item-badge { font-size: .65rem; font-weight: 700; background: var(--green-light); color: var(--green); border-radius: 4px; padding: .15rem .45rem; } .cx-notice { display: flex; align-items: flex-start; gap: .5rem; margin-top: 1rem; font-size: .73rem; color: var(--muted); line-height: 1.5; } .cx-notice svg { flex-shrink: 0; margin-top: .1rem; } /* ════════════════════════════ CHANGEMENT DATE PRÉLÈVEMENT ════════════════════════════ */ .cd-current-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg); border-radius: var(--radius); padding: .8rem 1rem; } .cd-lbl { font-size: .78rem; color: var(--muted); font-weight: 500; } .cd-val { font-size: .9rem; font-weight: 700; color: var(--brand); } .cd-day-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin-top: .5rem; } .cd-day-btn { aspect-ratio: 1; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: #fff; font-size: .8rem; font-weight: 600; color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s, color .15s; font-family: inherit; } .cd-day-btn:hover { border-color: var(--brand); color: var(--brand); } .cd-day-btn--selected { background: var(--brand); border-color: var(--brand); color: #fff; } /* ════════════════════════════ PAIEMENTS EN RETARD ════════════════════════════ */ .pr-summary { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-radius: var(--radius); font-size: .83rem; font-weight: 600; } .pr-summary.ok { background: var(--green-light); color: var(--green); } .pr-summary.warning { background: var(--red-light); color: var(--red); } /* ════════════════════════════ RÉGULARISATION ════════════════════════════ */ .reg-hero { text-align: center; padding: .5rem 0 1.2rem; } .reg-hero-icon { width: 56px; height: 56px; background: var(--teal-light); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto .8rem; color: var(--teal); } .reg-hero-title { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: .4rem; } .reg-hero-desc { font-size: .8rem; color: var(--muted); line-height: 1.55; } /* ════════════════════════════ SIMULATEURS ════════════════════════════ */ .sim-tabs { display: flex; gap: .4rem; margin-bottom: 1.1rem; background: var(--bg); border-radius: var(--radius); padding: .25rem; } .sim-tab { flex: 1; background: none; border: none; border-radius: var(--radius-sm); padding: .48rem .3rem; font-size: .75rem; font-weight: 600; color: var(--muted); cursor: pointer; font-family: inherit; transition: background .15s, color .15s; } .sim-tab--active { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,.08); } .sim-result { background: var(--bg); border-radius: var(--radius); overflow: hidden; margin-top: 1rem; border: 1px solid var(--border); } .sim-result-row { display: flex; justify-content: space-between; align-items: center; padding: .62rem 1rem; border-bottom: 1px solid var(--border); font-size: .82rem; color: var(--text-2); } .sim-result-row:last-child { border-bottom: none; } .sim-result-row--total { background: var(--brand-light); } .sim-result-val { font-weight: 700; color: var(--text); } .sim-result-val--good { color: var(--green); } .sim-result-val--big { font-size: .95rem; color: var(--brand); font-weight: 800; } /* ════════════════════════════ CHAT CONSEILLER (FAB) ════════════════════════════ */ .chat-fab { position: fixed; bottom: 88px; right: 1.2rem; z-index: 200; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #0B5E8A 0%, #0B9E8A 100%); color: #fff; border: none; text-decoration: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(11,94,138,.4), 0 3px 8px rgba(11,94,138,.28), inset 0 1px 1px rgba(255,255,255,.3); transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; -webkit-tap-highlight-color: transparent; } .chat-fab::before{ content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%); pointer-events: none; } .chat-fab svg{ position: relative; z-index: 1; } @media (hover: hover) { .chat-fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 14px 30px rgba(11,94,138,.45), 0 4px 10px rgba(11,94,138,.3), inset 0 1px 1px rgba(255,255,255,.3); } } .chat-fab:active { transform: scale(.94); } /* Anneau de pulsation : uniquement quand un message conseiller n'a pas encore été lu (classe posée par ecInitChatFabBadge), pour attirer l'œil au bon moment sans animer en permanence. */ .chat-fab.has-unread::after{ content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(11,158,138,.55); animation: chat-fab-pulse 2.2s ease-out infinite; pointer-events: none; } @keyframes chat-fab-pulse{ 0% { transform: scale(.85); opacity: .65; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } } @media (prefers-reduced-motion: reduce){ .chat-fab.has-unread::after{ animation: none; opacity: 0; } } .chat-fab-badge{ position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 4px; background: #ef4444; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(239,68,68,.4); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; } @media (min-width: 701px) { .chat-fab { bottom: 1.5rem; right: 1.8rem; } } /* ════════════════════════════ CHAT MODAL ════════════════════════════ */ .chat-modal { padding: 0; display: flex; flex-direction: column; height: 480px; max-height: 80vh; } .chat-modal-header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .chat-modal-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .chat-modal-name { font-size: .88rem; font-weight: 700; color: var(--text); } .chat-modal-status { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--green); font-weight: 600; } .chat-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .chat-messages { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; } .chat-msg { display: flex; flex-direction: column; } .chat-msg--in { align-items: flex-start; } .chat-msg--out { align-items: flex-end; } .chat-bubble { max-width: 78%; padding: .65rem .9rem; border-radius: 14px; font-size: .83rem; line-height: 1.5; } .chat-msg--in .chat-bubble { background: var(--bg); color: var(--text); border-bottom-left-radius: 4px; } .chat-msg--out .chat-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; } .chat-time { font-size: .65rem; color: var(--muted-2); margin-top: .2rem; padding: 0 .2rem; } .chat-input-row { display: flex; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid var(--border); flex-shrink: 0; } .chat-input { flex: 1; border: 1.5px solid var(--border); border-radius: 20px; padding: .55rem 1rem; font-size: .85rem; font-family: inherit; outline: none; color: var(--text); transition: border-color .15s; } .chat-input:focus { border-color: var(--brand); } .chat-send-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity .15s; } .chat-send-btn:hover { opacity: .85; } /* PC adjustments for new modals */ @media (min-width: 701px) { #ec-modal-connexions .ec-modal-card, #ec-modal-chg-date .ec-modal-card, #ec-modal-paiements-retard .ec-modal-card, #ec-modal-regularisation .ec-modal-card, #ec-modal-simul-rachat .ec-modal-card, #ec-modal-simul-mens .ec-modal-card, #ec-modal-simul-eco .ec-modal-card, #ec-modal-chat-conseiller .ec-modal-card { border-radius: 20px; max-width: 480px; margin: auto; } #ec-modal-connexions, #ec-modal-chg-date, #ec-modal-paiements-retard, #ec-modal-regularisation, #ec-modal-simul-rachat, #ec-modal-simul-mens, #ec-modal-simul-eco, #ec-modal-chat-conseiller { align-items: center; } .chat-modal { height: 520px; } } /* ══════════════════════════════════════════════════════════════ SUIVI DOSSIER — Direction Qonto × Revolut × N26 Palette limitée à 3 couleurs : bleu marine (accent), gris (repos), texte. Le vert n'apparaît qu'une fois, quand le financement est finalisé. Scope: .ec-page-pro ══════════════════════════════════════════════════════════════ */ /* Font stack SF Pro Display */ .ec-page-pro, .ec-page-pro * { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Hero : fond blanc, bordure très légère (plus de fond bleu) ── */ .ec-page-pro .ec-pro-hero { background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFE 100%) !important; border: 1px solid #E8EDF3 !important; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px -4px rgba(16,24,40,.06), 0 10px 24px -14px rgba(20,58,99,.08) !important; border-radius: 26px !important; padding: 1.1rem !important; margin-bottom: 1.5rem !important; gap: .8rem !important; overflow: hidden !important; align-items: center !important; } .ec-page-pro .ec-pro-hero::before, .ec-page-pro .ec-pro-hero::after { display: none !important; } /* Suivi de dossier uniquement : hero en bleu clair pour se distinguer des autres pages */ .ec-page-pro .ec-suivi-hero { background: #CFEEF6 !important; border-color: #B7E2EF !important; } .ec-page-pro .ec-suivi-hero .ec-pro-hero-ico { background: rgba(255,255,255,.6) !important; border-color: rgba(255,255,255,.5) !important; } .ec-page-pro .ec-pro-hero-ico { width: 36px !important; height: 36px !important; border-radius: 11px !important; background: linear-gradient(160deg, #F5F8FC 0%, #E7EEF6 100%) !important; border: 1px solid #E8EDF3 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(20,58,99,.12) !important; backdrop-filter: none !important; flex-shrink: 0 !important; } .ec-page-pro .ec-pro-hero-ico svg { width: 17px !important; height: 17px !important; stroke: #143A63 !important; } .ec-page-pro .ec-pro-hero-eyebrow { font-size: .6rem !important; letter-spacing: .18em !important; color: #6B7280 !important; font-weight: 600 !important; margin: 0 0 .2rem !important; } .ec-page-pro .ec-pro-hero-title { font-size: 1.15rem !important; font-weight: 700 !important; letter-spacing: -.03em !important; color: #111827 !important; line-height: 1.15 !important; margin: 0 !important; } .ec-page-pro .ec-pro-hero-sub { font-size: .74rem !important; color: #6B7280 !important; margin: .2rem 0 0 !important; line-height: 1.5 !important; font-weight: 400 !important; } /* ── Cartes : relief discret façon Apple/Revolut, coins plus arrondis ── */ .ec-page-pro .ec-suivi-search, .ec-page-pro .ec-suivi-card { background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFE 100%) !important; border-radius: 28px !important; border: 1px solid #E8EDF3 !important; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px -4px rgba(16,24,40,.06), 0 10px 24px -14px rgba(20,58,99,.08) !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; transform: none !important; } .ec-page-pro .ec-suivi-search:hover, .ec-page-pro .ec-suivi-card:hover { border-color: #D9DEE7 !important; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px -4px rgba(16,24,40,.08), 0 14px 30px -16px rgba(20,58,99,.1) !important; transform: translateY(-1px) !important; } .ec-page-pro .ec-suivi-card { margin-bottom: 1.5rem !important; overflow: hidden !important; } /* ── Carte recherche ── */ .ec-page-pro .ec-suivi-search { padding: 1.5rem !important; margin-bottom: 1.5rem !important; } .ec-page-pro .ec-lbl { font-size: .63rem !important; font-weight: 700 !important; color: #9CA3AF !important; text-transform: uppercase !important; letter-spacing: .15em !important; margin-bottom: .6rem !important; display: block !important; } .ec-page-pro .ec-suivi-row { gap: .6rem !important; margin-top: 0 !important; align-items: center !important; } /* Input flat, minimaliste */ .ec-page-pro .ec-inp { height: 42px !important; border-radius: 14px !important; border: 1.5px solid #E9EAEC !important; background: #FAFAFA !important; padding: 0 1.1rem !important; font-size: .95rem !important; font-weight: 500 !important; color: #111827 !important; box-shadow: none !important; transition: border-color .18s ease, background .18s ease !important; } .ec-page-pro .ec-inp:focus { outline: none !important; border-color: #143A63 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(20,58,99,.08) !important; } .ec-page-pro .ec-inp::placeholder { color: #D1D5DB !important; font-weight: 400 !important; } /* Bouton bleu marine sobre, moins massif — attire l'œil sans dominer la page */ .ec-page-pro .ec-suivi-btn { height: 42px !important; border-radius: 16px !important; padding: 0 1rem !important; font-size: .82rem !important; font-weight: 600 !important; letter-spacing: .01em !important; white-space: nowrap !important; background: linear-gradient(180deg, #1B4A7D 0%, #143A63 55%, #0F2D4E 100%) !important; color: #fff !important; border: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 8px rgba(20,58,99,.22) !important; transition: background .18s ease, opacity .15s ease, transform .12s ease, box-shadow .18s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .5rem !important; } .ec-page-pro .ec-suivi-btn:hover { background: linear-gradient(180deg, #204F86 0%, #163F6A 55%, #102F52 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 12px rgba(20,58,99,.26) !important; } .ec-page-pro .ec-suivi-btn:active { opacity: .85 !important; transform: scale(.98) !important; } /* Micro-interaction : spinner de chargement pendant la recherche */ .ec-page-pro .ec-suivi-btn.ec-btn-loading { pointer-events: none !important; opacity: .85 !important; } .ec-page-pro .ec-suivi-btn.ec-btn-loading .ec-btn-txt { opacity: 0 !important; } .ec-page-pro .ec-suivi-btn .ec-btn-spinner { display: none; position: absolute; width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: ec-btn-spin .6s linear infinite; } .ec-page-pro .ec-suivi-btn.ec-btn-loading .ec-btn-spinner { display: block; } .ec-page-pro .ec-suivi-btn { position: relative !important; } @keyframes ec-btn-spin { to { transform: rotate(360deg); } } /* ── Carte dossier : l'étape actuelle, une seule information mise en avant ── */ .ec-page-pro .ec-suivi-header { padding: 1.5rem !important; margin-bottom: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .ec-page-pro .ec-suivi-doc-ico { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: linear-gradient(160deg, #F5F8FC 0%, #E7EEF6 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(20,58,99,.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: .875rem !important; flex-shrink: 0 !important; } .ec-page-pro .ec-suivi-eyebrow { font-size: .8125rem !important; font-weight: 600 !important; color: #6B7280 !important; letter-spacing: .02em !important; text-transform: none !important; margin-bottom: .625rem !important; } .ec-page-pro .ec-suivi-current-title { font-size: 1.125rem !important; font-weight: 600 !important; color: #111827 !important; letter-spacing: -.01em !important; line-height: 1.35 !important; margin-bottom: .5rem !important; } .ec-page-pro .ec-suivi-current-desc { font-size: .875rem !important; color: #6B7280 !important; line-height: 1.5 !important; margin-bottom: 1rem !important; } /* Barre fine avec pastille ronde chevauchante, façon simulateur (sp5-stepper) */ .ec-page-pro .ec-suivi-bar-wrap { position: relative !important; width: 100% !important; margin: 1.5rem 0 1.9rem !important; } .ec-page-pro .ec-suivi-bar-track { width: 100% !important; height: 5px !important; background: #EDEFF3 !important; box-shadow: inset 0 1px 2px rgba(16,24,40,.07) !important; border-radius: 999px !important; overflow: hidden !important; margin: 0 !important; } .ec-page-pro .ec-suivi-bar-fill { height: 100% !important; background: linear-gradient(90deg, #1E4D82 0%, #143A63 100%) !important; box-shadow: 0 0 6px rgba(20,58,99,.4) !important; border-radius: 999px !important; transition: width .5s cubic-bezier(.4,0,.2,1) !important; } .ec-page-pro .ec-suivi-bar-pct { position: absolute !important; top: 0 !important; left: 0%; transform: translate(-50%, -50%) !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: #CFEEF6 !important; color: #143A63 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .01em !important; white-space: nowrap !important; box-shadow: 0 3px 10px rgba(20,58,99,.22) !important; transition: left .5s cubic-bezier(.22,1,.36,1) !important; } /* Badge de la carte du haut : supprimé, redondant avec le badge déjà affiché sur l'étape correspondante dans la timeline juste en dessous */ .ec-page-pro .ec-suivi-badge { display: none !important; } /* État "financement finalisé" : seul moment où le vert apparaît sur la carte du haut */ .ec-page-pro .ec-suivi-header-done .ec-suivi-current-title { color: #166534 !important; } .ec-page-pro .ec-suivi-header-done .ec-suivi-current-title::before { content: '✓ '; } .ec-page-pro .ec-suivi-header-done .ec-suivi-current-desc { margin-bottom: 0 !important; } /* Icône du haut : cercle de validation animé quand le financement est terminé */ .ec-page-pro .ec-suivi-header-done .ec-suivi-doc-ico { background: linear-gradient(160deg, #1F7A46 0%, #166534 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(22,101,52,.35) !important; border-radius: 50% !important; animation: ec-suivi-check-in .45s cubic-bezier(.34,1.56,.64,1) both !important; } .ec-page-pro .ec-suivi-header-done .ec-suivi-doc-ico svg path { stroke: #fff !important; } @keyframes ec-suivi-check-in { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .ec-page-pro .ec-suivi-header-done .ec-suivi-doc-ico { animation: none !important; } } /* État "dossier suspendu" : neutre, pas d'alarme visuelle excessive */ .ec-page-pro .ec-suivi-header-blocked .ec-suivi-current-title { color: #B91C1C !important; } .ec-page-pro .ec-suivi-header-blocked .ec-suivi-current-desc { margin-bottom: 0 !important; } /* État "dossier refusé" : rouge, comme le point refusé de la timeline */ .ec-page-pro .ec-suivi-header-refused .ec-suivi-current-title { color: #B91C1C !important; } .ec-page-pro .ec-suivi-header-refused .ec-suivi-current-desc { margin-bottom: 0 !important; } /* ── Timeline légère ── */ .ec-page-pro .ec-suivi-timeline { padding: 1.75rem 1.5rem 1.5rem !important; margin-bottom: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid #F1F4F8 !important; } .ec-page-pro .ec-tl-item { padding-left: 1.75rem !important; padding-bottom: 2rem !important; } .ec-page-pro .ec-tl-item:last-child { padding-bottom: 0 !important; } /* Puces : validé (vert + coche), en cours (orange + halo animé), refusé (rouge + croix), à venir (contour clair) */ .ec-page-pro .ec-tl-dot { width: 20px !important; height: 20px !important; top: 0 !important; left: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } .ec-page-pro .ec-tl-dot svg { display: block !important; width: 11px !important; height: 11px !important; } .ec-page-pro .ec-tl-item.done .ec-tl-dot, .ec-page-pro .ec-tl-dot-done { background: linear-gradient(160deg, #1F7A46 0%, #166534 65%, #0C4A26 100%) !important; border: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(22,101,52,.35) !important; } .ec-page-pro .ec-tl-item.active .ec-tl-dot, .ec-page-pro .ec-tl-dot-active { background: linear-gradient(160deg, #FB923C 0%, #EA580C 65%, #C2410C 100%) !important; border: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(234,88,12,.4) !important; overflow: visible !important; animation: ec-tl-blink 1.4s ease-in-out infinite !important; } @keyframes ec-tl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .ec-page-pro .ec-tl-item.active .ec-tl-dot, .ec-page-pro .ec-tl-dot-active { animation: none !important; } } .ec-page-pro .ec-tl-dot-core { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.2) !important; position: relative !important; z-index: 1 !important; } /* Halo animé sur l'étape en cours : seul point avec un effet de vie */ .ec-page-pro .ec-tl-pulse { display: block !important; position: absolute !important; inset: -5px !important; border-radius: 50% !important; border: 1.5px solid #EA580C !important; opacity: 0 !important; animation: ec-tl-pulse-orange 1.8s ease-out infinite !important; } @keyframes ec-tl-pulse-orange { 0% { transform: scale(.75); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } } .ec-page-pro .ec-tl-item.refused .ec-tl-dot, .ec-page-pro .ec-tl-dot-refused { background: linear-gradient(160deg, #EF4444 0%, #B91C1C 65%, #931515 100%) !important; border: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(185,28,28,.35) !important; } .ec-page-pro .ec-tl-item.refused .ec-tl-title { color: #B91C1C !important; } .ec-page-pro .ec-tl-item.pending .ec-tl-dot, .ec-page-pro .ec-tl-dot-pending { background: #fff !important; border: 2px solid rgba(20,58,99,.2) !important; box-shadow: inset 0 1px 2px rgba(16,24,40,.05) !important; } /* Ligne verticale fine : verte sous une étape validée, grise sinon */ .ec-page-pro .ec-tl-line { left: 9px !important; top: 24px !important; width: 1px !important; border-radius: 2px !important; height: calc(100% - 16px) !important; background: #E5E7EB !important; } .ec-page-pro .ec-tl-item.done .ec-tl-line { background: rgba(22,101,52,.5) !important; } /* Contenu textuel */ .ec-page-pro .ec-tl-content { padding-left: 1.1rem !important; } .ec-page-pro .ec-tl-title { font-size: .9375rem !important; font-weight: 600 !important; color: #111827 !important; letter-spacing: -.01em !important; margin-bottom: .5rem !important; line-height: 1.3 !important; } .ec-page-pro .ec-tl-item.pending .ec-tl-title { color: #9CA3AF !important; font-weight: 500 !important; } /* La description longue historique n'est plus utilisée dans la timeline */ .ec-page-pro .ec-tl-desc { display: none !important; } .ec-page-pro .ec-tl-date { display: none !important; } /* Badge par étape : titre + badge suffisent, pas de texte supplémentaire */ .ec-page-pro .ec-tl-badge { display: inline-flex !important; padding: .25rem .625rem !important; border-radius: 999px !important; font-size: .6875rem !important; font-weight: 600 !important; letter-spacing: 0 !important; } .ec-page-pro .ec-tl-badge-active { background: #FFF1E6 !important; color: #C2410C !important; } .ec-page-pro .ec-tl-badge-pending { background: #F3F4F6 !important; color: #9CA3AF !important; } .ec-page-pro .ec-tl-badge-final { background: #E9F5EE !important; color: #166534 !important; } .ec-page-pro .ec-tl-badge-refused { background: #FEE9E9 !important; color: #B91C1C !important; } /* Erreur */ .ec-page-pro .ec-form-err { border-radius: 10px !important; margin-top: .7rem !important; font-size: .82rem !important; } /* ── Carte "Besoin d'aide ?" : carte à part entière, pas un simple lien ── */ .ec-page-pro .ec-suivi-contact { display: block !important; background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFE 100%) !important; border: 1px solid #E7EAF0 !important; border-radius: 26px !important; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px -4px rgba(16,24,40,.06), 0 10px 24px -14px rgba(20,58,99,.08) !important; padding: 1.375rem 1.25rem !important; text-align: left !important; margin-top: 1.5rem !important; } .ec-page-pro .ec-suivi-contact-ico { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: linear-gradient(160deg, #F5F8FC 0%, #E7EEF6 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(20,58,99,.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: .875rem !important; } .ec-page-pro .ec-suivi-contact-title { font-size: 1rem !important; font-weight: 600 !important; color: #111827 !important; margin-bottom: .375rem !important; } .ec-page-pro .ec-suivi-contact-desc { font-size: .8125rem !important; color: #6B7280 !important; line-height: 1.5 !important; margin-bottom: .875rem !important; } .ec-page-pro .ec-suivi-contact-link { font-size: .875rem !important; font-weight: 600 !important; color: #143A63 !important; text-decoration: none !important; } /* ── Mobile ── */ @media (max-width: 480px) { .ec-page-pro .ec-pro-hero { padding: 1.6rem 1.3rem !important; } .ec-page-pro .ec-suivi-search { padding: 1.3rem !important; } .ec-page-pro .ec-suivi-header { padding: 1.35rem 1.3rem !important; } .ec-page-pro .ec-suivi-current-title { font-size: 1.05rem !important; } .ec-page-pro .ec-suivi-timeline { padding: 1.5rem 1.3rem !important; } .ec-page-pro .ec-suivi-contact { padding: 1.2rem 1.1rem !important; } .ec-page-pro .ec-inp { height: 42px !important; } .ec-page-pro .ec-suivi-btn { height: 42px !important; padding: 0 1rem !important; } .ec-page-pro .ec-tl-item { padding-bottom: 1.75rem !important; } } /* ════════════════════════════ LIGHTBOX PIÈCE JOINTE (messagerie) — visionneuse image plein écran affichée sur place, pour éviter de naviguer vers le domaine de stockage (Supabase) quand le client ouvre une photo reçue/envoyée. ════════════════════════════ */ .ec-file-lightbox{ position: fixed; inset: 0; z-index: 9999; background: rgba(10,14,20,.92); display: none; align-items: center; justify-content: center; flex-direction: column; padding: 2.5rem 1rem 1.5rem; } .ec-file-lightbox.open{ display: flex; } .ec-file-lightbox-close{ position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .ec-file-lightbox-img{ max-width: min(92vw,640px); max-height: 74vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); object-fit: contain; } .ec-file-lightbox-name{ color: #fff; opacity: .85; font-size: .82rem; margin-top: 1rem; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ec-file-lightbox-spinner{ width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: ec-file-lightbox-spin .8s linear infinite; } @keyframes ec-file-lightbox-spin{ to{ transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .ec-file-lightbox-spinner{ animation-duration: 1.6s; } }