@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --gold: #c9a84c; --gold-light: #e8c97a; --dark: #0f0e0c; --dark2: #1c1a16;
  --text: #e8e2d6; --text-muted: #9a9080; --accent: #d4735a;
  --glass: rgba(255,255,255,0.06); --glass-border: rgba(255,255,255,0.12); --radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', sans-serif; background: var(--dark); color: var(--text); line-height: 1.6; overflow-x: hidden; }

/* ANTI-LAG : Accélération GPU */
.fade-in, .fade-in-1, .fade-in-2, .fade-in-3, .fade-in-4, .card, .portrait { will-change: transform, opacity; backface-visibility: hidden; }

header { position: sticky; top: 0; z-index: 100; padding: 1.2rem; background: rgba(15, 14, 12, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--glass-border); }
.menu { display: flex; justify-content: center; gap: 2rem; }
.menu a { text-decoration: none; color: var(--text-muted); font-size: 0.9rem; text-transform: uppercase; transition: 0.3s; letter-spacing: 1px; }
.menu a.active, .menu a:hover { color: var(--gold); }

main { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; }

/* HERO & CARDS */
.hero { text-align: center; margin-bottom: 5rem; }
h1 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3.5rem); margin: 1.5rem 0; }
#easter-egg-trigger { cursor: help; transition: 0.3s; }
#easter-egg-trigger:hover { color: var(--gold-light); text-shadow: 0 0 10px var(--gold); }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; }
.card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 2.5rem; display: block; text-decoration: none; color: inherit; transition: 0.4s cubic-bezier(0.2, 1, 0.3, 1); }
.card:hover { transform: translateY(-12px); border-color: var(--gold); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }

/* PERSON PROFILE (Hypatie & Al-Kindi) */
.person-header { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 50px; }
.portrait { width: 100%; max-width: 280px; border-radius: var(--radius); border: 1px solid var(--glass-border); margin: 20px 0 30px; box-shadow: 0 15px 35px rgba(0,0,0,0.5); }
.divider { width: 60px; height: 2px; background: var(--gold); margin: 20px auto; }

/* FORMULAIRE DESIGN */
.form-section { max-width: 600px; margin: 0 auto; padding: 40px; background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: blur(10px); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.8rem; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; }
.form-control { width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text); }
.form-control:focus { outline: none; border-color: var(--gold); }
.btn-submit { width: 100%; padding: 15px; background: var(--gold); border: none; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-submit:hover { filter: brightness(1.2); transform: translateY(-2px); }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.fade-in-1 { animation: fadeUp 0.8s ease forwards 0.1s; }
.fade-in-2 { animation: fadeUp 0.8s ease forwards 0.2s; }
.fade-in-3 { animation: fadeUp 0.8s ease forwards 0.3s; }

/* EDITOR */
#python-egg { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(10,9,7,0.98); backdrop-filter: blur(15px); align-items: center; justify-content: center; padding: 20px; }
#python-egg.active { display: flex; }
.egg-container { width: 100%; max-width: 800px; background: var(--dark2); border: 1px solid var(--gold); border-radius: var(--radius); padding: 2rem; }
#output-console { background: #000; color: #adff2f; padding: 1rem; border-radius: 8px; height: 120px; overflow-y: auto; margin-top: 1rem; font-family: monospace; border-left: 3px solid var(--gold); }