/*==============================================================
#
# EcoClimPro V2
# Sections CSS
# Partie 1
#
==============================================================*/


/*==============================================================
# Présentation
==============================================================*/

.presentation{

    position:relative;

    overflow:hidden;

}

.presentation::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(10,108,176,.05);

}

.presentation__stats{

    display:grid;

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

    gap:30px;

}


/*==============================================================
# Statistiques
==============================================================*/

.stat{

    background:#fff;

    padding:40px;

    border-radius:24px;

    text-align:center;

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

    transition:.35s;

}

.stat:hover{

    transform:translateY(-8px);

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

}

.stat__num{

    display:block;

    font-size:3rem;

    font-weight:800;

    color:var(--color-primary);

    margin-bottom:12px;

}

.stat__label{

    color:var(--text-light);

    font-weight:500;

}


/*==============================================================
# Services
==============================================================*/

.services{

    position:relative;

}

.services::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(40,167,69,.05),
        transparent 45%);

    pointer-events:none;

}


/*==============================================================
# Pourquoi nous choisir
==============================================================*/

.why{

    position:relative;

}

.why-grid{

    display:grid;

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

    gap:35px;

}

.why-item{

    display:flex;

    gap:24px;

    align-items:flex-start;

    padding:34px;

    border-radius:22px;

    background:#fff;

    transition:.35s;

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

}

.why-item:hover{

    transform:translateY(-8px);

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

}

.why-item .ico{

    width:70px;

    height:70px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:var(--color-primary-light);

    color:var(--color-primary);

    font-size:2rem;

}

.why-item h3{

    margin-bottom:10px;

}

.why-item p{

    color:var(--text-light);

}


/*==============================================================
# Engagements
==============================================================*/

.engagements{

    color:#fff;

}

.engagements-grid{

    display:grid;

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

    gap:30px;

}

.engagement{

    position:relative;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    padding:40px 30px;

    border-radius:24px;

    transition:.35s;

}

.engagement:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.10);

}

.engagement__num{

    display:block;

    font-size:3rem;

    font-weight:800;

    color:rgba(255,255,255,.15);

    margin-bottom:25px;

}

.engagement h3{

    color:#fff;

    margin-bottom:16px;

}

.engagement p{

    color:rgba(255,255,255,.80);

}


/*==============================================================
# Aperçu réalisations
==============================================================*/

.realisations-preview{

    position:relative;

}

.gallery-grid{

    display:grid;

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

    gap:25px;

}

.gallery-item{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:22px;

    background:#f4f4f4;

    aspect-ratio:4/3;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.55)

    );

    opacity:0;

    transition:.35s;

}

.gallery-item:hover::after{

    opacity:1;

}

.gallery-item__caption{

    position:absolute;

    left:24px;

    bottom:20px;

    color:#fff;

    font-weight:600;

    z-index:2;

    opacity:0;

    transform:translateY(15px);

    transition:.35s;

}

.gallery-item:hover .gallery-item__caption{

    opacity:1;

    transform:none;

}


/*==============================================================
# Avis clients
==============================================================*/

.reviews{

    position:relative;

}

.reviews-grid{

    display:grid;

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

    gap:30px;

}

.review{

    background:#fff;

    border-radius:24px;

    padding:40px;

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

    transition:.35s;

}

.review:hover{

    transform:translateY(-8px);

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

}

.review__stars{

    color:#FBBF24;

    font-size:1.3rem;

    margin-bottom:20px;

}

.review__text{

    font-style:italic;

    color:var(--text-color);

    line-height:1.9;

}

.review__author{

    margin-top:28px;

    font-weight:700;

    color:var(--color-primary);

}
/*==============================================================
#
# EcoClimPro V2
# Sections CSS
# Partie 2
#
==============================================================*/


/*==============================================================
# Zone d'intervention
==============================================================*/

.area{

    position:relative;

    overflow:hidden;

}

.area::before{

    content:"";

    position:absolute;

    left:-180px;

    bottom:-180px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:rgba(40,167,69,.05);

}

.area-list{

    margin-top:35px;

    display:grid;

    gap:18px;

}

.area-list li{

    display:flex;

    align-items:center;

    gap:15px;

    font-weight:600;

    color:var(--heading-color);

}

.area-list li::before{

    content:"✓";

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--color-secondary);

    color:#fff;

    font-size:.9rem;

    flex-shrink:0;

}

.area-map{

    border-radius:28px;

    overflow:hidden;

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

    min-height:460px;

}

.area-map iframe{

    width:100%;

    height:100%;

}


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

.timeline{

    position:relative;

    max-width:950px;

    margin:auto;

    padding-left:70px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:28px;

    top:0;

    bottom:0;

    width:4px;

    background:linear-gradient(

        var(--color-primary),

        var(--color-secondary)

    );

    border-radius:999px;

}

.timeline-item{

    position:relative;

    margin-bottom:60px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-dot{

    position:absolute;

    left:-56px;

    top:12px;

    width:26px;

    height:26px;

    border-radius:50%;

    background:var(--color-primary);

    border:5px solid #fff;

    box-shadow:0 0 0 6px rgba(10,108,176,.15);

}

.timeline-content{

    background:#fff;

    padding:34px;

    border-radius:24px;

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

    transition:.35s;

}

.timeline-content:hover{

    transform:translateY(-6px);

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

}

.timeline-step{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    border-radius:50%;

    background:var(--color-primary-light);

    color:var(--color-primary);

    font-weight:700;

    margin-bottom:18px;

}


/*==============================================================
# Bon à savoir
==============================================================*/

.tip{

    position:relative;

    background:#f5fbff;

    border-left:6px solid var(--color-primary);

    padding:32px 34px;

    border-radius:0 18px 18px 0;

    margin:40px 0;

}

.tip__title{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--color-primary);

    font-weight:700;

    margin-bottom:14px;

}

.tip__title::before{

    content:"💡";

    font-size:1.4rem;

}


/*==============================================================
# CTA intermédiaire
==============================================================*/

.cta-section{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    background:linear-gradient(

        135deg,

        var(--color-primary),

        var(--color-primary-dark)

    );

    color:#fff;

    padding:70px;

}

.cta-section::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

.cta-section__inner{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

.cta-section h2{

    color:#fff;

    margin-bottom:15px;

}

.cta-section p{

    color:rgba(255,255,255,.85);

}

.cta-section .btn{

    flex-shrink:0;

}


/*==============================================================
# FAQ
==============================================================*/

.faq{

    display:grid;

    gap:22px;

}

.faq-item{

    border-radius:18px;

    overflow:hidden;

    border:1px solid var(--color-gray-200);

    background:#fff;

}

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 30px;

    cursor:pointer;

    font-weight:700;

}

.faq-question::after{

    content:"+";

    font-size:1.6rem;

    color:var(--color-primary);

}

.faq-item.is-open .faq-question::after{

    content:"−";

}

.faq-answer{

    display:none;

    padding:0 30px 30px;

    color:var(--text-light);

    line-height:1.8;

}

.faq-item.is-open .faq-answer{

    display:block;

}


/*==============================================================
# Bandeau SEO local
==============================================================*/

.local-seo{

    display:grid;

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

    gap:20px;

    margin-top:60px;

}

.local-seo a{

    background:#fff;

    padding:22px;

    border-radius:18px;

    text-align:center;

    font-weight:600;

    color:var(--heading-color);

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

    transition:.3s;

}

.local-seo a:hover{

    transform:translateY(-5px);

    color:var(--color-primary);

}


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

@media(max-width:1100px){

.engagements-grid{

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

}

.gallery-grid{

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

}

.reviews-grid{

    grid-template-columns:1fr;

}

.local-seo{

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

}

.cta-section__inner{

    flex-direction:column;

    text-align:center;

}

}


@media(max-width:768px){

.presentation__stats,

.why-grid,

.engagements-grid,

.gallery-grid{

    grid-template-columns:1fr;

}

.timeline{

    padding-left:45px;

}

.timeline::before{

    left:16px;

}

.timeline-dot{

    left:-40px;

}

.timeline-content{

    padding:28px;

}

.cta-section{

    padding:45px 30px;

}

.local-seo{

    grid-template-columns:1fr;

}

.area-map{

    min-height:320px;

}

.tip{

    padding:24px;

}

}