/* =====================================================================
   formulaires.css — habillage des formulaires Fluent Forms
   ---------------------------------------------------------------------
   Fichier dedie, cree le 2026-08-14 pour le passage de Contact Form 7 a
   Fluent Forms (extension editable visuellement par le client).
   Il NE contient QUE des selecteurs propres au balisage Fluent Forms
   (.frm-fluent-form, .ff-*), donc il ne peut pas toucher les pages
   restees en CF7 (21, 23, 150, 151).
   Charge par functions.php sur les pages 21/23/149/150/151 uniquement,
   apres style.css et apres les 2 feuilles de Fluent Forms.
   ATTENTION : Kadence (content.min.css) est imprime APRES ce fichier —
   toute regle doit peser au moins 2 classes + 1 element pour gagner.
   Reference geometrique : le rendu CF7 du meme formulaire, mesure au CDP
   en 1440 / 1024 / 820 / 390 px avant la bascule.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Remise a zero des reglages Fluent Forms
   --------------------------------------------------------------------- */
.form-card .fluentform,
.form-card .frm-fluent-form {
  font-family: var(--font-sans);
}

/* la legende lecteur d'ecran et le pot de miel ne doivent rien occuper */
.form-card .frm-fluent-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 100%;
}

/* espacement vertical d'un champ : identique au <p> que produisait CF7 */
.form-card .frm-fluent-form .ff-el-group {
  margin: 0 0 1.1rem;
}

.form-card .frm-fluent-form .ff-t-container .ff-el-group {
  margin-bottom: 1.1rem;
}

/* ---------------------------------------------------------------------
   2. Libelles
   --------------------------------------------------------------------- */
.form-card .frm-fluent-form .ff-el-input--label {
  display: block;
  margin: 0;
  padding: 0;
  float: none;
  text-align: left;
  position: static;
}

.form-card .frm-fluent-form .ff-el-input--label label {
  display: block;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}

/* pas d'asterisque : CF7 n'en affichait pas (reglage « None » cote Fluent Forms,
   cette regle n'est qu'une ceinture si le client le reactive par erreur) */
.form-card .frm-fluent-form .ff-el-input--label.ff-el-is-required label::after,
.form-card .frm-fluent-form .ff-el-input--label.ff-el-is-required label::before {
  content: none;
}

.form-card .frm-fluent-form .ff-el-input--content {
  margin: 0.4rem 0 0;
}

/* ---------------------------------------------------------------------
   3. Champs de saisie
   --------------------------------------------------------------------- */
.form-card .frm-fluent-form input[type="text"],
.form-card .frm-fluent-form input[type="email"],
.form-card .frm-fluent-form input[type="tel"],
.form-card .frm-fluent-form input[type="url"],
.form-card .frm-fluent-form input[type="number"],
.form-card .frm-fluent-form select,
.form-card .frm-fluent-form textarea {
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  background-image: none;
  box-shadow: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* La zone de texte reste en ligne (comme sous CF7) : c'est ce qui cree
   le liseré de 6 px sous le champ, mesure a l'identique sur les 4 largeurs. */
.form-card .frm-fluent-form textarea {
  min-height: 0;
  resize: vertical;
  display: inline-block;
  vertical-align: baseline;
}

/* La liste deroulante refuse la hauteur de ligne heritee du bloc ci-dessus
   (une regle plus specifique la remet a « normal ») : 3 classes ici pour
   retrouver exactement la hauteur de 51,9 px des autres champs. */
.form-card .frm-fluent-form select.ff-el-form-control,
.form-card .frm-fluent-form select {
  height: auto;
  line-height: 1.6;
  appearance: auto;
  -webkit-appearance: auto;
}

.form-card .frm-fluent-form input:focus,
.form-card .frm-fluent-form select:focus,
.form-card .frm-fluent-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(217, 180, 33, 0.16);
}

/* ---------------------------------------------------------------------
   4. Grille 2 colonnes — colonnes natives de Fluent Forms
   Points de rupture du site : 620 px, et 782-1024 px (tablette paysage).
   Fluent Forms raisonne en 768/767 px : ses regles sont neutralisees ici.
   --------------------------------------------------------------------- */
.form-card .frm-fluent-form .ff-t-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.1rem;
  width: 100%;
  margin: 0;
}

.form-card .frm-fluent-form .ff-t-container > .ff-t-cell {
  display: block;
  width: auto !important;
  max-width: none;
  min-width: 0;
  flex-basis: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* CF7 mettait ses 4 champs dans un seul bloc, et son dernier <p> perdait sa
   marge basse (regle p:last-child). Equivalent ici : le dernier champ de la
   seconde rangee. Sans cela l'empilement en 1 colonne gagne 17,6 px. */
.form-card .frm-fluent-form .ff-t-container + .ff-t-container > .ff-t-cell:last-child > .ff-el-group {
  margin-bottom: 0;
}

@media (max-width: 620px) {
  .form-card .frm-fluent-form .ff-t-container {
    grid-template-columns: 1fr;
  }
}

/* Tablette : colonnes trop serrees -> une seule colonne de champs
   (meme regle que la version CF7 dans style.css) */
@media (max-width: 1024px) and (min-width: 782px) {
  .form-card .frm-fluent-form .ff-t-container {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   5. Sous-section « Votre projet » (bloc HTML personnalise)
   --------------------------------------------------------------------- */
.form-card .frm-fluent-form .ff-el-group.ff-custom_html {
  margin: 0;
  padding: 0;
  outline: none;
}

.form-card .frm-fluent-form .ff-el-group.ff-custom_html > .overline {
  margin: 0 0 1.1rem;
}

/* ---------------------------------------------------------------------
   6. Cases a cocher « Documents deja en votre possession »
   Rendu repris a l'identique de CF7 : items empiles, texte en petites
   capitales espacees, case doree.
   --------------------------------------------------------------------- */
.form-card .frm-fluent-form .cf-checklist .ff-el-input--content {
  margin-top: 0.4rem;
}

/* Hauteur d'un item : 22,6 px sous CF7 (boite alignee sur la ligne de base).
   La disposition en flex vaut 20,4 px : les 2,2 px manquants sont rendus ici,
   et le dernier item perd sa marge basse comme sous CF7. */
.form-card .frm-fluent-form .cf-checklist .ff-el-form-check {
  display: block;
  float: none !important;
  width: auto !important;
  position: static;
  margin: 0 0 0.5rem;
  padding-bottom: 2.2px;
}

.form-card .frm-fluent-form .cf-checklist .ff-el-form-check:last-child {
  margin-bottom: 0;
}

.form-card .frm-fluent-form .cf-checklist .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.7;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.form-card .frm-fluent-form .cf-checklist .ff-el-form-check-label > span {
  display: block;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  white-space: normal;
  min-height: 1.7em;
}

.form-card .frm-fluent-form .cf-checklist input[type="checkbox"] {
  position: static;
  opacity: 1;
  z-index: auto;
  top: 0;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin: 0.2rem 0 0;
  accent-color: var(--gold);
  vertical-align: baseline;
}

/* ---------------------------------------------------------------------
   7. Acceptation RGPD
   --------------------------------------------------------------------- */
.form-card .frm-fluent-form .cf-rgpd .ff-el-input--content {
  margin-top: 0;
}

.form-card .frm-fluent-form .cf-rgpd .ff-el-form-check {
  display: block;
  float: none !important;
  width: auto !important;
  position: static;
  margin: 0 0 0 1em;
  font-size: 0.82rem;
}

.form-card .frm-fluent-form .cf-rgpd .ff-el-form-check-label {
  display: block;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.7;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
}

.form-card .frm-fluent-form .cf-rgpd .ff-el-form-check-label > span {
  display: inline;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  white-space: normal;
  vertical-align: baseline;
}

.form-card .frm-fluent-form .cf-rgpd input[type="checkbox"] {
  position: static;
  opacity: 1;
  z-index: auto;
  top: 0;
  width: 13px;
  height: 13px;
  margin: 0 0.4rem 0 0;
  accent-color: var(--gold);
  vertical-align: baseline;
}

/* ---------------------------------------------------------------------
   8. Bouton d'envoi
   CF7 rendait <input type="submit">, Fluent Forms rend <button> :
   les cinq regles de bouton sont refaites ici de zero.
   --------------------------------------------------------------------- */
.form-card .frm-fluent-form .ff_submit_btn_wrapper {
  margin: 0;
  text-align: left;
}

.form-card .frm-fluent-form button.ff-btn-submit,
.form-card .frm-fluent-form .ff_submit_btn_wrapper button {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: auto;
  min-width: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  padding: 0.9rem 2.4rem;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  cursor: pointer;
  opacity: 1;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
              transform 0.3s var(--ease-lux), box-shadow 0.3s ease;
}

.form-card .frm-fluent-form button.ff-btn-submit:hover,
.form-card .frm-fluent-form button.ff-btn-submit:focus {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(10, 10, 10, 0.16);
}

.form-card .frm-fluent-form button.ff-btn-submit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* indicateur de chargement : equivalent du .wpcf7-spinner de CF7,
   ici la barre animee que Fluent Forms pose sur le bouton */
.form-card .frm-fluent-form button.ff-btn-submit.ff-working::after {
  background: rgba(255, 255, 255, 0.55);
  height: 4px;
}

.form-card .frm-fluent-form button.ff-btn-submit.ff-working {
  transform: none;
}

/* ---------------------------------------------------------------------
   9. Messages : erreur de champ, reponse globale
   --------------------------------------------------------------------- */
.form-card .frm-fluent-form .ff-el-is-error .text-danger,
.form-card .frm-fluent-form .error.text-danger {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: #B3261E;
  margin-top: 0.3rem;
}

.form-card .frm-fluent-form .ff-el-is-error input,
.form-card .frm-fluent-form .ff-el-is-error select,
.form-card .frm-fluent-form .ff-el-is-error textarea {
  border-color: #B3261E;
}

.form-card .ff-errors-in-stack .error,
.form-card .ff-message-success,
.form-card .ff_form_instance_error {
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  margin: 1rem 0 0;
  box-shadow: none;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink);
  background: transparent;
}

.form-card .ff-message-success p {
  margin: 0;
}

.form-card .ff-errors-in-stack {
  margin: 0;
}

/* ---------------------------------------------------------------------
   10. Variante sombre (bande noire en bas de page)
   --------------------------------------------------------------------- */
.form-card.form-card--dark .frm-fluent-form .ff-el-input--label label {
  color: rgba(255, 255, 255, 0.55);
}

.form-card.form-card--dark .frm-fluent-form input[type="text"],
.form-card.form-card--dark .frm-fluent-form input[type="email"],
.form-card.form-card--dark .frm-fluent-form input[type="tel"],
.form-card.form-card--dark .frm-fluent-form input[type="url"],
.form-card.form-card--dark .frm-fluent-form input[type="number"],
.form-card.form-card--dark .frm-fluent-form select,
.form-card.form-card--dark .frm-fluent-form textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.form-card.form-card--dark .frm-fluent-form input::placeholder,
.form-card.form-card--dark .frm-fluent-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.form-card.form-card--dark .frm-fluent-form select option {
  background: #14120F;
  color: #fff;
}

.form-card.form-card--dark .frm-fluent-form input:focus,
.form-card.form-card--dark .frm-fluent-form select:focus,
.form-card.form-card--dark .frm-fluent-form textarea:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 180, 33, 0.2);
}

.form-card.form-card--dark .frm-fluent-form .cf-checklist .ff-el-form-check-label,
.form-card.form-card--dark .frm-fluent-form .cf-rgpd .ff-el-form-check-label {
  color: rgba(255, 255, 255, 0.55);
}

.form-card.form-card--dark .frm-fluent-form button.ff-btn-submit,
.form-card.form-card--dark .frm-fluent-form .ff_submit_btn_wrapper button {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.form-card.form-card--dark .frm-fluent-form button.ff-btn-submit:hover,
.form-card.form-card--dark .frm-fluent-form button.ff-btn-submit:focus {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.form-card.form-card--dark .ff-errors-in-stack .error,
.form-card.form-card--dark .ff-message-success,
.form-card.form-card--dark .ff_form_instance_error {
  color: rgba(255, 255, 255, 0.85);
}

.form-card.form-card--dark .frm-fluent-form .ff-el-is-error .text-danger,
.form-card.form-card--dark .frm-fluent-form .error.text-danger {
  color: #E97B72;
}

.form-card.form-card--dark .frm-fluent-form .ff-el-is-error input,
.form-card.form-card--dark .frm-fluent-form .ff-el-is-error select,
.form-card.form-card--dark .frm-fluent-form .ff-el-is-error textarea {
  border-color: #E97B72;
}

/* ---------------------------------------------------------------------
   11. Mobile — memes seuils que la version CF7
   --------------------------------------------------------------------- */
@media (max-width: 620px) {
  .form-card .frm-fluent-form button.ff-btn-submit,
  .form-card .frm-fluent-form .ff_submit_btn_wrapper button {
    width: 100%;
    display: block;
  }
}

/* ---------------------------------------------------------------------
   12. Types de champs generiques — ajoutes depuis le back-office
   ---------------------------------------------------------------------
   Les sections precedentes ciblent des champs precis par leur classe
   (.cf-checklist, .cf-rgpd...). Un champ AJOUTE par le client depuis le
   constructeur Fluent Forms n'a aucune de ces classes : sans ce qui suit,
   il sortirait au style par defaut de l'extension, hors charte.
   Specificite volontairement PLUS FAIBLE que les regles ci-dessus, pour
   qu'elles continuent de gagner sur les champs qu'elles visent.
   --------------------------------------------------------------------- */

/* --- Groupes de cases a cocher et de boutons radio (quels qu'ils soient) --- */
.form-card .frm-fluent-form .ff-el-form-check {
  display: block;
  float: none;
  width: auto;
  position: static;
  margin: 0 0 0.5rem;
}

.form-card .frm-fluent-form .ff-el-form-check:last-child {
  margin-bottom: 0;
}

.form-card .frm-fluent-form .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.7;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.form-card .frm-fluent-form .ff-el-form-check input[type="checkbox"],
.form-card .frm-fluent-form .ff-el-form-check input[type="radio"] {
  position: static;
  opacity: 1;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin: 0.2rem 0 0;
  accent-color: var(--gold);
  vertical-align: baseline;
}

/* --- Champs date / heure : meme boite que les champs texte --- */
.form-card .frm-fluent-form input[type="date"],
.form-card .frm-fluent-form input[type="time"],
.form-card .frm-fluent-form input[type="datetime-local"],
.form-card .frm-fluent-form input[type="month"],
.form-card .frm-fluent-form input[type="week"],
.form-card .frm-fluent-form input[type="search"],
.form-card .frm-fluent-form input[type="password"] {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.25s var(--ease-lux, ease);
}

/* Le selecteur natif du navigateur arrive en bleu systeme : on le passe en or */
.form-card .frm-fluent-form input[type="date"]::-webkit-calendar-picker-indicator,
.form-card .frm-fluent-form input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
}

.form-card .frm-fluent-form input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* --- Envoi de fichier : le bouton natif est impossible a styler,
       on habille son conteneur et on neutralise le bouton d'origine --- */
.form-card .frm-fluent-form .ff-el-input--content input[type="file"] {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0.6rem 0;
}

.form-card .frm-fluent-form input[type="file"]::file-selector-button {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.55rem 1.1rem;
  margin-right: 0.9rem;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.form-card .frm-fluent-form input[type="file"]::file-selector-button:hover {
  color: #fff;
  background: var(--ink);
}

/* Le bouton de televersement propre a Fluent Forms */
.form-card .frm-fluent-form .ff_upload_btn.ff-btn,
.form-card .frm-fluent-form .ff-el-input--content .ff_file_upload_holder .ff_upload_btn {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.55rem 1.1rem;
}

.form-card .frm-fluent-form .ff-uploaded-list .ff-upload-preview {
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg, #fff);
}

/* --- Curseur (range) --- */
.form-card .frm-fluent-form input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
}

/* --- Notation par etoiles --- */
.form-card .frm-fluent-form .ff-el-rating,
.form-card .frm-fluent-form .ff-el-ratings {
  color: var(--gold);
  font-size: 1.25rem;
  gap: 0.2rem;
}

/* --- Liste deroulante a choix multiples --- */
.form-card .frm-fluent-form select[multiple] {
  min-height: 7.5rem;
  padding: 0.5rem 0.6rem;
  line-height: 1.8;
}

/* --- Message d'erreur de validation : en charte, jamais en rouge systeme --- */
.form-card .frm-fluent-form .error.text-danger,
.form-card .frm-fluent-form .ff-el-is-error .text-danger {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #B00020;
  margin-top: 0.35rem;
}

.form-card .frm-fluent-form .ff-el-is-error input,
.form-card .frm-fluent-form .ff-el-is-error select,
.form-card .frm-fluent-form .ff-el-is-error textarea {
  border-color: #B00020;
}

/* --- Tactile : cibles de 44 px minimum (regle appliquee partout sur le site) --- */
@media (hover: none) {
  .form-card .frm-fluent-form .ff-el-form-check-label {
    min-height: 44px;
    align-items: center;
  }
  .form-card .frm-fluent-form input[type="checkbox"],
  .form-card .frm-fluent-form input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 0;
  }
}