/* Vireon Bank — redesign 2026. Autonome, sans dépendance JS. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --ground:#F4F7FB; --surface:#fff; --surface-2:#EEF3FA;
  --ink:#0F1C30; --muted:#586A81; --line:#DBE4F0;
  --brand:#0A2540; --brand-2:#07182B; --accent:#2563EB;
  --gold:#C29A46; --shadow:0 1px 2px rgba(10,37,64,.06), 0 8px 24px -12px rgba(10,37,64,.18);
}
html{ overflow-x:hidden; }
.rd2026{ font-family:'Public Sans',system-ui,sans-serif; color:var(--ink); background:var(--ground); max-width:100vw; }
.rd2026 h1,.rd2026 h2,.rd2026 h3{ font-family:'Fraunces',Georgia,serif; font-weight:600; text-wrap:balance; margin:0; letter-spacing:-.01em; }
.rd2026 a{ color:inherit; }
.rd2026 .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* utility bar */
.rd2026 .utility{ background:var(--brand-2); color:#E7EEF8; font-size:13px; }
.rd2026 .utility .wrap{ display:flex; align-items:center; justify-content:space-between; height:38px; gap:24px; }
.rd2026 .utility-left{ display:flex; align-items:center; gap:18px; }
.rd2026 .utility-left a{ text-decoration:none; opacity:.92; display:inline-flex; align-items:center; gap:6px; }
.rd2026 .utility-left a:hover{ opacity:1; text-decoration:underline; }
.rd2026 .utility-left svg{ width:14px; height:14px; }
.rd2026 .lang-picker{ position:relative; }
.rd2026 .lang-btn{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#E7EEF8; font:inherit; font-size:12.5px; padding:5px 10px; border-radius:20px; display:flex; align-items:center; gap:6px; cursor:pointer; }
.rd2026 .lang-menu{ position:absolute; top:calc(100% + 8px); right:0; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); min-width:190px; padding:6px; display:none; z-index:40; }
.rd2026 .lang-picker.open .lang-menu{ display:block; }
.rd2026 .lang-menu a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; font-size:13.5px; text-decoration:none; }
.rd2026 .lang-menu a:hover{ background:var(--surface-2); }

/* nav */
.rd2026 .nav-shell{ background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.rd2026 .nav-shell .wrap{ display:flex; align-items:center; height:76px; gap:28px; }
.rd2026 .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.rd2026 .brand svg{ width:32px; height:32px; color:var(--brand); }
.rd2026 .brand-word{ font-family:'Fraunces',serif; font-weight:600; font-size:19px; }
.rd2026 .brand-word b{ color:var(--brand); font-weight:700; }
.rd2026 .mainnav{ display:flex; align-items:center; gap:4px; flex:1; }
.rd2026 .mainnav-item{ position:relative; }
.rd2026 .mainnav-link{ display:flex; align-items:center; padding:9px 14px; border-radius:10px; line-height:1; cursor:pointer; position:relative; }
.rd2026 .mainnav-item:hover .mainnav-title{ color:var(--brand); }
.rd2026 .mainnav-item:hover .mainnav-title svg{ transform:rotate(180deg); }
.rd2026 .mainnav-title svg{ transition:transform .18s; }
.rd2026 .mainnav-item::after{ content:''; position:absolute; left:14px; right:14px; bottom:6px; height:2px; background:var(--brand); border-radius:2px; transform:scaleX(0); transition:transform .18s; }
.rd2026 .mainnav-item:hover::after{ transform:scaleX(1); }
.rd2026 .mainnav-item{ display:flex; align-items:center; }
.rd2026 .mainnav-title{ font-weight:600; font-size:14.5px; color:var(--ink); display:flex; align-items:center; gap:6px; }
.rd2026 .mainnav-title svg{ width:10px; height:10px; opacity:.55; }
.rd2026 .mainnav-sub{ display:none; }
.rd2026 .mega{ display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 50px -20px rgba(10,37,64,.3); padding:24px; margin-top:8px; min-width:600px; z-index:35; }
.rd2026 .mainnav-item:hover .mega{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 32px; }
.rd2026 .mega-col h4{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--brand); font-weight:700; margin:0 0 10px; }
.rd2026 .mega-col a{ display:block; font-size:13.5px; color:var(--muted); text-decoration:none; padding:5px 0; }
.rd2026 .mega-col a:hover{ color:var(--brand); }
.rd2026 .nav-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.rd2026 .btn{ font:inherit; font-weight:600; font-size:14px; border-radius:9px; padding:10px 18px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.rd2026 .btn-ghost{ background:transparent !important; border-color:var(--line) !important; color:var(--ink) !important; }
.rd2026 .btn-ghost:hover{ border-color:var(--brand) !important; }
.rd2026 .btn-solid{ background:var(--brand) !important; border-color:var(--brand) !important; color:#F4F8FF !important; }
.rd2026 .btn-solid:hover{ background:var(--brand-2) !important; }
.rd2026 .btn-solid{ background:var(--brand); color:#F4F8FF; box-shadow:var(--shadow); }
.rd2026 .btn-solid:hover{ background:var(--brand-2); }
.rd2026 .burger{ display:none; }
.rd2026 .nav-burger{ display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:8px; cursor:pointer; color:var(--ink); }
.rd2026 .nav-burger svg{ width:20px; height:20px; display:block; }

/* hero */
.rd2026 .hero{ position:relative; min-height:560px; display:flex; align-items:center; overflow:hidden; }
.rd2026 .hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.rd2026 .hero-scrim{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(7,24,43,.88) 0%, rgba(7,24,43,.72) 32%, rgba(7,24,43,.28) 62%, rgba(7,24,43,.08) 82%); }
.rd2026 .hero .wrap{ position:relative; z-index:2; max-width:none; padding:56px clamp(24px,6vw,96px) 56px 24px; }
.rd2026 .hero-row{ display:flex; align-items:center; gap:48px; }
.rd2026 .hero-copy{ max-width:560px; color:#EEF3FA; }

/* ---- carte de cartes bancaires qui défile (pur CSS, sans JS) ---- */
.rd2026 .card-stack{ position:relative; flex:none; width:380px; height:253px; }
.rd2026 .card-stack img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:14px; box-shadow:0 20px 40px -14px rgba(0,0,0,.6);
  opacity:0; animation:cardFade 9s infinite;
}
.rd2026 .card-stack img:nth-child(1){ animation-delay:0s; opacity:1; }
.rd2026 .card-stack img:nth-child(2){ animation-delay:3s; }
.rd2026 .card-stack img:nth-child(3){ animation-delay:6s; }
@keyframes cardFade{
  0%{ opacity:0; transform:translateY(8px) scale(.97); }
  8%,25%{ opacity:1; transform:translateY(0) scale(1); }
  33%{ opacity:0; transform:translateY(-8px) scale(.97); }
  100%{ opacity:0; }
}
.rd2026 .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#EEF3FA; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); padding:6px 12px; border-radius:20px; }
.rd2026 .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.rd2026 .hero h1{ font-size:46px; line-height:1.08; margin-top:18px; color:#F7FAFF; }
.rd2026 .hero .lead{ font-size:17px; color:#C7D6E8; max-width:46ch; margin-top:16px; line-height:1.6; }
.rd2026 .hero-cta{ display:flex; gap:14px; margin-top:28px; }
.rd2026 .hero-cta .btn{ padding:13px 24px; font-size:15px; }
.rd2026 .hero-cta .btn-ghost{
  border-color:rgba(255,255,255,.5) !important; color:#fff !important; background:rgba(7,24,43,.45) !important;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.rd2026 .hero-cta .btn-ghost:hover{ border-color:#fff; background:rgba(7,24,43,.65); }
.rd2026 .hero-stats{ display:flex; gap:26px; margin-top:38px; }
.rd2026 .stat b{ display:block; font-size:21px; font-weight:700; color:#F7FAFF; }
.rd2026 .stat span{ font-size:12px; color:#A9BCD6; }

/* services */
.rd2026 .services{ padding:64px 0; }
.rd2026 .section-head{ margin-bottom:30px; }
.rd2026 .section-head h2{ font-size:28px; }
.rd2026 .section-head p{ color:var(--muted); font-size:14.5px; margin:8px 0 0; }
.rd2026 .svc-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.rd2026 .svc-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 20px; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--ink); transition:border-color .15s,transform .15s; }
.rd2026 .svc-card:hover{ border-color:var(--brand); transform:translateY(-2px); }
.rd2026 .svc-icon{ width:40px; height:40px; border-radius:10px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--brand); }
.rd2026 .svc-icon svg{ width:19px; height:19px; }
.rd2026 .svc-card h3{ font-size:15.5px; font-family:'Public Sans'; font-weight:700; }
.rd2026 .svc-card p{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.5; }

/* footer */
.rd2026 footer{ background:var(--brand-2); color:#D3DEEC; padding:44px 0 24px; }
.rd2026 .foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.12); }
.rd2026 .foot-brand{ display:flex; align-items:center; gap:9px; font-family:'Fraunces'; font-weight:600; font-size:16px; }
.rd2026 .foot-brand svg{ width:24px; height:24px; }
.rd2026 .foot-desc{ font-size:13px; color:#9DB0CC; margin-top:10px; max-width:32ch; line-height:1.6; }
.rd2026 .foot-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#8093AE; margin:0 0 12px; }
.rd2026 .foot-col a{ display:block; font-size:13.5px; text-decoration:none; color:#D3DEEC; margin-bottom:9px; opacity:.9; }
.rd2026 .foot-col a:hover{ opacity:1; text-decoration:underline; }
.rd2026 .foot-social{ display:flex; gap:10px; margin-top:14px; }
.rd2026 .foot-social a{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.rd2026 .foot-social svg{ width:15px; height:15px; }
.rd2026 .foot-bottom{ display:flex; justify-content:space-between; padding-top:18px; font-size:12px; color:#8093AE; }

@media (max-width:640px){
  .rd2026 .utility .wrap{ gap:8px; padding-left:16px; padding-right:16px; }
  .rd2026 .utility-left a:nth-child(2){ display:none; }
  .rd2026 .lang-btn span{ display:none; }
}
@media (max-width:480px){
  .rd2026 .nav-shell .wrap{ gap:8px; padding-left:16px; padding-right:16px; }
  .rd2026 .brand-word{ display:none; }
  .rd2026 .nav-actions{ gap:6px; }
  .rd2026 .nav-actions .btn{ padding:8px 10px; font-size:12px; white-space:nowrap; }
}
@media (max-width:900px){
  .rd2026 .nav-burger{ display:block; }
  .rd2026 .mainnav{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--surface); border-bottom:1px solid var(--line); padding:8px 24px 16px; gap:0;
    box-shadow:0 16px 30px -18px rgba(10,37,64,.3);
  }
  .rd2026 .nav-shell.nav-open .mainnav{ display:flex; }
  .rd2026 .mainnav-item{ width:100%; border-bottom:1px solid var(--line); }
  .rd2026 .mainnav-item:last-child{ border-bottom:0; }
  .rd2026 .mainnav-link{ padding:14px 4px; cursor:pointer; }
  .rd2026 .mega{
    display:none !important; position:static; transform:none; box-shadow:none; border:0; padding:0 4px 14px;
    min-width:0; grid-template-columns:1fr;
  }
  .rd2026 .mainnav-item.open .mega{ display:grid !important; }
  .rd2026 .mainnav-item:hover .mega{ display:none; }
  .rd2026 .mainnav-item.open:hover .mega{ display:grid !important; }
  .rd2026 .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .rd2026 .foot-top{ grid-template-columns:1fr 1fr; }
  .rd2026 .hero h1{ font-size:34px; }
  .rd2026 .hero-row{ flex-direction:column; align-items:stretch; }
  .rd2026 .card-stack{ display:block; width:100%; height:auto; aspect-ratio:380/253; order:2; margin-top:24px; }
}

/* ---- grille de raccourcis ("Choose what's right for you") ---- */
.rd2026 .shortcuts{ padding:56px 0; }
.rd2026 .shortcuts .section-head{ text-align:center; }
.rd2026 .shortcuts .section-head h2{ font-size:26px; }
.rd2026 .shortcut-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:28px; }
.rd2026 .shortcut{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 12px; background:var(--surface); border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--ink); text-align:center; transition:border-color .15s,transform .15s; }
.rd2026 .shortcut:hover{ border-color:var(--brand); transform:translateY(-2px); }
.rd2026 .shortcut svg{ width:24px; height:24px; color:var(--brand); }
.rd2026 .shortcut span{ font-size:12.5px; font-weight:600; line-height:1.3; }

/* ---- grille de cartes photo ---- */
.rd2026 .photo-grid-wrap{ background:var(--surface); padding:56px 0; }
.rd2026 .photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rd2026 .photo-card{ border-radius:14px; overflow:hidden; border:1px solid var(--line); text-decoration:none; color:var(--ink); background:var(--surface); }
.rd2026 .photo-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.rd2026 .photo-card .pc-body{ padding:14px 16px 18px; }
.rd2026 .photo-card .pc-body b{ font-size:14.5px; display:flex; align-items:center; gap:6px; }
.rd2026 .photo-card .pc-body span{ display:block; margin-top:6px; font-size:12.5px; color:var(--muted); line-height:1.5; }
.rd2026 .photo-card:hover b{ color:var(--brand); }

/* ---- bloc question/réponse (2 colonnes) ---- */
.rd2026 .split{ padding:56px 0; }
.rd2026 .split .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; background:var(--surface-2); border-radius:20px; overflow:hidden; min-height:320px; }
.rd2026 .split img{ width:100%; height:100%; object-fit:cover; object-position:center 15%; display:block; }
.rd2026 .split-copy{ padding:44px; display:flex; flex-direction:column; justify-content:center; }
.rd2026 .split-copy h2{ font-size:24px; }
.rd2026 .split-copy p{ color:var(--muted); font-size:14.5px; margin-top:10px; line-height:1.6; }

/* ---- bandeau CTA plein ---- */
.rd2026 .cta-band{ background:var(--brand); padding:52px 0; text-align:center; color:#EEF3FA; }
.rd2026 .cta-band h2{ font-size:26px; color:#fff; }
.rd2026 .cta-band p{ color:#C7D6E8; margin-top:8px; font-size:14.5px; }

/* ---- bandeau "connect with us" ---- */
.rd2026 .connect{ padding:22px 0; border-top:1px solid var(--line); text-align:center; }
.rd2026 .connect h4{ font-size:14px; font-weight:700; margin-bottom:2px; }
.rd2026 .connect a{ font-size:13px; color:var(--muted); text-decoration:none; }
.rd2026 .connect a:hover{ color:var(--brand); }

@media (max-width:900px){
  .rd2026 .photo-grid{ grid-template-columns:repeat(2,1fr); }
  .rd2026 .split .wrap{ grid-template-columns:1fr; height:auto; }
  .rd2026 .split img{ height:200px; }
}

/* ===== Héros accueil (style maquette) ===== */
.rd2026 .btn-gold{ background:var(--gold) !important; color:#231a06 !important; border-color:var(--gold) !important; }
.rd2026 .btn-gold:hover{ filter:brightness(1.06); }
.rd2026 .mhero{ position:relative; background:#0C244A; color:#fff; overflow:hidden; }
.rd2026 .mhero-sky{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.14; }
.rd2026 .mhero-wash{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(9,26,58,.92), rgba(9,26,58,.62) 46%, rgba(9,26,58,.40)); }
.rd2026 .mhero .wrap{ position:relative; z-index:2; max-width:1320px; padding-inline:clamp(24px,5vw,72px); }
.rd2026 .mhero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:44px; align-items:center; padding-block:60px; }
.rd2026 .mhero .eyebrow{ color:#8FC9FF; }
.rd2026 .mhero h1{ font-size:clamp(34px,4.6vw,52px); color:#fff; font-weight:700; line-height:1.07; margin-top:16px; }
.rd2026 .mhero .lead{ color:#CBD8EC; font-size:17px; margin-top:16px; max-width:46ch; }
.rd2026 .mhero-cta{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.rd2026 .mhero-stats{ display:flex; gap:28px; margin-top:34px; flex-wrap:wrap; }
.rd2026 .mhero-stats b{ display:block; font-size:22px; color:#fff; font-family:'Fraunces',serif; font-weight:600; }
.rd2026 .mhero-stats span{ font-size:12px; color:#9DB3D2; }
.rd2026 .mhero-right{ position:relative; min-height:440px; }
.rd2026 .mhero-photo{ position:absolute; inset:24px 0; border-radius:20px; background-size:cover; background-position:60% center; box-shadow:0 30px 60px -28px rgba(0,0,0,.6); }
.rd2026 .mcard-stack{ position:absolute; top:2px; right:34px; width:236px; aspect-ratio:1.6/1; z-index:4; }
.rd2026 .mcard{ position:absolute; inset:0; opacity:0; animation:mcardCycle 9s infinite; }
.rd2026 .mcard svg{ width:100%; height:100%; display:block; border-radius:16px; box-shadow:0 26px 44px -16px rgba(0,0,0,.55); }
.rd2026 .mcard:nth-child(1){ opacity:1; animation-delay:0s; }
.rd2026 .mcard:nth-child(2){ animation-delay:3s; }
.rd2026 .mcard:nth-child(3){ animation-delay:6s; }
@keyframes mcardCycle{ 0%{opacity:0;transform:translateY(10px) scale(.96)} 6%,28%{opacity:1;transform:translateY(0) scale(1)} 34%,100%{opacity:0;transform:translateY(-10px) scale(.96)} }
.rd2026 .help-badge2{ position:absolute; right:20px; bottom:36px; z-index:5; background:var(--brand); color:#fff; border-radius:16px; padding:15px 18px; max-width:252px; box-shadow:0 24px 44px -18px rgba(0,0,0,.6); }
.rd2026 .help-badge2 b{ font-family:'Fraunces',serif; font-size:15px; }
.rd2026 .help-badge2 .pcta{ display:flex; align-items:center; gap:11px; margin-top:10px; }
.rd2026 .help-badge2 .pic{ width:44px; height:44px; border-radius:50%; background:var(--gold); color:#231a06; display:grid; place-items:center; flex:none; }
.rd2026 .help-badge2 .num{ font-weight:700; }
@media (max-width:900px){
  .rd2026 .mhero-grid{ grid-template-columns:1fr; gap:30px; padding-block:44px; }
  .rd2026 .mhero-right{ min-height:340px; }
  .rd2026 .mcard-stack{ width:180px; right:14px; }
}

/* ===== Services accueil (cartes horizontales maquette) ===== */
.rd2026 .svc2-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
.rd2026 .svc2{ display:flex; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); color:var(--ink); text-decoration:none; transition:transform .16s,border-color .16s; }
.rd2026 .svc2:hover{ transform:translateY(-4px); border-color:var(--brand); }
.rd2026 .svc2 .b{ padding:20px; display:flex; flex-direction:column; gap:7px; flex:1; min-width:0; }
.rd2026 .svc2 .ic{ width:44px; height:44px; border-radius:12px; background:var(--brand); color:#fff; display:grid; place-items:center; margin-bottom:4px; }
.rd2026 .svc2 .ic svg{ width:21px; height:21px; }
.rd2026 .svc2 h3{ font-size:16px; }
.rd2026 .svc2 p{ font-size:12.5px; color:var(--muted); line-height:1.5; margin:0; }
.rd2026 .svc2 .more{ margin-top:auto; padding-top:10px; color:var(--brand); display:inline-flex; }
.rd2026 .svc2 .more svg{ width:18px; height:18px; }
.rd2026 .svc2 .thumb{ width:38%; flex:none; background-size:cover; background-position:center; }
@media (max-width:940px){ .rd2026 .svc2-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .rd2026 .svc2-grid{ grid-template-columns:1fr; } .rd2026 .svc2{ flex-direction:column; } .rd2026 .svc2 .thumb{ width:auto; height:150px; order:-1; } }