/* ====== TABLETTE ====== */
@media (max-width: 1024px) {
    .scenario-container {
      grid-template-columns: 260px 1fr;
    }
  }
  /* ====== MOBILE ====== */
@media (max-width: 768px) {
  .app-header {
    flex-direction: column;
    height: auto;
    padding: var(--sp-sm) var(--sp-lg);
    gap: var(--sp-xs);
  }

  .app-logo h1 {
    font-size: var(--fs-md);
  }

  .tab-nav {
    max-width: 100%;
    justify-content: center;
    gap: var(--sp-lg);
  }

  .tab-btn {
    flex: 1;
    justify-content: center;
    padding: var(--sp-sm);
    font-size: var(--fs-md);
    border-bottom: 3px solid transparent;
  }

  .btn-retour-mobile {
    display: inline-flex;
  }

  .app-main {
    height: calc(100vh - 90px);
  }

  /* Données */
  .donnees-container {
    padding: var(--sp-lg);
    gap: var(--sp-lg);
    margin-bottom: 3rem;
  }

  .donnees-section {
    padding: var(--sp-lg);
  }

  .format-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }

  .format-card {
    flex-direction: row;
    padding: var(--sp-lg);
  }

  /* Scénario */
  .scenario-container {
    grid-template-columns: 1fr;
    position: relative;
    height: calc(100% - 3rem);
  }

  .scenario-arbre {
    position: absolute;
    inset: 0;
    z-index: 10;
  }

  .scenario-arbre.hidden-mobile {
    display: none;
  }

  .scenario-editeur {
    position: absolute;
    inset: 0;
    z-index: 11;
    display: none;
  }

  .scenario-editeur.active-mobile {
    display: block;
  }

  /* Chatbot */
  .chatbot-container {
    max-width: 100%;
    border: none;
    margin: var(--sp-xl) var(--sp-xl) 0;
    height: calc(100% - 6rem);
  }

  .chatbot-header {
    flex-direction: column;
    gap: var(--sp-sm);
    align-items: flex-start;
  }

  /* Filtres */
  .condition-row {
    grid-template-columns: 1fr;
    gap: var(--sp-xs);
  }

  .condition-combinateur-placeholder {
    display: none;
  }

  .condition-combinateur {
    width: 80px;
  }

  .form-row {
    flex-direction: column;
  }

  .chat-bulle {
    max-width: 95%;
  }

  .chat-carte,
  .chat-choix {
    margin-left: 0;
  }

  .template-colonnes-liste {
    max-height: 80px;
    overflow-y: auto;
  }
}

@media (max-width: 576px) {
  .tab-btn {
    font-size: var(--fs-sm);
  }
  .chatbot-messages {
    padding: var(--sp-xxl);
}
}