/* =============================================================================
   WPFORMS — HABILLAGE FENCHELL (nouvel ADN)
   -----------------------------------------------------------------------------
   À coller dans WordPress : Apparence > Personnaliser > CSS additionnel
   (ou WPForms > Réglages > si champ CSS dispo).

   Cette feuille est AUTONOME : toutes les valeurs sont en dur (pas de var()),
   car ce CSS vit côté WordPress sans accès à /assets/fenchell.css.

   Rappel des tokens ADN repris en dur ci-dessous :
     Vert pétrole foncé .... #004953  (--green-dark)
     Vert pétrole moyen .... #006675  (--green-mid)
     Vert vif .............. #00B77F  (--green-vibrant)
     Vert lumineux ......... #00C588  (--green-bright)
     Vert pâle (fond) ...... #E6F8F0  (--green-pale)
     Or moyen .............. #C8A018  (--gold-mid)
     Or foncé .............. #8A6010  (--gold-dark)
     Or clair .............. #D4B062  (--gold-light)
     Ivoire ................ #FBF7EF  (--ivory)
     Blanc papier .......... #FFFFFF  (--paper)
     Gris texte ............ #404040 / #555555 / #6B6B6B
     Gris bordure .......... #C4C4C4 / #ECECEC
     Rayons ................ 6 / 12 / 20 px + pill 999px
     Police ................ 'Lato'
     Rouge erreur (sobre) .. #C0392B

   IMPORTANT — surcharge thème :
   Le thème Aux/Elementor en place applique des règles très spécifiques avec
   !important (boutons en dégradé conique ROUGE « diagnostic Amazon » sur
   .wpforms-page-button et .wpforms-submit, préfixes div.wpforms-container-full).
   On reprend donc les MÊMES préfixes de spécificité (div.wpforms-container-full)
   et !important là où c'est nécessaire pour reprendre la main.

   On cible aussi le rendu MODERNE de WPForms (.wpforms-render-modern) qui
   expose des variables CSS --wpforms-* scopées sur #wpforms-XXXXX : on les
   réécrit pour habiller proprement champs/boutons même en markup moderne.
   ========================================================================== */


/* =============================================================================
   0. VARIABLES DU RENDU MODERNE WPFORMS
   On réécrit les --wpforms-* (scopées par WPForms sur chaque conteneur) pour
   que le markup moderne hérite directement de l'ADN sans lutte de spécificité.
   ========================================================================== */
.wpforms-container.wpforms-render-modern,
div.wpforms-container-full {
  /* Champs */
  --wpforms-field-background-color: #FFFFFF;
  --wpforms-field-border-color: #C4C4C4;
  --wpforms-field-border-color-spare: rgba(0, 73, 83, 0.18);
  --wpforms-field-border-style: solid;
  --wpforms-field-border-size: 1px;
  --wpforms-field-border-radius: 12px;
  --wpforms-field-text-color: #1A1A1A;
  --wpforms-field-menu-color: #FFFFFF;

  /* Libellés */
  --wpforms-label-color: #004953;
  --wpforms-label-sublabel-color: #6B6B6B;
  --wpforms-label-error-color: #C0392B;

  /* Boutons */
  --wpforms-button-background-color: #00B77F;
  --wpforms-button-border-color: transparent;
  --wpforms-button-border-style: none;
  --wpforms-button-border-size: 0px;
  --wpforms-button-border-radius: 999px;
  --wpforms-button-text-color: #FFFFFF;

  /* Indicateur de page (barre / puces) */
  --wpforms-page-break-color: #00B77F;

  /* Conteneur */
  --wpforms-container-border-style: none;
  --wpforms-container-border-width: 0px;
  --wpforms-container-border-color: transparent;
  --wpforms-container-border-radius: 20px;
}


/* =============================================================================
   1. CONTENEUR & FORMULAIRE
   ========================================================================== */
div.wpforms-container,
div.wpforms-container-full {
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #1A1A1A;
  margin-inline: auto;
}

/* Form : carte ivoire/blanc, double-cadre doux, ombre tamisée (signature ADN) */
div.wpforms-container .wpforms-form,
div.wpforms-container-full .wpforms-form {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EF 100%);
  border: 1px solid rgba(0, 73, 83, 0.08);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 40px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.85),
    0 16px 40px rgba(0, 27, 36, 0.08);
}

/* Titre & description du formulaire (si activés) */
div.wpforms-container-full .wpforms-title {
  font-family: 'Lato', sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 900;
  letter-spacing: -0.015em;
  color: #004953;
  margin: 0 0 8px;
}
div.wpforms-container-full .wpforms-description {
  font-size: 15px;
  color: #555555;
  line-height: 1.55;
  margin: 0 0 24px;
}

/* Titres libres insérés dans le form (champ « Contenu » : h2/h3/h4) */
div.wpforms-container-full .wpforms-field-content h2,
div.wpforms-container-full .wpforms-field-content h3,
div.wpforms-container-full .wpforms-field-content h4 {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  color: #004953;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Espacement vertical régulier entre les champs */
div.wpforms-container-full .wpforms-field {
  padding: 0 0 18px;
}

/* Avertissement noscript : encart sobre */
div.wpforms-container-full .wpforms-error-noscript {
  background: #FBF7EF;
  border: 1px solid rgba(192, 57, 43, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  color: #C0392B;
  font-size: 14px;
}


/* =============================================================================
   2. LIBELLÉS, SOUS-LIBELLÉS, DESCRIPTIONS
   Labels verts et gras ; sous-labels et descriptions discrets.
   ========================================================================== */
div.wpforms-container-full .wpforms-field-label,
div.wpforms-container-full .wpforms-form legend.wpforms-field-label {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #004953;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  padding: 0;
  border: 0; /* neutralise le bordereau natif des « legend » */
}

/* Sous-libellé (ex. « Prénom / Nom » sous un champ Nom) */
div.wpforms-container-full .wpforms-field-sublabel {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #6B6B6B;
  letter-spacing: 0.01em;
  margin-top: 4px;
  line-height: 1.4;
}
div.wpforms-container-full .wpforms-field-sublabel.before {
  margin: 0 0 4px;
}

/* Description de champ (texte d'aide) */
div.wpforms-container-full .wpforms-field-description {
  font-size: 13px;
  color: #555555;
  line-height: 1.5;
  margin-top: 8px;
}

/* Astérisque « requis » : ton or pour différencier sans agresser */
div.wpforms-container-full .wpforms-required-label {
  color: #C8A018;
  font-weight: 900;
  margin-left: 3px;
}

/* Label masqué demandé par WPForms : on respecte */
div.wpforms-container-full .wpforms-label-hide {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* =============================================================================
   3. CHAMPS TEXTE : input / textarea / select
   Fond blanc, bordure douce, rayon 12px, focus vert lumineux.
   ========================================================================== */
div.wpforms-container-full .wpforms-field input[type="text"],
div.wpforms-container-full .wpforms-field input[type="email"],
div.wpforms-container-full .wpforms-field input[type="tel"],
div.wpforms-container-full .wpforms-field input[type="url"],
div.wpforms-container-full .wpforms-field input[type="number"],
div.wpforms-container-full .wpforms-field input[type="password"],
div.wpforms-container-full .wpforms-field input[type="date"],
div.wpforms-container-full .wpforms-field input[type="datetime-local"],
div.wpforms-container-full .wpforms-field input[type="search"],
div.wpforms-container-full .wpforms-field textarea,
div.wpforms-container-full .wpforms-field select {
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  color: #1A1A1A;
  background-color: #FFFFFF;
  border: 1px solid #C4C4C4;
  border-radius: 12px;
  padding: 12px 16px;
  line-height: 1.4;
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(0, 27, 36, 0.04);
  transition:
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-appearance: none;
  appearance: none;
}

div.wpforms-container-full .wpforms-field textarea {
  min-height: 130px;
  resize: vertical;
}

/* Flèche de select dessinée (cohérente, vert pétrole) */
div.wpforms-container-full .wpforms-field select {
  background-image: linear-gradient(45deg, transparent 50%, #004953 50%), linear-gradient(135deg, #004953 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: right 20px center, right 15px center;
  background-size: 5px 5px, 5px 5px;
  padding-right: 42px;
  cursor: pointer;
}

/* Placeholder discret */
div.wpforms-container-full .wpforms-field input::placeholder,
div.wpforms-container-full .wpforms-field textarea::placeholder {
  color: #9A9A9A;
  opacity: 1;
}

/* Survol : bordure qui se réchauffe */
div.wpforms-container-full .wpforms-field input:hover,
div.wpforms-container-full .wpforms-field textarea:hover,
div.wpforms-container-full .wpforms-field select:hover {
  border-color: #6B6B6B;
}

/* Focus : anneau vert lumineux (signature ADN) */
div.wpforms-container-full .wpforms-field input:focus,
div.wpforms-container-full .wpforms-field textarea:focus,
div.wpforms-container-full .wpforms-field select:focus {
  outline: none;
  border-color: #00B77F;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(0, 183, 127, 0.16);
}

/* Largeurs natives WPForms (small / medium / large) */
div.wpforms-container-full .wpforms-field-small  { max-width: 220px; }
div.wpforms-container-full .wpforms-field-medium { max-width: 400px; }
div.wpforms-container-full .wpforms-field-large  { max-width: 100%; }

/* Lignes multi-colonnes (Nom Prénom, Adresse…) */
div.wpforms-container-full .wpforms-field-row {
  margin-bottom: 0;
}


/* =============================================================================
   4. RADIOS & CASES À COCHER
   Accent vert + cartes au survol (listes en listes ul / li).
   Le rendu moderne utilise des input natifs : on s'appuie sur accent-color
   et on garde un fallback sobre.
   ========================================================================== */
div.wpforms-container-full .wpforms-field-radio ul,
div.wpforms-container-full .wpforms-field-checkbox ul,
div.wpforms-container-full .wpforms-field-payment-multiple ul,
div.wpforms-container-full .wpforms-field-payment-checkbox ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Variantes natives WPForms : listes en colonnes / en ligne */
div.wpforms-container-full .wpforms-list-inline ul {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 20px;
}
div.wpforms-container-full .wpforms-list-2-columns ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
div.wpforms-container-full .wpforms-list-3-columns ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 16px;
}
@media (max-width: 600px) {
  div.wpforms-container-full .wpforms-list-2-columns ul,
  div.wpforms-container-full .wpforms-list-3-columns ul {
    grid-template-columns: 1fr;
  }
}

/* Chaque option : carte cliquable légère */
div.wpforms-container-full .wpforms-field-radio ul li,
div.wpforms-container-full .wpforms-field-checkbox ul li,
div.wpforms-container-full .wpforms-field-payment-multiple ul li,
div.wpforms-container-full .wpforms-field-payment-checkbox ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #ECECEC;
  border-radius: 12px;
  line-height: 1.4;
  transition:
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Survol de l'option : carte verte douce */
div.wpforms-container-full .wpforms-field-radio ul li:hover,
div.wpforms-container-full .wpforms-field-checkbox ul li:hover,
div.wpforms-container-full .wpforms-field-payment-multiple ul li:hover,
div.wpforms-container-full .wpforms-field-payment-checkbox ul li:hover {
  border-color: rgba(0, 183, 127, 0.5);
  background: #E6F8F0;
  box-shadow: inset 0 0 0 1px rgba(0, 183, 127, 0.18);
}

/* La puce/coche elle-même : accent vert vif */
div.wpforms-container-full .wpforms-field-radio input[type="radio"],
div.wpforms-container-full .wpforms-field-checkbox input[type="checkbox"],
div.wpforms-container-full .wpforms-field-payment-multiple input[type="radio"],
div.wpforms-container-full .wpforms-field-payment-checkbox input[type="checkbox"] {
  accent-color: #00B77F;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* Libellé en ligne de l'option */
div.wpforms-container-full .wpforms-field-label-inline {
  font-family: 'Lato', sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  color: #404040;
  cursor: pointer;
  margin: 0;
  line-height: 1.45;
}

/* Choix d'images modernes : encadré qui s'illumine */
div.wpforms-container-full .wpforms-image-choices-item {
  border-radius: 12px;
}
div.wpforms-container-full .wpforms-image-choices-modern .wpforms-image-choices-image {
  border-radius: 10px;
}
div.wpforms-container-full .wpforms-image-choices-item.wpforms-selected {
  outline: 2px solid #00B77F;
  outline-offset: 2px;
}


/* =============================================================================
   5. INDICATEUR D'ÉTAPES (formulaires multi-pages)
   Barre de progression verte + puces (« circles ») actives en vert.
   ========================================================================== */

/* --- Variante barre/segments --- */
div.wpforms-container-full .wpforms-page-indicator {
  font-family: 'Lato', sans-serif;
  margin-bottom: 24px;
  color: #6B6B6B;
}

/* Variante "progress" : la barre de remplissage */
div.wpforms-container-full .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
  background: #ECECEC !important;
  border-radius: 999px;
  overflow: hidden;
}
div.wpforms-container-full .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
  background: linear-gradient(90deg, #00B77F 0%, #00C588 100%) !important;
  border-radius: 999px;
}
div.wpforms-container-full .wpforms-page-indicator.progress .wpforms-page-indicator-page-title {
  color: #004953 !important;
  font-weight: 700;
}
div.wpforms-container-full .wpforms-page-indicator.progress .wpforms-page-indicator-steps {
  color: #6B6B6B !important;
  font-weight: 700;
}

/* Variante "connector" (segments reliés) */
div.wpforms-container-full .wpforms-page-indicator.connector .wpforms-page-indicator-page.active,
div.wpforms-container-full .wpforms-page-indicator.connector .wpforms-page-indicator-page.completed {
  color: #00B77F !important;
}

/* --- Variante "circles" : puces numérotées --- */
div.wpforms-container-full .wpforms-page-indicator.circles {
  display: flex;
  gap: 12px;
  justify-content: space-evenly;
  border-top: none;
}

/* Puce par défaut (inactive) */
div.wpforms-container-full .wpforms-page-indicator.circles .wpforms-page-indicator-page-number {
  background: #ECECEC !important;
  color: #6B6B6B !important;
  border: 2px solid #ECECEC !important;
  font-weight: 900;
  width: 34px;
  height: 34px;
  line-height: 30px;
  border-radius: 50%;
  transition:
    background-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Puce active / déjà franchie : pastille verte */
div.wpforms-container-full .wpforms-page-indicator.circles .active .wpforms-page-indicator-page-number,
div.wpforms-container-full .wpforms-page-indicator.circles .completed .wpforms-page-indicator-page-number {
  background: #00B77F !important;
  border-color: #00B77F !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 183, 127, 0.32);
}

/* Intitulé sous la puce */
div.wpforms-container-full .wpforms-page-indicator.circles .wpforms-page-indicator-page-title {
  color: #555555 !important;
  font-size: 13px;
  font-weight: 700;
}
div.wpforms-container-full .wpforms-page-indicator.circles .active .wpforms-page-indicator-page-title {
  color: #004953 !important;
}


/* =============================================================================
   6. BOUTONS PAGINATION (Suivant / Précédent) & SUBMIT (Envoyer)
   On REPREND la main sur le dégradé conique ROUGE du thème (haute spécificité
   + !important côté thème) → on impose le bouton vert ADN type .btn-primary.
   ========================================================================== */

/* --- Boutons « Suivant » et SUBMIT : vert dégradé (style .btn-primary) --- */
div.wpforms-container-full .wpforms-page-button.wpforms-page-next,
div.wpforms-container-full button.wpforms-page-button.wpforms-page-next,
div.wpforms-container-full .wpforms-submit,
div.wpforms-container-full button.wpforms-submit,
div.wpforms-container-full input.wpforms-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Lato', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #FFFFFF !important;
  text-shadow: none !important;
  background-color: #00B77F !important;
  background-image: linear-gradient(135deg, #00B77F 0%, #00C588 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 183, 127, 0.22) !important;
  transform: none !important;
  transition:
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Survol / activation : se soulève, halo plus dense */
div.wpforms-container-full .wpforms-page-button.wpforms-page-next:hover,
div.wpforms-container-full .wpforms-page-button.wpforms-page-next:active,
div.wpforms-container-full button.wpforms-page-button.wpforms-page-next:hover,
div.wpforms-container-full .wpforms-submit:hover,
div.wpforms-container-full .wpforms-submit:active,
div.wpforms-container-full button.wpforms-submit:hover,
div.wpforms-container-full input.wpforms-submit:hover {
  color: #FFFFFF !important;
  background-image: linear-gradient(135deg, #00C588 0%, #00B77F 100%) !important;
  box-shadow: 0 8px 24px rgba(0, 183, 127, 0.36) !important;
  transform: translateY(-2px) !important;
}

/* Focus clavier accessible */
div.wpforms-container-full .wpforms-page-button:focus-visible,
div.wpforms-container-full .wpforms-submit:focus-visible {
  outline: 2px solid #004953 !important;
  outline-offset: 3px;
}

/* --- Bouton « Précédent » : secondaire (contour vert pétrole) --- */
div.wpforms-container-full .wpforms-page-button.wpforms-page-prev,
div.wpforms-container-full button.wpforms-page-button.wpforms-page-prev {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Lato', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #004953 !important;
  text-shadow: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1.5px solid #004953 !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;
  transition:
    background-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    color 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
div.wpforms-container-full .wpforms-page-button.wpforms-page-prev:hover,
div.wpforms-container-full .wpforms-page-button.wpforms-page-prev:active,
div.wpforms-container-full button.wpforms-page-button.wpforms-page-prev:hover {
  background-color: #004953 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Conteneur submit / barre de pagination : alignement aéré */
div.wpforms-container-full .wpforms-submit-container {
  margin-top: 12px;
  text-align: center;
}
div.wpforms-container-full .wpforms-field-pagebreak {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
div.wpforms-container-full .wpforms-pagebreak-left {
  justify-content: flex-start;
}
div.wpforms-container-full .wpforms-pagebreak-center {
  justify-content: center;
}
div.wpforms-container-full .wpforms-pagebreak-right {
  justify-content: flex-end;
}

/* Spinner d'envoi : on le laisse fonctionner, juste l'alignement */
div.wpforms-container-full .wpforms-submit-spinner {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}


/* =============================================================================
   7. CHAMP FICHIER (upload simple + zone moderne « dropzone »)
   ========================================================================== */
div.wpforms-container-full .wpforms-field-file-upload input[type="file"] {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: #404040;
  background: #FFFFFF;
  border: 1px dashed #C4C4C4;
  border-radius: 12px;
  padding: 14px 16px;
  width: 100%;
  cursor: pointer;
  transition:
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
div.wpforms-container-full .wpforms-field-file-upload input[type="file"]:hover {
  border-color: #00B77F;
  background: #E6F8F0;
}

/* Le bouton « Parcourir » natif (WebKit) */
div.wpforms-container-full .wpforms-field-file-upload input[type="file"]::-webkit-file-upload-button {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #00B77F 0%, #00C588 100%);
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  margin-right: 14px;
  cursor: pointer;
}

/* Zone moderne « glisser-déposer » (wpforms-dropzone / modern upload) */
div.wpforms-container-full .dropzone,
div.wpforms-container-full .wpforms-uploader {
  background: #FBF7EF;
  border: 1.5px dashed rgba(0, 73, 83, 0.30);
  border-radius: 16px;
  color: #555555;
  transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
div.wpforms-container-full .dropzone:hover,
div.wpforms-container-full .wpforms-uploader.is-active {
  border-color: #00B77F;
  background: #E6F8F0;
}
div.wpforms-container-full .dz-message,
div.wpforms-container-full .wpforms-uploader-text {
  color: #004953;
  font-weight: 700;
}
/* Vignettes de fichiers déjà ajoutés */
div.wpforms-container-full .dz-preview .dz-image,
div.wpforms-container-full .wpforms-file-item {
  border-radius: 10px;
}


/* =============================================================================
   8. STRIPE — CARTE BANCAIRE
   On habille l'encadré qui contient l'iframe Stripe (le contenu de l'iframe
   reste stylé par Stripe ; on ne touche qu'au cadre côté WPForms).
   ========================================================================== */
div.wpforms-container-full .wpforms-field-stripe-credit-card-cardnumber,
div.wpforms-container-full .wpforms-field-stripe-credit-card-cardexpiry,
div.wpforms-container-full .wpforms-field-stripe-credit-card-cardcvc,
div.wpforms-container-full .wpforms-stripe-credit-card .StripeElement,
div.wpforms-container-full .__PrivateStripeElement,
div.wpforms-container-full #wpforms-field-stripe-credit-card {
  background: #FFFFFF;
  border: 1px solid #C4C4C4;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: inset 0 1px 2px rgba(0, 27, 36, 0.04);
  transition:
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* État focus piloté par Stripe (.StripeElement--focus) */
div.wpforms-container-full .StripeElement--focus,
div.wpforms-container-full .wpforms-stripe-credit-card .StripeElement--focus {
  border-color: #00B77F;
  box-shadow: 0 0 0 3px rgba(0, 183, 127, 0.16);
}
/* État erreur Stripe */
div.wpforms-container-full .StripeElement--invalid {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
/* Sous-libellés des champs Stripe (Numéro / Expiration / CVC) */
div.wpforms-container-full .wpforms-field-credit-card .wpforms-field-sublabel,
div.wpforms-container-full .wpforms-field-stripe-credit-card .wpforms-field-sublabel {
  color: #6B6B6B;
}


/* =============================================================================
   9. TOTAL DE PAIEMENT & PRIX
   ========================================================================== */
/* Ligne « Total » (.wpforms-payment-total) : encart vert/or discret */
div.wpforms-container-full .wpforms-payment-total {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #004953;
  background: linear-gradient(135deg, rgba(0, 183, 127, 0.10) 0%, rgba(200, 160, 24, 0.06) 100%);
  border: 1px solid rgba(0, 183, 127, 0.22);
  border-radius: 12px;
  padding: 10px 18px;
}
/* Prix affiché à côté des options de paiement */
div.wpforms-container-full .wpforms-payment-price {
  font-weight: 700;
  color: #8A6010;
}
/* Champ « Total » quand il est rendu comme input (lecture seule) */
div.wpforms-container-full .wpforms-field-payment-total input[readonly],
div.wpforms-container-full input.wpforms-payment-total[readonly] {
  background: #FBF7EF;
  font-weight: 900;
  color: #004953;
}


/* =============================================================================
   10. SÉPARATEUR / DIVIDER
   ========================================================================== */
div.wpforms-container-full .wpforms-field-divider {
  border-top: 1px solid rgba(0, 73, 83, 0.12);
  padding-top: 18px;
  margin-top: 6px;
}
div.wpforms-container-full .wpforms-field-divider h3,
div.wpforms-container-full .wpforms-field-divider label {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  color: #004953;
  letter-spacing: -0.01em;
}


/* =============================================================================
   11. MESSAGES D'ERREUR & VALIDATION (rouge sobre)
   ========================================================================== */
/* Texte d'erreur sous un champ */
div.wpforms-container-full label.wpforms-error,
div.wpforms-container-full em.wpforms-error,
div.wpforms-container-full .wpforms-error {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #C0392B;
  margin-top: 6px;
  display: block;
}

/* Champ en erreur : bordure rouge + halo discret */
div.wpforms-container-full .wpforms-field input.wpforms-error,
div.wpforms-container-full .wpforms-field textarea.wpforms-error,
div.wpforms-container-full .wpforms-field select.wpforms-error,
div.wpforms-container-full .wpforms-field input.user-invalid,
div.wpforms-container-full .wpforms-field-stripe-credit-card.wpforms-error {
  border-color: #C0392B !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;
  background-color: #FFFFFF;
}

/* Option (radio/checkbox) signalée en erreur : liseré rouge sur la carte */
div.wpforms-container-full .wpforms-field-radio.wpforms-has-error ul li,
div.wpforms-container-full .wpforms-field-checkbox.wpforms-has-error ul li {
  border-color: rgba(192, 57, 43, 0.45);
}

/* Bandeau d'erreur global (en-tête de formulaire après échec submit) */
div.wpforms-container-full .wpforms-error-container,
div.wpforms-container-full .wpforms-error-alert {
  background: #FBF7EF;
  border: 1px solid rgba(192, 57, 43, 0.35);
  border-left: 4px solid #C0392B;
  border-radius: 12px;
  padding: 14px 18px;
  color: #C0392B;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Message de confirmation (succès) après envoi */
div.wpforms-confirmation-container-full {
  background: linear-gradient(135deg, #E6F8F0 0%, #FBF7EF 100%);
  border: 1px solid rgba(0, 183, 127, 0.25);
  border-left: 4px solid #00B77F;
  border-radius: 16px;
  padding: 22px 26px;
  color: #004953;
  font-family: 'Lato', sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
}
div.wpforms-confirmation-container-full p {
  margin: 0 0 10px;
}
div.wpforms-confirmation-container-full p:last-child {
  margin-bottom: 0;
}


/* =============================================================================
   12. DIVERS (coupons, reCAPTCHA, save & resume) — alignement sobre
   ========================================================================== */
/* Champ coupon */
div.wpforms-container-full .wpforms-coupon-field input {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Conteneur reCAPTCHA : un peu d'air */
div.wpforms-container-full .wpforms-recaptcha-container {
  margin: 8px 0 18px;
}
/* Liens « Enregistrer et continuer plus tard » (save & resume) */
div.wpforms-container-full .wpforms-save-resume a,
div.wpforms-container-full .wpforms-save-resume button {
  color: #004953;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(0, 183, 127, 0.6);
  text-underline-offset: 3px;
}
div.wpforms-container-full .wpforms-save-resume a:hover {
  color: #00B77F;
}


/* =============================================================================
   13. RESPONSIVE — petits écrans
   ========================================================================== */
@media (max-width: 600px) {
  div.wpforms-container .wpforms-form,
  div.wpforms-container-full .wpforms-form {
    padding: 18px 16px;
    border-radius: 16px;
  }
  div.wpforms-container-full .wpforms-page-button,
  div.wpforms-container-full .wpforms-submit {
    width: 100%;
  }
  div.wpforms-container-full .wpforms-page-indicator.circles {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* === Contexte iframe / page Canvas embed: fond transparent (la carte du form flotte sur la page produit) === */
html body.elementor-template-canvas, body.elementor-template-canvas { background: transparent !important; }
body.elementor-template-canvas .wpforms-container, body.elementor-template-canvas div.wpforms-container-full { margin-block: 0; }
/* === Page Canvas d'embed (theme Phlox-Pro + Elementor) : neutraliser les conteneurs boxed/blancs
   autour du formulaire (e-con-boxed, aux-parallax-section, widgets, wpforms-container) pour ne
   garder QUE la carte du formulaire, posee sur le fond de la page produit === */
body.elementor-template-canvas .elementor,
body.elementor-template-canvas [class*="elementor-element"],
body.elementor-template-canvas .e-con,
body.elementor-template-canvas .e-con-inner,
body.elementor-template-canvas .e-con-boxed,
body.elementor-template-canvas .aux-parallax-section,
body.elementor-template-canvas .elementor-widget-shortcode,
body.elementor-template-canvas .elementor-widget-container,
body.elementor-template-canvas .elementor-shortcode,
body.elementor-template-canvas .wpforms-container,
body.elementor-template-canvas div.wpforms-container-full {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.elementor-template-canvas .e-con-boxed,
body.elementor-template-canvas .e-con-inner { padding-top: 10px !important; padding-bottom: 10px !important; }
/* === Cases cochees / radios selectionnes : forcer le vert ADN (le theme force le rouge sur l'etat :checked) === */
div.wpforms-container-full .wpforms-field input[type="checkbox"]:checked,
div.wpforms-container-full .wpforms-field input[type="radio"]:checked,
div.wpforms-container-full .wpforms-field-checkbox input:checked,
div.wpforms-container-full .wpforms-field-radio input:checked,
div.wpforms-container-full .wpforms-field-payment-checkbox input:checked,
div.wpforms-container-full .wpforms-field-payment-multiple input:checked {
  accent-color: #00B77F !important;
  border-color: #00B77F !important;
  outline-color: #00B77F !important;
  box-shadow: 0 0 0 2px rgba(0, 183, 127, 0.20) !important;
}
/* === On NE force PLUS le rendu natif : le client preferait l'ancien style custom du
   theme, simplement VERT au lieu de ROUGE. On garde donc le style du theme et on se
   contente d'aligner accent-color ; la recoloration rouge->vert du ::before coche est
   faite en section 16 ci-dessous. === */
div.wpforms-container-full .wpforms-field-checkbox input[type="checkbox"],
div.wpforms-container-full .wpforms-field-radio input[type="radio"],
div.wpforms-container-full .wpforms-field-payment-checkbox input[type="checkbox"],
div.wpforms-container-full .wpforms-field-payment-multiple input[type="radio"] {
  accent-color: #00B77F !important;
}

/* === Champs texte / textarea / select : pleine largeur (ignorer les tailles medium/small de WPForms) === */
div.wpforms-container-full .wpforms-field-small,
div.wpforms-container-full .wpforms-field-medium,
div.wpforms-container-full .wpforms-field-large { max-width: 100% !important; }
div.wpforms-container-full .wpforms-field input[type="text"],
div.wpforms-container-full .wpforms-field input[type="email"],
div.wpforms-container-full .wpforms-field input[type="tel"],
div.wpforms-container-full .wpforms-field input[type="url"],
div.wpforms-container-full .wpforms-field input[type="number"],
div.wpforms-container-full .wpforms-field textarea,
div.wpforms-container-full .wpforms-field select { max-width: 100% !important; width: 100% !important; }
/* === Toute la carte d'option (radio/checkbox) cliquable, pas seulement le texte/la puce === */
div.wpforms-container-full .wpforms-field-radio ul li,
div.wpforms-container-full .wpforms-field-checkbox ul li,
div.wpforms-container-full .wpforms-field-payment-multiple ul li,
div.wpforms-container-full .wpforms-field-payment-checkbox ul li { position: relative; }
div.wpforms-container-full .wpforms-field-radio ul li .wpforms-field-label-inline,
div.wpforms-container-full .wpforms-field-checkbox ul li .wpforms-field-label-inline,
div.wpforms-container-full .wpforms-field-payment-multiple ul li .wpforms-field-label-inline,
div.wpforms-container-full .wpforms-field-payment-checkbox ul li .wpforms-field-label-inline {
  flex: 1;
  position: static !important; /* CLÉ : empêche le label d'être l'ancêtre positionné, pour que l'overlay ::before se cale sur toute la carte option et pas seulement sur le texte */
}
/* La case/puce reste cliquable directement (au-dessus de l'overlay) + focus visible */
div.wpforms-container-full .wpforms-field-radio ul li input[type="radio"],
div.wpforms-container-full .wpforms-field-checkbox ul li input[type="checkbox"],
div.wpforms-container-full .wpforms-field-payment-multiple ul li input[type="radio"],
div.wpforms-container-full .wpforms-field-payment-checkbox ul li input[type="checkbox"] {
  position: relative;
  z-index: 2;
}
/* Overlay invisible qui couvre TOUTE la carte et déclenche le label (donc l'input via for=) */
div.wpforms-container-full .wpforms-field-radio ul li .wpforms-field-label-inline::before,
div.wpforms-container-full .wpforms-field-checkbox ul li .wpforms-field-label-inline::before,
div.wpforms-container-full .wpforms-field-payment-multiple ul li .wpforms-field-label-inline::before,
div.wpforms-container-full .wpforms-field-payment-checkbox ul li .wpforms-field-label-inline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

/* =============================================================================
   14. LARGEUR — formulaire pleine largeur dans l'iframe Canvas
   Elementor/Phlox plafonnent la largeur du contenu (--content-width des e-con).
   Dans le contexte d'embed (body.elementor-template-canvas), on libère la largeur
   pour que la carte du formulaire occupe toute la largeur de l'iframe (plus aéré).
   ========================================================================== */
body.elementor-template-canvas .e-con,
body.elementor-template-canvas .e-con-inner,
body.elementor-template-canvas .e-con-boxed,
body.elementor-template-canvas .elementor-widget-container,
body.elementor-template-canvas .elementor-widget-shortcode,
body.elementor-template-canvas .elementor-shortcode,
body.elementor-template-canvas .wpforms-container,
body.elementor-template-canvas div.wpforms-container-full,
body.elementor-template-canvas .wpforms-form {
  max-width: 100% !important;
  width: 100% !important;
  margin-inline: 0 !important;
}
body.elementor-template-canvas .e-con,
body.elementor-template-canvas .e-con-boxed { --content-width: 100% !important; }


/* =============================================================================
   15. MASQUER LE WIDGET DE CHAT FLOTTANT (Chaty / Premio) DANS L'IFRAME
   Le template Canvas retire en-tête/pied mais les plugins injectés via wp_footer
   (chat flottant « Contact us ») s'affichent quand même DANS l'iframe d'embed et
   chevauchent le formulaire. On le masque uniquement dans ce contexte (il reste
   visible sur les pages normales du site).
   NB : le plus propre reste d'EXCLURE ces pages d'embed dans les réglages du
   plugin de chat — ce CSS est un filet de sécurité.
   ========================================================================== */
body.elementor-template-canvas #chaty-widget,
body.elementor-template-canvas .chaty-widget,
body.elementor-template-canvas .chaty-widgets-container,
body.elementor-template-canvas [id^="chaty"],
body.elementor-template-canvas [class^="chaty-"],
body.elementor-template-canvas [class*=" chaty-"],
body.elementor-template-canvas .chaty-svg,
body.elementor-template-canvas .chaty-channel,
body.elementor-template-canvas .wb_chaty,
body.elementor-template-canvas #wb-chaty,
body.elementor-template-canvas #pop-up-tab,
body.elementor-template-canvas div[id^="pop-up-"] {
  display: none !important;
}


/* =============================================================================
   16. CASE / RADIO COCHÉE — RECOLORER LE ROUGE DU THÈME EN VERT ADN
   Le thème dessine un ::before sur l'état :checked avec border-color:#ff0000 +
   box-shadow ROUGE. On garde EXACTEMENT ce style (l'ancien rendu que le client
   préférait) et on remplace juste le rouge par le vert vif #00B77F.
   (inverse strict de la règle du thème : border-color #ff0000 -> #00B77F, idem box-shadow)
   ========================================================================== */
div.wpforms-container-full input[type="checkbox"]:checked::before,
div.wpforms-container-full input[type="radio"]:checked::before,
div.wpforms-container-full .wpforms-field-checkbox input:checked::before,
div.wpforms-container-full .wpforms-field-radio input:checked::before,
div.wpforms-container-full .wpforms-field-payment-checkbox input:checked::before,
div.wpforms-container-full .wpforms-field-payment-multiple input:checked::before,
body.elementor-template-canvas input[type="checkbox"]:checked::before,
body.elementor-template-canvas input[type="radio"]:checked::before {
  border-color: #00B77F !important;
  box-shadow: 0 0 0 1px #00B77F, 0px 1px 2px rgba(0, 0, 0, 0.15) !important;
}
/* Le thème colore aussi le ::after (point intérieur du radio / remplissage de la coche) en ROUGE — on le passe au vert ADN */
div.wpforms-container-full input[type="radio"]:checked::after,
div.wpforms-container-full .wpforms-field-radio input[type="radio"]:checked::after,
div.wpforms-container-full .wpforms-field-payment-multiple input[type="radio"]:checked::after,
body.elementor-template-canvas input[type="radio"]:checked::after,
div.wpforms-container-full input[type="checkbox"]:checked::after,
div.wpforms-container-full .wpforms-field-checkbox input[type="checkbox"]:checked::after,
div.wpforms-container-full .wpforms-field-payment-checkbox input[type="checkbox"]:checked::after,
body.elementor-template-canvas input[type="checkbox"]:checked::after {
  background-color: #00B77F !important;
}
/* Si le thème colore aussi le fond/la bordure de l'input coché en rouge, on l'aligne en vert */
div.wpforms-container-full .wpforms-field-checkbox input[type="checkbox"]:checked,
div.wpforms-container-full .wpforms-field-radio input[type="radio"]:checked {
  border-color: #00B77F !important;
}


/* =============================================================================
   17. CHAMP TÉLÉPHONE (intl-tel-input) — laisser la place au drapeau
   Le sélecteur de pays (drapeau + flèche) est positionné en absolu à gauche de
   l'input ; sans padding-left suffisant, il chevauche le numéro (cf. capture).
   ========================================================================== */
div.wpforms-container-full .iti { display: block; width: 100%; position: relative; }
div.wpforms-container-full .iti > input,
div.wpforms-container-full .iti input[type="tel"],
div.wpforms-container-full .iti input[type="text"] {
  padding-left: 52px !important;
}
div.wpforms-container-full .iti--separate-dial-code input { padding-left: 92px !important; }
div.wpforms-container-full .iti__flag-container,
div.wpforms-container-full .iti__country-container { z-index: 3; }