:root {

    --dark-blue: #0A2C48 ;

    --very-dark-blue:#031626 ;    

    --title-color : lightblue;

}



@font-face {

  font-family: 'IBM Plex Sans';

  src: url('./font/IBMPlexSans-VariableFont_wdth\,wght.ttf') format('truetype');

  font-weight: 400;

  font-style: normal;

}



* {

    font-family: 'IBM Plex Sans', sans-serif;

    color: var(--text-color);

}





@media (prefers-color-scheme: dark) {

    .line-logo{

        filter: hue-rotate(-29deg) saturate(700%);        

    }



    #section-title{

        background-image:

        url(./res/dark/background-title.png),

        linear-gradient(to bottom right, var(--gradient-from) 20%,

        var(--gradient-to),

        var(--gradient-from) 80%);

    }



    :root {

        --main-bg-color: #071a2a; 

        --nav-hover-color: rgb(239, 155, 59);

        --nav-color : rgb(67, 177, 231);

        --nav-ul-background-color: rgb(5, 28, 48);

        --nav-background-color: rgb(3, 20, 34);

        --text-color : rgb(220, 220, 241);

        --gradient-from : #051623;

        --gradient-to :#0a2842;

        --title-color : lightblue;

        --grid-box-border : rgba(255,255,255,0.3); 

        --grid-box-bg : rgba(4, 82, 124, 0.533);

    }



    .flexbox-item{

        background-color: #0c1f35;

    }



    .img-column{

        border: 1px solid white;

    }



}



@media (prefers-color-scheme: light) {

    :root {

        --main-bg-color: #ffffff; 

        --nav-hover-color: rgb(239, 155, 59);

        --nav-color : rgb(19, 87, 121);

        --nav-ul-background-color: rgb(238, 238, 239);

        --nav-background-color: rgb(221, 236, 249);

        --gradient-from : #e0eaf1cf;

        --gradient-to :#ffffff;

        --title-color : rgb(21, 73, 116);

        --grid-box-border : rgba(2, 13, 49, 0.444); 

        --grid-box-bg : rgba(115, 146, 163, 0.378);

        --text-color : rgb(21, 73, 116);

    }



    #section-title{

        background-image:

        url(./res/light/background-title.png),

        linear-gradient(to bottom right, var(--gradient-from) 20%,

        var(--gradient-to),

        var(--gradient-from) 80%);

    }





    #section-choice{

        background: none;

        background-color: #e0eaf1cf;

    }



    .flexbox-item{

        background-color: #eef6ff;

    }



    .img-column{

        border: 1px solid rgb(21, 73, 116);

    }

}





html{

    scroll-behavior: smooth;

    min-height: 100%;

    background-attachment: scroll;

    background-color: var(--main-bg-color);

}



main{

    height:95vh;

    margin-top: 5vh; 

    overflow-y: scroll;

    overflow-x: hidden;

}





body {

    position: absolute;

    width: 100%;

    padding: 0px;

    margin: 0px;

    font-family: Georgia, 'Times New Roman', Times, serif, sans-serif;

    color: var(--text-color);

}





section {

    scroll-margin-top: 5vh;

    background: linear-gradient( 

        to bottom,

        var(--gradient-from),

        var(--gradient-to) 40%,

        var(--gradient-to) 60%,

        var(--gradient-from)

    );

}



h1 {

    padding-top: 5vw;

    padding-left : 4vw;

    font-size: 3.5vw;

    text-align: left;

}



h2 {

    margin: 0;

    padding: 4vw;

    font-size: 2.5vw;

}





ul {

    text-align: left;

    font-family: "Georgia";

    line-height: 1.4;

    white-space: normal;

}



hr {

    border: 0; 

    border-top: 1px solid rgba(173, 216, 230, 0.479);

    width: 90%;

}





#menu {

    transition: transform 0.3s ease;

}


.devis-button{
    background-color: rgb(0, 123, 255);
    border: solid 1px white;
    color: white;
    padding: 10px;
    border-radius: 5px;
    transition: 0.5s;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 1000;
    text-decoration: none;
}

.devis-button:hover{
    background-color: rgb(239, 155, 59);
    border: solid 1px white;
    color: white;
}


@media (min-width: 985px) {

    #menu {

        display: flex;

        gap: 2rem;

    }

}



@media (max-width: 984px) {

    #menu-toggle {

        display: block;

    }



    #menu {

        position: fixed;

        top: 0;

        right: 0;

        height: 100vh;

        width: 250px;

        background-color: var(--nav-background-color);

        flex-direction: column;

        padding: 2rem;

        transform: translateX(100%);

    }



    #menu.show {

        transform: translateX(0);

    }



    #menu li {

        margin: 1rem 0;

    }

}



#section-title{

    color: var(--text-color);

    text-align: center;

    background-size: 100%;

    width: 100vw;

}





#section-pyramid {

    scroll-padding-top: 4vw;

    background-size: 100%;

    width: 100vw;

    height: 92vh;

    background-image:

        url(./res/background-title-right.png),

        linear-gradient(to bottom left, var(--gradient-from) 20%,

         var(--gradient-to),

         var(--gradient-from) 80%);

}







.gradient {

    display: inline-block;

    background: linear-gradient(to bottom, rgb(222, 222, 237), rgb(35, 35, 205));

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}







.fade-in {

    color: var(--title-color);

    opacity: 0;

    animation: fadeIn 2s ease-in forwards;

}



@keyframes fadeIn {

    to {

        opacity: 1;

    }

}



.column-container{

    align-items: center;

    display: flex;

    flex-direction: row;

    width: 100%;

}



.left-column {

    flex: auto;

    text-align: center;

    padding: 0 5vw;

}



.right-column {

    flex: auto;

    text-align: center;

    padding: 0 5vw;

}









#intro-1 {

    padding: 1vw 25vw 2vw 4vw ;

    font-size: 1.5vw;

    animation-delay: 1.2s;

    text-align : left;

}



#logo-container{

    text-align: center;

}



#logo-nav {

    width: 20vh;

}



#logo-company {

    src: var(--logo-path);

    width:20vw;

}



@media(max-width: 984px) {

    #img-engineer {

        display : none

    }

}



#img-engineer {

    padding: 0%;

    margin: 0%;

    margin-left: 0;

    padding-left: 0;

    height: 100%;

    text-align: left;

    

}



.fade-img {

  height: 100%;

  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-position: center;

  -webkit-mask-size: cover;



  mask-image: linear-gradient(to right, black 50%, transparent 100%);

  mask-repeat: no-repeat;

  mask-position: center;

  mask-size: cover;

}



@media (max-width: 768px) {

  .footer-container {

    flex-direction: column;

    text-align: center;

  }

}





.small-hr{

    margin: 5vh 0;

}





.scenario-title {

    background-color: #a9c3da;

    border-radius : 2vw;

    padding: 1vw;

    color: black;

}





#grid-2 {

    display: grid;

    grid-template-columns: 1fr 1fr;

}



#grid-2 > div {

    padding: 2vw;

}

#grid-2 > div:nth-child(1), #grid-2 > div:nth-child(2) {

    border-bottom: 1px solid var(--grid-box-border);

}



#grid-2 > div:nth-child(1), #grid-2 > div:nth-child(3) {

    border-right: 1px solid var(--grid-box-border);

}



#grid-2 h3 {

    font-size: 1.4vw;

    margin-bottom: 0.5vw;

}



#grid-2 p {

    font-size: 1.1vw;

}



.grid-box{

    transition: background-color 1s ease;

}



.grid-box:hover{

    background-color: var(--grid-box-bg);

}















#grid-1>*>p{
    text-align: left;
}





#grid-1 {

    font-size: large;

    margin: 0 4vw;

    display: grid;

    grid-template-columns: 1fr 1fr;

}



#grid-1 > div {

    padding: 20px;

}





#grid-1 > div:nth-child(1) {

    border-radius : 2vw 0 0 2vw;

    border: 2px solid rgba(4, 82, 124, 0.4);

    width: 40vw;

    padding: 2vw;

}



#grid-1 > div:nth-child(2){

    border-radius : 0 2vw 2vw 0;

    background-color: rgba(4, 82, 124, 0.4);

}



#grid-1 h3 {

    font-size: 1.3vw;

    margin-bottom: 8px;

}







.separator {

  display: flex;

  align-items: center;

  text-align: center;

  margin: 0;

  margin: -1px auto;

}



.separator::before,

.separator::after {

  content: "";

  flex: 1;

  border-bottom: 2px solid var(--title-color);

}



.separator:not(:empty)::before {

  margin-right: 1em;

}



.separator:not(:empty)::after {

  margin-left: 1em;

}



.separator span {

  color: #fff;        

  font-weight: bold;

  font-size: 1.2rem;

}



.separator h2 {

    padding: 1vw;

}



.top-title{

    margin-left: 0;

     padding-right: 20vw;

     padding-bottom: 10vh;

}



.text-align-left{

    text-align: left;

}



.icon-introduction{

    height:3vw;

    padding: 0 2vw;

}



/* Style pour le lien du logo */
nav a[href] {
    text-decoration: none;
    transition: opacity 0.3s ease;
}

nav a[href]:hover {
    opacity: 0.8;
}

#ai-handshake{

  width: 80%;

}