/* =========================================================================
   CV interactif — Stanislas Guilleray
   ========================================================================= */
:root{
  --accent:#0f6e7e;
  --accent2:#16a2b8;
  --glow:rgba(22,162,184,.45);
  --bg:#0a0f1a;
  --bg2:#0e1626;
  --card:#121c2e;
  --card2:#16233a;
  --ink:#e8eef6;
  --muted:#9fb0c5;
  --line:rgba(255,255,255,.08);
  --radius:16px;
  --shadow:0 10px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
body::before{ /* halo coloré réagissant au thème */
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60vw 60vw at 78% -8%, var(--glow), transparent 60%),
    radial-gradient(50vw 50vw at -8% 12%, var(--glow), transparent 55%),
    linear-gradient(180deg,var(--bg2),var(--bg) 60%);
  opacity:.85; transition:background .8s ease;
}
body::after{ /* grille discrète */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%);opacity:.5;
}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.accentword{color:var(--accent2)}

/* ---------------- Barre de navigation / switcher ---------------- */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(10,15,26,.66);
  border-bottom:1px solid var(--line);
  transition:background .3s;
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 22px;max-width:1080px;margin:0 auto;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.4px;display:flex;align-items:center;gap:10px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent2);box-shadow:0 0 14px var(--accent2)}
.switcher{display:flex;gap:6px;background:rgba(255,255,255,.05);padding:5px;border-radius:999px;border:1px solid var(--line);flex-wrap:wrap}
.seg{
  border:0;cursor:pointer;color:var(--muted);background:transparent;
  padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:7px;transition:.25s;white-space:nowrap;
}
.seg .ic{font-size:13px}
.seg:hover{color:var(--ink)}
.seg.active{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 18px var(--glow)}
.btn-pdf{
  border:1px solid var(--accent2);background:transparent;color:var(--ink);
  padding:8px 16px;border-radius:999px;font-weight:700;cursor:pointer;font-size:13px;
  display:flex;align-items:center;gap:8px;transition:.25s;
}
.btn-pdf:hover{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;box-shadow:0 6px 20px var(--glow)}

/* ---------------- Hero ---------------- */
.hero{position:relative;padding:64px 0 30px}
.hero-grid{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center}
.avatar{
  width:190px;height:190px;border-radius:24px;object-fit:cover;object-position:50% 22%;
  border:1px solid var(--line);box-shadow:var(--shadow);
  outline:3px solid transparent;outline-offset:6px;
  animation:floaty 6s ease-in-out infinite;
}
.avatar-ring{position:relative}
.avatar-ring::before{
  content:"";position:absolute;inset:-10px;border-radius:32px;z-index:-1;
  background:conic-gradient(from 0deg,var(--accent),var(--accent2),var(--accent));
  filter:blur(14px);opacity:.55;animation:spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{50%{transform:translateY(-8px)}}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.04;letter-spacing:-.5px;font-weight:800}
.hero .subtitle{margin-top:8px;font-size:clamp(15px,2.2vw,20px);color:var(--accent2);font-weight:700;min-height:1.4em;transition:color .4s}
.hero .tagline{margin-top:6px;color:var(--muted)}
.hero-cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.chip-cta{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:13px;color:var(--ink);text-decoration:none;transition:.2s}
.chip-cta:hover{border-color:var(--accent2);transform:translateY(-2px)}

/* bandeau objectif (admission) */
.objective{
  margin-top:26px;padding:16px 18px;border-radius:var(--radius);
  border:1px solid var(--line);background:linear-gradient(135deg,rgba(255,255,255,.04),transparent);
  display:flex;gap:14px;align-items:flex-start;position:relative;overflow:hidden;
}
.objective::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--accent),var(--accent2))}
.objective .badge{flex:0 0 auto;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));padding:5px 11px;border-radius:8px;box-shadow:0 6px 16px var(--glow)}
.objective b{color:var(--ink)}
.objective small{color:var(--muted)}

/* ---------------- Sections ---------------- */
section.block{padding:40px 0;border-top:1px solid var(--line);margin-top:8px}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.sec-head h2{font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-.3px}
.sec-head .num{font-family:ui-monospace,monospace;color:var(--accent2);font-weight:700;font-size:14px;opacity:.8}
.sec-head .rule{flex:1;height:1px;background:var(--line)}

.lead{font-size:17px;color:#cdd9e8;max-width:760px}
.motivation{margin-top:14px;color:var(--muted);max-width:820px;font-style:italic;border-left:2px solid var(--accent);padding-left:16px}

/* ---------------- Reveal on scroll ---------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}

/* ---------------- Compétences ---------------- */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.skillcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 8px;transition:.3s}
.skillcard:hover{transform:translateY(-4px);border-color:var(--accent2);box-shadow:var(--shadow)}
.skillcard h3{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--accent2);margin-bottom:12px}
.bar{margin-bottom:11px}
.bar .lab{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;color:#d6e1ee}
.bar .track{height:7px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.bar .fill{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1.1s cubic-bezier(.2,.7,.2,1)}

/* ---------------- Expérience (timeline) ---------------- */
.timeline{position:relative;margin-left:8px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--accent),transparent)}
.tl-item{position:relative;padding-left:34px;margin-bottom:22px}
.tl-item::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--accent2);box-shadow:0 0 0 4px rgba(0,0,0,.2)}
.expcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;cursor:pointer;transition:transform .3s,box-shadow .3s,border-color .3s}
.expcard:hover{transform:scale(1.015);border-color:var(--accent2);box-shadow:var(--shadow)}
.expcard .row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.expcard .role{font-weight:800;font-size:17px}
.expcard .org{color:var(--accent2);font-weight:700}
.expcard .date{color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap}
.expcard .loc{color:var(--muted);font-size:13px;font-style:italic;margin:2px 0 8px}
.expcard .short{color:#cdd9e8}
.bullets{list-style:none;margin-top:10px;max-height:0;overflow:hidden;transition:max-height .5s ease,margin .4s,opacity .4s;opacity:0}
.expcard:hover .bullets,.expcard.open .bullets{max-height:560px;opacity:1;margin-top:12px}
.bullets li{position:relative;padding-left:18px;margin-bottom:5px;color:#c7d3e2;font-size:14px}
.bullets li::before{content:"▹";position:absolute;left:0;color:var(--accent2)}
.techrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tag{font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#cfdaea}
.more-hint{margin-top:10px;font-size:12px;color:var(--accent2);font-weight:700;opacity:.9}

/* ---------------- Projets ---------------- */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.projcard{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;cursor:pointer;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
  min-height:160px;display:flex;flex-direction:column;
}
.projcard::after{content:"";position:absolute;inset:0;background:radial-gradient(120px 120px at var(--mx,50%) var(--my,0%),var(--glow),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none}
.projcard:hover{transform:translateY(-6px) scale(1.03);border-color:var(--accent2);box-shadow:var(--shadow);z-index:2}
.projcard:hover::after{opacity:.5}
.projcard .pic{font-size:30px;margin-bottom:8px}
.projcard .pt{font-weight:800;font-size:16px;line-height:1.25}
.projcard .ps{color:var(--muted);font-size:13.5px;margin-top:6px;flex:1}
.projcard .pf{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.projcard .pf .tag{font-size:10px}
.projcard .play{position:absolute;top:14px;right:14px;font-size:10px;font-weight:800;letter-spacing:.5px;padding:3px 8px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.projcard .open-ic{margin-top:10px;font-size:12px;color:var(--accent2);font-weight:700;opacity:0;transform:translateX(-6px);transition:.3s}
.projcard:hover .open-ic{opacity:1;transform:none}

/* ---------------- Formation ---------------- */
.edu-item{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-bottom:1px dashed var(--line)}
.edu-item .d{color:var(--accent2);font-weight:700;font-size:14px}
.edu-item .t{font-weight:700}
.edu-item .s{color:var(--muted);font-size:14px}
.edu-item .hl{display:inline-block;margin-top:5px;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));padding:3px 10px;border-radius:7px}

/* ---------------- Langues + intérêts ---------------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.langbar{margin-bottom:14px}
.langbar .lab{display:flex;justify-content:space-between;font-size:14px;margin-bottom:5px}
.langbar .lab small{color:var(--muted)}
.langbar .track{height:8px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.langbar .fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:6px;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.interests{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.interest{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;transition:.25s}
.interest:hover{border-color:var(--accent2);transform:translateY(-2px)}
.interest .e{font-size:20px}

/* ---------------- Footer ---------------- */
.foot{padding:40px 0 60px;border-top:1px solid var(--line);text-align:center;color:var(--muted)}
.foot a{color:var(--accent2);text-decoration:none;font-weight:600}
.foot .socials{display:flex;gap:14px;justify-content:center;margin:14px 0}

/* ---------------- Modal ---------------- */
.modal-back{position:fixed;inset:0;z-index:100;background:rgba(4,8,15,.72);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.modal-back.show{opacity:1;pointer-events:auto}
.modal{
  position:fixed;z-index:101;left:50%;top:50%;width:min(960px,94vw);max-height:92vh;overflow:auto;
  transform:translate(-50%,-50%) scale(.86);opacity:0;pointer-events:none;
  background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);
  border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.6);transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s;
}
.modal.show{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.modal-hd{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;padding:20px 24px;background:linear-gradient(180deg,var(--card2),rgba(22,35,58,.6));border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.modal-hd .mic{font-size:30px}
.modal-hd h3{font-size:22px;font-weight:800;flex:1}
.modal-close{border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);width:38px;height:38px;border-radius:50%;font-size:18px;cursor:pointer;transition:.2s}
.modal-close:hover{background:var(--accent);border-color:transparent;transform:rotate(90deg)}
.modal-bd{padding:22px 24px 30px}
.modal-bd p.long{font-size:15.5px;color:#d6e1ee}
.modal-bd h4{margin:20px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--accent2)}
.feat{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.feat li{position:relative;padding-left:24px;color:#cdd9e8;font-size:14px}
.feat li::before{content:"✓";position:absolute;left:0;color:var(--accent2);font-weight:800}
.modal-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.modal-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.modal-links a{display:inline-flex;gap:7px;align-items:center;padding:8px 14px;border-radius:10px;border:1px solid var(--accent2);text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;transition:.2s}
.modal-links a:hover{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:6px}
.gallery img{width:100%;border-radius:10px;border:1px solid var(--line);cursor:zoom-in}
.media-empty{margin-top:6px;padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:13.5px;text-align:center}
.video-embed{position:relative;padding-bottom:56.25%;height:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-top:6px}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------------- Démo 2048 ---------------- */
.demo2048{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:12px}
.g2048-top{display:flex;justify-content:space-between;width:330px;max-width:100%;align-items:center}
.g2048-score{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 14px;font-weight:800}
.g2048-score small{display:block;font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.5px}
.g2048-btn{border:1px solid var(--accent2);background:transparent;color:var(--ink);padding:8px 14px;border-radius:10px;font-weight:700;cursor:pointer;transition:.2s}
.g2048-btn:hover{background:var(--accent2);color:#04121a}
.g2048{position:relative;width:330px;max-width:100%;aspect-ratio:1;background:#0c1424;border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;touch-action:none;user-select:none}
.g2048 .cell{background:rgba(255,255,255,.04);border-radius:9px}
.g2048 .tile{position:absolute;display:flex;align-items:center;justify-content:center;font-weight:800;border-radius:9px;font-size:26px;transition:left .12s ease,top .12s ease,transform .12s ease;color:#1a1206}
.g2048-hint{font-size:12px;color:var(--muted)}
.g2048-over{position:absolute;inset:10px;border-radius:10px;background:rgba(8,12,20,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:22px;opacity:0;pointer-events:none;transition:.3s}
.g2048-over.show{opacity:1;pointer-events:auto}

/* ---------------- Responsive ---------------- */
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;text-align:center;justify-items:center}
  .two-col{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
  .interests{grid-template-columns:1fr}
  .edu-item{grid-template-columns:1fr}
  .objective{text-align:left}
}

/* =========================================================================
   IMPRESSION / PDF — on masque l'interface et on imprime #print-cv
   ========================================================================= */
#print-cv{display:none}
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff !important;color:#1f2933}
  body::before,body::after{display:none}
  .topbar,.hero,section.block,.foot,.modal-back,.modal{display:none !important}
  #print-cv{display:block}
}

/* ---- Mise en page du CV imprimé (sobre, 1 page, couleur = thème) ---- */
#print-cv{
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
  font-size:9.3px;line-height:1.32;color:#1f2933;
  font-family:"Segoe UI",Calibri,Arial,sans-serif;
}
#print-cv .pc-page{width:210mm;min-height:296mm;display:grid;grid-template-columns:64mm 1fr;background:#fff;overflow:hidden}
#print-cv .pc-side{background:#0f2a33;color:#e8f1f2;padding:8mm 7mm 7mm}
#print-cv .pc-photo{display:block;width:28mm;height:33mm;object-fit:cover;object-position:50% 18%;border-radius:8px;margin:0 auto 7px;border:2px solid var(--accent2);box-shadow:0 6px 18px rgba(0,0,0,.35)}
#print-cv .pc-name{font-size:23px;font-weight:700;line-height:1.1;text-align:center}
#print-cv .pc-name span{color:var(--accent2)}
#print-cv .pc-role{margin-top:5px;font-size:11px;color:#a9c4c9;font-weight:600;text-align:center}
#print-cv .pc-side h3:first-of-type{margin-top:6px}
#print-cv .pc-side h3{font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--accent2);margin:9px 0 6px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.15)}
#print-cv .pc-contact div{margin-bottom:4px;padding-left:11px;position:relative}
#print-cv .pc-contact div::before{content:"";position:absolute;left:0;top:5px;width:5px;height:5px;background:var(--accent2);border-radius:1px}
#print-cv .pc-contact a{color:#e8f1f2;text-decoration:none}
#print-cv .pc-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
#print-cv .pc-chip{background:#163b45;color:#dff0f2;border:1px solid rgba(255,255,255,.18);padding:1.5px 6px;border-radius:10px;font-size:8.3px}
#print-cv .pc-lbl{font-size:9px;font-weight:700;color:#cfe6ea;text-transform:uppercase;letter-spacing:.5px;margin:6px 0 3px}
#print-cv .pc-side ul{list-style:none}
#print-cv .pc-side li{margin-bottom:3px;padding-left:11px;position:relative;color:#a9c4c9}
#print-cv .pc-side li::before{content:"▸";position:absolute;left:0;color:var(--accent2)}
#print-cv .pc-side li b{color:#fff}
#print-cv .pc-main{padding:9mm 10mm 7mm}
#print-cv .pc-main h3{font-size:11.5px;text-transform:uppercase;letter-spacing:1.1px;color:#0a4a55;margin:0 0 5px;padding-bottom:3px;border-bottom:2px solid var(--accent)}
#print-cv .pc-sec{margin-bottom:7px}
#print-cv .pc-intro{color:#5b6b7b;text-align:justify}
#print-cv .pc-intro b{color:#1f2933}
#print-cv .pc-job{margin-bottom:6px}
#print-cv .pc-job .h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
#print-cv .pc-job .ti{font-weight:700;font-size:10.5px}
#print-cv .pc-job .og{color:var(--accent);font-weight:600}
#print-cv .pc-job .dt{color:#5b6b7b;font-size:9px;font-weight:600;white-space:nowrap}
#print-cv .pc-job .lo{color:#5b6b7b;font-size:9px;font-style:italic;margin-bottom:2px}
#print-cv .pc-job ul{list-style:none;margin-top:2px}
#print-cv .pc-job li{position:relative;padding-left:11px;margin-bottom:1.6px;color:#34434f}
#print-cv .pc-job li::before{content:"–";position:absolute;left:0;color:var(--accent);font-weight:700}
#print-cv .pc-proj{margin-bottom:3.5px}
#print-cv .pc-proj b{color:#1f2933}
#print-cv .pc-proj .te{color:#5b6b7b;font-style:italic}
#print-cv .pc-grp{font-weight:700;color:#0a4a55;font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;margin:5px 0 3px}
#print-cv .pc-edu{margin-bottom:5px}
#print-cv .pc-edu .h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
#print-cv .pc-edu .ti{font-weight:700}
#print-cv .pc-edu .dt{color:#5b6b7b;font-size:9.5px;font-weight:600;white-space:nowrap}
#print-cv .pc-edu .su{color:#5b6b7b}
#print-cv .pc-edu .su b{color:#0a4a55}