/* ============================================
   DAGDA TEMPLATE - Display Utilities
   Classes utilitaires flex, grid, alignement
   ============================================ */

@layer utilities {
  /* ========== DISPLAY ========== */
  .d-block { display: block; }
  .d-inline { display: inline; }
  .d-inline-block { display: inline-block; }
  .d-flex { display: flex; }
  .d-inline-flex { display: inline-flex; }
  .d-grid { display: grid; }
  .d-none { display: none; }
  
  /* ========== FLEX DIRECTION ========== */
  .flex-row { flex-direction: row; }
  .flex-col { flex-direction: column; }
  .flex-row-reverse { flex-direction: row-reverse; }
  .flex-col-reverse { flex-direction: column-reverse; }
  
  /* ========== FLEX WRAP ========== */
  .flex-wrap { flex-wrap: wrap; }
  .flex-nowrap { flex-wrap: nowrap; }
  
  /* ========== ALIGN ITEMS ========== */
  .items-start { align-items: flex-start; }
  .items-center { align-items: center; }
  .items-end { align-items: flex-end; }
  .items-stretch { align-items: stretch; }
  .items-baseline { align-items: baseline; }
  
  /* ========== JUSTIFY CONTENT ========== */
  .justify-start { justify-content: flex-start; }
  .justify-center { justify-content: center; }
  .justify-end { justify-content: flex-end; }
  .justify-between { justify-content: space-between; }
  .justify-around { justify-content: space-around; }
  .justify-evenly { justify-content: space-evenly; }
  
  /* ========== FLEX GROW/SHRINK ========== */
  .flex-1 { flex: 1; }
  .flex-auto { flex: auto; }
  .flex-none { flex: none; }
  .flex-grow { flex-grow: 1; }
  .flex-shrink-0 { flex-shrink: 0; }
  
  /* ========== TEXT ALIGN ========== */
  .text-left { text-align: left; }
  .text-center { text-align: center; }
  .text-right { text-align: right; }
  .text-justify { text-align: justify; }
  
  /* ========== GRID COLUMNS ========== */
  .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  
  /* ========== RESPONSIVE GRID (Media Queries) ========== */
  @media (min-width: 768px) {
    .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  }
  
  @media (min-width: 1024px) {
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  }
  
  /* ========== WIDTH ========== */
  .w-full { width: 100%; }
  .w-auto { width: auto; }
  
  /* ========== HEIGHT ========== */
  .h-full { height: 100%; }
  .h-auto { height: auto; }
  
  /* ========== CONTAINERS ========== */
  /* Conteneur centré pleine hauteur */
  .center-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-lg);
    background: var(--bg-primary);
  }
  
  /* Conteneur de contenu avec largeur max */
  .content-container {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  .content-container--spaced {
    max-width: 768px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
  }
}