@font-face {
    font-family: "RajdhaniBold";
    src: url(./fonts/Rajdhani/Rajdhani-Bold.ttf) format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: "RajdhaniMedium";
    src: url(./fonts/Rajdhani/Rajdhani-Medium.ttf) format('truetype');
    font-weight: medium;
}

html {
    scroll-behavior: smooth;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

@font-face {
    font-family: "RobotoReg";
    src: url(./fonts/Roboto/static/Roboto-Regular.ttf) format('truetype');
}
@font-face {
    font-family: "RobotoBlack";
    src: url(./fonts/Roboto/static/Roboto-Black.ttf);
}
.title_text{
    font-size: 24pt;
}
.subtitle_text{
    font-size: 16pt;
}
.p-text{
    font-size:12pt
}
a{
    text-decoration: none;
    color:white;
}
@media(min-width:780px) {
    #award{
    background-color: #00B3FF;
    z-index: -10;
    padding-top: 7%;
    position: relative;
    margin-top: -12%;
}
    .card-title span{
    color: #13161A;
    font-size: 30pt;
    transform: skew(45deg);
    text-align: -webkit-center;
}
    .expe_card{
    position: relative;
    width: 1536px;
    margin-inline: auto;
    margin-top: 85px

}
    .card-title{
    position: absolute;
    top: -55px;
    left: 170px;
    background-color: #00B3FF;
    height: 6vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 864px;
    transform: skew(-45deg);
}
    /* Position Martell under and centered */
#bloc-martell{
        flex-basis: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: -5.5%;
}
#bloc-martell .pilot-img-container{     
    width: 36%;
    position: relative;
    top: -29%;
    left: -4%;
}
    #pres_bloc-one p{
    color: white;
    text-align: center;
    text-wrap-style: balance;
    margin: 0px 92px 65px;
}
    #carousel_controls{
    position: absolute;
    left: 50vw;
    bottom: 5vh;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
}
    /* Social icons fixed right side */
#social-fixed{
    position: fixed;
    top: 86%;
    right: 111px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}
#social-fixed a{
    width: 50px;
    height: 50px;
    background-color: #00B3FF;
    border: 2px solid black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
#social-fixed a:hover{
    background-color: rgba(58, 115, 148, 0.8);
    transform: scale(1.1);
}
#social-fixed img{ 
    width: 35px;
    height: 35px;
    filter: brightness(0) saturate(100%);
}

/* Hide mobile social links on desktop */
#social-links-mobile{
    display: none;
}
    main{
    position: relative;
    z-index: 9;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
body{
    width: 100vw;
    min-width: 1920px;
    height: 100vh;
    margin: 0;
    background-image: url("./img/Voiture-fond.png");
    background-repeat: no-repeat;
    overflow: hidden;
    /* background-position: top;
    background-size: cover; */
}

/* Handle Windows 125% display scaling - adjust viewport when needed */
@media (max-width: 1536px) and (min-width: 1200px) {
    body {
        transform: scale(0.8);
        transform-origin: top left;
        width: 1920px;
        height: 125vh;
    }
}
    .nav-item{
        color: white;
        font-size: 18px;
        align-self: center;
        transition: color 0.3s ease;
    }
    
    .nav-item:hover{
        color: #00B3FF;
    }
    
    /* Style Contact nav button like overbox button */
    .nav-item.contact-btn{
        margin: auto;
        color: white;
        text-align: center;
        font-size: 17pt;
        border: white solid 3px;
        border-radius: 30px;
        width: 100px;
        height: 30px;
        padding: 5px 15px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-item.contact-btn:hover{
        background-color: #00B3FF;
        color: white;
        border-color: #00B3FF;
    }
    
    #main-logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #main-logo img{
        height: 60px;
        max-width: 120px;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }
    nav{
    top: 0;
    position: fixed;
    background-color: #13161A;
    width: 100%;
    height: 10%;
    border-bottom: #00B3FF solid 4px;
    z-index: 10;
    box-shadow: 0px -2px 56px 2px #13161A;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .nav-items{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }

    
    /* Desktop home section */
    #home{
        height: 90vh;
        overflow: hidden;
        position: relative;
    }
    
    #sm-menu_btn{
        display: none;
    }
    #sm-menu{ display:none; }
    #carousel_overbox{
        left: 4%;
        bottom: 13%;
        border-radius: 7px;
        padding: 15px 30px;
        width: 691px;
    }

    #overbox-btn{
    margin: auto;
    color: white;
    text-align: center;
    font-size: 17pt;
    border: white solid 3px;
    border-radius: 30px;
    width: 27%;
    max-width: 100px;
    height: 30px;
    padding: 0% 3%;
    }
    #overbox-title{
        width:100%
    }
    #overbox-text{
        margin-top: 5px;
    }
    #eclair_first{
    position: absolute;
    top: -5vh;
    left: -19px;
    z-index: 9;
    height: 40vh;
    }
    #home_carousel .car_item{
        width: 1920px;
        height: 90vh;
    }

    #values{
        position: relative;
        width: 100%;
    }

    #values_subtable{
        padding-top: 50px;
        padding-bottom: 50px;
        display: flex;
        flex-wrap: wrap;
        background-color: #13161A;
        scrollbar-width: none;
        position: absolute;
        top: 111%;
        width: 80%;
        margin-left: 15%;
    }
    #values_before{
    font-size: 22pt;
    color: white;
    margin-left: 4%;
    }
    .values-box{
    display: flex;
    transform: skew(-35deg);
    border: #00B3FF solid 6px;
    margin-left: 10px;
    margin-bottom: 10px;
    width:40%;
    align-content: center;
    align-items: center;
    }
    .value-title{
    background-color: #00B3FF;
    padding: 0px 26px;
    height: 100%;
    align-content: space-evenly;
    }
    .value-title span{
    display: inline-block;
    transform: skew(35deg);
    color: #13161A;
    font-size:20pt;
    text-wrap: nowrap;
    }
    .value-desc{
    color: #00B3FF;
    transform: skew(35deg);
    padding: 0px 30px
    }
    #pres_driver{
    display: flex;
    background-color: #13161A;
    padding-top: 10%;
    flex-wrap: wrap;
    justify-content: space-around;
    }
    #pres_driver>h3{
    position:absolute;
    color: white;
    text-align: center;
    font-size: 22pt;
    width: 100%;
    margin-inline: auto;
    }
    .pilot-block{
        width:25%
    }
    #pellier-phone{
        display: none;
    }
    #pellier-ordi{
        display: block;
    }
    #camilli-phone{
        display: none;
    }
    #camilli-ordi{
        display: block;
    }
    #martell-phone{
    display: none;
    }
    #martell-ordi{
        display: block;
    }
    #bloc-camilli .pilot-img-container{
        width: 132%;
        transform: translate(0%, -1%);
    }
    #bloc-pellier .pilot-img-container{
        width: 125%;
        transform: translate(-23%, 2%);
    }
    #cadrap{
            width: auto;
    position: absolute;
    top: 56%;
    right: 12%;
    z-index: -2;
    }
    #pedrap{
            width: auto;
    position: absolute;
    top: 65%;
    left: 12%;
    z-index: -2;
    }
    #catxt3::after,
    #catxt4::after,
    #catxt5::after {
        content: "";
        display: inline-block;
        margin-left: 6px;
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
        vertical-align: middle;
    }   
    #catxt1 {     
        position: absolute;
        top: 66%;
        left: 77%;
        width: 23%;
        color: #13161a;
    }
    #catxt2 {
        position: absolute;
        top: 20%;
        left: 26%;
        width: 40%;
        color: white;
        font-size: 16pt;     
    }
    #catxt3 {     
        position: absolute;
        top: 33%;
        left: 8%;
        width: 45%;
    }
    #catxt4{
    position: absolute;
    top: 43%;
    left: 9%;
    width: 34%;
    text-align: right;
    }
    #catxt5{
        position: absolute;
        top: 57%;
        left: 18%;
        width: 23%;
        text-align: right;
    }
    #catxt6{
        position: absolute;
        top: 76%;
        left: 13%;
        width: 40%;
    }
    #petxt3::before,
    #petxt4::before,
    #petxt5::before {
        content: "";
        position: absolute;
        display: inline-block;
        left: -14px;
        top: 31%;
        margin-right: 7px;
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
        vertical-align: middle;
    }
    #petxt1{
        position: absolute;
        top: 76%;
        left: 0%;
        width: 25%;
        color: #13161a;
        text-align: center;
    }
    #petxt2{
        position: absolute;
        top: 20%;
        left: 44%;
        width: 43%;
        color: white;
        font-size: 16pt;
    }
    #petxt3{
        position: absolute;
        top: 34%;
        left: 54%;
        width: 40%;
    }
    #petxt4{
        position: absolute;
        top: 47%;
        left: 54%;
        width: 38%;
    }
    #petxt5{
        position: absolute;
        top: 65%;
        left: 54%;
        width: 29%;
    }
    #petxt6{
        position: absolute;
        top: 86%;
        left: 48%;
        width: 40%;
    }
    #matxt3::after,
    #matxt4::after,
    #matxt5::after {
        content: "";
        display: inline-block;
        margin-left: 6px;
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
        vertical-align: middle;
    }
    #matxt1 {
    position: absolute;
    top: 69%;
    left: 75%;
    width: 23%;
    color: #13161a;
    }
    #matxt2 {
    position: absolute;
    top: 39%;
    left: 17%;
    width: 40%;
    color: white;
    font-size: 16pt;
    }
    #matxt3 {
    position: absolute;
    top: 54%;
    left: 9%;
    width: 45%;
    }
    #matxt4 {
    position: absolute;
    top: 67%;
    left: 8%;
    width: 36%;
    text-align: right;
    }
    #matxt5 {
        position: absolute;
        top: 83%;
        left: 17%;
        width: 32%;
        text-align: right;
    }
    #matxt6 {
    position: absolute;
    top: 87%;
    left: 75%;
    width: 40%;
    }
    #pres_bloc-two{
        border-top: #00B3FF solid 15px;
        background-color: #13161A;
        padding-top: 50px;
        position: relative;
        z-index: 0;
        display: flex;
        padding: 4% 10% 8% 10%;
    }
    #team-title{
        background-color: #00B3FF;
        padding: 11px 34px;
        width: 211px;
        transform: skew(-20deg);
        margin-inline: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #team-textbloc{
        color: white;
    }
    #tableone-title{
        display: none
    }
    #tableone_ordi{
        position: relative;
        margin-left: 10%;
        display:block
    }
    #tabletwo-title{
        display: none
    }
    #tabletwo_ordi{
        position: relative;
        margin-left: 5%;
        display: block
    }
    #tableone-ordtitle{
        position: absolute;
        left: 45%;
        top: 5%;
    }
    #tabletwo-ordtitle{
        position: absolute;
        top: 4%;
        left: 48%;
    }
    .table_subdiv>span{
        color: #00B3FF;
        margin-left: 25%;
    }
    .table_subdiv p{
        color: white;
    }
    #tableone-tech{
        position: absolute;
        top: 26%;
        left: 19px;
        width: 346px;
        max-height: -webkit-fill-available;
        overflow: auto;
    }
    #tableone-mark{
        position: absolute;
        top: 26%;
        left: 403px;
        width: 384px;
        max-height: -webkit-fill-available;
        overflow: auto;
    }
    #tableone-admin{
        position: absolute;
        top: 26%;
        left: 826px;
        width: 326px;
        max-height: -webkit-fill-available;
        overflow: auto;
    }
    #tabletwo-eng{
    position: absolute;
    top: 26%;
    left: 19px;
    width: 365px;
            max-height: -webkit-fill-available;
        overflow: auto;
    }
    #tabletwo-log{
    position: absolute;
    top: 26%;
    left: 422px;
    width: 422px;
                max-height: -webkit-fill-available;
        overflow: auto;
    }
    #tabletwo-meca{
    position: absolute;
    top: 26%;
    left: 883px;
    width: 384px;
                    max-height: -webkit-fill-available;
        overflow: auto;
    }
    #éclair-trois{
    position: absolute;
    top: 90%;
    left: 0%;
    z-index: 0;
    }
    #eclair_second{
     position: absolute;
    top: -44%;
    right: 0%;
    z-index: 2;
    }

    #expertise{
        background-image: url("./img/Fond-Expertise.svg");
        background-repeat: no-repeat;
        margin-top: 9vh;
        position: relative;
        padding-left: 110px;
        margin-bottom: -36%;
    }
    #expe_cards-mob{
    display: none;
    }  
    
    /* Hide mobile placeholder on desktop */
    #expe_mobile_placeholder{
        display: none;
    }
    
    #expe_cards-ordi{
        display: flex;
        gap: 44px;
        justify-content: flex-end;
        margin-top: 40px;
    } 
    #card-red{
        margin-left:-96px;
        margin-right: -39px;
    }
    .card-content{
        position: absolute;
        top:11.5%
    }
    .card-content p{
        text-align: center;
        width: 42%;
    }
    .card-content li{
        list-style-type: disc;
        margin-bottom: 1.8%;
        width: 42%;
    }
    .card-content>span{
    display: inline-block;
    margin-bottom: 19%;
    width: 33%;
    margin-left: 11%;
    }
    #rd-title-desktop{
        margin-left: 18%!important;
    }
    #events-desc-desktop{
        margin-top: 25px;
    }
    #logistics-title-desktop{
        margin-left: 16%!important;
    }
    #events-title-desktop{
        margin-left: 16%;}
    #cardloc-content{
        left:9%
    }
    #cardloc-content>span{
        margin-top:-2%;
        margin-bottom: 21%!important;
    }
    #cardlog-content{
           left: 31%;
        width: 40%;
    }
    #cardeve-content{
        left:53%;
        width: 40%;
    }
    #logistics-desc-desktop{
        margin-top:25px!important
    }
    #cardred-content{
        left:79%
    }
    #cardred-content>span{
        margin-bottom: 38%;
    }
    #cardred-content>p{
        width: 86%;
        margin-left: -22%;
    }
    #cardred-content>ul{
        width: 144%;
        margin-left: -18%;
    }
    #cup{display: none;}
    #sub-podiums{
        display: flex;
        justify-content: center;
        padding-right: 18%
    }
    #pod_img{
        margin-right: 50px;
    }
    #numbertwo{
    position: relative;
    margin-top: 10px;
    left: 7.6%;
    font-size: 46pt;
    }
    #numberone{
    margin-top: 10px;
    position: relative;
    left: 8%;
    font-size: 46pt;
    }
    #podiums{
        position: relative;
        margin-left: 15px;
        padding-left: 50px;
    }

    #pod_title{
        color: white;
        margin-left: 30%;
        margin-bottom: 0;
        position: absolute;
        top: -15%;
        left: 3%;
    }
    #award_title{
        color: #13161A;
        margin-top: 40px;
        margin-right: 10%;
        flex-grow: 0;
    }
    #pods_list{
        color: white;
        margin-top: 0%;
        margin-left: 30%;
        margin-bottom: 3%;
        width: 51%;
    }
    .pod_item{
        list-style: disc!important;
        display: flex;
        width: 58%;
        justify-content: space-between;
    }
    .victory_line{
        flex-grow: 2;
    }
    .prec_line{
        margin: 0% 3%;
    }
    #vics_img-bg{
        position: absolute;
        height: 46%;
        width: 89%;
        border-radius: 108px;
        top: 68%;
        left: 3%;
        background-color: #13161A;
        z-index: -1;
    }

    #vics_images{
        height: 202px;
        margin: -4px;
        content: url('./img/Champions-drapeaux-ORDINATEUR.png'); /* Use Champions-drapeaux image on desktop */
    }
    #droveforus{
        background-color: #13161A;
        position: absolute;
        z-index: 100;
        width: 100%;
        padding-left: 40px;
        padding-top: 1px;
        padding-bottom: 2%;
    }
    #dfu_title{
        color: #00B3FF;
        margin-top: 62px;
        padding-top: 47px;
        padding-left: 5%;
    }
    #dfu_subtext{
        margin-left: 5%;
        margin-top: -2%;
        color: white;
    }
    #dfu_img-holder{
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        transform: skew(-20deg);
        /* Hide scrollbar for WebKit browsers */
    }
    #dfu_img-holder::-webkit-scrollbar {
        display: none;
    }
    #dfu_subbloc{
        z-index: 0;
        position: relative;
        height: 96%;
        margin-top: -62px;
    }
    #dfu_img{
        transform: skew(20deg);
        min-width: 100%; /* Ensure image is wide enough to scroll */
        height: auto;
        display: block;
    }
    #dfu_overgrid{
        border: #00B3FF solid 10px;
        width: 5.2%;
    }
    #dfu_overgrid span{
        position: absolute;
        display: flex;
        height: 100%;
        width: 3407px;
        top: 0%;
        left: 3%;
    }
    #contact{
    background-color: #13161A;
    border-top: #00B3FF solid 2px;
    margin-top: 26%;
    padding-bottom: 30px;
    padding-top: 3%;
    display: flex;
    justify-content: space-around;
    }
    #follow_zone span{
        color: white;
    }   
    #contact_toplogo{
        display:block;
    }
    #underlogo p{    
        color: white;
        margin-bottom: 4px;
    }
    #underlogo{
        text-align: center;
    }
    #contact_imglinks{
        margin: 0;
    }
    #contact_imglinks img{
        height:5%
    }
    .contact_line{
        display: flex;
        margin-bottom: 20px;
    }
    .contact_line img{
        height: 5%
    }
    .contact_line span{
        color: white;
        margin-left: 15px
    }
    #contact_zone{
        height: 25vh;
        padding-left: 70px;
    }
    #link_zone{
        height: 25vh;
        padding-left: 70px;
    }
    #link_title{
        color: #fff;
        margin-top: 0px
    }
    .link_line{
        color: white;
        margin-bottom: 20px;
        cursor: pointer;
        transition: color 0.3s ease;
    }
    .link_line:hover{
        color: #00B3FF;
    }
    #contact_title{
        margin-top:0px;
        color: white;
    }
    #tableone-content{
        display: none;
    }
    #tabletwo-content{
        display: none;
    }
}

@media(max-width:780px){
        #follow_zone span{
        color: white;
    }  
    #follow_zone{
    position: absolute;
    top: 28vw;
    left: 38vw;
    display: flex;
    flex-direction: column;
    align-items: center;

    }
    #follow_zone span{
        color: white;
    }
    
    /* Mobile social links inside follow zone */
    #social-links-mobile{
        display: flex;
        gap: 5px;
        justify-content: center;
    }
    #social-links-mobile a{
        width: 30px;
        height: 30px;
        background-color: #00B3FF;
        border: 2px solid black;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    #social-links-mobile a:hover{
        background-color: rgba(58, 115, 148, 0.8);
        transform: scale(1.1);
    }
    #social-links-mobile img{
        width: 20px;
        height: 20px;
        filter: brightness(0) saturate(100%);
    }
    
    /* Hide desktop social links on mobile */
    #social-fixed{
        display: none;
    }
    
    /* Hide navigation flag on mobile */
    #flag-sel{
        display: none;
    }
    #award{
    background-color: #00B3FF;
    z-index: -10;
    padding-top: 7%;
    padding-bottom: 8px;
    position: relative;
    margin-top: -12%;
}
    .card-title span{
    color: #13161A;
    font-size: 16pt;
    transform: skew(45deg);
    text-align: -webkit-center;
}
    .expe_card{
    position: relative;
    width: 100%;
    margin-inline: auto;
    margin-top: 85px;

}
    .card-title{
    position: absolute;
    top: -55px;
    left: 20%;
    background-color: #00B3FF;
    height: 7vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55vw;
    transform: skew(-45deg);
    z-index: 1;
}
    #social_fixed{
        display:none
    }
body{
    width:100%;
    height: 100vh;
    margin: 0;
    background-image: url("./img/Voiture-fond.png");
    background-repeat: no-repeat;
    background-size: 190vh;
    background-position: top;
    overflow: hidden;
}
    #social-fixed{
        position: absolute;
    bottom: -467%;
    left: 43%;
    }
    main{
    position: relative;
    z-index: 9;
    height: 100vh;
    min-width: auto;
    overflow-y: auto;
    overflow-x: hidden;
    top: 0;
}
    #contact_toplogo{
        display:none;
    }
    
    #main-logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #main-logo img{
        height: 50px;
        max-width: 100px;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }
    .nav-item{
    visibility: hidden;
    }
    nav{
    top: 0;
    position: fixed;
    background-color: #13161A;
    width: 100%;
    height: 10%;
    border-bottom: #00B3FF solid 8px;
    z-index: 10;
    box-shadow: 0px -2px 56px 2px #13161A;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .nav-items{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    main{
        top:10%;
    }
    
    /* Prevent extra space at bottom of page */
    html, body {
        margin: 0;
        padding: 0;
    }
    
    main {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    /* Mobile home section - constrained to 90vh */
    #home{
        height: 90vh;
        overflow: hidden;
        position: relative;
    }
    
    #sm-menu_btn{
        display: block;
        position: fixed;
        bottom: 2vh;
        left: 50%; /* Center horizontally */
        transform: translateX(-50%) skew(-10deg); /* Center and apply skew */
        width: 80px;
        height: 80px;
        background-color: #13161A;
        border: #00B3FF solid 4px;
        border-radius: 5px;
        z-index: 101;
    }
    .carousel-dot{ width: 18px; height: 18px; }

    #carousel_overbox{
    left: 6%;
    top: 34px;
    border-radius: 35px;
    padding: 22px 34px;
    width: 72%;
    }
    #overbox-btn{
        margin: 20px auto 0 auto;
        color: white;
        text-align: center;
        font-size: 24pt;
        border: white solid 3px;
        border-radius: 32px;
        width: 110px;
        height: 30px;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    #eclair_first{
    position: absolute;
    top: -1%;
    left: 0px;
    z-index: 9;
    height: 30vh;
    }
    #eclair_second{
    position: absolute;
    top: -43%;
    right: -36%;
    }
    
    /* Mobile carousel - properly sized for viewport */
    #home_carousel{
        height: 90vh !important;
    }
    #home_carousel img{
        width: 100vw !important;
        height: 90vh !important;
        object-fit: cover;
    }
    #home_carousel .car_item{
        min-width: 100vw !important;
        width: 100vw !important;
        height: 90vh !important;
        flex-shrink: 0;
    }
    
    /* Mobile carousel controls - positioned to left of menu button */
    #carousel_controls{
        position: absolute;
        left: 6vw;
        bottom: 3vh;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 12;
    }

    #expe_cards-mob .expe_card .card-title{ cursor: pointer; }
    #expe_cards-mob .expe_card .card-body{
    max-height: 20px;
    overflow: hidden;
    transition: max-height 0.35s ease;
         }
    #expe_cards-mob .expe_card.open .card-body{ max-height: 1000px; }

    /* Mobile expertise cards: accordion behavior */
    #expe_cards-mob .expe_card{
    position: relative;
    width: calc(100% - 40px);
    margin: 26px auto 30px;
    cursor: pointer;
    min-height: 105px;
    transition: transform 0.2s ease;
    overflow: visible; /* Allow expanded content to overflow */
    z-index: 1; /* Base z-index for all cards */
    }

    /* When a card is open, give it higher z-index */
    #expe_cards-mob .expe_card.open{
    z-index: 200; /* Higher than any other card */
    }

    /* Hover effect for the entire card */
    #expe_cards-mob .expe_card:hover{
        transform: translateY(-2px); /* subtle lift effect */
    }

    #expe_cards-mob .expe_card:hover .card-body{
        box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* enhanced shadow on hover */
    }

    /* White content block with image on top - positioned to flow with document */
    #expe_cards-mob .card-body{
        background: white;
        border-radius: 6px 6px 0 0; /* less round top corners, no bottom radius */
        padding: 16px;
        padding-top: 29px;
        padding-bottom: 25px; /* space for full-width handle */
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        position: absolute; /* Always absolute to prevent DOM jumping */
        top: -20px; /* small negative margin to bring closer to title */
        left: 0;
        right: 0;
        margin: 0 auto; /* center horizontally */
        overflow: hidden;
        width: 80vw; /* increased from 70vw to 80vw for wider content */
        max-height: 180px; /* increased from 120px to show more content preview */
        transition: max-height 420ms cubic-bezier(.2,.9,.2,1), 
                    padding 300ms ease, 
                    box-shadow 320ms ease;
        z-index: 0;
    }

    /* Image positioned at top of white block - full width of content block */
    #expe_cards-mob .card-img{
    position: absolute;
    top: -17px;
    left: 0;
    right: 0;
    width: 100%;
    height: 110px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    z-index: 5;
    }
    #expe_cards-mob .card-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Content hidden when collapsed */
    #expe_cards-mob .card-txt{
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 280ms ease, transform 280ms ease;
        color: #13161A;
        margin-top: 30px;
        margin-bottom: 40px; /* space for handle */
    }
    #expe_cards-mob .card-txt p{
        color: #13161A;
        margin-bottom: 15px;
    }
    #expe_cards-mob .card-txt ul{
        list-style-type: disc; /* explicit disc bullets */
        padding-left: 20px;
        margin-left: 0; /* ensure bullets are visible */
    }
    #expe_cards-mob .card-txt li{
        color: #13161A;
        margin-bottom: 8px;
        display: list-item; /* ensure list item display */
    }

    /* Handle at bottom with chevron - always visible */
    #expe_cards-mob .card-handle{
        position: absolute;
        bottom: 0; /* moved to very bottom */
        left: 0;
        right: 0;
        width: 100%; /* full width */
        height: 25px; /* slightly taller for better touch target */
        background-color: #f0f0f0;
        border-radius: 0; /* no border radius for full width */
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease;
        cursor: pointer;
        z-index: 10; /* ensure handle is always visible above content */
    }

    #expe_cards-mob .card-handle::after{
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid #13161A;
        border-bottom: 2px solid #13161A;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
    }

    /* Chevron points up when expanded */
    #expe_cards-mob .expe_card.open .card-handle::after{
        transform: rotate(-135deg);
    }

    #expe_cards-mob .card-handle:hover{
        background-color: #e0e0e0;
    }

    /* Open state: expand and reveal content */
    #expe_cards-mob .expe_card.open .card-body{
    max-height: 700px;
    padding-top: 70px;
    padding-bottom: 21px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    width: 100%;
    top: 0;
    border-radius: 6px; /* Ensure proper border radius when expanded */
    z-index: 10;
    }
    #expe_cards-mob .expe_card.open .card-txt{
        opacity: 1;
        transform: translateY(0);
    }

    #values{
        position: relative;
        width: 100%;
    }

    #values_subtable{
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    overflow-x: scroll;
    background-color: rgba(19, 22, 26, 0.8);
    scrollbar-width: none;
    }
    .values-box{
    display: flex;
    flex-grow: 2;
    height: 36px;
    transform: skew(-35deg);
    border: #00B3FF solid 11px;
    margin-left: 35px;
    align-content: center;
    align-items: center;
    }
    .value-title{
    background-color: #00B3FF;
    padding: 10px 26px;
    align-content: space-evenly;
    height: 100%;
    }
    .value-title span{
    display: inline-block;
    transform: skew(35deg);
    color: #13161A;
    font-size:20pt;
    text-wrap: nowrap;
    }
    .value-desc{
    color: #00B3FF;
    transform: skew(35deg);
    font-size: 16pt;
    text-wrap: nowrap;
    padding: 0px 30px
    }
    #pres_bloc-one p{
    color: white;
    text-align: center;
    text-wrap-style: pretty;
    margin: 0px 24px 27px;
    }
    #values_before{
    font-size: 20pt;
    color: white;
    /* margin: 50px 0px 67px 50px; */
    margin-left: 32px;

    }
    #pres_driver{
    display: flex;
    flex-direction: column;
    background-color: #13161A;
    }
    #pres_driver>h3{
    color: white;
    text-align: center;
    font-size: 20pt;
    width: 68vw;
    margin-inline: auto;
    }
    #pellier-phone{
        position: relative;
        display: block;
        z-index: 2;
    }
    #pellier-ordi{
        display:none;
    }
    #cadrap{
        position: absolute;
        top: 18%;
        right: 60%;
        width: 16%;
        z-index: 0;
    }
    #pedrap{
    position: absolute;
    top: 20%;
    right: 28%;
    width: 16%;
    z-index: 0;
    }
    #pellier-ordi{
        display: none;
    }
    #camilli-phone{
        position: relative;
        display: block;
        z-index: 1;
    }
    #camilli-ordi{
        display: none;
    }
    #martell-phone{
    position: relative;
    display: block;
    z-index: 1;
    }

    #martell-ordi{
        display: none;
    }
    #bloc-martell .pilot-img-container{
    transform: translate(15%, -17%);
    justify-self: self-end;
    width: 500px;
    margin-bottom: -12%;
    }
    #bloc-pellier .pilot-img-container{
 
    transform: translate(-16%, -20%);
    /* margin-top: -15%; */
    /* margin-left: -18%; */
    width: 500px;
    justify-self: left;
    }
    #bloc-camilli .pilot-img-container{

    transform: translate(26%, 2%);
    margin-top: -9%;
    /* margin-left: -25%; */
    width: 570px;
    justify-self: right;
    }
    #catxt3::after,
    #catxt4::after,
    #catxt5::after {
    content: "";
    display: inline-block;
    margin-left: 12px;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    vertical-align: middle;
    }   
    #catxt1 {     
        position: absolute;
        top: 13%;
        left: 42%;
        width: 27%;
        color: #13161a;
        z-index: 2;
        pointer-events: none;
    }
    #catxt2 {     
        position: absolute;
        top: 26%;
        left: 30%;
        width: 40%;
        color: white;
        font-size: 16pt;
        z-index: 2;
        pointer-events: none;
    }
    #catxt3 {     
    position: absolute;
    top: 40%;
    left: 9%;
    width: 50%;
    z-index: 2;
    pointer-events: none;
    }
    #catxt4 {     
    position: absolute;
    top: 48%;
    left: 11%;
    width: 37%;
    z-index: 2;
    text-align: right;
    pointer-events: none;
    }
    #catxt5 {     
    position: absolute;
    top: 62%;
    left: 18%;
    width: 29%;
    z-index: 2;
    text-align: right;
    pointer-events: none;
    }
    #catxt6 {     
        position: absolute;
        top: 83%;
        left: 19%;
        width: 40%;
        z-index: 2;
    }
    #petxt3::before,
    #petxt4::before,
    #petxt5::before {
        content: "";
        position: absolute;
        display: inline-block;
        left: -16px;
        top: 31%;
        margin-right: 11px;
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 50%;
        vertical-align: middle;
    }
    #petxt1 {     
        position: absolute;
        top: 16%;
        left: 28%;
        width: 30%;
        color: #13161a;
        text-align: center;
        z-index: 2;
    }
    #petxt2 {     
        position: absolute;
        top: 29%;
        left: 33%;
        width: 43%;
        color: white;
        font-size: 16pt;
        z-index: 2;
    }
    #petxt3{
        position: absolute;
        top: 41%;
        left: 50%;
        width: 40%;
        z-index: 2;
    }
    #petxt4 {     
        position: absolute;
        top: 53%;
        left: 50%;
        width: 40%;
        z-index: 2;
    }
    #petxt5 {     
        position: absolute;
        top: 69%;
        left: 50%;
        width: 32%;
    z-index: 2; }
    #petxt6 {     
        position: absolute;
        top: 90%;
        left: 41%;
        width: 40%;
        z-index: 2;
    }
    #matxt3::after,
    #matxt4::after,
    #matxt5::after {
        content: "";
        display: inline-block;
        margin-left: 5px;
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 50%;
        vertical-align: middle;
    }
    #matxt1 {
     position: absolute;
    top: 6%;
    left: 47%;
    width: 27%;
    color: #13161a;
    z-index: 2;
    }
    #matxt2 {
    position: absolute;
    top: 20%;
    left: 27%;
    width: 50%;
    color: white;
    font-size: 16pt;
    z-index: 2;
    }
    #matxt3 {
    position: absolute;
    top: 35%;
    left: 15%;
    width: 52%;
    z-index: 2;
    }
    #matxt4 {
    position: absolute;
    top: 48%;
    left: 8%;
    width: 50%;
    z-index: 2;
    text-align: right;
    }
    #matxt5 {
    position: absolute;
    top: 64%;
    left: 21%;
    width: 36%;
    z-index: 2;
    text-align: right;
    }
    #matxt6 {
    position: absolute;
    top: 87%;
    left: 32%;
    width: 40%;
    z-index: 2;
    }
    #pres_bloc-two{
    border-top: #00B3FF solid 15px;
    background-color: #13161A;
    padding-top: 50px;
    position: relative;
    padding-bottom: 90px;
    z-index: 0;
    }
    #tableone_ordi{
        display:none;
    }
    #tabletwo_ordi{
        display:none;
    }
    #team-title{
    background-color: #00B3FF;
    padding: 29px;
    width: 45vw;
    height: 0px;
    transform: skew(-20deg);
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    #team-textbloc{
        margin: 30px 14vw;
        color: white;
    }   
    /* Table accordion styles for mobile */
    .table-accordion-header{
    width: 65vw;
    height: 50px;
    display: flex;
    transform: skew(-45deg);
    margin-inline: auto;
    /* margin-bottom: -24px; */
    background-color: #00B3FF;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
    }
    .table-accordion-header:hover{
        background-color: #0099dd;
    }
    
    /* Chevron icon styles */
    .chevron-icon {
        position: absolute;
        right: 46px;
        top: 15px;
        width: 12px;
        height: 12px;
        border-right: 2px solid #13161A;
        border-bottom: 2px solid #13161A;
        transform: skew(45deg) rotate(45deg);
        transition: transform 0.3s ease, right 0.2s ease;
    }
    
    .table-accordion-header.active .chevron-icon {
        transform: skew(45deg) rotate(-135deg);
    }
    
    #pres_table-one{
        margin-bottom: 15px!important ;
    }
    .table-accordion-content{
        /* previously used display:none; now animatable */
        max-height: 0;
        overflow: hidden;
        background-color: rgba(19, 22, 26, 0.9);
        margin: 0 5vw 20px 5vw;
        padding: 0 20px; /* collapsed has no vertical padding */
        opacity: 0;
        transform: translateY(-6px);
        transition: max-height 420ms cubic-bezier(.2,.9,.2,1),
                    opacity 280ms ease,
                    transform 280ms ease,
                    padding 280ms ease,
                    border-color 320ms ease,
                    box-shadow 320ms ease;
        border: 2px solid transparent; /* will become blue when open */
    }
    .table-accordion-content.open{
        /* large enough to contain content; adjust if necessary */
        max-height: 900px;
        opacity: 1;
        transform: translateY(0);
        padding: 20px;
        border-color: #00B3FF; /* blue border when open */
        box-shadow: 0 10px 30px rgba(0,179,255,0.06);
    }
    .table-accordion-content p,
    .table-accordion-content .p-text,
    .table-accordion-content .robotoreg,
    .table-accordion-content span {
        color: white; /* explicitly enforce white for common text elements */
    }
    .table-accordion-content .rajbold,
    .table-accordion-content .subtitle_text,
    .table-accordion-content .rajbold.subtitle_text {
        color: #00B3FF; /* site blue used elsewhere */
    }
    .table-accordion-content .table_subdiv{
        padding-bottom: 18px;
        margin-bottom: 12px;
        border-bottom: 2px solid rgba(0,179,255,0.95); /* blue separator */
    }
    .table-accordion-content .table_subdiv:last-child{
        border-bottom: none;
        margin-bottom: 0;
    }
    
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    #éclair-trois{
    position: absolute;
    /* top: -17vh; */
    z-index: 1;
    bottom: -7%;
    height: 12%;
    }
    #expertise{
    background-image: url("./img/Soustraction\ mobile.svg");
    background-size: cover;
    margin-top: 9vh;
    background-position-x: -3px;
    position: relative;
    padding-bottom: 378px;
    /* z-index: 24; */
    }
    
    /* Fix background stretching on screens wider than 425px */
    @media (min-width: 426px) and (max-width: 780px) {
        #expertise {
            background-size: 101vw;
            background-position: bottom center;
            background-repeat: no-repeat;
            padding-bottom: 69vw;
        }
    }
    #expe_cards-mob{
    display: block;
    padding-top: 40px;
    /* background-color: #13161A; */
    }  
    
    /* Black placeholder block for mobile accordion expansion */
    #expe_mobile_placeholder{
        background-color: #13161A;
        width: 100%;
        height: 10vh; /* default height of 10vh */
        transition: height 420ms cubic-bezier(.2,.9,.2,1);
        position: relative;
        z-index: 1;
    }
    
    #expe_cards-ordi{
        display: none;
    } 
    #pod_img{
        width: 120px;
        margin-left:40px
    }
    #vic_img{
        width: 120px;
        margin-left: 25px;
    }
    #sub-podiums{
    margin-bottom: 42px;
    margin-top: 17%;
    }
    #numberone{
    top: 88px;
    position: absolute;
    left: 72px;
    font-size: 34pt;
    }
    #numbertwo{
    position: absolute;
    top: 88px;
    left: 225px;
    font-size: 34pt;
    }
    #podiums{
        position: relative;
        margin-bottom: 10%
    }

    #pod_title{
        color: white;
        margin-bottom: 0;
    }
    #pods_list{
        color: white;
        margin-top: 20px;
        margin-bottom: 60px;
    }
    .pod_item{
        list-style: disc!important;
        display: flex;
        flex-direction: column;
        width: fit-content;
    }
    #award_title{
    color: #13161A;
    margin-bottom: 40px;
    margin-top: 23px;
    margin-left: 40px;
    font-size: 34pt;
    }
    #vics_img-bg{
        position: absolute;
        height: 210px;
        width: 100vw;
        border-radius: 108px;
        background-color: #13161A;
        z-index: -1;
    }
    #vics_images-holder{
    border-radius: 160px;
    /* position: relative; */
    height: 133px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    margin-bottom: 15%;
    margin-left:5%
    /* left: -12%; */
    /* top: 45px; */

    }
    #vics_images-holder::-webkit-scrollbar {
        display: none;
    }
    #vics_images{
    /* height: 220px; */
    position: relative;
    top: 0; /* Reset negative positioning that prevents scrolling */
    left: 0; /* Reset negative positioning */
    width: max-content; /* Ensure content is wide enough to scroll */
    height: 75%; /* Fill the container height */
    content: url('./img/Groupe 104.png'); /* Use Groupe 104 PNG image on mobile */
    z-index: 2; /* Image appears above background */
        }
    
    #vics_images-bg{
        position: absolute;
        top: 250px;
        left: 7px;
        width: 100%;
        height: 100px;
        background-color: #13161A;
        z-index: 1;
        border-radius: 56px;
        }
    #droveforus{
    background-color: #13161A;
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 385px;
    padding-left: 40px;
    padding-top: 1px;
    margin-top: -10%;
    /* margin-bottom: 69px; */
    }
    #dfu_title{
        color: #00B3FF;
        margin-top: 62px;
        padding-top: 47px;
    }
    #dfu_subtext{
        color: white;
        width: 89%;
        font-size: 14pt;
    }
    #dfu_img-holder{
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        transform: skew(-20deg);
    }
    #dfu_img-holder::-webkit-scrollbar {
        display: none;
    }
    #dfu_subbloc{
        z-index: 0;
        position: relative;
        height: 96%;
        margin-top: -62px;
    }
    #dfu_img{
    height: 130px;
    transform: skew(20deg);
    min-width: 100%;
    display: block;
    }
    #dfu_overgrid{
        border: #00B3FF solid 10px;
        width: 5.2%;
    }
    #dfu_overgrid span{
        position: absolute;
        display: flex;
        height: 100%;
        width: 3407px;
        top: 0%;
        left: 3%;
    }
    #contact{
    position: relative;
    background-image: url("./img/Footer-Phone.png");
    /* background-repeat: no-repeat; */
    /* width: 101%; */
    background-size: cover;
    margin-top: 380px;
    padding-top: 13%;
    /* padding-bottom: 80px; */
    height: 43vh;
    border-bottom: 25vh solid #13161A;
    }
    #underlogo p{    
        color: white;
        margin-bottom: 4px;
    }
    #underlogo{
        text-align: center;
    }
    #contact_imglinks{
        margin: 0;
    }
    #contact_imglinks img{
        height:65px
    }
    .contact_line{
        display: flex;
        margin-left: 15px;
        margin-bottom: 20px;
    }
    .contact_line img{
        width: 25px
    }
    .contact_line span{
    color: white;
    margin-left: 15px;
    font-size: 12pt;
    }
    #contact_zone{
    height: 25vh;
    padding-left: 40px;
    padding-bottom: 20px;
    margin-top: 108px;
    margin-bottom: 20px;
    position: relative;
    }
    #contact_zone::after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50vw;
        height: 2px;
        background-color: #00B3FF;
    }
    #link_zone{
        position: absolute;
        height: auto;
        padding-left: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 30px;
        flex-wrap: wrap;
    }
    #link_zone #link_title{
        display: none;
    }
    #link_zone .link_line{
        margin-bottom: 0;
    }
    #link_zone .link_line span{
        color: white;
        font-size: 11pt;
    }
    #contact_title{
        color: white;
    }
    
    /* ==== MOBILE MENU STYLES ==== */
    #btn_burger{
        margin: 22px 13px 18px;
        position: relative;
        width: 50px;
        height: 36px;
    }
    .burger_line{
        position: absolute;
        left: 0;
        width: 50px;
        height: 4px;
        background-color: white;
        border-radius: 5px;
        transition: all 0.3s ease;
        transform-origin: center;
    }
    .bl_one{
        top: 0;
        transform: translateX(10px);
    }
    .bl_two{
        top: 16px;
        transform: translateX(4px);
    }
    .bl_three{
        top: 32px;
        transform: translateX(-4px);
    }

    /* Burger animation to cross when menu is open */
    #sm-menu_btn.open .bl_one{
        top: 16px;
        transform: translateX(4px) rotate(45deg);
    }
    #sm-menu_btn.open .bl_two{
        opacity: 0;
        transform: translateX(4px) scale(0);
    }
    #sm-menu_btn.open .bl_three{
        top: 16px;
        transform: translateX(4px) rotate(-45deg);
    }

    /* Mobile menu panel */
    #sm-menu{ 
        position: fixed;
        padding-top: 80px;
        padding-bottom: 24px;
        left: 50%; /* Center horizontally */
        transform: translateX(-50%) translateY(110%); /* Center and hide below screen */
        bottom: -4px;
        width: 300px; /* Fixed width instead of 100% */
        height: 450px; /* Fixed height instead of 70vh */
        background-image: url("./img/Menu-Phone2.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: transform 0.35s ease;
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #sm-menu.open{ 
        transform: translateX(-50%) translateY(0); /* Keep centered when open */
    }

    .sm-menu-items{ 
        list-style: none; 
        margin: 0; 
        padding: 24px; 
        display: flex; 
        flex-direction: column; 
        gap: 30px;
        flex-grow: 1;
        justify-content: center;
        align-items: center;
    }
    .sm-menu-items a{ 
        color: #fff; 
        font-size: 22pt; 
        transition: color 0.3s ease;
        text-align: center;
    }
    .sm-menu-items a:hover{ 
        color: #00B3FF; 
    }

    /* Style mobile Contact button like overbox button */
    .sm-menu-items .mobile-contact-btn{
        margin: auto;
        color: white;
        text-align: center;
        font-size: 22pt;
        border: white solid 4px;
        border-radius: 35px;
        width: 90px;
        height: 16px;
        padding: 15px 25px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sm-menu-items .mobile-contact-btn:hover{
        background-color: #00B3FF;
        color: white;
        border-color: #00B3FF;
    }

    /* Bottom section with social icons and flag selector */
    #sm-menu-bottom{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        padding: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        background-color: rgba(19, 22, 26, 0.8);
    }

    #sm-menu-bottom a{
        width: 40px;
        height: 40px;
        background-color: #00B3FF;
        border: 2px solid black;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    #sm-menu-bottom a:hover{
        background-color: rgba(58, 115, 148, 0.8);
        transform: scale(1.1);
    }

    #sm-menu-bottom img{
        width: 25px;
        height: 25px;
        filter: brightness(0) saturate(100%);
    }

    #flag-sel-mobile{
        cursor: pointer;
    }

    #flag-sel-mobile img{
        height: 32px;
        width: auto;
        filter: none !important;
    }
    /* ==== END MOBILE MENU STYLES ==== */
    



} 

/* ==== BASE CAROUSEL STYLES ==== */
#home{
    height: 90vh;
    overflow: hidden;
    position: relative;
}

#home_carousel{
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.6s ease;
    will-change: transform;
    height: 90vh;
}

#home_carousel .car_item{
    min-width: 1920px;
    width: 1920px;
    height: 90vh;
    flex-shrink: 0;
}

#home_carousel img{
    width: 1920px;
    height: 90vh;
    object-fit: cover;
}

.rajbold{
    font-family: "RajdhaniBold" !important;
}
.robotoreg{
    font-family: "RobotoReg";
}

#flag-sel{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    cursor: pointer;
}
#flag-sel img{
    height: 28px;
    width: auto;
}
li{
    list-style: none;
}

.blue-highlight{
    color:#00B3FF
}
.boldtext-highlight{
    font-family: "RobotoBlack" !important;
}
/* ==== BLOC CAROUSEL ==== */


#carousel_overbox{
    position: absolute;
    background-color: #13161A;
    height: fit-content;
    z-index: 10;
}
#overbox-title{
    justify-content: left;
    color: white;
    margin: 0;
    line-height: 33px;
}
#overbox-text{
    color: white;
    justify-content: left;
}
/* Carousel controls */

.carousel-dots{ display:flex; gap:12px; }
.carousel-dot{
    width: 16px; 
    height: 16px; 
    border-radius: 50%;
    background: transparent;
    border: 2px solid white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.carousel-dot.active{ 
    background: white; 
}

/* ==== ENDBLOC CAROUSEL ==== */
/* ==== BLOC PRESENTATION ==== */



#pres_bloc-one h2{
    color: #00B3FF;
    text-align: center;
    margin: 0px;
    padding: 70px 0px 20px 0px;
}

.black-bg{
    background-color: #13161A;
    padding-bottom: 15px;
}



.pilot-block .pilot-img-container {
    position: relative;
    /* width: 132%; */
    /* max-width: 700px; */
}

.pilot-block .pilot-img-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Example positions for Camilli texts (adjust as needed) */

#presentation{
    position: relative;
    z-index:0;
    border-top: #00B3FF solid 30px;
}
.piltxt{
    color:white;
    font-size:11pt
}


#team-title span{
    display: inline-block;
    color: white;
    transform: skew(20deg);
}


#team-textbloc p{
    margin-bottom: 38px;
}
#pres_tables{
    /* allow the container to expand so opened accordions push following content down */
    max-height: none !important;
    height: auto;
    padding-bottom: 3vh;
}
#tableone_ordi img{
    width: 1152px;
}
#tabletwo_ordi img{
    width: 1267px;
}
#pres_table-one{
    margin-bottom: 45px;
}
#tableone-title span{
    color: #13161A;
    font-size: 19pt;
    display: inline-block;
    transform: skew(45deg);
}

#tabletwo-title span{
    font-size: 19pt;
    color: #13161A;
    display: inline-block;
    transform: skew(45deg);
}




/* ==== ENDBLOCK PRESENTATION ==== */
/* ==== BLOCK EXPERTISE ==== */

#expe_title{
    padding-top: 40px;
    /* background-color: #13161A; */
}
#expe_title-text{
    display: inline-block;
    margin-left: 40px;
    color: #00B3FF;
}
#expe_title-subtext{
    display: inline-block;
    margin-left: 40px;
    color: white;
}




.card-img{
    height: 160px;
    overflow: hidden;
}
.card-img img{
    width:100%
}
.card-handle{
    width:100%;
    height:25px;
    background-color: white;
}

/* ==== ENDBLOCK EXPERTISE ==== */
/* ==== BLOCK AWARDS ==== */


#cup{
    position: absolute;
    right: -30%;
    bottom: 55%;
    z-index: 0;
    /* height: 94%; */
    scale: 1;
    /* overflow: visible!important; */
}


.black-part{
    color: #13161A;
    align-self: flex-end;
    text-wrap: nowrap;
}
.victory_line{
    display: flex;
}
.prec_line{
    width: 100%;
    border-bottom: #13161A solid 2px;
    align-self: center;
}


/* ==== ENDBLOCK AWARDS ==== */
/* ==== BLOCK CONTACTS ==== */


/* ==== BLOCK MOBILEMENU ==== */
/* Mobile menu button and menu styles moved to mobile-only media query */

/* ==== ENDBLOCK MOBILEMENU ==== */

/* Modal styles for Legal and RGPD popup */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 30px;
    border: none;
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-content h2 {
    color: #13161A;
    font-family: "RajdhaniBold", sans-serif;
    font-size: 22pt;
    margin-bottom: 20px;
    margin-top: 25px;
    border-bottom: 2px solid #00B3FF;
    padding-bottom: 10px;
}

.modal-content h2:first-child {
    margin-top: 0;
}

.modal-content p {
    color: #333;
    font-family: "RobotoReg", sans-serif;
    line-height: 1.6;
    margin-bottom: 15px;
}

.modal-content strong {
    color: #13161A;
    font-weight: bold;
}

.close {
    color: #999;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
}

.close:hover,
.close:focus {
    color: #00B3FF;
    text-decoration: none;
}

/* Mobile responsive modal */
@media (max-width: 780px) {
    .modal-content {
        margin: 10% auto;
        width: 95%;
        padding: 20px;
        max-height: 70vh;
    }
    
    .modal-content h2 {
        font-size: 18pt;
        margin-bottom: 15px;
        margin-top: 20px;
    }
    
    .modal-content h2:first-child {
        margin-top: 0;
    }
    
    .close {
        top: 10px;
        right: 20px;
        font-size: 28px;
    }
}

/* ==== AWARDS SECTION RESPONSIVE FIXES ==== */
/* Tablet and larger mobile adjustments (426px - 780px) */
@media (min-width: 426px) and (max-width: 780px) {
    #award_title {
        font-size: 28pt; /* Scale between mobile (34pt) and desktop */
        margin-left: 5vw; /* Use viewport width for better scaling */
        margin-right: 5vw;
        margin-bottom: 30px;
    }
    
    .card-title span {
        font-size: 20pt; /* Scale between mobile (16pt) and desktop (30pt) */
    }
    
    .expe_card {
        width: 90%; /* Better width for tablet screens */
        margin-inline: auto;
    }
    
    #pods_list {
        margin-left: 5vw;
        margin-right: 5vw;
        margin-bottom: 50px;
    }
    
    #vics_img-bg {
        width: 95vw; /* Adjust background width for tablets */
        border-radius: 80px; /* Scale border radius */
        height: 180px; /* Adjust height for better proportions */
    }
}

/* Small mobile optimizations (320px - 425px) */
@media (max-width: 425px) {
    #award_title {
        font-size: 24pt; /* Smaller for very small screens */
        margin-left: 20px;
        margin-right: 20px;
    }
    
    .card-title span {
        font-size: 14pt; /* Further reduce for small screens */
    }
    
    #vics_img-bg {
        width: 100vw;
        border-radius: 60px;
        height: 150px;
    }
    
    /* Cup image responsive scaling */
    #cup {
        scale: 1;
        right: -40%;
    }
}


/* Large mobile (481px - 780px) - fine-tune scaling */
@media (min-width: 481px) and (max-width: 780px) {
    #cup {
    scale: 1.1;
    right: -180px;
    bottom: 64%;
    }
}

/* ==== SM-MENU RESPONSIVE SIZING FOR TABLETS ==== */
@media (min-width: 481px) and (max-width: 780px) {
    #sm-menu {
        width: 350px; /* Slightly larger for tablets */
        height: 500px; /* Taller for better proportions on tablets */
        /* Centered positioning maintained - no need for right positioning */
    }
}

@media (min-width: 600px) and (max-width: 780px) {
    #sm-menu {
        width: 380px; /* Even larger for bigger tablets */
        height: 520px;
        /* Centered positioning maintained - no need for right positioning */
    }
}