/* Contact & Formulaires */
.contactGrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}
#contact .contactTitle{
  margin:0 0 18px;
}
#contact .contactGrid > div{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  padding:20px;
}
.contactStack{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:32px;
}
.contactStack > .mt-18{
  margin-top:0;
}
.formRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-weight:800;font-size:.92rem;margin:0 0 6px}
.contactIntro p,
.contactBridge {
  margin:0;
  color:var(--accent2);
  font-size:1.1rem;
  line-height:1.55;
}
.contactIntro p + p{
  margin-top:6px;
}
.contactDownloadCard{
  display:block;
  width:min(100%, 460px);
  margin-inline:auto;
  position:relative;
  padding-right:68px;
  border:var(--warm-btn-border);
  background:var(--accent2);
  background-image:var(--warm-btn-gradient);
  box-shadow:var(--warm-btn-shadow);
  color:#fff;
}
.contactDownloadCard h3{
  margin:0 0 6px;
  color:#fff;
}
.contactDownloadCard p{
  color:rgba(255,255,255,.92);
}
.contactCards .card{
  min-height:110px;
}
.contactInfoCard{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contactIdentity{
  width:min(100%, 460px);
  margin-inline:auto;
  position:relative;
  border:var(--warm-btn-border);
  background:var(--accent2);
  background-image:var(--warm-btn-gradient);
  box-shadow:var(--warm-btn-shadow);
  color:#fff;
}
.contactIdentity img{
  width:88px;
  height:auto;
  margin-bottom:6px;
}
.contactIdentity .small{
  margin:0 0 6px;
  color:rgba(255,255,255,.92);
}
.contactIdentity .small:first-of-type{
  color:#fff;
  font-size:1rem;
}
.contactIdentity .small:last-of-type{
  margin-bottom:6px;
}
.contactIdentity a{
  color:#fff;
}
.contactSocialBlock{
  width:min(100%, 460px);
  margin-inline:auto;
}
.contactSocialBlock .small{
  margin:0 0 8px;
  color:var(--accent2);
}
.contactSocials{
  display:flex;
  align-items:center;
  gap:10px;
}
.contactSocialLink{
  width:42px;
  height:42px;
  border:1px solid var(--accent2);
  border-radius:999px;
  display:grid;
  place-items:center;
  color:var(--accent2);
  background:color-mix(in srgb, var(--accent2) 8%, transparent);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.contactSocialLink svg{
  width:20px;
  height:20px;
  display:block;
}
.contactSocialLink:hover{
  transform:translateY(-1px);
  background:color-mix(in srgb, var(--accent2) 14%, transparent);
  border-color:var(--accent2);
}
.contactSaveBtn{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  padding:0;
  border-radius:12px;
  display:grid;
  place-items:center;
  line-height:1;
}
.contactPdfBtn{
  top:10px;
}
.contactSaveBtn svg{
  width:18px;
  height:18px;
  display:block;
  color:#fff;
}
.btn.primary.contactSaveBtn{
  background:transparent;
  background-image:none;
  color:#fff;
  border-color:rgba(255,255,255,.7);
  box-shadow:none;
}
.btn.primary.contactSaveBtn:hover{
  background:transparent;
  background-image:none;
  box-shadow:none;
}
#devis{
  padding:24px;
  display:grid;
  gap:16px;
}
#devis h3{margin:0;}
#devis .small{margin:0;line-height:1.65;}
#devis .formRow{gap:16px;}
#devis label{margin:0;}
#devis label > span{display:block;margin:0 0 8px;}
input,textarea,select{
  width:100%;padding:12px 12px;border-radius:14px;
  border:1px solid var(--border);
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 85%, var(--bg));
  font:inherit;
  color:var(--ink);
}
textarea{min-height:120px;resize:vertical}
#devis textarea{min-height:150px;}
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent2) 50%),
    linear-gradient(135deg, var(--accent2) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:34px;
}
select:invalid{color:var(--muted);}
select option{color:var(--ink);background:var(--paper);}
select option[disabled]{color:var(--muted);}

@media (max-width: 1040px){
  .contactGrid{grid-template-columns:1fr}
  .contactCards{grid-template-columns:1fr;}
  #devis{padding:20px;gap:14px;}
  input, textarea, select {
    font-size:16px; /* Empêche le zoom automatique sur iOS au clic */
  }
}

@media (max-width: 680px){
  #contact .contactGrid > div{
    padding:16px;
  }
  .contactStack{
    gap:24px;
  }
  .formRow{grid-template-columns:1fr}
}

@media (max-width: 480px){
  #contact .contactGrid > div{
    padding:14px;
  }
  .contactStack{
    gap:20px;
  }
  #devis{padding:16px;}
}

@media (max-height: 900px) and (min-width: 681px){
  #contact.section{
    padding:56px 0;
  }
  #contact .contactTitle{
    margin:0 0 12px;
  }
  .contactGrid{
    gap:14px;
  }
  #contact .contactGrid > div{
    padding:16px;
  }
  .contactStack{
    justify-content:center;
    gap:18px;
  }
  .contactIntro p,
  .contactBridge{
    font-size:1.02rem;
    line-height:1.45;
  }
  #devis{
    padding:18px;
    gap:12px;
  }
  #devis .formRow{
    gap:12px;
  }
  #devis label > span{
    margin:0 0 6px;
  }
  input,textarea,select{
    padding:10px 10px;
  }
  textarea{min-height:96px;}
  #devis textarea{min-height:110px;}
  .contactSaveBtn{
    width:38px;
    height:38px;
    border-radius:10px;
    top:10px;
    right:10px;
  }
  .contactPdfBtn{
    top:9px;
  }
}

@media (max-height: 820px) and (min-width: 681px){
  #contact.section{
    padding:44px 0;
  }
  .contactStack{
    gap:14px;
  }
  #devis textarea{min-height:96px;}
}
