/* Importation de la police Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* Variables de couleurs */
:root {
  --primary: #0d6efd;         /* Bleu vif */
  --primary-hover: #0a58ca;    /* Bleu foncé pour le hover */
  --bg: #ffffff;              /* Fond blanc */
  --accent: #e9f2ff;          /* Fond léger */
  --text: #222222;            /* Texte foncé */
  --transition-speed: 0.3s;
}

/* Style global de la section */
#infos-boutique {
  background-color: var(--bg);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 50px auto;
  padding: 30px;
  font-family: 'Inter', sans-serif;
}

#infos-boutique h2 {
  font-size: 2.5rem;
  color: var(--text);
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

/* Conteneur des informations */
.infos-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Section Horaires */
.horaires {
  flex: 1 1 40%;
}

.horaires h3 {
  font-size: 1.8rem;
  color: var(--text);
  margin-bottom: 10px;
}

.horaires table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.horaires th,
.horaires td {
  padding: 10px;
  border: 1px solid #ddd;
}

.horaires th {
  background-color: var(--primary);
  color: var(--bg);
  text-align: center;
}

.horaires td {
  color: #555;
}

/* Section Carte */
.map {
  flex: 1 1 50%;
  text-align: center;
}

.map h3 {
  font-size: 1.8rem;
  color: var(--text);
  margin-bottom: 10px;
}

.map p {
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 10px;
}

.map iframe {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
  #infos-boutique {
    padding: 20px;
    margin: 20px;
  }

  #infos-boutique h2 {
    font-size: 2rem;
  }

  .infos-container {
    flex-direction: column;
  }

  .horaires, .map {
    flex: 1 1 100%;
  }

  .horaires h3, .map h3 {
    font-size: 1.6rem;
  }

  .map iframe {
    height: 250px;
  }
}

@media (max-width: 480px) {
  #infos-boutique {
    padding: 15px;
    margin: 15px;
  }

  #infos-boutique h2 {
    font-size: 1.8rem;
  }

  .horaires h3, .map h3 {
    font-size: 1.4rem;
  }

  .horaires table th, .horaires table td {
    font-size: 0.9rem;
  }

  .map iframe {
    height: 200px;
  }
}