:root {
  /* Archify brand colors */
  --blue-archi-lighter: #80DEFE;      
  --blue-archi-light: #006EE5;      
  --blue-archi-dark: #0122ad;      
  --background-blue-light: #F6FAFF; 
  --text-blue-dark: #212e41;     
  --background-white: #ffffff;
  --background-anim: #DBE3F0;    
    

  /* Spacing */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;

  /* Typography */
  --font-family: 'Times New Roman', Times, serif;
}

#enjeux{
    position: relative;
    /* min-height: 100vh; */

    display: flex;
    flex-direction: column;

    justify-content: space-evenly;
    margin-top: 4rem;

    padding: 4rem 4rem;

    overflow: hidden;

    align-items: center;

    text-align: center;

    z-index: 2;
    background:
        radial-gradient(circle at top,
        rgb(0, 13, 63) 0%,
        rgb(0, 15, 77) 45%,
        rgb(0, 19, 97) 100%);
}


#enjeux #title-2{
    font-size:clamp(2.3rem,4vw,2.5rem);
    font-weight:600;
    padding-bottom: 5rem;
    letter-spacing:.5px;
    color: #4fa4ff;
}


#enjeux .cards{

    flex:1;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    align-items:stretch;

    gap:0rem;
    /* padding: 0rem 15rem; */
    max-width: 80rem;
    margin:2vh auto;
}

#enjeux .card{

    display:flex;
    flex-direction:column;

    /* align-items:center; */

    padding:0 3rem;
}

#enjeux .card:not(:last-child){

    border-right:1px solid rgba(255,255,255,.15);
}

#enjeux h2{
    text-align: left;
    margin-top:1rem;
    font-size:clamp(2rem,2.7vw,2rem);
    font-weight:500;
    color: #4fa4ff;
}

#enjeux .small-line{

    width:20%;
    height:3px;
    margin: 3rem 80% 3rem 0%;
    background:var(--blue-archi-light);
}

#enjeux .card p{
    text-align: left;
    color: rgb(169, 215, 245);
    font-size:clamp(1rem,1.1vw,1.4rem);
    margin: .8rem 0;
    line-height:1.4;
}



@media (max-width: 1400px) {

    #enjeux {

        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

}


@media (max-width: 1024px) {

    #enjeux{
        padding: 3rem 1rem 1.5rem 1.5rem;
    }
    #enjeux #title-2 {
    }
    #enjeux .subtitle-2{
        margin-bottom: 1rem;
        margin-top: 1rem;
    }
    #enjeux .cards {
        gap: 0rem;
    }
    #enjeux .card {
        padding: 2rem 0rem 2rem 0rem; 
        margin: 0rem 10rem;
        align-items:left;
        justify-content:left;
    }
    #enjeux .card:first-child {
        padding-top: 0rem; 
    }
    #enjeux .card:last-child {
        padding-bottom: 0rem; 
    }
    #enjeux .card:not(:last-child){
        border-right:0px solid rgba(255,255,255,.15);
        border-bottom:2px solid rgba(255,255,255,.15);
    }
    #enjeux .icon {
        width:3rem;
        height:3rem;
        margin-bottom:0rem;
    }
    #enjeux h2{
        margin-top: .1rem;
    }

    #enjeux .card p{
        margin:.1rem 0;
    }

    #enjeux .btn{
        margin-top:1.5rem;
    }
    #enjeux .cards {
        grid-template-columns: repeat(1, 1fr);
    }

    #enjeux .columns {
        width: 100%;
    }

    #enjeux #col1{
        border-right: 0px solid var(--blue-archi-dark);
    }
}


@media (max-width: 768px) {

    #enjeux #title-2 {
    }

    #enjeux h2{
    }


    #enjeux .subtitle-2{
    }

    #enjeux .card {
        margin: 0rem 0rem;
    }
}


@media (max-width: 480px) {

    #enjeux{
        padding: 3rem 1.5rem 1.5rem 1.5rem;
    }

    #enjeux #title-2 {
    }

    #enjeux h2{
    }

}