:root{
    --bg:#0A0F24;
    --text:#ffffff;
    --card:#11182F;
    --primary:#00C6FF;
    --gradient:linear-gradient(45deg,#00C6FF,#0072FF);
    --input-bg:#222;
    --input-text:#fff;
}
.light{
    --bg:#ffffff;
    --text:#1a1a1a;
    --card:#f2f2f2;
    --primary:#005CFF;
    --gradient:linear-gradient(45deg,#005CFF,#00A2FF);
    --input-bg:#f5f5f5;
    --input-text:#1a1a1a;
}

/* RESET */
*{ margin:0; padding:0; box-sizing:border-box; font-family:"Poppins",sans-serif; }
body{ background:var(--bg); color:var(--text); transition:0.5s; scroll-behavior:smooth; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }

/* HEADER */
header { 
    padding: 10px 30px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: fixed; 
    width: 100%; 
    z-index: 1000; 
    background: rgba(255,255,255,0.05); 
    backdrop-filter: blur(10px); 
    border-bottom: 1px solid rgba(255,255,255,0.1);
    height: 80px;
}

.logo img {
    height: 100%;
    max-height: 125px;
    width: auto;
    transition:0.3s;
}
nav ul{ display:flex; gap:25px; }
nav ul li a{ color: var(--text); font-weight:500; font-size:0.95rem; transition:0.3s; }
nav ul li a:hover{ color: var(--primary); }
.toggle{ cursor: pointer; background: var(--gradient); padding: 8px 15px; border-radius: 20px; color: white; font-weight: 600; border: none; margin-left: 20px; font-size: 1.1rem; }

/* HAMBURGER */
.hamburger{ display:none; flex-direction:column; cursor:pointer; gap:5px; }
.hamburger div{ width:25px; height:3px; background:var(--primary); transition:0.3s; }

/* HERO */
.hero{ padding-top:150px; text-align:center; padding-bottom:140px; }
.hero h1{ font-size:3.3rem; line-height:1.3; font-weight:800; }
.hero h1 span{ background:var(--gradient);-webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero p{ color:#cccccc; margin-top:15px; }
.btn{ margin-top:30px; padding:12px 30px; background:var(--gradient); color:white; font-weight:600; border-radius:8px; display:inline-block; transition:0.3s; }
.btn:hover{ transform:scale(1.05); }

/* SERVICES */
.services{ padding:80px 50px; text-align:center; }
.services h2{ font-size:2.5rem; margin-bottom:40px; }
.service-box{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; }
.service{ width:300px; padding:30px; background:var(--card); border-radius:15px; border:1px solid rgba(255,255,255,0.07); transition:0.4s; }
.service:hover{ transform:translateY(-10px); border-color:var(--primary); }
.service h3{ margin:15px 0; color:var(--primary); }
.service p{ color:#cccccc; }

/* TEAM */
.team{ padding:80px 50px; }
.team h2{ text-align:center; font-size:2.5rem; margin-bottom:40px; }
.members{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; }
.card{ width:300px; padding:25px; background:var(--card); border-radius:15px; text-align:center; border:1px solid rgba(255,255,255,0.05); transition:0.4s; cursor:pointer; position:relative; }
.card:hover{ transform:translateY(-10px); border-color:var(--primary); }
.card img{ width:120px; height:120px; border-radius:50%; object-fit:cover; border:3px solid var(--primary); }
.card h3{ margin-top:10px; } 
.card p{ color:#cccccc; font-size:0.9rem; }

/* Guide "Voir le portfolio" */
.portfolio-guide { display: block; margin-top: 10px; font-size: 0.85rem; color: var(--primary); font-weight: 600; opacity: 0; transition: opacity 0.3s, transform 0.3s; transform: translateY(5px);}
.card:hover .portfolio-guide { opacity: 1; transform: translateY(0); animation: pulse 1s infinite;}
@keyframes pulse {0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-3px); opacity: 0.8; } 100% { transform: translateY(0); opacity: 1; }}

/* PORTFOLIO */
.portfolio{ padding:80px 50px; }
.portfolio h2{ text-align:center; font-size:2.5rem; margin-bottom:40px; }
.filters{ text-align:center; margin-bottom:40px; }
.filters button{
    padding:8px 20px; margin:5px; border:none; border-radius:8px; background:var(--gradient); color:white; cursor:pointer; transition:0.3s ease, transform 0.2s ease;
    position: relative; overflow: hidden;
}
.filters button:hover{ transform: scale(1.1); box-shadow: 0 4px 15px rgba(0,198,255,0.4); }
.filters button::after {
    content: "";
    position: absolute;
    width: 100px; height: 100px;
    background: rgba(255,255,255,0.3);
    display: block;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: scale(1);
    transition: 0.6s ease-out;
}
.grid{ display:flex; flex-wrap:wrap; gap:25px; justify-content:center; }
.grid-item{ width:250px; height:150px; background:var(--card); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; cursor:pointer; transition:0.4s; }
.grid-item:hover{ transform:scale(1.05) rotate(1deg); }

/* CONTACT */
.contact{ padding:80px 50px; text-align:center; }
.contact h2{ font-size:2.5rem; margin-bottom:40px; }
.contact-info{ max-width:500px; margin:0 auto; display:flex; flex-direction:column; gap:15px; }
.contact-info div{
    background:var(--card); 
    padding:15px 20px; 
    border-radius:10px; 
    border:1px solid rgba(255,255,255,0.05);
    display:flex; align-items:center; gap:10px;
}
.contact-info i{ color:var(--primary); min-width:20px; font-size:1.2rem; }

/* FOOTER */
footer{ background:#000814; padding:25px; text-align:center; color:#999; }

/* RESPONSIVE */
@media(max-width:768px){
    nav ul{ display:none; position:absolute; top:70px; right:20px; flex-direction:column; background:var(--bg); padding:20px; border-radius:10px; border:1px solid rgba(255,255,255,0.1);}
    nav ul.show{ display:flex; }
    .hamburger{ display:flex; flex-direction:column; cursor:pointer; gap:5px; }
    .hero h1{ font-size:2.3rem; }
}

/* Ripple effect for Portfolio buttons */
.filters button .ripple { position:absolute; border-radius:50%; transform: scale(0); animation: ripple 0.6s linear; background: rgba(255,255,255,0.4); pointer-events:none; }
@keyframes ripple { to { transform: scale(4); opacity:0; } }