/*==================================================
    ABOUT
    L'Atelier ELF'IK
==================================================*/

.about-hero{

    padding:140px 0 90px;

    background:
    linear-gradient(180deg,var(--color-background) 0%,var(--color-surface) 100%);

    text-align:center;

}

.about-hero__content{

    max-width:900px;

    margin:auto;

}

.about-hero h1{
    font-size:clamp(3rem,6vw,5.5rem);
    line-height:1.05;
    font-weight:800;
    margin-bottom:30px;
}


.about-hero p{

    max-width:720px;

    margin:auto;

    line-height:1.9;

    font-size:1.1rem;

    color:var(--color-text-light);

}



/*==================================================
    STORY
==================================================*/

.about-story{

    padding:100px 0;

}

.about-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:80px;

    align-items:center;

}

.about-content h2{

    margin:15px 0 35px;

    color:var(--color-primary);

}

.about-content p{

    margin-bottom:22px;

    line-height:1.9;

    color:var(--color-text-light);

}

.about-placeholder{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:450px;

    border-radius:12px;

    overflow:hidden;

    background:

    linear-gradient(145deg,var(--color-border),var(--color-background));

    font-size:1.4rem;

    color:var(--color-primary);

    font-weight:700;

}

.about-placeholder img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==================================================
    LA FAMILLE
==================================================*/

.about-family{

    padding:110px 0;

    background:var(--color-background);

}

.about-family__intro{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}

.about-family__intro h2{

    margin:15px 0 25px;

    color:var(--color-primary);

}

.about-family__intro p{

    color:var(--color-text-light);

    line-height:1.9;

}

.family-grid {
    display: grid;
    grid-template-columns: repeat(2, 300px);
    justify-content: center;
    gap: 30px;
    margin-bottom: 70px;
}

/*==================================================
    CARTES (famille + valeurs)
    Style "patch cousu / tampon" plutôt que
    carte SaaS toute lisse : coins plus francs,
    ombre portée nette, légère inclinaison au survol.
==================================================*/

.family-card,
.value-card{

    background:var(--color-surface);

    border-radius:10px;

    padding:45px 30px;

    text-align:center;

    border:2px solid var(--color-border);

    box-shadow:6px 6px 0 rgba(0,0,0,.08);

    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;

}

.family-card:hover,
.value-card:hover{

    transform:translateY(-6px) rotate(-1deg);

    box-shadow:10px 10px 0 var(--color-primary);

    border-color:var(--color-primary);

}

.value-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));

    color:var(--color-surface);

    font-size:2rem;

    transform:rotate(-3deg);

}

.family-card h3,
.value-card h3{

    margin-bottom:18px;

    color:var(--color-primary);

}

.family-card p,
.value-card p{

    color:var(--color-text-light);

    line-height:1.8;

}

.about-family__text{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.about-family__text p{

    margin-bottom:25px;

    line-height:1.9;

    color:var(--color-text-light);

}

.about-family__text strong{

    color:var(--color-primary);

}

/*==================================================
    NOS VALEURS
==================================================*/

.about-values{

    padding:120px 0;

    background:var(--color-surface);

}

.about-values__intro{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

}

.about-values__intro .section-subtitle{

    display:block;

}

.about-values__intro h2{

    color:var(--color-primary);

    margin:15px 0 0;

}

.values-grid{

    display:grid;

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

    gap:30px;

}

/*==================================================
    PHILOSOPHIE
==================================================*/

.about-philosophy{

    padding:120px 0;

    background:var(--color-background);

}

.about-philosophy__content{

    max-width:1200px;

    margin:auto;

    text-align:center;

}


.about-philosophy h2{

    margin:20px 0 40px;

    color:var(--color-primary);

}

.about-philosophy p{

    margin-bottom:25px;

    color:var(--color-text-light);

    line-height:2;

    font-size:1.05rem;

}

.about-philosophy blockquote{

    margin-top:70px;

    padding:35px 40px;

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

    background:var(--color-surface);

    border-radius:8px;

    font-size:1.4rem;

    font-style:italic;

    color:var(--color-primary);

    box-shadow:6px 6px 0 rgba(0,0,0,.06);

    transform:rotate(-.5deg);

}

/*==================================================
    APPEL À L'ACTION
==================================================*/

.about-cta{

    padding:120px 0;

    background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));

    color:#FFFFFF;

}

.about-cta__content{

    max-width:850px;

    margin:auto;

    text-align:center;

}

.about-cta .section-subtitle{

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

}

.about-cta h2{

    margin:20px 0 25px;

    color:#FFFFFF;

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

}

.about-cta p{

    max-width:700px;

    margin:0 auto 45px;

    line-height:1.9;

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

}

.about-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.about-buttons .btn{

    min-width:230px;

}



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

@media (max-width:1100px){

    .about-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .family-grid{

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

    }

    .values-grid{

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

    }

}

@media (max-width:768px){

    .about-hero{

        padding:90px 0 60px;

    }

    .about-story,
    .about-family,
    .about-values,
    .about-philosophy,
    .about-cta{

        padding:80px 0;

    }

    .family-grid,
    .values-grid{

        grid-template-columns:1fr;

    }

    .family-card,
    .value-card{

        padding:35px 25px;

    }

    .about-placeholder{

        min-height:280px;

    }

    .about-philosophy blockquote{

        padding:25px;

        font-size:1.15rem;

    }

    .about-buttons{

        flex-direction:column;

        align-items:center;

    }

    .about-buttons .btn{

        width:100%;

        max-width:320px;

    }

}

@media (max-width:480px){

    .about-hero h1{

        font-size:2.3rem;

    }

    .about-content h2,
    .about-family h2,
    .about-values h2,
    .about-philosophy h2,
    .about-cta h2{

        font-size:1.9rem;

    }

    .value-icon{

        width:70px;

        height:70px;

        font-size:1.8rem;

    }

}