/* giguellerie_horaires 1.4.0 : « M'annoncer ».
   Le bouton sous les horaires, et la fenêtre : en bas de l'écran sur
   téléphone, centrée ailleurs. Couleurs du thème ; seul l'avertissement
   (arrivée hors des heures d'ouverture) emploie le rouge des alertes. */

.horaires-annonce,
.annonce {
  --ann-vert: var(--bootstrap_barrio_giguellerie-vert-prairie, #458210);
  --ann-vert-fonce: var(--bootstrap_barrio_giguellerie-vert-foret, #2e5d0e);
  --ann-titre: var(--bootstrap_barrio_giguellerie-vert-feuillage, #153604);
  --ann-texte: var(--bootstrap_barrio_giguellerie-gris-fonce, #405767);
  --ann-filet: var(--bootstrap_barrio_giguellerie-gris-clair, #b3b8bc);
  --ann-gris: var(--bootstrap_barrio_giguellerie-gris-moyen, #818e96);
  --ann-creme: color-mix(in srgb, var(--bootstrap_barrio_giguellerie-vert-mousse, #8db359) 12%, white);
  --ann-alerte: #b42318;
  --ann-alerte-fond: #fef3f2;
  --ann-alerte-texte: #912018;
  font-family: var(--font-body, 'Barlow', Arial, sans-serif);
}

/* --- Le bouton sous les horaires ------------------------------------------- */

.horaires-annonce {
  margin-top: .85rem;
}

.horaires-annonce__bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: .5rem 1rem;
  border: 0;
  border-radius: .6rem;
  background: var(--ann-vert);
  color: #fff;
  font-family: var(--font-headings, inherit);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.horaires-annonce__bouton:hover,
.horaires-annonce__bouton:focus-visible {
  background: var(--ann-vert-fonce);
  color: #fff;
}

.horaires-annonce__bouton--connexion {
  background: #fff;
  border: 2px solid var(--ann-vert);
  color: var(--ann-vert-fonce);
}

.horaires-annonce__bouton--connexion:hover {
  color: #fff;
}

.horaires-annonce__aide {
  margin: .45rem 0 0;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--ann-texte);
}

/* Panneau « Avant de venir » : le bouton reste à sa largeur naturelle. */
.horaires-carte--panneau .horaires-annonce__bouton {
  display: inline-flex;
  width: auto;
}

/* --- La fenêtre -------------------------------------------------------------- */

.annonce {
  width: 100%;
  max-width: 30rem;
  max-height: 92vh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: #fff;
  color: var(--ann-texte);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.annonce::backdrop {
  background: rgba(21, 54, 4, .55);
}

@media (min-width: 576px) {
  .annonce {
    margin: auto;
    border-radius: 18px;
  }
}

.annonce__corps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.15rem 1.4rem;
}

.annonce__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.annonce__titre {
  margin: 0;
  font-family: var(--font-headings, inherit);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ann-titre);
}

.annonce__fermer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -.5rem;
  border: 0;
  background: transparent;
  color: var(--ann-texte);
  cursor: pointer;
}

.annonce__section {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.annonce__etiquette {
  font-family: var(--font-headings, inherit);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ann-titre);
}

.annonce__ligne {
  display: flex;
  gap: .5rem;
}

.annonce__ligne > .annonce__pastille {
  flex: 1;
}

.annonce__ligne--wrap {
  flex-wrap: wrap;
}

.annonce__ligne--wrap > .annonce__pastille {
  flex: 0 0 auto;
}

.annonce__pastille {
  min-height: 44px;
  padding: 0 .9rem;
  border: 2px solid var(--ann-filet);
  border-radius: 999px;
  background: #fff;
  color: var(--ann-texte);
  font-family: inherit;
  font-size: .95rem;
  cursor: pointer;
}

.annonce__pastille--active {
  border-color: var(--ann-vert);
  background: var(--ann-vert);
  color: #fff;
  font-weight: 600;
}

.annonce__pastille--autre:not(.annonce__pastille--active) {
  border-style: dashed;
  border-color: var(--ann-gris);
}

.annonce__trajet,
.annonce__aide,
.annonce__resume {
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
}

.annonce__resume {
  font-size: 1rem;
  color: var(--ann-titre);
}

.annonce__heure {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.annonce__heure input,
.annonce__select,
.annonce__mot {
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid var(--ann-filet);
  border-radius: .6rem;
  font-family: inherit;
  font-size: 16px; /* 16 px au moins : sinon l'iPhone zoome. */
  color: var(--ann-texte);
  background: #fff;
}

.annonce__mot {
  resize: none;
}

.annonce__attente {
  margin: 0;
  color: var(--ann-gris);
}

.annonce__erreur {
  margin: 0;
  color: var(--ann-alerte-texte);
}

.annonce__arrivee {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .85rem 1rem;
  border-radius: .75rem;
  background: var(--ann-creme);
}

.annonce__arrivee-titre,
.annonce__arrivee-info {
  font-size: .9rem;
}

.annonce__arrivee-heure {
  font-family: var(--font-headings, inherit);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ann-titre);
}

/* L'avertissement : le problème en rouge, la solution en vert pâle. */
.annonce__alerte {
  border: 2px solid var(--ann-alerte);
  border-radius: .75rem;
  overflow: hidden;
}

.annonce__alerte p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.4;
}

.annonce__alerte-probleme {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .75rem 1rem;
  background: var(--ann-alerte-fond);
  color: var(--ann-alerte);
}

.annonce__alerte-probleme svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.annonce__alerte-probleme p {
  color: var(--ann-alerte-texte);
  font-weight: 600;
}

.annonce__alerte-solution {
  padding: .75rem 1rem;
  background: var(--ann-creme);
  color: var(--ann-titre);
}

.annonce__cheval {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 .9rem;
  border: 2px solid var(--ann-filet);
  border-radius: 999px;
  font-size: .95rem;
  cursor: pointer;
}

.annonce__cheval input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ann-vert);
}

.annonce__cheval--coche {
  border-color: var(--ann-vert);
  color: var(--ann-titre);
}

.annonce__actions {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.annonce__envoyer,
.annonce__secondaire {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .5rem 1rem;
  border-radius: .6rem;
  font-family: var(--font-headings, inherit);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.annonce__envoyer {
  border: 0;
  background: var(--ann-vert);
  color: #fff;
}

.annonce__envoyer:hover,
.annonce__envoyer:focus-visible {
  background: var(--ann-vert-fonce);
  color: #fff;
}

.annonce__envoyer[disabled] {
  opacity: .6;
}

.annonce__secondaire {
  border: 2px solid var(--ann-vert);
  background: #fff;
  color: var(--ann-vert-fonce);
}

.annonce__lien {
  align-self: center;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--ann-vert);
  font-family: inherit;
  font-size: .95rem;
  text-decoration: underline;
  cursor: pointer;
}

.annonce__coche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ann-creme);
  color: var(--ann-vert);
}