/*
 Theme Name:   Divi Child
 Theme URI:    https://psychologueblache.com
 Description:  Divi Child Theme for psychologueblache.com
 Author:       psychologueblache.com
 Template:     Divi
 Version:      1.0.0
 Text Domain:  divi-child
*/

:root {
  --color-jaune: #FADFA4;
  --color-vert:  #04201E;
}

/* ── HERO SECTION ── */
.hero-section.et_pb_section {
  background-image: url('https://psychologueblache.com/wp-content/uploads/2026/04/cabinet_Morlaix.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: rgba(4,32,30,0.65) !important;
  background-blend-mode: multiply !important;
}

/* Force all text in dark bg sections to be readable */
.et_pb_bg_layout_dark h1,
.et_pb_bg_layout_dark h2,
.et_pb_bg_layout_dark h3,
.et_pb_bg_layout_dark p,
.et_pb_bg_layout_dark li,
.et_pb_bg_layout_dark a {
  color: inherit !important;
}

/* Ensure column-level padding is applied */
.et_pb_column .et_pb_module {
  height: 100%;
}

/* ──────────────────────────────────────────────────────────
   NINJA FORMS — brand styling (match Divi)
   NF ne charge que display-structure.css : on stylise nous-mêmes.
   Réf : _global/wordpress/ninja-forms.md (piège n°1)
   ────────────────────────────────────────────────────────── */

/* Champs texte / email / tel / textarea / select */
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont input[type="url"],
.nf-form-cont input[type="number"],
.nf-form-cont input[type="password"],
.nf-form-cont textarea,
.nf-form-cont select {
  width: 100%;
  padding: 12px 16px;
  font-family: "TikTok Sans", sans-serif;
  font-size: 16px;
  color: var(--color-vert);
  background-color: #fff;
  border: 1px solid rgba(4, 32, 30, 0.25);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nf-form-cont input[type="text"]:focus,
.nf-form-cont input[type="email"]:focus,
.nf-form-cont input[type="tel"]:focus,
.nf-form-cont input[type="url"]:focus,
.nf-form-cont input[type="number"]:focus,
.nf-form-cont input[type="password"]:focus,
.nf-form-cont textarea:focus,
.nf-form-cont select:focus {
  border-color: var(--color-vert);
  box-shadow: 0 0 0 2px rgba(250, 223, 164, 0.6);
  outline: none;
}

.nf-form-cont textarea {
  min-height: 140px;
}

/* Labels — NF les laisse en inline, on force block */
.nf-form-cont .nf-field-label label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: "TikTok Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-vert);
}

/* Placeholder lisible */
.nf-form-cont ::placeholder { color: rgba(4, 32, 30, 0.45); }

/* ── Bouton submit — calqué EXACTEMENT sur .et_pb_button Divi ──
   NF rend type="submit" au load puis JS le convertit en type="button"
   après init AJAX → on cible les DEUX (piège n°1). */
.nf-form-cont input[type="submit"],
.nf-form-cont input[type="button"],
.nf-form-cont .submit-wrap input[type="submit"],
.nf-form-cont .submit-wrap input[type="button"],
.nf-form-cont .nf-element[type="button"] {
  display: inline-block;
  width: auto;
  color: var(--color-jaune) !important;
  background-color: var(--color-vert) !important;
  background-image: none !important;
  border: 2px solid var(--color-jaune) !important;
  border-radius: 23px !important;
  padding: 10px 28px !important;
  font-family: "TikTok Sans", sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Hover — inversion des couleurs façon Divi */
.nf-form-cont input[type="submit"]:hover,
.nf-form-cont input[type="button"]:hover,
.nf-form-cont .submit-wrap input[type="submit"]:hover,
.nf-form-cont .submit-wrap input[type="button"]:hover,
.nf-form-cont .nf-element[type="button"]:hover {
  color: var(--color-vert) !important;
  background-color: var(--color-jaune) !important;
  border-color: var(--color-jaune) !important;
}

/* Messages d'erreur en cohérence */
.nf-form-cont .nf-error-msg { color: #b3261e; font-size: 14px; }
.nf-form-cont .nf-error.field-wrap input,
.nf-form-cont .nf-error.field-wrap textarea {
  border-color: #b3261e;
}