:root{
  --bg:#0b0f15; --card:#0f1720; --muted:#9aa4b2; --accent:#4dd0e1; --glass: rgba(255,255,255,0.04);
  --max-w:1200px; --gap:1.25rem; --radius:14px; --ff: 'Inter', system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--ff);background:linear-gradient(180deg,#05060a 0%,#07111a 100%);color:#e6eef6;line-height:1.5}
.container{max-width:var(--max-w);margin:0 auto;padding:2rem}
.navbar{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;z-index:50;background:linear-gradient(180deg, rgba(8,10,15,0.6), rgba(8,10,15,0.2));backdrop-filter: blur(6px)}
.brand{font-weight:700;font-size:1.05rem}
.brand .lastname{color:var(--accent)}
.nav-links{display:flex;gap:1rem}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px;border-radius:8px;transition:all .25s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,0.03);transform:translateY(-2px)}
.burger{
  display:none; /* desktop default */
  background:none;
  border:0;
  color:var(--muted);
  font-size:1.25rem;
  padding:8px;
  cursor:pointer;
  position:relative; /* for pseudo elements that form the X */
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
}

/* visible focus ring for accessibility */
.burger:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:10px;
}

/* The SVG inside the button (your existing #burger-icon) should display normally.
   We'll fade it out when the menu is open and show the CSS X instead. */
.burger svg{ display:block; width:22px; height:22px; transition:opacity .22s ease, transform .28s ease; }

/* create the X using pseudo-elements on the .burger button (hidden by default) */
.burger::before,
.burger::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: center;
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.9);
}

/* cross angles */
.burger::before{ transform: translate(-50%, -50%) rotate(45deg) scale(0.9); }
.burger::after{  transform: translate(-50%, -50%) rotate(-45deg) scale(0.9); }

/* HERO */
.hero{position:relative;height:92vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.35) contrast(1.05)}
/*.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,10,15,0.35), rgba(2,6,10,0.7)), radial-gradient(800px 400px at 85% 25%, rgba(77,208,225,0.06), transparent 80%);z-index:1}*/
.hero-content{position:relative;z-index:2;text-align:center;padding:1rem}
.fullname{font-size:clamp(2.2rem,6vw,5rem);margin:0;font-weight:800;color:#fff;letter-spacing:1px;text-transform:uppercase;text-shadow:0 6px 30px rgba(0,0,0,0.6)}
.typing{margin-top:0.6rem;font-size:1.15rem;color:rgba(255,255,255,0.95);min-height:1.6rem}
.cursor{display:inline-block;margin-left:6px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hero-cta{margin-top:1.25rem;display:flex;gap:1rem;justify-content:center}
.btn-primary{background:linear-gradient(90deg,var(--accent),#6be7ff);color:#032025;padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:600}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 14px;border-radius:10px;color:var(--muted);text-decoration:none}
.scroll-down{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3}
.scroll-down span{display:block;width:32px;height:48px;border-radius:20px;border:2px solid rgba(255,255,255,0.12);position:relative}
.scroll-down span::after{content:'';position:absolute;left:50%;transform:translateX(-50%);top:8px;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.6);animation:scroll 1.6s infinite}
@keyframes scroll{0%{top:8px}50%{top:26px;opacity:.6}100%{top:8px}}

/* Sections */
.section{padding:5rem 0}
.grid-two{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start}
.about-card{background:var(--card);padding:1.6rem;border-radius:12px;box-shadow:0 8px 30px rgba(6,9,14,0.6)}
/* Avatar dans la carte "À propos" — taille augmentée et position centrée en haut */
.about-avatar {
  width: 180px;            /* largeur fixe pour garder la mise en page */
  height: 220px;           /* hauteur augmentée pour ne pas couper la tête */
  object-fit: cover;       /* crop si besoin, mais gardera ratio */
  object-position: center top; /* montre le haut de l'image (tête) */
  border-radius: 12px;
  float: left;
  margin: 0 1rem 0.9rem 0;
  box-shadow: 0 12px 36px rgba(2,6,10,0.6);
  border: 1px solid rgba(255,255,255,0.03);
  display: block;
  cursor: zoom-in;        /* indique que c'est cliquable */
}

/* Option : rendu circulaire (décommenter si tu veux rond) */
/* .about-avatar { border-radius: 50%; } */

/* Responsive : centrer l'image et supprimer le float sur petits écrans */
@media (max-width: 900px) {
  .about-avatar {
    float: none;
    display: block;
    margin: 0 auto 1rem auto;
    width: 48%;           /* plus fluide sur mobile */
    height: auto;         /* conserve le ratio */
    max-height: 320px;    /* limite la hauteur si l'image est très grande */
    object-position: center top;
  }

  .about-card h2,
  .about-card p,
  .about-card .meta {
    clear: both;
  }
  /* show burger on mobile */
  .burger{ display:flex; }

  /* make navbar full-width & avoid off-screen centered transform (fix overflow/position bug) */
  .navbar{
    left:0;
    right:0;
    transform:none;
    max-width:100%;
    width:100%;
    padding:0 1rem;
    border-radius:0;
  }

  /* off-canvas overlay nav (hidden by default) */
  .nav-links{
    position:fixed;
    inset:0;                    /* top:0; right:0; bottom:0; left:0; */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start; /* start so close button can sit at the top */
    padding:88px 1.5rem 2.5rem;  /* leave space for header area */
    gap:1rem;
    background: linear-gradient(180deg, rgba(8,10,15,0.98), rgba(8,10,15,0.96));
    backdrop-filter: blur(10px);
    transform: translateY(-8%);  /* subtle off-screen start */
    opacity:0;
    pointer-events:none;
    transition: transform .36s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
    z-index:65;
    overflow:auto;               /* allow scrolling if many links/content */
    -webkit-overflow-scrolling: touch;
  }

  /* when menu open (JS adds .open to .navbar), reveal nav */
  .navbar.open .nav-links{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  /* nav link look + larger tap targets */
  .nav-links a{
    display:block;
    width:100%;
    max-width:560px;
    text-align:center;
    padding:12px 18px;
    font-size:1.15rem;
    border-radius:12px;
    color:#e6eef6;
    text-decoration:none;
    background:transparent;
    opacity:0;
    transform: translateY(10px);
    transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
  }

  /* Stagger using nth-of-type (counts only anchors -> robust) */
  .navbar.open .nav-links a:nth-of-type(1){ transition-delay: .02s; opacity:1; transform:translateY(0); }
  .navbar.open .nav-links a:nth-of-type(2){ transition-delay: .06s; opacity:1; transform:translateY(0); }
  .navbar.open .nav-links a:nth-of-type(3){ transition-delay: .10s; opacity:1; transform:translateY(0); }
  .navbar.open .nav-links a:nth-of-type(4){ transition-delay: .14s; opacity:1; transform:translateY(0); }
  .navbar.open .nav-links a:nth-of-type(5){ transition-delay: .18s; opacity:1; transform:translateY(0); }
  .navbar.open .nav-links a:nth-of-type(6){ transition-delay: .22s; opacity:1; transform:translateY(0); }

  .nav-links a:hover,
  .nav-links a:focus{
    transform: translateY(-2px);
    background: rgba(255,255,255,0.03);
    color:#fff;
  }

  /* Close button inside nav (your HTML has a .close-btn) */
  .close-btn{
    position:absolute;
    top:12px;
    right:12px;
    background:none;
    border:0;
    color:var(--muted);
    font-size:1.1rem;
    padding:8px;
    border-radius:8px;
    display:none; /* JS will set hidden=false; CSS shows it when visible */
  }
  .navbar.open .close-btn{ display:block; }

  /* When menu open, hide the SVG hamburger and show the CSS X (pseudo elements) */
  .navbar.open .burger svg{ opacity:0; transform: scale(.95); }
  .navbar.open .burger::before,
  .navbar.open .burger::after{
    opacity:1;
    transform: translate(-50%,-50%) rotate(45deg) scale(1);
  }
  .navbar.open .burger::after{ transform: translate(-50%,-50%) rotate(-45deg) scale(1); }

  /* increase tap area around burger */
  .burger { padding: 10px; width:48px; height:48px; }

  /* ensure body won't scroll — your JS toggles .no-scroll on body */
  body.no-scroll{ height:100vh; overflow:hidden; }
}

/* Modal (réutilise la classe .img-modal déjà présente dans ton CSS — si tu n'as pas la règle ci-dessous, colle-la) */
.img-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,10,0.7);
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.img-modal.open { opacity: 1; pointer-events: auto; }
.img-modal-dialog {
  position: relative;
  max-width: 1100px;
  width: 92%;
  max-height: 90vh;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-modal-content img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 12px;
  display: block;
}
.img-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}
.img-modal-close:focus { outline: 2px solid var(--accent); }


.about-visual{display:flex;align-items:center;justify-content:center}
.card-stats{display:flex;gap:1.6rem}
.card-stats div{background:var(--glass);padding:1rem;border-radius:12px;text-align:center;width:120px}
.card-stats h3{margin:0;font-size:1.6rem}
.email{color: var(--accent);}

/* Skills grid */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.skill{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:10px}
.skill h4{margin:0 0 .6rem 0}
.progress{height:12px;background:rgba(255,255,255,0.04);border-radius:10px;overflow:hidden}
.progress > i{display:block;height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,var(--accent),#8beaff);transition:width 1.1s cubic-bezier(.2,.9,.1,1)}

/* timeline */
.timeline{display:flex;flex-direction:column;gap:1rem}
.timeline-item{background:var(--card);padding:1rem;border-radius:10px;position:relative}
.timeline-item::before{content:'';position:absolute;left:-16px;top:18px;width:8px;height:8px;background:var(--accent);border-radius:50%}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--card);padding:1rem;border-radius:12px}

.contact-form{background:var(--card);padding:1rem;border-radius:12px;display:flex;flex-direction:column;gap:.6rem}
.contact-form label{display:flex;flex-direction:column;font-size:.9rem;color:var(--muted)}
.contact-form input,.contact-form textarea{margin-top:6px;padding:10px;border-radius:8px;border:0;background:rgba(255,255,255,0.03);color:inherit}
.form-actions{display:flex;gap:.6rem;justify-content:flex-end}

.site-footer{padding:1.2rem 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.03)}

/* responsive */
@media (max-width:900px){
  .grid-two{grid-template-columns:1fr}
  .nav-links{display:none}
  .burger{display:block}
}







/* styles-enhanced.css — amélioration visuelle et animations */
:root{
  /* palette mise à jour */
  --bg:#071119; --card:#0e1620; --muted:#9aa4b2; --accent:#4dd0e1; --accent-2:#7ce7ff; --glass: rgba(255,255,255,0.04);
  --glow: 0 8px 30px rgba(77,208,225,0.08);
  --max-w:1200px; --gap:1.25rem; --radius:14px; --ff: 'Inter', system-ui, sans-serif;
}
/* smooth interactions */
*{transition: all 220ms cubic-bezier(.2,.9,.3,1)}
html,body{height:100%}
body{margin:0;font-family:var(--ff);background:radial-gradient(1200px 600px at 10% 10%, rgba(77,208,225,0.03), transparent 8%), linear-gradient(180deg,#05060a 0%,#07111a 100%);color:#e6eef6;line-height:1.5;overscroll-behavior-y: none}
.container{max-width:var(--max-w);margin:0 auto;padding:2rem}

/* custom scrollbar for large viewports */
@media (min-width: 900px){
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:10px}
  ::-webkit-scrollbar-track{background:transparent}
}

/* navbar refinements */
.navbar{position:fixed;top:12px;left:50%;transform:translateX(-50%);max-width:var(--max-w);padding:0 1rem;height:64px;border-radius:12px;background:linear-gradient(180deg, rgba(10,14,18,0.55), rgba(10,14,18,0.28));box-shadow:0 6px 30px rgba(2,6,10,0.6), var(--glow);backdrop-filter: blur(8px);border:1px solid rgba(255,255,255,0.03)}
.brand{font-weight:800;font-size:1.05rem;letter-spacing:0.6px}
.brand .lastname{color:var(--accent);background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links a{position:relative;padding:8px 12px;border-radius:10px}
.nav-links a::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;width:0;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .35s}
.nav-links a:hover::after{width:60%}
.burger{display:none}

/* HERO — améliorations */
.hero{position:relative;height:92vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.28) contrast(1.05);transform:scale(1.04);transition:transform 10s linear}
.hero:hover .hero-video{transform:scale(1.06)}
.hero-content{position:relative;z-index:2;text-align:center;padding:1rem;max-width:1100px}
.fullname{font-size:clamp(2.8rem,7vw,6.2rem);margin:0;font-weight:900;color:#fff;letter-spacing:2px;text-transform:uppercase;text-shadow:0 12px 40px rgba(2,8,14,0.7);background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));-webkit-background-clip:text;background-clip:text;color:transparent}

/* neon glow for last name */
.fullname span{display:inline-block;padding-left:6px}
.fullname span::after{content:'';display:block;height:6px;width:100%;margin-top:8px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));filter:blur(8px);opacity:0.75}

.typing{margin-top:0.8rem;font-size:1.15rem;color:rgba(255,255,255,0.95);min-height:1.6rem}
.cursor{display:inline-block;margin-left:6px;animation:blink 1s steps(2) infinite;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6))}

.hero-cta{margin-top:1.5rem;display:flex;gap:1rem;justify-content:center}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#032025;padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:700;box-shadow:0 12px 30px rgba(77,208,225,0.08);transform:translateY(0)}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(77,208,225,0.12)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px 16px;border-radius:12px;color:var(--muted);text-decoration:none}

.scroll-down{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:3}
.scroll-down span{width:38px;height:56px;border-radius:26px;border:2px solid rgba(255,255,255,0.09)}
.scroll-down span::after{width:8px;height:8px}

/* subtle animated background lines */
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;background-image:linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);background-size:120px 120px;mix-blend-mode:overlay;opacity:0.7;pointer-events:none}

/* Sections */
.section{padding:6rem 0}
.grid-two{display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start}
.about-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:2rem;border-radius:16px;box-shadow:0 12px 40px rgba(2,6,10,0.6);border:1px solid rgba(255,255,255,0.03)}
.about-card h2{margin-top:0}
.about-visual{display:flex;align-items:center;justify-content:center}
.card-stats{display:flex;gap:1.6rem}
.card-stats div{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1.25rem;border-radius:12px;text-align:center;width:130px;box-shadow:var(--glow)}
.card-stats h3{margin:0;font-size:1.6rem}
.card-stats p{margin:0;color:var(--muted)}

/* Skills grid: add chips and animated progress */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.25rem}
.skill{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));padding:1.25rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 24px rgba(2,6,10,0.5)}
.skill h4{display:flex;align-items:center;justify-content:space-between;margin:0 0 .6rem 0}
.skill p{color:var(--muted);margin:0 0 .8rem 0}
.progress{height:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:99px;overflow:hidden}
.progress > i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 1.1s cubic-bezier(.2,.9,.1,1);box-shadow:0 8px 20px rgba(77,208,225,0.08)}

/* Skill badges */
.skill-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.badge{padding:.28rem .6rem;border-radius:999px;background:rgba(255,255,255,0.03);font-size:.85rem;border:1px solid rgba(255,255,255,0.02)}

/* Timeline with vertical line */
.timeline{position:relative;padding-left:18px}
.timeline::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent),transparent);opacity:0.18}
.timeline-item{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1.15rem;border-radius:12px;position:relative;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 24px rgba(2,6,10,0.5)}
.timeline-item::before{left:-22px;top:18px;width:14px;height:14px}
.timeline-item h3{margin:0 0 .35rem 0}
.timeline-item small{display:block;color:var(--muted);margin-bottom:.6rem}

/* cards */
.cards .card{padding:1.15rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(2,6,10,0.45)}
.card h4{margin:0 0 .4rem 0}

/* Contact form improvements */
.contact-form{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));padding:1.25rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(2,6,10,0.45)}
.contact-form input:focus,.contact-form textarea:focus{outline: none; box-shadow:0 6px 18px rgba(77,208,225,0.07); border:1px solid rgba(77,208,225,0.12); background: rgba(255,255,255,0.02)}
.form-actions{justify-content:space-between}

/* Footer */
.site-footer{padding:1.6rem 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.03);margin-top:3rem}

/* micro-animations */
@keyframes floaty{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}
.btn-primary{animation:floaty 6s ease-in-out infinite}

/* utility */
.muted{color:var(--muted)}

/* === Mobile nav behaviour ===
   Add after your existing CSS so it overrides where needed.
*/

/* Show burger on small screens (your existing media already had burger display:block) */
@media (max-width:900px) {
  .burger { display: block; background: none; border: 0; color: var(--muted); font-size: 1.25rem; padding: 6px; }
  .burger:focus { outline: 2px solid var(--accent); border-radius: 8px; }

  /* full screen overlay nav */
  .nav-links {
    /* hide visually by default (off-canvas) */
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 2rem;
    background: linear-gradient(180deg, rgba(8,10,15,0.96), rgba(8,10,15,0.94));
    backdrop-filter: blur(10px);
    transform: translateY(-12%);
    opacity: 0;
    pointer-events: none;
    transition: transform .36s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
    z-index: 60;
  }

  /* When navbar has .open, reveal the menu */
  .navbar.open .nav-links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* larger tap targets for mobile */
  .nav-links a {
    font-size: 1.25rem;
    padding: 12px 18px;
    border-radius: 10px;
    color: #e6eef6;
    text-decoration: none;
    display: inline-block;
    transition: transform .22s ease, opacity .22s ease;
    opacity: 0;
    transform: translateY(8px);
  }

  /* staggered entrance for links */
  .navbar.open .nav-links a:nth-child(2) { transition-delay: .04s; opacity:1; transform:translateY(0); }
  .navbar.open .nav-links a:nth-child(3) { transition-delay: .08s; opacity:1; transform:translateY(0); }
  .navbar.open .nav-links a:nth-child(4) { transition-delay: .12s; opacity:1; transform:translateY(0); }
  .navbar.open .nav-links a:nth-child(5) { transition-delay: .16s; opacity:1; transform:translateY(0); }

  .nav-links a:hover,
  .nav-links a:focus {
    color: #fff;
    transform: translateY(-2px);
    background: rgba(255,255,255,0.03);
  }

  /* Close button (visible only when menu open) */
  .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 1.1rem;
    padding: 8px;
    border-radius: 8px;
  }
  .close-btn:focus { outline: 2px solid var(--accent); }

  /* when closed, hide close button (we show it with JS) */
  .close-btn[hidden] { display: none; }

  /* lock scroll helper */
  body.no-scroll { height: 100vh; overflow: hidden; }
}


.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1.25rem}
.project-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));padding:1.25rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 24px rgba(2,6,10,0.5);display:flex;flex-direction:column;gap:.75rem}
.project-card h3{margin:0;font-size:1.05rem}
.project-card small{color:var(--muted)}
.project-card p{margin:0;color:var(--muted)}
.project-meta{display:flex;gap:.6rem;flex-wrap:wrap;font-size:.88rem;color:var(--muted)}
.project-tech{margin-top:.6rem;color:var(--muted);font-size:.9rem}
.project-actions{margin-top:8px;display:flex;gap:.6rem;justify-content:flex-end}
.project-actions a.btn-primary{padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:700}
.project-actions button[disabled]{opacity:.45;cursor:not-allowed}



/* --- Projets : miniatures & modal --- */

.project-thumb{margin-top:0.6rem;overflow:hidden;border-radius:10px}
.project-thumb img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  border-radius:10px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  border:1px solid rgba(255,255,255,0.03);
}
.project-thumb img:focus,
.project-thumb img:hover{ transform:scale(1.03); box-shadow:0 10px 30px rgba(2,6,10,0.45); outline:none; }

/* modal image viewer */
.img-modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,10,0.7); z-index:120; opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.img-modal.open{ opacity:1; pointer-events:auto; }
.img-modal-dialog{ position:relative; max-width:1100px; width:92%; max-height:90vh; padding:1rem; display:flex; align-items:center; justify-content:center; }
.img-modal-content img{ max-width:100%; max-height:85vh; border-radius:12px; display:block; }
.img-modal-close{
  position:absolute; top:12px; right:12px; background:rgba(0,0,0,0.45); color:#fff; border:0; padding:8px 10px; border-radius:8px;
  cursor:pointer; font-weight:700;
}
.img-modal-close:focus{ outline:2px solid var(--accent); }

/* CV button (desktop) */
.cv-btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:8px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  color: #032025;                     /* texte sur le gradient */
  background: linear-gradient(90deg, var(--accent), var(--accent-2, #6be7ff));
  box-shadow: 0 8px 26px rgba(77,208,225,0.08);
  border: none;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s;
  margin-left: 0.5rem; /* espace entre nav-links et le bouton */
}

/* small icon inside button (optional) */
.cv-ico{ font-size:1rem; transform:translateY(-1px) }

/* hover/focus */
.cv-btn:hover,
.cv-btn:focus{
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(77,208,225,0.12);
  outline: none;
}

/* Hide the mobile copy on desktop */
.cv-link-mobile{ display:none; }

/* Responsive: on mobile, hide the desktop button and show the mobile link in nav */
@media (max-width:900px){
  .cv-btn{ display:none !important; }        /* hide desktop button on small screens */
  .cv-link-mobile{
    display:block;
    width:100%;
    max-width:560px;
    text-align:center;
    padding:12px 18px;
    font-size:1.15rem;
    border-radius:12px;
    color:#e6eef6;
    text-decoration:none;
    transition: background .18s, transform .18s;
  }
  .cv-link-mobile:hover,
  .cv-link-mobile:focus{ background: rgba(255,255,255,0.03); transform: translateY(-2px); }
}

.music-switch {
    position: absolute;
    right: 14px;
    top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 140;
    -webkit-tap-highlight-color: transparent;
  }
  .music-switch .label {
    font-size: .82rem;
    color: rgba(230,238,246,0.9);
    font-weight:600;
    letter-spacing:.2px;
    display:none; /* hidden on small, visible on larger screens */
  }
  @media (min-width:900px){ .music-switch .label { display:block; } }

  .music-toggle {
    --w:56px; --h:32px; --knob:26px;
    width: var(--w);
    height: var(--h);
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
    border-radius: 999px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 6px 18px rgba(2,6,10,0.6);
    cursor: pointer;
    position: relative;
    border: 1px solid rgba(255,255,255,0.04);
    transition: transform .18s ease, box-shadow .18s ease, background .28s ease;
  }
  .music-toggle:focus { outline: 3px solid rgba(77,208,225,0.18); outline-offset: 2px; border-radius:999px; }

  /* knob */
  .music-toggle .knob {
    width: var(--knob);
    height: var(--knob);
    border-radius: 50%;
    background: linear-gradient(180deg,#ffffff,#e8faff);
    transform: translateX(0);
    transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease;
    box-shadow: 0 8px 20px rgba(2,6,10,0.28);
    display:flex;align-items:center;justify-content:center;
  }

  /* note icon inside knob */
  .music-toggle .knob svg { width:14px;height:14px;opacity:.92;filter: drop-shadow(0 2px 6px rgba(2,6,10,0.18)); }

  /* when ON */
  .music-toggle.on {
    background: linear-gradient(90deg, rgba(77,208,225,0.12), rgba(124,231,255,0.06));
    transform: translateY(-1px);
  }
  .music-toggle.on .knob { transform: translateX(calc(var(--w) - var(--knob) - 6px)); background: linear-gradient(90deg,#4dd0e1,#7ce7ff); box-shadow: 0 12px 30px rgba(77,208,225,0.12); }

  /* micro pulse when turned on (subtle) */
  .music-toggle.on::after {
    content: '';
    position: absolute;
    left: 8px; right: 8px;
    top: 4px; bottom: 4px;
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(77,208,225,0.06);
    pointer-events: none;
    transition: opacity .28s ease;
  }

  .music-toast {
    position: fixed;
    right: 18px;
    top: 78px;
    background: rgba(6,9,12,0.9);
    color: #e6eef6;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: .9rem;
    box-shadow: 0 10px 30px rgba(2,6,10,0.6);
    z-index: 160;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
  }
  .music-toast.show { opacity: 1; transform: translateY(0); }

  :root{
--bg:#071119;
--card:#0e1620;
--muted:#9aa4b2;
--accent:#4dd0e1;
--accent-2:#7ce7ff;
--glass:rgba(255,255,255,0.04);
--max-w:1200px;
--radius:14px;
--ff:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}


/* reset minimal (scope-local to navbar file safe to include) */
*{box-sizing:border-box}


/* NAVBAR wrapper: centered on desktop, full-width on mobile */
.navbar{
position:fixed;
top:12px;
left:50%;
transform:translateX(-50%);
max-width:var(--max-w);
width:calc(100% - 48px);
height:64px;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
padding:0 1rem;
border-radius:12px;
background:linear-gradient(180deg, rgba(10,14,18,0.65), rgba(10,14,18,0.28));
backdrop-filter: blur(10px);
box-shadow:0 10px 40px rgba(2,6,10,0.6);
border:1px solid rgba(255,255,255,0.03);
z-index:120;
}


/* Brand */
.brand{font-weight:800;font-size:1.05rem;letter-spacing:.5px}
.brand .lastname{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}


/* nav right group (links + cv button + optional controls) */
.nav-right{display:flex;align-items:center;gap:.75rem;margin-left:auto}


/* links container */
.nav-links{display:flex;gap:.6rem;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:600}
.nav-links a:hover, .nav-links a:focus{color:#fff;background:rgba(255,255,255,0.03);outline:none;transform:translateY(-2px)}


/* CV button (desktop) */
.cv-btn{display:inline-flex;align-items:center;gap:.6rem;padding:8px 14px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#032025;font-weight:700;text-decoration:none;box-shadow:0 8px 26px rgba(77,208,225,0.08);border:none}
.cv-btn:focus{outline:3px solid rgba(77,208,225,0.12);outline-offset:2px}

/* Close button inside overlay (mobile) */
.close-btn{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--muted);padding:8px;border-radius:8px;display:none}
:focus{outline:2px solid rgba(77,208,225,0.12);outline-offset:2px}