/* =========================================================
   SEO BOOSTER IA - STYLE.CSS
========================================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:Arial, sans-serif;
background:#0b1220;
color:white;
overflow-x:hidden;
padding:0;
margin:0;
}

small{color:#aaa}

.box{
max-width:700px;
margin:40px auto;
background:#111a2e;
padding:20px;
border-radius:20px;
text-align:center;
}

/* SEO CHART */

#seoChart{
width:100%;
max-width:100%;
height:320px !important;

background:#111a2e;

border:1px solid rgba(255,255,255,0.05);

border-radius:20px;

padding:15px;

margin-top:25px;

box-shadow:
0 10px 30px rgba(0,0,0,0.35);

display:block;
}

.logo{
    display: flex;
    gap: 12px;
    text-decoration: none;
}

.logo img {
    height: 80px;
    width:auto;
}

.logo1 {
    display: flex;
    justify-content: center;   /* centre horizontalement */
    align-items: center;       /* centre verticalement */
    width: 100%;
}

.logo1 img {
    height: 250px;
    width: auto;               /* IMPORTANT : évite 100% */
    display: block;
}

/* MOBILE */

@media(max-width:768px){

.logo img {
    height: 65px;
    width:auto;
}

.logo1 img {
    height: 130px;
    width:auto;
}

#seoChart{
height:260px !important;
padding:10px;
border-radius:15px;
}

}

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

.header{
width:100%;
height:70px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:space-between;
background:#111827;
position:sticky;
top:0;
z-index:999;
}



/* =========================
DESKTOP MENU
========================= */

.desktop-menu{
display:flex;
gap:25px;
}

.desktop-menu a{
color:white;
text-decoration:none;
}

/* =========================================================
   NAVIGATION
========================================================= */

nav{
display:flex;
align-items:center;
gap:25px;
}

nav a{
color:white;
text-decoration:none;
font-size:16px;
transition:0.3s;
}

nav a:hover{
color:#00A8FD;
}

/* =========================
HAMBURGER
========================= */

.hamburger{
display:none;
flex-direction:column;
justify-content:center;
gap:5px;
cursor:pointer;
z-index:1001;
}

.hamburger span{
width:30px;
height:3px;
background:white;
border-radius:20px;
display:block;
padding:3px 3px;
}

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

.mobile-menu{
position:fixed;
top:0;
right:-100%;
width:260px;
height:100vh;
background:#111827;
padding:100px 30px;
display:flex;
flex-direction:column;
gap:25px;
transition:0.4s;
z-index:1000;
}

.mobile-menu.active{
right:0;
}

.mobile-menu a{
color:white;
text-decoration:none;
font-size:18px;
}

/* =========================
OVERLAY
========================= */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
opacity:0;
visibility:hidden;
transition:0.3s;
z-index:999;
}

.overlay.active{
opacity:1;
visibility:visible;
}

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

.hero{
padding:100px 20px;
text-align:center;
}

.hero h1{
font-size:58px;
line-height:1.1;
margin-bottom:25px;
}

.hero p{
max-width:700px;
margin:auto;
font-size:20px;
color:#a1a1aa;
line-height:1.7;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{
display:inline-block;
padding:16px 35px;
background:#00A8FD;
color:#000;
font-weight:bold;
border-radius:12px;
text-decoration:none;
margin-top:30px;
transition:0.3s;
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,255,213,0.3);
}

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

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
padding:60px 20px;
max-width:1200px;
margin:auto;
}

.card{
background:#111a2e;
padding:30px;
border-radius:18px;
border:1px solid rgba(255,255,255,0.05);
transition:0.3s;
}

.card:hover{
transform:translateY(-6px);
border-color:#00A8FD;
}

.card h3{
margin-bottom:15px;
font-size:24px;
}

.card p{
color:#a1a1aa;
line-height:1.7;
}

/* =========================================================
   FORM
========================================================= */

.form-box{
max-width:700px;
margin:40px auto;
background:#111a2e;
padding:35px;
border-radius:20px;
}

input{
width:100%;
padding:15px;
margin-bottom:15px;
border:none;
border-radius:10px;
background:#1e293b;
color:white;
font-size:16px;
}


button{
width:100%;
padding:16px;
border:none;
border-radius:10px;
background:#00A8FD;
font-size:17px;
font-weight:bold;
cursor:pointer;
transition:0.3s;
}

button:hover{
opacity:0.9;
}

/* =========================================================
   PROGRESS
========================================================= */

.progress{
margin-top:30px;
}

progress {
width: 95%;
height: 25px;
margin:10px;
align-items:center;
}

.item{
background:#1e293b;
padding:12px;
margin-bottom:10px;
border-radius:10px;
font-size:15px;
}

.ok{
border-left:5px solid #00A8FD;
}

.fail{
border-left:5px solid #ff4d4d;
}

/* =========================================================
   FOOTER
========================================================= */

footer{
padding:40px 20px;
text-align:center;
color:#777;
margin-top:80px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

.hero h1{
font-size:42px;
}

.hero p{
font-size:18px;
}

}

@media screen and (max-width:768px){

.desktop-menu{
display:none;
}

nav{
display:none;
}

.hamburger{
display:flex;
}

.hero{
padding-top:70px;
}

.hero h1{
font-size:34px;
}

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


header{
padding:15px 20px;
}

.form-box{
padding:25px;
}

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

}

@media(max-width:480px){

.hero h1{
font-size:28px;
}

.hero p{
font-size:15px;
}

.btn{
width:100%;
}

input,
button{
font-size:15px;
}

}