/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 03 2026 | 19:04:55 */
/* =========================================================
   HERO ACCORDION — Module réutilisable (Elementor)
   Cibles: .hero-accordion (colonne) + .hero-item (carte)
   Image = background Elementor sur .hero-item
   Open state mobile/tablette = .hero-accordion.is-open (via JS)
========================================================= */

/* ---------- SCOPE ----------
1) Idéal: ajoute la classe "hero-accordion-module" à la SECTION Elementor
2) Sinon: auto-détection via :has() (section qui contient des colonnes .hero-accordion)
--------------------------------------------------------- */
:where(.hero-accordion-module, .elementor-section:has(.elementor-container > .hero-accordion)) {}

/* ---------- 1) Row layout (flex) ---------- */

:where(.hero-accordion-module, .elementor-section:has(.elementor-container > .hero-accordion))
.elementor-container:has(> .hero-accordion){
  display: flex !important;
  align-items: stretch !important;
  gap: clamp(18px, 1.8vw, 34px) !important;
}

:where(.hero-accordion-module, .elementor-section:has(.elementor-container > .hero-accordion))
.elementor-container:has(> .hero-accordion) > .hero-accordion{
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  transition: flex .55s cubic-bezier(.2,.8,.2,1);
}

/* Accordéon (resize) UNIQUEMENT sur desktop (vrai hover) */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px){
  :where(.hero-accordion-module, .elementor-section:has(.elementor-container > .hero-accordion))
  :is(:hover) .elementor-container:has(> .hero-accordion) > .hero-accordion{
    flex: .88 1 0 !important;
  }

  :where(.hero-accordion-module, .elementor-section:has(.elementor-container > .hero-accordion))
  :is(:hover) .elementor-container:has(> .hero-accordion) > .hero-accordion:hover{
    flex: 2.4 1 0 !important;
  }
}

/* Assure que la carte remplit la hauteur */
.hero-accordion,
.hero-accordion > .elementor-widget-wrap,
.hero-accordion > .elementor-widget-wrap > .hero-item{
  height: 100%;
}

/* ---------- 2) Carte (look) ---------- */

.hero-item{
  min-height: clamp(440px, 34vw, 650px);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(18px, 1.7vw, 28px);

  /* IMPORTANT: pas de shorthand background: (sinon tu écrases l’image Elementor) */
  background-color: #fff;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;

  box-shadow: 0 18px 40px rgba(0,0,0,.10);

  /* variables */
  --pad: clamp(20px, 2.1vw, 34px);
  --iconSize: clamp(34px, 3.1vw, 52px);
  --iconGap: clamp(10px, 1vw, 16px);

  /* positions ouvertes */
  --titleTop: calc(var(--pad) + var(--iconSize) + var(--iconGap));
  --textTop:  calc(var(--titleTop) + clamp(78px, 6.8vw, 112px));

  /* titre en bas au repos (depuis position ouverte) */
  --titleDown: clamp(160px, 18vw, 280px); /* 240px, 22vw, 360px */

  /* bouton + */
  --plusSize: clamp(34px, 3.2vw, 52px);
  --plusGap: clamp(16px, 2vw, 26px);
}

/* retire padding Elementor */
.hero-item,
.hero-item > .e-con-inner{
  padding: 0 !important;
}
.hero-item > .e-con-inner{
  position: relative;
  height: 100%;
  z-index: 2;
}

/* masque blanc (normal) */
.hero-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  opacity: 1;
  transition: opacity .35s ease;
  border-radius: inherit;
  z-index: 1;
}

/* overlay bleu (ouvert) — overlay UNI (pas de dégradé)
   NOTE: --bleu-rgb doit être "9,59,96" (format rgba classique) */
.hero-item::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(var(--bleu-rgb), .6);
  opacity: 0;
  transition: opacity .5s ease;
  border-radius: inherit;
  z-index: 1;
}

.no-hover .hero-item::after {background: transparent;}

/* ---------- 3) Icône / titre / texte ---------- */

.hero-item .elementor-widget-icon{
  position:absolute;
  top: var(--pad);
  left: var(--pad);
  margin: 0 !important;
  z-index: 3;
}
.hero-item .elementor-icon-wrapper{ line-height: 0 !important; }

.hero-item .elementor-widget-icon svg{
  width: var(--iconSize) !important;
  height: auto !important;
}

/* recoloration SVG */
.hero-item .elementor-widget-icon .elementor-icon{
  color: var(--orange-bti, #EF4C23);
  transition: color .25s ease;
}
.hero-item .elementor-widget-icon svg,
.hero-item .elementor-widget-icon svg *{
  fill: currentColor !important;
  transition: fill .25s ease, stroke .25s ease;
}

/* Titre : ouvert = sous l’icône / fermé = descendu */
.hero-item .elementor-widget-heading{
  position:absolute;
  left: var(--pad);
  right: calc(var(--pad) * 1.2);
  top: var(--titleTop);
  margin: 0 !important;
  z-index: 3;

  transform: translateY(var(--titleDown));
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
		/*.hero-accordion:is(:hover, .is-open) .hero-item .elementor-widget-heading{
		  transform: translateY(0);
		}*/

.hero-item .elementor-widget-heading .elementor-heading-title{
  margin: 0 !important;
  color: var(--orange-bti, #EF4C23);
  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  font-size: calc(var(--fs-h3)*1) !important; /* clamp(26px, 2.3vw, 44px) */
  max-width: 30ch /*14ch*/;
  transition: color .25s ease;
}

/* Texte (caché au repos) */
.hero-item .elementor-widget-text-editor{
  position:absolute;
  left: var(--pad);
  right: clamp(16px, 2vw, 34px);
  top: var(--textTop);
  margin: 0 !important;

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  z-index: 3;

  transition: opacity .25s ease, transform .4s ease;
}

.hero-item .elementor-widget-text-editor p{
  margin: 0 !important;
  font-size: clamp(14px, 1.05vw, 16px) !important;
  line-height: 1.35 !important;
  color: #fff;
  max-width: 60ch;
}

.no-hover .hero-item .elementor-widget-text-editor p{
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  max-width: 90ch;
}

/* Bouton (+) sous le texte (visuel) */
.hero-item .elementor-widget-text-editor::after{
  content:"";
  display:block;
  width: var(--plusSize);
  height: var(--plusSize);
  margin-top: var(--plusGap);

  background: url("https://bti.ca/wp-content/uploads/2026/02/Pastille-plus.svg")
    left center / contain no-repeat;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}

/* ---------- 4) État ouvert ----------
   - Ouverture via JS: .is-open (tablette/mobile + cas desktop si tu veux)
   - Ouverture via .hovered (optionnel)
   - Ouverture via :hover UNIQUEMENT sur desktop (vrai hover)
--------------------------------------------------------- */

/* OUVERT via JS (.is-open) ou via classe (.hovered) — tous formats */
.hero-accordion:is(.is-open, .hovered) .hero-item::before{ opacity: 0; }
.hero-accordion:is(.is-open, .hovered) .hero-item::after{ opacity: 1; }

.hero-accordion:is(.is-open, .hovered) .hero-item .elementor-widget-icon .elementor-icon{ color:#fff; }

.hero-accordion:is(.is-open, .hovered) .hero-item .elementor-widget-heading{ transform: translateY(0); }
.hero-accordion:is(.is-open, .hovered) .hero-item .elementor-widget-heading .elementor-heading-title{ color:#fff; }

.hero-accordion:is(.is-open, .hovered) .hero-item .elementor-widget-text-editor{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hero-accordion:is(.is-open, .hovered) .hero-item .elementor-widget-text-editor::after{
  opacity: 1;
  transform: translateY(0);
}

/* OUVERT via HOVER — seulement desktop */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px){
  .hero-accordion:hover .hero-item::before{ opacity: 0; }
  .hero-accordion:hover .hero-item::after{ opacity: 1; }

  .hero-accordion:hover .hero-item .elementor-widget-icon .elementor-icon{ color:#fff; }

  .hero-accordion:hover .hero-item .elementor-widget-heading{ transform: translateY(0); }
  .hero-accordion:hover .hero-item .elementor-widget-heading .elementor-heading-title{ color:#fff; }

  .hero-accordion:hover .hero-item .elementor-widget-text-editor{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .hero-accordion:hover .hero-item .elementor-widget-text-editor::after{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- 5) Responsive (tablette/mobile stables) ---------- */

@media (max-width: 1024px){
  :where(.hero-accordion-module, .elementor-section:has(.elementor-container > .hero-accordion))
  .elementor-container:has(> .hero-accordion){
    flex-wrap: wrap !important;
  }

  :where(.hero-accordion-module, .elementor-section:has(.elementor-container > .hero-accordion))
  .elementor-container:has(> .hero-accordion) > .hero-accordion{
    flex: 1 1 calc(50% - clamp(18px, 1.8vw, 34px)) !important;
    transition: none !important;
  }

  /* cartes plus courtes → titre descend un peu moins */
  .hero-item{ --titleDown: clamp(200px, 18vw, 280px); }
}

@media (max-width: 767px){
  :where(.hero-accordion-module, .elementor-section:has(.elementor-container > .hero-accordion))
  .elementor-container:has(> .hero-accordion) > .hero-accordion{
    flex: 1 1 100% !important;
  }
}



/* =========================================================
   HERO ACCORDION — cacher le ::after quand la carte n’a pas de lien
   (à placer après .hero-item .elementor-widget-text-editor::after)
========================================================= */

/* Cas standard : pas de wrapper lien => on masque l’icône */
.hero-item:not(.bdt-element-link):not([data-ep-wrapper-link])
  .elementor-widget-text-editor::after{
  content: none !important;
  display: none !important;
}

/* Sécurité : si l’attribut existe mais URL vide / #
   (selon certains réglages Element Pack / BDThemes) */
.hero-item[data-ep-wrapper-link*='url":""']
  .elementor-widget-text-editor::after,
.hero-item[data-ep-wrapper-link*='url":"#']
  .elementor-widget-text-editor::after{
  content: none !important;
  display: none !important;
}