/*
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,
.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 {
  background: rgba(0, 126, 161, 0.75);
}


/*******************************************************
 * 3. BOUTON DE RECHERCHE (header)
 *******************************************************/
#search-toggle {
    cursor: pointer;
}

/* ---- Base (desktop/laptop) : tu peux garder ton comportement existant ---- */
.header-search {
  position: relative;
}

.header-search-form {
	position: absolute;
	left:10%;
	width:25vw;
	display: none;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	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;
}

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

/* Taille par défaut de l'input sur desktop */
.header-search-form input[type="search"] {
  padding: 0.5rem;
	font-size: 1.15rem;
  box-sizing: border-box;
}

/* ---- Responsive : jusqu'à 1440px ---- */
@media (max-width: 1440px) {
  .header-search-form {
    position: absolute;
    top:100%;
    left: 10%;            /* mieux centré */
    width: 50vw;
}
}

/* ---- Responsive : tablette & mobile ---- */
@media (max-width: 1024px) {

  /* Le popover du formulaire : position plus stable sur petit écran */
  .header-search-form {
    position: absolute;
    top: 100%;
    left: 0%;            /* mieux centré */
    width: min(92vw, 600px);
    max-width: 92vw;
  }
}


  /* Le layout SearchWP : une vraie ligne flex, avec un input qui peut grandir */
  #searchwp-form-7 .swp-flex--row {
    display: flex;
    align-items: center;
    gap: 8px;                   /* remplace swp-flex--gap-md si trop grand */
  }

  .searchwp-form-input-container {
    flex: 1 1 auto;             /* l’input peut prendre l’espace */
    min-width: 0;               /* empêche les overflow dans les flex items */
  }

  /* L’input doit remplir son container */
  #searchwp-form-7 .swp-input--search,
  #searchwp-form-7 .swp-input {
    width: 100% !important;     /* override les styles inlines/externes */
    box-sizing: border-box;
  }

  /* Le bouton ne doit pas s’étirer */
  #searchwp-form-7 input[type="submit"].swp-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Optionnel : si l’icône loupe/placeholder prend trop de place */
  #searchwp-form-7 .swp-input--search::placeholder {
    opacity: .7;
  }

/* Couleur du bouton "recherche" */
  #searchwp-form-7 input[type=submit] {
    border-color: var(--e-global-color-accent) !important;
    background-color: var(--e-global-color-accent) !important;
    color: var(--e-global-color-bdc7cb0) !important;
}

#searchwp-form-7 input[type=submit]:hover {
    border-color: var(--e-global-color-accent) !important;
    background-color: var(--e-global-color-bdc7cb0) !important;
    color:  var(--e-global-color-accent) !important;
}

/* ---- Petits mobiles (facultatif) ---- */
@media (max-width: 480px) {
  .header-search-form {
    top: 8px;
	  left: 0%;
    width: min(95vw, 520px);
    padding: 10px;
  }

  #searchwp-form-1 .swp-flex--row {
    gap: 6px;
  }
}



/*******************************************************
 * 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: #FF7E55
}

/*******************************************************
 * 9.B) Menu - Effet réduction logo et ajustement du padding
 *******************************************************/

.off-canvas-menu-bg {
/* From https://css.glass */
background: rgba(242, 240, 239, 0.95);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}

 .header-menu-div {
/* From https://css.glass */
background: rgba(242, 240, 239, 0.25);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}

/* ===========================
   Logo : état normal (avant 60px)
   > 1440px : ton code actuel
   =========================== */
.elementor-element-5c6cf90 {
  transform: scale(1) !important;
  transition: transform 250ms ease, top 250ms ease, inset-inline-start 250ms ease, margin 250ms ease;
  transform-origin: center left; /* garde le logo aligné à gauche en réduisant */
}

/* ===========================
   Logo : état sticky (après 60px)
   Elementor ajoute .elementor-sticky--effects
   =========================== */
.elementor-sticky--effects .elementor-element-5c6cf90 {
  transform: scale(0.5) !important; /* réduction au scroll */
  margin: 0 0 0 0!important;              /* supprime/neutralise la marge au scroll */
}

/* sticky compact */
body.elementor-sticky--effects .header-menu-div.e-con > .e-con-inner { 
  padding: 0.5rem !important; 
}

/*******************************************************
 * 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;
  }
}

/*******************************************************
 * 10. SearchWP — Bouton "recherche" du formulaire de recherche -- Page "voûte documentaire"
 *******************************************************/
#searchwp-form-6 input[type=submit] {
    border-color: var(--e-global-color-45bd6ca) !important;
    background-color: var(--e-global-color-45bd6ca) !important;
    color: var(--e-global-color-bdc7cb0) !important;
}

#searchwp-form-6 input[type=submit]:hover {
    border-color: var(--e-global-color-45bd6ca) !important;
    background-color: var(--e-global-color-bdc7cb0) !important;
    color:  var(--e-global-color-45bd6ca) !important;
}

/*******************************************************
 * 11 Carroussel photo - déplacement des flèches sous les images
 *******************************************************/
.icon-list-galerie-texte .swiper .elementor-swiper-button-prev {
    position: relative !important;
    left: 10px;
    bottom: 0px;
    margin-top: 25px;
}

.icon-list-galerie-texte .swiper .elementor-swiper-button-next {
    position: relative !important;
    left: 25px;
    bottom: 0px;
    margin-top: 25px
}