/* ============================================
   DAGDA TEMPLATE - Utilities
   Classes utilitaires + Responsive
   ============================================ */

@layer utilities {
  /* ========== EFFECTS ========== */
  
  /* Effet brillance réutilisable (Shimmer) */
  .hover-shimmer {
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, var(--prim-glow), transparent);
      transition: left var(--transition-slow);
      pointer-events: none;
      z-index: 1;
    }
    
    &:hover::before {
      left: 100%;
    }
  }

  /* Fluid container */
  .fluid {
    width: 100%;
  }
  
  /* Section spacing */
  .section-spacing {
    margin-bottom: 3rem;
  }
  
  /* ========== RESPONSIVE ========== */
  
  /* Large tablets */
  @media (max-width: 1400px) {
    aside {
      width: 300px;
    }
  }
  
  /* Tablettes - Masquage aside gauche */
  @media (max-width: 1200px) {
    .aside-left {
      width: 0;
      padding: 0;
      overflow: hidden;
    }
    
    .aside-right {
      width: 280px;
    }
  }
  
  /* Petites tablettes */
  @media (max-width: 992px) {
    .aside-right {
      width: 250px;
    }
    
    main {
      padding: var(--space-lg) var(--space-md);
    }
    
    .grid-articles {
      grid-template-columns: 1fr;
    }
  }
  
  /* Masquage aside droit + Affichage bouton menu */
  @media (max-width: 768px) {
    .aside-right {
      width: 0;
      padding: 0;
      overflow: hidden;
    }
    
    .card-horizontal {
      flex-direction: column;
      
      .card-img {
        width: 100%;
        height: 150px;
      }
    }
  }
  
  /* Mobiles */
  @media (max-width: 650px) {
    header, footer {
      padding: var(--space-sm);
    }
    
    .hd-bx, .ft-bx {
      padding: var(--space-sm) var(--space-md);
    }
    
    main {
      padding: var(--space-md) var(--space-sm);
    }
    
    .btn {
      width: 100%;
    }
  }
}