/**
 * CUSTOM FIXES - BOUTONS CTA
 * Ce fichier corrige le problème du rectangle au survol des boutons
 * Chargé en dernier pour avoir la priorité absolue
 */

/* ========================================
   FIX GLOBAL: Suppression de TOUS les outlines
   ======================================== */

* {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

*:hover,
*:focus,
*:active,
*:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
}

/* ========================================
   FIX SPÉCIFIQUE: Boutons navigation (CANDIDATER, BROCHURE)
   ======================================== */

.btn-highlight,
.btn-highlight *,
.btn-highlight a,
.btn-highlight a *,
nav .btn-highlight,
nav .btn-highlight a,
.nav-candidater,
.nav-candidater a,
.nav-brochure,
.nav-brochure a {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  border-radius: 5px !important;
}

.btn-highlight:hover,
.btn-highlight *:hover,
.btn-highlight a:hover,
.btn-highlight a *:hover,
.btn-highlight:focus,
.btn-highlight *:focus,
.btn-highlight a:focus,
.btn-highlight a *:focus,
.btn-highlight:active,
.btn-highlight *:active,
.btn-highlight a:active,
.btn-highlight a *:active,
.btn-highlight:focus-visible,
.btn-highlight *:focus-visible,
.btn-highlight a:focus-visible,
.btn-highlight a *:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
}

/* ========================================
   FIX SPÉCIFIQUE: Boutons Ghost natifs (télécharger la brochure)
   ======================================== */

.kg-button-card,
.kg-button-card *,
.kg-button-card a,
.kg-button,
.kg-button *,
.kg-btn,
.kg-btn-accent,
.button-primary,
.kg-callout-card .kg-callout-actions a,
.l-post-content .kg-button-card,
.l-post-content .kg-button-card *,
.l-post-content .kg-button-card a,
.l-post-content .kg-button,
.l-post-content .kg-button *,
.l-post-content .kg-btn,
.l-post-content .kg-btn-accent,
.l-post-content .button-primary {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: 0 4px 12px rgba(237, 70, 47, 0.2) !important;
  -webkit-tap-highlight-color: transparent !important;
  
  /* Style des boutons CTA */
  display: inline-block !important;
  background-color: var(--ada-red) !important;
  color: #fff !important;
  text-align: center !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  padding: 16px 28px !important;
  min-height: 56px !important;
  border: 3px solid var(--ada-red) !important;
  border-radius: 5px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.kg-button-card:hover,
.kg-button-card *:hover,
.kg-button-card a:hover,
.kg-button:hover,
.kg-button *:hover,
.kg-btn:hover,
.kg-btn-accent:hover,
.button-primary:hover,
.l-post-content .kg-button-card:hover,
.l-post-content .kg-button-card a:hover,
.l-post-content .kg-button:hover,
.l-post-content .kg-btn:hover,
.l-post-content .kg-btn-accent:hover,
.l-post-content .button-primary:hover {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: 0 6px 16px rgba(237, 70, 47, 0.3) !important;
  background-color: #d13d28 !important;
  border-color: #d13d28 !important;
}

.kg-button-card:focus,
.kg-button-card *:focus,
.kg-button-card a:focus,
.kg-button:focus,
.kg-button *:focus,
.kg-btn:focus,
.kg-btn-accent:focus,
.button-primary:focus,
.kg-button-card:active,
.kg-button-card *:active,
.kg-button-card a:active,
.kg-button:active,
.kg-button *:active,
.kg-btn:active,
.kg-btn-accent:active,
.button-primary:active,
.kg-button-card:focus-visible,
.kg-button-card *:focus-visible,
.kg-button-card a:focus-visible,
.kg-button:focus-visible,
.kg-button *:focus-visible,
.kg-btn:focus-visible,
.kg-btn-accent:focus-visible,
.button-primary:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: 0 6px 16px rgba(237, 70, 47, 0.3) !important;
}

/* ========================================
   FIX: Tous les liens et boutons
   ======================================== */

a,
a *,
button,
button *,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

a:hover,
a:focus,
a:active,
a:focus-visible,
button:hover,
button:focus,
button:active,
button:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
}

/* ========================================
   FIX: Forcer border-box sur les boutons
   ======================================== */

.btn-highlight a,
.nav-candidater a,
.nav-brochure a {
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
}

/* ========================================
   FIX: Centrage des conteneurs de boutons UNIQUEMENT
   ======================================== */

/* Seulement les cartes de boutons Ghost natives */
.kg-button-card,
.l-post-content .kg-button-card {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* Ne PAS centrer les paragraphes ou divs - seulement les boutons eux-mêmes */

/* Sécurité: S'assurer que le contenu de l'article reste aligné normalement */
.l-post-content p,
.l-post-content div,
.l-post-content h1,
.l-post-content h2,
.l-post-content h3,
.l-post-content h4,
.l-post-content h5,
.l-post-content h6,
.l-post-content ul,
.l-post-content ol,
.l-post-content blockquote {
  text-align: left !important;
}

/* Exception: les boutons restent centrés */
.l-post-content .kg-btn,
.l-post-content .kg-btn-accent,
.l-post-content .button-primary,
.l-post-content .kg-button-card,
.l-post-content .kg-button-card a {
  text-align: center !important;
}

/* Alignement du texte des boutons */
.kg-btn,
.kg-btn-accent,
.button-primary,
.l-post-content .kg-btn,
.l-post-content .kg-btn-accent,
.l-post-content .button-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* ========================================
   FIX ULTRA-AGRESSIF: Supprimer TOUS les rectangles/bordures indésirables
   ======================================== */

.kg-btn,
.kg-btn-accent,
.button-primary,
.kg-button,
.kg-button-card a,
.l-post-content .kg-btn,
.l-post-content .kg-btn-accent,
.l-post-content .button-primary,
.l-post-content .kg-button {
  /* Supprimer TOUS les outlines et box-shadows indésirables */
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  outline-offset: 0 !important;
  
  /* Remplacer par SEULEMENT la bordure rouge qu'on veut */
  border: 3px solid var(--ada-red) !important;
  border-width: 3px !important;
  border-style: solid !important;
  border-color: var(--ada-red) !important;
  
  /* Box-shadow contrôlé - pas de rectangle */
  box-shadow: 0 4px 12px rgba(237, 70, 47, 0.2) !important;
  
  /* Supprimer tous les effets webkit */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
}

/* États hover/focus/active - AUCUN rectangle */
.kg-btn:hover,
.kg-btn:focus,
.kg-btn:active,
.kg-btn:focus-visible,
.kg-btn-accent:hover,
.kg-btn-accent:focus,
.kg-btn-accent:active,
.kg-btn-accent:focus-visible,
.button-primary:hover,
.button-primary:focus,
.button-primary:active,
.button-primary:focus-visible,
.l-post-content .kg-btn:hover,
.l-post-content .kg-btn:focus,
.l-post-content .kg-btn:active,
.l-post-content .kg-btn:focus-visible,
.l-post-content .kg-btn-accent:hover,
.l-post-content .kg-btn-accent:focus,
.l-post-content .kg-btn-accent:active,
.l-post-content .kg-btn-accent:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  outline-offset: 0 !important;
  border: 3px solid #d13d28 !important;
  box-shadow: 0 6px 16px rgba(237, 70, 47, 0.3) !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Supprimer les pseudo-éléments qui pourraient créer un rectangle */
.kg-btn::before,
.kg-btn::after,
.kg-btn-accent::before,
.kg-btn-accent::after,
.button-primary::before,
.button-primary::after {
  display: none !important;
  content: none !important;
  border: none !important;
  outline: none !important;
}

/* Responsive: adapter la taille sur mobile */
@media only screen and (max-width: 48rem) {
  .kg-btn,
  .kg-btn-accent,
  .button-primary,
  .kg-button,
  .l-post-content .kg-btn,
  .l-post-content .kg-btn-accent,
  .l-post-content .button-primary {
    font-size: 0.875rem !important;
    padding: 14px 20px !important;
    min-height: 52px !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ========================================
   SECTION CATÉGORIES DU BLOG - HOMEPAGE
   ======================================== */

.m-blog-categories {
  padding: 30px 0;
  background-color: var(--background-color);
  text-align: center;
}

@media only screen and (min-width: 48rem) {
  .m-blog-categories {
    padding: 40px 0;
  }
}

.m-blog-categories__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

@media only screen and (min-width: 48rem) {
  .m-blog-categories__list {
    gap: 20px;
  }
}

.m-blog-categories__item {
  display: inline-block;
  padding: 12px 24px;
  background-color: transparent;
  color: var(--titles-color);
  border: 2px solid var(--primary-border-color);
  border-radius: 50px;
  font-size: 0.938rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

@media only screen and (min-width: 48rem) {
  .m-blog-categories__item {
    padding: 14px 28px;
    font-size: 1rem;
  }
}

.m-blog-categories__item:hover {
  background-color: var(--titles-color);
  color: #fff;
  border-color: var(--titles-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Allow all categories to be visible on both mobile and desktop */
/* Removed max-height and overflow restrictions to show all categories */

/* ========================================
   CENTER ALL BUTTONS (but nothing else)
   ======================================== */

/* Center button-primary links - make them block and center them */
a.button-primary,
.l-post-content a.button-primary,
.l-post-content p a.button-primary {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 20px auto !important;
  text-align: center !important;
}

/* Fix for kg-button-card CONTAINER - remove all borders/outlines on container itself */
.kg-button-card,
.kg-card.kg-button-card,
.l-post-content .kg-button-card,
.l-post-content .kg-card.kg-button-card {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* CRITICAL: Remove outline/border on container hover - this is what causes the rectangle */
.kg-button-card:hover,
.kg-button-card:focus,
.kg-button-card:active,
.kg-card.kg-button-card:hover,
.kg-card.kg-button-card:focus,
.kg-card.kg-button-card:active,
.l-post-content .kg-button-card:hover,
.l-post-content .kg-button-card:focus,
.l-post-content .kg-button-card:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
}

/* ========================================
   STICKY MENU - Simple Fixed Header Approach
   ======================================== */

/* Disable AOS animations on header only (transforms break sticky/fixed positioning) */
.m-header[data-aos],
.m-mobile-topbar[data-aos],
.m-menu__main[data-aos] {
  animation: none !important;
  transform: none !important;
}

/* Make header fixed at top */
.m-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background-color: var(--header-background-color) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Keep header visible - override headroom hide behavior */
.m-header.headroom--pinned,
.m-header.headroom--unpinned,
.m-header.headroom--top,
.m-header.headroom--not-top {
  transform: translateY(0) !important;
}

/* NO padding on main-wrap by default */
.main-wrap {
  padding-top: 0 !important;
}

/* Push hero section down so it starts AFTER the fixed header */
.m-hero {
  margin-top: 50px !important;
  padding-top: 70px !important;
}

@media only screen and (min-width: 48rem) {
  .m-hero {
    margin-top: 90px !important;
    padding-top: 100px !important;
  }
}

/* Hero content - no extra spacing needed since hero is already pushed down */
.m-hero__content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* For content sections that come directly after header (no hero) */
.main-wrap > .l-content {
  padding-top: 90px !important;
}

@media only screen and (min-width: 48rem) {
  .main-wrap > .l-content {
    padding-top: 120px !important;
  }
}

/* Exception: if there's a hero, content doesn't need extra padding */
.m-hero ~ .l-content,
.m-hero + main .l-content {
  padding-top: 40px !important;
}

@media only screen and (min-width: 48rem) {
  .m-hero ~ .l-content,
  .m-hero + main .l-content {
    padding-top: 60px !important;
  }
}

/* Mobile menu overlay */
.m-menu.opened {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
}

.m-icon-button.as-close-menu {
  z-index: 10000 !important;
}