/* ============================================================
   contact.css — Page Contact CTT Brunoy v2
   Charger APRÈS global.css, nav.css, footer.css
   ============================================================ */

/* ============================================================
   0. FOND DE PAGE (identique aux autres pages : creneaux, reglement,
      boutique). Si le nom de fichier diffère chez toi, remplace
      juste le chemin ci-dessous — c'est la seule ligne à changer.
   ============================================================ */
.page-wrapper.page-contact {
  background-image  : url('../Image/Fond/Contact.png');
  background-repeat  : no-repeat;
  background-size    : cover;
  background-position: top center;
}

/* ============================================================
   1. INTRO (identique à creneaux.css / reglement.css / boutique.css)
   ============================================================ */
.contact-intro {
  max-width : 76%;
  margin    : 0 auto;
  padding   : var(--espace-xl) var(--espace-sm) var(--espace-lg);
  text-align: center;
}

/* .contact-titre et .contact-titre::after : voir global.css §10 (composants partagés) */

/* ============================================================
   2. LAYOUT GÉNÉRAL — cartes + carte Google Maps
   ============================================================ */
.contact-general {
  display       : grid;
  grid-template-columns: 1fr;
  gap           : var(--espace-md);
  padding-bottom: var(--espace-xl);
}

.contact-cartes {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap                  : var(--espace-sm);
}

/* ============================================================
   3. CARTES D'INFO
   ============================================================ */
.contact-carte-info {
  background   : var(--blanc);
  border       : 1px solid var(--gris-bordure);
  border-radius: var(--rayon-md);
  box-shadow   : var(--ombre-carte);
  padding      : var(--espace-md) var(--espace-sm);
  display      : flex;
  flex-direction: column;
  align-items  : center;
  text-align   : center;
  gap          : 4px;
  transition   : transform var(--transition), box-shadow var(--transition);
}

.contact-carte-info:hover {
  transform : translateY(-3px);
  box-shadow: 0 10px 22px rgba(3, 44, 100, 0.14);
}

/* Halo bleu derrière l'icône : identité graphique du site même si
   l'icône elle-même est absente/cassée */
.contact-icone-halo {
  width          : 64px;
  height         : 64px;
  border-radius  : 50%;
  background     : linear-gradient(160deg, var(--bleu-nav-clair), var(--bleu-nav-fonce));
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-bottom  : var(--espace-xs);
}

.contact-icone {
  width : 32px;
  height: 32px;
  filter: brightness(0) invert(1); /* icônes blanches sur le halo bleu */
}

.contact-carte-titre {
  font-family   : var(--font-sous-titre);
  font-weight   : 700;
  color         : var(--bleu-titre);
  font-size     : var(--taille-petit);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom : 4px;
}

.contact-carte-info p {
  font-family: var(--font-texte);
  color      : var(--noir-texte);
  margin     : 2px 0;
  font-size  : var(--taille-petit);
}

.contact-carte-info a {
  color          : var(--bleu-bouton);
  text-decoration: underline;
}

.contact-carte-info a:hover {
  color: var(--bleu-bouton-hover);
}

.contact-reseaux-liste {
  display        : flex;
  gap            : var(--espace-sm);
  justify-content: center;
  flex-wrap      : wrap;
  margin-top     : var(--espace-xs);
}

.contact-mini-logo {
  width        : 36px;
  height       : 36px;
  border-radius: 50%;
  transition   : transform var(--transition);
}

.contact-mini-logo:hover {
  transform: scale(1.1);
}

/* ============================================================
   4. CARTE GOOGLE MAPS — remplit toute sa colonne, en grand
   ============================================================ */
.contact-carte-plan {
  border-radius: var(--rayon-md);
  overflow     : hidden;
  box-shadow   : var(--ombre-carte);
  height       : 100%;
  min-height   : 420px;
}

.contact-carte-plan iframe {
  width  : 100%;
  height : 100%;
  border : 0;
  display: block;
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */
@media (max-width: 949px) {
  .contact-titre { font-size: 8vw; }

  .contact-carte-plan { min-height: 350px; }
}

@media (min-width: 950px) {
  .contact-general {
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
  }

  .contact-cartes {
    grid-template-columns: repeat(2, 1fr);
  }
}