.elementor-6510 .elementor-element.elementor-element-e8eca44{--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-9a2478f */@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;
}

.bp-tl{
  --green:#006234;
  --dark:#1B1B1B;
  --dot:55px;
  --line:14px;
  --gapY:60px;     /* espace entre cercles */
  --labelGap:20px; /* espace horizontal texte <-> cercle */
  --splitH:120px;  /* horizontale “utile” */
  --splitMid:100px;/* sortie horizontale depuis l’axe */

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

/* ========== Textes ========== */
.kicker{
  font-family:Roboto, sans-serif;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--green);
  line-height:1.1;
  text-transform:uppercase;
}
.title.ds{
  font-family:"DarkSport", sans-serif;
  font-size:32px;
  font-weight:700;
  font-style:italic;
  letter-spacing:0;
  color:#fff;
  line-height:1.05;
  text-transform:uppercase;
}
.badge{
  display:inline-block;
  margin-top:6px;
  font-family:Roboto, sans-serif;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--dark);
  border:solid 2px var(--dark);
  border-radius:30px;
  padding:3px 10px;
}

/* ========== Tronc vertical (haut + bas) ========== */
.bp-trunk{
  position:relative;
  padding:20px 0;
  width:100%;
  display:grid;
  justify-items:center;
  row-gap:var(--gapY);
}

/* ligne verticale qui s’arrête AU 1er et AU dernier cercle */
.bp-trunk::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:var(--line);
  background:var(--green);
  border-radius:999px;
  top:calc(20px + (var(--dot) / 2));
  bottom:calc(20px + (var(--dot) / 2));
}

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

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

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

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

/* ========== ÉTAPE 2 : Bifurcation avec TES SVG ========== */
.bp-split{
  position:relative;
  height:calc(147.351px * 2);
  margin:10px 0;
}

/* colle le split au tronc au-dessus et au-dessous */
.bp-trunk.top{ margin-bottom:-30px; }
.bp-trunk.bottom{ margin-top:-30px; }

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

/* SVG du bas : flip vertical */
.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); }

/* cercles de branche positionnés au milieu des horizontales */
.bp-branch-dot{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  z-index:2;
}

/* (tu as custom 45.5% / 54.7% : je les garde) */
.bp-branch-dot.right{
  left:calc(45.5% + var(--splitMid) + (var(--splitH)/2) - (var(--dot)/2));
}

.label-split-right{
    margin-top:10px;
    margin-left:20px;
}

.bp-branch-dot.left{
  left:calc(29.3% - var(--splitMid) - (var(--splitH)/2) - (var(--dot)/2));
}

/* couleurs dots branche */
.bp-branch-dot.right .dot{ background:var(--green); }
.bp-branch-dot.left  .dot{ background:var(--dark); }

.bp-branch-dot .dot{
  width:var(--dot);
  height:var(--dot);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 var(--dot);
}
.bp-branch-dot .dot img{ width:34px; height:34px; display:block; }

/* ======= IMPORTANT : texte à gauche du cercle GAUCHE ======= */
/* on inverse l'ordre visuel (label passe à gauche du dot) */
.bp-branch-dot.left{
  flex-direction:row-reverse;
}

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

/* ========== Responsive (simple) ========== */
@media (max-width:760px){
  .bp-tl{ --splitH:90px; --splitMid:60px; }

  .bp-dot.right .label,
  .bp-dot.left .label{
    position:static;
    transform:none;
    margin-left:var(--labelGap);
    max-width:none;
    text-align:left;
  }

  .bp-dot{
    justify-content:flex-start;
    padding-left:20px;
  }

  .bp-trunk::before{
    left:20px;
    transform:none;
  }

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

  .bp-branch-dot.left,
  .bp-branch-dot.right{
    left:20px;
    transform:none;
    top:auto;
    position:relative;
    margin:14px 0;
    flex-direction:row; /* sur mobile, tout repasse à droite */
  }

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

.badge{
  display:inline-block;
  margin-top:6px;
  font-family:Roboto, sans-serif;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--dark);
  border:solid 2px var(--dark);
  border-radius:30px;
  padding:3px 10px;
  background:transparent;
  text-decoration:none;   /* enlève le soulignement */
  cursor:pointer;         /* montre que c’est cliquable */
  transition:transform .15s ease, opacity .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;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e8eca44 */.elementor-6510 .elementor-element.elementor-element-e8eca44 {
  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 */