/* ======================================================
   COMPONENT — C-FLUENT-FORM.CSS
   ======================================================

   Intégration Fluent Forms dans l’univers graphique WS.

   Objectifs :
   - Hériter de la typographie du site
   - Uniformiser champs + textarea + boutons
   - Harmoniser avec le footer/newsletter
   - Garder un rendu propre dans Gutenberg
   - Neutraliser les styles natifs Fluent Forms

   Compatible :
   - Footer newsletter
   - Formulaires de contact
   - Formulaires inline
   - Colonnes Gutenberg

   ====================================================== */


/* ======================================================
   VARIABLES
   ====================================================== */

:root{

  /* Texte */
  --ws-form-text: var(--wp--preset--color--contrast, #2b1f18);
  --ws-form-muted: rgba(43, 31, 24, .62);

  /* Champs */
  --ws-form-bg: rgba(255,255,255,.72);
  --ws-form-border: rgba(43, 31, 24, .16);
  --ws-form-border-focus: var(--ws-color-orange, #c9784a);

  /* Radius */
  --ws-form-radius: 18px;
  --ws-form-radius-pill: 999px;

  /* Dimensions */
  --ws-form-input-height: 48px;

  /* Boutons */
  --ws-form-button-bg: var(--ws-footer-button-bg, #5d6f4f);
  --ws-form-button-bg-hover: var(--ws-footer-button-bg-hover, #c9784a);
  --ws-form-button-text: var(--ws-footer-button-text, #ffffff);

  /* Focus ring */
  --ws-form-focus-ring: rgba(201,120,74,.18);

}


/* ======================================================
   WRAPPER GÉNÉRAL
   ====================================================== */

.fluentform,
.fluentform_wrapper,
.ff-default{

  font-family: inherit !important;
  color: var(--ws-form-text);

}


/* ======================================================
   GROUPES / ESPACEMENTS
   ====================================================== */

.fluentform .ff-el-group{
  margin-bottom: 20px;
}


/* ======================================================
   LABELS
   ====================================================== */

.fluentform label,
.fluentform .ff-el-input--label label{

  color: var(--ws-form-text);

  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.4;

}


/* ======================================================
   INPUTS
   ====================================================== */

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform input[type="password"],
.fluentform input[type="search"],
.fluentform select,
.fluentform .ff-el-form-control{

  width: 100%;

  min-height: var(--ws-form-input-height);

  padding: 0 18px;

  border: 1px solid var(--ws-form-border) !important;
  border-radius: var(--ws-form-radius-pill) !important;

  background: var(--ws-form-bg) !important;

  color: var(--ws-form-text) !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: 1.4;

  box-shadow: none !important;

  outline: none;

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;

}


/* ======================================================
   TEXTAREA
   ====================================================== */

.fluentform textarea,
.fluentform textarea.ff-el-form-control,
.fluentform .ff-el-form-control textarea{

  width: 100%;

  min-height: 160px;

  padding: 14px 18px;

  border: 1px solid var(--ws-form-border) !important;
  border-radius: var(--ws-form-radius) !important;

  background: var(--ws-form-bg) !important;

  color: var(--ws-form-text) !important;

  font-family: inherit !important;
  font-size: inherit !important;
  line-height: 1.7;

  box-shadow: none !important;

  resize: vertical;

  outline: none;

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;

}


/* ======================================================
   PLACEHOLDERS
   ====================================================== */

.fluentform input::placeholder,
.fluentform textarea::placeholder{

  color: var(--ws-form-muted);
  opacity: 1;

}


/* ======================================================
   FOCUS
   ====================================================== */

.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus,
.fluentform .ff-el-form-control:focus{

  border-color: var(--ws-form-border-focus) !important;

  box-shadow:
    0 0 0 3px var(--ws-form-focus-ring) !important;

}


/* ======================================================
   CHECKBOX / RADIO
   ====================================================== */

.fluentform input[type="checkbox"],
.fluentform input[type="radio"]{

  accent-color: var(--ws-form-button-bg);

}


/* ======================================================
   BOUTONS
   ====================================================== */

.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform .ff_btn_style,
.fluentform button[type="submit"],
.fluentform input[type="submit"]{

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-height: var(--ws-form-input-height);

  padding: 10px 22px !important;

  border: 0 !important;
  border-radius: var(--ws-form-radius-pill) !important;

  background: var(--ws-form-button-bg) !important;
  color: var(--ws-form-button-text) !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  cursor: pointer;

  box-shadow: none !important;

  text-decoration: none !important;

  opacity: 1 !important;

  transition:
    background-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;

}


/* ======================================================
   HOVER / FOCUS BOUTONS
   ====================================================== */

.fluentform .ff-btn:hover,
.fluentform .ff-btn-submit:hover,
.fluentform .ff_btn_style:hover,
.fluentform button[type="submit"]:hover,
.fluentform input[type="submit"]:hover,

.fluentform .ff-btn:focus-visible,
.fluentform .ff-btn-submit:focus-visible,
.fluentform .ff_btn_style:focus-visible,
.fluentform button[type="submit"]:focus-visible,
.fluentform input[type="submit"]:focus-visible{

  background: var(--ws-form-button-bg-hover) !important;

  color: var(--ws-form-button-text) !important;

  opacity: 1 !important;

  transform: translateY(-1px);

  outline: none !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.08),
    0 0 0 3px rgba(255,255,255,.12);

}


/* ======================================================
   ACTIVE
   ====================================================== */

.fluentform .ff-btn:active,
.fluentform .ff-btn-submit:active,
.fluentform .ff_btn_style:active{

  transform: translateY(0);

}


/* ======================================================
   ERREURS
   ====================================================== */

.fluentform .text-danger,
.fluentform .error,
.fluentform .ff-el-is-error .text-danger{

  color: #9b2f22;

  font-size: .92em;

}


/* ======================================================
   MESSAGE DE SUCCÈS
   ====================================================== */

.fluentform .ff-message-success{

  padding: 16px 20px;

  border: 1px solid rgba(93,111,79,.18);
  border-radius: var(--ws-form-radius);

  background: rgba(93,111,79,.08);

  color: var(--ws-form-text);

}


/* ======================================================
   NEWSLETTER FOOTER
   ====================================================== */

.ws-footer__newsletter .fluentform .ff-el-group{
  margin-bottom: 0;
}

.ws-footer__newsletter .fluentform .ff-t-container{
  gap: 10px;
  align-items: stretch;
}


/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 640px){

  .ws-footer__newsletter .fluentform .ff-t-container{
    display: block;
  }

  .ws-footer__newsletter .fluentform .ff-t-cell{
    width: 100% !important;
    margin-bottom: 10px;
  }

  .ws-footer__newsletter .fluentform button[type="submit"],
  .ws-footer__newsletter .fluentform .ff-btn-submit{
    width: 100%;
  }

}