:root{
    --navy:#0f2a4a;
    --blue:#2f6fed;
    --blue-light:#e8f0fe;
    --bg-light:#eef4fb;
    --gray:#5c6b7a;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{font-family:'Helvetica Neue',Arial,sans-serif;color:var(--navy);background:#fff;}
  a{text-decoration:none;color:inherit;}
  img{display:block;max-width:100%;}
  button{font-family:inherit;cursor:pointer;}

  /* ===== NAV ===== */
  .nav{display:flex;align-items:center;justify-content:space-between;padding:20px 60px;}
  .nav-logo{font-size:1.4rem;font-weight:700;}
  .nav-links{display:flex;gap:40px;font-size:.9rem;color:#444;}
  .nav-links a.active{color:var(--navy);font-weight:600;border-bottom:2px solid var(--blue);padding-bottom:4px;}
  .cv-btn{background:var(--navy);color:#fff;padding:12px 22px;border-radius:24px;border:none;font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:8px;}

  /* ===== HERO ===== */
  .hero{display:flex;align-items:center;gap:40px;padding:50px 60px 70px;background:linear-gradient(180deg,#f5f8fc,#fff);flex-wrap:wrap;}
  .hero-text{flex:1;min-width:320px;}
  .hero-label{color:var(--blue);font-size:.8rem;font-weight:700;letter-spacing:1px;margin-bottom:10px;}
  .hero-text h1{font-size:3rem;font-weight:800;line-height:1.05;margin-bottom:6px;}
  .hero-role{color:var(--blue);font-size:1.5rem;font-weight:600;margin-bottom:20px;}
  .hero-text p{color:var(--gray);font-size:.95rem;line-height:1.7;margin-bottom:26px;max-width:460px;}
  .hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
  .btn-primary{background:var(--navy);color:#fff;padding:13px 24px;border-radius:24px;border:none;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:8px;}
  .btn-outline{background:#fff;color:var(--navy);padding:13px 24px;border-radius:24px;border:1.5px solid #d8dee6;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:8px;}

  .hero-illustration{flex:1;min-width:340px;position:relative;}
  .hero-illustration img{width:100%;border-radius:20px;}

  /* ===== ABOUT / SKILLS CARD ===== */
  .info-card{
    background:#fff;box-shadow:0 10px 40px rgba(20,40,80,.08);
    border-radius:20px;margin:0 60px;padding:40px;
    display:flex;gap:50px;flex-wrap:wrap;position:relative;top:-40px;
  }
  .about-col{flex:1;min-width:320px;display:flex;gap:24px;}
  .about-photo{width:130px;height:130px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--blue-light);}
  .about-photo img{width:100%;height:100%;object-fit:cover;}
  .about-col h3{font-size:1.3rem;margin-bottom:10px;}
  .about-col p{color:var(--gray);font-size:.85rem;line-height:1.6;margin-bottom:14px;}
  .about-meta{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--navy);}
  .about-meta span{display:flex;align-items:center;gap:8px;}

  .skills-col{flex:1.3;min-width:380px;}
  .skills-col h3{font-size:1.3rem;margin-bottom:20px;}
  .skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 30px;}
  .skill{display:flex;gap:12px;align-items:flex-start;}
  .skill-icon{width:42px;height:42px;border-radius:10px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;flex-shrink:0;}
  .skill-body{flex:1;}
  .skill-body .lbl{font-size:.85rem;font-weight:600;margin-bottom:8px;}
  .skill-bar{height:5px;background:#e8edf3;border-radius:3px;overflow:hidden;}
  .skill-bar span{display:block;height:100%;background:var(--navy);border-radius:3px;}

  /* ===== PROJECTS ===== */
  .projects{background:var(--bg-light);padding:20px 60px 60px;}
  .projects h2{font-size:1.4rem;margin-bottom:24px;position:relative;display:inline-block;}
  .projects h2::after{content:"";position:absolute;left:0;bottom:-8px;width:36px;height:3px;background:var(--blue);}
  .projects-grid{display:grid;grid-template-columns:repeat(4,1fr) 1.3fr;gap:20px;}
  .project-card{background:#fff;border-radius:16px;overflow:hidden;}
  .project-thumb{display:block;height:140px;position:relative;color:#fff;padding:16px;flex-direction:column;justify-content:space-between;cursor:pointer;}
  .project-thumb .overlay{display:flex;flex-direction:column;justify-content:space-between;height:100%;}
  .project-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
  .project-thumb .overlay{position:relative;z-index:1;}
  .project-thumb .badge{background:rgba(255,255,255,.15);backdrop-filter:blur(2px);display:inline-block;padding:4px 10px;border-radius:10px;font-size:.65rem;}
  .project-thumb .title{font-weight:700;font-size:1.05rem;line-height:1.25;}
  .project-info{padding:14px 16px 18px;}
  .project-info h4{font-size:.9rem;margin-bottom:10px;}
  .tag-row{display:flex;gap:6px;flex-wrap:wrap;}
  .tag-row span{background:var(--bg-light);border-radius:8px;padding:3px 9px;font-size:.68rem;font-weight:600;color:#444;}

  .stage-card{background:#fff;border-radius:16px;padding:26px;display:flex;flex-direction:column;justify-content:center;}
  .stage-icon{width:56px;height:56px;border-radius:50%;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--blue);margin-bottom:16px;}
  .stage-card h4{font-size:1.05rem;margin-bottom:8px;}
  .stage-card p{color:var(--gray);font-size:.85rem;line-height:1.6;margin-bottom:18px;}

  /* ===== FOOTER ===== */
  footer{background:var(--navy);color:#dbe4f0;padding:22px 60px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.85rem;}
  .footer-social{display:flex;gap:16px;}
  .footer-social a{color:#fff;font-weight:700;font-size:.8rem;}

  @media(max-width:1100px){
    .projects-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:800px){
    .nav{padding:16px 24px;flex-wrap:wrap;gap:14px;}
    .nav-links{gap:18px;flex-wrap:wrap;}
    .hero,.projects{padding-left:24px;padding-right:24px;}
    .info-card{margin:0 24px;padding:26px;top:-20px;}
    .projects-grid{grid-template-columns:1fr;}
    footer{padding:20px 24px;flex-direction:column;text-align:center;}
  }

/* Ajustements de lisibilité et d'affichage mobile */
.project-thumb{display:flex;}
.project-thumb::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.62));z-index:1;}
.project-thumb .overlay{width:100%;}
.project-thumb .title{margin-top:auto !important;}
.nav-links a:hover,.footer-social a:hover{text-decoration:underline;}
@media(max-width:800px){.hero-text,.hero-illustration,.about-col,.skills-col{min-width:0;width:100%;}.about-col{flex-wrap:wrap;}.skills-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.nav{padding:16px;}.nav-links{gap:12px;font-size:.82rem;}.hero,.projects{padding-left:16px;padding-right:16px;}.hero-text h1{font-size:2.35rem;}.info-card{margin:0 16px;padding:20px;}.skills-grid{grid-template-columns:1fr;}.project-thumb{height:190px;}}