#obturateurs-technologiques {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    width           : 100%;
    padding         : 40px 20px 135px 20px;
}

#obturateurs-technologiques .obturateurs-technologiques__container {
    position         : relative;
    overflow         : hidden;
    display          : flex;
    flex-direction   : column;
    justify-content  : space-between;
    align-items      : center;
    width            : 100%;
    max-width        : 1200px;
    border-radius    : 10px;
    background-color : var(--background-color-secondary-ponsot);
}

#obturateurs-technologiques .obturateurs-technologiques__container > div {
    width : 100%;
}

.obturateurs-technologiques__part-1 {
    display         : flex;
    justify-content : space-between;
    align-items     : flex-start;
    width           : 100%;
}

.obturateurs-technologiques__part-1 > div {
    width : 50%;
}

.obturateurs-technologiques__part-1 {
    display         : flex;
    justify-content : space-between;
    align-items     : flex-start;
    width           : 100%;
}


/* =============== Images ============== */

.obturateurs-technologiques__images {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    padding         : 90px 0 40px 0;
    gap             : 50px;
}

.obturateurs-technologiques__images-container {
    position        : relative;
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 215px;
    height          : 100%;
}

.obturateurs-technologiques__images img {
    width           : 200px;
    height          : 400px !important;
    object-fit      : cover;
    object-position : left;
    -webkit-filter  : drop-shadow(40px 0px 30px #111013);
    filter          : drop-shadow(40px 0px 30px #111013);
}

.obturateurs-technologiques__images img:nth-child(2) {
    position  : absolute;
    top       : 50%;
    /*mask: linear-gradient(90deg, black 80%, transparent 100%);*/
    left      : 4px;
    transform : translate(0, -50%);
    width     : 0px;
    height    : 410px !important;
}

/* ========== Toggle ========== */

.obturateurs-technologiques__toggle {
    position        : relative;
    display         : flex;
    justify-content : center;
    align-items     : center;
    padding         : 0;
    gap             : 20px;
}

/* ===== span =====*/
.obturateurs-technologiques__toggle span {
    font-family    : var(--text-font-ponsot);
    font-size      : 14px;
    font-weight    : 300;
    color          : var(--secondary-color-ponsot);
    letter-spacing : 1px;
    transition     : 0.3s color;
}

.obturateurs-technologiques__toggle span.active {
    color : var(--primary-color-ponsot);
}

/* ===== end span =====*/

.obturateurs-technologiques__toggle-container {
    /* Variables */
    position       : relative;
    --widthLabel   : 66px;
    --heightLabel  : 30px;
    --diffSize     : 5px;
    --sizeToggle   : calc(var(--heightLabel) - var(--diffSize));
    --colorChecked : #303030;
    --colorDefault : #303030;
    --colorCircle  : var(--primary-color-ponsot);
}

.obturateurs-technologiques__toggle-container #switch-obturateurs-technologiques {
    /* on cache l'input */
    position   : absolute;
    visibility : hidden;
    width      : 0;
    height     : 0;
}

.obturateurs-technologiques__toggle-container
#switch-obturateurs-technologiques:checked
+ label::before {
    transform : translate(calc(110% + var(--diffSize)), -50%);
}

.obturateurs-technologiques__toggle-container #switch-obturateurs-technologiques:checked + label {
    background : var(--colorChecked);
}

.obturateurs-technologiques__toggle-container label {
    display       : block;
    width         : var(--widthLabel);
    height        : var(--heightLabel);
    cursor        : pointer;
    transition    : 0.3s;
    border-radius : var(--sizeToggle);
    background    : var(--colorDefault);
}

.obturateurs-technologiques__toggle-container label::before {
    position           : absolute;
    top                : 50%;
    left               : var(--diffSize);
    transform          : translateY(-50%);
    width              : var(--sizeToggle);
    height             : var(--sizeToggle);
    content            : "";
    transition         : 0.3s;
    border-radius      : var(--sizeToggle);
    background         : var(--colorCircle);
    -webkit-box-shadow : 5px 0px 15px #DEFF0078;
    box-shadow         : 5px 0px 15px #DEFF0078;
}

.obturateurs-technologiques__toggle-container label:active::before {
    width : calc(var(--sizeToggle) + 20%);
}

.obturateurs-technologiques__toggle-container
#switch-obturateurs-technologiques:checked
+ label:active::before {
    transform : translate(36%, -50%);
}

/* =============== Content ============== */
.obturateurs-technologiques__content {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : flex-start;
    padding         : 90px 6% 40px 6%;
    background      : var(--background-color-secondary-ponsot);
}


/* ============================= Part 2 ============================ */

.obturateurs-technologiques__part-2 {
    display               : grid;
    align-items           : center;
    width                 : 100%;
    padding               : 0 6%;
    grid-template-columns : repeat(2, 1fr);
    gap                   : 15px;
}

.obturateurs-technologiques__part-2 .obturateurs-technologiques__images-tuto {
    display               : grid;
    align-items           : center;
    width                 : 100%;
    grid-template-columns : repeat(2, 1fr);
    justify-items         : center;
    gap                   : 15px;
}


.obturateurs-technologiques__images-tuto img {
    width           : 100%;
    height          : 100% !important;
    border-radius   : 10px;
    object-fit      : cover;
    object-position : center;
}

.obturateurs-technologiques__images-tuto-last {
    position : relative;
    width    : 100%;
    height   : 100%;
}

.obturateurs-technologiques__images-tuto-last img {
    width           : 100%;
    height          : 100%;
    border-radius   : 10px;
    object-fit      : cover;
    object-position : center;
}

.obturateurs-technologiques__images-tuto-last__point {
    position           : absolute;
    top                : 44%;
    left               : 53%;
    transform          : translate(-50%, -50%);
    z-index            : 10;
    width              : 40px;
    height             : 40px;
    cursor             : pointer;
    border             : 1px solid var(--primary-color-ponsot);
    border-radius      : 50px;
    background-color   : transparent;
    -webkit-box-shadow : 0px 0px 0px 10px rgba(185, 211, 0, 0.26);
    box-shadow         : 0px 0px 0px 10px rgba(185, 211, 0, 0.26);
}

.obturateurs-technologiques__images-tuto-last__text {
    font-size        : 12px;
    color            : var(--text-color-ponsot);
    text-align       : center;
    opacity          : 0;
    position         : absolute;
    top              : 43%;
    left             : 25%;
    transform        : translate(-50%, -50%);
    z-index          : 9;
    width            : 200px;
    height           : auto;
    padding          : 10px 20px;
    transition       : 0.3s opacity;
    border-radius    : 10px;
    background-color : #222126;
    
}

.obturateurs-technologiques__images-tuto-last__text::after {
    position      : absolute;
    top           : 50%;
    right         : -10px;
    transform     : translateY(-50%);
    width         : 0;
    height        : 0;
    content       : "";
    border-top    : 10px solid transparent;
    border-bottom : 10px solid transparent;
    border-left   : 10px solid #222126;
}

.obturateurs-technologiques__images-tuto-last__text.active {
    opacity : 1;
}

/* ============================= Part 3 ============================ */
.obturateurs-technologiques__part-3 {
    text-align      : center;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    padding         : 30px 6% 50px 6%;
}


@media (max-width : 1024px) {
    #obturateurs-technologiques {
        padding : 50px 20px 50px 20px;
    }


    .obturateurs-technologiques__part-1 {
        flex-direction : column;
    }

    .obturateurs-technologiques__part-1 > div {
        width : 100%;
    }

    .obturateurs-technologiques__content {
        padding : 50px 6% 40px 6%;
    }

    .obturateurs-technologiques__images {
        padding : 0px 6% 40px 6%;
        gap     : 30px;
    }

    .obturateurs-technologiques__part-2 {
        grid-template-columns : repeat(1, 1fr);
    }
}


@media (max-width : 764px) {
    .obturateurs-technologiques__images-tuto img {
        width  : 100%;
        height : 250px;
    }

    .obturateurs-technologiques__images img {
        width  : 130px;
        height : 256px !important;
    }

    .obturateurs-technologiques__images img:nth-child(2) {
        left   : 40px;
        height : 268px !important;
    }

    .obturateurs-technologiques__images-tuto-last {
        width  : 100%;
        height : 100%;
    }

    .obturateurs-technologiques__images-tuto-last__text {
        top   : 11%;
        left  : 52%;
        width : 300px;
    }

    .obturateurs-technologiques__images-tuto-last__point {
        top  : 41%;
        left : 52%;
    }

    .obturateurs-technologiques__images-tuto-last__text::after {
        position     : absolute;
        top          : unset;
        bottom       : -22px;
        left         : 50%;
        transform    : translateX(-50%);
        content      : "";
        border-top   : 13px solid #222126;
        border-right : 10px solid transparent;
        border-left  : 10px solid transparent;
    }

    .obturateurs-technologiques__part-2 .obturateurs-technologiques__images-tuto {
        grid-template-columns : repeat(1, 1fr);
    }

    .obturateurs-technologiques__part-2 img {
        height : 250px !important;
    }

}