/*==============================================================
#
# EcoClimPro V2
# Layout CSS
# Version : 2.0
#
==============================================================*/


/*==============================================================
# Wrapper principal
==============================================================*/

.site{

    display:flex;

    flex-direction:column;

    min-height:100vh;

}

.site-main{

    flex:1;

    width:100%;

}


/*==============================================================
# Container
==============================================================*/

.container{

    width:100%;

    max-width:var(--container-width);

    margin-inline:auto;

    padding-inline:var(--container-padding);

}

.container-fluid{

    width:100%;

    padding-inline:var(--container-padding);

}


/*==============================================================
# Largeurs
==============================================================*/

.content-width{

    max-width:900px;

    margin-inline:auto;

}

.narrow{

    max-width:760px;

    margin-inline:auto;

}

.wide{

    max-width:1600px;

    margin-inline:auto;

}


/*==============================================================
# Display
==============================================================*/

.flex{

    display:flex;

}

.inline-flex{

    display:inline-flex;

}

.grid{

    display:grid;

}

.block{

    display:block;

}


/*==============================================================
# Flex
==============================================================*/

.flex-wrap{

    flex-wrap:wrap;

}

.flex-column{

    flex-direction:column;

}

.justify-start{

    justify-content:flex-start;

}

.justify-center{

    justify-content:center;

}

.justify-end{

    justify-content:flex-end;

}

.justify-between{

    justify-content:space-between;

}

.align-start{

    align-items:flex-start;

}

.align-center{

    align-items:center;

}

.align-end{

    align-items:flex-end;

}

.gap-xs{

    gap:10px;

}

.gap-sm{

    gap:20px;

}

.gap{

    gap:30px;

}

.gap-lg{

    gap:50px;

}


/*==============================================================
# Grid 12 colonnes
==============================================================*/

.row{

    display:grid;

    grid-template-columns:repeat(12,minmax(0,1fr));

    gap:32px;

}

.col-1{grid-column:span 1;}
.col-2{grid-column:span 2;}
.col-3{grid-column:span 3;}
.col-4{grid-column:span 4;}
.col-5{grid-column:span 5;}
.col-6{grid-column:span 6;}
.col-7{grid-column:span 7;}
.col-8{grid-column:span 8;}
.col-9{grid-column:span 9;}
.col-10{grid-column:span 10;}
.col-11{grid-column:span 11;}
.col-12{grid-column:span 12;}


/*==============================================================
# Layout deux colonnes
==============================================================*/

.grid-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}


/*==============================================================
# Trois colonnes
==============================================================*/

.grid-3{

    display:grid;

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

    gap:35px;

}


/*==============================================================
# Quatre colonnes
==============================================================*/

.grid-4{

    display:grid;

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

    gap:30px;

}


/*==============================================================
# Sidebar
==============================================================*/

.has-sidebar{

    display:grid;

    grid-template-columns:minmax(0,1fr) 340px;

    gap:60px;

    align-items:start;

}

.content-area{

    min-width:0;

}

.sidebar{

    position:sticky;

    top:130px;

}


/*==============================================================
# Page
==============================================================*/

.page-content{

    padding:var(--space-80) 0;

}

.entry{

    width:100%;

}

.entry__content{

    max-width:900px;

}

.entry__thumb{

    margin-bottom:40px;

}


/*==============================================================
# Hero
==============================================================*/

.hero{

    position:relative;

    overflow:hidden;

}

.hero__inner{

    position:relative;

    z-index:2;

}


/*==============================================================
# Sections
==============================================================*/

.section{

    position:relative;

}

.section+.section{

    border-top:1px solid transparent;

}


/*==============================================================
# Cartes
==============================================================*/

.cards-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}


/*==============================================================
# Galerie
==============================================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));

    gap:30px;

}


/*==============================================================
# Timeline
==============================================================*/

.timeline{

    display:grid;

    gap:40px;

}


/*==============================================================
# CTA
==============================================================*/

.cta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}


/*==============================================================
# Footer
==============================================================*/

.site-footer__grid{

    display:grid;

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

    gap:50px;

}


/*==============================================================
# Alignements
==============================================================*/

.mx-auto{

    margin-inline:auto;

}

.ml-auto{

    margin-left:auto;

}

.mr-auto{

    margin-right:auto;

}

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}


/*==============================================================
# Position
==============================================================*/

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.fixed{

    position:fixed;

}


/*==============================================================
# Overflow
==============================================================*/

.overflow-hidden{

    overflow:hidden;

}


/*==============================================================
# Responsive 1200
==============================================================*/

@media(max-width:1200px){

    .site-footer__grid{

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

    }

}


/*==============================================================
# Responsive 992
==============================================================*/

@media(max-width:992px){

    .row{

        grid-template-columns:1fr;

    }

    [class*="col-"]{

        grid-column:span 12;

    }

    .grid-2,
    .grid-3,
    .grid-4,
    .has-sidebar{

        grid-template-columns:1fr;

    }

    .cards-grid{

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

    }

    .gallery-grid{

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

    }

    .cta{

        flex-direction:column;

        align-items:flex-start;

    }

    .sidebar{

        position:relative;

        top:auto;

    }

}


/*==============================================================
# Responsive 768
==============================================================*/

@media(max-width:768px){

    .container{

        padding-inline:20px;

    }

    .cards-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .site-footer__grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .page-content{

        padding:60px 0;

    }

}