.frame {
    width:100%; 
	max-width:940px;
    height:360px; 
	background:#fff;
    border-radius:18px; 
    box-shadow:0 20px 50px rgba(0,0,0,0.06);
    display:flex; 
	flex-direction:column; 
	justify-content:flex-start; 
	align-items:center;
    padding:0 overflow:hidden; 
	position:relative;
	margin: -110px auto auto auto;
}

/* Animations */
@keyframes fadeSlide {0%{opacity:0;transform:translateY(-20px);}100%{opacity:1;transform:translateY(0);}}
@keyframes growBar {0%{height:0;}50%{height:var(--fluctuate-height,50%);}100%{height:var(--final-height,100%);}}

/* Header */
.frame-header {
    width:100%; height:60px;
    background:linear-gradient(90deg,#3182ce,#63b3ed);
    border-radius:10px; display:flex; justify-content:space-between; align-items:center;
    padding:0 20px; margin-bottom:20px; color:#fff; opacity:0;
}
.frame-header.in-view{animation:fadeSlide 0.6s forwards; animation-delay:0.2s;}
.frame-header .logo{font-size:18px;font-weight:bold;}

/* Hero */
.frame-hero {
    width:100%; height:350px; background:linear-gradient(135deg,#031f4b,#cce7ff);
    border-radius:10px; display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start;
    margin-bottom:20px; padding:30px 20px 20px; position:relative; opacity:0;
}
.frame-hero.in-view{animation:fadeSlide 0.6s forwards; }
.frame-text {
    z-index:3; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; max-width:80%;
}
.frame-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size:33px; font-weight:700; margin-bottom:15px;
    background: linear-gradient(90deg,#00f0ff,#90c9ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.frame-hero-title::before { content:"✦ "; }
.frame-hero-subtitle{
    font-size:17px; color:#ffffff; margin-left: 55px;margin-bottom:15px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
.frame-hero-button{
    padding:0 25px; height:48px; background:#ff6b6b; color:#fff;
    border-radius:24px; display:flex; justify-content:center; align-items:center;
    cursor:pointer; font-weight:500; white-space:nowrap; transition:all 0.3s ease-in-out;
	margin-left: 55px;
}
.frame-hero-button:hover{transform:scale(1.05);}
.frame-hero img {
    position:absolute; bottom:0; right:20px;
    max-height:220px; max-width:35%; object-fit:contain; z-index:2;
}



/* Graphique boursier escalier */
.graph-bars{
    position:absolute; bottom:0; left:20px; width:100%; height:200px;
    display:flex; align-items:flex-end; gap:6%; z-index:1;
}
.graph-bar {
    flex:0 1 7%; /* barres plus fines */
    background: linear-gradient(to top, #031f4b, #00cfff);
    border-radius:4px 4px 0 0;
    height:0;
    --final-height:50%;
    --fluctuate-height:20%;
    animation:growBar 1.5s forwards;
}
.graph-bar:nth-child(1){--final-height:40%; animation-delay:0.4s;}
.graph-bar:nth-child(2){--final-height:60%; animation-delay:0.6s;}
.graph-bar:nth-child(3){--final-height:50%; animation-delay:0.8s;}
.graph-bar:nth-child(4){--final-height:70%; animation-delay:1s;}
.graph-bar:nth-child(5){--final-height:60%; animation-delay:1.2s;}
.graph-bar:nth-child(6){--final-height:80%; animation-delay:1.4s;}
.graph-bar:nth-child(7){--final-height:70%; animation-delay:1.6s;}

/* Responsive */
@media (max-width:1024px){
    .frame{
		width:100%; 
		height:auto; 
		padding:15px;
		margin: auto;
	}
    .frame-header .menu{display:none;}
    .menu-burger{display:flex;}
    .frame-hero{flex-direction:column; height:310px; padding:10px;}
    .frame-text{max-width:100%; margin-bottom:10px;}
    .frame-hero-title{font-size:28px;}
    .frame-hero-subtitle{font-size:16px;}
    .frame-hero-button{width:60%; height:38px;}
    .frame-hero img{max-width:50%; max-height:180px; right:10px;}
    .frame-services{flex-direction:column; gap:15px;}
    .frame-service{width:100%; height:90px;}
    .graph-bars{height:130px; gap:2.8%;}
}