.elementor-1356 .elementor-element.elementor-element-011d523{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1356 .elementor-element.elementor-element-0a7e5cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for text-editor, class: .elementor-element-7e7a3ef *//* =========================
HERO — DÉCOUPE DE PYLÔNE (CSS)
+ Fond global fixed (comme tes autres pages)
========================= */

/* Fond global page (tu peux garder ça au niveau global du site si déjà en place) */
:root{
  --bts-accent:#F8B133;
  --bts-ink:#0f1115;
  --bts-card: rgba(20,22,28,.62);
  --bts-border: rgba(255,255,255,.12);
  --bts-soft: rgba(255,255,255,.08);
}

body{
  background-image:url("https://www.devbts.if2m-informatique.fr/wp-content/uploads/2025/12/fond-site-scaled.png");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* HERO */
.bts-pylone-hero{
  position:relative;
  min-height: clamp(560px, 90vh, 920px);
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
}

/* Background image spécifique hero */
.bts-pylone-hero::before{
  content:"";
  position:absolute;
  inset:-2%;
  background-image:url("https://www.devbts.if2m-informatique.fr/wp-content/uploads/2025/12/DJI_20251119063532_0016_D2-scaled.jpg");
  background-size:cover;
  background-position:center;
  transform: scale(1.06);
  will-change: transform;
  z-index:0;
  filter: saturate(1.05) contrast(1.03);
}

/* Overlay + vignette */
.bts-pylone-hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(1200px 700px at 22% 35%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.88) 100%),
    linear-gradient(115deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.80) 100%);
}

/* Grid animé */
.bts-pylone-hero__grid{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.18;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap:14px;
  padding:18px;
  mix-blend-mode: screen;
}
.bts-pylone-hero__grid span{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  backdrop-filter: blur(2px);
  transform: translateY(0);
  animation: btsFloat 7.5s ease-in-out infinite;
}
.bts-pylone-hero__grid span:nth-child(2){ animation-duration: 8.2s; animation-delay:.25s; }
.bts-pylone-hero__grid span:nth-child(3){ animation-duration: 9.1s; animation-delay:.4s; }
.bts-pylone-hero__grid span:nth-child(4){ animation-duration: 7.9s; animation-delay:.15s; }
.bts-pylone-hero__grid span:nth-child(5){ animation-duration: 8.8s; animation-delay:.35s; }
.bts-pylone-hero__grid span:nth-child(6){ animation-duration: 9.4s; animation-delay:.2s; }
.bts-pylone-hero__grid span:nth-child(7){ animation-duration: 8.0s; animation-delay:.5s; }
.bts-pylone-hero__grid span:nth-child(8){ animation-duration: 9.9s; animation-delay:.1s; }

@keyframes btsFloat{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-14px) }
}

.bts-pylone-hero__wrap{
  position:relative;
  z-index:3;
  width:min(1220px, calc(100% - 40px));
  margin:0 auto;
}

.bts-pylone-hero__content{
  max-width: 820px;
}

.bts-pylone-hero__kicker{
  display:inline-block;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:12px;
  opacity:.78;
  margin-bottom:16px;
}

.bts-pylone-hero__title{
  margin:0 0 16px;
  text-transform:uppercase;
  font-weight:900;
  line-height:1.02;
  letter-spacing:.02em;
  text-shadow: 0 18px 48px rgba(0,0,0,.55);
  font-size: clamp(34px, 5.8vw, 74px);
}

.bts-pylone-hero__titleLine{
  display:block;
  position:relative;
}
.bts-pylone-hero__titleLine::after{
  content:"";
  display:block;
  width: min(520px, 72%);
  height: 3px;
  background: linear-gradient(90deg, var(--bts-accent), rgba(248,177,51,0));
  margin-top:10px;
  border-radius:999px;
  opacity:.95;
}
.bts-pylone-hero__titleLine--alt{
  margin-top:10px;
  font-size: clamp(20px, 2.8vw, 34px);
  font-weight:800;
  opacity:.95;
}
.bts-pylone-hero__titleLine--alt::after{
  width: min(420px, 62%);
  height:2px;
  margin-top:12px;
  opacity:.75;
}

.bts-pylone-hero__lead{
  margin: 0 0 26px;
  max-width: 680px;
  font-size: 16.5px;
  line-height: 1.65;
  opacity:.92;
  text-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.bts-pylone-hero__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

/* Boutons */
.bts-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 15px 22px;
  border-radius: 14px;
  text-decoration:none !important;
  font-weight:700;
  letter-spacing:.01em;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  will-change: transform;
}

.bts-btn--primary{
  background: var(--bts-accent);
  color: #171717 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.bts-btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 22px 56px rgba(0,0,0,.42); }

.bts-btn--ghost{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff !important;
  backdrop-filter: blur(6px);
}
.bts-btn--ghost:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.30); }

.bts-pylone-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.bts-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}

.bts-pylone-hero__scrollHint{
  position:absolute;
  left:50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 30px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  z-index:3;
}
.bts-pylone-hero__scrollDot{
  position:absolute;
  left:50%;
  top:10px;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bts-accent);
  animation: btsScrollDot 1.35s ease-in-out infinite;
}
@keyframes btsScrollDot{
  0%,100%{ transform: translate(-50%, 0); opacity:.85; }
  60%{ transform: translate(-50%, 18px); opacity:.25; }
}

/* Reveal */
.bts-reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.bts-reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* Mobile */
@media (max-width: 768px){
  .bts-pylone-hero__grid{ opacity:.12; padding:12px; gap:10px; }
  .bts-btn{ width:100%; }
  .bts-pylone-hero__titleLine::after{ width: 82%; }
}/* End custom CSS */