*{margin:0;padding:0;box-sizing:border-box}
    body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1e3a5f 0%,#2d1b4e 50%,#1a2332 100%);min-height:100vh;padding:20px}
    .container{max-width:1400px;margin:0 auto}
    .header{text-align:center;color:#fff;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center}
    .header h1{font-size:2.6em;margin-bottom:10px;text-shadow:2px 2px 5px rgba(0,0,0,.3);width:100%;text-align:center}
    .header p{font-size:1.1em;opacity:.95;width:100%;text-align:center}
    #mois-actuel{font-size:1.3em!important;font-weight:700!important;margin:10px 0!important;width:100%;text-align:center}
    .main-content{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}

    /* ✅ FIX largeur sûre des blocs principaux */
    .main-content{width:100%;max-width:100%}
    .main-content > *{min-width:0} /* empêche les enfants de forcer la grille à déborder */

    @media (max-width:968px){.main-content{grid-template-columns:1fr}}

    .card{background:#fff;border-radius:15px;padding:25px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
    .card-title{font-size:1.4em;margin-bottom:18px;color:#333;border-bottom:3px solid #10B981;padding-bottom:8px}

    /* ✅ FIX : empêcher toute carte/bloc de dépasser en mobile */
    .card,.chart-container,.api-config,.chatbot{max-width:100%;min-width:0}

    .category-header{
      background:linear-gradient(135deg,#10B981 0%,#3B82F6 100%);
      color:#fff;
      padding:15px 20px;
      border-radius:10px;
      cursor:pointer;
      margin-bottom:15px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      transition:transform .2s;
      font-weight:700;
      font-size:1.1em;
    }
    .category-header:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(16,185,129,.4)}
    .category-header .icon{font-size:1.3em}
    .category-header .toggle{font-size:1.2em;transition:transform .3s}
    .category-header.active .toggle{transform:rotate(180deg)}

    .category-content{
      max-height:0;
      overflow:hidden;
      transition:max-height .4s ease;
      padding:0 10px;
    }
    .category-content.active{
      max-height:2000px;
      padding:10px;
    }

    .category-list-container{
      max-height:400px;
      overflow-y:auto;
      padding-right:5px;
      margin-bottom:10px;
    }

    .category-list-container::-webkit-scrollbar{width:8px}
    .category-list-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}
    .category-list-container::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#10B981 0%,#3B82F6 100%);border-radius:10px}

    .entry-item{
      display:flex;
      flex-direction:row;
      align-items:center;
      gap:8px;
      margin-bottom:8px;
      padding:8px 10px;
      background:#f9f9f9;
      border-radius:8px;
      border-left:4px solid #10B981;
      transition:all 0.3s ease;
      min-height:44px;
      flex-wrap:nowrap;
      min-width:0; /* ✅ FIX : éviter débordement dans grid/flex */
    }
    .entry-item input{
      padding:8px 10px;
      border:2px solid #e0e0e0;
      border-radius:6px;
      font-size:14px;
      transition:border-color .3s;
      min-height:44px;
      min-width:0; /* ✅ */
    }
    .entry-item input.entry-name{
      flex:2;
      min-width:120px;
    }
    .entry-item input.entry-amount{
      flex:1;
      min-width:140px;
      max-width:200px;
    }
    .entry-item input:focus{outline:none;border-color:#10B981}

    .entry-item input[type="text"][inputmode="decimal"]{
      text-align:right;
      font-weight:600;
      color:#333;
    }

    .montant-wrapper{
      position:relative !important;
      display:inline-block !important;
      width:100% !important;
      min-width:0; /* ✅ */
    }

    .euro-symbole{
      display:none !important;
    }

    .entry-item input[inputmode="decimal"]{
      padding-right:12px !important;
      padding-left:12px !important;
      text-align:right;
    }

    .validate-btn{
      background:#4caf50;
      color:#fff;
      border:none;
      padding:10px 12px;
      border-radius:6px;
      cursor:pointer;
      font-weight:600;
      font-size:16px;
      transition:all .2s;
      min-width:44px;
      min-height:44px;
      flex-shrink:0;
    }
    .validate-btn:hover{background:#45a049;transform:scale(1.1)}

    .add-montant-btn{
      background:#2196F3;
      color:#fff;
      border:none;
      padding:10px 14px;
      border-radius:6px;
      cursor:pointer;
      font-weight:700;
      font-size:18px;
      transition:all .2s;
      line-height:1;
      min-width:44px;
      min-height:44px;
      flex-shrink:0;
    }
    .add-montant-btn:hover{background:#1976D2;transform:scale(1.15)}

    .delete-btn{
      background:#f44336;
      color:#fff;
      border:none;
      padding:10px 12px;
      border-radius:6px;
      cursor:pointer;
      font-weight:600;
      transition:background .2s;
      min-width:44px;
      min-height:44px;
      flex-shrink:0;
    }
    .delete-btn:hover{background:#d32f2f}

    .add-entry-btn{
      background:#e8f5e9;
      color:#4caf50;
      border:2px dashed #4caf50;
      padding:12px;
      border-radius:8px;
      cursor:pointer;
      text-align:center;
      font-weight:600;
      margin-top:10px;
      transition:all .3s;
    }
    .add-entry-btn:hover{background:#4caf50;color:#fff}

    .category-total{
      background:#f5f5f5;
      padding:12px 15px;
      border-radius:8px;
      margin-top:15px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-weight:700;
      font-size:1.1em;
    }

    /* SOUS-CATÉGORIES */
    .sub-category{
      margin:15px 0;
      border-radius:10px;
      overflow:hidden;
    }

    .sub-category-header{
      padding:12px 15px;
      border-radius:8px;
      margin-bottom:10px;
      font-size:1em;
    }

    .sub-category-list-container{
      max-height:300px;
      overflow-y:auto;
      padding:5px;
      margin-bottom:10px;
    }

    .sub-category-list-container::-webkit-scrollbar{width:6px}
    .sub-category-list-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}
    .sub-category-list-container::-webkit-scrollbar-thumb{background:#10B981;border-radius:10px}

    .sub-total{
      background:#f0f0f0;
      padding:10px 12px;
      border-radius:6px;
      margin-top:10px;
      display:flex;
      justify-content:space-between;
      font-weight:600;
      font-size:0.95em;
      color:#666;
    }

    .color-blue{background:#e3f2fd}.color-gray-light{background:#f5f5f5}.color-gray-medium{background:#eeeeee}.color-green{background:#e8f5e9}.color-red{background:#ffebee}
    .budget-section{padding:15px;border-radius:10px;margin-bottom:15px}
    .budget-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
    .budget-label{font-weight:600;color:#333}.budget-value{font-size:1.2em;font-weight:700}
    .budget-value.negative{color:#f44336 !important}

    .health-indicator{padding:18px;border-radius:10px;text-align:center;font-size:1.1em;font-weight:700;margin:16px 0}
    .progress-bar{width:100%;height:28px;background:#e0e0e0;border-radius:15px;overflow:hidden;margin:12px 0}
    .progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);transition:width .5s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}


.archives-section{
  margin-top:30px;
  border-top:2px solid #e0e0e0;
  padding-top:20px;
}

.archives-title{
  font-size:1.1em;
  font-weight:700;
  color:#333;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  background:#f5f5f5;
  border-radius:8px;
  transition:background .2s;
}
.archives-title:hover{background:#e8e8e8}

/* GRAPHIQUES */
.chart-container{
  background:#fff;
  border-radius:15px;
  padding:25px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  margin-bottom:20px;
  width:100%;
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
}

.chart-wrapper{
  position:relative;
  height:300px;
}

/* API CONFIG */
.api-config{
  background:#fff3cd;
  border:2px solid #ffc107;
  border-radius:10px;
  padding:15px;
  margin-bottom:20px;
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
  transition:all .3s ease;
}
.api-config.hidden{display:none}
.api-config h3{color:#856404;margin-bottom:10px}
.api-config input{
  width:100%;
  padding:10px;
  margin:10px 0;
  border:2px solid #ffc107;
  border-radius:6px;
  font-size:15px;
}
.api-config .status{
  padding:8px 12px;
  border-radius:6px;
  font-weight:600;
  margin-top:10px;
  display:inline-block;
}
.api-config .status.connected{background:#d4edda;color:#155724}
.api-config .status.disconnected{background:#f8d7da;color:#721c24}

.btn{
  background:linear-gradient(135deg,#10B981 0%,#3B82F6 100%);
  color:#fff;
  border:none;
  padding:15px 30px;
  font-size:16px;
  border-radius:8px;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  width:100%;
  margin-top:10px;
  min-height:48px;
  font-weight:700;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,166,166,.4)}

/* CHATBOT */
.chatbot{
  background:#fff;
  border-radius:15px;
  padding:25px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  margin-top:20px;
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
}

.chat-messages{
  height:380px;
  overflow-y:auto;
  border:2px solid #e0e0e0;
  border-radius:10px;
  padding:16px;
  margin-bottom:16px;
  background:#f9f9f9;
}

.message{
  margin-bottom:16px;
  padding:14px 18px;
  border-radius:12px;
  max-width:85%;
  line-height:1.6;
}

.message-bot{
  background:#3B82F6;
  color:#fff;
  margin-right:auto;
  white-space:pre-line;
}

.message-user{
  background:#00d4d4;
  color:#1a1a1a;
  margin-left:auto;
  font-weight:600;
  border:3px solid #10B981;
}

.chat-input-group{
  display:flex;
  gap:10px;
  margin-top:10px;
  /* Mobile-first: dimensions explicites pour PWA/WebView */
  align-items:stretch;
  min-height:48px;
}
.chat-input{
  /* Remplacement de flex:1 par width explicite pour compatibilité WebView */
  flex:1 1 auto;
  min-width:0; /* Important pour flexbox sur mobile */
  padding:12px 15px;
  border:2px solid #e0e0e0;
  border-radius:8px;
  font-size:16px; /* 16px minimum pour éviter zoom iOS */
  line-height:1.5;
  min-height:48px; /* Touch-friendly */
  transition:border-color .3s;
  /* Éviter resize manuel */
  resize:none;
  /* Comportement textarea-like si besoin */
  overflow-y:auto;
  max-height:120px;
}
.chat-input:focus{outline:none;border-color:#10B981}

.btn-send{
  /* Dimensions fixes pour stabilité mobile/PWA */
  padding:12px 18px;
  background:linear-gradient(135deg,#10B981 0%,#3B82F6 100%);
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  font-size:15px;
  /* Largeur fixe pour éviter déformation sur mobile */
  min-width:100px;
  max-width:120px;
  white-space:nowrap;
  /* Touch-friendly */
  min-height:48px;
  /* Flexbox pour centrer le texte */
  display:flex;
  align-items:center;
  justify-content:center;
  /* Éviter shrink sur mobile */
  flex-shrink:0;
  transition:all .2s;
}
.btn-send:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,166,166,.3)}
.btn-send:disabled{opacity:.6;cursor:not-allowed}

.typing-indicator{
  display:none;
  padding:10px;
  color:#666;
  font-style:italic;
}
.typing-indicator.active{display:block}

.quick-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:15px;
}
.quick-btn{
  background:#e3f2fd;
  color:#1976d2;
  border:2px solid #1976d2;
  padding:8px 16px;
  border-radius:20px;
  cursor:pointer;
  font-size:14px;
  transition:all .2s;
}
.quick-btn:hover{background:#1976d2;color:#fff}

/* Bouton de style */
.style-btn{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
  border:none;
  padding:10px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size:16px;
  transition:all .2s;
  min-width:44px;
  min-height:44px;
  flex-shrink:0;
}
.style-btn:hover{
  transform:scale(1.1);
  box-shadow:0 4px 12px rgba(102,126,234,0.4);
}

/* Menu de personnalisation */
.style-menu{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:15px;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  z-index:10000;
  width:90%;
  max-width:400px;
  animation:fadeIn 0.3s ease;
}

@keyframes fadeIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(0.9)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.style-menu-header{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
  padding:15px 20px;
  border-radius:15px 15px 0 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  font-size:1.1em;
}

.close-style-menu{
  background:transparent;
  border:none;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  padding:0;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:background 0.2s;
}
.close-style-menu:hover{
  background:rgba(255,255,255,0.2);
}

.style-menu-content{
  padding:20px;
  max-height:70vh;
  overflow-y:auto;
}

.style-section{
  margin-bottom:20px;
}

.style-section label{
  display:block;
  font-weight:600;
  margin-bottom:10px;
  color:#333;
}

.style-buttons{
  display:flex;
  gap:10px;
}

.style-option-btn{
  flex:1;
  padding:10px;
  background:#f0f0f0;
  border:2px solid #ddd;
  border-radius:8px;
  cursor:pointer;
  font-size:18px;
  transition:all 0.2s;
}
.style-option-btn:hover{
  background:#e0e0e0;
  border-color:#667eea;
}
.style-option-btn.active{
  background:#667eea;
  color:#fff;
  border-color:#667eea;
}

.color-picker-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.color-btn{
  width:100%;
  height:40px;
  border:3px solid #fff;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.2s;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
}
.color-btn:hover{
  transform:scale(1.1);
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.emoji-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
}

.emoji-btn{
  padding:10px;
  background:#f9f9f9;
  border:2px solid #e0e0e0;
  border-radius:8px;
  cursor:pointer;
  font-size:20px;
  transition:all 0.2s;
}
.emoji-btn:hover{
  background:#667eea;
  border-color:#667eea;
  transform:scale(1.2);
}

.reset-style-btn{
  width:100%;
  padding:12px;
  background:#f44336;
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  transition:all 0.2s;
}
.reset-style-btn:hover{
  background:#d32f2f;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(244,67,54,0.3);
}

/* Overlay pour fermer le menu en cliquant à côté */
.style-menu-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:9999;
}

/* Section Export CSV */
.export-section{
  margin-top:20px;
  padding:15px;
  background:#f0f9ff;
  border-radius:10px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.export-csv-btn, .export-pdf-btn{
  width:100%;
  padding:15px 20px;
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:all 0.3s;
}

.export-csv-btn{
  background:linear-gradient(135deg,#10B981 0%,#3B82F6 100%);
  box-shadow:0 4px 12px rgba(0,166,166,0.3);
}

.export-pdf-btn{
  background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);
  box-shadow:0 4px 12px rgba(231,76,60,0.3);
}

.export-csv-btn:hover, .export-pdf-btn:hover{
  transform:translateY(-2px);
}

.export-csv-btn:hover{
  box-shadow:0 6px 20px rgba(0,166,166,0.4);
}

.export-pdf-btn:hover{
  box-shadow:0 6px 20px rgba(231,76,60,0.4);
}

.export-csv-btn:active, .export-pdf-btn:active{
  transform:translateY(0);
}

.export-info{
  margin-top:10px;
  font-size:13px;
  color:#666;
  font-style:italic;
}

/* Notification Export */
.export-notification{
  position:fixed;
  top:20px;
  right:20px;
  background:#fff;
  padding:20px 25px;
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,0.3);
  display:flex;
  align-items:center;
  gap:15px;
  z-index:10001;
  opacity:0;
  transform:translateY(-20px);
  transition:all 0.3s ease;
  border-left:5px solid #4caf50;
}

.export-notification strong{
  color:#4caf50;
  font-size:16px;
}


/* Bouton + pour ajouter des montants */
.add-montant-btn {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
}

.add-montant-btn:hover {
  background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(33, 150, 243, 0.4);
}

.add-montant-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
}

/* ===== SYSTÈME DE COMPTES MULTIPLES ===== */
.accounts-nav {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  color: white;
}

.accounts-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.accounts-nav-header h3 {
  margin: 0;
  font-size: 1.4em;
  color: white;
}

.btn-new-account {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid white;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95em;
  transition: all 0.3s ease;
}

.btn-new-account:hover {
  background: white;
  color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

.accounts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

.account-item {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(10px);
}

.account-item:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.account-item.active {
  background: white;
  color: #667eea;
  border-color: white;
  font-weight: 700;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.account-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.account-icon {
  font-size: 1.5em;
}

.account-name {
  font-size: 1.1em;
  font-weight: 600;
}

.account-item.active .account-name {
  color: #667eea;
}

.account-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.account-item:hover .account-actions {
  opacity: 1;
}

.account-item.active .account-actions {
  opacity: 1;
}

.btn-edit-account,
.btn-delete-account {
  background: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
  transition: all 0.2s ease;
}

.account-item.active .btn-edit-account,
.account-item.active .btn-delete-account {
  background: rgba(102, 126, 234, 0.2);
}

.btn-edit-account:hover {
  background: #2196F3;
  transform: scale(1.1);
}

.btn-delete-account:hover {
  background: #f44336;
  transform: scale(1.1);
}

/* Responsive pour les comptes */
@media (max-width: 768px) {
  .accounts-list {
    grid-template-columns: 1fr;
  }
  
  .accounts-nav-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .btn-new-account {
    width: 100%;
  }
}

/* NOUVELLES ANIMATIONS ET STYLES POUR NOTES ET PERSONNALISATION */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes slideInScale {
  from { transform: scale(0.9) translateY(-20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* Styles pour les notes - indicateur caché car il gêne le bouton style */
.note-indicator { display: none !important; }

/* Styles pour les champs de notes dans le popup */
.note-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.95em;
  transition: border-color 0.3s;
}
.note-input:focus {
  border-color: #10B981;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 166, 166, 0.1);
}

/* Amélioration des boutons des entrées */
.entry-item button { transition: all 0.3s ease; }
.entry-item button:hover { transform: scale(1.1); }
.add-montant-btn:hover { background: #4caf50; color: white; }
.style-btn:hover { background: #ff9800; transform: scale(1.1) rotate(10deg); }
.validate-btn:hover { background: #2196f3; color: white; }
.delete-btn:hover { background: #f44336; color: white; }

/* Styles pour la personnalisation */
.color-preset-btn {
  width: 30px; height: 30px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.2s ease;
}
.color-preset-btn:hover { transform: scale(1.2); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.highlight-preset {
  padding: 6px 12px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.2s ease;
}
.highlight-preset:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.highlight-preset[data-selected="true"] { border: 2px solid #10B981 !important; box-shadow: 0 0 0 3px rgba(0, 166, 166, 0.2); }

/* Responsive design amélioré */
@media (max-width: 768px) {
  .montant-editor-popup, .style-menu-popup { width: 95%; max-width: none; margin: 10px; }
  .note-indicator { right: 100px; }
  .color-preset-btn { width: 25px; height: 25px; }
  .highlight-preset { padding: 4px 8px; font-size: 0.9em; }
}
/* ======= FIX RESPONSIVE MOBILE (<= 1024px / 768px / 560px) ======= */
@media (max-width: 1024px) {
  .card { padding: 18px; }
  .entry-item { gap: 8px; }
}
/* Empiler les champs sur mobile (<=640px) */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .container { max-width: 100%; padding: 0 10px; }
  .main-content { grid-template-columns: 1fr !important; }

  /* Chaque entrée passe en colonne */
  .entry-item {
    grid-template-columns: 1fr; /* pas d'!important */
    align-items: stretch;
    padding: 12px;
  }

  .entry-item input,
  .entry-item select,
  .entry-item textarea { width: 100%; }

  /* Montant + symbole € */
  .montant-wrapper { width: 100% !important; }

  /* Groupe de boutons */
  .entry-item button {
    width: auto;
    min-width: 44px;
    padding: 10px 12px;
  }
  .entry-item .actions,
  .entry-item .buttons,
  .entry-item > .btn-group {
    display: flex; gap: 8px; flex-wrap: wrap;
  }

  .category-list-container,
  .sub-category-list-container { max-height: 300px; }

  .card-title { font-size: 1.2em; }
  .category-header { padding: 12px 14px; }
}

/* Ultra-petit écran */
@media (max-width: 560px) {
  .header h1 { font-size: 1.6em; }
  .btn, .btn-send { min-height: 44px; }
  .progress-bar { height: 22px; }
  
  /* Corrections spécifiques Coach IA pour mobile/PWA */
  .chat-input-group {
    gap: 8px;
    margin-top: 12px;
  }
  
  .chat-input {
    padding: 10px 12px;
    font-size: 16px; /* Minimum 16px pour iOS */
    min-height: 44px;
  }
  
  .btn-send {
    min-width: 90px;
    max-width: 110px;
    padding: 10px 14px;
    font-size: 14px;
    min-height: 44px;
  }
}

/* Media query spécifique pour PWA en mode standalone */
@media (display-mode: standalone) {
  .chat-input-group {
    /* Renforcement pour WebView */
    position: relative;
    z-index: 1;
  }
  
  .chat-input {
    /* Forcer dimensions explicites en mode PWA */
    width: 100%;
    max-width: none;
  }
  
  .btn-send {
    /* Éviter compression dans WebView */
    flex-shrink: 0;
  }
}

/* Très petits écrans (smartphones compacts) */
@media (max-width: 400px) {
  .chat-input-group {
    gap: 6px;
  }
  
  .chat-input {
    padding: 10px;
    font-size: 15px;
    min-height: 44px;
  }
  
  .btn-send {
    min-width: 80px;
    max-width: 95px;
    padding: 10px 12px;
    font-size: 13px;
  }
}
/* ===== EXACT LAYOUT: [Intitulé] [Montant] [actions] sur 1 ligne (tablette & desktop) ===== */
@media (min-width: 700px) {
  /* Grille à 6 colonnes: 1fr | montant | 4x actions auto */
  .entry-item {
    display: grid;
    grid-template-columns: 1fr minmax(120px, 200px) repeat(4, auto);
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
  }

  /* Intitulé (1er champ texte) occupe la 1re colonne */
  .entry-item input[type="text"]:first-of-type,
  .entry-item input[name="intitule"] {
    grid-column: 1 / 2;
    width: 100%;
  }

  /* Montant (champ number) en 2e colonne, bien aligné à droite */
  .entry-item input[type="number"],
  .entry-item input[name="montant"],
  .entry-item .montant-wrapper {
    grid-column: 2 / 3;
    justify-self: end;
    width: 100%;
    max-width: 200px;
  }

  /* Tous les boutons sur la même ligne, à partir de la 3e colonne */
  .entry-item button {
    grid-row: 1;
    /* ils s’alignent naturellement en colonnes 3→6 selon l’ordre dans le DOM */
  }

  /* Si tu as un conteneur de boutons, on le réduit et aligne à droite */
  .entry-item .actions,
  .entry-item .buttons,
  .entry-item > .btn-group {
    grid-column: 3 / -1;
    display: flex;
    gap: 8px;
    justify-content: flex-start; /* mets 'flex-end' si tu veux les coller à droite */
    align-items: center;
    flex-wrap: nowrap;
  }
}

/* PETIT MOBILE: empilement propre */
@media (max-width: 560px) {
  .entry-item { grid-template-columns: 1fr !important; }
}

/* === Correction du défilement horizontal (overflow) === */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

pre, code { white-space: pre-wrap; word-break: break-word; }
table { width: 100%; table-layout: fixed; }

.full-width,
.w-100vw,
.slider,
.carousel {
  width: 100% !important;
  overflow: hidden;
}
/* 📱 Responsive Design pour mobiles */
@media screen and (max-width: 768px) {
  body { font-size: 16px; padding: 0; margin: 0; }

  .container {
    width: 95%;
    max-width: 95%;
    margin: auto;
    padding: 10px;
  }

  input, button, select, textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
  }

  h1, h2, h3 {
    font-size: 1.1rem;
    text-align: center;
  }

  .budget-summary, .revenus, .depenses {
    margin: 8px 0;
    padding: 12px;
    border-radius: 10px;
  }

  /* Ajuster les boutons */
  .btn, button {
    font-size: 0.9rem;
    padding: 10px;
  }

  /* Empile les éléments sur mobile */
  .row {
    flex-direction: column;
    gap: 8px;
  }
}

/* === ZenBudget - harmonisation visuelle mobile === */
:root {
  --zb-grad-from: #0ea5e9; /* bleu ciel */
  --zb-grad-to: #14b8a6;   /* vert sarcelle */
  --zb-radius: 16px;
  --zb-shadow: 0 10px 20px rgba(0,0,0,.08);
  --zb-shadow-soft: 0 8px 16px rgba(2,132,199,.06);
}

body {
  background-color: #f0f9ff;
  font-family: "Inter", "Segoe UI", sans-serif;
  margin: 0;
  padding: 10px;
}

/* Cartes dégradées (catégories principales) */
.zb-card {
  border-radius: var(--zb-radius);
  background: linear-gradient(135deg, var(--zb-grad-from), var(--zb-grad-to));
  color: #fff;
  box-shadow: var(--zb-shadow);
  padding: 14px;
  margin-bottom: 12px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Conteneur d’accordéon */
.zb-panel {
  background: #fff;
  border-radius: 0 0 var(--zb-radius) var(--zb-radius);
  box-shadow: var(--zb-shadow-soft);
  padding: 12px 16px;
  margin-bottom: 12px;
}

/* Section blanche (résumé, coach, etc.) */
.zb-section {
  background: #fff;
  border-radius: var(--zb-radius);
  box-shadow: var(--zb-shadow-soft);
  padding: 16px;
  margin-top: 16px;
}

/* Bloc métrique dans le résumé */
.zb-metric {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 500;
  margin-bottom: 8px;
}
.zb-metric span { float: right; font-weight: 700; }

h2.zb-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ✅ Overrides spécifiques “App installée” (PWA/standalone) */
@media all and (display-mode: standalone) {
  .container{padding-left:10px;padding-right:10px}
  .main-content{grid-template-columns:1fr !important}
  .card,.chart-container,.api-config,.chatbot{max-width:100%}
}
/* === Alignement compact horizontal pour chaque ligne d'entrée === */
.entry-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  overflow: hidden; /* empêche tout débordement horizontal */
  box-sizing: border-box;
}

/* Champs texte et montant */
.entry-item .entry-name {
  flex: 1 1 40%;        /* prend ~40% de la ligne */
  min-width: 80px;
}

.entry-item .entry-amount {
  flex: 0 0 90px;       /* largeur fixe pour le montant */
  text-align: right;
}

/* Groupe des 4 boutons */
.entry-item .btn-group {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;       /* taille fixe, ne s’étire pas */
  justify-content: flex-start;
}

/* Styles uniformes pour les 4 boutons */
.entry-item .btn-group button {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* Empêche les gros paddings de casser la ligne */
.entry-item button.add-montant-btn,
.entry-item button.style-btn,
.entry-item button.validate-btn,
.entry-item button.delete-btn {
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Mobile : ajuste légèrement les proportions sans élargir */
@media (max-width: 560px) {
  .entry-item {
    gap: 4px;
  }
  .entry-item .entry-name {
    flex: 1 1 35%;
  }
  .entry-item .entry-amount {
    flex: 0 0 75px;
  }
  .entry-item .btn-group button {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}
/* === ZenBudget : boutons uniformes compacts (comme le bouton ✓) === */
.entry-item .btn-group button {
  width: 36px;
  height: 36px;
  border-radius: 8px;                /* même forme que Valider */
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  border: none;
  color: white;
  cursor: pointer;
  flex-shrink: 0;
}

/* Couleurs homogènes par action */
.add-montant-btn {
  background: #3b82f6;              /* bleu */
}

.style-btn {
  background: linear-gradient(135deg, #6366f1, #a855f7); /* violet dégradé */
}

.validate-btn {
  background: #22c55e;              /* vert */
}

.delete-btn {
  background: #ef4444;              /* rouge */
}

/* Effet léger au survol */
.entry-item .btn-group button:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  transition: 0.15s;
}

/* Compact pour mobile */
@media (max-width: 560px) {
  .entry-item .btn-group button {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}
/* === FORCE UNIFORME & COMPACTE DES 4 BOUTONS (override global) === */
.add-montant-btn,
.style-btn,
.validate-btn,
.delete-btn {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  font-size: 18px !important;
}

/* couleurs (garde ta charte) */
.add-montant-btn { background: #3b82f6 !important; color:#fff !important; }
.style-btn       { background: linear-gradient(135deg,#6366f1,#a855f7) !important; color:#fff !important; }
.validate-btn    { background: #22c55e !important; color:#fff !important; }
.delete-btn      { background: #ef4444 !important; color:#fff !important; }

/* Groupe de boutons toujours sur 1 ligne, serré */
.entry-item .btn-group {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

/* Ligne compacte: [intitulé][montant][boutons] sans élargir la page */
.entry-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  overflow: hidden !important;
}
.entry-item .entry-name   { flex: 1 1 40% !important; min-width: 80px !important; }
.entry-item .entry-amount { flex: 0 0 90px !important; text-align: right !important; }

/* Mobile très étroit */
@media (max-width: 560px){
  .entry-item .btn-group { gap: 4px !important; }
  .add-montant-btn, .style-btn, .validate-btn, .delete-btn {
    width: 32px !important; height: 32px !important; font-size: 16px !important;
  }
}
/* === Fix € qui disparaît avec 4 chiffres === */
.montant-wrapper{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.entry-item .entry-amount{
  text-align: right !important;
  padding-right: 12px !important;
  min-width: 130px;
  max-width: 180px;
}

/* Symbole € toujours par-dessus et bien à droite */
.euro-symbole{
  display: none !important;
}

/* Mobile : un poil plus compact mais toujours visible */
@media (max-width:560px){
  .entry-item .entry-amount{ padding-right: 12px !important; min-width: 110px; }
}
/* === FIX FINAL : symbole € toujours visible, même à 4/5 chiffres === */

/* La ligne peut contenir de l'absolu sans être coupée */
.entry-item{ overflow: visible !important; }

/* Le bloc montant devient un “mini-conteneur” fiable */
.montant-wrapper{
  position: relative !important;
  overflow: visible !important;
  flex: 0 0 120px !important;   /* ← largeur dédiée au montant (augmente si besoin) */
  min-width: 135px !important;
}

/* L'input laisse assez de place à droite pour le € */
.entry-item .entry-amount{
  width: 100% !important;
  text-align: right !important;
  padding-right: 38px !important;   /* ← espace réservé au symbole */
}

/* Le symbole est au-dessus de tout et à l'intérieur du wrapper */
.euro-symbole{
  display: none !important;
}

/* Très petit écran : compact mais toujours lisible */
@media (max-width:560px){
  .montant-wrapper{ flex-basis: 110px !important; min-width:110px !important; }
  .entry-item .entry-amount{ padding-right: 12px !important; }
}
/* === PATCH 2025-11-09 : suppression du € fixe en background.
   On conserve l'alignement à droite sans injecter de symbole décoratif. === */
.entry-item .entry-amount{
  text-align: right !important;
  padding-right: 12px !important;             /* espace normal pour la saisie */
  background-image: none !important;
  background-repeat: initial !important;
  background-position: initial !important;
  background-size: initial !important;
}

/* Variante mobile compacte */
@media (max-width:560px){
  .entry-item .entry-amount{
    padding-right: 24px !important;
  }
}
/* === € TOUJOURS VISIBLE (pseudo-élément du wrapper) === */
.montant-wrapper{
  position: relative !important;
  display: inline-block !important;
  min-width: 135px !important;   /* laisse la place aux 4 chiffres + € */
}

.entry-item .entry-amount{
  position: relative !important;
  z-index: 1 !important;         /* l'input reste cliquable */
  text-align: right !important;
  padding-right: 38px !important;/* réserve l'espace du € */
  width: 100% !important;
  background-clip: padding-box !important; /* évite que le fond "mange" le ::after */
}

/* Le symbole € est dessiné PAR-DESSUS, ancré au wrapper */
.montant-wrapper::after{
  display: none !important;
}

/* Ultra-petit écran : on compacte un peu */
@media (max-width: 560px){
  .montant-wrapper{ min-width: 110px !important; }
  .entry-item .entry-amount{ padding-right: 12px !important; }
}
/* === Ajustement fin des largeurs pour meilleur équilibre === */
.entry-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Réduction légère du champ intitulé */
.entry-item .entry-name {
  flex: 1 1 30% !important;   /* avant 40% */
  min-width: 70px !important;
}

/* Champ montant un peu plus étroit et recentré */
.montant-wrapper { flex: 0 0 130px !important;  /* largeur fixe */
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.entry-item .entry-amount {
  width: 100% !important;
  text-align: right !important;
  padding-right: 35px !important; /* espace interne pour le € */
}

/* Symbole € intégré, légèrement en retrait */
.montant-wrapper::after {
  display: none !important;
}

/* Groupe des boutons resserré */
.entry-item .btn-group {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

.entry-item .btn-group button {
  width: 34px !important;
  height: 34px !important;
  font-size: 17px !important;
  border-radius: 8px !important;
}

/* Mobile : compacte sans casser la ligne */
@media (max-width: 560px) {
  .entry-item .entry-name { flex: 1 1 25% !important; }
  .montant-wrapper { flex: 0 0 110px !important; }
  .entry-item .btn-group button {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }
}



/* ===== Bouton de réinitialisation des montants ===== */
.btn-reset-montants {
  background: linear-gradient(135deg, #ff9800, #ff5722);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.btn-reset-montants:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
  background: linear-gradient(135deg, #fb8c00, #f4511e);
}

.btn-reset-montants:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
}

@media (max-width: 600px) {
  .btn-reset-montants {
    font-size: 12px;
    padding: 8px 15px;
  }
}

/* ========================
   SYSTÈME D'AUTHENTIFICATION
   ======================== */

.auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.auth-modal-content {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
  border-radius: 20px;
  padding: 40px;
  max-width: 450px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(16, 185, 129, 0.3);
  text-align: center;
  animation: slideInScale 0.4s ease;
}

.auth-modal-content h2 {
  font-size: 2em;
  margin-bottom: 15px;
  background: linear-gradient(90deg, #10B981, #22D3EE, #3B82F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.auth-modal-content p {
  color: #94A3B8;
  margin-bottom: 25px;
  font-size: 1.05em;
}

.auth-modal-content input {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid rgba(100, 116, 139, 0.3);
  border-radius: 12px;
  font-size: 1.05em;
  margin-bottom: 20px;
  background: rgba(30, 41, 59, 0.5);
  color: #F1F5F9;
  transition: all 0.3s;
}

.auth-modal-content input:focus {
  outline: none;
  border-color: #10B981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}

.auth-modal-content button {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #10B981, #059669);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.auth-modal-content button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
}

.auth-info {
  margin-top: 20px;
  padding: 15px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 10px;
  font-size: 0.9em;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Écran d'accès refusé */
.access-denied {
  text-align: center;
  padding: 60px 20px;
  max-width: 600px;
  margin: 100px auto;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
  border-radius: 20px;
  border: 2px solid rgba(239, 68, 68, 0.3);
  animation: slideInScale 0.5s ease;
}

.access-denied h1 {
  font-size: 3em;
  margin-bottom: 20px;
  color: #EF4444;
}

.access-denied .reason {
  font-size: 1.3em;
  color: #F1F5F9;
  margin-bottom: 20px;
  font-weight: 600;
}

.access-denied .contact {
  color: #94A3B8;
  margin-bottom: 30px;
  font-size: 1.05em;
}

.btn-logout {
  padding: 15px 30px;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.05em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-logout:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

/* Badge utilisateur dans le header */
.user-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: 600;
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.4);
  margin-left: 15px;
}

@media (max-width: 768px) {
  .auth-modal-content {
    padding: 30px 25px;
  }
  
  .access-denied {
    margin: 50px auto;
    padding: 40px 20px;
  }
  
  .access-denied h1 {
    font-size: 2em;
  }
}

/* ===================================
   DRAG & DROP STYLES
   =================================== */

/* Poignée de drag visible sur chaque entrée */
.drag-handle {
  cursor: move;
  cursor: grab;
  padding: 8px 6px;
  color: #999;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  transition: color 0.2s, background 0.2s;
  border-radius: 4px;
}

.drag-handle:hover {
  color: #00a6a6;
  background: rgba(0, 166, 166, 0.1);
}

.drag-handle:active {
  cursor: grabbing;
  color: #4c51bf;
}

/* État de l'élément en cours de drag */
.entry-item.dragging {
  opacity: 0.8;
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  cursor: grabbing;
  background: #fff;
  border-left: 4px solid #4c51bf;
}

/* Placeholder montrant où l'élément sera déposé */
.drag-placeholder {
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 166, 166, 0.1),
    rgba(0, 166, 166, 0.1) 10px,
    rgba(0, 166, 166, 0.2) 10px,
    rgba(0, 166, 166, 0.2) 20px
  );
  border: 2px dashed #00a6a6;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

/* Animation de feedback pour le drag sur mobile */
@keyframes dragPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.entry-item.dragging {
  animation: dragPulse 0.5s ease-in-out infinite;
}

/* Responsive : augmenter la zone de touch sur mobile */
@media (max-width: 768px) {
  .drag-handle {
    min-width: 32px;
    padding: 10px 8px;
    font-size: 18px;
  }
  
  .entry-item.dragging {
    transform: scale(1.05);
  }
}

/* Désactiver la sélection de texte pendant le drag */
body.dragging {
  user-select: none;
  -webkit-user-select: none;
}