.elementor-6932 .elementor-element.elementor-element-bcf63b0{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-12px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-fc1d9ad *//* =========================================================
   FONT
   ========================================================= */
@font-face{
  font-family:"DarkSport";
  src:
    url("https://bluepadel06.com/wp-content/uploads/2025/02/darksport-bolditalic.woff2") format("woff2"),
    url("https://bluepadel06.com/wp-content/uploads/2025/02/darksport-bolditalic.woff") format("woff");
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

/* =========================================================
   WRAPPER PRINCIPAL + VARIABLES
   ========================================================= */
.bp-tl{
  --green:#1D9C13;
  --dark:#B70000;
  --dot:55px;
  --line:14px;
  --gapY:60px;      /* espace vertical entre les items du tronc */
  --labelGap:20px;  /* espace horizontal entre dot et texte */
  --splitH:120px;
  --splitMid:100px;

  position:relative;
  width:min(900px,100%);
  margin:0 auto;
}

/* =========================================================
   TYPOGRAPHIE
   ========================================================= */
.kicker{
  font-family:Roboto, sans-serif;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.04em;
  line-height:1.1;
  text-transform:uppercase;
  color:var(--green);
}

.title.ds{
  font-family:"DarkSport", sans-serif;
  font-size:32px;
  font-weight:700;
  font-style:italic;
  letter-spacing:0;
  line-height:1.05;
  text-transform:uppercase;
  color:#fff;
}

.badge{
  display:inline-block;
  margin-top:6px;
  padding:3px 10px;
  font-family:Roboto, sans-serif;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--dark);
  background:transparent;
  border:2px solid var(--dark);
  border-radius:30px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease, border-color .15s ease, color .15s ease;
}

.badge:hover{
  opacity:.9;
  border-color:#006234;
  color:#006234;
  transform:translateY(-1px);
}

.badge:focus-visible{
  outline:2px solid var(--dark);
  outline-offset:2px;
}

/* =========================================================
   TRONC VERTICAL (PARTIE HAUTE + BASSE)
   ========================================================= */
.bp-trunk{
  position:relative;
  width:100%;
  display:grid;
  justify-items:center;
  row-gap:var(--gapY);
  padding:20px 0;
}

/* ligne verticale verte, arrêtée au centre du 1er et du dernier dot */
.bp-trunk::before{
  content:"";
  position:absolute;
  left:50%;
  top:calc(20px + (var(--dot) / 2));
  bottom:calc(20px + (var(--dot) / 2));
  width:var(--line);
  transform:translateX(-50%);
  background:var(--green);
  border-radius:999px;
}

/* item du tronc */
.bp-dot{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* cercle */
.bp-dot .dot{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--dot);
  height:var(--dot);
  background:var(--green);
  border-radius:999px;
}

.bp-dot .dot img{
  display:block;
  width:36px;
  height:36px;
}

/* label à droite du tronc */
.bp-dot.right .label{
  position:absolute;
  top:50%;
  left:calc(50% + (var(--dot)/2) + var(--labelGap));
  transform:translateY(-50%);
  text-align:left;
  max-width:420px;
}

/* label à gauche du tronc si besoin un jour */
.bp-dot.left .label{
  position:absolute;
  top:50%;
  right:calc(50% + (var(--dot)/2) + var(--labelGap));
  transform:translateY(-50%);
  text-align:right;
  max-width:420px;
}

/* =========================================================
   ZONE DE SPLIT / BIFURCATION
   ========================================================= */
.bp-split{
  position:relative;
  height:calc(147.351px * 2);
  margin:10px 0;
}

/* rapproche le split du tronc haut et bas */
.bp-trunk.top{
  margin-bottom:-30px;
}

.bp-trunk.bottom{
  margin-top:-30px;
}

/* petit décalage spécifique du label droit sur desktop */
.label-split-right{
  margin-left:16px;
}

/* SVG du split */
.bp-split-svg{
  position:absolute;
  left:50%;
  width:313.2px;
  height:147.351px;
  transform:translateX(-50%);
  overflow:visible;
}

.bp-split-svg.top{
  top:0;
}

.bp-split-svg.bottom{
  bottom:0;
  transform:translateX(-50%) scaleY(-1);
  transform-origin:center;
}

.bp-split-svg path{
  fill:none;
  stroke-width:var(--line);
  stroke-linecap:round;
  stroke-linejoin:round;
}

.bp-split-svg path.left{
  stroke:var(--dark);
}

.bp-split-svg path.right{
  stroke:var(--green);
}

/* =========================================================
   DOTS DE BRANCHE SUR DESKTOP
   ========================================================= */
.bp-branch-dot{
  position:absolute;
  top:50%;
  z-index:2;
  display:flex;
  align-items:center;
  transform:translateY(-50%);
}

/* position horizontale branche droite */
.bp-branch-dot.right{
  left:calc(45.4% + var(--splitMid) + (var(--splitH)/2) - (var(--dot)/2));
}

/* position horizontale branche gauche */
.bp-branch-dot.left{
  left:calc(30% - var(--splitMid) - (var(--splitH)/2) - (var(--dot)/2));
  flex-direction:row-reverse; /* texte à gauche du dot rouge */
}

/* dots de branche */
.bp-branch-dot .dot{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 var(--dot);
  width:var(--dot);
  height:var(--dot);
  border-radius:999px;
}

.bp-branch-dot.right .dot{
  background:var(--green);
}

.bp-branch-dot.left .dot{
  background:var(--dark);
}

.bp-branch-dot .dot img{
  display:block;
  width:34px;
  height:34px;
}

/* labels de branche sur desktop */
.bp-branch-dot.right .label{
  margin-left:var(--labelGap);
  text-align:left;
  max-width:360px;
}

.bp-branch-dot.left .label{
  margin-left:0;
  margin-right:var(--labelGap);
  text-align:right;
  max-width:360px;
}

/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */
@media (max-width:760px){

  /* -----------------------------------------
     Variables et espacements mobiles
     ----------------------------------------- */
  .bp-tl{
    --splitH:90px;
    --splitMid:60px;
    --gapY:30px; /* réduction espace vertical entre items */
  }

  /* -----------------------------------------
     Textes mobiles
     ----------------------------------------- */
  .kicker{
    font-size:11px;
  }

  .title.ds{
    font-size:28px;
  }

  .badge{
    font-size:11px;
  }

  /* -----------------------------------------
     Tronc vertical centré sur mobile
     ----------------------------------------- */
  .bp-trunk::before{
    left:50%;
    transform:translateX(-50%);
  }

  .bp-dot{
    position:relative;
    display:block;
    width:100%;
    min-height:var(--dot);
    padding-left:0;
  }

  /* dot parfaitement centré sur la ligne */
  .bp-dot .dot{
    position:absolute;
    top:60%;
    left:50%;
    margin:0;
    transform:translate(-50%, -50%);
  }

  /* texte des items du tronc placé à droite du dot */
  .bp-dot.right .label,
  .bp-dot.left .label{
    position:static;
    max-width:none;
    text-align:left;
    margin-left:calc(50% + (var(--dot) / 2) + var(--labelGap));
    transform:none;
  }

  /* -----------------------------------------
     Split mobile
     ----------------------------------------- */
  .bp-split{
    position:relative;
    height:266px;      /* hauteur réduite pour rapprocher haut et bas */
    margin-bottom:-10px;
  }

  .bp-split-svg{
    width:280px;
    height:auto;
  }

  /* wrappers de branche sur toute la largeur */
  .bp-branch-dot.left,
  .bp-branch-dot.right{
    position:absolute;
    left:0;
    width:100%;
    margin:0;
    transform:none;
  }

  /* hauteur des 2 dots dans le split */
  .bp-branch-dot.left{
    top:96px;
  }

  .bp-branch-dot.right{
    top:170px;
  }

  /* placement vertical du cercle dans chaque wrapper */
  .bp-branch-dot .dot{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
  }

  /* dot rouge un peu à gauche */
  .bp-branch-dot.left .dot{
    left:11%;
  }

  /* dot vert un peu à droite */
  .bp-branch-dot.right .dot{
    right:11%;
  }

  /* texte du split rouge : au centre, à droite du dot rouge */
  .bp-branch-dot.left .label{
    position:absolute;
    top:50%;
    left:110px;
    margin:0;
    max-width:none;
    text-align:left;
    transform:translateY(-60%);
  }

  /* texte du split vert : au centre, à gauche du dot vert */
  .bp-branch-dot.right .label-split-right{
    position:absolute;
    top:50%;
    right:110px;
    margin:0;
    max-width:none;
    text-align:right;
    transform:translateY(-40%);
  }

  /* garde un affichage propre du badge vert */
  .bp-branch-dot.right .label-split-right .badge{
    display:inline-block;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bcf63b0 */.elementor-6932 .elementor-element.elementor-element-bcf63b0 {
  opacity: 0;
  animation: fadeIn 1.2s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}/* End custom CSS */