/* RESET DE BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat Alternates', sans-serif;

}

body {
    background: #f5f5f5;
}

/* HEADER FIXE */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background: transparent linear-gradient(0deg, #ee7528 0%, #e94560 100%) 0% 0% no-repeat padding-box;
    color: white;
    z-index: 1000;
        min-height: 91px;
}

/* PARTIE GAUCHE */
.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-btn {
    background: none;
    border: none;
    font-size: 22px;
    color: white;
    cursor: pointer;
}
.burger-icon {
    height: 100%;
    width: auto;
    display: block;
}

.menu-text {
    font-size: 16px;
}

/* PARTIE DROITE */
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
}

.flag {
    width: 20px;
    height: auto;
    border-radius: 2px;
}

.arrow {
    font-size: 12px;
}

/* AJOUT D'UN ESPACE POUR NE PAS CACHER LE CONTENU */
.content {
    margin-top: 70px;
    padding: 20px;
}
.button-menu-burger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 48px;
    padding: 0;
    border-radius: 10px;
    transition: background 0.2s ease-in-out;
}

.button-menu-burger:hover {
    background: rgba(255, 255, 255, 0.15);
}

.burger-icon {
    width: 30px; /* Agrandi l'icône */
    height: 30px;
}

.menu-text {
    font-size: 20px; /* Texte plus grand */
    font-weight: 600;
    letter-spacing: 1px;
}
/* ===== PCS Card Section ===== */
.pcs-card-section {
  font-family: 'Montserrat Alternates', sans-serif;
  max-width: 360px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

.pcs-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f1f1f;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.edit-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: #f1f2f6;
  color: #8c8c8c;
  font-size: 12px;
}

.pcs-card-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Flèche rouge à gauche */
.nav-left {
  border: none;
  background: #ff4d67;
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 999px;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(255, 77, 103, .35);
  cursor: pointer;
}
.nav-left i { font-size: 16px; }

/* Carte */
.bank-card {
  position: relative;
  width: 270px;
  height: 168px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Black.png remplit la carte */
}

/* Check vert (Tick.png) en haut-gauche */
.badge-check {
  position: absolute;
  top: 14px; left: 14px;
  width: 38px; height: 38px;
}

/* Cœur en haut-droite */
.heart-icon {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 34px;
  color: #ff4d67; /* text-primary */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

/* Montant */
.amount {
  position: absolute;
  left: 18px; bottom: 34px;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  letter-spacing: .3px;
}

/* Logo Mastercard simplifié */
.mc {
  position: absolute;
  right: 18px; bottom: 22px;
  display: flex; align-items: center; gap: 6px;
}
.mc1, .mc2 {
  width: 20px; height: 20px; border-radius: 999px;
}
.mc1 { background: #ff5a2f; }
.mc2 { background: #f5b400; margin-left: -10px; }

/* Bouton RIB/IBAN */
.rib-btn {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid #d9d9d9;
  background: #fff;
  color: #343434;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rib-btn:hover {
  border-color: #bfbfbf;
  box-shadow: 0 6px 14px rgba(0,0,0,.07);
}
/* ---- Layout global, espace sous le header, centrage ---- */
:root {
  --header-h: 91px;  /* = min-height du header */
  --page-pad-x: 16px;
}

main {
  /* Espace pour ne pas passer sous le header + padding latéral responsive */
  padding: calc(var(--header-h) + 16px) var(--page-pad-x) 40px;
  display: flex;
  justify-content: center; /* centre le contenu */
}

/* Section carte centrée et responsive */
.pcs-card-section {
  width: 100%;
  max-width: 420px;     /* largeur cible mobile/desktop étroit */
  margin: 0 auto; 
  margin-top: 40px;      /* centrage horizontal */
}

/* Centre la rangée et place la flèche "rouge" comme sur la maquette */
.pcs-card-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* La flèche rouge "gauche" collée au bord gauche de la carte */
.nav-left {
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
}

/* Petites améliorations responsives */
@media (min-width: 480px) {
  :root { --page-pad-x: 24px; }
  .pcs-card-section { max-width: 480px; }
}
@media (min-width: 768px) {
  .pcs-card-section { max-width: 520px; }
}
/* Titre un peu plus grand + plus d'espace avec la carte */
.pcs-title{
  font-size: 25px;          /* + */
  margin-bottom: 20px;
  margin-top: 15px;  
  margin-left: 10px;    /* + espace */
}

/* Carte légèrement plus grande */
.bank-card{
  width: 330px;             /* 270 -> 300 */
  height: 200px;            /* 168 -> 180 */
  border-radius: 16px;
}

/* Descend très légèrement le tick vert et le cœur + cœur un peu plus grand */
.badge-check{
  top: 48px;                /* 14 -> 18 */
}
.heart-icon{
  top: 18px;                /* 14 -> 18 */
  font-size: 34px;          /* 22 -> 24 */
}

/* Bouton RIB centré sous la carte avec plus d'espace et icône SVG */
.rib-btn{
  display: block;
  margin: 20px auto 0;      /* centre + plus d'espace depuis la carte */
  padding: 12px 16px;       /* un peu plus grand */
  gap: 10px;
}
.rib-btn svg{
  width: 18px;
  height: 18px;
  display: block;
}
/* ===== MODALE CHANGEMENT NOM ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none; /* activée via JS */
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: #fff;
  border-radius: 14px;
  padding: 24px 20px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  animation: pop-in 0.25s ease-out;
}

@keyframes pop-in {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #e94560 !important; /* Rouge texte */
  text-align: center;
  flex-grow: 1;
  margin-top: 20px;
  margin-bottom: 20px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #e94560 !important;
  cursor: pointer;
}

.modal input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 40px;
  font-size: 15px;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-actions .btn-validate {
  background: #e94560 !important;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 0;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  margin-bottom: 10px;
  
}

.modal-actions .btn-validate:hover {
  background: #d33450 !important;
}

.modal-actions .btn-cancel {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-weight: 500;
  margin-bottom: 20px;
}
/* --- Overlay plus sombre --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(50, 43, 58, 0.93); /* demandé */
  display: none;
  justify-content: center;
  align-items: flex-start;  /* collé en haut */
  z-index: 2000;
  overflow-y: auto;         /* si contenu haut > écran */
}

/* active */
.modal-overlay.active {
  display: flex;
}

/* --- Modale en haut + anim slide-down --- */
.modal {
  background: #fff;
  border-radius: 14px;
  padding: 24px 20px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  margin-top: 24px;               /* distance par rapport au haut */
  animation: slide-down 240ms ease-out;
  transform-origin: top center;   /* pour une sensation qui part du haut */
}

@keyframes slide-down {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* (conserve tes autres styles .modal-header, .modal-title, .btn-validate, etc.) */
/* ===== Opérations récentes ===== */
.ops-card{
  width: 100%;
  max-width: 540px;
  margin: 18px auto 32px;
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 16px 20px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.ops-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ops-title{
  font-size: 24px;           /* proche de la capture */
  font-weight: 800;
  color: #2b2b2b;
  letter-spacing: .2px;
}

.ops-seeall{
  border: none;
  background: #e94560;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(233,69,96,.28);
}

.ops-month{
  margin-top: 6px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 700;
  color: #6b6b6b;
}

/* Liste */
.txn-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Un item = petit “pillow card” */
.txn-item{
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* Icône OK */
.txn-left{
  display: flex;
  align-items: center;
  justify-content: center;
}
.txn-icon{
  width: 28px;               /* ni trop grand ni trop petit */
  height: 28px;
  display: block;
}

/* Texte principal */
.txn-main{
  min-width: 0;              /* pour la troncation si besoin */
}
.txn-title{
  font-size: 14px;
  font-weight: 800;
  color: #2f2f2f;
  line-height: 1.2;
  margin-bottom: 2px;
}
.txn-sub{
  font-size: 12px;
  color: #8d8d8d;
  text-transform: uppercase; /* comme la capture sur APPLE.COM/BILL */
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Colonne droite montant + date */
.txn-right{
  text-align: right;
  margin-left: 10px;
}
.txn-amount{
  font-size: 14px;
  font-weight: 800;
  color: #2c2c2c;
  letter-spacing: .2px;
}
.txn-date{
  margin-top: 4px;
  font-size: 12px;
  color: #9a9a9a;
  line-height: 1.1;
}

/* Responsive micro-ajustements */
@media (min-width: 480px){
  .ops-card{ padding: 20px; }
  .txn-item{ padding: 16px; }
  .txn-icon{ width: 30px; height: 30px; }
}
/* Empiler les sections sous le header */
main {
  padding: calc(var(--header-h) + 16px) var(--page-pad-x) 40px;
  display: flex;
  flex-direction: column;   /* <— empile */
  align-items: center;      /* centre horizontalement */
  gap: 20px;                /* espace entre sections */
}

/* Largeurs responsives cohérentes pour les 2 blocs */
.pcs-card-section,
.ops-card {
  width: 100%;
  max-width: 540px;         /* même largeur visuelle */
  margin: 0 auto;
}
/* ===== Footer ===== */
.site-footer{
  background:#322b3a;            /* couleur demandée */
  color:#f2f2f2;
  padding:22px 16px 28px;        /* calé sur la capture */
  border-top:1px solid rgba(255,255,255,.08);
  margin-top: 40px;
}

.footer-inner{
  max-width:640px;               /* largeur visuelle proche de ta maquette */
  margin:0 auto;
  text-align:center;
  font-family:'Montserrat Alternates',sans-serif;
}

.footer-copy{
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  opacity:.95;
  margin-bottom:8px;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 14px;                  /* espace horizontal entre éléments */
  margin:0 0 14px 0;
  padding:0;
  list-style:none;
  font-size:13px;
  font-weight:600;
}

.footer-links li{
  position:relative;
  padding:0 10px;
}

.footer-links li + li::before{
  content:"•";                   /* puce séparatrice */
  position:absolute;
  left:-7px;
  color:#ffffff;
  opacity:.6;
}

.footer-links a{
  color:#ffffff;
  text-decoration:none;
  opacity:.85;
}
.footer-links a:hover{ opacity:1; text-decoration:underline; }

.footer-follow{
  font-size:13px;
  font-weight:600;
  opacity:.9;
  margin:6px 0 10px;
}

.footer-social{
  display:flex;
  justify-content:center;
  gap:14px;
}

.social-btn{
  width:30px; height:30px;       /* taille des ronds comme sur l’image */
  border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  display:grid; place-items:center;
  color:#ffffff;
  text-decoration:none;
  opacity:.95;
}
.social-btn i{ font-size:14px; line-height:1; }
.social-btn:hover{
  background:rgba(255,255,255,.09);
  border-color:#fff;
}
/* ===== Drawer / Menu latéral ===== */
.drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;                 /* .active pour l’afficher */
  z-index: 3000;                 /* au-dessus du header */
}
.drawer-overlay.active{ display:block; }

.drawer{
  position: absolute;
  top: 16px;                     /* même “respiration” que la maquette */
  bottom: 16px;
  left: 16px;
  width: 270px;                  /* largeur visuelle de la capture */
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  overflow: hidden;
  transform: translateX(-16px);
  opacity: 0;
  animation: drawer-in .22s ease-out forwards;
}
@keyframes drawer-in{
  to{ transform: translateX(0); opacity: 1; }
}

/* En-tête avec logo */
.drawer-header{
  padding: 22px 18px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.drawer-logo{
  width: 84px; height: auto;     /* taille logo proche de la capture */
  display: block;
}

/* Liste de navigation */
.drawer-nav{
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

/* Un item */
.nav-item{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  color: #242424;
  text-decoration: none;
  font-weight: 600;

}
.nav-item:last-child{ border-bottom: 0; }

.nav-icon{
  width: 28px; height: 28px;     /* ni trop grand ni trop petit */
  flex: 0 0 28px;
}
.nav-label{
  font-size: 16px;
  line-height: 1;
}

/* État actif “Accueil” */
.nav-item.active{
  background: #f5f5f7;
  margin-bottom: 20px;
  
}
.nav-item.active .active-bar{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: #e94560;
  border-radius: 0 6px 6px 0;
}

/* Ligne “Ajouter une carte” avec le + plus imposant */
.nav-plus{
  gap: 16px;
}
.nav-plus .fa{
  line-height: 1;                /* aligne mieux le + */
}
/* === FULL-HEIGHT + COLLÉ À GAUCHE === */
.drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  z-index: 3000;
}
.drawer-overlay.active{ display:block; }

/* Panneau plein height, sans marge à gauche */
.drawer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;              /* toute la hauteur */
  width: 300px;               /* un peu plus large, ajustable */
  max-width: 90vw;
  background: #fff;
  border-radius: 0 10px 10px 0; /* pas d’arrondi à gauche */
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  overflow-y: auto;
  transform: translateX(-100%); /* caché hors-écran */
  opacity: 1;
}

/* Animation slide-in depuis la gauche */
.drawer-overlay.active .drawer{
  animation: drawer-slide-in .24s ease-out forwards;
}
@keyframes drawer-slide-in{
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* === HEADER / LOGO CENTRÉ AVEC ESPACE === */
.drawer-header{
  display: flex;
  justify-content: center;    /* centre horizontalement */
  align-items: center;
  padding: 34px 24px 20px;    /* padding latéral + gros margin-top visuel */
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.drawer-logo{
  width: 96px;                /* taille confortable */
  height: auto;
  display: block;
  margin: 10px auto 18px;     /* top élevé + bottom */
}

/* === NAV : plus d’air à gauche === */
.drawer-nav{
  padding: 8px 0 14px;
}
.nav-item{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 34px; /* <-- plus de padding gauche */
  color: #242424;
  text-decoration: none;
  font-weight: 600;

}
.nav-icon{
  width: 28px; height: 28px;
  flex: 0 0 28px;
}
.nav-label{ font-size: 16px; line-height: 1; }

/* Actif : barre rose à gauche (inchangé, suit la nouvelle largeur) */
.nav-item.active{ background: #f5f5f7; }
.nav-item.active .active-bar{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: #e94560;
  border-radius: 0 6px 6px 0;
}
/* ===== Drawer + espacements + logo géant ===== */

/* largeur plus généreuse, plein écran en hauteur */
.drawer{
  width: 360px;                 /* avant 300px */
  max-width: 92vw;              /* sur très petits écrans */
  height: 100vh;
  left: 0; top: 0;
  border-radius: 0 12px 12px 0;
  transform: translateX(-100%);
  overflow-y: auto;
}

/* animation inchangée */
.drawer-overlay.active .drawer{
  animation: drawer-slide-in .26s cubic-bezier(.2,.8,.2,1) forwards;
}

/* header + logo quasi pleine largeur */
.drawer-header{
  padding: 36px 22px 24px;      /* + d’espace autour du logo */
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.drawer-logo{
  display: block;
  width: calc(100% - 8px);      /* ~ pleine largeur du panneau */
  max-width: 320px;             /* évite de dépasser sur petits tél. */
  height: auto;
  margin: 0 auto;               /* centré */
}

/* navigation plus aérée */
.drawer-nav{
  padding: 14px 0 24px;
}
.nav-item{
  padding: 18px 26px 18px 42px; /* + padding gauche/droite et vertical */
  gap: 18px;                    /* + espace icône/texte */
 
}
.nav-icon{
  width: 32px;                  /* icônes un peu plus grandes */
  height: 32px;
  flex: 0 0 32px;
}
.nav-label{
  font-size: 17px;              /* texte plus lisible */
  line-height: 1.2;
  letter-spacing: .2px;
}

/* état actif : bande plus visible et item plus contrasté */
.nav-item.active{
  background: #f3f3f6;
}
.nav-item.active .active-bar{
  width: 12px;                  /* bande un peu plus large */
  background: #e94560;
  border-radius: 0 8px 8px 0;
}

/* ligne “Ajouter une carte” plus présente */
.nav-plus{
  padding-top: 22px;
  padding-bottom: 22px;
}
.nav-plus .fa{
  font-size: 46px !important;   /* + légèrement */
}

/* petits ajustements très petits écrans */
@media (max-width: 360px){
  .drawer{ width: 92vw; }
  .drawer-logo{ max-width: 92%; }
  .nav-item{ padding: 16px 20px 16px 34px; gap: 14px; }
  .nav-icon{ width: 28px; height: 28px; }
  .nav-label{ font-size: 16px; }
}
/* ===== Drawer tuning (logo + items + remplissage hauteur) ===== */
:root{
  --drawer-w: 360px;               /* largeur confortable */
  --drawer-header-h: 160px;        /* hauteur approx. du header (logo + padding) */
}

.drawer{
  width: var(--drawer-w);
  height: 100vh;
}

/* Logo quasi pleine largeur, centré, comme la photo 2 */
.drawer-header{
  padding: 34px 24px 18px;
}
.drawer-logo{
  display:block;
  width: calc(100% - 48px);        /* occupe la largeur du panneau */
  max-width: 260px;                /* garde le ratio sur petits écrans */
  height: auto;
  margin: 0 auto;                  /* centré */
}

/* Colonne de navigation qui occupe la hauteur : le dernier item descend */
.drawer-nav{
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--drawer-header-h));
  padding: 12px 0 18px;
  overflow-y: auto;
}

/* Items plus grands et plus aérés */
.nav-item{
  gap: 20px;                       /* espace icône/texte */
  padding: 18px 28px 18px 44px;    /* + padding gauche/droite */
  
  margin-bottom: 20px;
}
.nav-icon{
  width: 34px; height: 34px;       /* icônes plus visibles */
  flex: 0 0 34px;
}
.nav-label{
  font-size: 18px;                 /* texte plus gros */
  line-height: 1.2;
  letter-spacing: .2px;
}

/* Actif : bande visible à gauche et fond léger */
.nav-item.active{ background:#f4f5f7; }
.nav-item.active .active-bar{
  width: 12px;
  background:#e94560;
  border-radius: 0 8px 8px 0;

}

/* Pousse le dernier item (Ajouter une carte) vers le bas pour limiter le vide */
.nav-item:last-child{
  margin-top: auto;
  padding-top: 22px;
  padding-bottom: 22px;
}
.nav-plus .fa{ font-size: 48px !important; }

/* Très petits écrans : on adapte légèrement */
@media (max-width: 360px){
  :root{ --drawer-w: 92vw; --drawer-header-h: 150px; }
  .drawer-logo{ max-width: 88%; }
  .nav-item{ padding: 16px 22px 16px 36px; gap: 16px; }
  .nav-icon{ width: 30px; height: 30px; }
  .nav-label{ font-size: 17px; }
}

.nav-label-actif{
    color: #e94560;
    }
    /* ===== Page Envoyer ===== */
.send-hero,
.send-card{
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

/* Titre très visible comme sur la capture */
.send-title{
  font-size: 46px;            /* grand titre mobile */
  line-height: 1;
  font-weight: 800;
  color: #273049;             /* bleu sombre lisible */
  letter-spacing: .4px;
  margin-bottom: 8px;
}

/* Sous-titre gris/bleuté */
.send-subtitle{
  font-size: 14px;
  line-height: 1.6;
  color: #50607a;
  max-width: 520px;
}

/* Carte blanche avec ombre douce */
.send-card{
  margin-top: 18px;
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

/* SVG centré, taille équilibrée (ajustée à la capture) */
.send-visual{
  display: block;
  width: 190px;
  max-width: 80%;
  margin: 6px auto 18px;
}

/* Bouton rose pilule, centré et large comme sur l’image */
.send-cta{
  display: block;
  width: 86%;
  margin: 0 auto;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: #e94560;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 18px rgba(233,69,96,.25);
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease;
}
.send-cta:active{ transform: translateY(1px); }
.send-cta:hover{ filter: brightness(.98); }

/* Légers boosts sur écrans > 480px */
@media (min-width: 480px){
  .send-title{ font-size: 50px; }
  .send-visual{ width: 220px; margin-top: 10px; margin-bottom: 22px; }
  .send-cta{ width: 84%; }
}
/* --- Envoyer : titre centré + plus grand --- */
.send-hero{
  max-width: 640px;
  margin: 8px auto 0;   /* centre le conteneur */
  padding: 0;           /* enlève le décalage gauche */
  text-align: center;   /* centre le texte */
}

.send-title{
  font-size: clamp(60px, 9vw, 72px);  /* plus grand */
  font-weight: 800;
  line-height: 0.95;                  /* compact comme la maquette */
  letter-spacing: .2px;
  color: #273049;
  margin-bottom: 8px;
}

.send-subtitle{
  max-width: 520px;     /* colonne plus étroite et centrée */
  margin: 0 auto;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #273049;
  margin-top: 20px;
}
/* espace régulier entre les cartes */
.send-card + .send-card{ margin-top: 18px; }

/* visuel un peu plus large comme sur ta capture */
.send-visual--wide{
  width: 230px;
  max-width: 82%;
  margin: 8px auto 18px;
}

/* pour que le texte du bouton puisse passer sur 2 lignes proprement */
.send-cta{
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}
/* Visuel "bénéficiaires" un peu plus large comme sur ta capture */
.send-visual--people{
  width: 220px;
  max-width: 82%;
  margin: 8px auto 18px;
}
/* ===== Virement : Titre + Steps ===== */
:root{
  --step-dot: 14px;               /* taille des points */
  --step-gap: 28px;               /* espace entre colonnes */
  --step-line: rgba(39,48,73,.35);/* couleur des traits */
  --step-active: #2fd6be;         /* couleur texte actif */
}

.transfer-hero{
  max-width: 640px;
  margin: 10px auto 0;
  text-align: center;
}

.transfer-title{
  font-size: clamp(60px, 9vw, 72px); /* même gabarit que ta maquette */
  font-weight: 800;
  line-height: .95;
  letter-spacing: .2px;
  color: #273049;
  margin-bottom: 50px;
}

/* grille de 4 étapes */
.transfer-steps{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--step-gap);
  align-items: start;
  max-width: 560px;
  margin: 0 auto 10px;
}

.step{
  position: relative;
  text-align: center;
}

/* trait vers l'étape suivante (sauf la dernière) */
.step::after{
  content: "";
  position: absolute;
  top: calc(var(--step-dot)/2); /* au centre du point */
  left: calc(50% + var(--step-dot)/2);
  width: calc(100% + var(--step-gap) - var(--step-dot));
  height: 2px;
  background: var(--step-line);
}
.step:last-child::after{ display: none; }

/* point (svg) et label */
.step .dot{
  width: var(--step-dot);
  height: var(--step-dot);
  display: block;
  margin: 0 auto 8px;
}
.step .label{
  display: block;
  font-size: 12.5px;
  line-height: 1.2;
  color: #7b8798;
  white-space: nowrap;
}
.step.active .label{
  color: var(--step-active);
  font-weight: 700;
}

/* micro ajustements */
@media (max-width: 380px){
  :root{ --step-gap: 20px; }
  .step .label{ font-size: 12px; }
}
/* --- Sécurité : pas de scroll horizontal --- */
html, body { max-width: 100%; overflow-x: hidden; }

/* --- Bloc titre centré, largeur fluide --- */
.transfer-hero{
  width: 100%;
  max-width: 640px;
  margin: 12px auto 0;
  padding: 0 16px;
  text-align: center;
}
.transfer-title{
  font-size: clamp(60px, 9vw, 72px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: .2px;
  color: #273049;
  margin-bottom: 50px;
}

/* --- Étapes : FLEX + ligne de fond (zéro débordement) --- */
:root{
  --step-dot: 14px;
  --step-gap: 28px;
  --step-line: rgba(39,48,73,.35);
  --step-active: #2fd6be;
}

.transfer-steps{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(12px, 6vw, 40px);
  width: 100%;
  max-width: 560px;
  margin: 0 auto 24px;
  padding: 0 8px 8px;
}

/* on neutralise l'ancien trait qui débordait */
.step::after{ display: none !important; }

/* ligne d’arrière-plan */
.transfer-steps::before{
  content:"";
  position: absolute;
  top: calc(var(--step-dot)/2);
  left: calc(var(--step-dot)/2);
  right: calc(var(--step-dot)/2);
  height: 2px;
  background: var(--step-line);
}

/* points + libellés */
.step{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1; /* au-dessus de la ligne */
}
.step .dot{
  width: var(--step-dot);
  height: var(--step-dot);
  margin-bottom: 8px;
  display: block;
}
.step .label{
  white-space: nowrap;
  font-size: 12.5px;
  line-height: 1.2;
  color: #7b8798;
}
.step.active .label{
  color: var(--step-active);
  font-weight: 700;
}

/* Petits écrans */
@media (max-width: 360px){
  :root{ --step-dot: 12px; }
  .transfer-steps{ gap: 16px; padding: 0 4px 8px; }
  .step .label{ font-size: 12px; }
}
/* ===== Progress "Virement" — version fidèle à la maquette ===== */
:root{
  --step-dot: 18px;              /* taille du rond */
  --step-gap: 42px;              /* espace entre étapes */
  --step-line-thick: 3px;        /* épaisseur de la barre */
  --step-line-color: rgba(39,48,73,.35);
  --step-active: #2fd6be;        /* vert label actif */
  --dot-line-gap: 3px;           /* petit espace entre rond et barre */
}

.transfer-steps{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--step-gap);
  width: 100%;
  max-width: 560px;
  margin: 0 auto 22px;
  padding: 0 4px 8px;
  overflow: hidden;              /* empêche tout débordement horizontal */
}

.step{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  z-index: 1;
}

/* Trait vers l'étape suivante : part du bord droit du rond courant */
.step::after{
  content: "";
  position: absolute;
  top: calc(var(--step-dot)/2 + var(--dot-line-gap));
  left: calc(50% + var(--step-dot)/2 + var(--dot-line-gap));
  height: var(--step-line-thick);
  /* largeur = toute la cellule + le gap flex - le demi-rond de l'étape suivante - 2x gap */
  width: calc(100% + var(--step-gap) - var(--step-dot) - (var(--dot-line-gap)*2));
  background: var(--step-line-color);
}
.step:last-child::after{ display: none; } /* pas de trait après la dernière */

/* Ronds (SVGs fournis) */
.step .dot{
  width: var(--step-dot);
  height: var(--step-dot);
  display: block;
  margin: 0 auto 8px;
}

/* Libellés */
.step .label{
  display: block;
  font-size: 12.5px;
  line-height: 1.2;
  color: #7b8798;
  white-space: nowrap;
}
.step.active .label{
  color: var(--step-active);
  font-weight: 700;
}

/* Ajustements très petits écrans */
@media (max-width: 360px){
  :root{ --step-gap: 28px; --step-dot: 16px; }
  .step .label{ font-size: 12px; }
}
/* ===== Carte Solde ===== */
.balance-card{
  width: 100%;
  max-width: 560px;
  margin: 12px auto 0;
  padding: 16px 18px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.balance-avatar{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #bfbfc4;           /* gris de l’avatar */
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .4px;
  flex: 0 0 54px;
  text-transform: uppercase;
}

.balance-body{ flex: 1; min-width: 0; }

.balance-title{
  font-size: 15px;
  font-weight: 800;
  color: #22252e;
  line-height: 1.1;
}

.balance-iban{
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  color: #98a0ad;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.balance-amount{
  margin-top: 8px;
  color: #1d1f27;
  line-height: 1.1;
  
  
    text-align: right !important;
}
.balance-amount span{
  font-weight: 700;
  font-size: 22px;
}
.balance-amount strong{
  font-weight: 900;
  font-size: 26px;               /* taille proche de ta capture */
}

/* petits écrans : on serre légèrement */
@media (max-width: 360px){
  .balance-card{ padding: 14px 16px; gap: 12px; }
  .balance-avatar{ width: 50px; height: 50px; font-size: 17px; }
  .balance-amount span{ font-size: 20px; }
  .balance-amount strong{ font-size: 24px; }
}
/* ===== Carte formulaire (identique à la maquette) ===== */
.transfer-card{
  width: 100%;
  max-width: 540px;
  margin: 16px auto 26px;
  background: #fff;
  border-radius: 18px;
  padding: 22px 18px 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

.amount-row,
.motif-row{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amount-input{
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 28px;                 /* 0,00 bien visible */
  border: 0;
  outline: 0;
  background: transparent;
  color: #1c1f24;                   /* gris clair comme la capture */
  padding: 8px 44px 8px 44px;       /* laisse la place au symbole € */
}

/* Symbole € à droite du montant */
.amount-euro{
  position: absolute;
  right: 10px;
  font-size: 20px;
  color: #b9bec7;
  pointer-events: none;
}

/* Ligne séparatrice fine */
.form-sep{
  border: 0;
  border-top: 1px solid #eceff3;
  margin: 8px 0 12px;
}

/* Motif centré, gris léger */
.motif-input{
  width: 100%;
  text-align: center;
  font-size: 22px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1b1d20;                   /* placeholder-like */
  padding: 10px 12px;
}

/* Bouton principal (recyclé du style précédent) */
.send-cta{
  display: block;
  width: 70%;
  margin: 8px auto 6px;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: #e94560;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 18px rgba(233,69,96,.25);
  cursor: pointer;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* Lien retour */
.btn-back{
  background: none;
  border: none;
  color: #e94560;
  font-weight: 700;
  display: block;
  margin: 0 auto;
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* ===== Toast (slide du haut, identique à la capture) ===== */
.top-toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(-16px);
  top: calc(var(--header-h, 80px) + 8px);
  background: #3b3940;              /* gris foncé */
  color: #fff;
  padding: 10px 14px 10px ;     /* place pour la barre orange et l’icône */
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  display: none;
  align-items: center;
  gap: 8px;
  z-index: 4000;
  min-width: 260px;
  max-width: min(92vw, 520px);
  font-size: 14px;
  line-height: 1.25;
}
.top-toast.show{
  display: flex;
  animation: toast-slide .24s ease-out;
}
@keyframes toast-slide{
  from{ transform: translateX(-50%) translateY(-24px); opacity: 0; }
  to  { transform: translateX(-50%) translateY(0);     opacity: 1; }
}

/* barre orange à gauche du toast */


/* icône rouge à gauche du message */
.toast-icon{
  color: #ff5b61;
  font-size: 16px;
  margin-left: 8px;
}

/* Accessibilité mobile */
@media (max-width: 360px){
  .amount-input{ font-size: 26px; }
  .motif-input{ font-size: 20px; }
  .send-cta{ width: 78%; }
}
/* ===== Étape 2 : Choisir le bénéficiaire ===== */
.benef-wrap{
  width: 100%;
  max-width: 560px;
  margin: 12px auto 28px;
  padding: 0 16px;
  text-align: center;
}

.transfer-hint{
  max-width: 520px;
  margin: 4px auto 14px;
  font-size: 20px;
  color: #273049;
  font-weight: 700;
  margin-bottom: 30px;
}

.benef-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  padding: 0;
  overflow:hidden;
  text-align:left;
}

.benef-card-header{
  padding:14px 16px;
  font-weight:800;
  font-size:15px;
  color:#6a6f78;
  background:linear-gradient(180deg,#fafbfc, #ffffff);
  border-bottom:1px solid #eef1f4;
}

.benef-body{
  padding:16px;
}

.benef-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:10px 6px 6px;
}

.empty-avatar{
  width:44px;height:44px;border-radius:50%;
  background:#c9cbd1;color:#fff;
  display:grid;place-items:center;
  font-weight:800;font-size:18px;text-transform:lowercase;
}

.empty-text{
  font-size:14px;color:#7c8596;margin-bottom:6px;text-align:center;
}

/* Boutons */
.btn-primary{
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  background:#e94560;
  color:#fff;
  font-weight:700;
  border:none;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(233,69,96,.22);
}

.btn-outline{
  margin:14px auto 0;
  display:inline-block;
  padding:11px 18px;
  border-radius:999px;
  border:2px solid #e94560;
  color:#e94560;
  background:transparent;
  font-weight:700;
  cursor:pointer;
  margin-top: 40px;
}

/* Barre d’étapes : label vert aussi pour les étapes 'done' */
.step.done .label{ color: var(--step-active); font-weight: 700; }
/* ===== Page Bénéficiaire : Titre + Steps ===== */
:root{
  --step-dot: 18px;               /* taille des ronds (comme la maquette) */
  --step-line: rgba(39,48,73,.35);/* couleur de la barre */
  --step-line-thick: 3px;         /* épaisseur de la barre */
  --dot-line-gap: 3px;            /* petit espace entre rond et barre */
  --step-active: #2fd6be;         /* vert de l'étape active */
}

.benef-hero{
  max-width: 640px;
  margin: 12px auto 0;
  padding: 0 16px;
  text-align: center;
}

.benef-title{
  font-size: clamp(56px, 9vw, 72px);
  font-weight: 800;
  line-height: .95;
  color: #273049;
  letter-spacing: .2px;
  margin-bottom: 30px;
}

/* Steps = 2 colonnes + 1 connecteur au milieu (aucune barre avant le 1er point) */
.benef-steps{
  display: grid;
  grid-template-columns: auto 1fr auto; /* point - trait - point */
  align-items: start;
  column-gap: 24px;
  max-width: 520px;
  margin: 0 auto 14px;
  padding: 0 6px 6px;
  overflow: hidden; /* évite tout débordement */
  margin-bottom: 20px;
}

.bstep{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bstep .dot{
  width: var(--step-dot);
  height: var(--step-dot);
  display: block;
  margin-bottom: 8px;
}

.bstep .label{
  font-size: 12.5px;
  line-height: 1.2;
  color: #7b8798;
  white-space: nowrap;
}

.bstep.active .label{
  color: var(--step-active);
  font-weight: 700;
}

/* Barre entre les deux points (pas de barre avant le premier) */
.connector{
  align-self: start;
  margin-top: calc(var(--step-dot)/2 + var(--dot-line-gap));
  height: var(--step-line-thick);
  background: var(--step-line);
  border-radius: 4px;
  width: 100%;
}

/* Petite phrase d’info */
.benef-note{
  font-size: 20px;
  color: #273049;
  font-weight: 600;
  margin-top: 6px;
}
/* ===== Bénéficiaire : carte formulaire ===== */
.benef-form-card{
  width: 100%;
  max-width: 560px;
  margin: 14px auto 28px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  padding: 18px 16px 16px;
}

/* Avatar circulaire gris + SVG centré */
.bf-avatar{
  width: 104px; height: 104px;
  border-radius: 50%;
  background: #d9dbe0;
  display: grid; place-items: center;
  margin: 6px auto 10px;
  margin-bottom: 40px;
}
.bf-avatar img{ width: 90px; height: 90px; display: block; }

/* Radios custom (particulier/entreprise) */
.bf-type{
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 4px 0 10px;
  margin-bottom: 20px;
}
.bf-radio{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: #6a6f78;
  font-weight: 600;
  font-size: 14px;
}
.bf-radio input{ display: none; }
.bf-dot{
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #cfd3da;
  display: inline-block;
  position: relative;
}
.bf-dot::after{
  content:"";
  position: absolute; inset: 2px;
  border-radius: 50%;
  background: #e94560;          /* actif */
  transform: scale(0);
  transition: transform .15s ease;
}
.bf-radio input:checked + .bf-dot{ border-color: #e94560; }
.bf-radio input:checked + .bf-dot::after{ transform: scale(1); }

/* Avertissement */
.bf-warning{
  max-width: 520px;
  margin: 6px auto 12px;
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
  color: #273049;
  margin-bottom: 40px;
}

/* Champs */
.bf-form{ width: 100%; }
.bf-field{
  display: flex;
  align-items: center;
  justify-content: center;
}
.bf-field input{
  width: 100%;
  border: 0; outline: 0;
  background: transparent;
  text-align: center;
  font-size: 22px;
  color: #191c20;              /* placeholder-like */
  padding: 10px 12px;
}

/* Séparateurs */
.bf-sep{
  border: 0;
  border-top: 1px solid #eceff3;
  margin: 6px 0 10px;
}

/* Boutons */
.send-cta{            /* réutilise ton style global, on ajuste juste la largeur */
  width: 70%;
  margin: 8px auto 6px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.btn-back{            /* déjà défini plus haut, on garde */
  display: inline-block;
  margin: 0 auto;
}

/* Petits écrans */
@media (max-width: 360px){
  .bf-avatar{ width: 78px; height: 78px; }
  .bf-avatar img{ width: 32px; height: 32px; }
  .bf-radio{ font-size: 13px; }
  .bf-field input{ font-size: 20px; }
}
/* Parent non-flex pour éviter l'alignement côte à côte */
.benef-form-card .bf-form { display: block !important; }

/* Suivant au-dessus */
.benef-form-card .send-cta{
  display: block !important;
  width: 70%;
  margin: 10px auto 6px; /* espace sous le bouton */
}

/* Retour en-dessous, centré */
.benef-form-card .btn-back{
  display: block !important;
  margin-top: 20px;
  margin-bottom: 20px;
          /* centre horizontalement */
  clear: both;           /* au cas où il y aurait des flottants */
  order: 2;              /* sans effet si le parent n'est pas flex, mais safe */
}
/* ===== Modale SMS ===== */
.sms-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(50, 43, 58, 0.93);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}
.sms-modal-overlay.show{ display: flex; }

.sms-modal{
  width: min(92vw, 360px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  padding: 22px 18px 18px;
  position: relative;
  animation: sms-drop .22s ease-out;
}
@keyframes sms-drop{
  from{ transform: translateY(-14px); opacity: 0; }
  to  { transform: translateY(0);     opacity: 1; }
}

/* croix */
.sms-close{
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: 0;
  color: #e27a86;
  font-size: 20px; line-height: 1;
  cursor: pointer;
}

/* visuel rond comme sur la capture */
.sms-visual{
  display: block;
  width: 92px; height: auto;
  margin: 4px auto 10px;
}

/* titre & description */
.sms-title{
  text-align: center;
  font-weight: 800;
  font-size: 22px;
  color: #273049;
  margin: 6px 0 8px;
  line-height: 1.2;
}
.sms-desc{
  text-align: center;
  font-size: 13.5px;
  color: #5a6272;
  margin: 0 auto 14px;
  max-width: 300px;
}

/* boutons */
.sms-primary{
  display: block;
  width: 74%;
  margin: 0 auto 8px;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: #e94560; /* bouton rose demandé */
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 18px rgba(233,69,96,.25);
  cursor: pointer;
}
.sms-link{
  display: block;
  margin: 0 auto;
  background: none; border: 0;
  color: #e94560;
  font-weight: 700;
  cursor: pointer;
}
/* Modale déjà en place — on ajoute ce qu'il faut pour l'étape 2 */
.sms-step{ text-align:center; }
.sms-code{
  width: 100%;
  text-align:center;
  font-size: 22px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333;
  padding: 12px 10px 6px;
}
.sms-code::placeholder{ color:#c7ccd3; }
.sms-sep{
  border:0; border-top:1px solid #eceff3; margin: 8px 0 14px;
}

/* bouton "Renvoyer" : état désactivé = pilule grise bordée,
   état actif = lien rose comme sur ta 2e capture */
.sms-resend{
  display:block;
  margin: 6px auto 0;
  background: none;
  border: none;
  color: #e94560;
  font-weight: 700;
  cursor: pointer;
}
.sms-resend.disabled{
  cursor: not-allowed;
  color: #b9bec7;
  border: 2px solid #e8e9ee;
  border-radius: 999px;
  padding: 10px 16px;
  width: 74%;
}
/* Toast toujours au-dessus de la modale et du drawer */
.top-toast{
  position: fixed;
  left: 50%;
  top: calc(var(--header-h, 80px) + 8px);
  transform: translateX(-50%);
  z-index: 10050 !important;   /* > .sms-modal-overlay (5000), > drawer, etc. */
  pointer-events: none;         /* ne bloque pas les clics */
}

/* (les autres styles du toast restent identiques) */
/* tout élément HTML avec l’attribut hidden est masqué */
[hidden] { display: none !important; }
 #step2 {
    display: none !important;
  }
  /* Carte grisée et désactivée */
.send-card.disabled {
  position: relative;
  opacity: 0.45;
  pointer-events: none; /* empêche tout clic */
  filter: grayscale(0.8);
}

/* Autocollant "Indisponible" */
.unavailable-badge {
  position: absolute;
  top: 12px;
  right: -18px;
  background: #e94560;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transform: rotate(10deg);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
}
.modal-desc {
  font-size: 16px;
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}
/* ====== MODALE "photo 2" — overrides précis ====== */
#couponInvalidModal.modal-overlay{
  align-items: center !important;
  justify-content: center !important;
  background: rgba(50, 43, 58,0.93) !important;
}

#couponInvalidModal .modal{
  width: 92%;
  max-width: 380px;                 /* largeur proche de la photo 2 */
  border-radius: 10px;
  padding: 18px 20px 20px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

/* Header sobre: titre à gauche, croix discrète */
#couponInvalidModal .modal-header{
  margin-bottom: 10px !important;
  padding: 0;
}
#couponInvalidModal .modal-title{
  color: #222 !important;           /* noir/gris foncé */
  font-weight: 600 !important;      /* pas ultra-bold */
  font-size: 22px !important;       /* plus grand */
  margin: 0 !important;
  text-align: left !important;
}
#couponInvalidModal .modal-close{
  color: #666 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
#couponInvalidModal .modal-close:hover{ color:#000 !important; }

/* Texte de contenu aligné à gauche, gris sobre */
#couponInvalidModal .modal-desc{
  text-align: left !important;
  color: #4a4f57 !important;
  font-size: 14px !important;
  margin: 0 0 18px !important;
}

/* Bouton petit, à droite (pas full width) */
#couponInvalidModal .modal-actions{
  display: flex !important;
  justify-content: flex-end !important;
  padding-top: 2px;
}
#couponInvalidModal .btn-validate{
  width: auto !important;           /* stop full width */
  padding: 8px 18px !important;     /* pilule compacte */
  font-size: 14px !important;
  border-radius: 999px !important;
  background: #e94560 !important;
  box-shadow: 0 8px 16px rgba(233,69,96,.20);
}
#couponInvalidModal .btn-validate:hover{ opacity:.9; }
/* ====== Gérer mes cartes (mise en page "photo 2") ====== */
.cards-manage{
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

/* Titre énorme multi-ligne */
.cm-title{
  font-size: clamp(44px, 9vw, 72px);
  line-height: .95;
  font-weight: 800;
  color: #273049;
  letter-spacing: .2px;
  margin: 10px 0 8px;
}

/* Sous-titre gris centré */
.cm-subtitle{
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: #6c7485;
  margin-bottom: 18px;
}

/* Liste + item */
.cm-list{ width: 100%; margin: 6px auto 10px; }
.cm-item{
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border-radius: 22px;
  padding: 12px 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* Avatar “KG” rond gris */
.cm-avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #d1d4db;
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 18px; letter-spacing: .3px;
  flex: 0 0 44px;
  text-transform: uppercase;
}

/* Texte carte */
.cm-body{ flex: 1; text-align: left; min-width: 0; }
.cm-name{
  font-size: 15px; font-weight: 800; color: #2b2f3a; line-height: 1.1;
}
.cm-sub{
  margin-top: 4px;
  font-size: 12.5px; color: #9aa3b1; letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 6px;
}
.cm-ok{
  width: 10px; height: 10px; border-radius: 50%;
  background: #2fd6be; /* petit point vert “ok” */
  display: inline-block;
}

/* Bouton “X” gris clair à droite */
.cm-remove{
  border: none; background: #eef0f4;
  width: 26px; height: 26px; border-radius: 50%;
  color: #7c8290; font-size: 16px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
}
.cm-remove:hover{ background:#e7e9ee; }

/* Lien Retour (rose, centré) */
.cm-back{
  display: inline-block;
  margin: 22px auto 0;
  color: #e94560; text-decoration: none;
  font-weight: 700;
}
.cm-back:hover{ text-decoration: underline; }
/* Overrides / styles pour la carte sans solde */
.card-with-info { position: relative; overflow: hidden; }

/* zone qui contient le texte de la carte */
.card-details {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  pointer-events: none; /* évite d'interférer avec le clic sur la carte */
}

/* Numéro (masqué) centré haut */
.card-number {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 3px 10px rgba(0,0,0,.5);
  font-size: 18px;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

/* ligne inférieure : Exp / CVV / Nom */
.card-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

/* petites colonnes */
.card-left, .card-mid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* label (EXP, CVV) */
.card-label {
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 4px;
}

/* valeur (01/27, ***) */
.card-value {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* nom du titulaire (droite) */
.card-right { flex: 1; text-align: right; }
.card-owner {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* ajuste le badge-check (déjà dans ton CSS mais on s'assure) */
.card-with-info .badge-check {
  top: 14px;
  left: 14px;
  width: 38px;
  height: 38px;
}

/* responsive : réduit les textes sur petits écrans */
@media (max-width: 420px) {
  .card-number { font-size: 16px; }
  .card-value { font-size: 13px; }
  .card-owner { font-size: 11px; letter-spacing: .4px; }
  .bank-card { width: 300px; height: 180px; } /* si besoin */
}
/* Base */
.card-with-info{ position: relative; overflow: hidden; }
.card-details{
  position: absolute; inset: 0;
  pointer-events: none;
  font-family: 'Montserrat Alternates', sans-serif;
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* Numéro – aligné à droite, en haut */
.card-number{
  position: absolute;
  top: 34%;
  right: 18px;
  font-weight: 800;
  font-size: 16px;          /* ajuste si besoin */
  letter-spacing: 2px;
  text-align: right;
}

/* Bloc EXP — bas gauche */
.card-exp{
  position: absolute;
  left: 18px;
  bottom: 56px;             /* au-dessus du nom */
}
.card-label{
  font-size: 10px;
  letter-spacing: .6px;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.card-value{
  font-size: 14px;
  font-weight: 800;
}

/* Bloc CVV — bas milieu */
.card-cvv{
  position: absolute;
  left: 46%;
  bottom: 56px;
  transform: translateX(-50%);
}

/* Nom — bas gauche */
.card-owner{
  position: absolute;
  left: 18px;
  bottom: 22px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* Badge check déjà présent, on confirme la taille/placement */
.card-with-info .badge-check{
  position: absolute;
  top: 12px; left: 12px;
  width: 32px; height: 32px;
}

/* Ajustements si ta carte est plus petite/grande */
@media (max-width: 420px){
  .card-number{ font-size: 15px; right: 16px; top: 33%; }
  .card-exp, .card-cvv{ bottom: 52px; }
  .card-owner{ bottom: 20px; }
}
.card-number {
  position: absolute;
  top: 48%; /* AVANT : 34% → descend un peu le numéro */
  right: 18px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 2px;
  text-align: right;
}
.card-cvv {
  position: absolute;
  left: 36%; /* avant 46% → décale plus à gauche */
  bottom: 56px;
  transform: translateX(-50%);
}
/* ====== Section Paramètres ====== */
.card-settings{
  width:100%;
  max-width:540px;
  margin: 10px auto 22px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  padding:16px 16px 8px;
  font-family:'Montserrat Alternates', sans-serif;
}

.cs-title{
  font-size:24px;
  font-weight:800;
  color:#273049;
  letter-spacing:.2px;
  margin: 2px 4px 10px;
}

.cs-list{
  list-style:none;
  margin:0;
  padding:0;
}

.cs-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 4px;
}
.cs-item + .cs-item{ border-top:1px solid #eef1f4; }

.cs-text{ text-align:left; }
.cs-label{
  font-size:15px;
  font-weight:800;
  color:#2b2f3a;
  line-height:1.1;
}
.cs-sub{
  margin-top:4px;
  font-size:12.5px;
  font-weight:600;
  color:#9aa3b1;
}

/* Interrupteur */
.switch{ position:relative; width:48px; height:28px; flex:0 0 48px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{
  position:absolute; inset:0;
  background:#e9edf3;
  border-radius:999px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
  transition: background .2s ease;
}
.switch .slider::before{
  content:"";
  position:absolute;
  left:4px; top:50%;
  transform:translateY(-50%);
  width:20px; height:20px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  transition: transform .2s ease;
}
.switch input:checked + .slider{
  background: linear-gradient(90deg, #e94560 0%, #ee7528 100%);
}
.switch input:checked + .slider::before{
  transform: translate(20px, -50%);
}

/* Ligne CTA avec bouton rose */
.cs-item--cta .cs-btn{
  background: #e94560;
  color:#fff;
  border:0;
  border-radius:999px;
  padding:10px 18px;
  font-weight:700;
  font-size:14px;
  box-shadow:0 10px 18px rgba(233,69,96,.25);
  cursor:pointer;
}
.cs-item--cta .cs-btn:hover{ filter:brightness(.98); }
/* Modale verrouillage : centrée, image + titres comme la capture */
#lockModal.modal-overlay{
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(50,43,58,.93);
  z-index: 6000;
}
#lockModal.active{ display:flex; }

#lockModal .modal{
  width: min(92vw, 360px);
  border-radius: 10px;
  padding: 22px 18px 18px;
  text-align: center;
  animation: pop-in .22s ease-out;
}
#lockModal .modal-close{
  position:absolute; right:14px; top:10px;
  background:none; border:0; color:#e27a86; font-size:20px; cursor:pointer;
}
#lockModal .modal-visual{
  display:block; width:96px; height:auto; margin: 6px auto 12px;
}
#lockModal .modal-title{
  color:#e94560; font-weight:800; font-size:22px; margin: 4px 0 10px;
}
#lockModal .modal-desc{
  color:#5a6272; font-size:13.5px; max-width: 300px; margin: 0 auto 16px;
}
#lockModal .modal-actions{ display:flex; flex-direction:column; gap:8px; }
#lockModal .btn-validate{ width:74%; margin:0 auto; }
#lockModal .btn-cancel{
  background:none; border:0; color:#e94560; font-weight:700; cursor:pointer;
}
/* Taille du visuel (SVG) dans la modale "Verrouiller la carte" */
#lockModal .modal-visual {
  display: block;
  width: 96px;     /* ajuste ici (ex. 110px si tu le veux plus grand) */
  height: auto;    /* garde les proportions du SVG */
  margin: 6px auto 12px;
}

/* Un peu plus grand sur écrans ≥ 420px (optionnel) */
@media (min-width: 420px) {
  #lockModal .modal-visual { width: 112px; }
}