/* ══════════════════ RESPONSIVE ══════════════════ */
@media(max-width:960px){
  .home-hero{grid-template-columns:1fr}
  .stage-lay{grid-template-columns:1fr}
  .parcours-grid{grid-template-columns:1fr}
  .cv-layout{grid-template-columns:1fr}.cv-sidebar{position:static}
  .ep-banner{grid-template-columns:1fr}
  .stage-docs-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  h1.hname{font-size:3rem;letter-spacing:-2px}
  .comp-pdf-frame{height:520px}
  .terminal{display:none}
}

/* ══════════════ VEILLE TABS ══════════════ */
.vt-tab{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem 1rem;font-family:var(--mono);font-size:.68rem;
  font-weight:600;border-radius:var(--r);cursor:pointer;
  background:var(--bg2);border:1px solid var(--border);color:var(--muted);
  transition:.2s;
}
.vt-tab:hover{border-color:var(--border-hi);color:var(--white)}
.vt-tab.active{background:var(--glow2);border-color:var(--border-hi);color:var(--accent)}

/* topic pill buttons */
.vtopic-btn{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.32rem .85rem;font-family:var(--mono);font-size:.65rem;
  border-radius:999px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--border);color:var(--muted);
  transition:.2s;
}
.vtopic-btn:hover{border-color:var(--border-hi);color:var(--white)}
.vtopic-btn.active{background:linear-gradient(135deg,var(--accent3),var(--accent));border-color:var(--accent);color:#fff}

/* skeleton loader */
.vc-skeleton{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1.2rem;min-height:160px;
  position:relative;overflow:hidden;
}
.vc-skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(124,111,255,.06) 50%,transparent 100%);
  animation:shimmer 1.6s infinite;
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* auto article cards */
.vc-auto{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1.2rem;
  transition:all .2s;display:flex;flex-direction:column;gap:.5rem;
}
.vc-auto:hover{border-color:var(--border-hi);transform:translateY(-2px);box-shadow:var(--card-shadow)}
.vc-auto-src{font-family:var(--mono);font-size:.58rem;letter-spacing:1px;text-transform:uppercase}
.vc-auto-title{font-family:var(--display);font-size:.88rem;font-weight:800;color:var(--white);line-height:1.35}
.vc-auto-desc{font-size:.73rem;color:var(--text);line-height:1.65;flex:1}
.vc-auto-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.5rem;border-top:1px solid var(--border)}
.vc-auto-meta{font-family:var(--mono);font-size:.58rem;color:var(--muted)}
.vc-auto-link{font-family:var(--mono);font-size:.6rem;color:var(--accent);font-weight:700;display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .55rem;border:1px solid var(--border);border-radius:5px;transition:.15s}
.vc-auto-link:hover{background:var(--glow2);border-color:var(--border-hi)}


/* ══════════════ MODAL VEILLE ══════════════ */
.modal-ov{
  position:fixed;inset:0;z-index:2000;
  background:rgba(4,5,18,.75);backdrop-filter:blur(10px) saturate(1.4);
  display:flex;align-items:center;justify-content:center;padding:1.25rem;
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.modal-ov.open{opacity:1;pointer-events:all}
.modal-card{
  background:var(--bg2);border:1px solid var(--border-hi);
  border-radius:var(--r-lg);padding:0;max-width:540px;width:100%;
  max-height:88vh;overflow-y:auto;scrollbar-width:thin;
  transform:translateY(22px) scale(.96);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.modal-ov.open .modal-card{transform:translateY(0) scale(1)}
.modal-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent3),var(--accent),transparent);border-radius:var(--r-lg) var(--r-lg) 0 0}
.modal-head{padding:1.5rem 1.5rem 1rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.modal-close{width:30px;height:30px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:.85rem;flex-shrink:0;transition:.15s}
.modal-close:hover{border-color:var(--border-hi);color:var(--white)}
.modal-body{padding:0 1.5rem 1.5rem}
.modal-type{font-family:var(--mono);font-size:.6rem;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.55rem}
.modal-title{font-family:var(--display);font-size:1.25rem;font-weight:900;color:var(--white);line-height:1.2;margin-bottom:.5rem;letter-spacing:-.3px}
.modal-date{font-family:var(--mono);font-size:.62rem;color:var(--muted);margin-bottom:1rem}
.modal-desc{font-size:.84rem;color:var(--text);line-height:1.9;margin-bottom:1.2rem}
.modal-section-lbl{font-family:var(--mono);font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:.55rem}
.modal-links{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.modal-link-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:var(--r);font-family:var(--mono);font-size:.68rem;font-weight:700;cursor:pointer;transition:.18s;text-decoration:none}
.modal-link-ext{background:var(--glow2);border:1px solid var(--border-hi);color:var(--accent)}
.modal-link-ext:hover{background:var(--glow);transform:translateY(-1px)}
.modal-link-comp{background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.22);color:var(--green)}
.modal-link-comp:hover{background:rgba(52,211,153,.12);transform:translateY(-1px)}
.modal-comps{display:flex;flex-wrap:wrap;gap:.3rem}
.modal-comp-pill{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--mono);font-size:.62rem;font-weight:700;background:var(--glow2);border:1px solid var(--border-hi);color:var(--accent);border-radius:5px;padding:.18rem .55rem;cursor:pointer;transition:.15s}
.modal-comp-pill:hover{background:var(--glow);transform:translateY(-1px)}
/* rendre les .vc cliquables */
.vc{cursor:pointer}
.vc:hover{border-color:var(--border-hi);transform:translateY(-3px)}


/* ══ CUSTOM CURSOR ══ */
body{cursor:none}
a,button,[onclick]{cursor:none}
.cur-dot{position:fixed;width:7px;height:7px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:transform .08s,background .2s;mix-blend-mode:difference}
.cur-ring{position:fixed;width:32px;height:32px;border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:left .12s ease,top .12s ease,width .2s,height .2s,opacity .3s;opacity:.45}
.cur-dot.clicking{transform:translate(-50%,-50%) scale(.5)}
.cur-ring.hovering{width:48px;height:48px;opacity:.7;border-color:var(--accent)}
@media(pointer:coarse){.cur-dot,.cur-ring{display:none}body,a,button,[onclick]{cursor:auto}}

/* ══ SCROLL PROGRESS ══ */
.scroll-bar{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--accent3),var(--accent),var(--green));z-index:99997;transition:width .08s linear;border-radius:0 2px 2px 0}

/* ══ TOAST ══ */
.toast-wrap{position:fixed;bottom:1.75rem;left:50%;transform:translateX(-50%);z-index:9990;display:flex;flex-direction:column;gap:.4rem;align-items:center;pointer-events:none}
.toast{background:var(--bg3);border:1px solid var(--border-hi);color:var(--white);font-family:var(--mono);font-size:.7rem;padding:.55rem 1.25rem;border-radius:999px;box-shadow:0 8px 32px rgba(0,0,0,.5);opacity:0;transform:translateY(12px) scale(.95);transition:all .28s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.toast.show{opacity:1;transform:translateY(0) scale(1)}

/* ══ SCROLL REVEAL ══ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ══ 3D TILT on .pj ══ */
.pj{transform-style:preserve-3d;will-change:transform;transition:box-shadow .2s}
.pj:hover{box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px var(--border-hi)}
.pj-inner-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(124,111,255,.12) 0%,transparent 65%);opacity:0;transition:opacity .3s}
.pj:hover .pj-inner-shine{opacity:1}

/* ══ PAGE TRANSITION ══ */
@keyframes pgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.page.pg-anim{animation:pgIn .3s cubic-bezier(.4,0,.2,1) forwards}

/* ══ TYPING CURSOR ══ */
.typing-cursor{display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;vertical-align:middle;animation:blink .9s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ══ TIMELINE ══ */
.timeline{position:relative;padding-left:2.25rem}
.timeline::before{content:"";position:absolute;left:.3rem;top:6px;bottom:0;width:1px;background:linear-gradient(180deg,var(--accent) 0%,var(--accent2) 60%,transparent 100%)}
.tl-item{position:relative;margin-bottom:2rem}
.tl-item:last-child{margin-bottom:0}
.tl-dot{position:absolute;left:-2rem;top:.3rem;width:13px;height:13px;background:var(--bg);border:2px solid var(--accent);border-radius:50%;box-shadow:0 0 0 3px var(--glow2)}
.tl-dot.now{background:var(--accent);animation:tlPulse 2.2s infinite}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 3px var(--glow2)}50%{box-shadow:0 0 0 6px var(--glow)}}
.tl-period{font-family:var(--mono);font-size:.58rem;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:.3rem}
.tl-title{font-family:var(--display);font-size:.95rem;font-weight:800;color:var(--white);line-height:1.3;margin-bottom:.2rem}
.tl-sub{font-size:.74rem;color:var(--text);line-height:1.7;margin-bottom:.4rem}
.tl-chips{display:flex;flex-wrap:wrap;gap:.25rem}
.tl-chip{font-family:var(--mono);font-size:.55rem;background:var(--glow2);border:1px solid var(--border);color:var(--muted);padding:.1rem .45rem;border-radius:4px}

/* ══ DEVICONS in chips ══ */
.chip i.devicon{font-size:.9rem;vertical-align:middle;margin-right:.2rem}

/* ══ RADAR CHART ══ */
.radar-section{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;margin-top:1.5rem}
.radar-wrap{flex:0 0 260px;height:260px;position:relative}
.radar-legend{flex:1;min-width:180px;display:flex;flex-direction:column;gap:.55rem}
.radar-leg-item{display:flex;align-items:center;gap:.55rem;font-size:.76rem;color:var(--text)}
.radar-leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ══ STAT ITEMS ══ */
.live-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin-top:1.5rem}
.lstat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem;text-align:center}
.lstat-val{font-family:var(--display);font-size:1.6rem;font-weight:900;color:var(--accent)}
.lstat-lbl{font-family:var(--mono);font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:.2rem}


/* ══════════════════ RESPONSIVE MOBILE ══════════════════ */
@media (max-width: 768px) {
  /* Nav */
  .nav-badge { display: none }
  .tab-btn { padding: .42rem .7rem; font-size: .65rem }

  /* Home hero */
  .home-hero { padding: 3rem 1rem 2rem }
  h1.hname { font-size: clamp(2.8rem, 12vw, 4rem); letter-spacing: -2px }
  .counters { gap: 1.5rem }
  .ctr-val { font-size: 1.8rem }
  .hbtns { flex-direction: column }
  .hbtns .btn { width: 100%; justify-content: center }
  .stack-strip { gap: .3rem }
  .qnav-grid { grid-template-columns: 1fr 1fr }

  /* CV */
  .cv-layout { grid-template-columns: 1fr }
  .cv-sidebar { position: static }

  /* Parcours */
  .parcours-grid { grid-template-columns: 1fr }
  .ep-banner { grid-template-columns: 1fr; gap: 1rem }

  /* Projets */
  .proj-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }

  /* Stage */
  .stage-lay { grid-template-columns: 1fr }
  .stage-side { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem }
  .stage-docs-grid { grid-template-columns: 1fr }
  .timeline { padding-left: 1rem }

  /* Certifications */
  .certs-grid { grid-template-columns: 1fr }
  .cert { flex-direction: column; align-items: flex-start; gap: .5rem }

  /* Veille */
  .vc-grid, .veille-grid { grid-template-columns: 1fr }

  /* Contact */
  .c-links { flex-direction: column }
  .cl { width: 100% }

  /* Glossaire */
  .g-grid { grid-template-columns: 1fr }

  /* Comp */
  .comp-pdf-header { flex-direction: column; align-items: flex-start }
  .comp-pdf-frame { height: 450px }

  /* Page inner padding */
  .page-inner { padding: 2rem 1rem 3rem }

  /* Flip card */
  .flip-front, .flip-back { padding: 1.4rem }
  .schema-img-wrap { min-height: 180px }

  /* Modal */
  .modal-card { max-width: 95vw; margin: 1rem }

  /* Search palette */
  .sp-box { width: 95vw }

  /* Counters */
  .sb-section { grid-template-columns: 1fr }

  /* Footer */
  footer { flex-direction: column; text-align: center }
}

@media (max-width: 480px) {
  h1.hname { font-size: clamp(2.2rem, 10vw, 3rem); letter-spacing: -1px }
  .qnav-grid { grid-template-columns: 1fr }
  .proj-grid { grid-template-columns: 1fr 1fr }
  .stage-side { grid-template-columns: 1fr }
  .nav-right { gap: .35rem }
  .theme-toggle { width: 30px; height: 30px }
}


/* ══════════════════ PRINT / PDF ══════════════════ */
@media print {
  #lock, .topnav, .hbtns, .stack-strip, .qnav, footer,
  .flip-toggle, .doc-actions, .comp-pdf-header,
  .scroll-bar, .cur-dot, .cur-ring, .toast-wrap,
  .m-ov, .sp-ov, .theme-toggle, .nav-badge,
  .amb, body::before { display: none !important }

  html, body { height: auto !important; overflow: visible !important; background: #fff !important }
  #app { display: block !important; height: auto !important }
  .pages { overflow: visible !important }
  .page { display: none !important }
  .page#page-cv { display: block !important }
  .page-inner { padding: 1.5rem !important }

  /* CV layout print */
  .cv-layout { grid-template-columns: 200px 1fr !important }
  .cv-sidebar { position: static !important }
  .cv-sec, .cv-blk { box-shadow: none !important; border: 1px solid #ddd !important; background: #fff !important }
  .cv-name, .cv-st, .cv-et, h2 { color: #111 !important }
  .cv-age, .cv-bt, .cv-lr-n, .cv-es { color: #555 !important }
  .cv-lr-l, .cv-cr-b, .cv-tag { background: #f0f0f0 !important; color: #333 !important; border-color: #ccc !important }
  a { color: #333 !important; text-decoration: none !important }

  @page { margin: 1.2cm 1.5cm; size: A4 }
}


/* ── LOADER ── */
#loader{position:fixed;inset:0;z-index:99999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  transition:opacity .5s ease,transform .5s ease}
#loader.out{opacity:0;transform:scale(1.05);pointer-events:none}
.loader-ring{width:44px;height:44px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--accent);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-txt{font-family:var(--mono);font-size:.6rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase}

/* ── GLOSSAIRE FILTRES ── */
.g-filters{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.25rem}
.g-fb{font-family:var(--mono);font-size:.62rem;padding:.28rem .75rem;border-radius:5px;
  background:var(--bg2);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:.18s}
.g-fb:hover{border-color:var(--border-hi);color:var(--white)}
.g-fb.on{background:var(--glow2);border-color:var(--border-hi);color:var(--accent)}

/* ── CONTACT FORM ── */
.cform{display:flex;flex-direction:column;gap:.85rem;margin-top:1.5rem;max-width:520px}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.cform input,.cform textarea,.cform select{
  width:100%;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);padding:.7rem 1rem;color:var(--white);
  font-family:var(--sans);font-size:.84rem;outline:none;transition:.2s;
  resize:vertical}
.cform input:focus,.cform textarea:focus{border-color:var(--border-hi);box-shadow:0 0 0 3px var(--glow2)}
.cform input::placeholder,.cform textarea::placeholder{color:var(--muted)}
.cform textarea{min-height:110px}
.cform-lbl{font-family:var(--mono);font-size:.6rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.3rem}
.cform-field{display:flex;flex-direction:column}
.cform-submit{background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;
  border:none;border-radius:var(--r);padding:.85rem;font-size:.85rem;font-weight:700;
  font-family:var(--display);cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:.5rem}
.cform-submit:hover{transform:translateY(-2px);box-shadow:0 12px 32px var(--glow);filter:brightness(1.08)}
.cform-success{display:none;background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.2);
  border-radius:var(--r);padding:1rem 1.2rem;font-size:.82rem;color:var(--green);margin-top:.5rem}

/* ── PDF DOWNLOAD BTN ── */
.pdf-dl-btn{display:inline-flex;align-items:center;gap:.45rem;
  padding:.65rem 1.35rem;border-radius:var(--r);font-size:.8rem;font-weight:700;
  font-family:var(--display);cursor:pointer;border:none;white-space:nowrap;
  background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;
  box-shadow:0 4px 20px var(--glow);transition:all .2s}
.pdf-dl-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px var(--glow)}

@media(max-width:600px){.cform-row{grid-template-columns:1fr}}


/* ── PACS flip-front grid responsive ── */
@media (max-width: 768px) {
  .flip-front > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .stage-side[style*="position:static"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
}