/* ==================================================================
   CIVIS-CI — Styles spécifiques à la page « Contact »
   ================================================================== */

.contact-section{background:var(--paper)}
.contact-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap:56px; align-items:start; }

/* Coordonnées */
.contact-info{ position:sticky; top:120px; }
.contact-info .num{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--ink-3); letter-spacing:.12em; display:block; margin-bottom:14px; }
.contact-info h2{ font-size:clamp(28px,3vw,40px); margin-bottom:28px; }
.ci-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; }
.ci-list li{ display:flex; flex-direction:column; gap:5px; padding-bottom:22px; border-bottom:1px solid var(--rule); }
.ci-list li:last-child{border-bottom:0}
.ci-k{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); }
.ci-v{ font-size:15.5px; color:var(--ink); line-height:1.5; }
.ci-v a:hover{color:var(--orange)}

/* Formulaire */
.contact-form-wrap{ background:#fff; border:1px solid var(--rule); border-radius:24px; padding:44px 40px; }
.contact-form{ display:flex; flex-direction:column; gap:20px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.01em; }
.field label .req{ color:var(--orange); }
.field input, .field textarea{
  font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--rule); border-radius:12px;
  padding:13px 16px; outline:none; transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field textarea:focus{ border-color:var(--orange); box-shadow:0 0 0 3px rgba(224,101,30,.12); }
.field textarea{ resize:vertical; min-height:140px; }
.contact-form .btn{ align-self:flex-start; }

/* pot de miel : champ caché aux humains */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Alertes (flash) */
.form-alert{ border-radius:12px; padding:14px 18px; font-size:14.5px; line-height:1.5; margin-bottom:24px; border:1px solid transparent; }
.form-alert--success{ background:var(--green-soft); color:var(--green-deep); border-color:rgba(44,110,63,.3); }
.form-alert--error{ background:#FBE3E0; color:#8A2A22; border-color:rgba(162,74,72,.3); }
.form-alert--info{ background:var(--orange-soft); color:var(--orange-deep); border-color:rgba(184,79,15,.25); }

/* === RESPONSIVE === */
@media (max-width: 1000px){
  .contact-grid{grid-template-columns:1fr; gap:36px}
  .contact-info{position:static}
}
@media (max-width: 560px){
  .field-row{grid-template-columns:1fr}
  .contact-form-wrap{padding:28px 22px}
}