/* GENERAL */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    margin: 0;
    background: #f4f7f9;
    color: #1d2d50;
}

.page-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.card {
    background: white;
    padding: 28px;
    border-radius: 20px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    text-align: center;
}

.title {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 700;
}

/* Input */
.input-group {
    text-align: left;
    margin-bottom: 15px;
}
.input-group input {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #ccd7e0;
    background: #f8fafc;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #1ea7a0, #2bc4b3);
    border: none;
    color:white;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-size: 16px;
    cursor:pointer;
    margin-top:10px;
}
.btn-secondary {
    background: #e3e7eb;
    border:none;
    padding:10px 15px;
    border-radius:10px;
}

.link {
    margin-top: 15px;
    font-size:14px;
}

.back-link {
    padding:15px;
    font-size:16px;
    display:block;
}

/* Wallet Cards */
.cards-container {
    padding:20px;
}
.wallet-card {
    background: white;
    padding:20px;
    border-radius:18px;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    margin-bottom:15px;
}
.wallet-progress {
    background:#e6edf2;
    height:8px;
    border-radius:5px;
}
.wallet-progress div {
    height:100%;
    background:#1ea7a0;
    border-radius:5px;
}

/* Points grid */
.points-grid {
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:10px;
}
.point-btn {
    background:white;
    padding:12px;
    border-radius:12px;
    border:1px solid #d7e0e8;
}
.point-btn.big {
    grid-column: span 5;
}

/* Popup */
.popup {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.5);
    display:flex;
    justify-content:center;
    align-items:center;
}
.hidden { display:none; }
.popup-card {
    background:white;
    padding:25px;
    border-radius:18px;
    width:90%;
    max-width:340px;
    text-align:center;
}

/* Anti-screenshot bar */
.security-bar {
    height:4px;
    background:linear-gradient(90deg, #1ea7a0, #2bc4b3);
    animation: slide 1s infinite alternate ease-in-out;
}
@keyframes slide {
    from { width:20%; }
    to { width:100%; }
}
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.app-logo {
    width: 180px !important;
    height: auto !important;
    display: block;
    margin: 0 auto 10px auto;
}
.return-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1ea7a0;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 15px;
}

.return-link svg {
    width: 18px;
    height: 18px;
}

.return-link:hover {
    opacity: 0.7;
}
/* --- BOUTON HAMBURGER FLOTTANT --- */
.hamburger-btn {
    position: fixed;
    top: 15px;
    left: 15px;
    width: 48px;
    height: 48px;
    background: #1ea7a0;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2000;
}

.hamburger-btn span {
    width: 24px;
    height: 3px;
    background: white;
    display: block;
    border-radius: 2px;
    margin: 4px 0;
}

.menu-overlay {
    display: none;
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.5);
    z-index: 1500;
}

.sidebar {
    transition: transform 0.3s ease;
}

.sidebar.hidden-mobile {
    transform: translateX(-260px);
}

@media(max-width: 900px){
    .hamburger-btn {
        display:flex;
    }
    .sidebar {
        position: fixed;
        left:0; top:0;
        height:100%;
        z-index:1600;
    }
    .sidebar.hidden-mobile {
        transform: translateX(-260px);
    }
}
/* =========================================================
   MODAL NUMÉRIQUE (PAVÉ POINTS) — MANQUAIT ICI ❗
   ========================================================= */

#numericModal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;               /* IMPORTANT */
  justify-content: center;
  align-items: center;
  z-index: 3500;
}

.numeric-box{
  background: #fff;
  width: 320px;
  max-width: 90%;
  border-radius: 18px;
  padding: 20px;
  border: 3px solid #1ea7a0;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

#numericDisplay{
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 15px;
  color: #0b3a42;
}

.numpad-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.numpad-btn{
  padding: 14px 0;
  text-align: center;
  background: #e5f9f6;
  border-radius: 12px;
  border: 1px solid #1ea7a0;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.numpad-btn:hover{
  background:#1ea7a0;
  color:white;
}

.modal-actions{
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}

.cancel-btn,
.ok-btn{
  flex: 1;
  padding: 12px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
}

.cancel-btn{
  background: #eee;
  border: none;
  margin-right: 10px;
}

.ok-btn{
  background: #2ec7b9;
  color: white;
  border: none;
}
/* =====================================================
   AUTH CLIENT (LOGIN / REGISTER) — SCOPE SÉCURISÉ
   ===================================================== */

body.auth-client{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  background:#f4fbfb;
}

.auth-client .card{
  background:#fff;
  width:420px;
  max-width:92%;
  padding:34px 30px;
  border-radius:18px;
  box-shadow:0 22px 50px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
}

.auth-client h1{
  font-size:22px;
  font-weight:800;
  margin-bottom:22px;
  text-align:center;
}

.auth-client .form{
  width:100%;
}

.auth-client .field{
  width:100%;
  margin-bottom:14px;
}

.auth-client label{
  display:block;
  text-align:center;
  font-size:14px;
  font-weight:600;
  margin-bottom:6px;
  color:#0b3a43;
}

.auth-client input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #dce3ea;
  font-size:14px;
}

.auth-client input:focus{
  border-color:#2ec7b9;
  outline:none;
}

/* Password + eye */
.auth-client .password-wrap{
  position:relative;
  width:100%;
}

.auth-client .password-wrap input{
  padding-right:44px;
}

.auth-client .password-wrap span{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  opacity:.55;
  font-size:16px;
}

/* Button */
.auth-client button{
  width:100%;
  margin-top:18px;
  padding:14px;
  border:none;
  border-radius:12px;
  background:#2ec7b9;
  color:#fff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

.auth-client button:hover{
  background:#26b1a4;
}

.auth-client .footer{
  margin-top:18px;
  font-size:14px;
  text-align:center;
}
.auth-client .footer a{
  color:#2ec7b9;
  font-weight:600;
  text-decoration:none;
}