/* =================================
GLOBAL FIX
================================= */

html, body{
overflow-x:hidden;
}

body{
min-height:100vh;
display:flex;
flex-direction:column;
}

main{
flex:1;
}

/* =================================
HEADER OFFSET
================================= */

:root{
--header-height:90px;
}

main{
padding-top:var(--header-height);
}

/* =================================
MOBILE MENU
================================= */

.mobile-menu{
position:fixed;
top:0;
right:0;
width:90vw;
max-width:320px;
height:100vh;
padding:40px 28px;
background:linear-gradient(180deg,#0a0f25,#050816);
box-shadow:-30px 0 80px rgba(0,0,0,0.7);
transform:translateX(100%);
transition:transform .35s cubic-bezier(.77,0,.18,1);
z-index:10000;
display:flex;
flex-direction:column;
}

.mobile-menu.open{
transform:translateX(0);
}

.mobile-menu-header{
display:flex;
justify-content:flex-end;
margin-bottom:40px;
}

#mobileMenuClose{
background:none;
border:none;
color:white;
font-size:30px;
cursor:pointer;
}

.mobile-menu-links{
display:flex;
flex-direction:column;
gap:26px;
}

.mobile-menu-links a{
color:white;
text-decoration:none;
font-size:21px;
font-weight:500;
opacity:.9;
transition:.25s;
}

.mobile-menu-links a:hover{
opacity:1;
transform:translateX(6px);
}

.mobile-submenu{
display:flex;
flex-direction:column;
gap:16px;
padding-left:10px;
}

.mobile-submenu a{
font-size:18px;
opacity:.85;
}

.mobile-menu-cta{
margin-top:auto;
padding:18px;
text-align:center;
border-radius:16px;
background:linear-gradient(135deg,#7c5cff,#5b3dff);
font-weight:600;
font-size:18px;
box-shadow:0 20px 40px rgba(124,92,255,.35);
}

/* =================================
BACKDROP
================================= */

.mobile-menu-backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,0.6);
opacity:0;
pointer-events:none;
transition:opacity .25s ease;
z-index:9999;
}

.mobile-menu-backdrop.open{
opacity:1;
pointer-events:auto;
}

body.menu-open{
overflow:hidden;
}

/* =================================
BURGER
================================= */

.menu-toggle{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
}

.menu-toggle span{
width:26px;
height:2px;
background:#fff;
display:block;
}

@media (max-width:1024px){

.nav{
display:none;
}

.menu-toggle{
display:flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:12px;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.15);
z-index:11000;
}

}

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

@media (max-width:768px){

.hero,
.hero-premium{
padding-top:40px !important;
padding-bottom:70px !important;
}

.hero-container{
display:flex;
flex-direction:column;
align-items:center;
gap:40px;
}

.hero-content{
text-align:center;
width:100%;
}

.hero-title{
font-size:32px;
line-height:1.25;
}

.hero-subtitle{
font-size:16px;
}

.hero-buttons{
flex-direction:column;
gap:14px;
}

.hero-visual{
width:100%;
margin-top:40px;
}

.hero-preview-img{
width:100%;
max-width:420px;
margin:auto;
height:auto;
border-radius:16px;
display:block;
}

}

/* =================================
PRICING GRID DESKTOP
================================= */

.pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:32px;
align-items:stretch;
}

.pricing-card{
min-width:0;
width:100%;
}

/* =================================
GRID FIX
================================= */

@media (max-width:900px){

.grid-3{
grid-template-columns:1fr;
gap:25px;
}

.grid-2{
grid-template-columns:1fr;
gap:25px;
}

.hosting-grid{
grid-template-columns:1fr;
gap:30px;
}

.demo-grid{
grid-template-columns:1fr;
gap:28px;
}

}

/* =================================
PRICING MOBILE
================================= */

@media (max-width:768px){

.pricing-grid{
display:flex;
flex-direction:column;
align-items:center;
gap:28px;
}

.pricing-card{
width:100%;
max-width:420px;
margin:auto;
padding:32px 26px;
}

.pricing-card.recommended{
order:-1;
transform:scale(1.04);
border:1px solid rgba(124,92,255,0.6);
box-shadow:
0 20px 50px rgba(124,92,255,0.25),
0 0 0 1px rgba(124,92,255,0.2);
}

.pricing-price{
font-size:46px;
}

.pricing-cta{
width:100%;
text-align:center;
}

.pricing-badge{
left:50%;
transform:translateX(-50%);
top:-14px;
}

}

/* =================================
CARDS
================================= */

@media (max-width:768px){

.card{
padding:26px 22px;
}

}

/* =================================
AUTHORITY
================================= */

@media (max-width:768px){

.authority-grid{
grid-template-columns:1fr;
gap:25px;
text-align:center;
}

}

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

@media (max-width:900px){

.success-container{
grid-template-columns:1fr;
gap:40px;
}

.success-right img{
width:100%;
height:auto;
}

}

/* =================================
HOSTING
================================= */

@media (max-width:900px){

.hosting-card{
padding:30px 24px;
}

}

/* =================================
ENTERPRISE
================================= */

@media (max-width:768px){

.enterprise-comparison{
grid-template-columns:1fr;
gap:25px;
}

.enterprise-title{
font-size:30px;
}

}

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

@media (max-width:768px){

.final-container{
text-align:center;
}

.final-cta{
width:100%;
}

}

/* =================================
STICKY CTA MOBILE
================================= */

.mobile-pricing-bar{
position:fixed;
bottom:0;
left:0;
width:100%;
padding:14px;
background:#050816;
z-index:999;
}

.mobile-pricing-bar .sticky-btn{
width:100%;
}

/* espace pour éviter que le sticky cache le pricing */

.pricing-section{
padding-bottom:120px;
}

/* ===== HERO IMAGE FIX MOBILE ===== */

@media (max-width:768px){

.hero-container{
display:flex !important;
flex-direction:column;
align-items:center;
gap:30px;
}

.hero-visual{
display:block !important;
width:100%;
margin-top:20px;
}

.hero-preview-img{
display:block;
width:100%;
max-width:420px;
margin:auto;
height:auto;
border-radius:16px;
}

}