/* =====================================================
   BIEN DANS MES PATTES · Styles propres à l'accueil
   =====================================================
   Uniquement ce qui ne sert qu'ici. Tout ce qui est
   réutilisable vit dans css/styles.css.
   ===================================================== */

/* Pilule de statut quand les inscriptions sont fermées */
.pill--closed { color: var(--bdmp-error-text); border-color: var(--bdmp-error-border); }

/* Listes d'informations à puce discrète */
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.info-list li {
  display: flex;
  gap: 12px;
  color: var(--bdmp-ink-soft);
  line-height: var(--bdmp-leading);
}
.info-list li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bdmp-orange);
}

/* Section « À propos » */
/* Le titre de cette section a sa propre échelle dans le design. */
.about-title {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.04;
  margin: 0 0 22px;
}

.about-text {
  font-size: 1.1rem;
  color: var(--bdmp-ink-soft);
  line-height: 1.8;
  margin: 0 0 18px;
}
.about-text--last { margin-bottom: 30px; }

/* Ce que finance la course : tuiles à icône, pas des pilules. */
.mission-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
  margin-bottom: 34px;
}

.mission-tile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bdmp-cream-alt);
  color: var(--bdmp-ink);
  font-size: .92rem;
  font-weight: 700;
}
.mission-tile svg { flex-shrink: 0; color: var(--bdmp-orange); }

/* Trois valeurs, en cartes courtes côte à côte. */
.values { display: flex; flex-wrap: wrap; gap: 14px; }

.value-card {
  flex: 1;
  min-width: 130px;
  padding: 18px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--bdmp-border);
  border-radius: 18px;
}
.value-card strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--bdmp-font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: var(--bdmp-tracking-display);
  color: var(--bdmp-orange);
}
.value-card span { font-size: .82rem; color: var(--bdmp-ink-muted); }

/* Carte au logo, avec son étiquette flottante orange. */
.about-card {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 52px;
  background: linear-gradient(150deg, #FFE9D6, var(--bdmp-cream-alt));
  border: 1px solid var(--bdmp-badge-border);
  border-radius: 32px;
  box-shadow: 0 44px 90px -44px rgba(36, 26, 18, .4);
}
.about-card img { max-width: 360px; width: 100%; height: auto; }

.about-card__caption {
  position: absolute;
  bottom: -24px; left: 50%;
  transform: translateX(-50%);
  padding: 15px 26px;
  border-radius: 16px;
  background: var(--bdmp-orange);
  box-shadow: 0 24px 48px -22px rgba(232, 114, 44, .9);
  color: #fff;
  font-size: .98rem;
  font-weight: 700;
  white-space: nowrap;
}

/* L'étiquette dépasse de la carte : on lui laisse la place. */

/* Cartes du comité */
.comite-card {
  display: grid;
  gap: 0;
  justify-items: center;
  text-align: center;
  padding: 36px 28px;
  border-radius: var(--bdmp-r-card-lg);
  text-decoration: none;
  color: inherit;
}
a.comite-card { cursor: pointer; }

.comite-card__avatar {
  width: 100px; height: 100px;
  margin: 0 auto 20px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  box-shadow: var(--bdmp-shadow-btn-lg);
}

.comite-card h3 { font-size: 1.4rem; margin: 0 0 8px; }
.comite-card .badge { margin-bottom: 14px; padding: 5px 15px; font-size: .82rem; }

.comite-card__bio {
  margin: 0 0 14px;
  font-size: .94rem;
  line-height: 1.7;
  color: var(--bdmp-ink-muted);
}

.comite-card__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  color: var(--bdmp-orange-dark);
  font-size: .88rem;
  font-weight: 700;
  transition: gap var(--bdmp-t-fast) ease;
}
.comite-card:hover .comite-card__more { gap: 9px; }
.comite-card__avatar--initial {
  background: linear-gradient(140deg, var(--bdmp-orange-light), var(--bdmp-orange-dark));
  color: #fff;
  font-family: var(--bdmp-font-display);
  font-size: 2.1rem;
  font-weight: 800;
}

/* Encadré conseil */
.tip-box {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--bdmp-cream-alt);
  border: 1px solid var(--bdmp-badge-border);
  border-radius: 14px;
}
/* Le mot « Conseil » reste dans le fil de la phrase. */
.tip-box strong { color: var(--bdmp-ink); font-weight: 700; }
.tip-box p { margin: 0; font-size: .9rem; color: var(--bdmp-ink-soft); line-height: 1.6; }

/* -----------------------------------------------------
   Contact
   ----------------------------------------------------- */

.section-head--contact { margin-bottom: 50px; }

.contact-col { display: flex; flex-direction: column; gap: 18px; }

/* Une carte par moyen de contact, avec sa vignette. */
.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--bdmp-border);
  border-radius: 20px;
  box-shadow: var(--bdmp-shadow-card-soft);
  text-decoration: none;
  color: inherit;
  transition: transform var(--bdmp-t-fast) ease, box-shadow var(--bdmp-t-fast) ease;
}
.contact-card:hover {
  transform: translateY(var(--bdmp-lift-btn));
  box-shadow: var(--bdmp-shadow-card);
}

.contact-card__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  flex-shrink: 0;
  border-radius: 15px;
  background: var(--bdmp-badge-bg);
  color: var(--bdmp-orange);
}
.contact-card strong { display: block; margin-bottom: 2px; font-weight: 700; color: var(--bdmp-ink); }
.contact-card em {
  font-style: normal;
  color: var(--bdmp-orange-dark);
  font-weight: 600;
  font-size: .98rem;
}
.contact-card__mail { font-size: .95rem; word-break: break-all; }

/* -----------------------------------------------------
   Don
   ----------------------------------------------------- */

.donate-card {
  padding: 30px;
  text-align: center;
  background: linear-gradient(150deg, var(--bdmp-cream-alt), #FFE9D6);
  border: 1px solid var(--bdmp-badge-border);
  border-radius: var(--bdmp-r-card);
  box-shadow: 0 22px 50px -36px rgba(36, 26, 18, .4);
}

.donate-card__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 26px -16px rgba(36, 26, 18, .4);
  color: var(--bdmp-orange);
}

.donate-card h3 { font-size: 1.25rem; margin: 0 0 8px; }
.donate-card p  { margin: 0 0 18px; color: var(--bdmp-ink-muted); font-size: .94rem; }

.donate-chips { display: flex; gap: 9px; }
.donate-chips .btn {
  flex: 1;
  padding: 13px 0;
  border-radius: 13px;
  font-weight: 800;
}
.donate-chips .btn.is-active {
  background: var(--bdmp-orange);
  border-color: var(--bdmp-orange);
  color: #fff;
}

.donate-card__check {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  margin: 0 auto 14px;
  border-radius: var(--bdmp-r-pill);
  background: var(--bdmp-badge-bg);
  color: var(--bdmp-orange);
}
.donate-card__thanks { margin: 0 0 4px; font-weight: 800; color: var(--bdmp-ink); }
.donate-card__hint   { margin: 0; color: var(--bdmp-ink-muted); font-size: .9rem; }

/* -----------------------------------------------------
   Formulaire de contact
   ----------------------------------------------------- */

.contact-form-card {
  height: 100%;
  padding: 34px;
  border-radius: var(--bdmp-r-card);
}
.contact-form-card h3 { font-size: 1.4rem; margin: 0 0 22px; }

/* Deux colonnes fixes : un auto-fit se replierait sur une seule
   colonne dans cette largeur. */
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

/* Les libellés du formulaire de contact restent en casse normale. */
.contact-form-card .field label {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--bdmp-ink);
}

.contact-done {
  min-height: 360px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.contact-done__icon {
  width: 70px; height: 70px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  border-radius: var(--bdmp-r-pill);
  background: var(--bdmp-badge-bg);
  color: var(--bdmp-orange);
}
.contact-done h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 10px; }
.contact-done p  { margin: 0; max-width: 280px; color: var(--bdmp-ink-muted); }

/* -----------------------------------------------------
   Infos pratiques
   ----------------------------------------------------- */

.info-block { border-radius: var(--bdmp-r-card-lg); padding: 34px; }

.info-block h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  margin: 0 0 20px;
}
.info-block h3 svg { flex-shrink: 0; color: var(--bdmp-orange); }

/* Horaires : une tuile crème par départ. */
.time-list { display: grid; gap: 10px; margin-bottom: 24px; }

.time-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 13px;
  background: var(--bdmp-cream-alt);
}
.time-row__hour {
  min-width: 52px;
  font-family: var(--bdmp-font-display);
  font-weight: 800;
  color: var(--bdmp-orange);
}
.time-row__label { color: var(--bdmp-ink-soft); font-size: .95rem; }

/* Lieu, dossards, parking. */
.fact-list {
  display: grid;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--bdmp-border);
}

.fact-row { display: flex; gap: 12px; }
.fact-row svg { flex-shrink: 0; margin-top: 2px; color: var(--bdmp-orange); }
.fact-row span { color: var(--bdmp-ink-muted); font-size: .94rem; line-height: 1.6; }
.fact-row strong { display: block; color: var(--bdmp-ink); font-weight: 700; }

/* Équipement : une puce ronde cochée par ligne. */
.check-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }

.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--bdmp-ink-soft);
}
.check-list li::before {
  content: "";
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: var(--bdmp-r-pill);
  background: var(--bdmp-badge-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23E8722C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}

/* Carte du plan du parcours. */
.map-card {
  border-radius: var(--bdmp-r-card-lg);
  padding: clamp(22px, 3.5vw, 34px);
  margin-bottom: 48px;
}
.map-card h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.35rem;
  margin: 0 0 8px;
}
.map-card h3 svg { flex-shrink: 0; color: var(--bdmp-orange); }
.map-card__lead { margin: 0 0 20px; color: var(--bdmp-ink-muted); font-size: .94rem; }

/* Règlement : bloc étroit et centré. */
.reglement-wrap { max-width: 820px; margin: 0 auto; }
.reglement-title { font-size: 1.8rem; text-align: center; margin: 0 0 28px; }
.reglement-cta { text-align: center; margin-top: 26px; }

/* =====================================================
   Responsive
   =====================================================
   Regroupées en fin de feuille : une surcharge posée
   avant la règle qu'elle vise n'a aucun effet.
   ===================================================== */

@media (max-width: 560px) {
  .about-card__caption { white-space: normal; text-align: center; width: max-content; max-width: 90%; }
}

@media (max-width: 480px) {
  .contact-form__row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .about-card { padding: 36px 22px; }
  .donate-chips { flex-wrap: wrap; }
}