.page-orga .container {
  width: 100%;
  padding: 0 var(--padding-lateral);
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.page-orga .container .images-grid-container {
  width: 100%;
  max-width: var(--page-max-width);
  padding: 0 24px;
}

.page-orga .container .infos {
  width: 100%;
  max-width: var(--page-max-width);
  padding: 0 36px;
}

/************************************** Images ****************************************/

/* --- VOTRE CSS EXISTANT --- */
.page-orga .container .images-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.page-orga .container .images-grid .image-container {
  aspect-ratio: 1 / 1;
  background-color: rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
}

.page-orga .container .images-grid .image-container:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.page-orga .container .images-grid .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- CONFIGURATION ARTISTE (3 IMAGES EN RATIO 7/5) --- */

.page-orga .container .images-grid.is-artist {
  /* 2/3 (66%) à gauche, 1/3 (33%) à droite */
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.page-orga .container .images-grid.is-artist .image-container {
  /* TOUTES les images (gauche et droite) ont exactement le ratio 7/5 */
  aspect-ratio: 7 / 5;
}

.page-orga .container .images-grid.is-artist .image-container:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;

  aspect-ratio: auto; /* On annule le ratio strict pour l'image de gauche */
  height: 100%; /* On la force à s'étirer jusqu'en bas pour toucher l'arrondi */
}

.page-orga .container .images-grid.is-artist .image-container:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.page-orga .container .images-grid.is-artist .image-container:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

/************************************** Infos ****************************************/

.page-orga .container .infos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  width: 100%;
}

.page-orga .container .infos .divider {
  display: none;
}

.page-orga .container .infos .infos-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

.page-orga .container .infos .infos-group h2 {
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -3%;
  color: #000000;
}

.page-orga .container .infos .infos-group p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -1%;
  word-spacing: 1%;
  color: #00000080;
}

.page-orga .container .infos .infos-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  gap: 40px;
}

.page-orga .container .infos .infos-row .infos-group {
  gap: 16px;
}

.page-orga .container .infos .infos-row .infos-group.horaires .horaires-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 300px;
  background-color: #f1f3f4;
  border-radius: 12px;
  padding: 20px 24px;
  align-self: center;
}

.page-orga
  .container
  .infos
  .infos-row
  .infos-group.horaires
  .horaires-group
  .horaire {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -1%;
  color: #00000080;
}

.page-orga
  .container
  .infos
  .infos-row
  .infos-group.horaires
  .horaires-group
  .horaire.active
  .jour,
.page-orga
  .container
  .infos
  .infos-row
  .infos-group.horaires
  .horaires-group
  .horaire.active
  .heures {
  color: #000000;
  font-weight: 500;
}

.page-orga
  .container
  .infos
  .infos-row
  .infos-group.horaires
  .horaires-group
  .horaire
  .jour {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -2%;
}

.page-orga
  .container
  .infos
  .infos-row
  .infos-group.horaires
  .horaires-group
  .horaire
  .heures {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: -1%;
}

.page-orga
  .container
  .infos
  .infos-row
  .infos-group.horaires
  .horaires-group
  .horaire
  .heures
  .creneau {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}

.page-orga
  .container
  .infos
  .infos-row
  .infos-group.equipements
  .equipements-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
}

.page-orga
  .container
  .infos
  .infos-row
  .infos-group.equipements
  .equipements-group
  .equipement {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.page-orga
  .container
  .infos
  .infos-row
  .infos-group.equipements
  .equipements-group
  .equipement
  .icon-container {
  width: 20px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-orga
  .container
  .infos
  .infos-row
  .infos-group.equipements
  .equipements-group
  .equipement
  .icon-container
  svg {
  width: 100%;
  height: 100%;
}

.page-orga
  .container
  .infos
  .infos-row
  .infos-group.equipements
  .equipements-group
  .equipement
  .icon-container
  svg
  path {
  fill: #00000080;
}

.page-orga
  .container
  .infos
  .infos-row
  .infos-group.equipements
  .equipements-group
  .equipement
  .text {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -1%;
  color: #00000080;
}

.page-orga
  .container
  .infos
  .infos-row
  .infos-group.equipements
  .equipements-group
  .equipement
  .text::first-letter {
  text-transform: uppercase;
}

.page-orga .container .infos .infos-group.lieu .adresse {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
}

/************************************** MAP ****************************************/
#map {
  margin-top: 9px;
  height: 300px;
  width: 100%;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.051);
}

#map .leaflet-control-attribution {
  font-size: 8px;
}

#map .leaflet-marker-icon .leaflet-zoom-animated .leaflet-interactive {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/************************************** Liens ****************************************/

.page-orga .container .infos .infos-group.links .links-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.page-orga .container .infos .infos-group.links .links-container .link {
  width: 44px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0000000d;
  border-radius: 50%;
}

.page-orga .container .infos .infos-group.links .links-container .link image {
  width: 20px;
  height: 20px;
}

/************************************** Media queries ****************************************/

@media (max-width: 740px) {
  .page-orga .container .images-grid-container,
  .page-orga .container .infos {
    padding: 0;
  }
}

@media (max-width: 600px) {
  .page-orga .container .images-grid {
    gap: 4px;
  }

  .page-orga .container .infos .divider {
    display: block;
    width: 100%;
    height: 1px;
    background: rgb(0, 0, 0, 0.1);
    border-radius: 20px;
    border: none;
  }

  .page-orga .container .infos,
  .page-orga .container .infos .infos-row {
    gap: 32px;
  }

  .page-orga .container .infos .infos-row {
    flex-direction: column;
  }

  .page-orga .container {
    padding: 16px;
    gap: 36px;
  }

  .page-orga .container .infos {
    padding: 8px;
  }
}