/* ==========================================================================
   Kit AD83 — Base : variables, jetons et boutons
   Chargé après la feuille du thème (filtre af_kit_ad83_ui_deps). Couleurs et polices : variables --af-kit-*.
   Sommaire :
   0. Variables du Kit AD83 (valeurs par défaut neutres)
   1. Jetons (--btn-*, --af-h*)
   2. Boutons : .af_button, .fl-button (variantes primaire, neutre, contour, --sm)
   3. Titres, listes, focus global : css/af_kit_ad83-content.css (thème AD83 seulement)
   5. Focus clavier des boutons
   ========================================================================== */

/* 0. Variables du Kit AD83 : le thème les renseigne depuis ses jetons ; valeurs par défaut neutres. */
:where(:root) {
  --af-kit-color-dark: CanvasText;
  --af-kit-color-green-300: LinkText;
  --af-kit-color-green-50: color-mix(in srgb, LinkText 8%, Canvas);
  --af-kit-color-green-700: LinkText;
  --af-kit-color-neutral-0: Canvas;
  --af-kit-color-neutral-100: color-mix(in srgb, CanvasText 10%, Canvas);
  --af-kit-color-neutral-200: color-mix(in srgb, CanvasText 20%, Canvas);
  --af-kit-color-neutral-300: color-mix(in srgb, CanvasText 30%, Canvas);
  --af-kit-color-neutral-400: color-mix(in srgb, CanvasText 40%, Canvas);
  --af-kit-color-neutral-50: color-mix(in srgb, CanvasText 5%, Canvas);
  --af-kit-color-neutral-500: color-mix(in srgb, CanvasText 50%, Canvas);
  --af-kit-color-neutral-600: color-mix(in srgb, CanvasText 60%, Canvas);
  --af-kit-color-neutral-700: color-mix(in srgb, CanvasText 70%, Canvas);
  --af-kit-color-neutral-800: color-mix(in srgb, CanvasText 80%, Canvas);
  --af-kit-color-neutral-900: CanvasText;
  --af-kit-color-pink-50: color-mix(in srgb, LinkText 8%, Canvas);
  --af-kit-color-pink-600: LinkText;
  --af-kit-color-primary: LinkText;
  --af-kit-color-primary-dark: LinkText;
  --af-kit-color-primary-rgb: 0, 0, 0;
  --af-kit-color-primary-dark-rgb: 11, 113, 89;
  --af-kit-color-text: CanvasText;
  --af-kit-overlay-black-100: color-mix(in srgb, CanvasText 10%, transparent);
  --af-kit-overlay-black-200: color-mix(in srgb, CanvasText 20%, transparent);
  --af-kit-overlay-black-50: color-mix(in srgb, CanvasText 5%, transparent);
  --af-kit-overlay-white-300: color-mix(in srgb, Canvas 30%, transparent);
  --af-kit-radius-lg: 15px;
  --af-kit-radius-md: 8px;
  --af-kit-radius-sm: 6px;
  --af-kit-radius-xl: 999px;
  --af-kit-spacing-0: 4px;
  --af-kit-spacing-1: 8px;
  --af-kit-spacing-2: 12px;
  --af-kit-spacing-3: 20px;
  --af-kit-spacing-4: 32px;
  --af-kit-spacing-5: 52px;
  --af-kit-form-body: CanvasText;
  --af-kit-form-border-soft: color-mix(in srgb, CanvasText 13%, Canvas);
  --af-kit-form-muted: GrayText;
  --af-kit-form-req: LinkText;
  --af-kit-font-title: sans-serif;
  --af-kit-font-text: sans-serif;
}

/* 1. Jetons */
:root {
  /* Texte sur --color-primary : blanc (décision client ; vert #17af8c + blanc = 2,8:1, compensé par Montserrat 700 majuscules).
     Sites organisateurs : bascule en --color-dark si leur couleur primaire est trop claire (ratio blanc < 2,5:1), cf. functions.php. */
  --color-on-primary: var(--af-kit-color-neutral-0);
  /* Contour de focus clavier (sur fond sombre : --focus-ring-color-inverse) */
  --focus-ring-color: var(--af-kit-color-dark);
  --focus-ring-color-inverse: var(--af-kit-color-neutral-0);
  /* utiliser « 2px solid var(--focus-ring-color) » (une variable composée serait figée sur :root) */
  --focus-ring-offset: 2px;

  /* Boutons — 2 tailles : normale 48px (cible tactile ≥ 44px) et compacte 36px */
  --btn-height: 48px;
  --btn-padding-x: 28px;
  --btn-font-size: 0.875rem;          /* 14px */
  --btn-height-sm: 36px;
  --btn-padding-x-sm: 16px;
  --btn-font-size-sm: 0.8125rem;      /* 13px */
  --btn-radius: var(--af-kit-radius-xl);
  --btn-font-family: var(--af-kit-font-title);
  --btn-font-weight: 700;
  --btn-line-height: 1;
  --btn-letter-spacing: 1px;
  --btn-text-transform: uppercase;
  --btn-border-width: 2px;
  --btn-transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;

  /* Primaire : vert diocésain (ou couleur du site organisateur) + texte --color-on-primary */
  --btn-primary-bg: var(--af-kit-color-primary);
  --btn-primary-color: var(--color-on-primary);
  --btn-primary-bg-hover: var(--af-kit-color-dark);
  --btn-primary-color-hover: var(--af-kit-color-neutral-0);
  /* Secondaire : bleu nuit */
  --btn-secondary-bg: var(--af-kit-color-dark);
  --btn-secondary-color: var(--af-kit-color-neutral-0);
  --btn-secondary-bg-hover: var(--af-kit-color-primary);
  --btn-secondary-color-hover: var(--color-on-primary);
  /* Tertiaire : neutre */
  --btn-tertiary-bg: var(--af-kit-color-neutral-200);
  --btn-tertiary-color: var(--af-kit-color-neutral-900);
  --btn-tertiary-bg-hover: var(--af-kit-color-dark);
  --btn-tertiary-color-hover: var(--af-kit-color-neutral-0);
  /* Transparent (contour) */
  --btn-outline-bg: transparent;
  --btn-outline-border: var(--af-kit-color-dark);
  --btn-outline-color: var(--af-kit-color-dark);
  --btn-outline-bg-hover: var(--af-kit-color-dark);
  --btn-outline-border-hover: var(--af-kit-color-dark);
  --btn-outline-color-hover: var(--af-kit-color-neutral-0);
  /* Lien */
  --btn-link-color: var(--af-kit-color-primary);
  --btn-link-color-hover: var(--af-kit-color-dark);
  /* Inversés (fonds sombres / photos) */
  --btn-inv-hover-bg: var(--af-kit-color-neutral-0);
  --btn-inv-hover-color: var(--af-kit-color-dark);
  --btn-inv-tertiary-bg: color-mix(in srgb, var(--af-kit-color-neutral-900) 45%, transparent); /* voile sombre + flou : lisible sur photo claire ou foncée */
  --btn-inv-tertiary-border: var(--af-kit-overlay-white-300);
  --btn-inv-link-color-hover: var(--af-kit-color-green-300);

  /* Titres de contenu (Montserrat, casse normale) */
  --af-h2-size: 1.5rem;     /* 24px */
  --af-h2-weight: 700;
  --af-h2-lh: 1.3;
  --af-h3-size: 1.2rem;     /* 19px */
  --af-h3-weight: 600;
  --af-h3-lh: 1.35;
  --af-h4-size: 1rem;       /* 16px */
  --af-h4-weight: 600;
  --af-h4-lh: 1.4;
  --af-heading-color: var(--af-kit-color-text);

}

/* 2. Boutons
   Une seule règle de rendu lit des variables locales (--_bg, --_fg, --_bd + états -h) ;
   chaque variante ne fait que redéfinir ces variables → pas de course à la spécificité.
   Variantes : primaire (défaut) | --secondary | --tertiary | --outline | --link, chacune en --inverse.
   Tailles : normale | --sm. Correspondances : afWork [bouton] style-primaire / -secondaire /
   -transparent / -blanc (= secondaire inversé) / size-compact (= --sm) ; GF (af_agenda-forms.css) ;
   .fl-button Beaver = primaire. Le rayon pilule est forcé (!important) : BB Theme le remet à 0
   au survol des input[type=button] et certains modules imposent 8px. */
:where(.af_button, .fl-button) {
  --_bg: var(--btn-primary-bg);
  --_fg: var(--btn-primary-color);
  --_bd: var(--btn-primary-bg);
  --_bg-h: var(--btn-primary-bg-hover);
  --_fg-h: var(--btn-primary-color-hover);
  --_bd-h: var(--btn-primary-bg-hover);
  --_h: var(--btn-height);
  --_px: var(--btn-padding-x);
  --_fs: var(--btn-font-size);
  --_tt: var(--btn-text-transform);
  --_ls: var(--btn-letter-spacing);
}
.af_button,
a.fl-button,
button.fl-button,
input.fl-button,
body .fl-builder-content .fl-button:is(a, button),
body .fl-builder-content a.fl-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--af-kit-spacing-1);
  box-sizing: border-box;
  height: var(--_h);          /* hauteur fixe : bordure (2px, transparente ou non) comprise, identique pour toutes les variantes */
  min-height: var(--_h);
  padding: 0 var(--_px);
  margin: 0;
  background: var(--_bg);
  border: var(--btn-border-width) solid var(--_bd);
  border-radius: var(--btn-radius) !important;
  color: var(--_fg);
  font-family: var(--btn-font-family);
  font-size: var(--_fs);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--_ls);
  text-transform: var(--_tt);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--btn-transition);
}
/* Boutons BB : la hauteur fixe l'emporte sur le padding vertical et l'affichage du module (sinon texte décentré) */
body .fl-builder-content .fl-button:is(a, button):not(#af_kit_reset) { display: inline-flex; padding-top: 0; padding-bottom: 0; }
body .fl-builder-content :is(.fl-button-width-custom, .fl-button-width-full) .fl-button:is(a, button):not(#af_kit_reset) { padding-left: var(--af-kit-spacing-2); padding-right: var(--af-kit-spacing-2); }
:is(.af_button, a.fl-button, button.fl-button, input.fl-button):is(:hover, :focus-visible),
body .fl-builder-content .fl-button:is(a, button):is(:hover, :focus-visible) {
  background: var(--_bg-h);
  border-color: var(--_bd-h);
  border-radius: var(--btn-radius) !important;
  color: var(--_fg-h);
  text-decoration: none;
}
:is(.af_button, .fl-button):active { transform: translateY(1px); }
/* Peinture à spécificité renforcée (classe doublée) : passe devant les styles de liens des zones de contenu
   (.af_page_content a, .af_event_content a : couleur + soulignement) sans toucher aux marges de contexte. */
.af_button.af_button,
.fl-button.fl-button {
  background: var(--_bg);
  border-color: var(--_bd);
  color: var(--_fg);
  text-decoration: none;
}
.af_button.af_button:is(:hover, :focus-visible),
.fl-button.fl-button:is(:hover, :focus-visible) {
  background: var(--_bg-h);
  border-color: var(--_bd-h);
  color: var(--_fg-h);
  text-decoration: none;
}
.af_button.af_button.af_button--link,
.af_button.af_button.af_button--link:is(:hover, :focus-visible) { text-decoration: underline; }
/* Texte des boutons BB dans un span : il hérite (police sauf icônes) */
.fl-button *,
.fl-button:is(:hover, :focus-visible) *,
body .fl-builder-content .fl-button.fl-button *,
body .fl-builder-content .fl-button.fl-button:is(:hover, :focus-visible) * { color: inherit; } /* BB colore le span en blanc */
.fl-button :not(i, .fl-button-icon),
.fl-button:is(:hover, :focus-visible) :not(i, .fl-button-icon),
body .fl-builder-content .fl-button.fl-button :not(i, .fl-button-icon),
body .fl-builder-content .fl-button.fl-button:is(:hover, :focus-visible) :not(i, .fl-button-icon) { font: inherit; letter-spacing: inherit; }

/* afWork [bouton] : le plugin injecte background-color / border-color en !important
   (réglages « Bouton style primaire / secondaire ») → on rebranche sur les variables */
body .af_button[class*="style-"] {
  background-color: var(--_bg) !important;
  border-color: var(--_bd) !important;
  color: var(--_fg) !important;
}
body .af_button[class*="style-"]:is(:hover, :focus-visible) {
  background-color: var(--_bg-h) !important;
  border-color: var(--_bd-h) !important;
  color: var(--_fg-h) !important;
}

/* — Variantes — */
.af_button--secondary,
.af_button.style-secondaire {
  --_bg: var(--btn-secondary-bg);       --_fg: var(--btn-secondary-color);       --_bd: var(--btn-secondary-bg);
  --_bg-h: var(--btn-secondary-bg-hover); --_fg-h: var(--btn-secondary-color-hover); --_bd-h: var(--btn-secondary-bg-hover);
}
.af_button--tertiary,
.af_button--neutral,
.af_button.neutral {
  --_bg: var(--btn-tertiary-bg);       --_fg: var(--btn-tertiary-color);       --_bd: var(--btn-tertiary-bg);
  --_bg-h: var(--btn-tertiary-bg-hover); --_fg-h: var(--btn-tertiary-color-hover); --_bd-h: var(--btn-tertiary-bg-hover);
}
.af_button--outline,
.af_button.style-transparent {
  --_bg: var(--btn-outline-bg);       --_fg: var(--btn-outline-color);       --_bd: var(--btn-outline-border);
  --_bg-h: var(--btn-outline-bg-hover); --_fg-h: var(--btn-outline-color-hover); --_bd-h: var(--btn-outline-border-hover);
}
.af_button--link {
  --_bg: transparent; --_fg: var(--btn-link-color);       --_bd: transparent;
  --_bg-h: transparent; --_fg-h: var(--btn-link-color-hover); --_bd-h: transparent;
  --_px: 0;
  --_tt: none;
  --_ls: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.af_button--link::after { content: "→"; font-weight: 400; transition: transform 0.2s ease; }
.af_button--link:is(:hover, :focus-visible) { text-decoration: underline; }
.af_button--link:hover::after { transform: translateX(3px); }

/* — Inversés : fonds sombres ou photos (.af_button--inverse, ou tout bouton dans .af_on-dark) — */
:is(.af_button, .fl-button):is(.af_button--inverse, .af_button--on-dark),
:is(.af_on-dark, .af_event_card_infos) :is(.af_button, .fl-button) {
  --_bg-h: var(--btn-inv-hover-bg); --_fg-h: var(--btn-inv-hover-color); --_bd-h: var(--btn-inv-hover-bg);
}
.af_button:is(.af_button--inverse, .af_button--on-dark):is(.af_button--secondary),
.af_on-dark .af_button:is(.af_button--secondary, .style-secondaire),
.af_button.style-blanc {
  --_bg: var(--af-kit-color-neutral-0); --_fg: var(--af-kit-color-dark); --_bd: var(--af-kit-color-neutral-0);
  --_bg-h: var(--btn-secondary-bg-hover); --_fg-h: var(--btn-secondary-color-hover); --_bd-h: var(--btn-secondary-bg-hover);
}
.af_button:is(.af_button--inverse, .af_button--on-dark):is(.af_button--tertiary, .af_button--neutral, .neutral),
.af_on-dark .af_button:is(.af_button--tertiary, .af_button--neutral, .neutral) {
  --_bg: var(--btn-inv-tertiary-bg); --_fg: var(--af-kit-color-neutral-0); --_bd: var(--btn-inv-tertiary-border);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.af_button:is(.af_button--inverse, .af_button--on-dark):is(.af_button--outline, .style-transparent),
.af_on-dark .af_button:is(.af_button--outline, .style-transparent) {
  --_bg: transparent; --_fg: var(--af-kit-color-neutral-0); --_bd: var(--af-kit-color-neutral-0);
}
.af_button:is(.af_button--inverse, .af_button--on-dark).af_button--link,
.af_on-dark .af_button.af_button--link {
  --_fg: var(--af-kit-color-neutral-0); --_bg-h: transparent; --_bd-h: transparent; --_fg-h: var(--btn-inv-link-color-hover);
}

/* — Tailles — */
.af_button--sm,
.af_button.size-compact,
.fl-button.size-compact {
  --_h: var(--btn-height-sm);
  --_px: var(--btn-padding-x-sm);
  --_fs: var(--btn-font-size-sm);
  --_tt: none;   /* compacts : casse normale */
  --_ls: 0;
}
.af_button--link.af_button--sm { --_px: 0; }

/* Pleine largeur */
.af_button--block { display: flex; width: 100%; }

/* 5. Focus clavier des boutons */
:is(.af_button, .fl-button):focus-visible {
  outline: 2px solid var(--focus-ring-color) !important;     /* BB Theme / plugins remettent outline:0 sur a:focus */
  outline-offset: var(--focus-ring-offset) !important;
}
.af_on-dark,
:is(.af_button, .fl-button):is(.af_button--inverse, .af_button--on-dark) {
  --focus-ring-color: var(--focus-ring-color-inverse);
}