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


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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#0f172a;

}


/*==============================================================
# Image de fond
==============================================================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("../images/hero-climatisation.webp");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1.05);

    z-index:1;

}


/*==============================================================
# Overlay
==============================================================*/

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(8,25,45,.82) 0%,
            rgba(8,25,45,.65) 35%,
            rgba(8,25,45,.30) 100%
        );

    z-index:2;

}


/*==============================================================
# Décoration
==============================================================*/

.hero__shape{

    position:absolute;

    right:-120px;

    bottom:-120px;

    width:550px;

    height:550px;

    border-radius:50%;

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

    filter:blur(30px);

    z-index:2;

}


/*==============================================================
# Contenu
==============================================================*/

.hero__inner{

    position:relative;

    z-index:3;

    width:100%;

}

.hero__content{

    max-width:720px;

}


/*==============================================================
# Eyebrow
==============================================================*/

.hero__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:26px;

    color:#fff;

    font-size:.95rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.12em;

}

.hero__eyebrow::before{

    content:"";

    width:55px;

    height:2px;

    background:var(--color-secondary);

}


/*==============================================================
# Titre
==============================================================*/

.hero__title{

    color:#fff;

    font-size:clamp(3rem,7vw,5.5rem);

    line-height:1.05;

    margin-bottom:24px;

    text-wrap:balance;

}


/*==============================================================
# Sous-titre
==============================================================*/

.hero__subtitle{

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

    font-size:1.28rem;

    line-height:1.8;

    max-width:620px;

    margin-bottom:42px;

}


/*==============================================================
# Boutons
==============================================================*/

.hero__actions{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:55px;

}


/*==============================================================
# Arguments
==============================================================*/

.hero__trust{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

}

.hero__trust li{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-weight:600;

    margin:0;

}

.hero__trust .ico{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#fff;

}


/*==============================================================
# Badge flottant
==============================================================*/

.hero__badge{

    position:absolute;

    right:0;

    bottom:90px;

    background:#fff;

    padding:22px 26px;

    border-radius:18px;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

    z-index:5;

}

.hero__badge-title{

    font-size:2rem;

    font-weight:700;

    color:var(--color-primary);

}

.hero__badge-text{

    margin-top:8px;

    color:var(--text-light);

    font-size:.95rem;

}


/*==============================================================
# Scroll
==============================================================*/

.hero__scroll{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:5;

}

.hero__scroll a{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:.82rem;

    letter-spacing:.15em;

    text-transform:uppercase;

}

.hero__mouse{

    width:28px;

    height:46px;

    border:2px solid rgba(255,255,255,.7);

    border-radius:30px;

    position:relative;

}

.hero__mouse::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    width:4px;

    height:8px;

    border-radius:50px;

    background:#fff;

    transform:translateX(-50%);

    animation:scrollMouse 2s infinite;

}


/*==============================================================
# Animation texte
==============================================================*/

.hero__content>*{

    opacity:0;

    transform:translateY(35px);

    animation:heroFade .8s forwards;

}

.hero__content>*:nth-child(1){animation-delay:.15s;}
.hero__content>*:nth-child(2){animation-delay:.30s;}
.hero__content>*:nth-child(3){animation-delay:.45s;}
.hero__content>*:nth-child(4){animation-delay:.60s;}
.hero__content>*:nth-child(5){animation-delay:.75s;}


/*==============================================================
# Animations
==============================================================*/

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes scrollMouse{

    0%{

        opacity:0;

        top:8px;

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

        top:24px;

    }

}


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

@media(max-width:1100px){

.hero{

    min-height:850px;

}

.hero__badge{

    display:none;

}

}


@media(max-width:768px){

.hero{

    min-height:760px;

    text-align:center;

}

.hero::after{

    background:rgba(8,25,45,.72);

}

.hero__content{

    max-width:100%;

}

.hero__eyebrow{

    justify-content:center;

}

.hero__eyebrow::before{

    display:none;

}

.hero__subtitle{

    font-size:1.08rem;

}

.hero__actions{

    flex-direction:column;

}

.hero__actions .btn{

    width:100%;

}

.hero__trust{

    justify-content:center;

    gap:16px;

}

.hero__trust li{

    width:100%;

    justify-content:center;

}

.hero__scroll{

    display:none;

}

}