.elementor-widget.elementor-widget-vbp-boat-parts-detail{
    position: static;
}

.voilebp-elementor-widget.voilebp-elementor-widget-vbp-boat-parts-detail{
    max-width: 1250px;
    margin: 0 auto;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__label,
.voilebp-elementor-widget-vbp-boat-parts-detail__point{
    position: absolute;
    z-index: 2;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__label{
    -webkit-transition: background-color .4s;
    -moz-transition: background-color .4s;
    -ms-transition: background-color .4s;
    -o-transition: background-color .4s;
    transition: background-color .4s;
    padding: 15px;
    color: #0B1332;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid #369AD4;
    width: auto;
    position: relative;
    background-color: #fff;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__label:after{
    opacity: 0;
    -webkit-transition: opacity .4s;
    -moz-transition: opacity .4s;
    -ms-transition: opacity .4s;
    -o-transition: opacity .4s;
    transition: opacity .4s;
    content:'+';
    color: #FFF;
    background-color: #0B1332;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    width: 15px;
    height: 15px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: -10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    line-height: 15px;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__group:hover .voilebp-elementor-widget-vbp-boat-parts-detail__label:after{
    opacity: 1;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__label:hover{
    background-color: #369AD4;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__connectors{
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__label-container{
    position: absolute;
    line-height: 1;
    user-select: none;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__point{
    width: 12px;
    height: 12px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-color: #369AD4;
    font-size: 0;
}

/** Placements des points et label **/

.voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="cellule-de-vie"]{
    top: 20%;
    left: 6%;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="cellule-de-vie"]{
    top: 56%;
    left: 43%;
}

/*---*/

.voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="cockpit"]{
    top: 30%;
    left: 6%;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="cockpit"]{
    top: 54.8%;
    left: 32.5%;
}

/*---*/

.voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="casquette"]{
    top: 40%;
    left: 8%;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="casquette"]{
    top: 58.8%;
    left: 32.7%;
}

/*---*/

.voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="safran"]{
    top: 78%;
    left: 4%;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="safran"]{
    top: 80.5%;
    left: 17.7%;
}

/*---*/

.voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="voiles"]{
    top: 20%;
    left: 75%;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="voiles"]{
    top: 30%;
    left: 61%;
}

/*---*/

.voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="coque-centrale"]{
    top: 36%;
    left: 80%;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="coque-centrale"]{
    top: 52%;
    left: 68.5%;
}

/*---*/

.voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="bras-de-liaison"]{
    top: 45%;
    left: 84.4%;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="bras-de-liaison"]{
    top: 54.8%;
    left: 71%;
}

/*---*/

.voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="flotteurs"]{
    top: 70%;
    left: 88%;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="flotteurs"]{
    top: 61.8%;
    left: 83.8%;
}

/*---*/

.voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="foils"]{
    top: 82%;
    left: 87%;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="foils"]{
    top: 71%;
    left: 75.8%;
}

/*---*/

.voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="derive-centrale"]{
    top: 88%;
    left: 68.5%;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="derive-centrale"]{
    top: 81.5%;
    left: 54%;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel{
    position: absolute;
    max-width: 705px;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    padding: 60px;
    z-index: 153;
    display: none;
    overflow-y: auto;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel-title{
    color: #0B1332;
    font-size: 46px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel-subtitle{
    font-size: 14px;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel-subtitle strong{
    font-weight: 700;
    text-transform: uppercase;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel-text{
    font-size: 14px;
    line-height: 200%;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel-title,
.voilebp-elementor-widget-vbp-boat-parts-detail__panel-subtitle,
.voilebp-elementor-widget-vbp-boat-parts-detail__panel-text,
.voilebp-elementor-widget-vbp-boat-parts-detail__panel-image{
    margin-bottom: 30px;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel-image img{
    object-fit: cover;
    width: 100%;
    object-position: center;
    max-height: 166px;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-numbers{
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    --gap-items: 10px;
    --items-per-line:3;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-number{
    padding: 30px 20px;
    display: flex;
    color: #FFF;
    gap: 10px;
    flex-direction: column;
    border-bottom: 4px solid #369AD4;
    background: #0B1332;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-number-label{
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    text-transform: uppercase;
    max-width: 180px;
    text-align: center;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-number-label small{
    font-size: 12px;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-number-figure{
    font-size: 46px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel-close{
    position: absolute;
    top: 18px;
    right: 21px;
    font-size: 26px;
    font-weight: 900;
    cursor: pointer;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__container{
    max-width: 1250px;
    margin: 0 auto;
    position: relative;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__overlay{
    position: absolute;
    left: 0;
    width: 100vw;
    top: 0;
    display: none;
    bottom: 0;
    opacity: .75;
    z-index: 153;
    background-color: #000;
}

.voilebp-elementor-widget-vbp-boat-parts-detail__panel--foils .voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-number:last-of-type .voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-number-figure{
    font-size: 16px;
}

@media screen and (max-width: 1499px),
screen and (max-height: 999px)
{
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel,
    .voilebp-elementor-widget-vbp-boat-parts-detail__overlay{
        position: fixed;
        z-index: 153;
    }
}

@media screen and (max-width: 1200px){
    .voilebp-elementor-widget-vbp-boat-parts-detail__label{
        padding: 10px;
        font-size: 12px;
    }
}

@media screen and (max-width: 1100px){
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel{
        max-width: 550px;
    }
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel-title{
        font-size: 32px;
    }
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-number-label{
        font-size: 14px;
    }
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-number-figure {
        font-size: 26px;
    }
}

@media screen and (max-width: 1000px){
    .voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="bras-de-liaison"] {
        left: 80%;
    }

    .voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="coque-centrale"] {
        left: 76%;
    }

    .voilebp-elementor-widget-vbp-boat-parts-detail__label-container[data-part="flotteurs"] {
        left: 85.6%;
    }
}

@media screen and (max-width: 767px){
    
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-numbers{
        align-items: stretch;
    }
    
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-number-label{
        font-size: 18px;
    }
    
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-number-figure{
        font-size: 46px;
    }
    
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel-title {
        max-width: 90%;
    }
    
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel {
        max-width: none;
        width: 100%;
        left: 0;
        right: 0;
    }
    
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel{
        padding: 30px;
    }
    
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel-close{
        top: 30px;
        right: 24px;
    }
    
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-numbers{
        flex-wrap: wrap;
    }
    
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-number{
        flex-basis: calc(calc(100% / 2 - 10px) + 10px  / 2);
    }
    
    .voilebp-elementor-widget-vbp-boat-parts-detail__panel-key-number:last-child{
        flex-basis: 100%
    }
    
    .voilebp-elementor-widget-vbp-boat-parts-detail__label-container{
        display: none;
    }
    .voilebp-elementor-widget-vbp-boat-parts-detail__point{
        cursor: pointer;
        font-size: 14px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        border: 2px solid #369AD4;
        background-color: #fff;
    }

    .voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="cellule-de-vie"] {
        top: 54.6%;
        left: 39.6%;
    }

    /*--*/

    .voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="cockpit"] {
        top: 54%;
        left: 25.6%;
    }

    /*--*/

    .voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="casquette"] {
        top: 56.6%;
        left: 32.8%;
    }

    /*--*/

    .voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="safran"] {
        top: 82%;
        left: 6.4%;
    }

    /*--*/

    .voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="safran"] {
        top: 82%;
        left: 6.4%;
    }

    /*--*/

    .voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="voiles"] {
        top: 25%;
        left: 61%;
    }

    /*--*/

    .voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="coque-centrale"] {
        top: 48%;
        left: 80.5%;
    }

    /*--*/

    .voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="bras-de-liaison"] {
        top: 50.8%;
        left: 65%;
    }

    /*--*/

    .voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="flotteurs"] {
        top: 60%;
        left: 90%;
    }

    /*--*/

    .voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="foils"] {
        top: 70%;
        left: 81%;
    }

    /*--*/

    .voilebp-elementor-widget-vbp-boat-parts-detail__point[data-part="derive-centrale"] {
        top: 80%;
        left: 53%;
    }

}