/* =============================================
   CONTACT — mise en page
   ============================================= */

.contact-section {
  background-color: var(--color-creme);
}

.contact-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3xl);
  align-items: start;
}

@media (min-width: 900px) {
  .contact-grille {
    grid-template-columns: 1fr 1fr;
  }
}

/* =============================================
   FORMULAIRE
   ============================================= */

.contact-formulaire h2 {
  margin-bottom: var(--sp-xl);
}

.champ-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-lg);
}

.champ-groupe label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-texte);
}

.champ-groupe label span {
  color: var(--color-rouge);
}

.champ-groupe input,
.champ-groupe select,
.champ-groupe textarea {
  width: 100%;
  padding: 0.65em 0.9em;
  border: 2px solid var(--color-gris-clair);
  border-radius: var(--border-radius);
  font-size: var(--fs-base);
  color: var(--color-texte);
  background-color: var(--color-blanc);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.champ-groupe input:focus,
.champ-groupe select:focus,
.champ-groupe textarea:focus {
  outline: none;
  border-color: var(--color-bleu);
  box-shadow: 0 0 0 3px rgba(0, 51, 160, 0.12);
}

.champ-groupe input.invalide,
.champ-groupe textarea.invalide {
  border-color: var(--color-rouge);
}

.champ-erreur {
  font-size: var(--fs-xs);
  color: var(--color-rouge);
  min-height: 1em;
}

.champ-obligatoire {
  font-size: var(--fs-xs);
  color: var(--color-gris);
  margin-bottom: var(--sp-lg);
}

.btn-envoyer {
  width: 100%;
  padding-block: 0.85em;
  font-size: var(--fs-md);
}

.form-retour {
  margin-top: var(--sp-lg);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--border-radius);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.form-retour.succes {
  background-color: #e6f4ea;
  border: 1px solid #34a853;
  color: #1a6130;
}

.form-retour.erreur {
  background-color: #fce8e6;
  border: 1px solid var(--color-rouge);
  color: #b00020;
}

/* =============================================
   COORDONNÉES
   ============================================= */

.contact-infos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xl);
}

.contact-infos h2 {
  margin-bottom: var(--sp-lg);
}

.coordonnees-liste {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

.coordonnees-liste li {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-start;
}

.coord-icone {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.coordonnees-liste strong {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: 2px;
}

.coordonnees-liste address,
.coordonnees-liste a {
  font-size: var(--fs-sm);
  font-style: normal;
  line-height: 1.6;
  color: var(--color-texte);
}

.coordonnees-liste a:hover {
  color: var(--color-rouge);
  text-decoration: underline;
}

/* Réseaux sociaux */
.contact-reseaux p {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-sm);
}

.reseaux-liste {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.reseau-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 0.5em 1em;
  border: 2px solid var(--color-bleu);
  border-radius: 99px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-bleu);
  transition: background-color var(--transition), color var(--transition);
}

.reseau-btn:hover {
  background-color: var(--color-bleu);
  color: var(--color-blanc);
}

/* Carte / carte placeholder */
.carte-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-sm);
}

.carte-embed iframe {
  width: 100%;
  height: 260px;
  border: none;
  border-radius: var(--border-radius);
  display: block;
}

.carte-placeholder {
  width: 100%;
  height: 220px;
  background-color: var(--color-gris-clair);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-gris);
  font-size: var(--fs-sm);
  line-height: 1.7;
  border: 2px dashed #ccc;
}

/* =============================================
   SECTION ADHÉSION
   ============================================= */

.adhesion-contact {
  background-color: var(--color-blanc);
  border-top: 3px solid var(--color-gris-clair);
}

.adhesion-tarifs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-lg);
  margin-block: var(--sp-2xl);
}

.carte-tarif {
  background-color: var(--color-bleu-clair);
  border-radius: var(--border-radius-lg);
  padding: var(--sp-xl);
  text-align: center;
  border: 2px solid transparent;
  transition: border-color var(--transition), transform var(--transition);
}

.carte-tarif--vedette {
  background-color: var(--color-bleu);
  color: var(--color-blanc);
  border-color: var(--color-bleu);
  transform: scale(1.04);
  box-shadow: var(--shadow-md);
}

.carte-tarif:hover {
  transform: scale(1.06);
}

.tarif-type {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-sm);
  opacity: 0.85;
}

.tarif-prix {
  font-family: var(--font-titre);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-rouge);
  line-height: 1;
}

.carte-tarif--vedette .tarif-prix {
  color: var(--color-abricot);
}

.tarif-prix span {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  opacity: 0.75;
}

.tarif-note {
  font-size: var(--fs-xs);
  margin-top: var(--sp-sm);
  opacity: 0.8;
}

.adhesion-contact-note {
  font-size: var(--fs-sm);
  color: var(--color-gris);
  max-width: 560px;
  line-height: 1.7;
}