
:root{
    --beige:#ede6cc;
    --beige-light:#f8f5eb;
    --beige-soft:#fbfaf6;
    --blue:#4a6c98;
    --blue-dark:#263f61;
    --grey:#a8a9a8;
    --text:#23303b;
    --muted:#68727d;
    --line:rgba(74,108,152,.18);
    --shadow:0 24px 70px rgba(38,63,97,.10)
}

*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:var(--beige-soft);
    color:var(--text);
    font-family:Inter,Arial,Helvetica,sans-serif;
    line-height:1.7
}
a{
    color:inherit
}
.site-header{
    background:rgba(251,250,246,.96);
    position:sticky;
    top:0;
    z-index:50;
    border-bottom:1px solid rgba(168,169,168,.35);
    backdrop-filter:blur(12px)
}
.header-inner{
    width:min(1480px,calc(100% - 70px));
    margin:auto;
    min-height:104px;
    display:flex;
    align-items:center;
    gap:30px
}
.brand img{
    width:218px;
    height:auto;
    display:block
}
.nav{
    display:flex;
    gap:24px;
    align-items:center;
    justify-content:center;
    flex:1
}
.nav a{
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:12px;
    font-weight:800;
    color:var(--blue-dark);
    padding:8px 0;
    border-bottom:2px solid transparent
}
.nav a:hover{
    border-bottom-color:var(--blue)
}
.btn-nav{
    background:var(--blue);
    color:white;
    text-decoration:none;
    padding:14px 22px;
    border-radius:2px;
    font-weight:800;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.06em
}
.burger{
    display:none;
    background:none;
    border:0;
    font-size:28px;
    color:var(--blue-dark)
}

.hero{
    min-height:720px;
    display:grid;
    align-items:center;
    background:linear-gradient(90deg,rgba(251,250,246,.98) 0%,rgba(251,250,246,.84) 36%,rgba(251,250,246,.20) 68%),url('assets/images/hero-vega-seo.webp') center/cover no-repeat
}
.hero-content{
    width:min(1280px,calc(100% - 80px));
    margin:auto;
    padding:76px 0
}
.kicker,.eyebrow{
    text-transform:uppercase;
    letter-spacing:.20em;
    color:var(--blue);
    font-size:13px;
    font-weight:900;
    margin:0 0 18px
}
.hero h1,.page-hero h1,h2,h3{
    font-family:Georgia,'Times New Roman',serif;
    color:var(--blue-dark);
    font-weight:400;
    line-height:1.08;
    letter-spacing:-.045em
}
.hero h1{
    font-size:clamp(48px,6vw,82px);
    max-width:760px;
    margin:0 0 26px
}
.hero p{
    max-width:650px;
    font-size:20px;
    color:#405168
}
.actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:34px
}
.button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    padding:15px 25px;
    border-radius:2px;
    font-weight:900;
    text-transform:uppercase;
    font-size:13px;
    letter-spacing:.04em
}
.button.primary{
    background:var(--blue);
    color:white
}
.button.secondary{
    border:1px solid var(--blue);
    color:var(--blue-dark);
    background:rgba(251,250,246,.65)
}
.trust{
    width:min(1280px,calc(100% - 80px));
    margin:-48px auto 0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    position:relative;
    z-index:2
}
.trust article{
    background:white;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:26px
}
.trust strong{
    display:block;
    color:var(--blue-dark);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:13px
}
.trust span{
    color:var(--muted);
    font-size:15px
}
.section{
    width:min(1280px,calc(100% - 80px));
    margin:auto;
    padding:92px 0
}
.section.wide{
    width:100%;
    max-width:none;
    background:#f2efe4;
    padding-left:max(40px,calc((100% - 1280px)/2));
    padding-right:max(40px,calc((100% - 1280px)/2))
}
.split{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:60px;
    align-items:center
}
.split img{
    width:100%;
    height:520px;
    object-fit:cover;
    display:block;
    box-shadow:var(--shadow)
}
h2{
    font-size:clamp(34px,4vw,58px);
    margin:0 0 20px
}
.text p,.section-title p,.page-hero p,.card p,.article-card p{
    color:var(--muted);
    font-size:18px
}
.quote{
    border-left:3px solid var(--blue);
    padding-left:22px;
    margin-top:28px;
    font-family:Georgia,serif;
    color:var(--blue-dark);
    font-size:22px
}
.section-title{
    max-width:900px;
    margin-bottom:44px
}
.domain-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px
}
.card{
    background:white;
    border:1px solid var(--line);
    box-shadow:0 18px 50px rgba(38,63,97,.08);
    transition:.25s ease
}
.card:hover{
    transform:translateY(-4px);
    box-shadow:0 26px 70px rgba(38,63,97,.13)
}
.card img{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block
}
.card div{
    padding:26px
}
.card h3{
    font-size:26px;
    letter-spacing:-.025em;
    margin:0 0 12px;
    font-weight:700
}
.method-band{
    width:100%;
    max-width:none;
    background:linear-gradient(135deg,var(--blue-dark),var(--blue));
    color:white;
    display:grid;
    grid-template-columns:minmax(0,560px) minmax(0,620px);
    gap:60px;
    padding:86px max(40px,calc((100% - 1280px)/2))
}
.method-band h2,.method-band .eyebrow{
    color:white
}
.method-band p{
    color:#f2f5f8;
    font-size:19px
}
.steps{
    display:grid;
    gap:18px
}
.steps article{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.24);
    padding:24px
}
.steps span{
    color:var(--beige);
    font-weight:900;
    letter-spacing:.16em;
    font-size:12px
}
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}
.stats article{
    background:white;
    border-top:4px solid var(--blue);
    padding:28px;
    box-shadow:0 18px 50px rgba(38,63,97,.08)
}
.stats strong{
    display:block;
    color:var(--blue-dark);
    font-size:25px
}
.page-hero{
    width:min(1080px,calc(100% - 80px));
    margin:auto;
    padding:72px 0 36px
}
.page-hero h1{
    font-size:clamp(44px,6vw,76px);
    margin:0 0 20px
}
.price-grid,.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}
.price-card,.article-card{
    background:white;
    border:1px solid var(--line);
    box-shadow:0 18px 50px rgba(38,63,97,.08);
    padding:30px
}
.price-card strong{
    font-family:Georgia,serif;
    color:var(--blue-dark);
    font-size:30px;
    display:block;
    margin:8px 0 12px
}
.price-card span,.article-card span{
    text-transform:uppercase;
    color:var(--blue);
    font-size:12px;
    letter-spacing:.14em;
    font-weight:900
}
.article-card h3{
    font-size:25px;
    font-weight:700
}
.contact-layout{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:58px
}
form{
    display:grid;
    gap:14px
}
input,textarea{
    padding:16px 18px;
    border:1px solid var(--line);
    font:inherit;
    background:white;
    color:var(--text)
}
textarea{
    min-height:160px
}
button{
    border:0;
    background:var(--blue);
    color:white;
    padding:16px 28px;
    font-weight:900;
    text-transform:uppercase;
    cursor:pointer;
    width:max-content
}
.contact-aside{
    background:white;
    border:1px solid var(--line);
    padding:34px;
    box-shadow:var(--shadow)
}
.legal h2{
    font-size:30px;
    margin-top:30px
}
.legal p{
    font-size:18px;
    color:var(--muted);
    max-width:900px
}
.footer{
    background:var(--blue-dark);
    color:white;
    padding:46px max(40px,calc((100% - 1280px)/2));
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:30px
}
.footer img{
    width:190px;
    filter:brightness(0) invert(1);
    opacity:.96
}
.footer p{
    color:#eef3f8
}
.footer-links{
    display:grid;
    gap:8px
}
.footer a{
    text-decoration:none;
    color:white
}
.signature{
    align-self:end;
    text-align:right
}
.image-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}
.image-strip img{
    width:100%;
    height:190px;
    object-fit:cover;
    box-shadow:0 14px 40px rgba(38,63,97,.08)
}

@media(max-width:1100px){
    .header-inner{
    flex-wrap:wrap
}
.burger{
    display:block;
    margin-left:auto
}
.nav{
    display:none;
    flex-basis:100%;
    justify-content:flex-start;
    flex-wrap:wrap
}
.nav.open{
    display:flex
}
.split,.method-band,.contact-layout{
    grid-template-columns:1fr
}
.domain-grid{
    grid-template-columns:repeat(2,1fr)
}
.stats,.price-grid,.blog-grid{
    grid-template-columns:repeat(2,1fr)
}

}

@media(max-width:760px){
    .header-inner,.section,.page-hero,.trust,.hero-content{
    width:calc(100% - 36px)
}
.brand img{
    width:185px
}
.btn-nav{
    display:none
}
.hero{
    min-height:auto;
    background:linear-gradient(rgba(251,250,246,.90),rgba(251,250,246,.90)),url('assets/images/hero-vega-seo.webp') center/cover no-repeat
}
.hero-content{
    padding:56px 0
}
.trust{
    margin:0 auto;
    grid-template-columns:1fr
}
.domain-grid,.stats,.price-grid,.blog-grid,.image-strip{
    grid-template-columns:1fr
}
.section,.section.wide{
    padding:64px 18px
}
.footer{
    grid-template-columns:1fr;
    padding:42px 24px
}
.signature{
    text-align:left
}
.split img{
    height:340px
}
.card img{
    height:220px
}

}

/* Ajustements Cabinet Véga */
.brand img {

    width: 230px;

    height: auto;

}

.footer img {

    width: 210px;

    filter: none;

    opacity: 1;

}

.hero .kicker {

    color: var(--blue-dark);

}

