/* =====================================================================
   Finesty — boutons (buttons.css), chargé en dernier. Boutons « fy-b » construits par buttons.js :
   pilule sans bordure (le contour éventuel est une ombre intérieure : la taille ne change jamais au survol),
   libellé Kanit, pastille flèche à droite — ou icône d'origine à gauche (fy-b--lead).
   Survol : un cercle part de la pastille (ou de l'icône) et remplit le bouton, la flèche sort et revient,
   le bouton se soulève légèrement avec une ombre colorée.
   Le sélecteur .fy-b:is(#fyb, .fy-b) a la spécificité d'un identifiant : il l'emporte sur les styles Elementor,
   The Plus et Forminator sans modifier leurs feuilles.
   ===================================================================== */

.fy-b:is(#fyb, .fy-b) {
  --b-bg: #24454F; --b-fg: #FFFFFF; --b-fg-h: #1F2A2E; --b-chip: #DAAE51; --b-chip-fg: #1F2A2E; --b-fill: #DAAE51;
  --b-ring: 0 0 0 0 transparent; --b-shadow: 0 0 0 0 transparent; --b-shadow-h: 0 14px 30px rgba(36, 69, 79, 0.28); --b-focus: #DAAE51;
  position: relative !important; isolation: isolate; overflow: hidden !important; z-index: 0;
  display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important;
  min-height: 52px !important; height: auto !important; width: auto; margin: 0; padding: 7px 7px 7px 26px !important;
  border: 0 !important; border-radius: 999px !important; outline: 0;
  background: var(--b-bg) !important; background-image: none !important; color: var(--b-fg) !important;
  box-shadow: var(--b-ring), var(--b-shadow) !important;
  font-family: "Kanit", "Roboto", Arial, sans-serif !important; font-size: 16px !important; font-weight: 500 !important;
  line-height: 20px !important; letter-spacing: .01em !important; text-transform: none !important; text-decoration: none !important;
  text-align: left !important; white-space: normal; cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent;
  transition: translate .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, color .35s ease !important;
}
/* calque de remplissage (cercle) */
.fy-b:is(#fyb, .fy-b)::before {
  content: "" !important; display: block !important; position: absolute !important; z-index: -1; top: 50%; right: 26px; left: auto;
  width: 1000px; height: 1000px; border-radius: 50%; background: var(--b-fill); opacity: 1; pointer-events: none;
  transform: translate(50%, -50%) scale(0); transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}
/* couche de survol d'origine des boutons The Plus : supprimée */
.fy-b:is(#fyb, .fy-b)::after { content: none !important; display: none !important; }
.fy-b:is(#fyb, .fy-b) .btn-icon { display: none !important; }

/* éléments internes : sélecteurs renforcés (les feuilles des formulaires stylent aussi les <span> et <svg> des boutons) */
.fy-b:is(#fyb, .fy-b) .fy-b__label { position: relative !important; z-index: 1; display: block !important; min-width: 0; margin: 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; opacity: 1 !important; visibility: visible !important; transition: color .35s ease; }
.fy-b:is(#fyb, .fy-b) .fy-b__chip {
  position: relative !important; z-index: 1; flex: 0 0 38px; width: 38px !important; height: 38px !important; border-radius: 50% !important; overflow: hidden !important;
  display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important;
  background: var(--b-chip) !important; color: var(--b-chip-fg) !important; opacity: 1 !important; visibility: visible !important;
}
.fy-b:is(#fyb, .fy-b) .fy-b__arrow {
  position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
  display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important;
  opacity: 1 !important; visibility: visible !important; transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
.fy-b:is(#fyb, .fy-b) .fy-b__arrow svg { width: 17px !important; height: 17px !important; display: block !important; margin: 0 !important; position: static !important; }
.fy-b:is(#fyb, .fy-b) .fy-b__arrow--in { transform: translateX(-140%); }

/* bouton avec icône à gauche : pas de pastille, le cercle part de l'icône */
.fy-b--lead:is(#fyb, .fy-b) { justify-content: center !important; gap: 10px !important; padding: 7px 26px 7px 22px !important; }
.fy-b--lead:is(#fyb, .fy-b)::before { right: auto; left: 30px; transform: translate(-50%, -50%) scale(0); }
.fy-b__icon { position: relative; z-index: 1; font-size: 15px !important; width: 1.1em; text-align: center; color: inherit !important; transition: transform .35s cubic-bezier(.22, .61, .36, 1); }

/* variantes */
.fy-b--gold:is(#fyb, .fy-b) { --b-bg: #DAAE51; --b-fg: #1F2A2E; --b-fg-h: #FFFFFF; --b-chip: #24454F; --b-chip-fg: #DAAE51; --b-fill: #24454F; --b-shadow-h: 0 14px 30px rgba(193, 150, 62, 0.36); --b-focus: #24454F; }
.fy-b--dark:is(#fyb, .fy-b) { --b-bg: #24454F; --b-fg: #FFFFFF; --b-fg-h: #1F2A2E; --b-chip: #DAAE51; --b-chip-fg: #1F2A2E; --b-fill: #DAAE51; }
.fy-b--line:is(#fyb, .fy-b) { --b-bg: transparent; --b-fg: #24454F; --b-fg-h: #FFFFFF; --b-chip: #24454F; --b-chip-fg: #FFFFFF; --b-fill: #24454F; --b-ring: inset 0 0 0 2px #24454F; }
.fy-b--line-light:is(#fyb, .fy-b) { --b-bg: transparent; --b-fg: #FFFFFF; --b-fg-h: #24454F; --b-chip: #FFFFFF; --b-chip-fg: #24454F; --b-fill: #FFFFFF; --b-ring: inset 0 0 0 2px rgba(255, 255, 255, 0.85); --b-shadow-h: 0 0 0 0 transparent; }
/* boutons à contour : pastille un peu plus petite et plus éloignée du bord (sinon le bord de la pastille double visuellement le contour) */
.fy-b--line:is(#fyb, .fy-b), .fy-b--line-light:is(#fyb, .fy-b) { padding: 9px 9px 9px 26px !important; }
.fy-b--line:is(#fyb, .fy-b) .fy-b__chip, .fy-b--line-light:is(#fyb, .fy-b) .fy-b__chip { flex-basis: 34px; width: 34px !important; height: 34px !important; }
.fy-b--line.fy-b--lead:is(#fyb, .fy-b), .fy-b--line-light.fy-b--lead:is(#fyb, .fy-b) { padding: 9px 26px 9px 22px !important; }
/* au survol, le remplissage couvre le contour : la bordure reste de même largeur, fondue dans le fond */
.fy-b--line:is(#fyb, .fy-b):hover, .fy-b--line-light:is(#fyb, .fy-b):hover { --b-ring: inset 0 0 0 2px var(--b-fill); }

/* sur fond foncé : le survol passe le bouton en blanc, sans lueur (demande client) */
.fy-b--on-dark:is(#fyb, .fy-b) { --b-fill: #FFFFFF; --b-fg-h: #24454F; --b-shadow-h: 0 0 0 0 transparent; }
.fy-b--on-dark.fy-b--gold:is(#fyb, .fy-b) { --b-chip: #24454F; --b-chip-fg: #DAAE51; }

/* tailles */
.fy-b--sm:is(#fyb, .fy-b) { min-height: 46px !important; padding: 6px 6px 6px 20px !important; font-size: 15px !important; gap: 12px !important; }
.fy-b--sm:is(#fyb, .fy-b) .fy-b__chip { flex-basis: 34px; width: 34px !important; height: 34px !important; }
.fy-b--sm.fy-b--line:is(#fyb, .fy-b), .fy-b--sm.fy-b--line-light:is(#fyb, .fy-b) { padding: 8px 8px 8px 20px !important; }
.fy-b--sm.fy-b--line:is(#fyb, .fy-b) .fy-b__chip, .fy-b--sm.fy-b--line-light:is(#fyb, .fy-b) .fy-b__chip { flex-basis: 30px; width: 30px !important; height: 30px !important; }
.fy-b--sm.fy-b--lead:is(#fyb, .fy-b) { padding: 6px 20px 6px 18px !important; }
.fy-b--block:is(#fyb, .fy-b) { display: flex !important; width: 100% !important; }

/* survol (pointeur fin) et focus clavier */
@media (hover: hover) and (pointer: fine) {
  .fy-b:is(#fyb, .fy-b):hover { color: var(--b-fg-h) !important; translate: 0 -2px; --b-shadow: var(--b-shadow-h); }
  .fy-b:is(#fyb, .fy-b):hover::before { transform: translate(50%, -50%) scale(1); }
  .fy-b--lead:is(#fyb, .fy-b):hover::before { transform: translate(-50%, -50%) scale(1); }
  .fy-b:is(#fyb, .fy-b):hover .fy-b__arrow { transform: translateX(140%); }
  .fy-b:is(#fyb, .fy-b):hover .fy-b__arrow--in { transform: translateX(0); }
  .fy-b:hover .fy-b__icon { transform: translateX(2px) rotate(-6deg); }
}
.fy-b:is(#fyb, .fy-b):focus-visible { color: var(--b-fg-h) !important; outline: 3px solid var(--b-focus) !important; outline-offset: 3px; }
.fy-b:is(#fyb, .fy-b):focus-visible::before { transform: translate(50%, -50%) scale(1); }
.fy-b--lead:is(#fyb, .fy-b):focus-visible::before { transform: translate(-50%, -50%) scale(1); }
.fy-b:is(#fyb, .fy-b):active { translate: 0 0; }

/* bouton d'envoi des formulaires (bloc « Contactez-nous » sur fond or) */
.forminator-button-submit.fy-b:is(#fyb, .fy-b) { --b-chip: #FFFFFF; --b-chip-fg: #24454F; --b-fill: #FFFFFF; --b-fg-h: #24454F; --b-focus: #1F2A2E; --b-shadow-h: 0 14px 30px rgba(31, 42, 46, 0.25); min-width: 190px; }

/* mobile : boutons étirés à pleine largeur → libellé à gauche, pastille à droite (déjà le cas avec space-between) */
@media (max-width: 767px) {
  .fy-b:is(#fyb, .fy-b) { min-height: 52px !important; font-size: 15.5px !important; }
  .fy-b--sm:is(#fyb, .fy-b) { min-height: 46px !important; }
}

/* ---------------------------------------------------------------------
   Boutons du calculateur (redessinés par calc.js à chaque étape : style CSS seulement)
   --------------------------------------------------------------------- */
.fy-calc .fy-calc-btn {
  min-height: 50px; padding: 12px 26px; border-radius: 999px; gap: 10px;
  font-family: "Kanit", "Roboto", Arial, sans-serif; font-weight: 500; font-size: 16px; letter-spacing: .01em;
  transition: background-color .3s ease, color .3s ease, translate .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}
.fy-calc .fy-calc-btn-next { background: #DAAE51; color: #1F2A2E; padding-right: 22px; }
.fy-calc .fy-calc-btn-next::after, .fy-calc .fy-calc-btn-prev::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fy-calc .fy-calc-btn-prev::before { transform: scaleX(-1); }
.fy-calc .fy-calc-btn-prev { color: #5B6B71; background: transparent; padding-left: 18px; padding-right: 22px; text-decoration: none !important; }
@media (hover: hover) and (pointer: fine) {
  .fy-calc .fy-calc-btn-next:not(:disabled):hover { background: #24454F; color: #FFFFFF; translate: 0 -2px; box-shadow: 0 12px 26px rgba(36, 69, 79, 0.25); }
  .fy-calc .fy-calc-btn-next:not(:disabled):hover::after { transform: translateX(3px); }
  .fy-calc .fy-calc-btn-prev:not(:disabled):hover { color: #24454F; background: rgba(47, 87, 101, 0.07); text-decoration: none; }
  .fy-calc .fy-calc-btn-prev:not(:disabled):hover::before { transform: scaleX(-1) translateX(3px); }
}
.fy-calc .fy-calc-btn:focus-visible { outline: 3px solid #DAAE51; outline-offset: 3px; }

/* mouvement réduit : aucun déplacement, le remplissage apparaît sans animation */
@media (prefers-reduced-motion: reduce) {
  .fy-b:is(#fyb, .fy-b), .fy-b:is(#fyb, .fy-b)::before, .fy-b__arrow, .fy-b__icon, .fy-b__label, .fy-calc .fy-calc-btn,
  .fy-calc .fy-calc-btn-next::after, .fy-calc .fy-calc-btn-prev::before { transition: none !important; }
  .fy-b:is(#fyb, .fy-b):hover, .fy-calc .fy-calc-btn-next:hover { translate: none !important; }
  .fy-b:hover .fy-b__arrow, .fy-b:hover .fy-b__arrow--in, .fy-b:hover .fy-b__icon { transform: none; }
  .fy-b:hover .fy-b__arrow--in { opacity: 0; }
}

/* ---------------------------------------------------------------------
   Survol sans liseré : l'anticrénelage du bord arrondi laissait voir la couleur de départ en fin liseré autour du
   remplissage. Une fois le cercle déployé, le fond du bouton prend la couleur du remplissage (plus rien ne dépasse).
   La pastille de la flèche garde un contraste sur le remplissage (elle se confondait avec lui).
   --------------------------------------------------------------------- */
.fy-b:is(#fyb, .fy-b) .fy-b__chip { transition: background-color .35s ease .15s, color .35s ease .15s; }
@media (hover: hover) and (pointer: fine) {
  .fy-b:is(#fyb, .fy-b):hover { background-color: var(--b-fill) !important; transition: translate .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, color .35s ease, background-color 0s linear .42s !important; }
}
.fy-b:is(#fyb, .fy-b):focus-visible { background-color: var(--b-fill) !important; }
/* pastille au survol, par variante (couleur opposée au remplissage) */
.fy-b--dark:is(#fyb, .fy-b):is(:hover, :focus-visible) { --b-chip: #24454F; --b-chip-fg: #DAAE51; }
.fy-b--gold:is(#fyb, .fy-b):is(:hover, :focus-visible) { --b-chip: #DAAE51; --b-chip-fg: #24454F; }
.fy-b--line:is(#fyb, .fy-b):is(:hover, :focus-visible) { --b-chip: #DAAE51; --b-chip-fg: #24454F; }
.fy-b--line-light:is(#fyb, .fy-b):is(:hover, :focus-visible),
.fy-b--on-dark:is(#fyb, .fy-b):is(:hover, :focus-visible),
.forminator-button-submit.fy-b:is(#fyb, .fy-b):is(:hover, :focus-visible) { --b-chip: #24454F; --b-chip-fg: #FFFFFF; }
.fy-b--on-dark.fy-b--gold:is(#fyb, .fy-b):is(:hover, :focus-visible) { --b-chip: #24454F; --b-chip-fg: #DAAE51; }

/* mobile : dans les bandes d'appel centrées, bouton à sa largeur naturelle et centré (il occupait toute la largeur
   avec le libellé calé à gauche, ce qui cassait l'axe central du titre et du texte) */
@media (max-width: 767px) {
  .fy-cta-band:not(.fy-cta-band--row) .fy-cta-band__actions .fy-b:is(#fyb, .fy-b) { width: auto !important; max-width: 100%; flex: 0 1 auto !important; }
  .fy-cta-band:not(.fy-cta-band--row) .fy-cta-band__actions { justify-content: center !important; }
}

/* ---------------------------------------------------------------------------------------------------------
   Appels à l'action ajoutés (17.09.2026, source-live/appliquer-cta.py) : rangée de boutons en fin de section
   (« illustration + texte », « Salaires et assurances sociales », bandeau de la page À propos).
   --------------------------------------------------------------------------------------------------------- */
.fy-cta-ajout { margin-top: 32px; }
.elementor-element-c157808 > .fy-cta-ajout { width: 100%; margin-top: 30px; }
#salaires .fy-cta-ajout { margin-top: 40px; }
.fy-hero .fy-cta-ajout--bandeau { width: 100%; margin-top: 26px; }
@media (max-width: 767px) {
  .fy-cta-ajout { margin-top: 24px; justify-content: flex-start; }
  #salaires .fy-cta-ajout { margin-top: 30px; }
  /* les bandeaux restent centrés (règle mobile globale : rangées en colonne ferrées à gauche) */
  body.finesty-inner main .fy-hero .fy-cta-ajout--bandeau { align-items: center !important; }
}