/* =========================================================
   CONTACT — section + tache de peinture multicolore
   ========================================================= */
.contact-hero{
  position: relative;
  z-index: 1;
  padding-top: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(28px, 5vw, 80px);
}

/* Peinture façon Offres (mêmes vibes, teinte brand + bleus/lilas) */
.contact-hero::before{
  content:"";
  position:absolute;
  top:-220px; left:calc(50% - 50vw);
  width:100vw; height:1400px; z-index:0; pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 0,
      color-mix(in oklab, var(--brand) 38%, white 62%),
      color-mix(in oklab, #79a7ff 35%, white 65%) 35%,
      color-mix(in oklab, #a784ff 28%, white 72%) 70%,
      transparent 100%);
  filter: blur(78px) saturate(140%);
  transform-origin: top center;
  animation: paintSpread 24s ease-in-out infinite;
}

/* Grille 2 colonnes (form + coordonnées), full width en mobile */
.contact-grid{
  display: grid;
  grid-template-columns: 2fr 1.2fr;
  gap: clamp(16px, 2vw, 24px);
  position: relative;
  z-index: 1;
}
@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Cartes & titres */
.contact-card{ padding: clamp(22px, 2.2vw, 28px); text-align: left; }
.contact-title{ margin: 0 0 6px; }
.contact-lead{ color: var(--muted); margin: 0 0 16px; }

/* Formulaire — champs cohérents avec le thème */
.contact-form{ display: grid; gap: 14px; max-width: 760px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }

.form-field label{ font-weight: 600; display:block; margin: 0 0 6px; }
.input, .textarea{
  width:100%;
  padding: .95rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  color: var(--ink);
  font: inherit;
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.textarea{ min-height: 160px; resize: vertical; }

.input:focus, .textarea:focus{
  outline: none;
  border-color: color-mix(in oklab, var(--brand), black 12%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, white 78%);
  background: rgba(255,255,255,.85);
}

/* Consentement + actions */
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; }
.consent input{ margin-top:.3rem; }
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.note{ color:#64748b; font-size:.95rem; }

/* Liste coordonnées */
.contact-list{ list-style:none; padding:0; margin: 0 0 12px; }
.contact-list li{ margin: 6px 0; }
.contact-cta{ margin: 10px 0 14px; }
.contact-sub{ margin: 14px 0 8px; }
.contact-bullets{ margin: .25rem 0 0 1rem; }
.contact-bullets li{ margin: .25rem 0; }

/* Honeypot (anti-bot) */
.hp{ position:absolute!important; left:-9999px!important; opacity:0!important; height:0!important; width:0!important; }

/* CONTACT — même mécanique que .offres-hero */
.contact-hero{
  position: relative;
  z-index: 1;
  overflow: visible; /* IMPORTANT: autorise le débordement du ::before comme Offres */
  padding-top: clamp(32px,4vw,64px);
  padding-bottom: clamp(32px,5vw,80px);
}

/* Tache de peinture plein viewport, calée comme Offres */
.contact-hero::before{
  content:"";
  position:absolute;
  top:-200px;
  left: calc(50% - 50vw);  /* centre la tache par rapport au viewport */
  width: 100vw;            /* largeur plein écran */
  height: 1400px;
  pointer-events:none;
  z-index:0;
  background: radial-gradient(
    90% 70% at 50% 0,
    rgba(255, 31, 122, .35),   /* proche de --brand */
    rgba(121, 167, 255, .28) 35%,
    rgba(167, 132, 255, .22) 70%,
    transparent 100%
  );
  filter: blur(80px) saturate(140%);
  transform-origin: top center;
  animation: paintSpread 24s ease-in-out infinite;
}

/* (option) si tu veux un peu plus de matière à droite, ajoute une 2e touche */
.contact-hero::after{
  content:"";
  position:absolute;
  top:120px;
  right: calc(50% - 48vw);
  width: 42vw; height: 48vh;
  pointer-events:none; z-index:0;
  background: radial-gradient(60% 60% at 50% 40%,
    rgba(255,22,139,.18), rgba(121,167,255,.16) 60%, transparent 100%);
  filter: blur(50px) saturate(130%);
  animation: paintSpread 28s ease-in-out infinite reverse;
}