/* ================================
   RESPONSIVE CSS
   ================================
   Convention des 4 formats du socle :
   1. MOBILE              → jusqu'à 599px
   2. TABLETTE / PETIT PC → 600px à 991px
   3. DESKTOP STANDARD    → 992px à 1439px (styles de base, pas de media query)
   4. GRAND ÉCRAN         → à partir de 1440px
   ================================ */

/* =============================
   1. MOBILE – jusqu'à 599px
   ============================= */
@media (max-width: 599px) {
  .space-item {
    left: var(--mx, var(--x));
    top: var(--my, var(--y));
  }

  .corner-tr { top: var(--space-md); right: var(--space-md); }
  .corner-bl { bottom: var(--space-md); left: var(--space-md); }
  .corner-br { bottom: var(--space-md); right: var(--space-md); }

  .reveal {
    padding: var(--space-2xl) var(--space-lg);
  }

  .reveal-close {
    top: var(--space-md);
    right: var(--space-md);
  }

  .index-row {
    grid-template-columns: 2.5rem 1fr;
  }

  .index-tags {
    grid-column: 2;
  }
}

/* =============================
   2. TABLETTE / PETIT PC – 600px à 991px
   ============================= */

/* =============================
   3. DESKTOP STANDARD – 992px à 1439px
   Styles de base : aucun media query.
   ============================= */

/* =============================
   4. GRAND ÉCRAN – à partir de 1440px
   ============================= */
@media (min-width: 1440px) {
  .label {
    font-size: var(--text-sm);
  }
}