/* ===============================================
   RESPONSIVE TABLETTE - THÈME MODERNE v3.0
   Design adaptatif pour écrans tablettes 768px - 1024px
   =============================================== */

/* Variables spécifiques tablette */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --sidebar-width: 320px;
    --space-xs: 0.375rem;
    --space-sm: 0.625rem;
    --space-md: 0.875rem;
    --space-lg: 1.25rem;
    --space-xl: 1.75rem;
    --space-2xl: 2.25rem;
  }
}

/* ===============================================
   LAYOUT TABLETTE
   =============================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  
  /* Sidebar tablette */
  .sidebar {
    width: var(--sidebar-width);
    padding: var(--space-lg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  
  .sidebar-header {
    padding: var(--space-lg) 0 var(--space-xl);
    margin-bottom: var(--space-lg);
  }
  
  .sidebar-title {
    font-size: 1.2rem;
  }
  
  .sidebar-subtitle {
    font-size: 0.9rem;
  }
  
  /* Bouton d'ajout tablette */
  .add-group-btn {
    padding: var(--space-md) var(--space-lg);
    font-size: 0.95rem;
    margin-bottom: var(--space-xl);
  }
  
  /* Liste des groupes tablette */
  #groupList {
    gap: var(--space-sm);
  }
  
  #groupList li {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    min-height: 50px;
    display: flex;
    align-items: center;
  }
  
  .group-name {
    font-size: 0.9rem;
    font-weight: 500;
  }
  
  .card-count-bubble {
    padding: 4px 8px;
    font-size: 0.75rem;
    min-width: 22px;
    height: 22px;
  }
  
  /* Répertoires tablette */
  #groupList li.directory-header {
    padding: var(--space-lg);
    font-size: 1rem;
    margin-bottom: var(--space-md);
  }
  
  /* Container principal tablette */
  .container {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: var(--space-xl);
  }
  
  /* ===============================================
     CARTES TABLETTE
     =============================================== */
  .card {
    max-width: 700px;
    height: 350px;
    margin: var(--space-lg) auto;
  }
  
  .card-inner {
    height: 100%;
  }
  
  .card-face {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    font-size: 1rem;
  }
  
  .card-face h3 {
    font-size: 1.3rem;
    margin-bottom: var(--space-lg);
  }
  
  .card-face p {
    font-size: 1rem;
    line-height: 1.7;
  }
  
  .card-face img {
    max-width: 100%;
    max-height: 220px;
    margin: var(--space-md) 0;
  }
  
  /* ===============================================
     CONTRÔLES TABLETTE
     =============================================== */
  .progress-bar {
    width: 100%;
    max-width: 500px;
    height: 8px;
    margin: var(--space-xl) 0;
  }
  
  .buttons {
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .buttons button {
    padding: var(--space-md) var(--space-lg);
    font-size: 0.9rem;
    min-width: 110px;
  }
  
  .counter {
    padding: var(--space-md) var(--space-lg) !important;
    font-size: 1rem !important;
  }
  
  .s-001, #cardNumberInput {
    font-size: 1rem !important;
    width: 55px !important;
  }
  
  /* Boutons spéciaux tablette */
  #melanger {
    padding: var(--space-lg) var(--space-xl) !important;
    font-size: 1rem !important;
  }
  
  /* ===============================================
     MODALES TABLETTE - Style moderne harmonisé
     =============================================== */
  .modal {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(12px) !important;
  }
  
  .modal-content {
    width: 88%;
    max-width: 700px;
    margin: 4vh auto;
    max-height: 90vh;
    border-radius: 22px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    background: linear-gradient(165deg, rgba(26, 26, 46, 0.98), rgba(15, 15, 30, 0.99));
  }
  
  .modal-header {
    padding: 22px 26px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
  }
  
  .modal-header h2 {
    font-size: 1.35rem;
    padding-right: 50px;
    color: #fff;
  }
  
  .modal-content .close {
    width: 42px;
    height: 42px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #f87171;
    font-size: 1.3rem;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .modal-content .close:hover {
    background: rgba(239, 68, 68, 0.9);
    color: white;
  }
  
  .modal-content > div:not(.modal-header) {
    padding: 22px 26px;
  }
  
  #allCardsContent {
    max-height: 60vh;
    padding: 18px;
  }
  
  /* ===============================================
     FORMULAIRES TABLETTE
     =============================================== */
  .modal-content form {
    gap: 18px;
  }
  
  .modal-content input,
  .modal-content select,
  .modal-content textarea,
  .editable-field {
    padding: 14px 16px;
    font-size: 0.95rem;
    border-radius: 12px;
    background: rgba(15, 15, 30, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.2);
  }
  
  .modal-content input:focus,
  .modal-content select:focus,
  .modal-content textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  }
  
  .modal-content textarea {
    min-height: 120px;
  }
  
  .modal-content button[type="submit"] {
    padding: 15px 24px;
    font-size: 1rem;
    margin-top: var(--space-md);
  }
  
  /* ===============================================
     LISTE DES CARTES TABLETTE
     =============================================== */
  
  /* Boutons création */
  #allCardsModal .add-card-btn {
    margin: 14px 22px 0 22px;
  }
  
  #allCardsModal .bulk-cards-btn {
    margin: 8px 22px 14px 22px;
  }
  
  /* Images dans les cartes */
  #allCardsContent img {
    max-height: 120px;
  }
  
  .add-card-btn {
    padding: var(--space-md) var(--space-lg);
    font-size: 0.95rem;
    margin-bottom: var(--space-lg);
  }
  
  .all-card-item {
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
  }
  
  .card-info {
    margin-right: 90px;
    font-size: 0.9rem;
  }
  
  .card-actions {
    top: var(--space-md);
    right: var(--space-md);
    gap: var(--space-xs);
  }
  
  .edit-btn, .delete-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
  }
  
  /* ===============================================
     ADMIN TABLETTE
     =============================================== */
  .admin-modal .modal-content {
    width: 90%;
    max-width: 900px;
    height: 85vh;
  }
  
  .admin-tabs {
    gap: var(--space-sm);
    padding: var(--space-lg);
    flex-wrap: wrap;
  }
  
  .admin-tabs button {
    padding: var(--space-md) var(--space-lg);
    font-size: 0.9rem;
    flex: 1;
    min-width: 140px;
  }
  
  .admin-hierarchy {
    max-height: 55vh;
    padding: var(--space-lg);
  }
  
  .admin-controls {
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
  }
  
  .admin-controls .buttons {
    padding: var(--space-md) var(--space-lg);
    font-size: 0.9rem;
    min-width: 140px;
  }
  
  /* Utilisateurs admin tablette */
  .admin-user-list {
    padding: var(--space-lg);
  }
  
  .user-item {
    grid-template-columns: 2fr 2fr 1fr 1fr 1fr 2fr;
    gap: var(--space-md);
    padding: var(--space-lg);
  }
  
  .user-item input,
  .user-item select {
    padding: var(--space-sm);
    font-size: 0.9rem;
  }
  
  /* Hiérarchie tablette */
  .directory-header {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
  }
  
  .dir-name {
    font-size: 1rem;
    font-weight: 600;
  }
  
  .dir-actions {
    gap: var(--space-xs);
  }
  
  .group-list {
    padding-left: var(--space-xl);
    margin-top: var(--space-md);
  }
  
  .group-row {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
  }
  
  .group-actions {
    gap: var(--space-xs);
  }
  
  .group-actions button,
  .dir-actions button {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
  
  /* ===============================================
     NOTIFICATIONS TABLETTE
     =============================================== */
  #notification {
    top: var(--space-xl);
    right: var(--space-xl);
    padding: var(--space-lg);
    font-size: 0.95rem;
    max-width: 320px;
  }
  
  /* ===============================================
     SIGNATURE TABLETTE
     =============================================== */
  .signature-luiz {
    padding: var(--space-lg) var(--space-xl);
    font-size: 1rem;
    margin: var(--space-xl) 0;
    border-radius: var(--radius-lg);
  }
  
  /* ===============================================
     COMPTEUR UTILISATEURS TABLETTE
     =============================================== */
  .online-users-widget {
    top: var(--space-lg);
    right: var(--space-lg);
  }
  
  .online-counter {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
  }
  
  .online-tooltip {
    min-width: 320px;
    max-width: 400px;
    border-radius: var(--radius-md);
  }
  
  .tooltip-header {
    padding: var(--space-lg);
  }
  
  .header-legend {
    font-size: 0.75rem;
  }
  
  .users-list {
    max-height: 280px;
    padding: var(--space-md);
  }
  
  .section-header {
    font-size: 0.75rem;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
  }
  
  .user-item {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-xs);
    border-radius: var(--radius-sm);
  }
  
  .user-line {
    gap: var(--space-sm);
  }
  
  .user-name {
    font-size: 0.9rem;
  }
  
  .user-ip {
    font-size: 0.7rem;
    padding: 2px 6px;
  }
  
  .user-count {
    font-size: 0.7rem;
  }
  
  /* ===============================================
     BOUTONS D'IMAGE TABLETTE
     =============================================== */
  .add-image-btn {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9rem;
    margin: var(--space-sm) 0;
  }
  
  /* ===============================================
     ANIMATIONS TABLETTE
     =============================================== */
  
  /* Réduire certaines animations sur tablette pour les performances */
  .card-inner {
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .modal-content {
    animation: modalSlideInTablet 0.25s ease-out;
  }
  
  @keyframes modalSlideInTablet {
    from {
      transform: translateY(-30px) scale(0.97);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  
  .online-tooltip {
    animation: tooltipSlideInTablet 0.2s ease-out;
  }
  
  @keyframes tooltipSlideInTablet {
    from {
      opacity: 0;
      transform: translateY(-8px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  /* ===============================================
     ORIENTATION TABLETTE
     =============================================== */
  
  /* Portrait */
  @media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .container {
      padding: var(--space-xl) var(--space-lg);
    }
    
    .card {
      max-width: 90%;
    }
    
    .buttons {
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .admin-tabs {
      flex-direction: column;
    }
    
    .admin-tabs button {
      width: 100%;
    }
    
    .user-item {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-sm);
    }
  }
  
  /* Paysage */
  @media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    :root {
      --sidebar-width: 280px;
    }
    
    .sidebar {
      width: var(--sidebar-width);
      padding: var(--space-md);
    }
    
    .container {
      margin-left: var(--sidebar-width);
      width: calc(100% - var(--sidebar-width));
      padding: var(--space-lg);
    }
    
    .card {
      height: 280px;
      max-width: 600px;
    }
    
    .card-face {
      padding: var(--space-lg);
    }
    
    .modal-content {
      margin: 7.5vh auto;
    }
    
    .admin-hierarchy {
      max-height: 45vh;
    }
    
    .online-tooltip {
      max-height: 50vh;
    }
    
    .users-list {
      max-height: 200px;
    }
  }
  
  /* ===============================================
     PERFORMANCE TABLETTE
     =============================================== */
  
  /* Optimisations pour les tablettes moins performantes */
  @media (min-width: 769px) and (max-width: 1024px) and (max-resolution: 200dpi) {
    .card-face,
    .sidebar,
    .modal-content,
    .online-counter {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    body::before {
      opacity: 0.5;
    }
  }
  
  /* Mode économie d'énergie */
  @media (min-width: 769px) and (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .card-inner {
      transition: transform 0.3s ease;
    }
    
    .modal-content {
      animation: none;
    }
    
    .online-tooltip {
      animation: none;
    }
    
    * {
      transition-duration: 0.1s !important;
    }
  }
  
  /* ===============================================
     ACCESSIBILITÉ TABLETTE
     =============================================== */
  
  /* Zone de toucher optimale pour tablette */
  .close,
  .edit-btn,
  .delete-btn,
  .group-actions button,
  .dir-actions button {
    min-width: 36px;
    min-height: 36px;
  }
  
  /* Contraste élevé pour tablette */
  @media (min-width: 769px) and (max-width: 1024px) and (prefers-contrast: high) {
    :root {
      --border-color: rgba(255, 255, 255, 0.3);
      --text-secondary: #e2e8f0;
    }
    
    .card-face,
    .modal-content,
    .all-card-item {
      border-width: 2px;
    }
  }
  
  /* Focus visible amélioré */
  @media (min-width: 769px) and (max-width: 1024px) {
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
      outline: 3px solid var(--accent-primary);
      outline-offset: 2px;
    }
  }
  
  /* ===============================================
     FIXES SPÉCIFIQUES TABLETTE
     =============================================== */
  
  /* iPad Safari fixes */
  @supports (-webkit-touch-callout: none) {
    .modal-content {
      max-height: 85vh;
      max-height: -webkit-fill-available;
    }
    
    .container {
      min-height: 100vh;
      min-height: -webkit-fill-available;
    }
  }
  
  /* Touch optimizations */
  @media (min-width: 769px) and (max-width: 1024px) and (pointer: coarse) {
    .buttons button {
      padding: var(--space-lg);
      min-width: 120px;
    }
    
    #groupList li {
      min-height: 55px;
      padding: var(--space-lg);
    }
    
    .all-card-item {
      padding: var(--space-xl);
    }
    
    .edit-btn,
    .delete-btn {
      width: 40px;
      height: 40px;
    }
  }
}

@media (min-width: 769px) {
html.auth-confirmed .container {
    margin-left: var(--sidebar-width, 400px) !important;
  }
  
  html.visitor-mode:not(.auth-confirmed) .container {
    margin-left: var(--sidebar-width, 400px) !important;
  }
}

@media (min-width: 1200px) {
.feature-cards {
    gap: 40px;
  }
  
  .feature-card {
    flex: 0 1 320px;
  }
}

@media (min-width: 769px) {
.visitor-mode:not(.auth-confirmed) .container {
        margin-left: var(--sidebar-width) !important;
    }
}

@media (max-width: 1024px) {
.welcome-screen {
    padding: var(--space-md);
  }
  
  .ai-brain-container {
    width: 200px;
    height: 200px;
  }
  
  .welcome-title {
    font-size: 2.5rem;
  }
  
  .subtitle {
    font-size: 1.5rem;
  }
}

@media (max-width: 1024px) {
:root {
    --sidebar-width: 350px;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
  }
  
  .container {
    padding: var(--space-xl);
  }
  
  .card {
    max-width: 90%;
    height: 350px;
  }
  
  .card-face {
    padding: var(--space-xl);
  }
  
  .buttons {
    gap: var(--space-md);
  }
  
  .admin-tabs {
    flex-wrap: wrap;
  }
  
  .user-item {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }
  
  .modal-content {
    width: 95%;
    margin: 3% auto;
  }
}

/* ===============================================
   CORRECTION POUR ÉCRANS DESKTOP/TABLETTE HAUTEUR LIMITÉE
   Assure que les boutons d'auth sont toujours visibles
   =============================================== */
@media (min-width: 769px) and (max-height: 800px) {
  .container {
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }
  
  .welcome-screen {
    justify-content: flex-start !important;
    padding-top: 10px !important;
  }
  
  .ai-brain-container {
    width: 120px !important;
    height: 120px !important;
    margin-bottom: 10px !important;
  }
  
  .welcome-title {
    font-size: 2rem !important;
    margin-bottom: 5px !important;
  }
  
  .subtitle {
    font-size: 1.1rem !important;
  }
  
  .welcome-description {
    font-size: 0.9rem !important;
    margin-bottom: 15px !important;
  }
  
  .feature-cards {
    gap: 15px !important;
    margin-bottom: 20px !important;
  }
  
  .feature-card {
    padding: 15px !important;
  }
  
  .feature-icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 8px !important;
  }
  
  .feature-card h3 {
    font-size: 0.95rem !important;
  }
  
  .feature-card p {
    font-size: 0.8rem !important;
  }
  
  .auth-buttons {
    margin-top: 20px !important;
  }
}

@media (min-width: 769px) and (max-height: 700px) {
  .ai-brain-container {
    width: 100px !important;
    height: 100px !important;
    margin-bottom: 8px !important;
  }
  
  .welcome-title {
    font-size: 1.7rem !important;
  }
  
  .subtitle {
    font-size: 1rem !important;
  }
  
  .welcome-description {
    font-size: 0.85rem !important;
    margin-bottom: 10px !important;
  }
  
  .feature-cards {
    gap: 12px !important;
  }
  
  .feature-card {
    padding: 12px !important;
  }
  
  .feature-icon {
    width: 35px !important;
    height: 35px !important;
  }
  
  .feature-card h3 {
    font-size: 0.9rem !important;
  }
  
  .feature-card p {
    font-size: 0.75rem !important;
  }
  
  .auth-buttons {
    margin-top: 15px !important;
  }
  
  .btn-auth {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
}