/** SECTION BANNER **/
#title{
    padding-top:75px;
    height: calc(100dvh);
    min-height: 300px;
    img {
    }
    h2 {
        font-weight: lighter;
        font-size: 2rem;
    }
    .banner-container{
        overflow: hidden;
        border-radius: 70px;
    }
    .banner{
        flex-shrink: 0;
        max-height: 150px;
        width: 15%;
        margin: 0 5%
    }
    @media (max-width: 767px) {
        .banner-container {
            overflow: hidden;
            padding: 20px ;
            height: 20%;
            position: relative;
            .banner   {
                position: absolute;
                left:calc(50% - 11.5%);
                width: 23%;
            }
        }
    }


}

#energy {
    strong {
        color: var(--deep-blue);
    }

    .btn-outline-dark {
        --bs-btn-color: var(--dark-blue);
        --bs-btn-border-color: var(--dark-blue);
        --bs-btn-hover-color: var(--light-wheet);
        --bs-btn-hover-bg: var(--deep-blue);
        --bs-btn-hover-border-color: var(--deep-blue);
        --bs-btn-focus-shadow-rgb: 33,37,41;/*c'est quoi??*/
        --bs-btn-active-color: var(--light-wheet);
        --bs-btn-active-bg: var(--deep-blue);
        --bs-btn-active-border-color: var(--deep-blue);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);/*c'est quoi??*/
        --bs-btn-disabled-color: var(--dark-blue);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--dark-blue);
        --bs-gradient: none;
      }
}

#aluminium {
    strong {
        color: var(--brown);
    }

    .btn-outline-dark {
        --bs-btn-color: var(--dark-blue);
        --bs-btn-border-color: var(--dark-blue);
        --bs-btn-hover-color: var(--light-wheet);
        --bs-btn-hover-bg: var(--dark-brown);
        --bs-btn-hover-border-color: var(--dark-brown);
        --bs-btn-focus-shadow-rgb: 33,37,41;/*c'est quoi??*/
        --bs-btn-active-color: var(--light-wheet);
        --bs-btn-active-bg: var(--dark-brown);
        --bs-btn-active-border-color: var(--dark-brown);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);/*c'est quoi??*/
        --bs-btn-disabled-color: var(--dark-blue);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--dark-blue);
        --bs-gradient: none;
      }
}

#vision {
    
    p {
        text-align: center;
    }

    .bullet-title {
        color: var(--light-red);
    }

    .bullet::before {
        outline: 2px solid var(--light-red);
        background-color: var(--light-red);
      }

    .btn-outline-dark {
        --bs-btn-color: var(--dark-blue);
        --bs-btn-border-color: var(--dark-blue);
        --bs-btn-hover-color: var(--light-wheet);
        --bs-btn-hover-bg: var(--light-red);
        --bs-btn-hover-border-color: var(--light-red);
        --bs-btn-focus-shadow-rgb: 33,37,41;/*c'est quoi??*/
        --bs-btn-active-color: var(--light-wheet);
        --bs-btn-active-bg: var(--light-red);
        --bs-btn-active-border-color: var(--light-red);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);/*c'est quoi??*/
        --bs-btn-disabled-color: var(--dark-blue);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--dark-blue);
        --bs-gradient: none;
      }
}

#team {
    strong {
        color: var(--light-blue);
    }

    .btn-outline-dark {
        --bs-btn-color: var(--dark-blue);
        --bs-btn-border-color: var(--dark-blue);
        --bs-btn-hover-color: var(--light-wheet);
        --bs-btn-hover-bg: var(--light-blue);
        --bs-btn-hover-border-color: var(--light-blue);
        --bs-btn-focus-shadow-rgb: 33,37,41;/*c'est quoi??*/
        --bs-btn-active-color: var(--light-wheet);
        --bs-btn-active-bg: var(--light-blue);
        --bs-btn-active-border-color: var(--light-blue);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);/*c'est quoi??*/
        --bs-btn-disabled-color: var(--dark-blue);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--dark-blue);
        --bs-gradient: none;
      }
}

/** SECTION PARTENAIRES **/
#partenaires {
    .gouv{
        max-width: min(100%, 600px);
    }
    .slider-image {
        text-align: center;
        padding:15px;
        &.bpi {
            img {
                max-height:50px;
            }
        }
        img {
            max-height: 100px;
            max-width:100%;
            margin: 0 auto;
            border-radius: 5px;
        }
    }

    .partenaires-grid {
        margin:auto;
        width: 75%;
        align-items: center;
        display: flex;
        background: white;
        border-radius:140px;
        padding: 0 50px;
        justify-content: space-around;
    }
}

@media (max-width: 991px) {
    #partenaires {
        .partenaires-grid {
            margin: auto;
            width: 95%;
            align-items: center;
            justify-content: space-between;
            display: flex;
            background: white;
            border-radius: 140px;
            padding: 0 50px;

            .slider-image {
                max-width: 100%;

                img {
                    max-width: 100%;
                }
            }
        }
    }
}
@media (max-width: 767px) {
    #partenaires {
        .partenaires-grid {
            padding: 10px 10px;
            .slider-image {
                padding: 0 2px;
            }
        }
    }
}

/** SECTION TEAM **/
.team-img {
    position: relative;
    img{
        position: absolute;
        border-radius: 50%;
        aspect-ratio: 1;
        height: inherit;
    }

    .img-1{
        z-index:3;
        top:0;
        left:25%;
        width: 45%;
    }

    .img-2{
        z-index: 4;
        top: 40%;
        width: 40%;
        left: 5%;
    }

    .img-3{
        top:20%;
        width:35%;
        left: 65%;
    }

    .img-4{
        top: 52%;
        width: 35%;
        left: 45%;
    }
}

/* SECTION SPEC */
.spec-title {
    h4 {
        background: var(--dark-blue);
        color:var(--light-wheet);
        display: inline-block;
        padding: 10px;
        border-radius: 3px;
        width: 300px;
        font-size: 1.2rem;
    }

    color: var(--darker-blue);
}

.chevron::before {
    border-style:
            solid;
    border-width:
            0.1em 0.1em 0 0;
    content: '';
    position: relative;
    transform: rotate(-45deg);
    vertical-align: top;
    aspect-ratio: 1;
    height: 10px;
    display: flex;
}

.chevron.right:before {
    left: 0;
    transform: rotate(45deg);
}

.chevron.bottom:before {
    top: 0;
    transform: rotate(135deg);
}

.chevron.left:before {
    left: 0.25em;
    transform: rotate(-135deg);
}

@media (max-width: 767px) {
    .generateur{
        .bullet{
            display: inline-block;
            position: inherit;
            text-align: left !important;
        }
    }
}

#vision{
    text-align: center;
    margin:auto;
    color: var(--dark-blue);
    padding: 50px 0;

    .subtitle{
        color: var(--dark-blue);
        text-transform: uppercase;
        font-weight: bold;
    }
    h2 {
        font-weight: bold;
        margin-bottom:50px;
    }

    .vision-image{
        width: 100%;
    }
}

.bullet-container {
    position: relative;
    margin:auto;
    width: 1200px;
}

@media (max-width: 1399px) {
    .bullet-container {
        width: 1000px;
    }
}

@media (max-width: 1199px) {
    .bullet-container {
        width: 800px;
        .bullet {
            width: 200px;
            &.w250 {
                width: 250px;
            }
        }
    }
}

@media (max-width: 991px) {
    .bullet-container {
        width: 600px;

    }
}

@media (max-width: 768px) {
    .bullet-container {
        width:400px;
    }
    .vision-image  {
        width: 50%;
    }
}

.bullet {
    width: 250px;
    position: absolute;
    text-align: left;

    .bullet-title {
        font-weight:bold;
    }

    .bullet-subtitle{
        font-weight: normal;
        font-size: 1rem;
    }
}

.bullet::before{
    content: "";
    width: 12px;  /* Taille du cercle */
    height: 12px;
    border: 4px solid #fff;
    outline: 2px solid #136095;
    background-color: #136095;  /* Couleur du marqueur */
    border-radius: 50%;
    position: absolute;
    top: 20px;  /* Ajuste la position du cercle */
    left: -25px;
    transform: translateX(-50%);
}

.bullet.bullet-right {
    text-align: right;
}
.bullet.bullet-right::before{
    top: 25px;  /* Ajuste la position du cercle */
    left: calc(100% + 20px);
}

.bullet.bullet-top {
    text-align: center;
}
.bullet.bullet-top::before{
    top: -20px;  /* Ajuste la position du cercle */
    left: 125px;
}

.bullet.bullet-bottom {
    text-align: center;
}
.bullet.bullet-bottom::before{
    bottom: 20px;  /* Ajuste la position du cercle */
    left: 125px;
}

@media (max-width: 1199px) {

}

@media (max-width: 991px) {
    #vision{
        padding:50px 20px;
        width: 100%;
    }
}

@media (max-width: 991px) {
    #vision{
        h2 {
            margin-bottom: 0;
        }
        .bullet-title {
            font-weight:bold;
        }
    }

    .sm-vision {
        display: flex;
        flex-direction: column;
    }
}