/*======================================================
    HERO
======================================================*/

.hero-description{

    max-width:850px;

    margin:35px auto 0;

    font-size:18px;

    line-height:1.9;

    color:#e8e8e8;

}

/*======================================================
    INTRO
======================================================*/

#concept{

    padding:120px 0;

}

#concept .section-title{

    margin-bottom:70px;

}

/*======================================================
    GRILLE
======================================================*/

.concept-grid{

    display:grid;

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

    gap:35px;

}

/*======================================================
    CARTES
======================================================*/

.concept-card{

    position:relative;

    background:rgba(20,20,20,.78);

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

    backdrop-filter:blur(14px);

    border-radius:22px;

    padding:45px;

    overflow:hidden;

    transition:.35s;

}

.concept-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            transparent 45%
        );

    pointer-events:none;

}

.concept-card:hover{

    transform:translateY(-8px);

    border-color:rgba(214,176,104,.4);

    box-shadow:

        0 18px 50px rgba(0,0,0,.35);

}

.concept-card i{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:78px;

    height:78px;

    border-radius:50%;

    background:

        linear-gradient(
            135deg,
            rgba(214,176,104,.25),
            rgba(214,176,104,.08)
        );

    color:var(--sand);

    font-size:34px;

    margin-bottom:28px;

}

.concept-card h3{

    font-family:"Cinzel",serif;

    font-size:28px;

    margin-bottom:25px;

}

.concept-card p{

    color:#d8d8d8;

    line-height:1.9;

}

.concept-card ul{

    margin-top:20px;

    padding-left:20px;

}

.concept-card li{

    margin:12px 0;

    color:#d8d8d8;

}

.concept-card li::marker{

    color:var(--sand);

}

/*======================================================
    SECTIONS
======================================================*/

.concept-section{

    padding:90px 0;

}

.concept-section:nth-child(even){

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

}

.concept-box{

    position:relative;

    max-width:1100px;

    margin:auto;

    padding:55px;

    border-radius:24px;

    background:

        linear-gradient(
            180deg,
            rgba(30,30,30,.82),
            rgba(18,18,18,.78)
        );

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

    backdrop-filter:blur(12px);

    overflow:hidden;

    transition:.35s;

}

.concept-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,
        rgba(214,176,104,.08),
        transparent 35%);

    pointer-events:none;

}

.concept-box:hover{

    transform:translateY(-6px);

    border-color:rgba(214,176,104,.28);

    box-shadow:

        0 18px 50px rgba(0,0,0,.30);

}

.concept-box .section-title{

    margin-bottom:0;

}

.concept-box .section-title h2{

    margin-bottom:30px;

}

.concept-box .section-title p{

    max-width:900px;

    margin:auto;

    line-height:2;

    color:#d9d9d9;

}

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

#cta{

    padding:140px 0;

    text-align:center;

    position:relative;

    overflow:hidden;

}

#cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            rgba(0,0,0,.72),
            rgba(0,0,0,.72)
        ),
        url("../assets/backgrounds/hero.png");

    background-size:cover;

    background-position:center;

    transform:scale(1.08);

    z-index:-2;

}

#cta::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle,
        transparent,
        rgba(0,0,0,.45));

    z-index:-1;

}

#cta h2{

    font-family:"Cinzel",serif;

    font-size:60px;

    line-height:1.3;

    margin-bottom:30px;

}

#cta p{

    color:#d8d8d8;

    font-size:20px;

    margin-bottom:45px;

}

#cta .hero-buttons{

    justify-content:center;

}

/*======================================================
    LIENS
======================================================*/

.concept-box a{

    color:var(--sand);

    text-decoration:none;

    transition:.25s;

}

.concept-box a:hover{

    color:white;

}

/*======================================================
    TEXTE
======================================================*/

.concept-box strong{

    color:var(--sand);

    font-weight:700;

}

.concept-box br{

    margin-bottom:8px;

}

/*======================================================
    ANIMATIONS
======================================================*/

.concept-card,
.concept-box{

    animation:fadeUp .8s ease both;

}

.concept-card:nth-child(2){

    animation-delay:.15s;

}

.concept-card:nth-child(3){

    animation-delay:.30s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*======================================================
    SCROLL
======================================================*/

html{

    scroll-behavior:smooth;

}

/*======================================================
    SÉPARATEURS
======================================================*/

.concept-section + .concept-section{

    position:relative;

}

.concept-section + .concept-section::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:140px;

    height:2px;

    background:

        linear-gradient(
            to right,
            transparent,
            rgba(214,176,104,.55),
            transparent
        );

}

/*======================================================
    LISTES
======================================================*/

.concept-box ul{

    margin-top:25px;

    padding-left:28px;

}

.concept-box li{

    margin:12px 0;

    line-height:1.8;

    color:#d8d8d8;

}

.concept-box li::marker{

    color:var(--sand);

}

/*======================================================
    BOUTONS
======================================================*/

#cta .btn-primary,
#cta .btn-secondary{

    min-width:240px;

}

#cta .btn-primary:hover,
#cta .btn-secondary:hover{

    transform:translateY(-4px);

}

/*======================================================
    RESPONSIVE TABLETTE
======================================================*/

@media(max-width:992px){

    .concept-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .concept-card{

        padding:35px;

    }

    .concept-box{

        padding:40px;

    }

    #cta{

        padding:110px 0;

    }

    #cta h2{

        font-size:46px;

    }

}

/*======================================================
    RESPONSIVE MOBILE
======================================================*/

@media(max-width:768px){

    #concept{

        padding:80px 0;

    }

    .concept-section{

        padding:60px 0;

    }

    .concept-box{

        padding:28px;

        border-radius:18px;

    }

    .concept-card{

        padding:30px;

        border-radius:18px;

    }

    .concept-card h3{

        font-size:24px;

    }

    .concept-card i{

        width:64px;

        height:64px;

        font-size:28px;

    }

    .concept-box .section-title h2{

        font-size:34px;

    }

    .concept-box .section-title p{

        font-size:16px;

        line-height:1.8;

    }

    #cta{

        padding:80px 20px;

    }

    #cta h2{

        font-size:34px;

    }

    #cta p{

        font-size:17px;

    }

    #cta .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    #cta .btn-primary,
    #cta .btn-secondary{

        width:100%;

        max-width:320px;

    }

}

/*======================================================
    PETIT MOBILE
======================================================*/

@media(max-width:480px){

    .concept-card{

        padding:25px;

    }

    .concept-box{

        padding:22px;

    }

    .concept-card h3{

        font-size:21px;

    }

    .concept-card p,
    .concept-card li{

        font-size:15px;

    }

    .concept-box .section-title h2{

        font-size:28px;

    }

    #cta h2{

        font-size:28px;

    }

    #cta p{

        font-size:15px;

    }

}

/*======================================================
    SÉLECTION
======================================================*/

::selection{

    background:var(--sand);

    color:#111;

}

/*======================================================
    SCROLLBAR
======================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:rgba(214,176,104,.6);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--sand);

}