/* ==========================================================================
   Formulaires — floating labels sans JavaScript (Elementor Pro & Contact Form 7)
   Remplace les deux versions précédentes (CSS + jQuery) par une seule.

   ELEMENTOR PRO
   - Widget Formulaire > Avancé > Classes CSS : lcdd-floating
   - Contenu > Champs : laisser « Label » affiché ET renseigner un placeholder
     dans chaque champ (le même texte que le label, il est masqué).
   - Ne pas styler les champs dans le widget ni dans Site Settings > Champs de
     formulaire : tout passe par les variables ci-dessous (à surcharger dans
     « Styles spécifiques au projet » de style.css si besoin).

   CONTACT FORM 7
   - Utiliser le gabarit de formulaire de la procédure (div.lcdd-field).
   ========================================================================== */

.lcdd-floating,
.wpcf7-form {
  --field-bg: #fff;
  --field-color: var(--e-global-color-text, #222);
  --field-border: color-mix(in srgb, var(--field-color) 30%, transparent);
  --field-focus: var(--e-global-color-primary, #222);
  --label-color: color-mix(in srgb, var(--field-color) 60%, transparent);
  --field-radius: var(--radius-s, 0.25rem);
  --field-gap: var(--space-s, 1rem);
}

/* --------------------------------------------------------------------------
   1. Groupe = grille 1 cellule : label et champ superposés, sans position absolue
      (donc compatible avec les colonnes et l'espacement du widget Elementor)
   -------------------------------------------------------------------------- */
.lcdd-floating .elementor-field-group:has(.elementor-field-textual),
.lcdd-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.lcdd-floating .elementor-field-group:has(.elementor-field-textual) > .elementor-field-label,
.lcdd-floating .elementor-field-group:has(.elementor-field-textual) > .elementor-field,
.lcdd-floating .elementor-field-group:has(.elementor-field-textual) > .elementor-select-wrapper,
.lcdd-field > label,
.lcdd-field > .wpcf7-form-control-wrap {
  grid-area: 1 / 1;
}

/* --------------------------------------------------------------------------
   2. Champs
   -------------------------------------------------------------------------- */
.lcdd-floating .elementor-form .elementor-field-group .elementor-field-textual,
.lcdd-field :is(input, textarea, select) {
  width: 100%;
  min-height: 0;
  padding: 1.35em 0.9em 0.45em;
  font-size: max(1rem, 16px);           /* < 16px : iOS zoome au focus */
  line-height: 1.3;
  color: var(--field-color);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  box-shadow: none;
  transition: border-color var(--transition, 0.25s ease), box-shadow var(--transition, 0.25s ease);
}

.lcdd-floating .elementor-form .elementor-field-group textarea.elementor-field-textual,
.lcdd-field textarea {
  min-height: 8em;
  resize: vertical;
}

.lcdd-floating .elementor-form .elementor-field-group .elementor-field-textual:focus,
.lcdd-field :is(input, textarea, select):focus {
  outline: none;
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-focus) 15%, transparent);
}

/* Le placeholder sert seulement à détecter un champ vide : on le masque */
.lcdd-floating .elementor-field-textual::placeholder,
.lcdd-field :is(input, textarea)::placeholder {
  color: transparent;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   3. Label : dans le champ au repos, réduit en haut au focus ou une fois rempli
   -------------------------------------------------------------------------- */
.lcdd-floating .elementor-form .elementor-field-group:has(.elementor-field-textual) > .elementor-field-label,
.lcdd-field > label {
  position: relative;
  z-index: 1;
  justify-self: start;
  max-width: calc(100% - 1.8em);
  margin: 0.85em 0 0 0.9em;
  padding: 0;
  font-size: max(1rem, 16px);
  line-height: 1.3;
  color: var(--label-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--transition, 0.25s ease), color var(--transition, 0.25s ease);
}

/* Focus */
.lcdd-floating .elementor-form .elementor-field-group:has(.elementor-field-textual):focus-within > .elementor-field-label,
.lcdd-field:focus-within > label {
  transform: translateY(-0.6em) scale(0.75);
  color: var(--field-focus);
}

/* Rempli (y compris autocomplétion) ou liste déroulante */
.lcdd-floating .elementor-form .elementor-field-group:has(.elementor-field-textual:not(:placeholder-shown)) > .elementor-field-label,
.lcdd-floating .elementor-form .elementor-field-group:has(select) > .elementor-field-label,
.lcdd-field:has(:is(input, textarea):not(:placeholder-shown)) > label,
.lcdd-field:has(select) > label {
  transform: translateY(-0.6em) scale(0.75);
}

/* Navigateur sans :has() → labels toujours en haut (jamais superposés au texte) */
@supports not selector(:has(*)) {
  .lcdd-field > label { transform: translateY(-0.6em) scale(0.75); }
}

/* Message d'erreur CF7 sous le champ */
.lcdd-field .wpcf7-not-valid-tip {
  margin-top: 0.3em;
  font-size: var(--fs-small, 0.8rem);
}

/* --------------------------------------------------------------------------
   4. Mise en page CF7 (Elementor gère ses colonnes lui-même)
   -------------------------------------------------------------------------- */
.wpcf7-form p { margin: 0; }

.wpcf7-form .lcdd-row {
  display: flex;
  gap: var(--field-gap);
  margin-bottom: var(--field-gap);
}
.wpcf7-form .lcdd-row > * { flex: 1; min-width: 0; }
.wpcf7-form > .lcdd-field,
.wpcf7-form .lcdd-acceptance { margin-bottom: var(--field-gap); }

@media (max-width: 767px) {
  .wpcf7-form .lcdd-row { flex-direction: column; }
}

.wpcf7-form .lcdd-acceptance { font-size: var(--fs-small, 0.8rem); }

/* Bouton d'envoi CF7 */
.wpcf7-form input[type="submit"] {
  width: 100%;
  margin-top: var(--space-xs, 0.5rem);
  padding: 0.75em 1.5em;
  font-size: var(--fs-body, 1rem);
  color: #fff;
  background-color: var(--e-global-color-primary, #222);
  border: 1px solid var(--e-global-color-primary, #222);
  border-radius: var(--field-radius);
  cursor: pointer;
  transition: background-color var(--transition, 0.25s ease), color var(--transition, 0.25s ease);
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus-visible {
  color: var(--e-global-color-primary, #222);
  background-color: #fff;
}

/* --------------------------------------------------------------------------
   5. Apparition progressive des champs (optionnel : classe lcdd-form-anim)
   -------------------------------------------------------------------------- */
.lcdd-form-anim .elementor-field-group,
.lcdd-form-anim .lcdd-row,
.lcdd-form-anim > .lcdd-field {
  animation: lcdd-slide-up 0.6s ease both;
}
.lcdd-form-anim .elementor-field-group:nth-child(2), .lcdd-form-anim .lcdd-row:nth-child(2) { animation-delay: 0.1s; }
.lcdd-form-anim .elementor-field-group:nth-child(3), .lcdd-form-anim .lcdd-row:nth-child(3) { animation-delay: 0.2s; }
.lcdd-form-anim .elementor-field-group:nth-child(4), .lcdd-form-anim .lcdd-row:nth-child(4) { animation-delay: 0.3s; }
.lcdd-form-anim .elementor-field-group:nth-child(5), .lcdd-form-anim .lcdd-row:nth-child(5) { animation-delay: 0.4s; }
.lcdd-form-anim .elementor-field-group:nth-child(n+6), .lcdd-form-anim .lcdd-row:nth-child(n+6) { animation-delay: 0.5s; }

@keyframes lcdd-slide-up {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   6. reCAPTCHA v3 : badge masqué → mention obligatoire (classe recaptcha-notice)
   -------------------------------------------------------------------------- */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-notice { font-size: 0.7rem; opacity: 0.6; }
.recaptcha-notice a { color: inherit; text-decoration: underline; }