/* ---------- Tour page ---------- */

/* Typographie */
body {
  font-family: "Arial Rounded Bold", Arial, sans-serif;
}

/* Main */
main {
  padding: 120px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 100px;
}

/* Year blocks */
.year-block {
  width: 100%;
  max-width: 900px;
  margin-bottom: 40px;
}

/* Année */
.year {
  font-size: 28px;
  text-align: center;
  margin-bottom: 20px;
}

/* Liste d'événements */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Ligne événement */
.event {
  display: grid;
  grid-template-columns: 50px 160px 230px 220px;
  column-gap: 20px;
  align-items: baseline;
}

.event .date {
  text-align: right;
  white-space: nowrap;
}

.event .city {
  text-align: left;
}

.event .venue {
  text-align: right; /* desktop align left */
}

.event .project {
  text-align: left;
  font-style:; /* optionnel */
}









/* .event .date {
  width: 130px;
  text-align: left;
}

.event .project {
  width: 330px;
  text-align: left;
}

.event .location {
  flex: 1;
  text-align: left;
}*/

/* Événements de tournée */
.event.tour-event {
  background-color: #5386E4; /* couleur du rectangle */
  color: #fff;               /* texte blanc */
  padding: 0px 0px;         /* espace à l’intérieur du rectangle */
  border-radius: 8px;        /* bords arrondis */
}


/* Conteneur de tournée */
.tour-container {
  background-color: #71BDFA; /* couleur bleue */
  color;               /* texte blanc */
  border-radius: 8px;       /* bords arrondis */
  padding: 0px;             /* espace autour */
  margin-bottom: 20px;       /* espacement avec autres événements */
}

/* Si tu veux que chaque ligne reste alignée comme avant */
.tour-container .event {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 6px; /* espace entre les lignes de tournée */
}

.tour-container .event:last-child {
  margin-bottom: 0;
}



/* Responsive */
/*@media (max-width: 800px) {
  .event {
    flex-direction: column;
    gap: 4px;
  }
  .event .date,
  .event .project,
  .event .location {
    width: 100%;
  }
}*/


/* @media (max-width: 800px) {
  .event {
    grid-template-columns: 1fr;
  }

  .event > div {
    text-align: left;
    justify-self: start;
  }

  .event .city,
  .event .venue {
    display: inline;
  }

  .event .city::after {
    content: " — ";
  }

  .event .venue::after {
    content: "";
  }

    .event .project {
    display: block;
    margin-top: 2px;
  }
}*/
@media (max-width: 800px) {
  .event {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .event > div {
    text-align: left;
    justify-self: start;
  }

  /* ville + lieu sur la même ligne */
  .event .city,
  .event .venue {
    display: inline-block;
  }

  .event .city::after {
    content: "";
  }

  .event .venue::after {
    content: "";
  }

  .event .project {
    display: block;
    margin-bottom: 25px;
  }
}