/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


body {
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
}

/* Demi-cercles responsifs avec alternance */
.section-snpj::after {
    background-color: var(--e-global-color-primary);
    border-radius: 50%;
    bottom: 0;
    content: '';
    height: 370px;
    position: absolute;
    transform: translateY(50%);
    width: 370px;
    z-index: 999;
}

/* Impaire : droite */
.section-snpj:nth-child(odd)::after {
    right: 0;
    transform: translateY(50%) translateX(70%);
}

/* Paire : gauche */
.section-snpj:nth-child(even)::after {
    left: 0;
    transform: translateY(50%) translateX(-70%);
}

/* Responsive */
@media (max-width: 1600px) {
    .section-snpj::after {
        height: 150px;
        width: 150px;
    }
}

@media (max-width: 768px) {
    .section-snpj::after {
        height: 150px;
        width: 150px;
    }
}

@media (max-width: 767px) {
    .section-snpj::after {
        height: 100px;
        width: 100px;
    }
}

.section-snpj {
    position: relative;
}


/* Styles pour les images avec bordure jaune */

.snpj-counter > .snpj-counter--item {
    counter-increment: mission-counter;
    position: relative;
}

.snpj-counter > .snpj-counter--item::before {
    color: var(--e-global-color-accent);
    content: counter(mission-counter, decimal-leading-zero) ".";
    font-size: 100px;
    font-weight: 900;
    height: fit-content;
    left: 1.5rem;
    line-height: 1;
    position: absolute;
    top: -3.5rem;
    width: fit-content;
}

@media (max-width: 1024px) {
    .snpj-counter > .snpj-counter--item::before {
        font-size: 3rem;
        left: 0;
        position: relative;
        top: 0;
    }
}

/* Styles pour les images avec bordure jaune */

.snpj-img{
    display: inline-block;
    max-width: 100%;
    position: relative;
}

.snpj-img img {
    filter: grayscale(100%);
    height: auto;
    object-fit: cover;
    position: relative;
    width: 100%;
    z-index: 2;
    /* display: block; */
}


.snpj-img::before {
    background: transparent;
    border: 10px solid var(--e-global-color-accent);
    content: '';
    height: 100%;
    max-width: 600px;
    position: absolute;
    width: 100%;
    z-index: 1;
}


/* Première variante */

.snpj-img--1 img {
    aspect-ratio: 623/580;
    border-radius: clamp(60px, 8vw, 120px) 10px 10px clamp(60px, 8vw, 120px);
    max-width: 623px;
}

/* Forme jaune centrée avec décalage responsive */
.snpj-img--1::before {
    /* Centrage vertical et horizontal avec décalage responsive */
    border-radius: clamp(85px, 12vw, 170px) 10px 10px clamp(85px, 12vw, 170px);
    height: 80%;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% + clamp(30px, 4vw, 60px)), -50%);
}


@media (max-width: 768px) {
    .snpj-img--1::before {
        height: 75%;
        transform: translate(calc(-50% + clamp(15px, 3vw, 30px)), -50%);
    }
}

@media (max-width: 480px) {
    .snpj-img--1::before {
        border-width: clamp(3px, 0.8vw, 5px);
        height: 70%;
        transform: translate(calc(-50% + clamp(10px, 2vw, 20px)), -50%);
    }
}


/* Deuxième variante - Version responsive */
.snpj-img--2 img {
    aspect-ratio: 516/530;
    border-radius: clamp(55px, 8vw, 110px) 10px clamp(55px, 8vw, 110px) 10px;
    max-width: 516px;
}

.snpj-img--2::before {
    aspect-ratio: 516/530;
    border-radius: clamp(55px, 8vw, 110px) 10px clamp(55px, 8vw, 110px) 10px;
    left: -0;
    max-width: 516px;
    top: -40px;
}

@media (max-width: 768px) {
    
    .snpj-img--2::before {
        height: 75%;
        left: clamp(-15px, -2vw, -30px);
        top: clamp(-15px, -2vw, -30px);
    }
}

@media (max-width: 480px) {
    .snpj-img--2::before {
        border-width: clamp(3px, 0.8vw, 5px);
        height: 70%;
        left: clamp(-10px, -1.5vw, -20px);
        top: clamp(-10px, -1.5vw, -20px);
    }
}


/* Troisième variante - Version responsive - Forme en bas à droite */
.snpj-img--3 img {
    aspect-ratio: 516/530;
    border-radius: clamp(55px, 8vw, 110px) 10px clamp(55px, 8vw, 110px) 10px;
    max-width: 516px;
}

.snpj-img--3::before {
    aspect-ratio: 516/530;
    border-radius: clamp(55px, 8vw, 110px) 10px clamp(55px, 8vw, 110px) 10px;
    bottom: -40px;
    max-width: 516px;
    right: -0px;
}

@media (max-width: 768px) {
    
    .snpj-img--3::before {
        bottom: clamp(-15px, -2vw, -30px);
        height: 75%;
        right: clamp(-15px, -2vw, -30px);
    }
}

@media (max-width: 480px) {
    .snpj-img--3::before {
        border-width: clamp(3px, 0.8vw, 5px);
        bottom: clamp(-10px, -1.5vw, -20px);
        height: 70%;
        right: clamp(-10px, -1.5vw, -20px);
    }
}