/* =============================================================
   Bourille — theme.css
   Couche d'overrides scopée .b-* pour cohabiter sans collision
   avec d'autres thèmes éventuels. Le gros du design vient des
   feuilles main.css / default.css / bootstrap.min.css de Apexa
   (chargées avant ce fichier).
   ============================================================= */

/* Hooks de scoping (à enrichir au fil des besoins) */
.b-site-header,
.b-site-footer,
.b-actualites { font-family: inherit; }

/* Couleurs Bourille (ajustements éventuels d'accent) */
.b-site-header .btn,
.b-actualites .btn { letter-spacing: .02em; }

/* Pagination liste articles (équivalent .q-pagination côté Questor) */
.b-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}
.b-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--bs-border-color, #e5e5e5);
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  transition: background .2s ease, color .2s ease;
}
.b-pagination__link.is-active,
.b-pagination__link:hover { background: var(--tg-theme-primary, #ff7a00); color: #fff; border-color: transparent; }

/* Bannière : voile blanc semi-transparent en dégradé gauche -> droite (lisibilité du texte) */
.banner-area { position: relative; }
.banner-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.4) 40%, rgba(255,255,255,0) 75%);
  z-index: 1;
  pointer-events: none;
}
.banner-area > .container { position: relative; z-index: 2; }

/* Bannière : bloc "Suivez-nous" + réseaux sociaux en horizontal, aligné à gauche (lisible, sans chevauchement) */
.banner-area .banner-social {
  position: static;
  writing-mode: horizontal-tb;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 35px;
}
.banner-area .banner-social .title {
  transform: none;
  writing-mode: horizontal-tb;
  margin: 0;
}
.banner-area .banner-social .title::before { display: none; }
.banner-area .banner-social .list-wrap { flex-direction: row; gap: 14px; }
.banner-area .banner-social .list-wrap li a { transform: none; }

/* Carte Leaflet : isoler son contexte d'empilement pour qu'elle reste SOUS le header
   flottant (.sticky-menu, z-index:99). Sans ça, ses couches internes (jusqu'à z-index 800)
   passent par-dessus le menu. */
.b-map, .contact-map {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* Réseaux sociaux : uniquement 2 profils LinkedIn (Anthony / Jean-Philippe).
   Même réseau → on distingue par le prénom : pastille "icône LinkedIn + prénom".
   Utilisé dans la bannière (.banner-social), le footer (.footer-social) et le menu mobile (.social-links).
   Les liens sont en inline-block (pas flex) pour que l'espace texte " " entre l'icône et le prénom soit rendu tel quel ;
   les sélecteurs sont préfixés pour l'emporter sur les display:block/flex de main.css. */
.social-linkedin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.social-linkedin li a,
.banner-area .banner-social .social-linkedin li a,
.footer-social .social-linkedin li a,
.tgmobile__menu-bottom .social-links .social-linkedin li a {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 8px 14px;
  border-radius: 30px;
  background: #eaf1f4;
  color: var(--tg-theme-primary-500);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transform: none;
  transition: all 0.3s ease-out 0s;
}
.social-linkedin li a i { font-size: 16px; line-height: 1; vertical-align: -1px; }
.social-linkedin li a:hover,
.banner-area .banner-social .social-linkedin li a:hover,
.footer-social .social-linkedin li a:hover,
.tgmobile__menu-bottom .social-links .social-linkedin li a:hover {
  background: var(--tg-theme-primary-500);
  color: var(--tg-color-white-default);
}
/* Bannière : fond photo sombre → pastille semi-transparente claire */
.banner-area .banner-social .social-linkedin li a { background: rgba(255, 255, 255, 0.9); }