/* giguellerie_horaires : volet de la pastille d'en-tête.
   La pastille s'ouvre sur place : l'état, la suite de la journée, les
   changements à venir et le lien vers les horaires complets. Couleurs et
   polices du thème uniquement. */

.horaires-volet {
  --hor-ouvert: var(--bootstrap_barrio_giguellerie-vert-herbe);
  --hor-ouvert-fonce: var(--bootstrap_barrio_giguellerie-vert-prairie);
  --hor-ferme: var(--bootstrap_barrio_giguellerie-gris-moyen);
  --hor-texte: var(--bootstrap_barrio_giguellerie-gris-fonce);
  --hor-titre: var(--bootstrap_barrio_giguellerie-vert-feuillage);
  --hor-filet: var(--bootstrap_barrio_giguellerie-gris-clair);
  position: relative;
  display: inline-block;
}

.horaires-volet > summary {
  list-style: none;
  cursor: pointer;
}

.horaires-volet > summary::-webkit-details-marker {
  display: none;
}

.horaires-volet > summary::after {
  content: "▾";
  font-size: .75em;
}

.horaires-volet[open] > summary::after {
  content: "▴";
}

.horaires-volet__panneau {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  z-index: 1050;
  width: min(20rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  border: 1px solid var(--hor-filet);
  border-radius: .5rem;
  background: white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  color: var(--hor-texte);
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}

.horaires-volet .horaires-carte {
  margin: 0;
  padding: 0;
  border: 0;
}

.horaires-volet .horaires-carte__statut {
  font-size: 1.1rem;
}

.horaires-volet .horaires-carte__jour,
.horaires-volet .horaires-carte__note,
.horaires-volet .horaires-carte__hors-saison {
  margin: .3rem 0 0;
  color: var(--hor-texte);
}

.horaires-volet .horaires-carte__changements {
  margin-top: .6rem;
  padding-top: .5rem;
}

.horaires-volet__soustitre {
  margin: 0 0 .2rem;
  font-weight: 600;
  color: var(--hor-titre);
}

.horaires-volet .horaires-volet__lien {
  display: inline-block;
  margin-top: .75rem;
  font-weight: 600;
  color: var(--hor-titre);
  text-decoration: none;
}