/* Styles propres à contacto.html. Réutilise .category-intro de
   category.css pour le bandeau d'intro (même pattern que trekking.html /
   climbing.html / day-trip.html). Header, footer et tokens partagés dans
   base.css. */

/* ===== GRILLE PRINCIPALE : formulaire + infos/carte ===== */
.contact-grid{
  display:grid; grid-template-columns:1fr 0.92fr; gap:56px;
  padding:90px 0;
}

/* ===== CARTE FORMULAIRE ===== */
.contact-form-card{
  background:var(--stone-light); border:1px solid var(--line);
  padding:44px 40px;
}
.contact-form-card h2{
  font-family:'Big Shoulders Display', sans-serif; font-weight:900;
  text-transform:uppercase; font-size:clamp(26px, 2.6vw, 34px);
  color:var(--ink); margin-bottom:10px; line-height:1.05;
}
.contact-form-card > p{ font-size:14.5px; color:#4B564F; margin-bottom:32px; max-width:440px; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.form-row .form-field{ margin-bottom:0; }
.form-field label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--eco-deep);
}
.form-field input, .form-field select, .form-field textarea{
  font-family:'Work Sans', sans-serif; font-size:14.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); padding:13px 14px;
  border-radius:2px; transition:border-color .15s ease;
}
.form-field textarea{ resize:vertical; min-height:120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--glacier); background:#fff;
}
.form-field select{ appearance:none; cursor:pointer; }
.contact-form-card .btn{ width:100%; justify-content:center; margin-top:6px; }
.form-note{ font-size:12px; color:#7A8078; margin-top:14px; }

/* ===== COLONNE INFOS + CARTE ===== */
.contact-info-col{ display:flex; flex-direction:column; gap:28px; }
.contact-info-card{
  background:var(--stone-light); border:1px solid var(--line); padding:32px 34px;
}
.contact-info-card h3{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:#7A8078; margin-bottom:22px;
}
.contact-info-list{ display:flex; flex-direction:column; gap:20px; }
.contact-info-item{ display:flex; gap:14px; align-items:flex-start; }
.contact-info-item .icon-dot{
  width:8px; height:8px; border-radius:50%; background:var(--eco);
  margin-top:7px; flex-shrink:0;
}
.contact-info-item div .lbl{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:#7A8078; margin-bottom:3px;
}
.contact-info-item div .val{ font-size:15px; color:var(--ink); }
.contact-info-item div .val a:hover{ color:var(--eco-deep); }
.contact-direct-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

/* ===== CARTE GOOGLE MAPS ===== */
.contact-map-card{
  background:var(--stone-light); border:1px solid var(--line);
  overflow:hidden; flex:1; display:flex; flex-direction:column;
}
.contact-map-frame{ position:relative; width:100%; aspect-ratio:4/3; background:var(--stone); }
.contact-map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(0.15) contrast(1.05); }
.contact-map-footer{
  padding:18px 22px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; border-top:1px solid var(--line);
}
.contact-map-footer span{ font-size:13.5px; color:#4B564F; }
.contact-map-footer a{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--eco-deep); border-bottom:1px solid var(--eco-deep);
  padding-bottom:2px; white-space:nowrap;
}
.contact-map-footer a:hover{ color:var(--eco); border-color:var(--eco); }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; padding:60px 0; gap:40px; }
  .form-row{ grid-template-columns:1fr; gap:0; }
  .contact-form-card, .contact-info-card{ padding:32px 26px; }
}