.ft-contact-form {
    max-width: 600px;
    margin: 20px 0;
    /* font-family supprimé : hérite du thème Overflow */
}
.ft-contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}
.ft-contact-form .ft-field-group {
    margin-bottom: 20px;
}
.ft-contact-form input:not([type="checkbox"]),
.ft-contact-form select,
.ft-contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

/* 1. Focus générique (fallback navigateurs sans focus-visible) */
.ft-contact-form input:focus,
.ft-contact-form select:focus,
.ft-contact-form textarea:focus {
    border-color: #333;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}

/* 2. Focus visible (keyboard) - override, gagne la cascade */
.ft-contact-form input:focus-visible,
.ft-contact-form select:focus-visible,
.ft-contact-form textarea:focus-visible {
    outline: 2px solid #333;
    outline-offset: 2px;
    box-shadow: none;
}

.ft-contact-form input[aria-invalid="true"],
.ft-contact-form select[aria-invalid="true"],
.ft-contact-form textarea[aria-invalid="true"] {
    border-color: #d63638;
    background-color: #f2f4f6;
}
.ft-field-error {
    color: #d63638;
    font-size: 14px;
    margin-top: 5px;
    display: block;
    font-weight: 500;
}

/* Help text sous le textarea */
.ft-contact-form .ft-field-help {
    font-size: 13px;
    color: #555; /* Ajusté pour contraste AA sur blanc */
    display: block;
    margin-top: 4px;
}

/* Bloc GDPR */
.ft-contact-form .ft-gdpr-block {
    background: #f2f4f6;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.ft-contact-form .ft-gdpr-label {
    display: flex;
    align-items: start;
    gap: 10px;
    font-weight: normal;
    margin: 0;
    cursor: pointer;
}

.ft-contact-form .ft-gdpr-label input[type="checkbox"] {
    width: auto;
    margin-top: 4px;
}

.ft-contact-form .ft-gdpr-label span {
    font-size: 14px;
    line-height: 1.4;
}

.ft-contact-form .ft-gdpr-error {
    margin-left: 26px;
}

.ft-submit-btn {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    transition: background-color 0.2s;
}
.ft-submit-btn:hover {
    background-color: #000;
}

/* Focus pour le bouton submit */
.ft-submit-btn:focus-visible {
    outline: 2px solid #333;
    outline-offset: 2px;
    box-shadow: none;
}

.ft-contact-alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    border-left: 4px solid;
}
.ft-alert-success { background: #f0f9eb; color: #2d5a2d; border-color: #46b450; }
.ft-alert-error   { background: #fbeaea; color: #a00; border-color: #dc3232; }

/* Pas de ring bleu quand on focus le message (scroll/focus JS) */
.ft-contact-alert:focus,
.ft-contact-alert:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}





/* Visually hidden (honeypot + screen-reader live region) */
.ft-pot-de-miel,
.ft-sr-only {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

/* Upsell Link */
.ft-upsell-link {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #0073aa;
    text-decoration: underline;
}

/* Upsell links (caché par défaut, révélé par JS) */
.ft-upsell-links-seo {
    display: none;
}

/* 1) Isoler les styles du formulaire (évite les collisions thème) */
.ft-contact-form .ft-submit-btn { 
  width: 100%;
  box-sizing: border-box;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
}

.ft-contact-form .ft-field-error { 
  display: block;
}

/* 2) Widget Altcha : éviter un rendu “étriqué” / débordements */
.ft-contact-form altcha-widget {
  display: block;
  max-width: 100%;
}

.ft-contact-form .ft-field-group altcha-widget {
  margin-top: 8px;
}

/* 3) Checkbox GDPR : alignement propre */
.ft-contact-form .ft-gdpr-label {
  align-items: flex-start;
}

.ft-contact-form .ft-gdpr-label input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 2px;
}
/* Neutraliser toute bordure/ombre imposée par le thème autour du formulaire */
.ft-contact-form,
.ft-contact-form-wrapper,
.ft-contact-form-wrapper form.ft-contact-form {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent;
}
.entry-content .ft-contact-form {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.ft-contact-form input.ft-submit-btn[type="submit"]{
  width: 300px !important;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

@media (max-width: 480px){
  .ft-contact-form input.ft-submit-btn[type="submit"]{
    width: 100% !important;
  }
}

/* Force un focus cohérent (évite l’outline bleu natif) */
.ft-contact-form input:focus,
.ft-contact-form select:focus,
.ft-contact-form textarea:focus {
  outline: 2px solid #333 !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

.ft-contact-form select:required:invalid { color: #666; }
.ft-contact-form option { color: #111; }

/* Un seul contour au focus, plus propre */
.ft-contact-form input:focus,
.ft-contact-form select:focus,
.ft-contact-form textarea:focus {
  box-shadow: none;     /* enlève l'anneau qui fait double border */
  outline: none;
  border-color: #333;   /* garde juste une bordure plus foncée */
}

/* Accessibilité clavier */
.ft-contact-form input:focus-visible,
.ft-contact-form select:focus-visible,
.ft-contact-form textarea:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
  box-shadow: none;
}


/* Placeholder visible tant que :invalid */
.ft-contact-form select:required:invalid {
  color: #666;
  -webkit-text-fill-color: #666;
}

/* Valeurs normales */
.ft-contact-form select {
  color: #111;
  -webkit-text-fill-color: #111;
  background-image: none !important;
  appearance: auto;
  padding-right: 42px; /* évite que la flèche/zone droite masque le texte */
}

.ft-contact-form select:required:invalid { color: #777; }
.ft-contact-form option { color: #111; }

/* Reset agressif sur le select Sujet (évite le texte coupé) */
.ft-contact-form select#cf-subject{
  -webkit-appearance: menulist !important;
  appearance: auto !important;

  height: auto !important;
  min-height: 48px !important;

  padding: 12px 42px 12px 12px !important;
  line-height: 1.2 !important;

  color: #111 !important;
  -webkit-text-fill-color: #111 !important;

  background: #f2f4f6 !important;
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Placeholder gris tant que c’est invalide */
.ft-contact-form select#cf-subject:required:invalid{
  color: #ffffff !important;
  -webkit-text-fill-color: #333 !important;
}

/* Si le thème ajoute un halo sur le conteneur du champ */
.ft-contact-form .ft-field-group:focus-within{
  outline: 0 !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

/* 1 seul focus : souris = bordure, clavier = outline */
.ft-contact-form input:not([type="checkbox"]):focus,
.ft-contact-form select:focus,
.ft-contact-form textarea:focus{
  outline: none !important;
  box-shadow: none !important;
  border-color: #333 !important;
}

.ft-contact-form input:not([type="checkbox"]):focus-visible,
.ft-contact-form select:focus-visible,
.ft-contact-form textarea:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px #333 !important;
  border-color: #333 !important;
}

/* Si le thème met un halo sur le wrapper */
.ft-contact-form .ft-field-group:focus-within{
  outline: none !important;
  box-shadow: none !important;
}


/* Dark mode (thème Overflow Child) */
html.is-dark-mode .ft-contact-form{
  color-scheme: dark;
  color: var(--evp-creme-paris, #F8F6F2);
}

html.is-dark-mode .ft-contact-form label,
html.is-dark-mode .ft-contact-form .ft-field-help{
  color: var(--evp-creme-paris, #F8F6F2);
  opacity: .9;
}

html.is-dark-mode .ft-contact-form input:not([type="checkbox"]),
html.is-dark-mode .ft-contact-form select,
html.is-dark-mode .ft-contact-form textarea{
  background-color: #404040;
  border-color: #2a2a2a;
  color: var(--evp-creme-paris, #F8F6F2);
}

/* Ton reset agressif du select Sujet mettait un fond clair en !important */
html.is-dark-mode .ft-contact-form select#cf-subject{
  background: #404040 !important;
  border-color: #2a2a2a !important;
  color: var(--evp-creme-paris, #F8F6F2) !important;
  -webkit-text-fill-color: var(--evp-creme-paris, #F8F6F2) !important;
}

/* Placeholder du select (quand required:invalid) */
html.is-dark-mode .ft-contact-form select:required:invalid{
  color: rgba(248,246,242,.65);
  -webkit-text-fill-color: rgba(248,246,242,.65);
}

/* Bloc GDPR */
html.is-dark-mode .ft-contact-form .ft-gdpr-block{
  background-color: #404040;
  border-color: #2a2a2a;
}

/* Liens “upsell” */
html.is-dark-mode .ft-contact-form .ft-upsell-link{
  color: #7AAED6;
}

/* Alerts */
html.is-dark-mode .ft-alert-success{
  background: rgba(70, 180, 80, 0.12);
  color: var(--evp-creme-paris, #F8F6F2);
  border-color: #46b450;
}
html.is-dark-mode .ft-alert-error{
  background: rgba(220, 50, 50, 0.15);
  color: var(--evp-creme-paris, #F8F6F2);
  border-color: #dc3232;
}

/* Bouton */
html.is-dark-mode .ft-submit-btn{
  background-color: #7AAED6;
  color: #1a1a1a;
}
html.is-dark-mode .ft-submit-btn:hover{
  background-color: #5a8eb6;
}

html.is-dark-mode .ft-contact-form input:not([type="checkbox"]):focus,
html.is-dark-mode .ft-contact-form select:focus,
html.is-dark-mode .ft-contact-form textarea:focus{
  border-color: #7AAED6 !important;
}

html.is-dark-mode .ft-contact-form input:not([type="checkbox"]):focus-visible,
html.is-dark-mode .ft-contact-form select:focus-visible,
html.is-dark-mode .ft-contact-form textarea:focus-visible{
  outline-color: #7AAED6 !important;
}

/* Dark mode : placeholder "Sujet" plus visible */
html.is-dark-mode .ft-contact-form select#cf-subject:required:invalid{
  color: rgba(248,246,242,.85) !important;
  -webkit-text-fill-color: rgba(248,246,242,.85) !important;
  font-weight: 600;
}

/* Dark mode : valeur choisie (quand ce n’est plus le placeholder) */
html.is-dark-mode .ft-contact-form select#cf-subject{
  color: #F8F6F2 !important;
  -webkit-text-fill-color: #F8F6F2 !important;
}

/* Optionnel : améliorer la lisibilité dans la liste déroulée (selon OS/navigateur) */
html.is-dark-mode .ft-contact-form select#cf-subject option,
html.is-dark-mode .ft-contact-form select#cf-subject optgroup{
  color: #111;
  background: #f2f4f6;
  -webkit-appearance: none;
}
/* FIX: le <select> "Sujet" devient trop sombre au clic (focus) */
html.is-dark-mode .ft-contact-form select#cf-subject:focus,
html.is-dark-mode .ft-contact-form select#cf-subject:focus-visible{
  background-color: #2a2a2a !important; /* garde le fond normal */
  color: #F8F6F2 !important;
  -webkit-text-fill-color: #F8F6F2 !important;

  border-color: #7AAED6 !important;
  outline: 2px solid #7AAED6; /* focus clavier/souris visible */
  outline-offset: 2px;
}

html.is-dark-mode .ft-contact-form select#cf-subject{
  color-scheme: dark;
}

html.is-dark-mode .ft-contact-form select#cf-subject option{
  background: #2f2f2f;
  color: #f8f6f2;
}

/* Dark mode : au focus, ne pas assombrir le champ (et enlever le shadow) */
html.is-dark-mode .ft-contact-form input:not([type="checkbox"]):focus,
html.is-dark-mode .ft-contact-form textarea:focus,
html.is-dark-mode .ft-contact-form select:focus{
  background-color: #404040 !important; /* garde le même fond que "au repos" */
  box-shadow: none !important;          /* neutralise le focus shadow du CSS de base */
  border-color: #7AAED6 !important;
}

/* Focus clavier propre (garde ton accent WCAG) */
html.is-dark-mode .ft-contact-form input:not([type="checkbox"]):focus-visible,
html.is-dark-mode .ft-contact-form textarea:focus-visible,
html.is-dark-mode .ft-contact-form select:focus-visible{
  outline: 2px solid #7AAED6 !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
/* Souris/touch : 1 seule bordure bleue, pas d’outline */
html.is-dark-mode .ft-contact-form input:not([type="checkbox"]):focus,
html.is-dark-mode .ft-contact-form textarea:focus,
html.is-dark-mode .ft-contact-form select:focus{
  border-color: #7AAED6 !important;
  outline: 0 !important;
  box-shadow: none !important; /* neutralise le focus shadow du CSS de base */
}

/* Clavier : 1 seul anneau (outline), bordure redevient normale */
html.is-dark-mode .ft-contact-form input:not([type="checkbox"]):focus-visible,
html.is-dark-mode .ft-contact-form textarea:focus-visible,
html.is-dark-mode .ft-contact-form select:focus-visible{
  border-color: #2a2a2a !important;  /* évite le double trait */
  outline: 2px solid #7AAED6 !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
/* Bouton submit : style + hover forcés (dark mode) */
html.is-dark-mode .ft-contact-form input[type="submit"].ft-submit-btn{
  background-color: #7AAED6 !important;
  border: 1px solid #7AAED6 !important;
  color: #1a1a1a !important;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

html.is-dark-mode .ft-contact-form input[type="submit"].ft-submit-btn:hover,
html.is-dark-mode .ft-contact-form input[type="submit"].ft-submit-btn:focus{
  background-color: #5a8eb6 !important;
  border-color: #5a8eb6 !important;
}