/*
Theme Name: Hello Elementor Child
Description: Child theme pour Hello Elementor
Author: Nicolas St-Germain, webmestre Service des communications de la CSN
Template: hello-elementor
Version: 1.0.0
*/

/* Ajoute ici ton CSS custom si nécessaire */

/*******************************************************
 * 1. BULLET POINTS (site-wide)
 *******************************************************/
.bullet-point-wysiwyg ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.bullet-point-wysiwyg ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.25rem;
  line-height: 1.6;
}

.bullet-point-wysiwyg ul li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400; /* fa-regular */
  content: "\f35a"; /* fa-arrow-circle-right */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.1rem;
}


/*******************************************************
 * 2. EFFET GLASS (containers)
 *******************************************************/
.glass-container,
.glass-container-primaire-fonce,
.glass-container-light {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glass-container {
  background: rgba(255, 255, 255, 0.5);
}

.glass-container-light {
  background: rgba(255, 255, 255, 0.25);
}

.glass-container-primaire-fonce {
  background: rgba(14, 123, 188, 0.75);
}


/*******************************************************
 * 3. BOUTON DE RECHERCHE (header)
 *******************************************************/
.header-search {
  position: relative;
}

.header-search-form {
  position: absolute;
  top: 100%;
  left: 80%;
  transform: translateX(-50%);
  display: none;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 9999;
}

.header-search-form.is-visible {
  display: block;
  animation: fadeIn 0.3s ease;
}

.header-search-form input[type="search"] {
  width: 220px;
  padding: 6px 10px;
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-5px);}
  to   {opacity: 1; transform: translateY(0);}
}


/*******************************************************
 * 4. LOOP GRID — Effets hover + underline animés
 *******************************************************/
.carte-hover-zoom {
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
}

.carte-hover-zoom .loop-article-img-hover {
  transform: scale(1);
  transition: transform 0.5s ease;
}

.carte-hover-zoom:hover .loop-article-img-hover {
  transform: scale(1.1);
}

/* Underline animé */
.titre-article-loop {
  position: relative;
  display: inline-block;
}

.titre-article-loop::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  transition: width 0.3s ease;
}

.titre-article-loop-BGblue::after {
  background-color: var(--e-global-color-1ad8b9d);
}
.titre-article-loop-BGW::after {
  background-color: #fff;
}

.carte-hover-zoom:hover .titre-article-loop::after {
  width: 100%;
}

.link-underline a:hover {
  text-decoration: underline;
}


/*******************************************************
 * 5. The Events Calendar (organizer links + layout)
 *******************************************************/
.tec-events-elementor-event-widget__organizer-email-link,
.tec-events-elementor-event-widget__organizer-phone-link {
  color: var(--e-global-color-bdc7cb0) !important;
}

.tec-events-elementor-event-widget__organizer-email-link:hover,
.tec-events-elementor-event-widget__organizer-phone-link:hover {
  color: var(--e-global-color-accent) !important;
}

/* Retire la largeur max du template standard */
.tribe-events-pg-template {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

.tec-events-elementor-event-widget__organizer
  .tec-events-elementor-event-widget__organizer-email-wrapper,
.tec-events-elementor-event-widget__organizer
  .tec-events-elementor-event-widget__organizer-phone-wrapper,
.tec-events-elementor-event-widget__organizer
  .tec-events-elementor-event-widget__organizer-website-wrapper {
    margin: 0 !important;
}


/*******************************************************
 * 6. Général
 *******************************************************/
sup {
  text-transform: lowercase;
}


/*******************************************************
 * 7. Hover – révéler une liste cachée
 *******************************************************/
.hover-container .hidden-list {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hover-container:hover .hidden-list {
  opacity: 1;
  visibility: visible;
}


/*******************************************************
 * 8. Loop Documents — Gras sur termes / date
 *******************************************************/
.info-loop-document :is(.elementor-post-info__terms-list-item, time) {
  font-weight: bold;
}

/*******************************************************
 * 9.A) Menu - Desktop liste déroulante
 *******************************************************/
.menu-desktop .menu-item li:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 5px;
    text-decoration-color: #52A9DE
}

/*******************************************************
 * 9.B) Menu - Effet transition logo site
 *******************************************************/

 /* État par défaut : visible*/
.logo-menu-big {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.elementor-sticky--active .logo-menu-big {
  display:none;
  opacity: 0;
  transform: translateX(-12px);
  filter: blur(4px);
  transition:
    opacity 320ms ease,
    transform 320ms ease,
    filter 320ms ease;
  will-change: opacity, transform, filter; /* aide la perf pendant le scroll */
}

/* Accessibilité : réduit/retire les animations selon les préférences */
@media (prefers-reduced-motion: reduce) {
  .sticky-logo {
    transition: none;
  }
}

/* État par défaut : invisible, décalée à gauche, et légèrement floutée */
.sticky-logo-menu-small {
  opacity: 0;
  transform: translateX(-12px);
  filter: blur(4px);
  transition:
    opacity 320ms ease,
    transform 320ms ease,
    filter 320ms ease;
  will-change: opacity, transform, filter; /* aide la perf pendant le scroll */
}

/* État sticky : visible, en place, net */
.elementor-sticky--active .sticky-logo-menu-small {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* Accessibilité : réduit/retire les animations selon les préférences */
@media (prefers-reduced-motion: reduce) {
  .sticky-logo {
    transition: none;
  }
}

/*******************************************************
 * 10. SearchWP — Chip "mots-clés" (proche visuel BFWE) -- Page "voûte documentaire"
 *******************************************************/
.swp-chip, .swp-chip__close {
  display: inline-flex;
  align-items: center;
  gap: .10px;
  font-size: var(--e-global-typography-5721314-font-size);
  line-height: var(--e-global-typography-5721314-line-height);
  letter-spacing: var(--e-global-typography-5721314-letter-spacing);
  font-family: var( --e-global-typography-5721314-font-family ), Sans-serif;
  font-weight: var( --e-global-typography-5721314-font-weight );
  text-transform: var( --e-global-typography-5721314-text-transform );
  color:var( --e-global-color-1ad8b9d );
}

.swp-chip__close {
  place-items: center;
  cursor: pointer;
  transition: .3s;
  margin-right: 0.15rem;
  padding:0;
  border : 0;
  background-color: transparent;
  border-radius:0;
}

.swp-chip__close:hover {
  color: var(--e-global-color-primary);
  margin-right: 0.15rem;
  padding:0;
  border : 0;
  background-color: transparent;
  border-radius:0;
}

.swp-chip__close:active {
  transform: scale(.92);
}

/* Alignement avec les chips BFWE si présents dans le même conteneur */
.quick-deselect-ec5ca22 .swp-chip + .bpfwe-filter-chip,
.quick-deselect-ec5ca22 .bpfwe-filter-chip + .swp-chip {
  margin-left: .35rem;
}

/* Responsif : réduire la taille sur mobile étroit */
@media (max-width: 480px) {
  .swp-chip {
    font-size: .88rem;
    padding: .22rem .5rem .22rem .45rem;
  }
  .swp-chip__close {
    width: 1.25rem;
    height: 1.25rem;
  }
}