/* ==========================================================
   HabitatLab - ContactEngine CSS v1
   COMPOSANT = ContactEngine
   MODULE = CSS
   Statut : final
   Usage cible : CSS dédié au shortcode [habitatlab_contact_engine]
   ========================================================== */

/* ==========================================================
   Conteneur principal
   ========================================================== */

.hl-contact-engine{
  margin:48px 0;
  color:#0f172a;
  box-sizing:border-box;
}

.hl-contact-engine *,
.hl-contact-engine *::before,
.hl-contact-engine *::after{
  box-sizing:border-box;
}

.hl-contact-shell{
  width:100%;
  margin:0 auto;
}

.hl-contact-header{
  margin:0 0 28px;
  padding:40px 32px;
  border:1px solid #dbeafe;
  border-radius:18px;
  background:linear-gradient(135deg,#eef7ff,#ffffff);
  text-align:center;
}

.hl-contact-header h2{
  margin:0 0 16px;
  font-size:clamp(1.9rem,3vw,2.8rem);
  line-height:1.12;
  color:#0f172a;
}

.hl-contact-intro{
  max-width:850px;
  margin:0 auto;
  color:#475569;
  font-size:1.08rem;
  line-height:1.7;
}

/* ==========================================================
   Layout
   ========================================================== */

.hl-contact-layout{
  display:grid;
  grid-template-columns:minmax(260px,360px) minmax(0,1fr);
  gap:24px;
  align-items:start;
}

.hl-contact-context{
  display:grid;
  gap:18px;
}

.hl-contact-context-card{
  padding:24px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
}

.hl-contact-context-card h3{
  margin:0 0 10px;
  color:#0f172a;
  font-size:1.15rem;
  line-height:1.25;
}

.hl-contact-context-card p{
  margin:0;
  color:#475569;
  line-height:1.65;
}

.hl-contact-list{
  margin:14px 0 0;
  padding-left:20px;
  color:#334155;
  line-height:1.65;
}

.hl-contact-list li{
  margin:6px 0;
}

/* ==========================================================
   Formulaire
   ========================================================== */

.hl-contact-form{
  display:block;
  width:100%;
  padding:28px;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.04);
}

.hl-contact-form-head{
  margin:0 0 24px;
  padding:0 0 20px;
  border-bottom:1px solid #e5e7eb;
}

.hl-contact-form-head h3{
  margin:0 0 8px;
  color:#0f172a;
  font-size:1.35rem;
  line-height:1.25;
}

.hl-contact-form-head p{
  margin:0;
  color:#64748b;
  line-height:1.6;
}

.hl-contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 24px;
}

.hl-contact-field{
  min-width:0;
}

.hl-contact-field-wide{
  grid-column:span 1;
}

.hl-contact-field-full{
  grid-column:1 / -1;
}

.hl-contact-field label,
.hl-contact-checkbox label{
  color:#0f172a;
}

.hl-contact-field label span,
.hl-contact-checkbox label span{
  color:#b45309;
  font-weight:900;
}

.hl-contact-field textarea{
  display:block;
  width:100%;
  min-height:180px;
  padding:14px 16px;
  border:1px solid #d1d5db;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font:inherit;
  line-height:1.55;
  resize:vertical;
}

.hl-contact-field textarea:focus{
  outline:none;
  border-color:#1E88E5;
  box-shadow:0 0 0 3px rgba(30,136,229,.14);
}

.hl-contact-field input[aria-invalid="true"],
.hl-contact-field select[aria-invalid="true"],
.hl-contact-field textarea[aria-invalid="true"],
.hl-contact-checkbox input[aria-invalid="true"]{
  border-color:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.12);
}

.hl-contact-help{
  margin:8px 0 0;
  color:#64748b;
  font-size:.92rem;
  line-height:1.55;
}

.hl-contact-error{
  margin:8px 0 0;
  color:#b91c1c;
  font-size:.92rem;
  font-weight:700;
  line-height:1.45;
}

.hl-contact-error[hidden],
.hl-contact-status[hidden],
.hl-contact-submit-loading[hidden]{
  display:none!important;
}

/* ==========================================================
   Statuts et messages
   ========================================================== */

.hl-contact-status{
  margin:0 0 22px;
  padding:16px 18px;
  border-radius:14px;
  border:1px solid #bfdbfe;
  background:#eef7ff;
  color:#1565c0;
}

.hl-contact-status p{
  margin:0;
  line-height:1.6;
  font-weight:700;
}

.hl-contact-status.is-success{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#166534;
}

.hl-contact-status.is-error{
  border-color:#fecaca;
  background:#fef2f2;
  color:#991b1b;
}

.hl-contact-status.is-info{
  border-color:#bfdbfe;
  background:#eef7ff;
  color:#1565c0;
}

/* ==========================================================
   Consentement et anti-spam
   ========================================================== */

.hl-contact-consent{
  margin:24px 0 0;
  padding:20px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#f8fafc;
}

.hl-contact-checkbox{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:12px;
  align-items:start;
}

.hl-contact-checkbox input{
  width:20px;
  height:20px;
  margin:2px 0 0;
  accent-color:#1E88E5;
}

.hl-contact-checkbox label{
  margin:0;
  font-weight:700;
  line-height:1.55;
}

.hl-contact-privacy-note{
  margin:12px 0 0;
  color:#64748b;
  font-size:.92rem;
  line-height:1.6;
}

.hl-contact-anti-spam{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

/* ==========================================================
   Actions
   ========================================================== */

.hl-contact-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin:28px 0 0;
}

.hl-contact-submit,
.hl-contact-reset{
  min-width:220px;
}

.hl-contact-form.is-submitting .hl-contact-submit{
  cursor:wait;
  opacity:.86;
}

.hl-contact-submit:disabled,
.hl-contact-reset:disabled{
  cursor:not-allowed;
}

.hl-contact-submit:disabled{
  opacity:.78;
}

.hl-contact-form.is-submitting .hl-contact-reset{
  pointer-events:none;
  opacity:.55;
}

.hl-contact-footer-note{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid #e5e7eb;
  text-align:center;
}

.hl-contact-footer-note p{
  margin:0;
  color:#64748b;
  font-size:.92rem;
  line-height:1.6;
}

/* ==========================================================
   Variantes contextuelles prévues par l'architecture
   ========================================================== */

.hl-contact-engine[data-hl-form-type="devis"] .hl-contact-header,
.hl-contact-engine[data-hl-form-type="calculateur"] .hl-contact-header{
  background:linear-gradient(135deg,#eef7ff,#ffffff);
}

.hl-contact-engine[data-hl-form-type="partenariat"] .hl-contact-header{
  background:linear-gradient(135deg,#f8fafc,#ffffff);
  border-color:#e5e7eb;
}

.hl-contact-engine[data-hl-form-type="signalement"] .hl-contact-header{
  background:linear-gradient(135deg,#fff7ed,#ffffff);
  border-color:#fed7aa;
}

.hl-contact-engine[data-hl-form-type="signalement"] .hl-eyebrow{
  color:#b45309;
}

.hl-contact-engine[data-hl-form-type="compact"]{
  margin:32px 0;
}

.hl-contact-engine[data-hl-form-type="compact"] .hl-contact-header{
  padding:28px 24px;
  text-align:left;
}

.hl-contact-engine[data-hl-form-type="compact"] .hl-contact-layout{
  grid-template-columns:1fr;
}

.hl-contact-engine[data-hl-form-type="compact"] .hl-contact-context{
  display:none;
}

/* ==========================================================
   Accessibilité
   ========================================================== */

.hl-contact-engine :focus-visible{
  outline:3px solid rgba(30,136,229,.35);
  outline-offset:3px;
}

.hl-contact-engine button:disabled,
.hl-contact-engine input:disabled,
.hl-contact-engine select:disabled,
.hl-contact-engine textarea:disabled{
  cursor:not-allowed;
  opacity:.65;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width:980px){
  .hl-contact-layout{
    grid-template-columns:1fr;
  }

  .hl-contact-context{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){
  .hl-contact-engine{
    margin:36px 0;
  }

  .hl-contact-header{
    padding:32px 22px;
    text-align:left;
  }

  .hl-contact-intro{
    font-size:1rem;
  }

  .hl-contact-context{
    grid-template-columns:1fr;
  }

  .hl-contact-context-card,
  .hl-contact-form{
    padding:22px 18px;
  }

  .hl-contact-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .hl-contact-field-wide,
  .hl-contact-field-full{
    grid-column:1;
  }

  .hl-contact-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hl-contact-submit,
  .hl-contact-reset,
  .hl-contact-actions .hl-btn{
    width:100%;
    min-width:0;
  }
}