/* HERO MARQUE */

.brand-hero{
background:var(--p-surface);
padding:120px 0 90px;
text-align:center;
border-bottom:1px solid var(--p-border);
}

.brand-title{
font-family:'Syne',sans-serif;
font-weight:800;
font-size:3rem;
letter-spacing:-0.03em;
color:var(--p-text);
margin-bottom:16px;
}

.brand-sub{
max-width:620px;
margin:auto;
font-size:0.95rem;
color:var(--p-soft);
line-height:1.7;
}


/* STORY */

.brand-story{
padding:100px 0;
background:var(--p-bg);
}

.brand-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.brand-image{
background:#e8edf3;
border-radius:16px;
padding:40px;
}

.brand-image img{
width:100%;
object-fit:contain;
}

.brand-text h2{
font-family:'Syne';
font-weight:800;
margin-bottom:20px;
}

.brand-text p{
color:var(--p-soft);
line-height:1.7;
margin-bottom:12px;
}


/* FEATURES */

.brand-values{
background:var(--p-surface);
padding:100px 0;
}

.brand-features{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:48px;
}

.brand-feature{
background:var(--p-card);
border:1px solid var(--p-border);
border-radius:16px;
padding:32px;
text-align:center;
transition:all .25s ease;
}

.brand-feature:hover{
transform:translateY(-4px);
box-shadow:0 20px 40px rgba(15,52,96,0.12);
}

.feature-icon{
width:50px;
height:50px;
margin:auto;
margin-bottom:16px;
display:flex;
align-items:center;
justify-content:center;
background:var(--p-accent-d);
border-radius:12px;
color:var(--p-accent);
font-size:1.4rem;
}


/* CTA */

.brand-cta{
padding:100px 0;
background:var(--p-bg);
}

.brand-cta-box{
text-align:center;
max-width:600px;
margin:auto;
}

.brand-cta-box h2{
font-family:'Syne';
font-weight:800;
margin-bottom:16px;
}

.brand-cta-box p{
color:var(--p-soft);
margin-bottom:24px;
}


/* RESPONSIVE */

@media(max-width:900px){

.brand-grid{
grid-template-columns:1fr;
}

.brand-features{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:600px){

.brand-features{
grid-template-columns:1fr;
}

.brand-title{
font-size:2.2rem;
}
/* ─────────────────────────────────────
   BOUTON PAGE MARQUE
───────────────────────────────────── */

.btn-marque{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 32px;
    background:var(--p-accent);
    color:#ffffff;
    font-family:'Syne',sans-serif;
    font-weight:700;
    font-size:0.9rem;
    border-radius:10px;
    text-decoration:none;
    transition:background var(--t) var(--ease),
               transform var(--t) var(--ease),
               box-shadow var(--t) var(--ease);
    position:relative;
    overflow:hidden;
}

/* effet lumière comme tes autres boutons */
.btn-marque::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:60%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
    transition:left 0.5s var(--ease);
}

.btn-marque:hover::before{
    left:160%;
}

.btn-marque:hover{
    background:#1a4a7a;
    box-shadow:0 0 28px var(--p-accent-g);
    transform:translateY(-2px);
    color:#ffffff;
}
}