/* style.css */

/* Reset & base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:#0f1729; color:#e0e0e0; overflow-x:hidden; }

/* Header */
header { position:fixed; top:0; width:100%; background:rgba(15,23,41,0.95); backdrop-filter:blur(10px); padding:1rem 5%; display:flex; justify-content:space-between; align-items:center; z-index:1000; border-bottom:2px solid rgba(59,130,246,0.3); }
.logo { font-size:1.8rem; font-weight:bold; color:#fff; }
.header-right { display:flex; align-items:center; gap:20px; }
.lang-switch { display:flex; gap:10px; }
.flag { width:32px; height:32px; cursor:pointer; border:2px solid transparent; border-radius:4px; transition:all 0.3s ease; }
.flag:hover { border-color:#3b82f6; transform:scale(1.1); }
.flag.active { border-color:#3b82f6; box-shadow:0 0 10px rgba(59,130,246,0.5); }
.login-btn { padding:10px 30px; background:linear-gradient(135deg, #3b82f6, #2563eb); border:none; border-radius:25px; color:#fff; font-weight:bold; cursor:pointer; text-decoration:none; transition:all 0.3s ease; box-shadow:0 4px 15px rgba(59,130,246,0.4); }
.login-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(59,130,246,0.6); }

/* Hamburger */
.hamburger { display: none; flex-direction: column; justify-content: space-between; width: 25px; height: 20px; cursor: pointer; }
.hamburger div { height: 3px; background: #3b82f6; border-radius: 2px; transition: all 0.3s ease; }
.hamburger.open div:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open div:nth-child(2) { opacity: 0; }
.hamburger.open div:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.menu { display:flex; align-items:center; gap:10px; }
.menu.active { display:flex; flex-direction: column; width:100%; gap:10px; margin-top:10px; }

/* Hero */
.hero { position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:0 5%; margin-top:60px; }
.hero h1 { font-size:4rem; margin-bottom:1rem; color:#fff; }
.hero p { font-size:1.5rem; color:#b8b8b8; max-width:700px; margin-bottom:2rem; }

.hidden-clue::after {
  content: "FLAG_id_2{
	  Some things only exist when the page is alive.
	  Certaines choses n'existent que lorsque la page est active.
	  }";
  display: none;
}

/* Services */
.services { padding:100px 5%; }
.services h2 { text-align:center; font-size:3rem; margin-bottom:3rem; color:#fff; }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; max-width:1400px; margin:0 auto; }
.service-card { background:rgba(255,255,255,0.05); backdrop-filter:blur(10px); border:1px solid rgba(59,130,246,0.3); border-radius:15px; padding:30px; transition:all 0.4s ease; }
.service-card:hover { transform:translateY(-10px); border-color:#3b82f6; box-shadow:0 10px 40px rgba(59,130,246,0.4); background:rgba(255,255,255,0.08); }
.service-card img { width:60px; height:60px; margin-bottom:15px; }
.service-card h3 { font-size:1.5rem; margin-bottom:1rem; color:#fff; }
.service-card p { color:#b8b8b8; line-height:1.6; }

/* Contact */
.contact { padding:100px 5%; text-align:center; }
.contact h2 { font-size:3rem; margin-bottom:2rem; color:#fff; }
.contact-info { font-size:1.3rem; color:#b8b8b8; margin-bottom:1rem; }
.email-placeholder { display:inline-block; border:2px solid #3b82f6; border-radius:10px; color:#3b82f6; padding:5px 10px; }

/* Footer */
footer { background:rgba(15,23,41,0.95); text-align:center; padding:2rem; border-top:2px solid rgba(59,130,246,0.3); }
footer p { color:#b8b8b8; }

/* Responsive */
@media (max-width:768px) {
    .hamburger { display:flex; }
    .menu { display:none; }
    .hero { margin-top:80px; padding:0 3%; }
    .hero h1 { font-size:2rem; }
    .hero p { font-size:1rem; max-width:100%; }
    .services { padding:60px 3%; }
    .services h2 { font-size:1.8rem; }
    .services-grid { grid-template-columns:1fr; gap:20px; }
    .service-card { padding:20px; }
    .service-card img { width:50px; height:50px; }
    .service-card h3 { font-size:1.2rem; }
    .service-card p { font-size:0.95rem; }
    .contact { padding:60px 3%; }
    .contact h2 { font-size:1.8rem; }
    .contact-info { font-size:1rem; }
    .email-placeholder { font-size:0.95rem; padding:5px 8px; }
    footer { padding:1.5rem 3%; font-size:0.9rem; }
    header { flex-direction:column; align-items:flex-start; padding:1rem 3%; gap:5px; }
    .header-right { width:100%; justify-content:space-between; }
    .lang-switch { gap:5px; }
    .flag { width:28px; height:28px; }
    .login-btn { padding:8px 20px; font-size:0.9rem; }
}