@media screen and (max-width: 768px) {

.mobile {
  display: block;
}

.desktop {
  display: none;
}

  .section {
    flex-direction: column;
    height: auto; /* important pour éviter les bugs de scroll */
    min-height: 100svh;
  }

  .btn {
  margin:1rem; 
  padding: 0.5em;        /* un peu plus grand que précédemment */
  font-size: 2em;
  background-color: #000;    /* noir */
  color: #fff;               /* texte blanc */
  border: none;
  cursor: pointer;
  border-radius: 0;          /* rectangle sans arrondi */
  text-decoration: none;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase; /* Transforme tout en majuscules */
    gap: 20px;
}

.buttons{
    display: flex;
    flex-direction: column;
}

.buttons-vertical {
  padding: 0.2em;
  display: flex;
  flex-direction: column; /* empile verticalement */
  gap: 5px; /* espace entre les boutons */
  align-items: flex-start;
}

  .buttons-vertical a.btn {
  margin:1rem; 
  padding: 0.5em;        /* un peu plus grand que précédemment */
  font-size: 1.4em;
  background-color: #000;    /* noir */
  color: #fff;               /* texte blanc */
  border: none;
  cursor: pointer;
  border-radius: 0;          /* rectangle sans arrondi */
  text-decoration: none;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase; /* Transforme tout en majuscules */

}


#salle .content{
   padding: 30px;
   font-size: 1em;
   width:75vw;
   text-align: justify;
}

#programmation{
     overflow: hidden;
}
#programmation .content{
    height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#asso{
    padding:10px;
}

.row{
  display:flex;
  margin:20px 12px 20px 12px;
  row-gap: 20px;
  flex-direction: column;
}
}