/* Par défaut (sur mobile), on cache l'élément */
.desktop-only {
  display: none;
}

/* Si l'écran fait au moins 768px de large (Tablette et Desktop) */
@media (min-width: 980px) {
  .desktop-only {
    /* On réaffiche l'élément. 
       ATTENTION : mettez 'block', 'flex', 'grid' ou 'inline' 
       selon le type d'élément original. 'block' est le plus courant. */
    display: block; 
  }
}


/* --- CAS 2 : Élément visible UNIQUEMENT SUR MOBILE --- */

/* Par défaut (sur mobile), on affiche l'élément */
.mobile-only {
  display: block; /* ou flex, grid, etc. */
}

/* Si l'écran fait au moins 768px de large (Tablette et Desktop) */
@media (min-width: 980px) {
  .mobile-only {
    /* On cache l'élément sur les grands écrans */
    display: none;
  }
}