<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SALIOU IA — Creator Lab</title>
<style>
:root{
--bg:#05070a;
--panel:#0b1017;
--line:#1b2936;
--text:#eaf7ff;
--muted:#7e95a6;
--cyan:#00e5ff;
--green:#39ff88;
--purple:#9b6cff;
}
*{
box-sizing:border-box;
}
body{
margin:0;
background:
radial-gradient(circle at 80% 0%,#10283a 0,#05070a 38%);
color:var(--text);
font-family:Arial,Helvetica,sans-serif;
}
/* HEADER */
header{
height:72px;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 28px;
background:#06090de8;
backdrop-filter:blur(15px);
position:sticky;
top:0;
z-index:10;
}
.logo{
font-weight:900;
letter-spacing:2px;
color:var(--cyan);
text-shadow:0 0 18px #00e5ff66;
}
.logo span{
color:white;
}
.badge{
font-size:11px;
color:var(--green);
border:1px solid #39ff8855;
padding:7px 10px;
border-radius:20px;
}
/* LAYOUT */
.layout{
display:grid;
grid-template-columns:230px 1fr;
min-height:calc(100vh - 72px);
}
aside{
border-right:1px solid var(--line);
padding:20px 14px;
background:#070b10;
}
.nav{
display:flex;
gap:11px;
padding:13px;
border-radius:10px;
color:var(--muted);
cursor:pointer;
margin-bottom:5px;
}
.nav:hover,
.nav.active{
background:#0e1b25;
color:white;
box-shadow:inset 2px 0 var(--cyan);
}
.nav b{
color:var(--cyan);
}
/* MAIN */
main{
padding:30px;
max-width:1250px;
width:100%;
margin:auto;
}
.hero{
display:flex;