/* ============================================
   LEAN SAAS — RESPONSIVE TABLETTE
   Cible : 1024px (paysage) · 768px (portrait)
   Ne pas modifier design-system.css ni main.css.
   ============================================ */


/* ============================================
   TABLETTE PAYSAGE — max-width: 1024px
   iPad standard / Android 10" en landscape
   Ajustements légers, le desktop tient encore.
   ============================================ */

@media (max-width: 1024px) {

  /* Header outil / méthode / page : padding réduit */
  .tool-header,
  .method-header,
  .page-header {
    padding: var(--space-4) 0;
  }

  .tool-header h1,
  .method-header h1,
  .page-header h1 {
    font-size: var(--text-2xl);
  }

  .tool-header p,
  .method-header p,
  .page-header p {
    font-size: var(--text-sm);
  }

  /* Container : marges latérales réduites */
  .container {
    padding: 0 var(--space-4);
  }

  /* Boutons : zone tactile minimum */
  .btn {
    min-height: 40px;
  }

  /* Titres de sections */
  h3 {
    font-size: var(--text-2xl);
  }

  /* AMDEC : grille de cartes moins large */
  #cards-container {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  /* ------------------------------------------
     ACCUEIL — dashboard (paysage)
     ------------------------------------------ */

  /* Hamburger caché sur desktop/paysage */
  .nav-hamburger { display: none; }

  /* Stats : 2 colonnes au lieu de 4 */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Grille principale (kanban + démarches) : pleine largeur empilée */
  .dash-main-grid {
    grid-template-columns: 1fr !important;
  }

  /* Kanban : scroll horizontal avec min-width par colonne */
  .dash-kanban-grid {
    grid-template-columns: repeat(3, minmax(200px, 1fr)) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
  }

  /* Grille bas (activité + accès rapide) : empilée */
  .dash-bottom-grid {
    grid-template-columns: 1fr !important;
  }

  /* Navbar : masquer le nom utilisateur */
  .user-name { display: none; }

  /* Bouton "Nouveau projet" : texte masqué, icône seule */
  .nav-btn-label { display: none; }

}


/* ============================================
   TABLETTE PORTRAIT — max-width: 768px
   iPad standard portrait / Android tablette portrait
   Adaptations profondes pour usage au doigt.
   ============================================ */

@media (max-width: 768px) {

  /* ------------------------------------------
     ACCUEIL — hamburger & navbar
     ------------------------------------------ */

  /* Hamburger visible en portrait */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
  }

  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
  }

  /* Kanban : colonnes fixes pour scroll confortable */
  .dash-kanban-grid {
    grid-template-columns: repeat(3, 240px) !important;
  }

  /* ------------------------------------------
     HEADER OUTIL
     ------------------------------------------ */

  .tool-header {
    padding: var(--space-3) 0;
  }

  /* Titre + boutons : empilés verticalement */
  .tool-header .flex-between,
  .method-header .flex-between,
  .page-header .flex-between {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Boutons (Retour, Base, save-indicator) : alignés à droite */
  .tool-header .flex-between > div:last-child,
  .method-header .flex-between > div:last-child,
  .page-header .flex-between > div:last-child {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .tool-header h1,
  .method-header h1,
  .page-header h1 {
    font-size: var(--text-xl);
  }

  .tool-header p,
  .method-header p,
  .page-header p {
    font-size: var(--text-xs);
    margin-top: var(--space-1);
  }

  /* ------------------------------------------
     TYPOGRAPHIE
     ------------------------------------------ */

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }

  /* ------------------------------------------
     BOUTONS & ZONES TACTILES
     ------------------------------------------ */

  .btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }

  .btn-lg {
    min-height: 48px;
    font-size: var(--text-base);
  }

  .btn-sm {
    min-height: 36px;
  }

  /* Boutons d'action en bas de page : pleine largeur */
  .action-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .action-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* ------------------------------------------
     INPUTS & FORMULAIRES
     Min 16px pour éviter le zoom auto iOS/Android
     ------------------------------------------ */

  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="search"],
  select,
  textarea {
    font-size: var(--text-base) !important;
    min-height: 44px;
  }

  textarea {
    min-height: 80px;
  }

  /* ------------------------------------------
     CARTES GÉNÉRIQUES
     ------------------------------------------ */

  .card {
    padding: var(--space-4);
  }

  /* ------------------------------------------
     GRILLES
     ------------------------------------------ */

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* ------------------------------------------
     FLEX-BETWEEN : titres de section + bouton
     ------------------------------------------ */

  .flex-between {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* ------------------------------------------
     TABLEAUX — scroll horizontal
     ------------------------------------------ */

  table {
    min-width: 560px;
  }

  /* Wrapper scrollable */
  #summary-table-wrapper,
  .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
  }

  /* ------------------------------------------
     LIENS PARENTS (Lié à...)
     ------------------------------------------ */

  .parent-links-header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .parent-link-card {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .parent-link-card-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* ------------------------------------------
     MODAL LIER UN PARENT
     ------------------------------------------ */

  .link-parent-modal-content {
    width: 96vw;
    max-height: 90vh;
  }

  .link-parent-tabs {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .link-parent-tab {
    font-size: var(--text-xs);
    padding: 4px 10px;
    min-height: 36px;
  }

  /* ------------------------------------------
     5P — CINQ POURQUOI
     ------------------------------------------ */

  .pourquoi-number {
    width: 40px;
    height: 40px;
    font-size: var(--text-xl);
    flex-shrink: 0;
  }

  .pourquoi-label {
    font-size: var(--text-base);
  }

  .pourquoi-item {
    padding: var(--space-4);
  }

  .progress-steps {
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ------------------------------------------
     AMDEC
     ------------------------------------------ */

  /* Grille de cartes : 1 colonne */
  #cards-container {
    grid-template-columns: 1fr;
  }

  /* Notation G/O/D : colonnes empilées */
  .rating-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Sliders G/O/D : plus grands au doigt */
  .rating-slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .rating-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border: none;
  }

  /* Grille stats : 2 colonnes au lieu de 5 */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* Badge RPN */
  .rpn-badge {
    min-width: 110px;
  }

  /* ------------------------------------------
     ÉTAPES DMAIC / 8D (modal)
     ------------------------------------------ */

  .dmaic-step-buttons,
  .eightd-step-buttons {
    flex-wrap: wrap;
  }

  .dmaic-step-btn,
  .eightd-step-btn {
    min-height: 44px;
    flex: 1 0 calc(33% - var(--space-2));
    text-align: center;
  }

  /* ------------------------------------------
     LÉGENDE RPN (AMDEC)
     ------------------------------------------ */

  .rpn-legend {
    gap: var(--space-3);
    justify-content: flex-start;
  }

  /* ------------------------------------------
     GRAPHIQUES D3 (Pareto, etc.)
     Scroll horizontal si le SVG déborde
     ------------------------------------------ */

  .chart-container,
  [id$="-chart"],
  [id*="chart-"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ------------------------------------------
     INDEX OUTILS / MÉTHODES (grille de cartes)
     ------------------------------------------ */

  .tools-grid,
  .methods-grid {
    grid-template-columns: 1fr;
  }

  /* ------------------------------------------
     PROJETS — liste & kanban
     ------------------------------------------ */

  /* Grille de projets : 1 colonne */
  .projects-grid {
    grid-template-columns: 1fr;
  }

  /* Onglets de vue (liste / kanban) : wrappables */
  .view-tabs {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Kanban : colonnes scrollables horizontalement */
  .kanban-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .kanban-col {
    min-width: 260px;
  }

}


/* ============================================
   PETITE TABLETTE — max-width: 600px
   Tablettes 8", anciens iPads mini
   ============================================ */

@media (max-width: 600px) {

  /* Boutons du header : texte masqué, icône seule */
  .tool-header .btn .ico,
  .method-header .btn .ico,
  .page-header .btn .ico {
    margin: 0;
  }

  /* Stats accueil : 1 colonne */
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Projets : carte compacte */
  .project-card {
    padding: var(--space-3);
  }

  /* Réduire encore les marges */
  .container {
    padding: 0 var(--space-3);
  }

  /* Grille stats AMDEC : 1 colonne */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* Étapes DMAIC / 8D : 2 par ligne */
  .dmaic-step-btn,
  .eightd-step-btn {
    flex: 1 0 calc(50% - var(--space-2));
  }

}