:root {
    --font-asap-condensed: "Asap Condensed", sans-serif;
    --font-asap: "Asap", sans-serif;
    --font-inter: "Inter", sans-serif;
}

body .Mypage {
    overflow: hidden;
    background-color: #EDF0F5;
}

body .site-main-diag {
    position: relative;
    background-color: #EDF0F5;
}

.preloader {
    position: fixed;
    left: 0px;
    top: 0x;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../images/preloader.svg);
    background-size: 140px;
}


/* Navigateur */

.section-navigateur {
    position: absolute;
    width: 100%;
    padding: 0 0;
    z-index: 10;
    transition: all 0.6s ease-in-out;
}

.ul-lien {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.li-lien3 li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Asap", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    color: #FFFFFF;
}

.nav-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-toggle-2 {
    width: 71px;
    height: 71px;
    background: transparent;
    border: none;
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ul-lien .menu {
    padding: clamp(20px, 5vh + 1rem, 150px) 0;
    position: relative;
}

.tab-content a {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: clamp(14px, 0.4vw + 1rem, 22px);
    line-height: 1.2;
    padding: 20px 0;
    color: #FFFFFF;
    width: 100%;
}

.nav-pills a,
.nav-pills div {
    font-family: var(--font-asap-condensed);
    font-weight: 500;
    font-size: clamp(16px, 1.33vw + 1rem, 40px);
    line-height: 1.2;
    color: #FFFFFF;
    cursor: pointer;
}

.nav-pills {
    display: flex;
    flex-direction: column;
    gap: 58px;
}

.nav-pills .active {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-pills .active::after {
    content: '';
    display: inline-block;
    width: 100px;
    height: 1px;
    background: #FFFFFF4D;
}


/* Traits de la croix */

.menu-toggle-2 .icon-bar2 {
    position: absolute;
    width: 46px;
    height: 4px;
    background-color: #FFFFFF;
    /* couleur de la croix */
    border-radius: 2px;
    left: 50%;
    top: 50%;
    transform-origin: center;
}


/* Forme la croix */

.menu-toggle-2 .icon-bar2.top {
    transform: translate(-50%, -50%) rotate(45deg);
}

.menu-toggle-2 .icon-bar2.bottom {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.li-lien3 {
    position: relative;
    z-index: 3;
}

.contact-menu {
    position: relative;
    border-top: 1px solid #FFFFFF4D;
    padding: clamp(20px, 1vh + 1rem, 43px) 0;
    z-index: 7;
    background: #212121;
}

.ul-contact-menu a i,
.ul-contact-menu a {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    color: #898989;
    text-align: center;
}

.ul-contact-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-nav img,
.li-lien1 img {
    padding: 17px 0;
}


/* section-slide */

section.section-slide {
    padding: 0 0;
}

.item-slide {
    position: relative;
    width: 100%;
    height: 1080px;
}

.item-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000026;
    z-index: 1;
}

.item-slide img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.bloc-titre-slide {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.titre-slide {
    font-family: var(--font-asap-condensed);
    font-weight: 600;
    font-size: clamp(28px, 4.66vw + 1rem, 100px);
    line-height: 1;
    color: #FFFFFF;
    margin-bottom: 40px;
}


/* dots  et nav*/

.bloc-dots {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 2;
    height: 5px;
}

.custom-dots-container {
    display: flex;
    gap: 15px;
    pointer-events: auto;
}

.custom-dots-container .owl-dot {
    width: 200px;
    height: 5px;
    border: 2px solid transparent;
    border-radius: 20px;
    background-color: #FFFFFF1A;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
    position: relative;
}

.custom-dots-container .owl-dot.active {
    background-color: #FFFFFF;
}


/* formulaire */

.section-formulaire {
    position: absolute;
    width: 100%;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 5;
}

.section-formulaire .container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 0;
}

.bloc-formulaire {
    width: 100%;
    background: #FFFFFF4D;
    backdrop-filter: blur(10px);
    padding: 32px 40px 46px 40px;
    max-width: 434px;
}

.titre-form {
    font-family: var(--font-asap-condensed);
    font-weight: 500;
    font-size: clamp(25px, 0.79vw + 1rem, 34px);
    line-height: 34px;
    text-align: center;
    color: #212121;
    margin-bottom: 22px;
}

.titre-form span {
    font-weight: 700;
}

.champ-form input,
.champ-form select {
    padding: 0 15px;
    height: 40px;
    width: 100%;
    font-size: 15px;
}

.champ-form select,
.champ-form input::placeholder,
.champ-form input {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    line-height: 26px;
    color: #898989;
    background: white;
}


/* presentation */

section.section-presentation {
    position: relative;
    overflow: hidden;
    padding: clamp(50px, calc(10vh + 1rem), 110px) 0;
}

.img-float {
    float: left;
    margin-right: 105px;
}

.img-pre {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    z-index: 1;
    max-width: 568px;
    mask-image: url('../images/presentation/mask.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    -webkit-mask-image: url('../images/presentation/mask.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
}

img.img-presentation {
    width: 100%;
    height: 100%;
}

.bloc-img-pre {
    position: relative;
}

.pre-deco {
    position: absolute;
    width: 960px;
    top: -100px;
    right: -90px;
    z-index: 2;
}

.para-pre {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #898989;
    display: table;
}


/* service */

section.section-service {
    background: #3C8FB833;
    padding: clamp(50px, calc(10vh + 1rem), 150px) 0;
}

.section-service .container-g {
    position: relative;
    overflow: visible;
    clip-path: inset(0 -9999px 0 0);
}

.section-service .owl-carousel .owl-stage-outer {
    overflow: visible;
}

.section-service .owl-carousel.owl-drag .owl-item {
    text-align: center;
}

.item-service {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.item-service img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-service::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000033;
}

.item-service::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.item-service:hover::after {
    opacity: 1;
}

.text-service {
    display: flex;
    align-items: center;
    gap: 24px;
    position: absolute;
    top: 50%;
    left: 40px;
    right: 40px;
    transform: translateY(-50%);
    height: 100%;
    z-index: 3;
}

.number-service {
    font-family: var(--font-asap-condensed);
    font-weight: 500;
    font-size: 50px;
    line-height: 26px;
    color: #FFFFFF;
}

.titre-service {
    font-family: var(--font-asap-condensed);
    font-weight: 500;
    font-size: 26px;
    line-height: 34px;
    color: #FFFFFF;
    text-align: left;
}

.btn-service {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-70%);
    width: 52px;
    height: 50px;
    background: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.6s ease, transform 0.6s ease, opacity 0.6s ease;
    opacity: 0;
    z-index: 3;
}

.btn-service:hover {
    background: #3C8FB8;
}

.item-service:hover .btn-service {
    transform: translateX(-50%);
    opacity: 1;
}

.slide-service {
    padding-bottom: 20px;
}


/* valeur */

section.section-valeur {
    position: relative;
    padding: clamp(50px, calc(10vh + 1rem), 120px) 0 clamp(40px, calc(7vh + 1rem), 70px) 0;
}

.section-valeur .circle {
    top: 60px;
    right: 62px;
}

.bloc-valeur {
    position: relative;
    border: 1px solid #CECECE;
    background: #EDF0F5;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.titre-hover-valeur {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    transition: all 0.6s ease;
}

.titre-hover-valeur div {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-asap-condensed);
    font-weight: 400;
    font-size: 28px;
    line-height: 26px;
    color: #212121;
}

.banner-valeur {
    position: relative;
    padding: 84px 65px;
    width: 100%;
    height: 100%;
    border: 1px solid #212121;
    background: #212121;
    display: flex;
    flex-direction: column;
    gap: 44px;
    align-items: center;
    top: 100%;
    opacity: 0;
    transition: all 0.6s ease;
}

.bloc-valeur:hover .banner-valeur {
    top: 0;
    opacity: 1;
}

.bloc-valeur:hover .titre-hover-valeur {
    bottom: 100%;
}

.titre-valeur {
    font-family: var(--font-asap-condensed);
    font-weight: 400;
    font-size: 28px;
    line-height: 26px;
    color: #3C8FB8;
    display: flex;
    align-items: center;
    gap: 12px;
}

.text-valeur {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    text-align: center;
    color: #FFFFFF;
}


/* intervention */

section.section-intervention {
    padding: 50px 0;
}

.banner-img-intervention {
    position: relative;
    height: 664px;
    max-height: 664px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.banner-img-intervention img {
    display: block;
    width: 800px;
    height: auto;
    object-fit: cover;
    position: relative;
    left: 50%;
    /* Transition fluide */
    transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1), width 2s cubic-bezier(0.4, 0, 0.2, 1), height 2s cubic-bezier(0.4, 0, 0.2, 1);
    /* Optimisation GPU */
    will-change: transform, width, height;
}

.max-para-pre {
    display: flex;
    justify-content: center;
    margin-top: 38px;
    margin-bottom: 50px;
}

.max-para-pre .para-pre {
    max-width: 760px;
}

.text-intervention1 {
    position: absolute;
    top: 15%;
    left: 15%;
    font-family: var(--font-asap-condensed);
    font-weight: 500;
    font-size: clamp(28px, 4.5vw + 1rem, 70px);
    line-height: 44px;
    letter-spacing: 0%;
    color: #092F42;
}

.text-intervention2 {
    position: absolute;
    bottom: 15%;
    transform: translateY(-50%);
    right: 44px;
    font-family: var(--font-asap-condensed);
    font-weight: 500;
    font-size: clamp(28px, 6vw + 1rem, 100px);
    line-height: 44px;
    color: #092F42;
}


/* avis et paiement */

section.section-avis {
    position: relative;
}

.bloc-avis {
    width: 100%;
    height: 100%;
    padding: 73px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #CECECE;
    background: #EDF0F5;
}

.section-avis circle {
    top: 50%;
    transform: translateY(-50%);
    left: 56px;
}


/* actualite */

section.section-actu {
    padding: 0;
}

.bloc-actu {
    position: relative;
    padding: 20px 23px 22px 23px;
    border: 1px solid #CECECE;
    background: #EDF0F5;
    height: 100%;
    width: 100%;
    transition: all 0.5s ease;
}

.bloc-actu .img-actu img {
    transition: transform 0.5s ease;
    transform: scale(1);
}

.bloc-actu:hover .img-actu img {
    transform: scale(1.1);
}

.img-actu img,
.img-actu {
    width: 100%;
    height: 100%;
    height: 256px;
}

.img-actu img {
    object-fit: cover;
}

.img-actu {
    margin-bottom: 31px;
    overflow: hidden;
}

.text-actu {
    font-family: var(--font-asap-condensed);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    color: #092F42;
    margin-bottom: 68px;
    height: 104px;
    overflow: hidden;
}

.date-actu {
    position: absolute;
    width: 53px;
    height: 86px;
    background: #3C8FB8;
    top: 0;
    font-family: var(--font-asap-condensed);
    font-weight: 600;
    font-size: 28px;
    line-height: 36px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.line-actu {
    width: 34px;
    height: 1px;
    background: #FFFFFF;
}


/* intern */

section.section-presentation-intern {
    padding: clamp(50px, calc(7vh + 1rem), 100px) 0;
}

.section-presentation-intern .bloc-formulaire {
    background: url('../images/slide/bg-form.jpg')no-repeat;
    background-size: cover;
    height: max-content;
}

section.section-img-intern {
    padding: 0;
}

.section-img-intern .img-pre {
    max-width: 620px;
}

.Mypage.contact .item-slide,
.Mypage.page .item-slide {
    height: 350px;
    min-height: unset;
}

.Mypage.contact .item-slide::before,
.Mypage.page .item-slide::before {
    display: none;
}

.Mypage.contact .icon-bar,
.Mypage.page .icon-bar {
    background: #212121;
}

.Mypage.contact .li-lien3 li,
.Mypage.page .li-lien3 li {
    color: #212121;
}

.Mypage.contact .section-navigateur,
.Mypage.page .section-navigateur {
    position: relative;
}

.bloc-text-slide {
    position: relative;
    z-index: 1;
}

.bloc-text-slide .circle {
    width: 348px;
    height: 284px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(100px);
    z-index: -1;
}


/* footer */

.section-avant-footer {
    position: relative;
    padding: clamp(50px, calc(10vh + 1rem), 140px) 0;
    z-index: 1;
}

.section-avant-footer::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: calc(100% + 100px);
    height: 460px;
    background: url('../images/footer/deco-bg.svg');
    background-size: cover;
    z-index: -1;
}

.bloc-af {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: clamp(16px, 1.67vw + 1rem, 48px);
    line-height: 95px;
    text-align: center;
    color: #092F42;
}

.bloc-af>div {
    font-family: var(--font-asap-condensed);
    font-weight: 600;
    font-size: clamp(16px, 2.29vw + 1rem, 60px);
    line-height: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.footer-g {
    position: relative;
    background: linear-gradient(180deg, #092F42 0%, #3C8FB8 100%);
    padding-top: 120px;
    padding-bottom: 48px;
    z-index: 1;
}

.footer-g::before {
    content: '';
    position: absolute;
    background: url('../images/footer/acdiag.svg')no-repeat;
    background-size: contain;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 828px;
    height: 130px;
    z-index: -1;
}

.logo-footer {
    margin-bottom: 51px;
}

.spons {
    display: flex;
    gap: 40px;
}

.contact-footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.titre-footer {
    font-family: var(--font-asap-condensed);
    font-weight: 500;
    font-size: 22px;
    line-height: 44px;
    color: #FFFFFF;
    margin-bottom: 22px;
}

.lien1-footer {
    display: flex;
    gap: 13px;
}

.text-lien1 i,
.text-lien1 {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #FFFFFF;
}

.ul-service-footer {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.ul-service-footer a {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 36px;
    color: #FFFFFF;
}

.champ-footer input {
    height: 60px;
    padding: 0 25px;
    margin-bottom: 13px;
}

.champ-footer input,
.champ-footer input::placeholder {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 36px;
    color: #212121;
    background: white;
}

.btn-footer {
    margin-bottom: 19px;
}

.text-form-footer {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #FFFFFF;
}

.copyright {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #FFFFFF;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 47px;
}

.copyright li {
    text-align: center;
}

.copyright span {
    color: #092F42;
}

.arobiz {
    display: flex;
    gap: 17px;
    align-items: center;
}


/* contact */

section.section-info-contact {
    padding: clamp(50px, calc(10vh + 1rem), 100px) 0;
}

section.section-form-contact {
    padding: 0;
    z-index: 2;
}

.champ-contact textarea,
.champ-contact input {
    height: 50px;
    padding: 0 20px;
    background: white;
}

.champ-contact:not(:last-child) input {
    margin-bottom: 20px;
}

.champ-contact textarea,
.champ-contact textarea::placeholder,
.champ-contact input::placeholder,
.champ-contact input {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    color: #898989;
}

.champ-contact textarea {
    padding: 12px 20px;
    height: 100%;
}

.text-form-contact {
    font-family: var(--font-inter);
    font-weight: 250;
    font-size: 13px;
    line-height: 20px;
    margin: 29px 0;
}

.text-form-contact a {
    font-weight: 400;
}

.bloc-info-c {
    border: 1px solid #CECECE;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    height: 100%;
}

.icon-info-c {
    margin-bottom: 45px;
}

.titre-info-c {
    font-family: var(--font-asap-condensed);
    font-size: 28px;
    line-height: 26px;
    text-align: center;
    color: #3C8FB8;
    margin-bottom: 35px;
}

.texte-info-c i,
.texte-info-c {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: #212121;
}

.bloc-info-c {
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease, border 0.4s ease;
    z-index: 1;
}

.bloc-info-c::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #212121;
    transition: height 0.5s ease;
    z-index: -1;
}

.bloc-info-c:hover::before {
    height: 100%;
}

.bloc-info-c .texte-info-c,
.bloc-info-c .texte-info-c i {
    position: relative;
    z-index: 1;
    color: #212121;
    transition: color 0.4s ease;
}

.bloc-info-c:hover .texte-info-c,
.bloc-info-c:hover .texte-info-c i {
    color: #FFFFFF;
}


/* template mobile */


/* navigateur mobile */

.menu-toggle:hover {
    height: 30px;
    gap: 15px;
}

.icon-bar {
    width: 100%;
    height: 3px;
    background: #FFFFFF;
    border-radius: 2px;
    transition: all 0.3s ease;
    display: block;
}

.menu-toggle {
    width: 36px;
    height: 15px;
    position: relative;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 0;
    z-index: 1001;
    transition: height 0.3s ease, gap 0.3s ease;
}


/* fixed */

.Mypage.contact .section-navigateur.fixed,
.Mypage.page .section-navigateur.fixed,
.section-navigateur.fixed,
.section-navigateur.fixed {
    position: fixed;
    top: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    opacity: 1;
}

.section-navigateur.fixed .icon-bar {
    background: #212121;
}

.section-navigateur.fixed .li-lien3 li {
    color: #212121;
}

.Mypage.contact .section-navigateur.removing,
.Mypage.page .section-navigateur.removing,
.section-navigateur.removing {
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

.lien-mobile.actived {
    position: fixed;
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    height: 100vh;
    max-height: 100vh;
    overflow: auto;
    z-index: 13;
}

.lien-mobile.actived::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: #FFFFFF4D;
    left: 42.5%;
    top: 0;
    transform: translateX(-40px);
}

.lien-mobile {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    left: 0px;
    background-color: #212121;
    gap: 0px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(-15px);
    overflow: hidden;
    height: 100vh;
}

.lien-mobile>li {
    width: 100%;
}

.nav-lien img.logo-fixed,
.nav-lien img.logo-default {
    padding: 15px 0;
}

.lien-mobile a br {
    display: none;
}

.lien-mobile .dropdown.active {
    display: block;
    opacity: 1;
    transform: translateY(0px);
}

.tab-content a:hover,
.nav-pills a:hover,
.nav.nav-pills>div:hover {
    color: #3C8FB8;
}

.my-italic {
    font-family: var(--font-inter);
    font-weight: 500;
    /* font-size: 49px;
    line-height: 6rem; */
    font-size: clamp(35px , 2vw + 1rem, 49px);
    line-height: clamp(4rem , 2vw + 3rem, 6rem);
    letter-spacing: 0%;
    text-align: center;
}

.bloc-title h2, .bloc-title h1, .bloc-title {
 
    font-size: clamp(25px, 0.79vw + 1rem, 34px);
 
}