/* AMTM — Devis en ligne V2 — style maison (remplace material-design-for-contact-form-7)
   Valeurs calquées sur le rendu réel de l'ancien plugin (mesurées en headless browser) :
   carte grise #eff0f4/padding 50px/radius 5px, champs 252px/56px, soulignement MDC. */

/* Icône de titre "amtm" : Enfold ne l'injecte que quand il détecte le shortcode [av_icon]
   dans le contenu de la PAGE ; comme l'icône est ici dans le formulaire CF7 (pas dans le
   contenu de page), Enfold ne la détecte pas et ne charge jamais la police. On la déclare
   nous-mêmes avec les mêmes URLs que l'original (le .woff2 est en 404 sur tout le site,
   mais le fallback .woff fonctionne). */
@font-face {
  font-family: 'amtm';
  font-weight: normal;
  font-style: normal;
  font-display: auto;
  src: url('https://www.amtm.fr/wp-content/uploads/avia_fonts/amtm/amtm.woff') format('woff'),
       url('https://www.amtm.fr/wp-content/uploads/avia_fonts/amtm/amtm.ttf') format('truetype');
}

.ff-form [data-av_iconfont="amtm"]:before,
.ff-progress-panel [data-av_iconfont="amtm"]:before {
  font-family: 'amtm';
  content: attr(data-av_icon);
}

.ff-form {
  max-width: 1180px;
  margin: 0 auto;
  font-family: inherit;
}

.ff-form h3 {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 1.4em;
  font-size: 1.3em;
}

.ff-form h4,
.ff-form h5 {
  margin: 1.6em 0 0.8em;
}

/* Un h4/h5 placé directement dans une grille flex (.ff-grid) est traité comme un
   item flex et se réduit à la largeur de son texte au lieu de faire un saut de
   ligne — on le force en pleine largeur pour qu'il se comporte comme un vrai
   sous-titre, même sans grille dédiée. */
.ff-grid > h4,
.ff-grid > h5 {
  width: 100%;
  flex-basis: 100%;
  box-sizing: border-box;
  padding: 0 0.75em;
}

.ff-form .form-group {
  background: #faf6f2;
  border-radius: 5px;
  padding: 50px;
  margin-bottom: 1.5em;
}

/* Cadre gris de fin de formulaire (infos complémentaires + acceptation) : même
   habillage que .form-group mais sans cette classe pour ne pas apparaître comme
   une étape dans le panneau de progression (qui liste tous les .form-group). */
.ff-form .ff-final-box {
  background: #faf6f2;
  border-radius: 5px;
  padding: 50px;
  margin-bottom: 1.5em;
}

/* Espace supplémentaire avant un bloc pour le détacher visuellement du groupe
   de champs précédent (ex. Raison sociale/SIREN après les champs "pour tous"). */
.ff-field-spaced {
  margin-top: 1.5em;
}

@media (max-width: 600px) {
  .ff-form .ff-final-box {
    padding: 20px 16px;
  }
}

.ff-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0 -0.75em;
}

/* Le .clearfix du thème Enfold a sa propre marge (héritage float-clearing) qui
   n'a aucun sens dans une grille flex et pousse le champ suivant vers la droite,
   voire le fait déborder sur la ligne suivante. On la neutralise dans nos grilles. */
.ff-form .clearfix {
  margin: 0;
}

.ff-field {
  box-sizing: border-box;
  padding: 0 0.75em;
  margin-bottom: 1.5em;
  width: 100%;
}

/* Mobile : les 50px de padding de la carte + les gouttières prennent trop de place
   sur un écran étroit, on resserre pour laisser plus de largeur aux champs.
   !important nécessaire : le thème Enfold (child theme) a sa propre règle
   ".wpcf7 .form-group { padding: 50px }" sans media query, même spécificité que la
   nôtre, chargée après — elle gagnerait sinon à toutes les tailles d'écran. */
@media (max-width: 600px) {
  .ff-form .form-group {
    padding: 20px 16px !important;
  }

  .ff-grid {
    margin: 0 -0.4em;
  }

  .ff-field {
    padding: 0 0.4em;
    margin-bottom: 1.1em;
  }
}

@media (min-width: 600px) {
  .ff-field[data-tw="2"] { width: 16.666%; }
  .ff-field[data-tw="3"] { width: 25%; }
  .ff-field[data-tw="4"] { width: 33.333%; }
  .ff-field[data-tw="6"] { width: 50%; }
}

@media (min-width: 992px) {
  .ff-field[data-dw="2"] { width: 16.666%; }
  .ff-field[data-dw="3"] { width: 25%; }
  .ff-field[data-dw="4"] { width: 33.333%; }
  .ff-field[data-dw="6"] { width: 50%; }
  .ff-field[data-dw="8"] { width: 66.666%; }
}

/* Label statique (radio/checkbox/accept groupes, upload de fichier) */
.ff-radio > .ff-label,
.ff-checkbox > .ff-label,
.ff-file > label {
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 0.5em;
  color: #444;
}

/* Chevron devant chaque question (label des champs radio/checkbox), pour les
   distinguer visuellement des libellés de champs texte/select. */
.ff-label::before {
  content: "❯";
  display: inline-block;
  margin-right: 0.4em;
  color: #f37323;
  font-weight: 700;
}

.ff-file input[type="file"] {
  display: block;
  padding: 0.6em 0;
}

.ff-file input[type="file"]::file-selector-button,
.ff-file input[type="file"]::-webkit-file-upload-button {
  background: #f37323;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.6em 1.2em;
  margin-right: 1em;
  font-size: 0.9em;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ff-file input[type="file"]:hover::file-selector-button,
.ff-file input[type="file"]:hover::-webkit-file-upload-button {
  background: #d9631a;
}

.ff-file-info {
  margin-top: 0.5em;
  font-size: 0.85em;
  color: #5c6b7a;
}

.ff-file-error {
  margin-top: 0.5em;
  font-size: 0.85em;
  color: #d9534f;
}

.ff-file.ff-invalid input[type="file"]::file-selector-button,
.ff-file.ff-invalid input[type="file"]::-webkit-file-upload-button {
  background: #d9534f;
}

/* Champs texte/select/textarea : label flottant DANS le champ, comme l'original
   (le label ne sort jamais de la boîte de 56px, il se contente de rétrécir et
   remonter à l'intérieur — contrairement à un style "label au-dessus du champ"). */
.ff-field:not(.ff-radio):not(.ff-checkbox):not(.ff-accept):not(.ff-file) {
  position: relative;
  /* les retours à la ligne/tabulations entre <div> et <p> dans le HTML généré par CF7
     comptent comme du texte et ajoutent une hauteur fantôme via line-height ; on neutralise
     seulement line-height (pas font-size, dont dépendent les "em" du label) */
  line-height: 0;
}

.ff-field:not(.ff-radio):not(.ff-checkbox):not(.ff-accept):not(.ff-file) > p {
  margin: 0;
  line-height: normal;
}

/* "Valeur exprimée" à côté de "Valeur totale déclarée" : la marge du <p> interne
   (valeur par défaut du navigateur, conservée sur .ff-radio pour l'espacement entre
   questions Oui/Non empilées) désaligne ce champ en haut par rapport à son voisin
   texte — on la retire seulement ici, pas globalement sur .ff-radio. Idem pour la
   marge basse du champ Valeur totale, pour que le texte d'aide suive sans écart. */
.ff-field:has(input[name="ttcht"]) > p {
  margin-top: 0;
}

.ff-field.valeurtotale,
.ff-field:has(input[name="ttcht"]) {
  margin-bottom: 0;
}

.ff-field:not(.ff-radio):not(.ff-checkbox):not(.ff-accept):not(.ff-file) br {
  display: none;
}

.ff-field:not(.ff-radio):not(.ff-checkbox):not(.ff-accept):not(.ff-file) label {
  position: absolute !important;
  /* 0.75em de padding du .ff-field + 1em de padding-left de l'input : aligne le label
     exactement avec le début du texte saisi (curseur), pas juste le bord du champ */
  left: 1.75em !important;
  top: 1.1em !important;
  font-size: 1em !important;
  font-weight: normal !important;
  color: rgba(0, 0, 0, 0.6) !important;
  margin: 0 !important;
  pointer-events: none;
  transform-origin: left top;
  transition: top 0.15s ease, font-size 0.15s ease;
  background: transparent;
  z-index: 1;
}

/* Le label flotte à l'intérieur du champ dès que le champ a le focus ou une valeur (géré en JS) */
.ff-field.is-active:not(.ff-radio):not(.ff-checkbox):not(.ff-accept):not(.ff-file) label {
  top: 0.4em !important;
  font-size: 0.75em !important;
}

/* Certains champs ont un placeholder natif (ex: "JJ/MM/AAAA") en plus du label flottant.
   On le cache au repos pour ne pas superposer les deux textes ; il redevient visible
   une fois le label remonté (focus ou valeur saisie), comme indice de format. */
.ff-field:not(.is-active) input::placeholder {
  color: transparent !important;
}

/* Soulignement animé DIRECTEMENT sur le champ, sans bordure du tout : deux dégradés
   superposés en arrière-plan (un <input> ne supporte pas ::after) — un trait gris fin
   TOUJOURS présent (calque du dessous) et un trait de couleur plus épais qui grandit
   depuis le centre par-dessus (calque du dessus). Un seul mécanisme animé (background-size),
   donc pas de décalage entre "la bordure disparaît" et "la couleur apparaît" comme avec
   une transition de border-color séparée. */
.ff-field input[type="text"],
.ff-field input[type="number"],
.ff-field input[type="email"],
.ff-field input[type="tel"],
.ff-field input[type="date"],
.ff-field textarea {
  background-image:
    linear-gradient(#f37323, #f37323),
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center bottom, center bottom !important;
  background-size: 0% 2px, 100% 1px !important;
  transition: background-size 0.2s ease !important;
}

.ff-field.is-active input[type="text"],
.ff-field.is-active input[type="number"],
.ff-field.is-active input[type="email"],
.ff-field.is-active input[type="tel"],
.ff-field.is-active input[type="date"],
.ff-field.is-active textarea {
  background-size: 100% 2px, 100% 1px !important;
}

/* Champ requis laissé vide après passage (géré en JS) : le calque du dessus passe au
   rouge et reste affiché à 100%, repos ET focus, toujours par-dessus le trait gris. */
.ff-field.ff-invalid input[type="text"],
.ff-field.ff-invalid input[type="number"],
.ff-field.ff-invalid input[type="email"],
.ff-field.ff-invalid input[type="tel"],
.ff-field.ff-invalid input[type="date"],
.ff-field.ff-invalid textarea {
  background-image:
    linear-gradient(#d9534f, #d9534f),
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)) !important;
  background-size: 100% 2px, 100% 1px !important;
}

.ff-field.ff-invalid select {
  border-bottom-color: #d9534f !important;
}

/* Un <select> affiche toujours une valeur : label flottant en permanence.
   Règle séparée de celle du dessus : si :has() n'est pas supporté, seule
   cette règle est ignorée par le navigateur, pas celle des champs texte. */
.ff-field:has(select):not(.ff-radio):not(.ff-checkbox):not(.ff-accept):not(.ff-file) label {
  top: 0.4em !important;
  font-size: 0.75em !important;
}

.ff-field input[type="text"],
.ff-field input[type="number"],
.ff-field input[type="email"],
.ff-field input[type="tel"],
.ff-field input[type="date"],
.ff-field select,
.ff-field textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 1.25em 1em 0.375em !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 1em !important;
  color: #000 !important;
  background-color: #fff !important;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
  appearance: none;
  -webkit-appearance: none;
}

/* Masque les flèches d'incrément natives des champs number : sans ça elles
   s'affichent ENTRE la valeur saisie et le suffixe d'unité (CV, €), ce qui
   rend l'ensemble illisible. */
.ff-field input[type="number"]::-webkit-inner-spin-button,
.ff-field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ff-field input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Unité affichée dans le champ (ex: CV, €) plutôt que "(en X)" dans le label.
   La valeur est alignée à droite pour rester collée au suffixe même sur les champs
   pleine largeur (ex: Valeur totale déclarée), le suffixe restant superposé DANS le
   fond blanc de l'input (une flex box avait été essayée mais poussait le suffixe
   hors du fond blanc, dans le gris de la carte — visuellement détaché). */
.ff-field.ff-has-suffix {
  position: relative;
}

.ff-field.ff-has-suffix input {
  text-align: right;
  padding-right: 2.6em !important;
}

.ff-field.ff-has-suffix::after {
  content: attr(data-suffix);
  position: absolute;
  right: 1em;
  bottom: 0.85em;
  margin-right: 5px;
  margin-bottom: 6px;
  color: rgba(0, 0, 0, 0.75);
  font-size: 1.1em;
  pointer-events: none;
}

/* Le suffixe € de "Valeur totale déclarée" retombe un peu bas, ce champ étant
   apparié sur la même ligne que le radio "Valeur exprimée" (TTC/HT). */
.ff-field.valeurtotale::after {
  bottom: 1.15em;
}

/* Le <select> n'utilise pas les dégradés (son arrière-plan sert à la flèche) :
   il garde une vraie bordure du bas. */
.ff-field select {
  border-bottom: 1px solid rgba(0, 0, 0, 0.42) !important;
  transition: border-color 0.15s ease;
}

.ff-field select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.5) 50%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.5) 50%, transparent 50%) !important;
  background-position: calc(100% - 20px) center, calc(100% - 15px) center !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

.ff-field input:focus,
.ff-field textarea:focus {
  outline: none !important;
}

/* Le <select> n'a pas le traitement en dégradé (son arrière-plan sert déjà à la flèche),
   il garde une bordure classique qui s'épaissit et passe en orange au focus. */
.ff-field select:focus {
  outline: none !important;
  border-bottom: 2px solid #f37323 !important;
  padding-bottom: calc(0.375em - 1px) !important;
}

.ff-field.ff-invalid select:focus {
  border-bottom-color: #d9534f !important;
}

.ff-field textarea {
  min-height: 6em !important;
  resize: vertical;
}

.ff-radio .wpcf7-radio,
.ff-checkbox .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.4em;
}

.ff-radio[data-display="inline"] .wpcf7-radio,
.ff-checkbox[data-display="inline"] .wpcf7-checkbox {
  flex-direction: row;
}

.ff-radio .wpcf7-list-item,
.ff-checkbox .wpcf7-list-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding-left: 28px;
  min-height: 20px;
  cursor: pointer;
}

.ff-radio label,
.ff-checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: normal;
  cursor: pointer;
}

.ff-radio .wpcf7-list-item-label,
.ff-checkbox .wpcf7-list-item-label {
  cursor: pointer;
}

/* Radio et checkbox custom, façon Material Design (cercle/carré qui se remplit en
   s'animant à la sélection). L'input natif reste dans le DOM, cliquable et accessible
   au clavier, juste rendu invisible ; le visuel est porté par des pseudo-éléments sur
   le <span class="wpcf7-list-item"> (un <input> ne supporte pas ::before/::after). */
.ff-radio .wpcf7-list-item input[type="radio"],
.ff-checkbox .wpcf7-list-item input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ff-radio .wpcf7-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid rgba(0, 0, 0, 0.54);
  border-radius: 50%;
  transition: border-color 0.15s ease;
}

.ff-radio .wpcf7-list-item::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f37323;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ff-radio .wpcf7-list-item:has(input:checked)::before {
  border-color: #f37323;
}

.ff-radio .wpcf7-list-item:has(input:checked)::after {
  transform: translateY(-50%) scale(1);
}

.ff-checkbox .wpcf7-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid rgba(0, 0, 0, 0.54);
  border-radius: 3px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ff-checkbox .wpcf7-list-item::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 45%;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-50%) rotate(45deg) scale(0);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ff-checkbox .wpcf7-list-item:has(input:checked)::before {
  border-color: #f37323;
  background-color: #f37323;
}

.ff-checkbox .wpcf7-list-item:has(input:checked)::after {
  transform: translateY(-50%) rotate(45deg) scale(1);
}

/* anneau de focus clavier, sur le cercle/carré plutôt que sur l'input invisible */
.ff-radio .wpcf7-list-item input:focus-visible ~ *,
.ff-checkbox .wpcf7-list-item input:focus-visible ~ * {
  outline: none;
}

.ff-radio .wpcf7-list-item:has(input:focus-visible)::before,
.ff-checkbox .wpcf7-list-item:has(input:focus-visible)::before {
  box-shadow: 0 0 0 3px rgba(243, 115, 35, 0.25);
}

.ff-form p.help,
.ff-form p.small {
  font-size: 0.85em;
  line-height: 1.3;
  color: #5c6b7a;
  margin: 0.4em 0.75em 1em;
}

/* CF7 encapsule le contenu du champ dans un <p> (wpautop) : c'est donc ce <p>,
   pas la div elle-même, qui n'a qu'un seul enfant réel côté flex — on met le
   flex sur le <p> pour aligner icône + texte l'un à côté de l'autre. */
.ff-warning-box {
  border: 1px solid #f3c9a3;
  background: #fdeee2;
  border-radius: 5px;
  padding: 0.75em 1em;
  margin: 0.4em 0 1.2em;
  font-size: 0.9em;
  line-height: 1.35;
  color: #8a4a1f;
}

.ff-warning-box p {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
}

.ff-warning-box .ff-warning-icon {
  flex-shrink: 0;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: #f37323;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95em;
  font-style: italic;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
}

.ff-accept {
  width: 100%;
  padding: 0.5em 0.75em;
  font-size: 0.9em;
  margin-bottom: 0.1em;
}

.ff-accept .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

.ff-submit {
  width: 100%;
  padding: 1em 0.75em 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1em;
}

.ff-submit input[type="submit"] {
  background: #f37323;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.8em 2em;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.ff-submit input[type="submit"]:hover:not(:disabled) {
  background: #d9631a;
}

.ff-submit input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ff-reset-btn {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  padding: 0.8em 1.4em;
  font-size: 0.95em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.ff-reset-btn:hover {
  border-color: #d9534f;
  color: #d9534f;
}

/* Groupes conditionnels : masqués par défaut, affichés en JS */
.ff-group {
  width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Le transform ci-dessus crée son propre contexte d'empilement : un combobox
   dans un groupe conditionnel (ex. Département sous "Lieu de mouillage") voit
   son z-index enfermé dans ce contexte, incapable de dépasser des champs situés
   en dehors du groupe (ex. Hors période de navigation, plus bas dans le DOM).
   On n'élève QUE le combobox réellement ouvert (aria-expanded, déjà géré par le
   JS) : un z-index fixe sur tous les combobox à la fois créerait une égalité
   entre deux comboboxes simultanément visibles, remportée par le dernier du DOM
   même quand c'est l'autre qui est ouvert. */
.ff-group:has(.ff-combobox-input[aria-expanded="true"]) {
  position: relative;
  z-index: 100;
}

.ff-group[hidden] {
  display: none;
}

/* Effet d'apparition (fondu + léger glissement) quand un élément apparaît suite
   à un clic : groupe conditionnel, accordéon "Voir plus d'options", nouvelle ligne
   de répéteur. La classe est retirée juste après l'ajout (double requestAnimationFrame
   en JS) pour déclencher la transition vers l'état normal. */
.ff-reveal-init {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
}

/* Répéteur (sinistres) */
.ff-repeater-row {
  position: relative;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  padding: 1em 0.75em 0.2em;
  margin-bottom: 1em;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ff-repeater-remove {
  position: absolute;
  top: 0.6em;
  right: 0.6em;
  background: #d9534f;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.3em 0.7em;
  cursor: pointer;
  font-size: 0.85em;
}

.ff-repeater-add {
  background: #fff;
  color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.42);
  border-radius: 4px;
  padding: 0.6em 1.2em;
  cursor: pointer;
  font-size: 0.9em;
  margin: 0.5em 0.75em 1em;
}

.ff-repeater-add:hover {
  background: #f5f5f5;
}

/* Sélecteurs pays/département avec recherche : le <select> natif reste dans le DOM
   (source de vérité pour la soumission), seul le champ texte + la liste sont visibles. */
.ff-combobox-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

.ff-combobox-input {
  cursor: text;
}

/* Le .ff-field d'un combobox (Département, Pays, Constructeur...) n'a pas de
   z-index propre (juste position:relative pour le label flottant), donc sa
   liste déroulante — bien qu'en z-index:20 — se fait recouvrir par les champs
   suivants dans le DOM, qui partagent le même contexte d'empilement. On élève
   uniquement le champ dont le combobox est réellement ouvert (aria-expanded),
   pas tous en permanence : sinon deux comboboxes élevés au même niveau entrent
   en égalité, remportée par le dernier du DOM même quand c'est l'autre qui est
   ouvert (ex. Département du port d'attache vs Département du mouillage). */
.ff-field:has(.ff-combobox-input[aria-expanded="true"]) {
  position: relative;
  z-index: 100;
}

.ff-combobox-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  margin-top: 2px;
}

.ff-combobox-option {
  padding: 0.6em 1em;
  font-size: 0.95em;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
}

.ff-combobox-option:hover {
  background: #fdeee2;
  color: #f37323;
}

/* Panneau flottant de progression, à droite du formulaire. En position:fixed
   pour suivre le scroll de façon fiable (un flex+sticky a été essayé mais
   cassait le suivi du scroll, le calcul du curseur et les colonnes du
   formulaire — voir la tranche laptop ci-dessous pour la place réservée). */
.ff-progress-panel {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 270px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  padding: 1.1em 1.2em;
  z-index: 50;
}

@media (max-width: 1250px) {
  .ff-progress-panel {
    display: none;
  }
}

/* Tranche laptop (1250-1800px) : pas assez de marge naturelle autour du
   formulaire pour loger le panneau sans chevaucher. On resserre le formulaire
   et on le décale vers la gauche pour lui faire de la place — MAIS on bascule
   aussi le plan à 3 colonnes (au lieu de 4) sur cette tranche, pour ne pas
   comprimer les labels : la classe data-dw="3" reste calée sur la largeur
   d'écran (media query), pas sur la largeur réelle, resserrée, du formulaire. */
@media (min-width: 1250px) and (max-width: 1800px) {
  .ff-form {
    max-width: 1050px;
    margin-left: auto;
    margin-right: 250px;
  }

  .ff-field[data-dw="3"] {
    width: 33.333%;
  }
}

.ff-progress-bar-track {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.4em;
}

.ff-progress-bar-fill {
  height: 100%;
  background: #f37323;
  width: 0%;
  transition: width 0.25s ease;
}

.ff-progress-percent {
  font-size: 0.8em;
  color: #888;
  text-align: right;
  margin-bottom: 0.9em;
}

.ff-progress-list-wrap {
  position: relative;
}

/* Rail vertical + curseur : suit la position de lecture, aligné sous la colonne
   des coches (16px de large, donc centre à 8px du bord gauche de chaque item). */
.ff-progress-track {
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #eee;
  z-index: 0;
}

.ff-progress-cursor {
  position: absolute;
  left: 3px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f37323;
  box-shadow: 0 0 0 4px rgba(243, 115, 35, 0.15);
  transition: top 0.12s linear;
  transform: translateY(-50%);
  /* toujours visible même quand il croise une coche de section (z-index:1) */
  z-index: 2;
}

.ff-progress-sections {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ff-progress-item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.32);
  font-size: 0.87em;
  transition: color 0.15s ease;
}

.ff-progress-item:hover {
  color: #f37323;
}

/* Rubrique actuellement lue (suit le scroll) : en couleur, les autres grisées.
   Pas de changement de graisse : ça ferait passer les libellés longs sur 2 lignes. */
.ff-progress-item.is-active-section {
  color: #f37323;
}

.ff-progress-check {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ff-progress-item.is-complete .ff-progress-check {
  border-color: #2e7d32;
  background: #2e7d32;
}

.ff-progress-item.is-complete .ff-progress-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ff-progress-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  color: inherit;
}

/* Bouton de validation dupliqué dans le panneau, sous la liste des rubriques :
   même habillage que le vrai bouton CF7, pour ne pas avoir à redescendre tout
   en bas du formulaire pour valider. */
.ff-progress-submit {
  display: block;
  width: 100%;
  margin-top: 1em;
  background: #f37323;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.8em 1em;
  font-size: 0.92em;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.ff-progress-submit:hover:not(:disabled) {
  background: #d9631a;
}

.ff-progress-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Icône "i" au survol, pour un texte d'aide ponctuel à côté d'une question
   (ex. définition d'"Embarcation Annexe"), sans l'afficher en permanence. */
.ff-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: #f37323;
  color: #fff;
  font-size: 0.75em;
  font-style: italic;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  cursor: help;
  position: relative;
  vertical-align: middle;
}

.ff-info-tooltip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 135%;
  transform: translateX(-50%);
  width: 220px;
  background: #f37323;
  color: #fff;
  font-size: 1.15em;
  font-style: normal;
  font-weight: normal;
  font-family: inherit;
  padding: 0.6em 0.8em;
  border-radius: 5px;
  line-height: 1.35;
  z-index: 40;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  text-align: left;
}

.ff-info-icon:hover .ff-info-tooltip,
.ff-info-icon:focus .ff-info-tooltip {
  display: block;
}

/* Picto orange devant le H1 de la page : SVG maison (trait épais) plutôt que
   la police d'icônes du site, trop fine à cette taille. */
.devis-page-title {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.devis-h1-icon {
  width: 1.1em;
  height: 1.1em;
  color: #f37323;
  flex-shrink: 0;
}

/* Options radio "Plaisance privée / solitaire" les unes sous les autres plutôt
   qu'en ligne ("Bateau à moteur" reste en ligne, cases à cocher classiques). */
.ff-field:has(input[name^="usage-privee"]) .wpcf7-radio {
  flex-direction: column;
}

/* Récapitulatif avant envoi : overlay plein écran affiché au clic sur "Envoyer",
   reprend l'habillage carte du formulaire (fond clair, radius 5px, accent orange). */
.ff-recap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em 1em;
}

.ff-recap-overlay[hidden] {
  display: none;
}

body.ff-recap-open {
  overflow: hidden;
}

.ff-recap-modal {
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 760px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.ff-recap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1.4em;
  border-bottom: 1px solid #eee;
}

.ff-recap-header h2 {
  margin: 0;
  font-size: 1.2em;
}

.ff-recap-close {
  background: none;
  border: none;
  font-size: 1.6em;
  line-height: 1;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  padding: 0 0.2em;
}

.ff-recap-close:hover {
  color: #d9534f;
}

.ff-recap-body {
  overflow-y: auto;
  padding: 1.2em 1.4em;
}

.ff-recap-section {
  background: #faf6f2;
  border-radius: 5px;
  padding: 1em 1.2em;
  margin-bottom: 1em;
}

.ff-recap-section:last-child {
  margin-bottom: 0;
}

.ff-recap-section h3 {
  margin: 0 0 0.6em;
  font-size: 1em;
  color: #f37323;
}

.ff-recap-section dl {
  margin: 0;
}

.ff-recap-section h5 {
  margin: 0.9em 0 0.4em;
  font-size: 0.9em;
  color: #5c6b7a;
}

.ff-recap-section h5:first-child {
  margin-top: 0;
}

.ff-recap-row {
  display: flex;
  gap: 1em;
  padding: 0.35em 0;
  border-bottom: 1px dashed #e6ddd3;
  font-size: 0.92em;
}

.ff-recap-row:last-child {
  border-bottom: none;
}

.ff-recap-row dt {
  flex: 0 0 45%;
  color: #5c6b7a;
}

.ff-recap-row dd {
  flex: 1;
  margin: 0;
  color: #000;
  font-weight: 600;
  word-break: break-word;
}

.ff-recap-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1em;
  padding: 1em 1.4em;
  border-top: 1px solid #eee;
}

.ff-recap-edit {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  padding: 0.8em 1.4em;
  font-size: 0.95em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.ff-recap-edit:hover {
  border-color: #f37323;
  color: #f37323;
}

.ff-recap-confirm {
  background: #f37323;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.8em 1.6em;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ff-recap-confirm:hover {
  background: #d9631a;
}

@media (max-width: 600px) {
  .ff-recap-row {
    flex-direction: column;
    gap: 0.15em;
  }

  .ff-recap-row dt {
    flex: none;
    font-size: 0.85em;
  }
}

/* Titre + cases à cocher sur une seule ligne (ex. "Projet à venir :"), au lieu
   du titre au-dessus des champs comme partout ailleurs — classe dédiée pour ne
   pas changer le comportement général de .ff-label sur les autres champs. */
.ff-field.ff-inline-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
}

.ff-field.ff-inline-label .ff-label {
  display: inline;
  margin: 0;
}

.ff-field.ff-inline-label p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
}

/* Label statique au-dessus du champ (comme pour les questions Oui/Non), plutôt
   que le label flottant à l'intérieur du champ utilisé partout ailleurs sur les
   champs texte/select — classe dédiée pour ne cibler que ces champs précis. */
.ff-field.ff-static-label:not(.ff-radio):not(.ff-checkbox):not(.ff-accept):not(.ff-file) {
  line-height: normal !important;
}

.ff-field.ff-static-label:not(.ff-radio):not(.ff-checkbox):not(.ff-accept):not(.ff-file) label {
  position: static !important;
  display: block !important;
  left: auto !important;
  top: auto !important;
  /* aligné sur le rendu réel des questions radio/checkbox (.ff-label) : leur
     règle ".ff-radio > .ff-label" ne matche jamais en pratique à cause du <p>
     que wpautop insère, donc elles s'affichent en 16px/normal/#666, pas dans
     le style 0.85em/gras/#444 visé à l'origine par cette règle-là. */
  font-size: 1em !important;
  font-weight: normal !important;
  color: #666 !important;
  margin: 0 0 0.5em !important;
  transform: none !important;
}

/* Même chevron que les questions radio/checkbox (.ff-label::before), pour une
   apparence cohérente sur ce label statique aussi. */
.ff-field.ff-static-label:not(.ff-radio):not(.ff-checkbox):not(.ff-accept):not(.ff-file) label::before {
  content: "❯";
  display: inline-block;
  margin-right: 0.4em;
  color: #f37323;
  font-weight: 700;
}

.ff-field.ff-static-label select {
  padding: 0.9em 1em !important;
}

/* "Plaisance privée" toujours cochée (verrouillée en JS) : curseur neutre pour
   signaler qu'elle n'est pas décochable, plutôt que le curseur "cliquable". */
.ff-checkbox:has(input[name="usage-privee[]"]) .wpcf7-list-item {
  cursor: default;
}

/* Champ obligatoire manquant, ciblé après un clic sur "Envoyer" : pulsation
   orange brève pour attirer l'œil une fois le scroll automatique terminé. */
.ff-field-pulse {
  animation: ff-field-pulse-anim 0.5s ease 2;
  border-radius: 6px;
}

@keyframes ff-field-pulse-anim {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243, 115, 35, 0); }
  50% { box-shadow: 0 0 0 6px rgba(243, 115, 35, 0.35); }
}

/* Utilisation du bateau : les groupes de boutons radio révélés par une réponse
   "Oui" sont légèrement décalés à droite, avec un trait vertical à gauche pour
   marquer visuellement qu'ils découlent de la question au-dessus. Scopé à
   cette seule carte. */
.form-group-utilisation .ff-group[data-show-if] {
  margin-left: 30px;
  width: calc(100% - 30px);
  padding-left: 15px;
  border-left: 2px solid rgba(243, 115, 35, 0.4);
}