/* =========================================================
   Climatherm Contact Form — front-end styles
   Faithful reproduction of the Climatherm "Contact / Devis"
   design (sections « Coordonnées » + « Formulaire »).

   Every selector is scoped under the `.ctcf` root and prefixed
   `ctcf-*` so the component can be dropped into a Divi 5 "Code"
   module without colliding with theme classes (.container,
   .field, .btn, .head…). Design tokens are declared on the root
   element so they inherit downward and never leak to :root.
   ========================================================= */

.ctcf {
  /* ---- Brand palette (from colors_and_type.css) ---- */
  --ctcf-blue-900: #1A5270;
  --ctcf-blue-500: #0C78AC;
  --ctcf-blue-25:  #F5F9FB;
  --ctcf-yellow:   #FBB800;
  --ctcf-white:    #FFFFFF;
  --ctcf-fg-1:     #1A5270;
  --ctcf-fg-2:     #2A3A44;
  --ctcf-fg-3:     #575757;
  --ctcf-gray-500: #878787;
  --ctcf-border:   #DADADA;
  --ctcf-border-soft: #ECEFF2;

  /* ---- Status ---- */
  --ctcf-success: #2E8B57;
  --ctcf-danger:  #C0392B;

  /* ---- Type ---- */
  --ctcf-font:        "Roboto", "Helvetica Neue", Arial, sans-serif;
  --ctcf-font-edit:   "Poppins", "Roboto", sans-serif;

  /* ---- Effects ---- */
  --ctcf-shadow-acc: 0 6px 16px -6px rgba(251,184,0,.55);
  --ctcf-radius-md: 12px;
  --ctcf-radius-sm: 10px;
  --ctcf-dur: 220ms;
  --ctcf-ease: cubic-bezier(.22,.61,.36,1);

  font-family: var(--ctcf-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ctcf-fg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Predictable box model + neutralise inherited theme quirks */
.ctcf,
.ctcf *,
.ctcf *::before,
.ctcf *::after { box-sizing: border-box; }

.ctcf h2 { text-wrap: balance; }
.ctcf p { text-wrap: pretty; }

/* =========================================================
   Layout — single, centred form card
   ========================================================= */
.ctcf-grid {
  max-width: 720px;
  margin: 0 auto;
}

/* =========================================================
   Form — no chrome here on purpose.
   Background, border, radius, shadow and padding are all owned
   by the host container (the Divi group that wraps the Code
   module), so the form stays a fully transparent, flush surface.
   ========================================================= */
.ctcf-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.ctcf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ctcf-field--full { grid-column: 1 / -1; }

.ctcf-field > label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ctcf-blue-900);
}
.ctcf-req { color: var(--ctcf-yellow); }

.ctcf-field input[type="text"],
.ctcf-field input[type="email"],
.ctcf-field input[type="tel"],
.ctcf-field select,
.ctcf-field textarea {
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ctcf-blue-900);
  padding: 12px 14px;
  border: 1px solid var(--ctcf-border);
  border-radius: var(--ctcf-radius-sm);
  background: var(--ctcf-white);
  transition: border-color var(--ctcf-dur) var(--ctcf-ease),
              box-shadow var(--ctcf-dur) var(--ctcf-ease);
}
.ctcf-field input::placeholder,
.ctcf-field textarea::placeholder { color: var(--ctcf-gray-500); opacity: 1; }

.ctcf-field input:focus,
.ctcf-field select:focus,
.ctcf-field textarea:focus {
  outline: none;
  border-color: var(--ctcf-blue-500);
  box-shadow: 0 0 0 3px rgba(12,120,172,.18);
}
.ctcf-field textarea { resize: vertical; min-height: 120px; }

.ctcf-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%231A5270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* Radio segmented control */
.ctcf-radios {
  display: flex;
  gap: 8px;
}
.ctcf-radios label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--ctcf-white);
  border: 1px solid var(--ctcf-border);
  border-radius: var(--ctcf-radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ctcf-blue-900);
  transition: border-color var(--ctcf-dur) var(--ctcf-ease),
              background var(--ctcf-dur) var(--ctcf-ease);
}
.ctcf-radios input {
  width: auto;
  margin: 0;
  accent-color: var(--ctcf-blue-900);
}
.ctcf-radios label:hover { border-color: var(--ctcf-blue-500); }
.ctcf-radios label:has(input:checked) {
  border-color: var(--ctcf-blue-900);
  background: var(--ctcf-blue-25);
}

/* Consent */
.ctcf-consent {
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ctcf-fg-3);
  cursor: pointer;
}
.ctcf-consent input {
  width: auto;
  margin-top: 2px;
  accent-color: var(--ctcf-blue-500);
  flex: 0 0 auto;
}
.ctcf-consent a { color: var(--ctcf-blue-500); }

/* Inline field errors */
.ctcf-error {
  display: none;
  font-size: 12px;
  font-weight: 400;
  color: var(--ctcf-danger);
}
.ctcf-field.is-invalid > label { color: var(--ctcf-danger); }
.ctcf-field.is-invalid input,
.ctcf-field.is-invalid select,
.ctcf-field.is-invalid textarea {
  border-color: var(--ctcf-danger);
  box-shadow: 0 0 0 3px rgba(192,57,43,.14);
}
.ctcf-field.is-invalid .ctcf-error { display: block; }

/* Footer */
.ctcf-foot {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ctcf-border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.ctcf-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ctcf-fg-3);
}
.ctcf-note svg {
  width: 14px;
  height: 14px;
  stroke: var(--ctcf-blue-500);
  fill: none;
  stroke-width: 2;
  flex: 0 0 auto;
}

/* =========================================================
   Button
   ========================================================= */
.ctcf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: var(--ctcf-yellow);
  color: var(--ctcf-blue-900);
  box-shadow: var(--ctcf-shadow-acc);
  transition: background var(--ctcf-dur) var(--ctcf-ease),
              transform var(--ctcf-dur) var(--ctcf-ease),
              box-shadow var(--ctcf-dur) var(--ctcf-ease);
}
.ctcf-btn:hover {
  background: #E0A800;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px rgba(251,184,0,.65);
}
.ctcf-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(12,120,172,.35);
}
.ctcf-btn .ctcf-arrow {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--ctcf-dur) var(--ctcf-ease);
}
.ctcf-btn:hover .ctcf-arrow { transform: translateX(3px); }

/* Loading state */
.ctcf-btn.is-loading {
  pointer-events: none;
  opacity: .85;
}
.ctcf-btn.is-loading .ctcf-arrow { display: none; }
.ctcf-btn.is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(26,82,112,.35);
  border-top-color: var(--ctcf-blue-900);
  animation: ctcf-spin .7s linear infinite;
}
@keyframes ctcf-spin { to { transform: rotate(360deg); } }

/* =========================================================
   Form-level alert (success / error banner)
   ========================================================= */
.ctcf-alert {
  display: none;
  margin-bottom: 24px;
  padding: 14px 16px;
  border-radius: var(--ctcf-radius-md);
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.ctcf-alert.is-visible { display: block; }
.ctcf-alert--success {
  color: #1d6e44;
  background: #EAF7F0;
  border-color: #BFE6D2;
}
.ctcf-alert--error {
  color: #8c2c22;
  background: #FBEDEB;
  border-color: #F0C9C4;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ctcf *,
  .ctcf *::before,
  .ctcf *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* =========================================================
   Responsive — the source design ships no breakpoints,
   added here per the "pleinement responsive" requirement.
   ========================================================= */
@media (max-width: 600px) {
  .ctcf-form-grid { grid-template-columns: 1fr; }
  .ctcf-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .ctcf-foot .ctcf-btn { width: 100%; }
}

@media (max-width: 400px) {
  .ctcf-radios { flex-direction: column; }
}