/* =====================================================================
   OXYGÈNE — Feuille de style identité + correctifs (chargée en DERNIER)
   Association Oxygène 2026 · orange dominant, vert accent, anthracite
   Fait autorité sur : en-tête responsive (mobile-first) + boutons.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. EN-TÊTE — logo à gauche, menu à droite, TOUJOURS sur une rangée
   --------------------------------------------------------------------- */

/* Le wrapper de base du template a flex-wrap:wrap => le bouton "Menu"
   tombait sous le logo. On force une rangée unique. */
.tj-header-area .header-wrapper {
  flex-wrap: nowrap;
}

/* Le logo ne rétrécit pas */
.tj-header-area .site-logo {
  flex: 0 0 auto;
}
.tj-header-area .site-logo .logo img {
  height: 40px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}

/* Bouton menu mobile : largeur au contenu, poussé à droite */
.tj-header-area .menu_btn {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0;
  margin-inline-start: auto;
  white-space: nowrap;
}

/* Le "pousseur" injecté par meanmenu casse parfois la rangée : on le neutralise */
.tj-header-area .header-wrapper > .mean-push {
  display: none !important;
}

@media (max-width: 575px) {
  .tj-header-area .site-logo .logo img { height: 34px; }
}

/* ---------------------------------------------------------------------
   2. BOUTONS — plats, arrondis, mobile-first, jamais étirés
   (recodés proprement par-dessus la pilule animée d'origine)
   --------------------------------------------------------------------- */

.tj-primary-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: 100%;
  vertical-align: middle;
  padding: 0 !important;
  border: none;
  border-radius: 12px;
  background-color: var(--tj-color-theme-primary);
  color: #fff;
  font-weight: var(--tj-fw-bold, 700);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(248, 167, 60, 0.28);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Structure interne : icône + texte côte à côte, centrés, taille = contenu */
.tj-primary-btn .btn_inner {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  padding: 15px 26px;
  text-align: center;
}

/* On supprime la pastille/cercle animé d'origine */
.tj-primary-btn .btn_inner::before {
  display: none !important;
}

/* Icône et texte : ne grandissent pas, pas de positionnement absolu résiduel */
.tj-primary-btn .btn_icon,
.tj-primary-btn .btn_text {
  position: static !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
}

.tj-primary-btn .btn_icon {
  display: inline-flex;
  align-items: center;
  color: currentColor;
  font-size: 1.05em;
  margin: 0;
}
/* Le template empile 2 flèches (pour l'anim pilule) : on n'en garde qu'une */
.tj-primary-btn .btn_icon > span { overflow: visible; }
.tj-primary-btn .btn_icon > span i {
  position: static !important;
  transform: none !important;
}
.tj-primary-btn .btn_icon > span i:last-child { display: none !important; }

.tj-primary-btn .btn_text {
  display: inline-flex;
  overflow: visible;
  color: currentColor;
  text-shadow: none !important;
  white-space: nowrap;
}
.tj-primary-btn .btn_text > span { transform: none !important; }

/* Survol : orange foncé + léger soulèvement */
.tj-primary-btn:hover,
.tj-primary-btn:focus-visible {
  background-color: var(--tj-color-theme-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(222, 138, 23, 0.38);
}

/* ---- Variante claire (header / hero / white) : blanc → orange au survol ---- */
.tj-primary-btn.white-btn,
.tj-primary-btn.header_btn,
.slider-wrapper .slider-content .slider-button {
  background-color: #fff !important;
  box-shadow: 0 4px 14px rgba(37, 33, 32, 0.12);
}
.tj-primary-btn.white-btn .btn_text,
.tj-primary-btn.white-btn .btn_icon,
.tj-primary-btn.header_btn .btn_text,
.tj-primary-btn.header_btn .btn_icon,
.slider-wrapper .slider-content .slider-button .btn_text,
.slider-wrapper .slider-content .slider-button .btn_icon {
  color: var(--tj-color-heading-primary) !important;
}
.tj-primary-btn.white-btn:hover,
.tj-primary-btn.header_btn:hover,
.slider-wrapper .slider-content .slider-button:hover {
  background-color: var(--tj-color-theme-primary) !important;
  box-shadow: 0 10px 22px rgba(248, 167, 60, 0.35);
}
.tj-primary-btn.white-btn:hover .btn_text,
.tj-primary-btn.white-btn:hover .btn_icon,
.tj-primary-btn.header_btn:hover .btn_text,
.tj-primary-btn.header_btn:hover .btn_icon,
.slider-wrapper .slider-content .slider-button:hover .btn_text,
.slider-wrapper .slider-content .slider-button:hover .btn_icon {
  color: #fff !important;
}

/* ---- Confort tactile sur mobile ---- */
@media (max-width: 575px) {
  .tj-primary-btn .btn_inner { padding: 14px 22px; }
  .tj-primary-btn { font-size: 14px; }
}

/* ---------------------------------------------------------------------
   Bouton « Faire un don » — toujours visible dans l'en-tête (barre utilitaire)
   --------------------------------------------------------------------- */
.header-don-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1;
  background:var(--tj-color-theme-primary);color:#fff;
  font-weight:800;font-size:14px;padding:12px 20px;border-radius:12px;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 6px 16px rgba(248,167,60,.32);
}
.header-don-btn:hover{background:var(--tj-color-theme-primary-dark);color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(248,167,60,.42)}
.header-don-btn svg{width:15px;height:15px}
/* Variante verte — bouton « Boutique » (remplace « Faire un don ») */
.header-shop-btn{background:var(--tj-color-theme-secondary);box-shadow:0 6px 16px rgba(9,133,71,.30)}
.header-shop-btn:hover{background:var(--oxy-green-deep);box-shadow:0 10px 22px rgba(9,133,71,.42)}
/* Bouton « S'engager » — orange (base .header-don-btn) ; espace entre les 2 CTA */
.header_right_info{gap:10px}
/* Titres de la nav centrés dans la barre */
.tj-header-area.header-2 .mainmenu > ul{justify-content:center}
@media(max-width:1199px){.header-don-btn{padding:10px 16px;font-size:13px}}

/* ---------------------------------------------------------------------
   Méga-menu 9 entrées — resserrer l'espacement pour tout faire tenir
   --------------------------------------------------------------------- */
.tj-header-area.header-2 .header-wrapper { column-gap: 28px !important; }
.tj-header-area.header-2 .mainmenu ul:not(.sub-menu) > li > a {
  font-size: 14px !important;
  padding: 30px 7px !important;
  letter-spacing: -0.01em;
}
@media (min-width:992px) and (max-width:1399px){
  .tj-header-area.header-2 .mainmenu ul:not(.sub-menu) > li > a { font-size: 13px !important; padding: 28px 5px !important; }
  .header-don-btn { padding: 9px 13px; font-size: 12.5px; }
}
/* Sous-menus : largeur confortable */
.tj-header-area .mainmenu .sub-menu { min-width: 250px; }