*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

  :root{
    --lime:#b8f400;--dark:#07070f;--navy:#0d0d1f;
    --purple:#8f57ee;--pink:#ec4899;--teal:#06b6d4;--orange:#f59e0b;
    --text:#f0f0ff;--muted:#7676be;--border:rgba(176, 143, 233, 0.553);
    --retro:'Press Start 2P',monospace;--body:'Space Grotesk',sans-serif;
  }

  html{scroll-behavior:smooth}
  body{font-family:var(--body);background:var(--dark);color:var(--text);overflow-x:hidden;cursor:none}

  /* ── CURSOR ── */
 .c-dot {
  width: 6px;
  height: 6px;
  background: var(--lime);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;  /* ← était 9999, monte au-dessus du modal */
  pointer-events: none;
  border-radius: 50%;
}

.c-ring {
  width: 24px;
  height: 24px;
  border: 2px solid var(--lime);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99998;  /* ← était 9998 */
  pointer-events: none;
  opacity: .45;
  transition: width .1s, height .1s;
}

  /* ── EXP BAR ── */
  #exp-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--purple),var(--lime));z-index:700;width:0%;transition:width .12s}

  /* ── NAV ── */
  nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;justify-content:space-between;align-items:center;padding:.75rem 2rem;background:rgba(7,7,15,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
  .nav-logo{font-family:var(--retro);font-size:9px;color:var(--lime)}
  .nav-links{display:flex;gap:1.4rem;list-style:none}
  .nav-links a{font-family:var(--retro);font-size:6px;color:var(--muted);text-decoration:none;transition:color .15s}
  .nav-links a:hover{color:var(--lime)}
  .nav-right{display:flex;align-items:center;gap:.8rem}
  .nav-badge{font-family:var(--retro);font-size:6px;color:var(--lime);border:1px solid var(--lime);padding:.3rem .7rem;animation:navblink 1.8s infinite steps(1)}
  @keyframes navblink{50%{opacity:.3}}

  #sound-btn,
  .nav-mail{
    background:transparent;
    border:none;
    padding:.4rem;
    width:auto;
    height:auto;
    color:var(--lime);
    border-radius:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:none;
    transition:all .2s ease;
    box-shadow:none;
    text-decoration:none;
    filter:drop-shadow(0 0 6px rgba(184,244,0,.5));
  }
  #sound-btn:hover,
  .nav-mail:hover{
    background:transparent;
    color:#ffffff;
    transform:scale(1.2) translateY(-1px);
    filter:drop-shadow(0 0 12px var(--lime));
    box-shadow:none;
  }
  #sound-btn.muted{
    color:var(--muted);
    filter:none;
  }
  #sound-btn svg,
  .nav-mail svg{
    display:block;
    pointer-events:none;
  }

  /* ── SECTIONS ── */
  section{min-height:100vh;position:relative;overflow:hidden;padding-bottom:15px}
  .s-inner{position:relative;z-index:5;max-width:1200px;margin:0 auto;padding:5.5rem 2.5rem 4rem;min-height:100vh;display:flex;align-items:center}
  .bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(124,58,237,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.05) 1px,transparent 1px);background-size:32px 32px;z-index:0;pointer-events:none}
  .scanlines{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.07) 3px,rgba(0,0,0,.07) 4px);opacity:.3}
  .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.09;pointer-events:none}

  /* ── PIXEL CHARS ── */
  canvas.pchar{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
  .pchar-idle{animation:pixidle 1.8s ease-in-out infinite}
  @keyframes pixidle{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

  /* ── DIALOG BOX ── */
  .dlg{background:rgba(5,5,18,.98);border:2px solid var(--purple);padding:1rem 1.2rem;position:relative}
  .dlg::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--purple),var(--lime),var(--purple),transparent)}
  .dc{position:absolute;width:6px;height:6px;background:var(--lime);z-index:2}
  .dc-tl{top:-2px;left:-2px}.dc-tr{top:-2px;right:-2px}.dc-bl{bottom:-2px;left:-2px}.dc-br{bottom:-2px;right:-2px}
  .dlg-name{font-family:var(--retro);font-size:8px;color:var(--lime);margin-bottom:.7rem}
  .dlg-text{font-size:.86rem;line-height:1.85;color:var(--text);min-height:60px;white-space:pre-line}
  .dlg-cur{display:inline-block;width:7px;height:13px;background:var(--lime);vertical-align:middle;animation:dlgblink .55s infinite steps(1);margin-left:1px}
  @keyframes dlgblink{50%{opacity:0}}
  .dlg-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.7rem;padding-top:.6rem;border-top:1px solid rgba(124,58,237,.2)}
  .dlg-ctr{font-family:var(--retro);font-size:6px;color:var(--muted)}
  .dlg-btns{display:flex;gap:.3rem}
  .dbtn{font-family:var(--retro);font-size:7px;padding:.32rem .6rem;border:1px solid var(--purple);background:transparent;color:var(--text);cursor:none;transition:all .1s}
  .dbtn:hover{background:var(--purple)}
  .dbtn:disabled{opacity:.25;pointer-events:none}
  .dbtn.play{background:var(--lime);color:var(--dark);border-color:var(--lime)}

  /* ── HERO ── */
  h1.htitle{font-size:clamp(2.8rem,5vw,4.5rem);font-weight:700;letter-spacing:-.03em;line-height:.93;margin-bottom:.6rem}
  h1.htitle em{color:var(--lime);font-style:normal;display:block}
  .hsub{font-size:.95rem;color:var(--muted);font-weight:300;margin-bottom:2rem;line-height:1.7}
  .hctas{display:flex;gap:.75rem;margin-bottom:2.5rem;flex-wrap:wrap}
  .btn-main{font-family:var(--retro);font-size:9px;padding:.8rem 1.6rem;background:var(--lime);color:var(--dark);border:none;cursor:none;text-decoration:none;display:inline-block;transition:all .1s;box-shadow:4px 4px 0 rgba(184,244,0,.2)}
  .btn-main:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(184,244,0,.2)}
  .btn-ghost{font-family:var(--retro);font-size:9px;padding:.8rem 1.6rem;background:transparent;color:var(--text);border:1px solid var(--border);cursor:none;text-decoration:none;display:inline-block;transition:all .15s}
  .btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
  .hstats{display:flex;gap:2rem}
  .hstat-v{font-family:var(--retro);font-size:1.4rem;color:var(--lime);text-shadow:0 0 20px var(--lime);line-height:1}
  .hstat-l{font-family:var(--retro);font-size:6px;color:var(--muted);margin-top:.3rem;line-height:1.6}
  .hero-right{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
  #hero .s-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
  .eyebrow{font-family:var(--retro);font-size:8px;color:var(--purple);margin-bottom:.6rem}
  h2.stitle{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700;letter-spacing:-.03em;margin-bottom:1.5rem}

  /* ──  EYEBROW HERO ── */
  .h-eyebrow{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem .7rem;
    font-family:var(--retro);
    font-size:8px;
    line-height:1.6;
    margin-bottom:1.2rem;
    letter-spacing:.5px;
    color:var(--purple);
  }
  .eb-tag{
    padding:.4rem .65rem;
    background:rgba(124,58,237,.08);
    border:1px solid rgba(124,58,237,.25);
    color:#c4b3ff;
    border-radius:3px;
    transition:all .2s;
  }
  .eb-tag:hover{transform:translateY(-1px);background:rgba(124,58,237,.15)}
  .eb-tag-lime{
    background:rgba(184,244,0,.08);
    border-color:rgba(184,244,0,.4);
    color:var(--lime);
    animation:pulse-lime 2.5s ease-in-out infinite;
  }
  .eb-sep{color:var(--purple);font-size:6px;opacity:.5}
  @keyframes pulse-lime{
    0%,100%{box-shadow:0 0 0 0 rgba(184,244,0,.25)}
    50%{box-shadow:0 0 14px 0 rgba(184,244,0,.2)}
  }

  /* ── REVEAL ── */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
  .reveal.in{opacity:1;transform:none}

  /* ── CHARACTER STATS ── */
  .stat-win{
    background:rgba(5,5,18,.97);
    border:2px solid var(--purple);
    padding:1.8rem 4rem;
    position:relative;
    box-shadow:0 0 40px rgba(124,58,237,.12), inset 0 0 40px rgba(5,5,18,.5);
  }
  .stat-win::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--purple),var(--lime),var(--purple),transparent);
  }
  .stat-win-title{
    font-family:var(--retro);font-size:10px;color:var(--lime);
    margin-bottom:1.4rem;padding-bottom:.8rem;
    border-bottom:1px solid var(--border);
    text-shadow:0 0 12px var(--lime);
    letter-spacing:.12em;
  }
  .stat-row{display:flex;align-items:center;gap:1rem;margin-bottom:.85rem}
  .stat-n{
    font-family:var(--retro);font-size:7.5px;color:var(--text);
    width:105px;flex-shrink:0;line-height:1.5;
  }
  .stat-bar{
    flex:1;height:12px;background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    position:relative;overflow:hidden;border-radius:1px;
  }
  .stat-bar::after{
    content:'';position:absolute;inset:0;
    background:repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(0,0,0,.15) 3px,rgba(0,0,0,.15) 4px);
    pointer-events:none;z-index:1;
  }
  .stat-fill{height:100%;width:0;transition:width 1.3s cubic-bezier(.4,0,.2,1);position:relative}
  .stat-fill::after{
    content:'';position:absolute;right:0;top:0;bottom:0;width:3px;
    background:rgba(255,255,255,.6);filter:blur(1px);
  }
  .stat-pct{font-family:var(--retro);font-size:7px;color:var(--lime);width:28px;text-align:right;flex-shrink:0}

  /* ── SKILLS ── */
  #skills{background:linear-gradient(180deg,var(--dark),#080416)}
  .skill-universe{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(124,58,237,.15)}
  .skill-card{background:var(--dark);padding:1.4rem 1.1rem;position:relative;overflow:hidden;transition:all .2s;cursor:default}
  .skill-card:hover{background:#0c0620;transform:scale(1.02);z-index:2}
  .skill-icon{font-size:2rem;margin-bottom:.6rem;display:block}
  .skill-name{font-family:var(--retro);font-size:8.5px;color:var(--text);margin-bottom:.4rem;line-height:1.7}
  .skill-level{font-family:var(--retro);font-size:6px;color:var(--muted);margin-bottom:.6rem}
  .skill-dots{display:flex;gap:2px;flex-wrap:wrap}
  .skill-dot{width:8px;height:8px;border:1px solid rgba(255,255,255,.1)}
  .skill-dot.filled{background:var(--dot-color,var(--lime));border-color:var(--dot-color,var(--lime));box-shadow:0 0 4px var(--dot-color,var(--lime))}
  .skill-cat{position:absolute;top:.4rem;right:.6rem;font-family:var(--retro);font-size:4.5px;color:var(--muted)}
  .skill-cat-header{grid-column:1/-1;background:rgba(124,58,237,.08);border-left:3px solid var(--lime);padding:.65rem 1.2rem;font-family:var(--retro);font-size:7px;color:var(--lime);letter-spacing:.1em}

  /* ──  LANGUAGES ── */
  .lang-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
    margin-top:2rem;
  }
  .lang-card{
    background:var(--navy);
    border:1px solid var(--border);
    padding:1.2rem 1rem;
    text-align:center;
    transition:all .25s;
  }
  .lang-card:hover{
    border-color:var(--lime);
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(184,244,0,.1);
  }
  .lang-flag{
    font-family:var(--retro);
    font-size:14px;
    line-height:1;
    color:var(--text);
    background:rgba(184,244,0,.08);
    border:1px solid rgba(184,244,0,.3);
    padding:.5rem .7rem;
    display:inline-block;
    margin-bottom:.7rem;
    letter-spacing:1px;
    border-radius:3px;
    text-shadow:0 0 8px rgba(184,244,0,.4);
    min-width:42px;
    text-align:center;
    transition:all .25s;
  }
  .lang-card:hover .lang-flag{
    background:rgba(184,244,0,.18);
    border-color:var(--lime);
    color:var(--lime);
    transform:scale(1.05);
  }
  .lang-name{font-family:var(--retro);font-size:7px;color:var(--lime);margin-bottom:.3rem}
  .lang-lvl{font-size:.78rem;color:var(--muted)}

  /* ── CERTIFICATIONS ── */
  .cert-strip{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
  .cert-badge{
    display:flex;align-items:center;gap:.7rem;
    background:rgba(184,244,0,.07);
    border:1px solid rgba(184,244,0,.3);
    padding:.7rem 1.1rem;
    position:relative;
    transition:all .2s;
  }
  .cert-badge:hover{background:rgba(184,244,0,.12);border-color:rgba(184,244,0,.5)}
  .cert-badge::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--lime),transparent);
  }
  .cert-icon{font-size:1.2rem;flex-shrink:0}
  .cert-text{font-family:var(--retro);font-size:6.5px;color:var(--lime);line-height:1.9}

  /* ── PROJECTS RPG ── */
  .proj-header{text-align:center;padding:6rem 2rem 2rem}
  .proj-eyebrow{font-family:var(--retro);font-size:8px;color:var(--purple);margin-bottom:.5rem}
  .proj-main-title{font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:-.03em}
  .proj-sub{font-size:.9rem;color:var(--muted);margin-top:.4rem}
  .project-tabs{display:flex;justify-content:center;gap:1px;background:var(--border);max-width:900px;margin:2rem auto 0}
  .proj-tab{font-family:var(--retro);font-size:6px;padding:.75rem 1rem;background:var(--dark);color:var(--muted);cursor:none;border:none;transition:all .2s;flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.3rem;line-height:1.6}
  .proj-tab .proj-num{font-size:7px;color:rgba(172, 124, 254, 0.833);letter-spacing:.12em;font-family:var(--retro);transition:color .2s}
  .proj-tab .proj-name{display:block}
  .proj-tab.active{background:rgba(184,244,0,.07);color:var(--lime);border-top:2px solid var(--lime)}
  .proj-tab.active .proj-num{color:rgba(184,244,0,0.55)}
  .proj-tab:hover:not(.active){color:var(--text);background:rgba(255,255,255,.02)}
  .proj-tab:hover:not(.active) .proj-num{color:var(--purple)}

  /* ── RPG STAGE ── */
  .rpg-stage{position:relative;max-width:1100px;margin:0 auto;background:#040410;border:2px solid var(--border)}
  .rpg-scene{display:none;flex-direction:column}
  .rpg-scene.active{display:flex}
  .rpg-scenes-wrap{position:relative;width:100%;height:380px}
  .rpg-sub-scene{position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none}
  .rpg-sub-scene.current{opacity:1;pointer-events:all}
  .rpg-visual{position:relative;width:100%;height:380px;overflow:hidden}
  .rpg-char-layer{position:absolute;inset:0}
  .scene-bg-canvas{position:absolute;inset:0;width:100%;height:100%}
  .char-wrap{position:absolute;bottom:55px;display:flex;flex-direction:column;align-items:center;transition:left .8s cubic-bezier(.4,0,.2,1)}
  .char-label{font-family:var(--retro);font-size:5px;color:var(--lime);text-align:center;margin-top:2px;white-space:nowrap;text-shadow:0 0 6px var(--lime)}
  .scene-bulb{position:absolute;font-size:2.8rem;z-index:25;opacity:0;transition:opacity .5s,transform .6s;transform:scale(.4) translateY(-20px);pointer-events:none}
  .scene-bulb.show{opacity:1;transform:scale(1.1) translateY(0);animation:bulbpulse 1.2s ease-in-out infinite}
  @keyframes bulbpulse{0%,100%{filter:drop-shadow(0 0 6px #ffcc00)}50%{filter:drop-shadow(0 0 22px #ffcc00) drop-shadow(0 0 40px #ff8800)}}
  .rpg-narrative{background:#030308;border-top:1px solid var(--border)}
  .scene-dlg-box{padding:1rem 1.5rem;border-bottom:1px solid rgba(124,58,237,.1);min-height:115px;position:relative}
  .step-badge{font-family:var(--retro);font-size:5px;color:var(--purple);border:1px solid var(--purple);padding:.15rem .4rem;display:inline-block;margin-bottom:.3rem}
  .scene-speaker{font-family:var(--retro);font-size:7px;color:var(--lime);margin-bottom:.4rem}
  .scene-text{font-size:.87rem;line-height:1.8;color:var(--text);min-height:48px}
  .scene-cur{display:inline-block;width:6px;height:12px;background:var(--lime);vertical-align:middle;animation:dlgblink .5s infinite steps(1)}
  .proj-impact-bar{display:flex;gap:2rem;padding:.7rem 1.5rem;background:rgba(184,244,0,.04);border-top:1px solid rgba(184,244,0,.1)}
  .proj-impact-item{text-align:center}
  .proj-impact-v{font-family:var(--retro);font-size:.95rem;color:var(--lime);text-shadow:0 0 8px var(--lime)}
  .proj-impact-l{font-family:var(--retro);font-size:5px;color:var(--muted);margin-top:.2rem}
  .proj-tags{display:flex;flex-wrap:wrap;gap:.3rem;padding:.7rem 1.5rem}
  .ptag{font-family:var(--retro);font-size:5px;padding:.18rem .45rem;border:1px solid rgba(255,255,255,.07);color:#5555aa}
  .proj-live-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;padding:0 1.5rem .9rem}
  .proj-live-hint{font-family:var(--retro);font-size:5px;color:var(--muted);line-height:1.6}
  .rpg-controls{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:#040410}
  .rpg-progress{display:flex;gap:4px}
  .rpg-dot{width:8px;height:8px;background:rgba(255,255,255,.1);transition:background .2s}
  .rpg-dot.done{background:var(--purple)}
  .rpg-dot.current{background:var(--lime)}
  .rpg-nav-btns{display:flex;gap:.5rem}
  .rpg-btn{font-family:var(--retro);font-size:7px;padding:.4rem .9rem;border:1px solid var(--purple);background:transparent;color:var(--text);cursor:none;transition:all .1s}
  .rpg-btn:hover{background:var(--purple)}
  .rpg-btn.primary{background:var(--lime);color:var(--dark);border-color:var(--lime)}
  .rpg-btn:disabled{opacity:.25;pointer-events:none}

  /*  Bouton PROJET SUIVANT avec pulse */
  .rpg-btn.primary[data-final="true"]{
    background:linear-gradient(135deg,var(--lime),#80d000);
    animation:project-next-pulse 1.8s ease-in-out infinite;
    position:relative;
  }
  @keyframes project-next-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(184,244,0,.5)}
    50%{box-shadow:0 0 0 8px rgba(184,244,0,0)}
  }

  /* ──  LIEN "AUTRES PROJETS GITHUB" ── */
  .more-projects{
    max-width:900px;
    margin:3rem auto 2rem;
    padding:1.5rem 2rem;
    text-align:center;
    display:flex;
    align-items:center;
    gap:1.5rem;
  }
  .more-projects-line{
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--purple),transparent);
    opacity:.4;
  }
  .more-projects-text{
    font-size:.92rem;
    color:#9494cf;
    font-weight:300;
    line-height:1.7;
    margin:0;
    max-width:600px;
  }
  .mp-link{
    color:var(--lime);
    font-weight:600;
    text-decoration:none;
    padding:.4rem .8rem;
    margin-left:.4rem;
    border:1px solid rgba(184,244,0,.35);
    border-radius:5px;
    background:rgba(184,244,0,.06);
    transition:all .25s;
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    white-space:nowrap;
    cursor:none;
  }
  .mp-link:hover{
    background:rgba(184,244,0,.18);
    border-color:var(--lime);
    box-shadow:0 0 20px rgba(184,244,0,.3);
    transform:translateY(-2px);
  }

  /* ── EXPERIENCE — TIMELINE ── */
  #experience{background:linear-gradient(180deg,var(--dark),#080416)}
  .timeline-container{position:relative;padding-left:0}

  .titem{
    display:grid;
    grid-template-columns:160px 20px 1fr;
    gap:0 1.2rem;
    margin-bottom:2.5rem;
    position:relative;
    align-items:start;
  }
  .titem::before{
    content:'';
    position:absolute;
    left:168px;
    top:8px;
    bottom:-2.5rem;
    width:1px;
    background:linear-gradient(to bottom,var(--purple),transparent);
    z-index:0;
  }
  .titem-dot{
    width:11px;
    height:11px;
    background:var(--dark);
    border:2px solid var(--lime);
    border-radius:0;
    flex-shrink:0;
    margin-top:4px;
    position:relative;
    z-index:1;
  }
  .t-period{
    font-family:var(--retro);
    font-size:6px;
    color:var(--purple);
    text-align:right;
    padding-top:.25rem;
    line-height:2;
    white-space:nowrap;
  }
  .t-co{font-family:var(--retro);font-size:9px;color:var(--lime);margin-bottom:.3rem;line-height:1.4}
  .t-role{font-size:.9rem;font-weight:600;margin-bottom:.5rem;color:var(--text)}
  .t-desc{font-size:.83rem;font-weight:300;color:#9d9dd4;line-height:1.8}
  .t-highlights{margin-top:.55rem;display:flex;flex-wrap:wrap;gap:.3rem}
  .t-tag{font-family:var(--retro);font-size:6px;padding:.2rem .4rem;border:1px solid rgba(184,244,0,.18);color:rgba(184,244,0,.6);background:rgba(184,244,0,.04)}

  /* ── EDUCATION ── */
  .edu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:.8rem}
  .edu-card{background:var(--navy);padding:1.2rem}
  .edu-year{font-family:var(--retro);font-size:6px;color:var(--purple);margin-bottom:.4rem}
  .edu-school{font-family:var(--retro);font-size:8px;color:var(--lime);margin-bottom:.4rem;line-height:1.5}
  .edu-deg{font-size:.78rem;color:var(--muted);line-height:1.5}

  /* ── CONTACT ── */
  .ccard{background:rgba(5,5,18,.97);border:2px solid var(--purple);padding:2rem;position:relative}
  .ccard-title{font-family:var(--retro);font-size:11px;color:var(--lime);margin-bottom:.5rem;text-shadow:0 0 20px var(--lime);line-height:1.7}
  .ccard-sub{font-size:.88rem;color:var(--muted);margin-bottom:1.8rem;font-weight:300;line-height:1.7}
  .clinks{display:flex;flex-direction:column;gap:.4rem}
  .clink{font-family:var(--retro);font-size:7px;padding:.75rem 1rem;border:1px solid var(--border);color:var(--text);text-decoration:none;display:flex;align-items:center;gap:.8rem;cursor:none;transition:all .1s}
  .clink:hover{border-color:var(--lime);color:var(--lime);background:rgba(184,244,0,.04)}

  /* ── SECTION NAV ARROW ── */
  .section-nav-btn{
    position:absolute;
    bottom:8rem;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
    background:rgba(7,7,15,.85);
    border:1px solid var(--purple);
    color:var(--lime);
    font-family:var(--retro);
    font-size:6px;
    padding:.5rem 1.1rem;
    cursor:none;
    display:flex;align-items:center;gap:.5rem;
    transition:all .2s;
    backdrop-filter:blur(8px);
    animation:arrowbob 2s ease-in-out infinite;
    white-space:nowrap;
  }
  .section-nav-btn:hover{
    background:rgba(124,58,237,.25);
    border-color:var(--lime);
    transform:translateX(-50%) translateY(-2px);
  }
  .section-nav-btn .arrow-icon{font-size:7px;animation:arrowpulse 1.4s ease-in-out infinite}
  @keyframes arrowbob{0%,100%{bottom:2.2rem}50%{bottom:2.6rem}}
  @keyframes arrowpulse{0%,100%{opacity:1}50%{opacity:.5}}

  /* ── NOTIF ── */
  .notif-pop{position:fixed;top:70px;right:20px;font-family:var(--retro);font-size:7px;background:rgba(5,5,20,.98);border:2px solid var(--lime);padding:.6rem 1rem;color:var(--lime);z-index:600;opacity:0;transform:translateX(20px);transition:all .3s;pointer-events:none}
  .notif-pop.show{opacity:1;transform:translateX(0)}

  /* ── BOOT ── */
  #boot{position:fixed;inset:0;background:var(--dark);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;transition:opacity .6s}
  #boot.hide{opacity:0;pointer-events:none}
  .boot-title{font-family:var(--retro);font-size:16px;color:var(--lime);text-shadow:0 0 30px var(--lime)}
  .boot-bar-wrap{width:300px;height:12px;border:2px solid var(--purple);overflow:hidden}
  .boot-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--lime));transition:width .05s}
  .boot-text{font-family:var(--retro);font-size:7px;color:var(--muted)}

  /* ──  BOUTON SKIP INTRO ── */
  .boot-skip{
    position:absolute;
    bottom:2rem;
    right:2rem;
    font-family:var(--retro);
    font-size:8px;
    padding:.6rem 1rem;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.15);
    color:rgba(255,255,255,.5);
    cursor:none;
    letter-spacing:1px;
    transition:all .2s;
    border-radius:3px;
  }
  .boot-skip:hover{
    background:rgba(184,244,0,.1);
    border-color:var(--lime);
    color:var(--lime);
  }

  /* ── BOUTON CV STICKY ── */
  .sticky-cv{
    position:fixed;
    right:1.5rem;
    bottom:1.5rem;
    z-index:90;
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.85rem 1.2rem;
    background:linear-gradient(135deg,var(--lime),#80d000);
    color:var(--dark);
    font-weight:700;
    font-size:.85rem;
    font-family:var(--body);
    text-decoration:none;
    border-radius:50px;
    box-shadow:0 8px 30px rgba(184,244,0,.4),0 0 0 1px rgba(0,0,0,.1);
    transition:all .25s cubic-bezier(.4,0,.2,1);
    letter-spacing:.5px;
    cursor:none;
    animation:cv-bounce 3s ease-in-out infinite;
  }
  .sticky-cv:hover{
    transform:translateY(-4px) scale(1.05);
    box-shadow:0 12px 40px rgba(184,244,0,.55);
  }
  .sticky-cv-icon{font-size:1.1rem}
  @keyframes cv-bounce{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-6px)}
  }

  /* ── FOOTER ── */
  footer{background:var(--dark);border-top:1px solid var(--border);padding:1.2rem 2.5rem;display:flex;justify-content:space-between;align-items:center}
  .f-text{font-family:var(--retro);font-size:6px;color:var(--muted)}
  .savepoint{font-family:var(--retro);font-size:6px;color:var(--lime)}

  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar{width:4px}
  ::-webkit-scrollbar-track{background:var(--dark)}
  ::-webkit-scrollbar-thumb{background:var(--purple)}

  /* ═══════════════════════════════════════════════
     CV SECTION 
    ═══════════════════════════════════════════════ */
  #cv{background:linear-gradient(180deg,var(--dark),#080416)}

  /* Élargir la zone CV */
  #cv > div {
    max-width: 1400px !important;
    width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .cv-showcase {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2.5rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
  }
  /* ── APERÇU PDF ── */
  .cv-preview-wrap{
    display:flex;
    flex-direction:column;
    gap:.8rem;
    width:100%;
    min-width:0;
  }

  .cv-frame{
    width:100%;
    background:#1a1a2e;
    border:2px solid var(--purple);
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(124,58,237,.3),0 0 0 1px rgba(184,244,0,.1);
    transition:all .3s;
  }
  .cv-frame:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 80px rgba(124,58,237,.4),0 0 30px rgba(184,244,0,.15);
  }

  .cv-frame-header{
    background:linear-gradient(180deg,#1f1f3a,#0d0d1f);
    padding:.7rem 1rem;
    display:flex;
    align-items:center;
    gap:.5rem;
    border-bottom:1px solid var(--border);
  }

  .cv-dot{width:11px;height:11px;border-radius:50%}
  .cv-dot.red{background:#ff5f56}
  .cv-dot.yellow{background:#ffbd2e}
  .cv-dot.green{background:#27c93f}

  .cv-frame-title{
    font-family:var(--retro);
    font-size:7px;
    color:var(--lime);
    margin-left:.8rem;
    flex:1;
    text-align:center;
    letter-spacing:.5px;
  }

  .cv-iframe-wrap{
    position:relative;
    background:#fff;
    overflow:hidden;
    cursor:zoom-in;
  }
  .cv-iframe{
    width:100%;
    height:720px;
    border:none;
    background:#fff;
    display:block;
  }

  .cv-fallback{
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:3rem;
    color:#333;
    text-align:center;
  }

  .cv-tip{
    text-align:center;
    font-family:var(--body);
    font-size:.78rem;
    color:var(--muted);
    margin:0;
  }
  .cv-tip span{color:var(--lime)}

  /* Overlay zoom au hover */
  .cv-zoom-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.8rem;
    background:rgba(124,58,237,.85);
    color:var(--lime);
    font-family:var(--retro);
    font-size:10px;
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
    backdrop-filter:blur(2px);
    letter-spacing:1px;
  }

  .cv-iframe-wrap:hover .cv-zoom-overlay{
    opacity:1;
  }

  .cv-zoom-icon{
    font-size:3rem;
    animation:zoom-pulse 1.5s ease-in-out infinite;
  }

  @keyframes zoom-pulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.15)}
  }

  .cv-zoom-text{
    text-shadow:0 0 10px rgba(184,244,0,.5);
  }

  /* ── CARTE D'INFOS À DROITE ── */
  .cv-actions{
    position:sticky;
    top:5.5rem;
    width:100%;
    min-width:0;
  }

  .cv-info-card{
    width:100%;
    background:rgba(5,5,18,.97);
    border:2px solid var(--purple);
    padding:1.5rem;
    position:relative;
    box-shadow:0 0 40px rgba(124,58,237,.15);
  }
  .cv-info-card::before{
    content:'';
    position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--lime),var(--purple),var(--lime),transparent);
  }

  .cv-info-badge{
    display:inline-block;
    font-family:var(--retro);
    font-size:6px;
    padding:.3rem .6rem;
    background:rgba(184,244,0,.08);
    border:1px solid rgba(184,244,0,.3);
    color:var(--lime);
    margin-bottom:.8rem;
    letter-spacing:.5px;
  }

  .cv-info-title{
    font-family:var(--retro);
    font-size:10px;
    color:var(--lime);
    margin-bottom:1.2rem;
    text-shadow:0 0 12px var(--lime);
    letter-spacing:.05em;
    line-height:1.6;
    word-break:break-all;
  }

  .cv-features{
    list-style:none;
    padding:0;
    margin:0 0 1.5rem 0;
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .cv-features li{
    font-size:.82rem;
    color:#9494cf;
    display:flex;
    align-items:center;
    gap:.6rem;
    line-height:1.5;
  }
  .cv-check{
    color:var(--lime);
    font-weight:700;
    font-size:.95rem;
  }

  .cv-btns{
    display:flex;
    flex-direction:column;
    gap:.6rem;
    margin-bottom:1.5rem;
  }

  .cv-btn-main{
    font-family:var(--retro);
    font-size:8px;
    padding:.9rem 1rem;
    background:var(--lime);
    color:var(--dark);
    border:none;
    cursor:none;
    text-decoration:none;
    text-align:center;
    display:block;
    transition:all .15s;
    box-shadow:4px 4px 0 rgba(184,244,0,.25);
    letter-spacing:.5px;
  }
  .cv-btn-main:hover{
    transform:translate(-2px,-2px);
    box-shadow:6px 6px 0 rgba(184,244,0,.35);
  }

  .cv-btn-ghost{
    font-family:var(--retro);
    font-size:7.5px;
    padding:.8rem 1rem;
    background:transparent;
    color:var(--text);
    border:1px solid var(--border);
    cursor:none;
    text-decoration:none;
    text-align:center;
    display:block;
    transition:all .15s;
    letter-spacing:.5px;
  }
  .cv-btn-ghost:hover{
    border-color:var(--lime);
    color:var(--lime);
    background:rgba(184,244,0,.04);
  }

  .cv-quick-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.5rem;
    padding:1rem 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    margin-bottom:1.2rem;
  }
  .cqs-item{text-align:center}
  .cqs-v{
    font-family:var(--retro);
    font-size:1.2rem;
    color:var(--lime);
    text-shadow:0 0 12px var(--lime);
    line-height:1;
  }
  .cqs-l{
    font-family:var(--retro);
    font-size:5px;
    color:var(--muted);
    margin-top:.3rem;
    letter-spacing:.5px;
  }

  .cv-contact-mini{
    display:flex;
    flex-direction:column;
    gap:.4rem;
  }
  .cv-contact-link{
    font-size:.78rem;
    color:#9494cf;
    text-decoration:none;
    padding:.5rem .7rem;
    background:rgba(124,58,237,.05);
    border:1px solid rgba(124,58,237,.15);
    border-radius:3px;
    transition:all .2s;
    display:block;
  }
  .cv-contact-link:hover{
    border-color:var(--lime);
    color:var(--lime);
    background:rgba(184,244,0,.05);
  }

  /* ── RESPONSIVE CV ── */
  @media(max-width:1100px){
    .cv-showcase{
      grid-template-columns:1.2fr 1fr;
      gap:1.5rem;
    }
    .cv-iframe{height:600px}
    .cv-info-card{padding:1.2rem}
  }

  @media(max-width:768px){
    .cv-showcase{
      grid-template-columns:1fr;
      gap:2rem;
    }
    .cv-actions{position:static}
    .cv-iframe{height:500px}
  }

  @media(max-width:600px){
    .cv-iframe{height:400px}
    .cv-quick-stats{grid-template-columns:repeat(3,1fr);gap:.3rem}
    .cqs-v{font-size:.95rem}
  }

  /* ══════════════════════════════════════════════
     MODAL ZOOM CV PLEIN ÉCRAN
    ══════════════════════════════════════════════ */
  .cv-modal{
    position:fixed;
    inset:0;
    background:rgba(7,7,15,.95);
    backdrop-filter:blur(10px);
    z-index:9998;
    display:none;
    align-items:center;
    justify-content:center;
    padding:2rem;
    opacity:0;
    transition:opacity .3s ease;
  }

  .cv-modal,
  .cv-modal-content,
  .cv-modal-header,
  .cv-modal-btn,
  .cv-modal-close {
    cursor: none !important;
  }

  .cv-modal.active{
    display:flex;
    opacity:1;
  }

  .cv-modal-content{
    width:100%;
    max-width:1100px;
    height:95vh;
    background:#1a1a2e;
    border:2px solid var(--purple);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 30px 100px rgba(124,58,237,.5),0 0 0 1px rgba(184,244,0,.2);
    display:flex;
    flex-direction:column;
    transform:scale(.9);
    transition:transform .3s ease;
  }

  .cv-modal.active .cv-modal-content{
    transform:scale(1);
  }

  .cv-modal-header{
    background:linear-gradient(180deg,#1f1f3a,#0d0d1f);
    padding:1rem 1.5rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
  }

  .cv-modal-title{
    font-family:var(--retro);
    font-size:9px;
    color:var(--lime);
    letter-spacing:.5px;
    text-shadow:0 0 10px var(--lime);
  }

  .cv-modal-actions{
    display:flex;
    gap:.6rem;
    align-items:center;
  }

  .cv-modal-btn{
    font-family:var(--retro);
    font-size:7px;
    padding:.6rem .9rem;
    background:rgba(184,244,0,.08);
    border:1px solid rgba(184,244,0,.3);
    color:var(--lime);
    text-decoration:none;
    border-radius:4px;
    transition:all .2s;
    cursor:none;
    letter-spacing:.5px;
  }

  .cv-modal-btn:hover{
    background:var(--lime);
    color:var(--dark);
    border-color:var(--lime);
    box-shadow:0 0 15px rgba(184,244,0,.4);
  }

  .cv-modal-close{
    width:34px;
    height:34px;
    background:rgba(236,72,153,.15);
    border:1px solid rgba(236,72,153,.4);
    color:var(--pink);
    font-size:1rem;
    font-weight:700;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:none;
    transition:all .2s;
  }

  .cv-modal-close:hover{
    background:var(--pink);
    color:#fff;
    transform:rotate(90deg);
    box-shadow:0 0 20px rgba(236,72,153,.5);
  }

  .cv-modal-iframe{
    flex:1;
    width:100%;
    border:none;
    background:#fff;
  }

  /* Responsive modal */
  @media(max-width:768px){
    .cv-modal{padding:.5rem}
    .cv-modal-content{height:98vh}
    .cv-modal-header{padding:.7rem 1rem;flex-wrap:wrap;gap:.5rem}
    .cv-modal-title{font-size:7px}
    .cv-modal-btn{font-size:6px;padding:.5rem .7rem}
    .cv-zoom-icon{font-size:2rem}
    .cv-zoom-text{font-size:8px}
  }

  /* Bloquer le scroll du body quand modal ouvert */
  body.modal-open{
    overflow:hidden;
  }

  /* ═══════════════════════════════════════════════
    RESPONSIVE GLOBAL
    ═══════════════════════════════════════════════ */
  @media(max-width:900px){
    .nav-mail{display:none}
  }

  @media(max-width:768px){
    #hero .s-inner{grid-template-columns:1fr}
    .hero-right{display:none}
    .skill-universe{grid-template-columns:repeat(2,1fr)}
    .lang-grid{grid-template-columns:repeat(2,1fr)}
    .nav-links{display:none}
    .titem{grid-template-columns:120px 16px 1fr}
    .titem::before{left:128px}
  }

  @media(max-width:760px){
    .more-projects{flex-direction:column;gap:1rem;padding:1.5rem 1rem}
    .more-projects-text{font-size:.85rem}
    .more-projects-line{width:80%;max-width:200px}
  }

  @media(max-width:600px){
    .sticky-cv{padding:.7rem 1rem;font-size:.75rem;bottom:1rem;right:1rem}
    .sticky-cv-text{display:none}
    .sticky-cv-icon{font-size:1.3rem}
  }