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


/*==============================================================
# HTML
==============================================================*/

html{

    font-size:16px;

}


/*==============================================================
# Body
==============================================================*/

body{

    font-family:var(--font-primary);

    font-size:var(--font-size-base);

    line-height:var(--line-height);

    color:var(--text-color);

    background:var(--body-bg);

    font-weight:400;

}


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

.container{

    width:100%;

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

    margin-inline:auto;

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

}

.container-small{

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

    margin-inline:auto;

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

}


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

.section{

    position:relative;

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

}

.section--small{

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

}

.section--large{

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

}

.section--alt{

    background:var(--section-bg);

}

.section--dark{

    background:var(--color-gray-900);

    color:#fff;

}


/*==============================================================
# Titres de section
==============================================================*/

.section__head{

    text-align:center;

    max-width:900px;

    margin:0 auto var(--space-64);

}

.section__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:.9rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--color-primary);

    margin-bottom:14px;

}

.section__eyebrow::before{

    content:"";

    width:40px;

    height:2px;

    background:var(--color-secondary);

}

.section__eyebrow--light{

    color:#fff;

}

.section__title{

    font-family:var(--font-heading);

    color:var(--heading-color);

    font-size:clamp(2rem,4vw,3rem);

    font-weight:700;

    line-height:1.15;

    margin-bottom:20px;

}

.section__title--light{

    color:#fff;

}

.section__lead{

    font-size:1.15rem;

    color:var(--text-light);

    max-width:760px;

    margin:auto;

}


/*==============================================================
# Paragraphes
==============================================================*/

p{

    margin-bottom:1.4rem;

}

p:last-child{

    margin-bottom:0;

}


/*==============================================================
# Listes
==============================================================*/

ul li{

    margin-bottom:12px;

}


/*==============================================================
# Images
==============================================================*/

img{

    border-radius:var(--image-radius);

}


/*==============================================================
# Vidéos
==============================================================*/

video{

    border-radius:var(--image-radius);

}


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

.card{

    background:var(--card-bg);

    border-radius:var(--radius-lg);

    padding:var(--card-padding);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);

}


/*==============================================================
# Ombres
==============================================================*/

.shadow{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}


/*==============================================================
# Radius
==============================================================*/

.rounded{

    border-radius:var(--radius-lg);

}

.rounded-full{

    border-radius:999px;

}


/*==============================================================
# Espacements utilitaires
==============================================================*/

.mt-0{margin-top:0;}
.mt-1{margin-top:var(--space-8);}
.mt-2{margin-top:var(--space-16);}
.mt-3{margin-top:var(--space-24);}
.mt-4{margin-top:var(--space-32);}
.mt-5{margin-top:var(--space-48);}
.mt-6{margin-top:var(--space-64);}

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:var(--space-8);}
.mb-2{margin-bottom:var(--space-16);}
.mb-3{margin-bottom:var(--space-24);}
.mb-4{margin-bottom:var(--space-32);}
.mb-5{margin-bottom:var(--space-48);}
.mb-6{margin-bottom:var(--space-64);}


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

.d-none{

    display:none;

}

.d-block{

    display:block;

}

.d-flex{

    display:flex;

}

.d-grid{

    display:grid;

}


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

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}


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

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.align-center{

    align-items:center;

}


/*==============================================================
# Grilles
==============================================================*/

.grid-2{

    display:grid;

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

    gap:50px;

    align-items:center;

}

.grid-3{

    display:grid;

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

    gap:35px;

}

.grid-4{

    display:grid;

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

    gap:30px;

}


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

.section__cta{

    text-align:center;

    margin-top:60px;

}


/*==============================================================
# Séparateur
==============================================================*/

.divider{

    width:80px;

    height:4px;

    background:var(--color-secondary);

    border-radius:999px;

    margin:25px auto;

}


/*==============================================================
# Helpers
==============================================================*/

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}

.overflow-hidden{

    overflow:hidden;

}

.position-relative{

    position:relative;

}


/*==============================================================
# Responsive de base
==============================================================*/

@media(max-width:991px){

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

        grid-template-columns:1fr;

    }

    .section{

        padding:80px 0;

    }

}

@media(max-width:767px){

    .container{

        padding-inline:20px;

    }

    .section{

        padding:65px 0;

    }

    .section__head{

        margin-bottom:45px;

    }

}