/* ============================================
   WELY EXPRESS — Styles globaux
   ============================================ */

/* Reset & Base */
* {
  box-sizing: border-box;
}

/* ============================================
   MENU UTILISATEUR (avatar) — panneau flottant
   style HuggingFace : vue à part au-dessus de tout
   ============================================ */
#user-menu {
  animation: user-menu-fade 0.18s ease-out;
  transform-origin: top right;
}

#user-menu-backdrop {
  background: transparent;
}

@keyframes user-menu-fade {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #user-menu {
    animation: none;
  }
}

/* ============================================
   VARIABLES CSS — Mode Sombre Phase 10D
   ============================================ */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border-color: #e5e7eb;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --accent-color: #3b82f6;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --a11y-orange-text: #C2410C; /* T7 : orange-700, ≈5.5:1 sur fond clair (AA) */
}

/* Mode sombre Material Design 3 (géré par dark-mode.js) */
.dark {
  --bg-primary: #1C1B1F;
  --bg-secondary: #2B2930;
  --bg-tertiary: #36343B;
  --text-primary: #E6E1E5;
  --text-secondary: #CAC4D0;
  --text-tertiary: #938F99;
  --border-color: #49454F;
  --card-bg: #2B2930;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --accent-color: #D0BCFF;
  --success-color: #81C995;
  --warning-color: #FDD663;
  --danger-color: #F28B82;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Composants avec variables CSS */
.bg-white {
  background-color: var(--card-bg) !important;
}

.bg-gray-50 {
  background-color: var(--bg-secondary) !important;
}

.bg-gray-100 {
  background-color: var(--bg-tertiary) !important;
}

.text-gray-800 {
  color: var(--text-primary) !important;
}

.text-gray-600 {
  color: var(--text-secondary) !important;
}

.text-gray-500 {
  color: var(--text-tertiary) !important;
}

.border-gray-200 {
  border-color: var(--border-color) !important;
}

.shadow-md {
  box-shadow: var(--card-shadow) !important;
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Aspect ratio pour les images produits */
.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
  background: #2B2930;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #49454F;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #675E70;
}

/* Sélection de texte */
::selection {
  background: #3b82f6;
  color: white;
}

.dark ::selection {
  background: #D0BCFF;
  color: #1C1B1F;
}

/* Focus visible pour accessibilité */
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Empêcher le scroll du body quand un modal est ouvert */
body.modal-open {
  overflow: hidden;
}

/* Transitions globales */
a, button {
  transition: all 0.2s ease;
}

/* Image fallback */
img {
  max-width: 100%;
  height: auto;
}

/* Toast z-index */
.toast {
  z-index: 9999;
}

/* Loading screen z-index */
#loading-screen {
  z-index: 50;
}

/* Login screen z-index */
#login-screen {
  z-index: 50;
}

/* ============================================
   SKELETON SCREENS — Phase 10A
   ============================================ */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card {
  height: 280px;
  border-radius: 12px;
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-text-sm {
  height: 12px;
  margin-bottom: 6px;
}

.skeleton-image {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}

/* Mode sombre pour skeleton */
.dark .skeleton {
  background: linear-gradient(90deg, #2B2930 25%, #36343B 50%, #2B2930 75%);
  background-size: 200% 100%;
}

/* ============================================
   ANIMATIONS — Phase 10B
   ============================================ */

/* Animation carousel */
@keyframes carouselSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.carousel-slide {
  animation: carouselSlideIn 0.3s ease-out;
}

/* Système de vues — une seule vue active à la fois */
.view {
  display: none;
}

.view.active {
  display: block;
}

#view-vendeur-produit-creation.view.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Transition slide entre vues */
.view-slide-enter {
  animation: slideInRight 0.3s ease-out;
}

.view-slide-exit {
  animation: slideOutLeft 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

/* Fade in pour modals */
.modal-fade-in {
  animation: modalFadeIn 0.3s ease-out;
}

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

/* Scale up pour cards au hover */
.card-scale-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-scale-hover:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Animation coeur pour bouton follow */
.heart-animation {
  animation: heartBeat 0.6s ease-in-out;
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(0.9); }
  75% { transform: scale(1.15); }
}

/* Badge notification pulse */
.badge-pulse {
  animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Toast notifications */
.toast {
  animation: toastSlideIn 0.3s ease-out;
}

@keyframes toastSlideIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.toast-exit {
  animation: toastSlideOut 0.3s ease-in;
}

@keyframes toastSlideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* ============================================
   TOAST NOTIFICATION MANAGER — Système professionnel
   ============================================ */

/* Conteneur des notifications toast */
.toast-notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
  pointer-events: none;
}

/* Notification toast individuelle */
.toast-notification {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--notif-bg);
  border-left: 4px solid var(--notif-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  min-width: 320px;
  max-width: 400px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Animation d'entrée */
.toast-notification-enter {
  opacity: 1;
  transform: translateX(0);
}

/* Animation de sortie */
.toast-notification-exit {
  opacity: 0;
  transform: translateX(100%);
}

/* Icône de la notification */
.toast-notification-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

/* Contenu de la notification */
.toast-notification-content {
  flex: 1;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

/* Bouton fermer */
.toast-notification-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.toast-notification-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}

/* Types de notifications */
.toast-notification-success {
  --notif-color: #10b981;
  --notif-bg: #f0fdf4;
  --notif-border: #10b981;
}

.toast-notification-error {
  --notif-color: #ef4444;
  --notif-bg: #fef2f2;
  --notif-border: #ef4444;
}

.toast-notification-warning {
  --notif-color: #f59e0b;
  --notif-bg: #fffbeb;
  --notif-border: #f59e0b;
}

.toast-notification-info {
  --notif-color: #3b82f6;
  --notif-bg: #eff6ff;
  --notif-border: #3b82f6;
}

.toast-notification-loading {
  --notif-color: #6b7280;
  --notif-bg: #f9fafb;
  --notif-border: #6b7280;
}

/* Mode sombre pour les notifications */
.dark .toast-notification {
  background: var(--bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark .toast-notification-content {
  color: var(--text-primary);
}

.dark .toast-notification-close {
  color: var(--text-secondary);
}

.dark .toast-notification-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Modal de confirmation */
.toast-notification-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.toast-notification-modal-enter {
  opacity: 1;
}

.toast-notification-modal-exit {
  opacity: 0;
}

.toast-notification-modal-content {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.toast-notification-modal-enter .toast-notification-modal-content {
  transform: scale(1);
}

.toast-notification-modal-exit .toast-notification-modal-content {
  transform: scale(0.9);
}

.toast-notification-modal-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 16px;
}

.toast-notification-modal-message {
  text-align: center;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-line;
  margin-bottom: 24px;
}

.toast-notification-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.toast-notification-modal-buttons button {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.toast-notification-modal-buttons .btn-cancel {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.toast-notification-modal-buttons .btn-cancel:hover {
  background: var(--border-color);
}

.toast-notification-modal-buttons .btn-confirm {
  background: var(--accent-color);
  color: white;
}

.toast-notification-modal-buttons .btn-confirm:hover {
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 480px) {
  .toast-notification-container {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
  
  .toast-notification {
    min-width: auto;
    max-width: none;
  }
}

/* Loading spinner contextuel */
.spinner-sm {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-lg {
  width: 60px;
  height: 60px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Confirmation avant actions destructives */
.confirmation-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease-out;
}

.confirmation-dialog {
  background: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  animation: modalFadeIn 0.3s ease-out;
}

.dark .confirmation-dialog {
  background: #2B2930;
  color: #E6E1E5;
  border: 1px solid #49454F;
}

/* Responsive fixes */
@media (max-width: 768px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  /* Badges navbar mobile - positionnement corrigé */
  .bottom-nav-item .relative {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .bottom-nav-item #promo-badge-bottom {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.625rem;
    min-width: 16px;
    height: 16px;
    line-height: 1;
    z-index: 10;
  }
  
  /* Admin tabs - Responsive mobile */
  #admin-tab-vendeurs > div:first-child,
  #admin-tab-commerciaux > div:first-child {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  #admin-tab-vendeurs > div:first-child > div,
  #admin-tab-commerciaux > div:first-child > div {
    flex-direction: column;
    align-items: stretch;
  }
  
  #admin-tab-vendeurs button,
  #admin-tab-commerciaux button {
    width: 100%;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
  
  #admin-tab-vendeurs button i,
  #admin-tab-commerciaux button i {
    margin-right: 0.25rem;
  }
  
  #admin-tab-vendeurs h3,
  #admin-tab-commerciaux h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  /* Cartes vendeurs - Responsive mobile */
  #admin-vendeurs-list > div {
    padding: 0.75rem;
  }
  
  #admin-vendeurs-list .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }
  
  #admin-vendeurs-list .grid-cols-3 > div {
    padding: 0.5rem;
  }
  
  #admin-vendeurs-list .grid-cols-3 p:first-child {
    font-size: 0.625rem;
  }
  
  #admin-vendeurs-list .grid-cols-3 p:last-child {
    font-size: 0.875rem;
  }
  
  /* Cartes commerciaux - Responsive mobile */
  #commerciaux-list > div {
    padding: 0.75rem;
  }
  
  #commerciaux-list .grid-cols-2,
  #commerciaux-list .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  
  #commerciaux-list .grid-cols-2 > div,
  #commerciaux-list .grid-cols-4 > div {
    padding: 0.5rem;
  }
  
  #commerciaux-list .text-2xl {
    font-size: 1.25rem;
  }
  
  #commerciaux-list .text-3xl {
    font-size: 1.5rem;
  }
  
  /* Modals - Responsive mobile */
  #modal-ajouter-vendeur .max-w-md,
  #modal-ajouter-commercial .max-w-md,
  #modal-vendeur-details .max-w-2xl {
    margin: 0.5rem;
    max-height: 95vh;
  }
  
  #modal-ajouter-vendeur .p-6,
  #modal-ajouter-commercial .p-6,
  #modal-vendeur-details .p-6 {
    padding: 1rem;
  }
  
  #modal-ajouter-vendeur h2,
  #modal-ajouter-commercial h2,
  #modal-vendeur-details h2 {
    font-size: 1.25rem;
  }
  
  #modal-ajouter-vendeur input,
  #modal-ajouter-vendeur select,
  #modal-ajouter-vendeur textarea,
  #modal-ajouter-commercial input,
  #modal-ajouter-commercial select,
  #modal-ajouter-commercial textarea {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
  
  #modal-ajouter-vendeur button,
  #modal-ajouter-commercial button {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }
}

/* Print styles */
@media print {
  header, .toast, #loading-screen, #login-screen, #bottom-navbar {
    display: none !important;
  }
}

/* ============================================
   CAROUSEL VARIANTES — Détail Produit
   ============================================ */

/* Conteneur carousel */
.carousel-slides {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  width: 100%;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Zoom sur long press */
.carousel-slide.zoomed img {
  transform: scale(1.5);
}

/* Bouton pause/reprendre */
.carousel-pause-btn {
  position: absolute;
  top: 1rem;
  right: 4rem;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: background 0.2s;
}

.carousel-pause-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Bouton enregistrer */
.detail-save-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 21;
  transition: all 0.2s;
  font-size: 1.25rem;
}

.detail-save-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

.detail-save-btn.saved {
  background: rgba(59, 130, 246, 0.9);
}

.detail-save-btn.saved:hover {
  background: rgba(59, 130, 246, 1);
}

/* Flèches de navigation */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.9);
  color: #1f2937;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s;
}

.carousel-nav-btn:hover {
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.carousel-prev {
  left: 1rem;
}

.carousel-next {
  right: 1rem;
}

/* Points indicateurs */
.carousel-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 20;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s;
}

.carousel-dot.active {
  background: white;
  width: 24px;
  border-radius: 4px;
}

.carousel-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* Compteur mobile (1/3) */
.carousel-counter {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 20;
  display: none;
}

/* Mobile : masquer les flèches et afficher le compteur */
@media (max-width: 768px) {
  .carousel-nav-btn {
    display: none !important;
  }
  
  .carousel-counter {
    display: block;
  }
  
  .carousel-dots {
    bottom: 3rem;
  }
}

/* Badge épuisé */
.carousel-soldout-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(239, 68, 68, 0.95);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 20;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Image grisée si épuisé */
.carousel-slide.soldout img {
  filter: grayscale(100%);
  opacity: 0.6;
}

/* Cercle de progression long press */
.longpress-progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.2s;
}

.longpress-progress.active {
  opacity: 1;
}

.longpress-progress svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.longpress-progress .progress-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 4;
}

.longpress-progress .progress-circle {
  fill: none;
  stroke: white;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.5s linear;
}

.longpress-progress.active .progress-circle {
  stroke-dashoffset: 0;
}

/* Info variante courante - Style / */
.carousel-variant-info {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 180px;
  max-width: 90%;
}

.variant-name {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0.95;
}

.variant-price {
  color: #10b981;
  font-weight: 700;
  font-size: 1.125rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.variant-stock {
  font-size: 0.75rem;
  opacity: 0.85;
  font-weight: 500;
}

/* Desktop : layout horizontal */
@media (min-width: 768px) {
  .carousel-variant-info {
    flex-direction: row;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    bottom: 2rem;
  }
  
  .variant-name {
    font-size: 1rem;
  }
  
  .variant-price {
    font-size: 1.25rem;
  }
  
  .variant-stock {
    font-size: 0.875rem;
  }
}

.variant-stock.out-of-stock {
  color: #ef4444;
  font-weight: 700;
}

.variant-stock.low-stock {
  color: #f59e0b;
  font-weight: 600;
}

/* ============================================
   GALERIE IMAGES — Détail Produit (Nouveau système)
   ============================================ */

/* Container galerie */
.galerie-produit-container {
  position: relative;
  width: 100%;
  background: #f3f4f6;
}

.galerie-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f3f4f6;
}

/* Track des slides */
.galerie-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

/* Slide individuel */
.galerie-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.galerie-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}

/* Placeholder si image manquante */
.galerie-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 4rem;
}

/* Dots indicateurs */
.galerie-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 20;
}

.galerie-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.galerie-dot.active {
  background: white;
  transform: scale(1.2);
}

.galerie-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* Mode sombre */
.dark .galerie-container,
.dark .galerie-produit-container {
  background: #2B2930;
}

.dark .galerie-placeholder {
  color: #6b7280;
}

/* ============================================
   GALERIE PLEIN ÉCRAN
   ============================================ */

.galerie-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.galerie-fullscreen-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.galerie-fullscreen-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.galerie-fullscreen-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.galerie-fullscreen-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* Bouton fermer */
.galerie-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  font-size: 24px;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.galerie-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Dots en plein écran */
.galerie-fullscreen-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10001;
}

.galerie-fullscreen-dots .galerie-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.galerie-fullscreen-dots .galerie-dot.active {
  background: white;
  transform: scale(1.2);
}

/* ============================================
   POINTS INDICATEURS — Grille Catalogue
   ============================================ */

.product-variant-dots {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 0;
}

.variant-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d1d5db;
  transition: all 0.2s;
}

.variant-dot.active {
  background: #3b82f6;
}

/* Mode sombre */
.dark .variant-dot {
  background: #49454F;
}

.dark .variant-dot.active {
  background: #D0BCFF;
}

/* ============================================
   CATALOGUE HORIZONTAL SCROLLABLE
   ============================================ */

/* Conteneur de rangée scrollable */
.catalogue-scroll-container {
  position: relative;
  margin-bottom: 2rem;
  overflow: hidden;
}

/* Indicateur de progression */
.catalogue-scroll-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: linear-gradient(to right, #f9fafb, #ffffff);
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}

.catalogue-scroll-counter {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.catalogue-scroll-progress {
  flex: 1;
  max-width: 200px;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin: 0 1rem;
}

.catalogue-scroll-progress-bar {
  height: 100%;
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  transition: width 0.3s ease;
}

/* Track scrollable */
.catalogue-scroll-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.catalogue-scroll-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Carte produit */
.catalogue-product-card {
  flex: 0 0 auto;
  width: 180px;
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  scroll-snap-align: start;
}

.catalogue-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.catalogue-product-card.hidden {
  display: none;
}

/* Bouton afficher plus */
.catalogue-show-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem auto 0;
  padding: 0.75rem 2rem;
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  color: white;
  border: none;
  border-radius: 2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.catalogue-show-more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.catalogue-show-more-btn:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .catalogue-product-card {
    width: 150px;
  }
  
  .catalogue-scroll-indicator {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  
  .catalogue-scroll-progress {
    max-width: 100%;
    margin: 0;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .catalogue-product-card {
    width: 200px;
  }
}

@media (min-width: 1025px) {
  .catalogue-product-card {
    width: 220px;
  }
}

/* Mode sombre */
.dark .catalogue-scroll-indicator {
  background: linear-gradient(to right, #2B2930, #1C1B1F);
}

.dark .catalogue-scroll-counter {
  color: #CAC4D0;
}

.dark .catalogue-scroll-progress {
  background: #49454F;
}

.dark .catalogue-product-card {
  background: #2B2930;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .catalogue-product-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* ============================================
   MODE SOMBRE — Composants interactifs
   ============================================ */

/* Inputs et textareas */
.dark input,
.dark textarea,
.dark select {
  background-color: #2B2930;
  color: #E6E1E5;
  border-color: #49454F;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #938F99;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  background-color: #36343B;
  border-color: #D0BCFF;
  outline: none;
}

/* Boutons primaires */
.dark .bg-blue-600 {
  background-color: #D0BCFF !important;
  color: #1C1B1F !important;
}

.dark .bg-blue-600:hover {
  background-color: #E8DEF8 !important;
}

/* Boutons gris */
.dark .bg-gray-500 {
  background-color: #49454F !important;
  color: #E6E1E5 !important;
}

.dark .bg-gray-500:hover {
  background-color: #675E70 !important;
}

.dark .bg-gray-600 {
  background-color: #675E70 !important;
  color: #E6E1E5 !important;
}

.dark .bg-gray-600:hover {
  background-color: #79747E !important;
}

.dark .bg-gray-700 {
  background-color: #79747E !important;
  color: #E6E1E5 !important;
}

.dark .bg-gray-700:hover {
  background-color: #938F99 !important;
}

/* Éléments spécifiques avec problèmes de contraste */
.dark .border-gray-200 {
  border-color: #49454F !important;
}

.dark .border-gray-300 {
  border-color: #49454F !important;
}

/* Textes sur fond coloré */
.dark .bg-blue-100 {
  background-color: rgba(208, 188, 255, 0.2) !important;
  color: #D0BCFF !important;
}

.dark .bg-green-100 {
  background-color: rgba(129, 201, 149, 0.2) !important;
  color: #81C995 !important;
}

.dark .bg-red-100 {
  background-color: rgba(242, 139, 130, 0.2) !important;
  color: #F28B82 !important;
}

.dark .bg-yellow-100 {
  background-color: rgba(253, 214, 99, 0.2) !important;
  color: #FDD663 !important;
}

.dark .bg-orange-100 {
  background-color: rgba(255, 171, 145, 0.2) !important;
  color: #FFAB91 !important;
}

.dark .bg-purple-100 {
  background-color: rgba(206, 147, 216, 0.2) !important;
  color: #CE93D8 !important;
}

/* Badges avec fond coloré */
.dark .badge-primary {
  background-color: rgba(208, 188, 255, 0.2) !important;
  color: #D0BCFF !important;
}

.dark .badge-success {
  background-color: rgba(129, 201, 149, 0.2) !important;
  color: #81C995 !important;
}

.dark .badge-danger {
  background-color: rgba(242, 139, 130, 0.2) !important;
  color: #F28B82 !important;
}

.dark .badge-warning {
  background-color: rgba(253, 214, 99, 0.2) !important;
  color: #FDD663 !important;
}

.dark .badge-info {
  background-color: rgba(128, 203, 196, 0.2) !important;
  color: #80CBC4 !important;
}

.dark .badge-secondary {
  background-color: #36343B !important;
  color: #E6E1E5 !important;
}

/* Alertes et notifications */
.dark .alert,
.dark .notification {
  background-color: #2B2930;
  color: #E6E1E5;
  border-color: #49454F;
}

/* Tooltips */
.dark .tooltip {
  background-color: #36343B;
  color: #E6E1E5;
  border: 1px solid #49454F;
}

/* Dropdowns améliorés */
.dark .dropdown-menu {
  background-color: #2B2930;
  border: 1px solid #49454F;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

.dark .dropdown-item {
  color: #E6E1E5;
}

.dark .dropdown-item:hover {
  background-color: #36343B;
}

/* Tabs */
.dark .tab-active {
  background-color: #D0BCFF !important;
  color: #1C1B1F !important;
}

.dark .tab-inactive {
  background-color: #36343B !important;
  color: #E6E1E5 !important;
}

/* Cards avec hover */
.dark .card:hover {
  background-color: #36343B;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

/* Form controls */
.dark .form-control {
  background-color: #2B2930;
  color: #E6E1E5;
  border-color: #49454F;
}

.dark .form-control:focus {
  background-color: #36343B;
  border-color: #D0BCFF;
}

/* Checkboxes et radios */
.dark input[type="checkbox"],
.dark input[type="radio"] {
  accent-color: #D0BCFF;
}

/* Select options */
.dark select option {
  background-color: #2B2930;
  color: #E6E1E5;
}

/* Progress bars text */
.dark .progress-bar {
  background-color: #36343B;
}

.dark .progress-bar-fill {
  background-color: #D0BCFF;
}

/* Modal overlays */
.dark .modal-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Sidebar */
.dark .sidebar {
  background-color: #1C1B1F;
  border-right: 1px solid #49454F;
}

.dark .sidebar-item {
  color: #E6E1E5;
}

.dark .sidebar-item:hover {
  background-color: #2B2930;
}

.dark .sidebar-item.active {
  background-color: #36343B;
  color: #D0BCFF;
}

/* Footer */
.dark footer {
  background-color: #1C1B1F;
  border-top: 1px solid #49454F;
  color: #E6E1E5;
}

/* Header */
.dark header {
  background-color: #1C1B1F;
  border-bottom: 1px solid #49454F;
}

/* Navigation */
.dark nav {
  background-color: #1C1B1F;
}

/* Icons */
.dark .text-gray-400 {
  color: #938F99 !important;
}

.dark .text-gray-500 {
  color: #938F99 !important;
}

/* Empty states */
.dark .empty-state {
  color: #938F99;
}

.dark .empty-state i {
  color: #675E70;
}

/* Loading skeletons */
.dark .skeleton {
  background: linear-gradient(90deg, #2B2930 25%, #36343B 50%, #2B2930 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* Scrollbar dans les conteneurs scrollables */
.dark .overflow-y-auto::-webkit-scrollbar-track {
  background: #2B2930;
}

.dark .overflow-y-auto::-webkit-scrollbar-thumb {
  background: #49454F;
}

.dark .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #675E70;
}

/* Boutons secondaires */
.dark .bg-gray-100 {
  background-color: #36343B !important;
  color: #E6E1E5 !important;
}

.dark .bg-gray-100:hover {
  background-color: #49454F !important;
}

/* Boutons danger */
.dark .bg-red-600 {
  background-color: #F28B82 !important;
  color: #1C1B1F !important;
}

.dark .bg-red-600:hover {
  background-color: #FFCDD2 !important;
}

/* Boutons success */
.dark .bg-green-600 {
  background-color: #81C995 !important;
  color: #1C1B1F !important;
}

.dark .bg-green-600:hover {
  background-color: #A8DAB5 !important;
}

/* Boutons orange */
.dark .bg-orange-600 {
  background-color: #FFAB91 !important;
  color: #1C1B1F !important;
}

.dark .bg-orange-600:hover {
  background-color: #FFCCBC !important;
}

/* Boutons purple */
.dark .bg-purple-600 {
  background-color: #CE93D8 !important;
  color: #1C1B1F !important;
}

.dark .bg-purple-600:hover {
  background-color: #E1BEE7 !important;
}

/* Boutons indigo */
.dark .bg-indigo-600 {
  background-color: #B39DDB !important;
  color: #1C1B1F !important;
}

.dark .bg-indigo-600:hover {
  background-color: #D1C4E9 !important;
}

/* Boutons teal */
.dark .bg-teal-600 {
  background-color: #80CBC4 !important;
  color: #1C1B1F !important;
}

.dark .bg-teal-600:hover {
  background-color: #B2DFDB !important;
}

/* Boutons pink */
.dark .bg-pink-600 {
  background-color: #F48FB1 !important;
  color: #1C1B1F !important;
}

.dark .bg-pink-600:hover {
  background-color: #F8BBD0 !important;
}

/* Textes colorés */
.dark .text-blue-600 {
  color: #D0BCFF !important;
}

.dark .text-green-600 {
  color: #81C995 !important;
}

.dark .text-red-600 {
  color: #F28B82 !important;
}

.dark .text-yellow-600 {
  color: #FDD663 !important;
}

.dark .text-orange-600 {
  color: #FFAB91 !important;
}

.dark .text-purple-600 {
  color: #CE93D8 !important;
}

.dark .text-indigo-600 {
  color: #B39DDB !important;
}

.dark .text-pink-600 {
  color: #F48FB1 !important;
}

.dark .text-teal-600 {
  color: #80CBC4 !important;
}

/* Textes gris (très importants pour la lisibilité) */
.dark .text-gray-300 {
  color: #675E70 !important;
}

.dark .text-gray-400 {
  color: #938F99 !important;
}

.dark .text-gray-500 {
  color: #938F99 !important;
}

.dark .text-gray-600 {
  color: #CAC4D0 !important;
}

.dark .text-gray-700 {
  color: #CAC4D0 !important;
}

.dark .text-gray-800 {
  color: #E6E1E5 !important;
}

.dark .text-gray-900 {
  color: #E6E1E5 !important;
}

/* Modals */
.dark .modal-content,
.dark #modal-edit-profil .bg-white,
.dark #story-modal .bg-white {
  background-color: #2B2930;
  color: #E6E1E5;
}

/* Dropdowns */
.dark .dropdown-menu {
  background-color: #2B2930;
  border: 1px solid #49454F;
}

.dark .dropdown-item {
  color: #E6E1E5;
}

.dark .dropdown-item:hover {
  background-color: #36343B;
}

/* Cards et conteneurs */
.dark .bg-white {
  background-color: #2B2930 !important;
}

.dark .bg-gray-50 {
  background-color: #2B2930 !important;
}

.dark .bg-gray-100 {
  background-color: #36343B !important;
}

.dark .bg-gray-200 {
  background-color: #49454F !important;
}

.dark .bg-gray-400 {
  background-color: #675E70 !important;
}

/* Overlays avec opacité */
.dark .bg-white\/20 {
  background-color: rgba(43, 41, 48, 0.2) !important;
}

.dark .bg-white\/30 {
  background-color: rgba(43, 41, 48, 0.3) !important;
}

/* Borders */
.dark .border-gray-100 {
  border-color: #36343B !important;
}

.dark .border-gray-200 {
  border-color: #49454F !important;
}

.dark .border-gray-300 {
  border-color: #49454F !important;
}

.dark .border-white {
  border-color: #E6E1E5 !important;
}

/* Hover states */
.dark .hover\:bg-gray-50:hover {
  background-color: #36343B !important;
}

.dark .hover\:bg-gray-100:hover {
  background-color: #49454F !important;
}

.dark .hover\:bg-gray-500:hover {
  background-color: #79747E !important;
}

.dark .hover\:text-gray-700:hover {
  color: #CAC4D0 !important;
}

.dark .hover\:text-gray-800:hover {
  color: #E6E1E5 !important;
}

.dark .hover\:text-gray-900:hover {
  color: #E6E1E5 !important;
}

.dark .hover\:text-blue-600:hover {
  color: #D0BCFF !important;
}

/* Textes spécifiques */
.dark .text-blue-600 {
  color: #D0BCFF !important;
}

.dark .text-green-600 {
  color: #81C995 !important;
}

.dark .text-red-600 {
  color: #F28B82 !important;
}

.dark .text-orange-600 {
  color: #FFAB91 !important;
}

.dark .text-purple-600 {
  color: #CE93D8 !important;
}

/* Badges avec fond coloré */
.dark .bg-blue-100 {
  background-color: rgba(208, 188, 255, 0.2) !important;
  color: #D0BCFF !important;
}

.dark .bg-green-100 {
  background-color: rgba(129, 201, 149, 0.2) !important;
  color: #81C995 !important;
}

.dark .bg-red-100 {
  background-color: rgba(242, 139, 130, 0.2) !important;
  color: #F28B82 !important;
}

.dark .bg-yellow-100 {
  background-color: rgba(253, 214, 99, 0.2) !important;
  color: #FDD663 !important;
}

.dark .bg-orange-100 {
  background-color: rgba(255, 171, 145, 0.2) !important;
  color: #FFAB91 !important;
}

.dark .bg-purple-100 {
  background-color: rgba(206, 147, 216, 0.2) !important;
  color: #CE93D8 !important;
}

/* Tableaux */
.dark table {
  color: #E6E1E5;
}

.dark thead {
  background-color: #2B2930;
  color: #E6E1E5;
}

.dark th {
  background-color: #36343B;
  color: #E6E1E5;
  border-color: #49454F;
}

.dark td {
  border-color: #49454F;
  color: #E6E1E5;
}

.dark tbody tr:hover {
  background-color: #36343B;
}

.dark .bg-gray-50 td,
.dark .bg-gray-100 td {
  background-color: #2B2930 !important;
}

/* Listes */
.dark li {
  color: #E6E1E5;
}

.dark .divide-y > * + * {
  border-color: #49454F;
}

/* Form labels */
.dark label {
  color: #E6E1E5;
}

.dark .text-sm.text-gray-500,
.dark .text-sm.text-gray-600 {
  color: #CAC4D0 !important;
}

.dark .text-xs.text-gray-500,
.dark .text-xs.text-gray-600 {
  color: #938F99 !important;
}

/* Placeholders */
.dark input::placeholder,
.dark textarea::placeholder,
.dark select::placeholder {
  color: #938F99 !important;
}

/* Focus states améliorés */
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  background-color: #36343B;
  border-color: #D0BCFF;
  color: #E6E1E5;
}

.dark button:focus {
  outline: 2px solid #D0BCFF;
  outline-offset: 2px;
}

/* Badges */
.dark .badge {
  background-color: #36343B;
  color: #E6E1E5;
  border: 1px solid #49454F;
}

/* Shadows */
.dark .shadow-md {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-lg {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Links */
.dark a {
  color: #D0BCFF;
}

.dark a:hover {
  color: #E8DEF8;
}

/* Headings */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: #E6E1E5;
}

/* Strong et bold */
.dark strong,
.dark .font-bold,
.dark .font-semibold {
  color: #E6E1E5;
}

/* Cards spécifiques */
.dark .bg-white {
  background-color: #2B2930 !important;
  color: #E6E1E5;
}

.dark .bg-gray-50 {
  background-color: #2B2930 !important;
  color: #E6E1E5;
}

.dark .bg-gray-100 {
  background-color: #36343B !important;
  color: #E6E1E5;
}

.dark .bg-gray-200 {
  background-color: #49454F !important;
  color: #E6E1E5;
}

/* Borders améliorés */
.dark .border {
  border-color: #49454F !important;
}

.dark .border-t,
.dark .border-b,
.dark .border-l,
.dark .border-r {
  border-color: #49454F !important;
}

.dark .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: #49454F;
}

/* Progress bars */
.dark .bg-blue-600 {
  background-color: #D0BCFF !important;
}

.dark .bg-green-600 {
  background-color: #81C995 !important;
}

.dark .bg-orange-600 {
  background-color: #FFAB91 !important;
}

.dark .bg-red-600 {
  background-color: #F28B82 !important;
}

.dark .bg-purple-600 {
  background-color: #CE93D8 !important;
}

/* Gradients en mode dark */
.dark .bg-gradient-to-r {
  background: linear-gradient(to right, #6750A4, #D0BCFF) !important;
}

.dark .bg-gradient-to-br {
  background: linear-gradient(to bottom right, #6750A4, #D0BCFF) !important;
}

.dark .bg-gradient-to-l {
  background: linear-gradient(to left, #6750A4, #D0BCFF) !important;
}

.dark .bg-gradient-to-t {
  background: linear-gradient(to top, #6750A4, #D0BCFF) !important;
}

.dark .from-blue-500,
.dark .from-blue-600 {
  --tw-gradient-from: #6750A4 !important;
}

.dark .to-purple-600 {
  --tw-gradient-to: #D0BCFF !important;
}

.dark .from-green-500 {
  --tw-gradient-from: #81C995 !important;
}

.dark .to-teal-500 {
  --tw-gradient-to: #80CBC4 !important;
}

.dark .from-orange-500 {
  --tw-gradient-from: #FFAB91 !important;
}

.dark .to-pink-500 {
  --tw-gradient-to: #F48FB1 !important;
}

.dark .from-green-500.to-blue-600 {
  background: linear-gradient(to right, #81C995, #D0BCFF) !important;
}

.dark .from-red-500.to-red-600 {
  background: linear-gradient(to right, #F28B82, #FFCDD2) !important;
}

/* Gradients avec text-white - le texte doit être sombre */
.dark .bg-gradient-to-r.text-white,
.dark .bg-gradient-to-br.text-white,
.dark .bg-gradient-to-l.text-white,
.dark .bg-gradient-to-t.text-white {
  color: #1C1B1F !important;
}

/* Gradients clairs (from-purple-50 to-blue-50) */
.dark .from-purple-50 {
  --tw-gradient-from: rgba(206, 147, 216, 0.1) !important;
}

.dark .to-blue-50 {
  --tw-gradient-to: rgba(208, 188, 255, 0.1) !important;
}

.dark .border-purple-200 {
  border-color: #49454F !important;
}

/* Text-white sur fond clair (problème critique) */
.dark .bg-white.text-white,
.dark .bg-gray-50.text-white,
.dark .bg-gray-100.text-white {
  color: #1C1B1F !important;
}

/* Badges de notification */
.dark .bg-red-500 {
  background-color: #F28B82 !important;
}

.dark .bg-blue-500 {
  background-color: #D0BCFF !important;
}

.dark .bg-green-500 {
  background-color: #81C995 !important;
}

.dark .bg-yellow-500 {
  background-color: #FDD663 !important;
}

.dark .bg-orange-500 {
  background-color: #FFAB91 !important;
}

.dark .bg-purple-500 {
  background-color: #CE93D8 !important;
}

/* Boutons avec text-white qui doivent rester lisibles */
.dark button.text-white {
  color: #1C1B1F !important;
}

.dark button.bg-blue-600.text-white {
  background-color: #D0BCFF !important;
  color: #1C1B1F !important;
}

.dark button.bg-red-600.text-white {
  background-color: #F28B82 !important;
  color: #1C1B1F !important;
}

.dark button.bg-green-600.text-white {
  background-color: #81C995 !important;
  color: #1C1B1F !important;
}

.dark button.bg-orange-600.text-white {
  background-color: #FFAB91 !important;
  color: #1C1B1F !important;
}

.dark button.bg-purple-600.text-white {
  background-color: #CE93D8 !important;
  color: #1C1B1F !important;
}

.dark button.bg-indigo-600.text-white {
  background-color: #B39DDB !important;
  color: #1C1B1F !important;
}

.dark button.bg-pink-600.text-white {
  background-color: #F48FB1 !important;
  color: #1C1B1F !important;
}

.dark button.bg-teal-600.text-white {
  background-color: #80CBC4 !important;
  color: #1C1B1F !important;
}

/* Hover states pour boutons avec text-white */
.dark button.bg-blue-600.text-white:hover {
  background-color: #E8DEF8 !important;
}

.dark button.bg-red-600.text-white:hover {
  background-color: #FFCDD2 !important;
}

.dark button.bg-green-600.text-white:hover {
  background-color: #A8DAB5 !important;
}

.dark button.bg-orange-600.text-white:hover {
  background-color: #FFCCBC !important;
}

.dark button.bg-purple-600.text-white:hover {
  background-color: #E1BEE7 !important;
}

/* Toast notifications */
.dark .toast {
  background-color: #2B2930;
  color: #E6E1E5;
  border: 1px solid #49454F;
}

/* Loading states */
.dark .spinner-sm,
.dark .spinner-lg {
  border-color: #49454F;
  border-top-color: #D0BCFF;
}

/* ============================================
   NAVBAR BOTTOM STYLE TELEGRAM - Visible sur TOUS les écrans
   ============================================ */

.bottom-navbar-telegram {
  display: flex;
  border-radius: 9999px;
  padding: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  max-width: 100%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.bottom-navbar-telegram.bottom-nav-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  z-index: 1000;
}

.bottom-navbar-telegram.bottom-nav-floating {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
}

/* Mode icônes uniquement (sans texte) */
.bottom-navbar-telegram.bottom-nav-icons-only .bottom-nav-item-telegram span {
  display: none;
}

.bottom-navbar-telegram.bottom-nav-icons-only .bottom-nav-item-telegram {
  padding: 0.3rem 0.5rem;
}

.bottom-navbar-telegram > div {
  width: 100%;
}

.bottom-nav-item-telegram {
  color: #64748b;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0.2rem 0.4rem;
  border-radius: 9999px;
  flex: 1 1 0%;
  min-width: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
}

.bottom-nav-item-telegram:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.bottom-nav-item-telegram i {
  font-size: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.bottom-nav-item-telegram .nav-avatar-img {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.bottom-nav-item-telegram span {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.bottom-nav-item-telegram:hover {
  color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.08);
}

.bottom-nav-item-telegram:active {
  transform: scale(0.95);
}

.bottom-nav-item-telegram.active {
  color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.12);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.bottom-nav-item-telegram.active i {
  transform: scale(1.1);
}

/* Badge animation */
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.animate-pulse-badge {
  animation: pulse-badge 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Mode sombre pour navbar Telegram */
.dark .bottom-navbar-telegram {
  background: rgba(28, 27, 31, 0.95);
  border: 1px solid rgba(73, 69, 79, 0.8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .bottom-nav-item-telegram {
  color: #938f99;
}

.dark .bottom-nav-item-telegram:hover {
  color: #d0bcff;
  background-color: rgba(208, 188, 255, 0.1);
}

.dark .bottom-nav-item-telegram.active {
  color: #d0bcff;
  background-color: rgba(208, 188, 255, 0.15);
  box-shadow: 0 2px 8px rgba(208, 188, 255, 0.2);
}

/* Avatar container pour profil */
.nav-avatar-container {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  flex-shrink: 0;
}

.dark .nav-avatar-container {
  background: #334155;
}

.nav-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bottom-nav-item-telegram.active .nav-avatar-container {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Grands écrans - Ajustement navbar */
@media (min-width: 769px) {
  .bottom-navbar-telegram {
    max-width: 800px;
    padding: 0;
  }
  
  .bottom-nav-item-telegram {
    padding: 0.35rem 0.75rem;
  }
  
  .bottom-nav-item-telegram i {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .bottom-nav-item-telegram .nav-avatar-img {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .bottom-nav-avatar-container {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .bottom-nav-item-telegram span {
    font-size: 0.625rem;
  }
  
  /* Badges positionnés par rapport aux icônes (wrapper .relative dans le HTML) */
  .bottom-nav-item-telegram .relative {
    position: relative;
    display: inline-flex;
  }
}

/* Mobile - Ajustement safe area */
@media (max-width: 768px) {
  #bottom-navbar {
    left: env(safe-area-inset-left, 0.5rem);
    right: env(safe-area-inset-right, 0.5rem);
    bottom: env(safe-area-inset-bottom, 1rem);
  }
}

/* ============================================
   ADMIN TABS - Filtres/Boutons fixes en haut
   ============================================ */

/* Hauteur fixe pour les tabs admin (sauf stats) */
#admin-tab-commandes,
#admin-tab-produits,
#admin-tab-admins,
#admin-tab-promotions {
  height: calc(100vh - 280px);
  max-height: calc(100vh - 280px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Sur mobile, ajuster la hauteur */
@media (max-width: 768px) {
  #admin-tab-commandes,
  #admin-tab-produits,
  #admin-tab-admins,
  #admin-tab-promotions {
    height: calc(100vh - 220px);
    max-height: calc(100vh - 220px);
  }
}

/* Le contenu scrollable occupe tout l'espace restant */
#admin-tab-commandes > div:last-child,
#admin-tab-produits > div:last-child,
#admin-tab-admins > div:last-child,
#admin-tab-promotions > div:last-child {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Les filtres/boutons restent fixes en haut */
#admin-tab-commandes > div:first-child,
#admin-tab-produits > div:first-child,
#admin-tab-admins > div:first-child,
#admin-tab-promotions > div:first-child {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

/* Mode sombre pour éléments sticky admin */
.dark #admin-tab-commandes > div:first-child,
.dark #admin-tab-produits > div:first-child,
.dark #admin-tab-admins > div:first-child,
.dark #admin-tab-promotions > div:first-child {
  background: #1C1B1F;
  border-bottom-color: #49454F;
}

/* ============================================
   ÉQUIPE VENDEUR - Styles
   ============================================ */

.equipe-vide {
  text-align: center;
  padding: 3rem 1rem;
  color: #6b7280;
}

.equipe-vide i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

.equipe-vide p {
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

/* Mode sombre pour état vide */
.dark .equipe-vide {
  color: #CAC4D0;
}

.dark .equipe-vide i {
  opacity: 0.5;
}

.equipe-membre {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.equipe-membre:hover {
  background: #f3f4f6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Mode sombre pour équipe */
.dark .equipe-membre {
  background: #2B2930;
}

.dark .equipe-membre:hover {
  background: #36343B;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark .membre-avatar img {
  border-color: #49454F;
}

.dark .membre-info h4 {
  color: #E6E1E5;
}

.dark .membre-email {
  color: #CAC4D0;
}

.dark .date-ajout {
  color: #938F99;
}

.dark .invitation-item {
  background: #2B2930;
  border-color: #49454F;
}

.dark .invitation-email {
  color: #E6E1E5;
}

.dark .expiration {
  color: #FDD663;
}

.dark .audit-log-item {
  background: #2B2930;
  border-left-color: #D0BCFF;
}

.dark .log-date {
  color: #CAC4D0;
}

.dark .log-details {
  color: #E6E1E5;
}

.dark .log-details code {
  background: #36343B;
  color: #D0BCFF;
}

.membre-avatar {
  flex-shrink: 0;
}

.membre-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e5e7eb;
}

.membre-info {
  flex: 1;
  min-width: 0;
}

.membre-info h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.membre-email {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.membre-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.date-ajout {
  font-size: 0.75rem;
  color: #9ca3af;
}

.membre-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.invitation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 0.5rem;
}

.invitation-info {
  flex: 1;
}

.invitation-email {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

.invitation-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.expiration {
  font-size: 0.75rem;
  color: #92400e;
}

.invitation-actions {
  flex-shrink: 0;
}

.audit-log-item {
  padding: 0.75rem;
  background: #f9fafb;
  border-radius: 0.375rem;
  border-left: 3px solid #3b82f6;
}

.log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.log-date {
  font-size: 0.75rem;
  color: #6b7280;
}

.log-details {
  margin: 0;
  font-size: 0.875rem;
  color: #374151;
}

.log-details code {
  background: #e5e7eb;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-family: 'Courier New', monospace;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
}

/* Mode sombre pour badges */
.dark .badge {
  border: 1px solid #49454F;
}

.dark .badge.bg-blue-100 {
  background-color: rgba(208, 188, 255, 0.2) !important;
  color: #D0BCFF !important;
}

.dark .badge.bg-green-100 {
  background-color: rgba(129, 201, 149, 0.2) !important;
  color: #81C995 !important;
}

.dark .badge.bg-red-100 {
  background-color: rgba(242, 139, 130, 0.2) !important;
  color: #F28B82 !important;
}

.dark .badge.bg-yellow-100 {
  background-color: rgba(253, 214, 99, 0.2) !important;
  color: #FDD663 !important;
}

.dark .badge.bg-gray-100 {
  background-color: #36343B !important;
  color: #E6E1E5 !important;
}

/* Tables */
.dark table {
  color: #E6E1E5;
}

.dark thead {
  background-color: #2B2930;
}

.dark th {
  background-color: #36343B;
  color: #E6E1E5;
  border-bottom-color: #49454F;
}

.dark td {
  border-bottom-color: #49454F;
}

.dark tbody tr:hover {
  background-color: #36343B;
}

/* Alerts */
.dark .alert {
  border: 1px solid;
}

.dark .alert-info {
  background-color: rgba(208, 188, 255, 0.1);
  border-color: #49454F;
  color: #D0BCFF;
}

.dark .alert-success {
  background-color: rgba(129, 201, 149, 0.1);
  border-color: #49454F;
  color: #81C995;
}

.dark .alert-warning {
  background-color: rgba(253, 214, 99, 0.1);
  border-color: #49454F;
  color: #FDD663;
}

.dark .alert-danger {
  background-color: rgba(242, 139, 130, 0.1);
  border-color: #49454F;
  color: #F28B82;
}

/* Progress bars */
.dark .progress {
  background-color: #36343B;
}

.dark .progress-bar {
  background-color: #D0BCFF;
}

/* Tabs */
.dark .tab {
  color: #CAC4D0;
  border-bottom-color: #49454F;
}

.dark .tab:hover {
  color: #D0BCFF;
  border-bottom-color: #D0BCFF;
}

.dark .tab.active {
  color: #D0BCFF;
  border-bottom-color: #D0BCFF;
}

/* Tooltips */
.dark .tooltip {
  background-color: #36343B;
  color: #E6E1E5;
  border: 1px solid #49454F;
}

/* Dividers */
.dark hr {
  border-color: #49454F;
}

.dark .divider {
  border-color: #49454F;
}

/* Cards hover */
.dark .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Form labels */
.dark label {
  color: #E6E1E5;
}

/* Checkbox and radio */
.dark input[type="checkbox"],
.dark input[type="radio"] {
  accent-color: #D0BCFF;
}

/* File input */
.dark input[type="file"] {
  color: #E6E1E5;
}

.dark input[type="file"]::file-selector-button {
  background-color: #36343B;
  color: #E6E1E5;
  border-color: #49454F;
}

.dark input[type="file"]::file-selector-button:hover {
  background-color: #49454F;
}

/* ============================================
   STATISTIQUES ÉQUIPE
   ============================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 1.25rem;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 0.75rem;
  margin-right: 1rem;
}

.stat-icon i {
  font-size: 1.5rem;
  color: #ffffff;
}

.stat-content h3 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.stat-content p {
  margin: 0.25rem 0 0 0;
  font-size: 0.875rem;
  color: #6b7280;
}

.stats-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.stats-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.roles-list,
.actions-list,
.membres-actifs-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ============================================
   STORIES TELEGRAM-STYLE — Phase 14
   ============================================ */

/* Container principal */
#stories-stack-container {
  display: none;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 0;
  transition: all 0.3s ease;
}

/* Wrapper scrollable */
.stories-stack-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.stories-stack-wrapper::-webkit-scrollbar {
  display: none;
}

/* Scroll horizontal */
.stories-stack-scroll {
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
  scroll-behavior: smooth;
}

/* Item boutique (stack) */
.stories-stack-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
  min-width: 80px;
}

.stories-stack-item:hover {
  transform: scale(1.05);
}

.stories-stack-item:active {
  transform: scale(0.95);
}

/* Visuel du stack */
.stories-stack-visual {
  position: relative;
  width: 70px;
  height: 70px;
  margin-bottom: 0.5rem;
}

/* Cercle story */
.stories-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 3px;
  position: relative;
  transition: all 0.3s ease;
}

.stories-circle-unviewed {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  animation: stories-pulse 2s infinite;
}

.stories-circle-viewed {
  background: linear-gradient(45deg, #8e9eab 0%, #eef2f3 100%);
}

@keyframes stories-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 39, 67, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(220, 39, 67, 0);
  }
}

/* Avatar boutique */
.stories-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--card-bg);
}

/* Badge NEW */
.stories-new-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: #dc2743;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: white;
  animation: stories-bounce 1s infinite;
}

@keyframes stories-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Badge produit */
.stories-product-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  background: var(--accent-color);
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

/* Points indicateurs */
.stories-points {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
}

.stories-point {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

/* Nom boutique */
.stories-boutique-name {
  font-size: 0.75rem;
  color: var(--text-primary);
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge recommandé */
.stories-recommended-badge {
  font-size: 0.6rem;
  color: var(--success-color);
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 6px;
  border-radius: 8px;
  margin-top: 2px;
}

/* Header rétractable */
.header-retracted {
  transform: translateY(-50%);
  opacity: 0.8;
}

/* Viewer plein écran */
#stories-viewer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
}

.stories-viewer-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Header viewer */
.stories-viewer-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 1rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
}

/* Barres de progression */
.stories-viewer-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 1rem;
}

.stories-progress-bar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.stories-progress-fill {
  height: 100%;
  background: white;
  width: 0;
  transition: width 0.3s ease;
}

.stories-progress-fill.active {
  animation: stories-progress 5s linear forwards;
}

.stories-progress-fill.past {
  width: 100%;
}

@keyframes stories-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Info boutique */
.stories-viewer-boutique-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stories-viewer-boutique-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
}

.stories-viewer-boutique-details {
  flex: 1;
}

.stories-viewer-boutique-name {
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
}

.stories-viewer-story-time {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
}

/* Bouton fermer */
.stories-viewer-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.2s ease;
}

.stories-viewer-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Contenu story */
.stories-viewer-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.stories-viewer-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Texte overlay */
.stories-text-overlay {
  position: absolute;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  font-weight: 600;
  text-align: center;
  max-width: 80%;
  word-wrap: break-word;
}

/* Carousel produits */
.stories-products-carousel {
  position: absolute;
  bottom: 100px;
  left: 0;
  right: 0;
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.stories-products-carousel::-webkit-scrollbar {
  display: none;
}

.stories-product-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 0.75rem;
  min-width: 150px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stories-product-card:hover {
  transform: scale(1.05);
}

.stories-product-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.stories-product-info {
  text-align: center;
}

.stories-product-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.stories-product-price {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--accent-color);
}

/* Navigation zones */
.stories-viewer-navigation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  pointer-events: none;
}

.stories-nav-zone {
  flex: 1;
  pointer-events: auto;
  cursor: pointer;
}

.stories-nav-prev {
  flex: 0 0 30%;
}

.stories-nav-next {
  flex: 0 0 70%;
}

/* Boutons d'action */
.stories-viewer-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.stories-action-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.stories-action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.stories-action-follow {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.stories-action-follow:hover {
  background: #2563eb;
}

/* Réactions */
.stories-reactions {
  display: flex;
  gap: 0.5rem;
}

.stories-reaction-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.2s ease;
}

.stories-reaction-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.2);
}

.stories-reaction-btn:active {
  transform: scale(0.9);
}

.role-item,
.action-item,
.membre-actif-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  transition: background 0.2s;
}

.role-item:hover,
.action-item:hover,
.membre-actif-item:hover {
  background: #f3f4f6;
}

.role-count,
.action-count,
.membre-actions {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
}

.membre-email {
  font-size: 0.875rem;
  color: #374151;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .stat-icon {
    width: 3rem;
    height: 3rem;
  }
  
  .stat-icon i {
    font-size: 1.25rem;
  }
  
  .stat-content h3 {
    font-size: 1.5rem;
  }
}

.badge-primary {
  background: #dbeafe;
  color: #1e40af;
}

.badge-success {
  background: #d1fae5;
  color: #065f46;
}

.badge-danger {
  background: #fee2e2;
  color: #991b1b;
}

.badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.badge-info {
  background: #cffafe;
  color: #155e75;
}

.badge-secondary {
  background: #f3f4f6;
  color: #4b5563;
}

/* ============================================
   VUE DETAIL PRODUIT - COMMENTÉ POUR ÉVITER LES CONFLITS
   Ces styles ont été commentés car ils entraient en conflit avec les nouveaux styles
   définis dans detail-product-marketplace.css et detail-product-premium.css
   ============================================ */

/* #view-produit-detail {
  animation: fadeIn 0.3s ease-out;
}

#view-produit-detail .aspect-square {
  max-height: 400px;
}

@media (min-width: 768px) {
  #view-produit-detail .aspect-video {
    max-height: 500px;
  }
}

/* Boutons d'action dans la vue détail */
#view-produit-detail button {
  transition: all 0.3s ease;
}

#view-produit-detail button:active {
  transform: scale(0.98);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  #view-produit-detail h1 {
    font-size: 1.5rem;
  }
  
  #view-produit-detail #detail-product-price {
    font-size: 2rem;
  }
  
  #view-produit-detail #detail-total {
    font-size: 2.5rem;
  }
} */

/* ============================================
   GALERIE MULTI-IMAGES PRODUIT — Drag & Drop
   ============================================ */

/* Zone upload images */
.vendeur-images-upload {
  border: 2px dashed #d1d5db;
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f9fafb;
}

.vendeur-images-upload:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.vendeur-images-upload.drag-over {
  border-color: #3b82f6;
  background: #eff6ff;
  transform: scale(1.01);
}

.vendeur-images-upload.drag-over #images-dropzone-content {
  color: #3b82f6;
}

/* Grille des images */
.vendeur-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Image individuelle */
.vendeur-image-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  cursor: grab;
  transition: all 0.2s ease;
  background: #f3f4f6;
}

.vendeur-image-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.vendeur-image-item.dragging {
  opacity: 0.5;
  transform: scale(0.95);
  cursor: grabbing;
}

.vendeur-image-item.drag-target {
  border-color: #3b82f6;
  border-style: dashed;
  background: #eff6ff;
}

.vendeur-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badge "Image principale" */
.vendeur-image-principale {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(59, 130, 246, 0.9);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

/* Bouton supprimer image */
.vendeur-image-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  backdrop-filter: blur(4px);
}

.vendeur-image-item:hover .vendeur-image-remove {
  opacity: 1;
}

.vendeur-image-remove:hover {
  background: rgba(220, 38, 38, 1);
  transform: scale(1.1);
}

/* Handle de drag */
.vendeur-image-drag-handle {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
  backdrop-filter: blur(4px);
}

.vendeur-image-item:hover .vendeur-image-drag-handle {
  opacity: 1;
}

/* Overlay upload en cours */
.vendeur-image-uploading {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

/* Mode sombre */
.dark .vendeur-images-upload {
  background: rgba(55, 65, 81, 0.3);
  border-color: rgba(75, 85, 99, 0.5);
}

.dark .vendeur-images-upload:hover {
  border-color: #60a5fa;
  background: rgba(59, 130, 246, 0.1);
}

.dark .vendeur-image-item {
  background: rgba(55, 65, 81, 0.5);
  border-color: rgba(75, 85, 99, 0.5);
}

.dark .vendeur-image-item:hover {
  border-color: #60a5fa;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
}

/* Responsive mobile */
@media (max-width: 640px) {
  .vendeur-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
  }
  
  .vendeur-images-upload {
    padding: 1rem;
  }
  
  .vendeur-image-remove,
  .vendeur-image-drag-handle {
    opacity: 1; /* Toujours visible sur mobile */
  }
}

/* ============================================
   BOUTIQUE FORMULAIRE — Upload logo / couverture
   ============================================ */

.boutique-upload {
  min-width: 0;
}

.boutique-upload .dz-dropzone {
  position: relative;
  border: 2px dashed #d1d5db;
  border-radius: 0.75rem;
  background: #f9fafb;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.boutique-upload .dz-dropzone:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.boutique-upload .dz-dropzone.dz-dragover {
  border-color: #3b82f6;
  background: #eff6ff;
  transform: scale(1.01);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.boutique-upload .dz-dropzone:focus-visible {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.dz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
  min-height: 130px;
}

.dz-icon {
  font-size: 1.6rem;
  color: #9ca3af;
  margin-bottom: 0.4rem;
}

.boutique-upload .dz-dropzone.dz-dragover .dz-icon,
.boutique-upload .dz-dropzone:hover .dz-icon {
  color: #3b82f6;
}

.dz-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b5563;
  margin: 0 0 0.5rem;
}

.dz-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #3b82f6;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: background 0.2s ease;
}

.boutique-upload .dz-dropzone:hover .dz-btn {
  background: #2563eb;
}

.dz-hint {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.68rem;
  color: #9ca3af;
}

.dz-preview {
  position: relative;
  width: 100%;
  padding-top: 62%;
  background: #e5e7eb;
}

.dz-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dz-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dz-preview:hover .dz-overlay {
  opacity: 1;
}

.dz-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  border-radius: 9999px;
  border: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dz-replace {
  background: #3b82f6;
}

.dz-replace:hover {
  background: #2563eb;
}

.dz-remove {
  background: rgba(239, 68, 68, 0.9);
}

.dz-remove:hover {
  background: #dc2626;
}

/* Mobile : actions toujours visibles */
@media (max-width: 640px) {
  .dz-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.15));
    align-items: flex-end;
    padding-bottom: 0.6rem;
  }
}

/* Mode sombre */
.dark .boutique-upload .dz-dropzone {
  background: rgba(55, 65, 81, 0.3);
  border-color: rgba(75, 85, 99, 0.5);
}

.dark .boutique-upload .dz-dropzone:hover,
.dark .boutique-upload .dz-dropzone.dz-dragover {
  border-color: #60a5fa;
  background: rgba(59, 130, 246, 0.12);
}

.dark .boutique-upload .dz-dropzone:focus-visible {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
}

.dark .dz-icon {
  color: #6b7280;
}

.dark .dz-title {
  color: #d1d5db;
}

.dark .dz-hint {
  color: #6b7280;
}

.dark .dz-preview {
  background: #374151;
}

/* ============================================
   VARIANTES PRODUIT — Drag & Drop + Cards
   ============================================ */

/* Zone drag & drop */
#variantes-dropzone {
  transition: all 0.2s ease;
}

#variantes-dropzone.drag-over {
  border-color: #3b82f6;
  background-color: #eff6ff;
  transform: scale(1.01);
}

#variantes-dropzone.drag-over #variantes-dropzone-content {
  color: #3b82f6;
}

/* Grille preview images */
.variantes-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.variante-image-preview {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  cursor: grab;
  transition: all 0.2s ease;
}

.variante-image-preview:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.variante-image-preview.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.variante-image-preview.drag-target {
  border-color: #3b82f6;
  border-style: dashed;
  background-color: #eff6ff;
}

.variante-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bouton supprimer sur image */
.variante-image-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.variante-image-preview:hover .variante-image-remove {
  opacity: 1;
}

/* Badge upload en cours */
.variante-image-uploading {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

/* Carte variante */
.variante-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.75rem;
  transition: all 0.2s ease;
}

.variante-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.variante-card.has-error {
  border-color: #ef4444;
  background: #fef2f2;
}

.variante-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.variante-card-header img {
  width: 40px;
  height: 40px;
  border-radius: 0.375rem;
  object-fit: cover;
}

.variante-card-header .variante-drag-handle {
  cursor: grab;
  color: #9ca3af;
  padding: 0.25rem;
}

.variante-card-header .variante-drag-handle:hover {
  color: #6b7280;
}

/* Badge épuisé */
.variante-badge-epuise {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Inputs inline variantes */
.variante-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

.variante-inputs input {
  padding: 0.375rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  transition: border-color 0.2s ease;
}

.variante-inputs input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.variante-inputs input::placeholder {
  color: #9ca3af;
}

/* Bouton attributs */
.variante-btn-attributs {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #e0e7ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  border-radius: 0.375rem;
  font-size: 0.625rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.variante-btn-attributs:hover {
  background: #c7d2fe;
}

.variante-btn-attributs.has-value {
  background: #4338ca;
  color: white;
  border-color: #4338ca;
}

/* Popover attributs */
.variante-attributs-popover {
  position: absolute;
  z-index: 50;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.75rem;
  min-width: 200px;
}

.variante-attributs-popover input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.variante-attributs-popover input:focus {
  outline: none;
  border-color: #3b82f6;
}

/* Tags attributs */
.variante-attribut-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  color: #374151;
}

.variante-attribut-tag button {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.625rem;
  padding: 0;
}

.variante-attribut-tag button:hover {
  color: #ef4444;
}

/* Responsive mobile */
@media (max-width: 640px) {
  .variantes-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 0.375rem;
  }
  
  .variante-inputs {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
  
  .variante-card {
    padding: 0.5rem;
  }
}

/* ============================================
   ACTUALITÉS FEED — Styles Instagram+X
   ============================================ */

.actualites-header {
  margin-bottom: 1rem;
}

.actualites-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Filtres par type */
.actualites-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.actualites-filters::-webkit-scrollbar {
  display: none;
}

.actualites-filter-btn {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.actualites-filter-btn:hover {
  background: var(--border-color);
}

.actualites-filter-btn.active {
  background: var(--accent-color);
  color: white;
}

/* Filtre par boutique */
.actualites-boutique-filter {
  margin-bottom: 1rem;
}

.actualites-boutique-select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.875rem;
}

/* Feed container */
.actualites-feed {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Carte actualité - Style Instagram */
.actualite-card {
  background: var(--card-bg);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  animation: fadeIn 0.3s ease-out;
  margin-bottom: 1rem;
}

/* Header profil boutique - Style Instagram */
.actualite-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.actualite-boutique-info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  flex: 1;
}

.actualite-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
}

.actualite-boutique-details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.actualite-boutique-name {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.actualite-time {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* Bouton Contacter - Style Instagram */
.actualite-contact-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.actualite-contact-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
}

.actualite-contact-btn i {
  font-size: 0.875rem;
}

/* Contenu - Style Instagram */
.actualite-contenu {
  padding: 0.75rem;
}

.actualite-titre {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.actualite-texte {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

/* Carrousel d'images - Style Instagram */
.actualite-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.actualite-carousel-track {
  display: flex;
  width: 100%;
  will-change: transform;
}

.actualite-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;
  cursor: pointer;
}

.actualite-carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  max-height: 600px;
}

/* Flèches de navigation PC (uniquement si 1 image) */
.actualite-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.actualite-carousel-arrow:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}

.actualite-carousel-prev {
  left: 1rem;
}

.actualite-carousel-next {
  right: 1rem;
}

/* Indicateurs de pagination */
.actualite-carousel-indicators {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.375rem;
  z-index: 10;
}

.actualite-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
  cursor: pointer;
}

.actualite-carousel-dot.active {
  background: white;
  transform: scale(1.2);
}

.actualite-prix {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.actualite-prix-actuel {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-color);
}

.actualite-prix-original {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  text-decoration: line-through;
}

.actualite-reduction {
  padding: 0.1875rem 0.375rem;
  background: var(--danger-color);
  color: white;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
}



/* Carte texte */
.actualite-text-card {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  margin-bottom: 1rem;
}

.actualite-text-card-content {
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Interactions - Style Instagram */
.actualite-interactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
}

.actualite-interactions-left {
  display: flex;
  gap: 1rem;
}

.actualite-interaction-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0.25rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.actualite-interaction-btn:hover {
  color: var(--text-primary);
  transform: scale(1.1);
}

.actualite-interaction-btn.liked {
  color: var(--danger-color);
}

.actualite-interaction-btn.liked i {
  animation: heartBeat 0.3s ease-in-out;
}

.actualite-interaction-btn.saved {
  color: var(--text-primary);
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* Nombre de likes - Style Instagram */
.actualite-likes {
  padding: 0 0.75rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Modal partage */
.actualites-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease-out;
}

.actualites-modal-content {
  background: var(--card-bg);
  border-radius: 1rem;
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.actualites-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.actualites-modal-header h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.actualites-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0.25rem;
}

.actualites-share-options {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.actualites-share-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: var(--text-primary);
}

.actualites-share-option:hover {
  background: var(--bg-tertiary);
  transform: translateX(4px);
}

.actualites-share-option i {
  font-size: 1.5rem;
  width: 2rem;
  text-align: center;
}

.actualites-share-option span {
  font-weight: 500;
}

/* Viewer images plein écran */
.actualites-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: fadeIn 0.2s ease-out;
  touch-action: none;
}

.actualites-viewer-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.actualites-viewer-content {
  position: relative;
  width: 90vw;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.actualites-viewer-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: none;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.actualites-viewer-image.zoomed {
  cursor: grab;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
}

.actualites-viewer-image.zoomed:active {
  cursor: grabbing;
  transition: none;
}

.actualites-viewer-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Boutons zoom viewer */
.actualites-viewer-zoom-controls {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.actualites-viewer-zoom-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.actualites-viewer-zoom-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

.actualites-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
}

.actualites-viewer-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.actualites-viewer-prev {
  left: 1rem;
}

.actualites-viewer-next {
  right: 1rem;
}

/* Menu contextuel */
.actualites-context-menu {
  position: fixed;
  background: var(--card-bg);
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 9998;
  animation: fadeIn 0.2s ease-out;
}

.actualites-context-menu button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.875rem;
  transition: background 0.2s ease;
}

.actualites-context-menu button:hover {
  background: var(--bg-secondary);
}

.actualites-context-menu button i {
  width: 1.25rem;
  text-align: center;
}

/* Loading */
.actualites-loading {
  text-align: center;
  padding: 2rem;
}

/* ============================================
   ENREGISTREMENTS — Styles
   ============================================ */

.saves-header {
  margin-bottom: 1rem;
}

.saves-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Filtres par type */
.saves-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.saves-filters::-webkit-scrollbar {
  display: none;
}

.saves-filter-btn {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.saves-filter-btn:hover {
  background: var(--border-color);
}

.saves-filter-btn.active {
  background: var(--accent-color);
  color: white;
}

/* Filtre par boutique */
.saves-boutique-filter {
  margin-bottom: 1rem;
}

.saves-boutique-select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.875rem;
}

/* Conteneur enregistrements */
.saves-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Carte enregistrement */
.save-card {
  background: var(--card-bg);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  animation: fadeIn 0.3s ease-out;
}

.save-card-content {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

/* Image */
.save-image {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
}

.save-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.save-image:hover img {
  transform: scale(1.05);
}

/* Info */
.save-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* Header avec badge type et temps */
.save-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.save-type-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.save-type-badge.actualite {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.save-type-badge.produit {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.save-time {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* Titre */
.save-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;  -webkit-box-orient: vertical;
}

.save-title:hover {
  color: var(--accent-color);
}

/* Description */
.save-description {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Prix */
.save-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.save-price-current {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.save-price-original {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  text-decoration: line-through;
}

.save-reduction {
  padding: 0.125rem 0.375rem;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Boutique */
.save-boutique {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.save-boutique-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.save-boutique-name {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Actions */
.save-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.save-action-btn {
  flex: 1;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.save-action-btn.primary {
  background: var(--accent-color);
  color: white;
}

.save-action-btn.primary:hover {
  background: var(--accent-hover);
  transform: scale(1.02);
}

.save-action-btn.danger {
  background: var(--bg-tertiary);
  color: var(--danger-color);
}

.save-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Loading */
.saves-loading {
  text-align: center;
  padding: 2rem;
}

/* Erreur */
.saves-error {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

.saves-error i {
  font-size: 2rem;
  color: var(--danger-color);
  margin-bottom: 0.5rem;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .actualites-filters {
    gap: 0.375rem;
  }
  
  .actualites-filter-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }
  
  .actualite-card {
    border-radius: 0.75rem;
  }
  
  .actualite-header {
    padding: 0.75rem;
  }
  
  .actualite-avatar {
    width: 36px;
    height: 36px;
  }
  
  .actualite-boutique-name {
    font-size: 0.875rem;
  }
  
  .actualite-contenu {
    padding: 0.75rem;
  }
  
  .actualite-titre {
    font-size: 1rem;
  }
  
  .actualite-texte {
    font-size: 0.875rem;
  }
  
  .actualite-prix-actuel {
    font-size: 1.125rem;
  }
  
  .actualite-interaction-btn {
    padding: 0.625rem;
    font-size: 0.8125rem;
  }
  
  .actualites-viewer-nav {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  
  .actualites-viewer-prev {
    left: 0.5rem;
  }
  
  .actualites-viewer-next {
    right: 0.5rem;
  }
}

/* Masquer les éléments desktop-only sur mobile */
@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
}

/* ============================================
   GROUPES — Layout et composants
   ============================================ */

/* Layout principal : sidebar + zone chat */
.groupes-layout {
  display: flex;
  height: calc(100vh - 120px);
  background: var(--card-bg);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

/* Sidebar : liste des groupes */
.groupes-sidebar {
  width: 350px;
  min-width: 350px;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
}

.groupes-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg);
}

/* Onglets de filtrage */
.groupes-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.groupe-tab {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.groupe-tab:hover {
  background: rgba(59, 130, 246, 0.1);
}

.groupe-tab.active {
  background: #3b82f6;
  color: white;
}

/* Liste des groupes */
.groupes-list {
  flex: 1;
  overflow-y: auto;
}

.groupe-item {
  transition: background 0.15s ease;
}

.groupe-item:hover {
  background: var(--bg-secondary);
}

.groupe-item:active {
  background: var(--bg-tertiary);
}

/* Zone chat (placeholder pour Agent 4) */
.groupes-chat-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
}

.groupes-chat-placeholder {
  text-align: center;
  padding: 2rem;
}

/* ============================================
   MODALS — Groupes
   ============================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
}

.modal-content {
  background: var(--card-bg);
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content.modal-lg {
  max-width: 700px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 0 0 1rem 1rem;
}

/* Toggle switch (préférences notifications) */
.notif-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.notif-toggle.on {
  background: #3b82f6;
}
.notif-toggle .notif-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.notif-toggle.on .notif-toggle-knob {
  transform: translateX(20px);
}

/* Formulaires */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: var(--card-bg);
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

textarea.form-input {
  resize: vertical;
  min-height: 80px;
}

/* Boutons */
.btn-primary {
  padding: 0.625rem 1.25rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #2563eb;
}

.btn-secondary {
  padding: 0.625rem 1.25rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-secondary:hover {
  background: var(--border-color);
}

/* Onglets admin */
.admin-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.admin-tab-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.admin-tab-btn:hover {
  background: rgba(59, 130, 246, 0.1);
}

.admin-tab-btn.active {
  background: #3b82f6;
  color: white;
}

.admin-tab-content {
  min-height: 300px;
}

/* Liste des membres */
.membres-list {
  max-height: 400px;
  overflow-y: auto;
}

.membre-item {
  transition: background 0.15s ease;
}

.membre-item:hover {
  background: var(--bg-secondary);
}

/* ============================================
   GROUPES — Responsive Mobile
   ============================================ */

@media (max-width: 768px) {
  .groupes-layout {
    flex-direction: column;
    height: calc(100vh - 100px);
  }
  
  .groupes-sidebar {
    width: 100%;
    min-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    max-height: 60%;
  }
  
  .groupes-chat-zone {
    min-height: 40%;
  }
  
  .groupes-tabs {
    padding: 0.5rem;
    gap: 0.25rem;
  }
  
  .groupe-tab {
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
  }
  
  .modal-content {
    max-width: 100%;
    margin: 0.5rem;
    max-height: 95vh;
  }
  
  .modal-content.modal-lg {
    max-width: 100%;
  }
  
  .admin-tabs {
    flex-wrap: wrap;
    padding: 0.5rem;
  }
  
  .admin-tab-btn {
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
  }
}

/* ============================================
   CHAT DE GROUPES — Styles
   ============================================ */

/* Layout groupes */
.groupes-layout {
  display: flex;
  height: calc(100vh - 140px);
  background: var(--bg-primary);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.groupes-sidebar {
  width: 320px;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

.groupes-sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.groupes-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.groupe-tab {
  flex: 1;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
}

.groupe-tab:hover {
  background: var(--bg-tertiary);
}

.groupe-tab.active {
  background: var(--accent-color);
  color: white;
}

.groupes-list {
  flex: 1;
  overflow-y: auto;
}

.groupes-chat-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}

.groupes-chat-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Chat header */
.chat-header {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.btn-retour {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  transition: background 0.2s;
}

.btn-retour:hover {
  background: var(--border-color);
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 0.75rem;
  object-fit: cover;
}

.chat-info {
  flex: 1;
}

.chat-nom {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.chat-membres-count {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg-secondary);
}

.message-bubble {
  max-width: 70%;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  position: relative;
  word-wrap: break-word;
}

.message-bubble.sent {
  background: var(--accent-color);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
}

.message-bubble.received {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  align-self: flex-start;
  border-bottom-left-radius: 0.25rem;
}

.message-sender {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--accent-color);
}

.message-content {
  line-height: 1.5;
}

.message-meta {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.edited-indicator {
  font-style: italic;
  font-size: 0.625rem;
}

.message-actions {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: none;
  gap: 0.25rem;
}

.message-bubble:hover .message-actions {
  display: flex;
}

.message-actions button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: background 0.2s;
}

.message-actions button:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   CATALOGUE — Navigation horizontale tactile (style )
   ============================================ */

.catalogue-row {
  margin-bottom: 2rem;
}

.catalogue-scroll-container {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 1rem 0;
  cursor: grab;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.catalogue-scroll-container::-webkit-scrollbar {
  display: none;
}

.catalogue-scroll-container:active {
  cursor: grabbing;
  scroll-behavior: auto;
}

.catalogue-scroll-track {
  display: flex;
  gap: 1.25rem;
  padding: 0 1.5rem;
  width: max-content;
}

.catalogue-product-card {
  flex: 0 0 auto;
  width: 240px;
  background: var(--card-bg);
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
  will-change: transform;
}

.catalogue-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.catalogue-product-card:active {
  transform: scale(0.98);
}

.catalogue-product-card.hidden {
  display: none;
}

.catalogue-product-card .aspect-square {
  width: 100%;
  height: 240px;
  background: var(--bg-tertiary);
  position: relative;
  overflow: hidden;
}

.catalogue-product-card .aspect-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.catalogue-product-card:hover .aspect-square img {
  transform: scale(1.05);
}

.catalogue-product-card .p-3 {
  padding: 0.75rem;
}

.catalogue-product-card h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;  -webkit-box-orient: vertical;
  overflow: hidden;
}

.catalogue-product-card .product-variant-dots {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.catalogue-product-card .variant-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-color);
}

.catalogue-product-card .variant-dot.active {
  background: var(--accent-color);
}

/* Boutons de navigation catalogue (desktop uniquement) */
.catalogue-wrapper {
  position: relative;
}

.catalogue-nav-btn {
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  border: none;
  outline: none;
}

.catalogue-nav-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--accent-color);
}

.catalogue-nav-btn:hover i {
  color: white;
}

.catalogue-nav-left {
  left: 0.5rem;
}

.catalogue-nav-right {
  right: 0.5rem;
}

/* Responsive mobile */
@media (max-width: 640px) {
  .catalogue-product-card {
    width: 180px;
  }
  
  .catalogue-product-card .aspect-square {
    height: 180px;
  }
  
  .catalogue-scroll-track {
    gap: 1rem;
    padding: 0 1rem;
  }
  
  .catalogue-scroll-container {
    padding: 0.75rem 0;
  }
  
  /* Masquer les flèches sur mobile */
  .catalogue-nav-btn {
    display: none !important;
  }
}

/* Responsive tablette */
@media (min-width: 641px) and (max-width: 1024px) {
  .catalogue-product-card {
    width: 220px;
  }
  
  .catalogue-product-card .aspect-square {
    height: 220px;
  }
}

/* Reply citation */
.message-reply {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  border-left: 3px solid var(--accent-color);
}

.message-bubble.sent .message-reply {
  background: rgba(255, 255, 255, 0.2);
  border-left-color: rgba(255, 255, 255, 0.5);
}

/* Image message */
.message-image img {
  max-width: 100%;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.message-image img:hover {
  transform: scale(1.02);
}

/* File message */
.message-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
}

.message-bubble.sent .message-file {
  background: rgba(255, 255, 255, 0.2);
}

.message-file i {
  font-size: 2rem;
}

.message-file-info {
  flex: 1;
}

.message-file-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.message-file-size {
  font-size: 0.75rem;
  opacity: 0.7;
}

.message-file-download {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}

.message-file-download:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* Vocal player */
.vocal-player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
}

.message-bubble.sent .vocal-player {
  background: rgba(255, 255, 255, 0.2);
}

.vocal-player button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  transition: transform 0.2s;
}

.vocal-player button:hover {
  transform: scale(1.1);
}

.vocal-duration {
  font-size: 0.875rem;
  opacity: 0.7;
}

/* Produit embed */
.message-produit {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  overflow: hidden;
  max-width: 250px;
}

.message-produit img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.message-produit-info {
  padding: 0.75rem;
}

.message-produit-nom {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text-primary);
}

.message-produit-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.message-produit-prix {
  color: var(--accent-color);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.message-produit-btn {
  display: block;
  text-align: center;
  padding: 0.5rem;
  background: var(--accent-color);
  color: white;
  border-radius: 0.375rem;
  margin-top: 0.5rem;
  text-decoration: none;
  transition: background 0.2s;
}

.message-produit-btn:hover {
  background: #2563eb;
}

/* Sondage */
.message-sondage {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 1rem;
  max-width: 300px;
}

.sondage-question {
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.sondage-option {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.sondage-option:hover {
  background: var(--bg-secondary);
}

.sondage-option.voted {
  background: #eff6ff;
  border-color: var(--accent-color);
}

.sondage-option-content {
  flex: 1;
}

.sondage-option-text {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.sondage-bar {
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}

.sondage-bar-fill {
  height: 100%;
  background: var(--accent-color);
  border-radius: 2px;
  transition: width 0.3s;
}

.sondage-option-votes {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-left: 0.5rem;
}

.sondage-total {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  text-align: center;
}

/* Input zone */
.chat-input-zone {
  border-top: 1px solid var(--border-color);
  padding: 0.5rem;
  background: var(--bg-primary);
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chat-input-row button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: background 0.2s;
}

.chat-input-row button:hover {
  background: var(--border-color);
}

#btn-send {
  background: var(--accent-color);
  color: white;
}

#btn-send:hover {
  background: #2563eb;
}

.chat-input-row textarea {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  resize: none;
  max-height: 120px;
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.chat-input-row textarea:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* Reply preview */
.reply-preview {
  background: var(--bg-secondary);
  padding: 0.5rem;
  border-left: 3px solid var(--accent-color);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.375rem;
}

.reply-preview span {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.reply-preview button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.reply-preview button:hover {
  background: var(--bg-tertiary);
}

/* Produit selector */
.produit-selector {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
}

.produit-selector-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.produit-selector-header h4 {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.produit-selector-header input {
  flex: 1;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.produit-selector-header button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.produit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.produit-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.produit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.produit-card img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.produit-card-info {
  padding: 0.25rem;
  font-size: 0.75rem;
  text-align: center;
}

.produit-card-nom {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.produit-card-prix {
  color: var(--accent-color);
  font-weight: 600;
}

/* Pinned banner */
.pinned-banner {
  background: #fef3c7;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid #f59e0b;
}

.pinned-banner i {
  color: #f59e0b;
}

.pinned-banner span {
  flex: 1;
  font-size: 0.875rem;
  color: #92400e;
}

.pinned-banner button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #92400e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.pinned-banner button:hover {
  background: rgba(146, 64, 14, 0.1);
}

/* Responsive mobile */
@media (max-width: 768px) {
  .groupes-layout {
    flex-direction: column;
    height: calc(100vh - 120px);
  }
  
  .groupes-sidebar {
    width: 100%;
    max-height: 40vh;
  }
  
  .groupes-chat-zone {
    flex: 1;
  }
  
  .message-bubble {
    max-width: 85%;
  }
  
  .produit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   VUE PROFIL — Style Telegram
   ============================================ */

.profil-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  margin-bottom: 1.5rem;
  color: white;
}

.profil-avatar-section {
  position: relative;
  margin-bottom: 1rem;
}

.profil-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid white;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.profil-avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.profil-avatar-edit:hover {
  transform: scale(1.1);
}

.profil-avatar-edit i {
  color: #667eea;
  font-size: 14px;
}

.profil-name {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
}

.profil-email {
  font-size: 0.9rem;
  opacity: 0.9;
  margin: 0;
}

.profil-username {
  font-size: 0.85rem;
  color: #8b5cf6;
  margin: 0.15rem 0 0;
  font-weight: 500;
}

.profil-menu-sections {
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  margin-bottom: 1.5rem;
}

.profil-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid var(--border-color);
  font-family: inherit;
}

.profil-menu-item:last-child {
  border-bottom: none;
}

.profil-menu-item:hover {
  background: var(--bg-tertiary);
}

.profil-menu-item-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profil-menu-icon {
  font-size: 1.25rem;
  color: var(--accent-color);
  width: 24px;
  text-align: center;
}

.profil-menu-item span {
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 500;
}

.profil-menu-arrow {
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

.profil-danger-zone {
  margin-top: 2rem;
}

.profil-danger-btn {
  width: 100%;
  padding: 1rem;
  background: transparent;
  border: 2px solid var(--danger-color);
  border-radius: 12px;
  color: var(--danger-color);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
}

.profil-danger-btn:hover {
  background: var(--danger-color);
  color: white;
}

/* ============================================
   BOUTON ENREGISTRER — Détail Produit
   ============================================ */

.detail-save-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.detail-save-btn:hover {
  transform: scale(1.1);
  background: white;
}

.detail-save-btn.saved {
  color: var(--accent-color);
}

.detail-save-btn.saved i {
  animation: bookmarkBounce 0.3s ease-in-out;
}

@keyframes bookmarkBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* ============================================
   MES ENREGISTREMENTS — Section Profil (Instagram)
   ============================================ */

.profil-saves-section {
  margin-top: 2rem;
  background: var(--card-bg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.profil-saves-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.profil-saves-header h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profil-saves-header h2 i {
  color: var(--accent-color);
}

/* Onglets */
.profil-saves-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.profil-saves-tab {
  flex: 1;
  padding: 0.75rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
}

.profil-saves-tab:hover {
  background: var(--bg-tertiary);
}

.profil-saves-tab.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.profil-saves-tab i {
  font-size: 1rem;
}

/* Grille Instagram - 3 colonnes pleine largeur */
.profil-saves-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  width: 100%;
}

.profil-save-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-tertiary);
  width: 100%;
  min-height: 120px;
}

.profil-save-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}

.profil-save-item:hover img {
  transform: scale(1.05);
}

/* Overlay au hover */
.profil-save-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.profil-save-item:hover .profil-save-overlay {
  opacity: 1;
}

.profil-save-overlay i {
  color: white;
  font-size: 1.5rem;
}

/* Badge type (actualite/produit) */
.profil-save-type-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.profil-save-type-badge i {
  font-size: 0.625rem;
}

/* Prix pour produits */
.profil-save-price {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Loading */
.profil-saves-loading {
  padding: 2rem;
  text-align: center;
}

/* État vide */
.profil-saves-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-secondary);
}

.profil-saves-empty i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

.profil-saves-empty p {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
}

.profil-saves-empty span {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 640px) {
  .profil-saves-grid {
    gap: 1px;
    padding: 1px;
  }
  
  .profil-saves-tab span {
    display: none;
  }
  
  .profil-saves-tab i {
    font-size: 1.25rem;
  }
}

/* ============================================
   CHAT — Deeplinks dans les messages
   ============================================ */

.chat-deeplink {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
  cursor: pointer;
  word-break: break-all;
  transition: opacity 0.2s ease;
}

.chat-deeplink:hover {
  opacity: 0.8;
}

.chat-deeplink:active {
  opacity: 0.6;
}

/* Mode sombre : ajuster la couleur des deeplinks */
.dark .chat-deeplink {
  color: var(--accent-color);
}

/* Carte variante dans le chat — styles complémentaires */
.chat-variante-card {
  transition: transform 0.15s ease;
}

.chat-variante-card:active {
  transform: scale(0.98);
}

/* ============================================
   PHASE 5 — BADGES ATTRIBUTS & MINIATURES VARIANTES
   ============================================ */

/* Container des badges d'attributs */
/* Badges de variantes - Style / */
.variant-badges-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  border-bottom: 1px solid var(--border-color);
}

/* Badge individuel d'attribut - Plus visible et élégant */
.variant-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--card-bg);
  border: 2px solid var(--accent-color);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.variant-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
  background: rgba(59, 130, 246, 0.05);
}

/* Mode sombre pour les badges */
.dark .variant-badge {
  background: rgba(208, 188, 255, 0.1);
  border-color: rgba(208, 188, 255, 0.2);
}

.dark .variant-badge:hover {
  background: rgba(208, 188, 255, 0.15);
  border-color: rgba(208, 188, 255, 0.3);
}

/* Container des miniatures des variantes */
.variant-thumbnails-container {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 0;
}

.variant-thumbnails-container h4 {
  padding: 0 16px 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Scroll horizontal des miniatures */
.thumbnails-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.thumbnails-scroll::-webkit-scrollbar {
  height: 4px;
}

.thumbnails-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.thumbnails-scroll::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

/* Miniature individuelle */
/* Miniatures variantes - Style / amélioré */
.variant-thumbnail {
  flex-shrink: 0;
  width: 100px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg);
  border: 3px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.variant-thumbnail:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.variant-thumbnail.active {
  border-color: var(--accent-color);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
  transform: translateY(-6px);
}

.variant-thumbnail.soldout {
  opacity: 0.6;
  filter: grayscale(50%);
}

/* Image de la miniature */
.thumbnail-image {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  position: relative;
  overflow: hidden;
}

.thumbnail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-image i {
  font-size: 32px;
  color: var(--text-tertiary);
}

/* Overlay "Épuisé" sur la miniature */
.thumbnail-soldout-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail-soldout-overlay span {
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  background: rgba(239, 68, 68, 0.9);
  border-radius: 4px;
}

/* Infos de la miniature */
.thumbnail-info {
  padding: 8px;
  text-align: center;
}

.thumbnail-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.thumbnail-price {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-color);
}

/* Stock dynamique */
.variant-stock.low-stock {
  color: var(--warning-color);
  font-weight: 600;
  animation: pulse 2s infinite;
}

.variant-stock.out-of-stock {
  color: var(--danger-color);
  font-weight: 600;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Mode sombre pour les miniatures */
.dark .variant-thumbnail {
  background: var(--card-bg);
}

.dark .variant-thumbnail:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark .variant-thumbnail.active {
  box-shadow: 0 0 0 3px rgba(208, 188, 255, 0.1);
}

/* Responsive */
@media (max-width: 640px) {
  .variant-thumbnail {
    width: 80px;
  }
  
  .thumbnail-image {
    height: 80px;
  }
  
  .variant-badge {
    font-size: 12px;
    padding: 5px 10px;
  }
}

/* ============================================
   DETAIL PRODUIT — Composants Style 
   ============================================ */

/* Titres de section */
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title i {
  color: #3b82f6;
}

/* Prix par paliers */
.prix-paliers-section {
  padding: 1rem;
  background: #f9fafb;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  margin-bottom: 1rem;
}

.paliers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}

.palier-item {
  padding: 1rem;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.palier-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
  transform: translateY(-2px);
}

.palier-item.active {
  border-color: #3b82f6;
  background: #eff6ff;
}

.palier-quantite {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
}

.palier-prix {
  font-size: 1.25rem;
  font-weight: 800;
  color: #16a34a;
}

.palier-unit {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Caractéristiques */
.caracteristiques-section {
  padding: 1rem;
  background: #f9fafb;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  margin-bottom: 1rem;
}

.caracteristiques-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.caracteristique-item {
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

.caracteristique-value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.caracteristique-label {
  font-size: 0.75rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Options de personnalisation */
.personnalisation-section {
  padding: 1rem;
  background: #fef3c7;
  border-radius: 0.75rem;
  border: 1px solid #fcd34d;
  margin-bottom: 1rem;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.option-item {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.2s ease;
}

.option-item:hover {
  border-color: #f59e0b;
}

.option-item.selected {
  border-color: #f59e0b;
  background: #fffbeb;
}

.option-header {
  display: flex;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
}

.option-check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.option-check i {
  font-size: 1.25rem;
  color: #f59e0b;
}

.option-item .option-check i {
  color: #d1d5db;
}

.option-item.selected .option-check i {
  color: #f59e0b;
}

.option-info {
  flex: 1;
  min-width: 0;
}

.option-name {
  display: block;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.option-details {
  display: block;
  font-size: 0.8rem;
  color: #9ca3af;
}

.option-arrow {
  color: #9ca3af;
  margin-left: 0.75rem;
  transition: transform 0.2s ease;
}

.option-item.selected .option-arrow {
  transform: rotate(90deg);
}

/* Badges de confiance */
.badges-confiance-section {
  padding: 1rem;
  background: #ecfdf5;
  border-radius: 0.75rem;
  border: 1px solid #a7f3d0;
  margin-bottom: 1rem;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid #d1fae5;
  border-radius: 0.5rem;
}

.badge-item i {
  font-size: 1.25rem;
  color: #16a34a;
}

.badge-item span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
}

/* Section livraison */
.livraison-section {
  padding: 1rem;
  background: #f0f9ff;
  border-radius: 0.75rem;
  border: 1px solid #bae6fd;
  margin-bottom: 1rem;
}

.livraisons-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.livraison-item {
  padding: 1rem;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.livraison-item:hover {
  border-color: #3b82f6;
}

.livraison-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.livraison-badge {
  background: #3b82f6;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.livraison-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.livraison-prix {
  font-weight: 700;
  color: #16a34a;
  font-size: 1rem;
}

.livraison-delai {
  color: #6b7280;
  font-size: 0.875rem;
}

.livraison-desc {
  font-size: 0.8rem;
  color: #9ca3af;
  margin: 0;
}

/* Avis et évaluations */
.avis-section {
  padding: 1rem;
  background: #fafafa;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  margin-bottom: 1rem;
}

.avis-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.avis-note-globale {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}

.note-chiffre {
  font-size: 3rem;
  font-weight: 800;
  color: #1f2937;
  line-height: 1;
}

.avis-stars {
  display: flex;
  gap: 0.25rem;
  margin: 0.5rem 0;
}

.avis-stars i {
  font-size: 1.25rem;
  color: #fbbf24;
}

.avis-count {
  font-size: 0.875rem;
  color: #6b7280;
}

.avis-notes-detaillees {
  flex: 1;
  min-width: 200px;
}

.note-barre-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.note-label {
  width: 80px;
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 500;
}

.note-barre {
  flex: 1;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.note-barre-fill {
  height: 100%;
  background: #fbbf24;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.note-value {
  width: 40px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1f2937;
  text-align: right;
}

.avis-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.avis-item {
  padding: 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

.avis-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.avis-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.avis-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3b82f6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.avis-user-info {
  display: flex;
  flex-direction: column;
}

.avis-user-name {
  font-weight: 600;
  color: #1f2937;
}

.avis-verified {
  font-size: 0.7rem;
  color: #16a34a;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.avis-date {
  font-size: 0.75rem;
  color: #9ca3af;
}

.avis-stars-small {
  display: flex;
  gap: 0.125rem;
  margin-bottom: 0.5rem;
}

.avis-stars-small i {
  font-size: 0.875rem;
  color: #fbbf24;
}

.avis-commentaire {
  color: #374151;
  line-height: 1.5;
  font-size: 0.9rem;
  margin: 0;
}

.avis-empty {
  text-align: center;
  padding: 2rem;
  color: #9ca3af;
}

.avis-empty i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.avis-empty p {
  margin: 0.25rem 0;
}

.avis-empty-sub {
  font-size: 0.875rem;
}

.btn-voir-plus-avis {
  width: 100%;
  padding: 0.75rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  color: #374151;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 1rem;
}

.btn-voir-plus-avis:hover {
  background: #e5e7eb;
}

/* Profil vendeur */
.vendeur-section {
  padding: 1rem;
  background: #fafafa;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  margin-bottom: 1rem;
}

.vendeur-card {
  background: white;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.vendeur-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.vendeur-logo {
  width: 60px;
  height: 60px;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f3f4f6;
  flex-shrink: 0;
}

.vendeur-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vendeur-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 1.5rem;
}

.vendeur-info {
  flex: 1;
  min-width: 0;
}

.vendeur-nom {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

.vendeur-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vendeur-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #eff6ff;
  color: #3b82f6;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
}

.vendeur-stats {
  display: flex;
  justify-content: space-around;
  padding: 1rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.vendeur-stat {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #1f2937;
}

.stat-label {
  display: block;
  font-size: 0.7rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

.vendeur-actions {
  display: flex;
  padding: 1rem;
  gap: 0.75rem;
}

.btn-vendeur-profil,
.btn-vendeur-produits {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: white;
  color: #374151;
}

.btn-vendeur-profil:hover,
.btn-vendeur-produits:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #eff6ff;
}

/* FAQ */
.faq-section {
  padding: 1rem;
  background: #fafafa;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  margin-bottom: 1rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.faq-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  cursor: pointer;
  font-weight: 600;
  color: #1f2937;
}

.faq-arrow {
  color: #9ca3af;
  transition: transform 0.2s ease;
}

.faq-item.open .faq-arrow {
  transform: rotate(180deg);
}

.faq-reponse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.faq-item.open .faq-reponse {
  max-height: 500px;
}

.faq-reponse p {
  padding: 1rem;
  margin: 0;
  color: #374151;
  line-height: 1.6;
}

/* ============================================
   RESPONSIVE - Composants 
   ============================================ */

@media (max-width: 640px) {
  .paliers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .caracteristiques-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .badges-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .avis-summary {
    flex-direction: column;
    gap: 1rem;
  }
  
  .vendeur-stats {
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .vendeur-actions {
    flex-direction: column;
  }
  
  .note-barre-item {
    flex-wrap: wrap;
  }
  
  .note-label {
    width: auto;
  }
  
  .note-barre {
    flex: 1;
    min-width: 120px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .paliers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .caracteristiques-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   COMPOSANTS UX VAGUE 0/1 — A11y, fraîcheur, PTR
   ============================================ */

/* Accessibilité : texte masqué visuellement mais lisible par lecteurs d'écran
   (fallback sans dépendance à Tailwind) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Badge de fraîcheur des données */
.wely-freshness-container {
  display: flex;
  justify-content: center;
  padding: 4px 12px;
}

.wely-freshness {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #666;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  margin: 0 auto;
  max-width: fit-content;
}

.wely-freshness::before {
  content: '●';
  font-size: 8px;
  line-height: 1;
}

.wely-freshness--fresh {
  border-left: 3px solid #16a34a;
}

.wely-freshness--fresh::before {
  color: #16a34a;
}

.wely-freshness--ok {
  border-left: 3px solid #d97706;
}

.wely-freshness--ok::before {
  color: #d97706;
}

.wely-freshness--stale {
  border-left: 3px solid #dc2626;
}

.wely-freshness--stale::before {
  color: #dc2626;
}

/* Sur mobile, le badge ne dépasse pas l'écran */
@media (max-width: 640px) {
  .wely-freshness {
    max-width: 90vw;
  }
}

/* Pulsation (feedback visuel court) */
@keyframes wely-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.wely-pulse {
  animation: wely-pulse 300ms ease-in-out;
}

/* Indicateur pull-to-refresh */
.wely-ptr {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  z-index: 30;
}

.wely-ptr::after {
  content: '↓';
  font-size: 16px;
  line-height: 1;
}

.wely-ptr[data-state="pulling"] {
  transform: translateX(-50%) rotate(0deg);
}

.wely-ptr[data-state="ready"] {
  transform: translateX(-50%) rotate(180deg);
  color: #FF6A00;
}

.wely-ptr[data-state="ready"]::after {
  color: #FF6A00;
}

.wely-ptr[data-state="refreshing"]::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: #FF6A00;
  border-radius: 50%;
  animation: wely-ptr-spin 0.6s linear infinite;
}

@keyframes wely-ptr-spin {
  to { transform: rotate(360deg); }
}

/* Accessibilité : respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .wely-pulse,
  .wely-ptr,
  .wely-ptr::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   ACCESSIBILITÉ — T7 : contrastes orange AA
   Textes orange porteurs d'info sur fond clair →
   orange-700 (#C2410C, ≈5.5:1). Pas de changement
   des fonds décoratifs ni des dégradés de marque.
   ============================================ */
.product-price,
.palier-qte,
.product-meta-item.stock-warning,
.flash-timer-label,
.section-link,
.suggestions-more-btn,
.hero-cta {
  color: var(--a11y-orange-text) !important;
}

/* Mode sombre : ces éléments restent sur cartes sombres (#2B2930) où
   #FF6A00 passe déjà ≈4.9:1 ; on restaure la couleur d'origine. */
.dark .product-price,
.dark .product-meta-item.stock-warning,
.dark .palier-qte {
  color: #FF6A00 !important;
}

/* Blanc sur orange plein : variantes foncées pour atteindre AA
   (pastilles info petites → #C2410C = 5.5:1 ; icône bouton → #D24E00 = 4.0:1). */
.search-icon-btn {
  background-color: #D24E00 !important;
}

.search-icon-btn:hover {
  background-color: #E55A00 !important;
}

.flash-timer-item,
#promo-badge-bottom {
  background-color: #C2410C !important;
}

/* ============================================
   ACCESSIBILITÉ — T7 : cibles tactiles ≥ 44×44 px
   ============================================ */

/* Boutons d'action du header (38 px desktop) */
@media (min-width: 481px) {
  .header-action-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* CTA principal du hero + boutons de fermeture plein écran */
.hero-cta,
.stories-viewer-close,
.actualites-viewer-close,
.actualites-modal-close {
  min-width: 44px;
  min-height: 44px;
}

/* ============================================
   ESPACE VENDEUR — Header applicatif + Menu hamburger
   (remplace l'ancienne nav horizontale)
   ============================================ */

.vendeur-app-header {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0));
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.35);
}

.vendeur-app-header-info {
  min-width: 0;
  flex: 1;
}

.vendeur-app-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}

.vendeur-app-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vendeur-app-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.vendeur-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.vendeur-icon-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.vendeur-icon-btn:active {
  transform: scale(0.94);
}

.vendeur-icon-btn-accent {
  background: #fff;
  color: #2563eb;
}

.vendeur-icon-btn-accent:hover {
  background: #eef2ff;
}

.vendeur-icon-btn-light {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.vendeur-icon-btn-light:hover {
  background: #d1d5db;
  color: #374151;
}

.vendeur-icon-btn-light:active {
  transform: scale(0.94);
}

.dark .vendeur-icon-btn-light {
  background: #36343b;
  color: #e6e1e5;
}

.dark .vendeur-icon-btn-light:hover {
  background: #49454f;
  color: #ffffff;
}

.vendeur-bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 9999px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.vendeur-grade-badge {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  text-transform: capitalize;
}

/* Sous-vues vendeur : respiration + plein écran */
#view-vendeur > .view:not(#view-vendeur-produit-creation) {
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0));
  max-width: 900px;
  margin: 0 auto;
}

#view-vendeur-produit-creation {
  margin: 0;
  max-width: none;
}

/* Overlay + tiroir du menu */
.vendeur-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
}

.vendeur-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: #fff;
  z-index: 91;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
}

.vendeur-menu.open {
  transform: translateX(0);
}

.vendeur-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0));
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

.vendeur-menu-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.vendeur-menu-header .vendeur-icon-btn {
  background: rgba(255, 255, 255, 0.15);
}

.vendeur-menu-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vendeur-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 14px;
  border: none;
  background: transparent;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-align: left;
}

.vendeur-menu-item i {
  width: 22px;
  text-align: center;
  font-size: 16px;
  color: #6b7280;
  transition: color 0.15s ease;
}

.vendeur-menu-item:hover {
  background: #f3f4f6;
}

.vendeur-menu-item.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
}

.vendeur-menu-item.active i {
  color: #2563eb;
}

.vendeur-menu-footer {
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid #e5e7eb;
}

.vendeur-menu-home {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.vendeur-menu-home:hover {
  opacity: 0.92;
}

.vendeur-menu-home:active {
  transform: scale(0.98);
}

.dark .vendeur-menu {
  background: #1f2937;
}

.dark .vendeur-menu-header {
  border-bottom-color: #374151;
}

.dark .vendeur-menu-item {
  color: #e5e7eb;
}

.dark .vendeur-menu-item i {
  color: #9ca3af;
}

.dark .vendeur-menu-item:hover {
  background: #374151;
}

.dark .vendeur-menu-item.active {
  background: #1e3a8a;
  color: #bfdbfe;
}

.dark .vendeur-menu-item.active i {
  color: #bfdbfe;
}

.dark .vendeur-menu-footer {
  border-top-color: #374151;
}

/* ============================================
   R2 — Sélecteur de boutique dans le header vendeur
   ============================================ */

.vendeur-boutique-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  max-width: 100%;
}

.vendeur-boutique-switcher > i {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  flex-shrink: 0;
}

.vendeur-boutique-switcher select {
  min-width: 0;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
}

/* ============================================
   ADMIN — En-tête + menu hamburger (style espace vendeur)
   ============================================ */

.admin-app-header {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0));
  background: linear-gradient(135deg, #1e3a8a 0%, #373087 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(30, 58, 138, 0.35);
}

.admin-app-header-info {
  min-width: 0;
  flex: 1;
}

.admin-app-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}

.admin-app-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-app-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.admin-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.admin-icon-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.admin-icon-btn:active {
  transform: scale(0.94);
}

.admin-icon-btn-accent {
  background: #fff;
  color: #1e3a8a;
}

.admin-icon-btn-accent:hover {
  background: #eef2ff;
}

/* Overlay + tiroir du menu admin */
.admin-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
  display: none;
}

.admin-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: #fff;
  z-index: 91;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
}

.admin-menu.open {
  transform: translateX(0);
}

.admin-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0));
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #1e3a8a 0%, #373087 100%);
}

.admin-menu-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.admin-menu-header .admin-icon-btn {
  background: rgba(255, 255, 255, 0.15);
}

.admin-menu-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 14px;
  border: none;
  background: transparent;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-align: left;
}

.admin-menu-item i {
  width: 22px;
  text-align: center;
  font-size: 16px;
  color: #6b7280;
  transition: color 0.15s ease;
}

.admin-menu-item:hover {
  background: #f3f4f6;
}

.admin-menu-item.active {
  background: #eff6ff;
  color: #1e3a8a;
  font-weight: 600;
}

.admin-menu-item.active i {
  color: #1e3a8a;
}

.admin-menu-footer {
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid #e5e7eb;
}

.admin-menu-home {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #1e3a8a 0%, #373087 100%);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.admin-menu-home:hover {
  opacity: 0.92;
}

.admin-menu-home:active {
  transform: scale(0.98);
}

.admin-app-content {
  padding: 16px 16px calc(24px + env(safe-area-in-set-bottom, 0));
  max-width: 900px;
  margin: 0 auto;
}

/* Cacher l'ancienne barre de tabs */
.admin-tabs-bar {
  display: none !important;
}


   ============================================ */

.dark .vendeur-boutique-switcher select {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #4b5563;
}

.dark .vendeur-boutique-switcher select option {
  background: #1f2937;
  color: #e5e7eb;
}

#view-vendeur input[type="search"],
#view-vendeur input[type="number"] {
  transition: background 0.15s ease, border-color 0.15s ease;
}

.dark #view-vendeur input[type="search"],
.dark #view-vendeur input[type="number"] {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #374151;
}

.dark #view-vendeur input[type="search"]::placeholder {
  color: #6b7280;
}

.dark #view-vendeur input[type="search"]:focus,
.dark #view-vendeur input[type="number"]:focus {
  background: #1f2937;
  border-color: #8b5cf6;
}

/* Notifications : lignes non lues + survol en dark mode */
.dark #vendeur-notifications-list .bg-blue-50 {
  background: rgba(37, 99, 235, 0.18);
}

.dark #vendeur-notifications-list .hover\:bg-gray-50:hover {
  background: #36343b;
}

/* Info grade (modal envoi) en dark mode */
.dark #vendeur-notif-info {
  background: rgba(37, 99, 235, 0.18);
  border-color: #1e3a8a;
}

.dark #vendeur-notif-info p {
  color: #bfdbfe;
}

/* Coupons : fond des badges/sections internes en dark mode */
.dark #view-vendeur-coupons .bg-blue-50 {
  background: rgba(37, 99, 235, 0.18);
}

.dark #view-vendeur-coupons .text-blue-700 {
  color: #bfdbfe;
}


/* ============================================
   Vue plein écran "Mes informations" (Profil)
   ============================================ */
.profil-edit-view {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  color: var(--text-primary);
  z-index: 1001;
}

.profil-edit-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  z-index: 2;
}

.profil-edit-back-btn {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.profil-edit-back-btn:hover { background: var(--bg-tertiary); }
.profil-edit-back-btn:active { transform: scale(0.94); }

.profil-edit-header-title { flex: 1; min-width: 0; }
.profil-edit-header-title h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}
.profil-edit-header-title p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profil-edit-header-spacer { width: 2.5rem; flex-shrink: 0; }

.profil-edit-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem 1rem 2rem;
  max-width: 42rem;
  width: 100%;
  margin: 0 auto;
}

.profil-edit-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.profil-edit-section-title {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profil-edit-section-title i { color: var(--accent-color); }

.profil-edit-field { margin-bottom: 1rem; }
.profil-edit-field:last-child { margin-bottom: 0; }

.profil-edit-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.profil-edit-optional {
  font-weight: 400;
  color: var(--text-tertiary);
}

.profil-edit-input-wrap {
  position: relative;
}

.profil-edit-input-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 0.875rem;
  pointer-events: none;
}

.profil-edit-textarea + .profil-edit-input-icon,
.profil-edit-input-wrap:has(.profil-edit-textarea) .profil-edit-input-icon {
  top: 1rem;
  transform: none;
}

.profil-edit-input {
  width: 100%;
  padding: 0.7rem 0.875rem 0.7rem 2.4rem;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9375rem;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.profil-edit-textarea {
  resize: vertical;
  min-height: 3.2rem;
}

.profil-edit-input::placeholder { color: var(--text-tertiary); }

.profil-edit-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.dark .profil-edit-input:focus {
  box-shadow: 0 0 0 3px rgba(208, 188, 255, 0.2);
}

.profil-edit-hint {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.profil-edit-field-msg {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
}
.profil-edit-field-msg.is-error { color: var(--danger-color); }
.profil-edit-field-msg.is-ok { color: var(--success-color); }

.profil-edit-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.profil-edit-form-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--danger-color);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}

.profil-edit-footer {
  flex-shrink: 0;
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom));
  background: var(--card-bg);
  border-top: 1px solid var(--border-color);
  max-width: 42rem;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.profil-edit-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 0.875rem;
  border: 1px solid var(--border-color);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.15s ease;
}

.profil-edit-btn:active { transform: scale(0.98); }
.profil-edit-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.profil-edit-btn-cancel {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.profil-edit-btn-cancel:hover { background: var(--bg-tertiary); }

.profil-edit-btn-save {
  background: linear-gradient(135deg, #10b981, #0d9488);
  color: #fff;
  border: none;
}
.profil-edit-btn-save:hover { filter: brightness(1.05); }

@media (max-width: 640px) {
  .profil-edit-grid-2 { grid-template-columns: 1fr; }
}

/* ============================================
   Modales personnalisées du Profil (remplacement SweetAlert)
   ============================================ */
.profil-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 15, 20, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: profil-modal-fade 0.18s ease;
}

.profil-modal {
  width: 100%;
  max-width: 26rem;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--card-bg);
  color: var(--text-primary);
  border-radius: 1.25rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-color);
  animation: profil-modal-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.profil-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 0;
}

.profil-modal-icon {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.9rem;
  font-size: 1.25rem;
}
.profil-modal-icon.is-info { background: rgba(59, 130, 246, 0.14); color: var(--accent-color); }
.profil-modal-icon.is-success { background: rgba(16, 185, 129, 0.14); color: var(--success-color); }
.profil-modal-icon.is-warning { background: rgba(245, 158, 11, 0.16); color: var(--warning-color); }
.profil-modal-icon.is-danger { background: rgba(239, 68, 68, 0.14); color: var(--danger-color); }

.profil-modal-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.profil-modal-body {
  padding: 0.75rem 1.25rem 1.25rem;
  color: var(--text-secondary);
  font-size: 0.906rem;
  line-height: 1.55;
}

.profil-modal-body label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0.9rem 0 0.4rem;
}

.profil-modal-input,
.profil-modal-textarea,
.profil-modal-select {
  width: 100%;
  padding: 0.65rem 0.875rem;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.906rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.profil-modal-input:focus,
.profil-modal-textarea:focus,
.profil-modal-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.dark .profil-modal-input:focus,
.dark .profil-modal-textarea:focus,
.dark .profil-modal-select:focus {
  box-shadow: 0 0 0 3px rgba(208, 188, 255, 0.2);
}

.profil-modal-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  cursor: pointer;
  font-size: 0.906rem;
  color: var(--text-primary);
  user-select: none;
}
.profil-modal-check input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent-color);
  flex-shrink: 0;
}

.profil-modal-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--danger-color);
  border-radius: 0.6rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 0.75rem;
}

.profil-modal-msg {
  margin: 0.25rem 0 0;
}

.profil-modal-footer {
  display: flex;
  gap: 0.65rem;
  padding: 0 1.25rem 1.25rem;
}

.profil-modal-btn {
  flex: 1;
  padding: 0.7rem 1rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.906rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, opacity 0.15s ease;
}
.profil-modal-btn:hover { background: var(--bg-tertiary); }
.profil-modal-btn:active { transform: scale(0.98); }
.profil-modal-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.profil-modal-btn.is-primary {
  background: linear-gradient(135deg, #10b981, #0d9488);
  color: #fff;
  border: none;
}
.profil-modal-btn.is-primary:hover { filter: brightness(1.05); }
.profil-modal-btn.is-danger {
  background: linear-gradient(135deg, #f43f5e, #dc2626);
  color: #fff;
  border: none;
}
.profil-modal-btn.is-danger:hover { filter: brightness(1.05); }
.profil-modal-btn.is-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
}
.profil-modal-btn.is-warning:hover { filter: brightness(1.05); }

.profil-modal-close {
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: 9999px;
  cursor: pointer;
  font-size: 0.85rem;
}

@keyframes profil-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes profil-modal-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Empêche le scroll de l'arrière-plan quand une modale est ouverte */
body.profil-modal-open {
  overflow: hidden;
}