/* styles.css
   Palette (du sombre au clair) :
   #263A47 (dark), #4A5B6A, #728495, #98A9BE, #B4C5D8
*/
:root{
    --bg: #F6F8FA;
    --card: #FFFFFF;
    --text: #263A47;
    --muted: #4A5B6A;
    --accent-1: #263A47;
    --accent-2: #4A5B6A;
    --accent-3: #728495;
    --accent-4: #98A9BE;
    --accent-5: #B4C5D8;
  
    --glass: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    --radius: 14px;
    --max-width: 1100px;
    --container-padding: 20px;
    --shadow: 0 8px 24px rgba(38,58,71,0.08);
    --fw-regular: 400;
    --fw-strong: 700;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg, #F8FAFC 0%, #F6F8FA 100%);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
    font-size:16px;
  }
  
  /* Container */
  .container{
    width:100%;
    max-width:var(--max-width);
    padding: 32px var(--container-padding);
    margin:0 auto;
  }
  
  /* Header */
  .site-header{
    position:sticky;
    top:0;
    z-index:60;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.7);
    border-bottom: 1px solid rgba(38,58,71,0.03);
  }
  .header-inner{
    display:flex;
    gap:16px;
    align-items:center;
    justify-content:space-between;
  }
  .brand{
    font-weight:800;
    font-size:1.05rem;
    color:var(--accent-1);
    text-decoration:none;
    letter-spacing:0.4px;
  }
  
  /* Nav */
  .nav{
    display:flex;
    gap:12px;
    align-items:center;
  }
  .nav-link{
    color:var(--muted);
    text-decoration:none;
    padding:8px 10px;
    border-radius:8px;
    transition:all .2s ease;
  }
  .nav-link:hover{ color:var(--accent-1); transform:translateY(-2px); }
  .cta{
    margin-left:6px;
    background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
    color:white;
    padding:8px 12px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    box-shadow: 0 6px 18px rgba(38,58,71,0.08);
  }
  
  /* Mobile toggle */
  .mobile-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
  .mobile-toggle span{ display:block; width:22px; height:2px; background:var(--accent-1); margin:4px 0; border-radius:2px; }
  
  /* Sections */
  .section{ padding:72px 0; }
  .section-head h2{ margin:0 0 8px 0; font-size:1.6rem; }
  .section-head .muted{ color:var(--muted); margin:0; }
  
  /* HERO */
  .hero-grid{
    display:grid;
    grid-template-columns: 1fr 360px;
    gap:36px;
    align-items:center;
  }
  .eyebrow{ color:var(--accent-3); font-weight:600; margin:0 0 8px 0;}
  h1{ font-size:2.2rem; margin:0 0 12px 0; line-height:1.05;}
  .accent{ color:var(--accent-1); background: linear-gradient(90deg,var(--accent-5),transparent); padding:2px 6px; border-radius:6px;}
  .lead{ color:var(--muted); margin-bottom:18px; }
  
  .hero-actions .btn{ margin-right:10px; }
  
  /* Card */
  .card{
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
  }
  .card-header{ display:flex; gap:12px; align-items:center; margin-bottom:8px; }
  .avatar{
    width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg,var(--accent-1),var(--accent-2));
    color:white; font-weight:700;
  }
  .name{ font-weight:700; }
  .role{ color:var(--muted); font-size:0.9rem; }
  
  /* Quick stats */
  .quick-stats{ list-style:none; padding:0; margin:0; display:flex; gap:12px; }
  .quick-stats li{ font-size:0.9rem; color:var(--muted); }
  
  /* ABOUT */
  .about-grid{ display:grid; grid-template-columns:1fr 320px; gap:36px; align-items:start; }
  .skills-card{ background:var(--card); border-radius:12px; padding:18px; box-shadow:var(--shadow); }
  
  /* SKILLS */
  .skills-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:18px; }
  .skill{ background:linear-gradient(180deg, white, #fbfdff); border-radius:12px; padding:16px; box-shadow:0 10px 20px rgba(114,132,149,0.06); }
  
  /* PROJECTS */
  .projects-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:18px;
    margin-top:20px;
  }
  .project-card{
    display:flex;
    gap:14px;
    background:var(--card);
    border-radius:12px;
    padding:12px;
    box-shadow:var(--shadow);
  }
  .project-media{ width:180px; display:flex; align-items:center; justify-content:center; }
  .screenshot{
    width:160px; height:100px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(180deg,var(--accent-4),var(--accent-5)); color:white; font-weight:700;
  }
  .project-tags span{ background:rgba(38,58,71,0.06); padding:6px 8px; border-radius:999px; font-size:0.85rem; margin-right:6px; color:var(--muted); }
  
  /* CONTACT */
  .contact-grid{ display:grid; grid-template-columns: 1fr 430px; gap:28px; align-items:start; }
  .contact-form{ background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; }
  .contact-form label{ display:flex; flex-direction:column; gap:6px; font-weight:600; color:var(--accent-3); }
  .contact-form input, .contact-form textarea{
    padding:10px 12px; border-radius:8px; border:1px solid rgba(38,58,71,0.06); font-size:0.95rem;
    background:linear-gradient(180deg,#fff,#fbfdff);
  }
  
  /* Buttons */
  .btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:10px; text-decoration:none; cursor:pointer; border:0; font-weight:700; }
  .btn-primary{ background: linear-gradient(90deg,var(--accent-2),var(--accent-3)); color:white; box-shadow:0 10px 24px rgba(74,91,106,0.08); }
  .btn-ghost{ background:transparent; border:1px solid rgba(38,58,71,0.06); color:var(--accent-1); }
  .btn-sm{ padding:6px 10px; font-size:0.9rem; }
  
  /* Footer */
  .site-footer{ padding:28px 0; background:transparent; border-top:1px solid rgba(38,58,71,0.03); }
  .footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
  
  /* Utilities */
  .muted{ color:var(--muted); }
  .small{ font-size:0.85rem; }
  .link{ color:var(--accent-1); text-decoration:none; font-weight:600; }
  
  /* Reveal animations */
  .reveal-up, .reveal-left, .reveal-right{ opacity:0; transform: translateY(20px); transition: all .6s cubic-bezier(.2,.9,.2,1); will-change:transform,opacity; }
  .reveal-left{ transform: translateX(-18px); }
  .reveal-right{ transform: translateX(18px); }
  .reveal--active{ opacity:1; transform: none; }
  
  /* Responsive */
  @media (max-width:1000px){
    .hero-grid{ grid-template-columns: 1fr; }
    .about-grid{ grid-template-columns:1fr; }
    .skills-grid{ grid-template-columns:1fr; }
    .projects-grid{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .nav{ display:none; }
    .mobile-toggle{ display:block; }
    .site-header{ padding:6px 0; }
  }
  
  /* Mobile nav open */
  .nav.mobile-open{ position:fixed; right:18px; top:68px; background:rgba(255,255,255,0.98); border-radius:12px; padding:12px; flex-direction:column; box-shadow:0 14px 40px rgba(38,58,71,0.09); }
  
  /* tiny helpers */
  .project-actions{ display:flex; gap:8px; margin-top:10px; align-items:center; }