:root{
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#64748b;
  --surface:#f8fafc;
  --line:#e5e7eb;
  --brand:#3b82f6;
  --radius:16px;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --ring:#bfdbfe;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
html, body{ overflow-x: hidden }

/* Lien Aller au contenu */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ left:12px; top:12px; width:auto; height:auto; padding:8px 12px; background:var(--brand); color:white; border-radius:8px; z-index:100 }
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background: color-mix(in oklab, #ffffff 86%, transparent);
  border-bottom:1px solid var(--line);
}
.header-cache{ transform:none }
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand)}
nav{display:flex;align-items:center;gap:12px}
nav ul{display:flex;gap:16px;list-style:none;padding:0;margin:0}
nav a{padding:10px 12px;border-radius:12px;transition:background .2s ease, color .2s ease}
nav a:hover{background:var(--surface)}
nav a.active{background:var(--brand);color:white}
nav a .ico{ display:none; margin-right:8px }
nav a .label{ display:inline }
body{ background: var(--bg); color: var(--text); padding-top:64px }

/* Hero */
.hero{position:relative; overflow:hidden; padding:64px 0;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fafbff)}
.hero .title{font-size:clamp(28px,4vw,48px);line-height:1.1;margin:0 0 12px;font-weight:700;letter-spacing:-0.02em}
.hero .subtitle{font-size:clamp(16px,1.6vw,20px);color:var(--muted);margin:0 0 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:600;transition:transform .06s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{box-shadow:var(--shadow)}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}

.hero .wrap{display:grid;gap:24px;align-items:center;grid-template-columns:1.2fr .8fr}
.hero-photo{display:flex;justify-content:center}
.pfp{width:min(280px,60vw);aspect-ratio:1/1;border-radius:50%;object-fit:cover;border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(135deg,#f3f4f6,#e5e7eb)}
@media(max-width:900px){ .hero .wrap{grid-template-columns:1fr} .hero-photo{order:-1} }

.fade-in{opacity:0;animation:fadeUp .6s ease-out forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.decor-grid{position:absolute; inset:-20%; z-index:0; pointer-events:none; opacity:.8;
  background:
    linear-gradient(transparent 0 0),
    repeating-linear-gradient(0deg, rgba(2,6,23,0.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(2,6,23,0.04) 0 1px, transparent 1px 40px);
  animation:gridPan 22s linear infinite;
  mask-image: radial-gradient(closest-side, #000 70%, transparent);
}
@keyframes gridPan{from{transform:translate3d(0,0,0)}to{transform:translate3d(-80px,-60px,0)}}

.blob{position:absolute; right:5%; top:20%; width:420px; height:420px; z-index:0; filter:blur(32px); opacity:.35; pointer-events:none;
  background: radial-gradient(40% 40% at 50% 50%, #93c5fd, transparent 60%),
              radial-gradient(40% 40% at 65% 35%, #c4b5fd, transparent 60%),
              radial-gradient(35% 35% at 35% 65%, #a7f3d0, transparent 60%);
  animation:float 9s ease-in-out infinite alternate;
  border-radius:50%;
}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-14px)}}

.hero-photo{position:relative; z-index:1}
.orbit{position:relative; display:inline-block}
.ring{position:absolute; inset:-14px; border:1px dashed var(--ring); border-radius:999px; animation:spin 16s linear infinite;}
.orbit .dot{position:absolute; width:8px; height:8px; background:var(--brand); border-radius:50%; top:50%; left:100%; transform:translate(-50%,-50%)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Burger (mobile) */
.burger{ display:none; position:relative; width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:#fff; align-items:center; justify-content:center; cursor:pointer }
.burger .bar{ position:absolute; width:20px; height:2px; background:#0b1220; transition:transform .2s ease, opacity .2s ease }
.burger .bar:nth-child(1){ transform: translateY(-6px) }
.burger .bar:nth-child(2){ transform: translateY(0) }
.burger .bar:nth-child(3){ transform: translateY(6px) }
.menu-ouvert .burger .bar:nth-child(1){ transform: rotate(45deg) }
.menu-ouvert .burger .bar:nth-child(2){ opacity:0 }
.menu-ouvert .burger .bar:nth-child(3){ transform: rotate(-45deg) }

@media (max-width: 820px){
  header .nav{ gap:10px }
  .burger{ display:inline-flex }
  #navMenu{ position:absolute; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 10px 30px rgba(2,6,23,.08); display:none; z-index:55 }
  .menu-ouvert #navMenu{ display:block }
  #navMenu ul{ display:flex; flex-direction:column; gap:4px; padding:10px 20px; margin:0; list-style:none }
  #navMenu a{ display:block; padding:12px 8px; border-radius:10px }
  #navMenu a:hover{ background:var(--surface) }
}

/* Sections + séparateurs */
section{padding:56px 0; position:relative; content-visibility:auto; contain-intrinsic-size: 800px}
section::before, section::after{content:""; position:absolute; left:0; right:0; height:16px; pointer-events:none; z-index:2}
section::before{ top:0; background:linear-gradient(180deg, rgba(2,6,23,.06), transparent); }
section::after{  bottom:0; background:linear-gradient(0deg, rgba(2,6,23,.06), transparent); }
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.section-head h2{font-size:24px;margin:0}
.section-head p{margin:0;color:var(--muted)}

/* Sections pleine hauteur (mobile + desktop) */
.section-full{ min-height: calc(100svh - 64px); display:grid; align-content:center }

/* ===== Fond animé UNIQUEMENT pour #projets ===== */
#projets{position:relative; overflow:hidden;}
#projets .container{position:relative; z-index:2;}


.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px}
/* Layout fixe 3 colonnes (desktop) pour voir tous les projets d'un coup */
#projets .projects-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px }
@media(max-width: 980px){ #projets .projects-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media(max-width: 620px){ #projets .projects-grid{ grid-template-columns: 1fr } }
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.project{cursor:pointer; position:relative; overflow:hidden; opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease}
.project::before{ /* bordure néon façon IA */
  content:""; position:absolute; inset:-1px; padding:1px; border-radius:16px;
  background: conic-gradient(from 140deg, #60a5fa, #a78bfa, #34d399, #60a5fa);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition:opacity .25s linear; pointer-events:none;
}
.project:hover::before, .project.open::before{ opacity:.6; animation:spin 8s linear infinite }
.project.in{ opacity:1; transform:none }
.project.open{ outline:2px solid color-mix(in oklab, var(--brand) 45%, #fff); outline-offset:2px; box-shadow:0 24px 60px rgba(2,6,23,.22) }
.thumb{aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb::after{content:""; position:absolute; inset:-10%; background: radial-gradient(circle at 30% 30%, rgba(147,197,253,0.25), transparent 50%), radial-gradient(circle at 60% 60%, rgba(196,181,253,0.25), transparent 60%); filter: blur(18px); opacity:.5; animation:float 6s ease-in-out infinite alternate}
/* Balayage IA sur la vignette */
.thumb::before{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 15%, rgba(96,165,250,0.2) 30%, rgba(167,139,250,0.2) 50%, transparent 70%); transform: translateX(-120%); animation: scan 4.5s ease-in-out infinite }
@keyframes scan{ 50%{ transform: translateX(20%) } 100%{ transform: translateX(120%) } }
.tag{display:inline-block; padding:6px 10px; border-radius:999px; background:#f1f5f9; color:#0b1220; border:1px solid var(--line); font-weight:600; font-size:12px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tech-icons{ display:flex; gap:8px; align-items:center; margin:6px 0 8px }
.tech-icons img{ width:18px; height:18px; filter: grayscale(100%); opacity:.9 }
.insight{ color: var(--muted); font-style: italic; margin:4px 0 0 }
.open-indicator{position:absolute; right:12px; top:12px; font-size:12px; background:#0b1220; color:#fff; padding:4px 8px; border-radius:999px}

/* Aligner les boutons (CTA) en bas de chaque carte pour un rendu homogène */
#projets .project{ display:flex; flex-direction:column }
#projets .project .content{ display:flex; flex-direction:column; flex:1; gap:10px }
#projets .project .cta{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap }

/* Détails (accordion + terminal) */
.project .details{ height:0; overflow:hidden; transition: height .35s ease; }
.project.open .details{ will-change: height }
.project .term{ margin-top:14px }
.project .term-screen{ min-height:140px }

/* CV + Histoire */
.cv-wrap{display:grid; gap:16px}
.book{display:grid; gap:12px; grid-template-columns:1fr; align-items:stretch;}
.page{background:linear-gradient(180deg,#fff,#f9fafb); border:1px solid var(--line); border-radius:var(--radius); padding:20px; position:relative; box-shadow:0 1px 0 #fff inset, var(--shadow);}
.page::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: linear-gradient(90deg, rgba(0,0,0,0.03), transparent 30%, transparent 70%, rgba(0,0,0,0.03)); mix-blend-mode:multiply; opacity:.35}
.page h3{margin-top:0}
@media(min-width:900px){ .cv-wrap{grid-template-columns:1.2fr .8fr} .book{grid-template-columns:1fr 1fr} }

/* Contact */
form{display:grid;gap:12px}
input,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit}
textarea{min-height:140px;resize:vertical}
.hint{color:var(--muted);font-size:12px}

/* Contact layout */
.contact-grid{display:grid;gap:16px;grid-template-columns:1.2fr .8fr;align-items:start}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr} }

/* Chips suggestions */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chips-wrap{margin-top:8px}
.chip{--b:var(--brand); padding:8px 12px; border-radius:999px; border:1px solid color-mix(in oklab, var(--b) 28%, var(--line)); background:linear-gradient(135deg, color-mix(in oklab, var(--b) 8%, #fff), #fff 60%); font-weight:600; cursor:pointer}
.chip:hover{box-shadow:var(--shadow)}

/* Contact form card */
.form-card{ background:linear-gradient(180deg,#fff,#fafbff); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px }
.form-card .hint{ margin-top:2px }

/* Inputs focus ring harmonisé (bleu→violet→vert) */
input:focus-visible, textarea:focus-visible{
  outline:none;
  border-color: color-mix(in oklab, var(--brand) 40%, var(--line));
  box-shadow:
    0 0 0 3px rgba(59,130,246,0.15),
    0 0 0 6px rgba(167,139,250,0.10),
    0 0 0 9px rgba(52,211,153,0.08);
}


/* Footer */
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:14px}
footer .footer-grid{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
footer .socials{ display:flex; gap:12px }
footer .socials a{ display:inline-block; padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:#0b1220; background:#fff; font-weight:600 }
footer .socials a:hover{ box-shadow:var(--shadow) }

/* Toast (messages brefs) */
.toast{ position:fixed; top:78px; left:50%; transform:translateX(-50%) translateY(-10px); background:#0b1220; color:#fff; padding:10px 14px; border-radius:10px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease; z-index:80; }
.toast.in{ opacity:.95; transform:translateX(-50%) translateY(0) }

/* Focus */
:focus-visible{outline:2px solid color-mix(in oklab, var(--brand) 60%, #fff); outline-offset:2px; border-radius:10px}

/* Compétences — Icon tiles */
#competences{ position:relative }
.skill-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 14px }
.skill-tabs .tab{ padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; font-weight:600; cursor:pointer }
.skill-tabs .tab[aria-pressed="true"], .skill-tabs .tab.active{ background: var(--brand); color:#fff; border-color: var(--brand) }
.skill-groups{ display:grid; gap:16px; grid-template-columns: repeat(3, 1fr) }
@media(max-width: 980px){ .skill-groups{ grid-template-columns: repeat(2, 1fr) } }
@media(max-width: 620px){ .skill-groups{ grid-template-columns: 1fr } }
.skill-group{ padding:14px }
.skill-group.hidden{ display:none }
.skill-groups.single{ grid-template-columns: 1fr; max-width: 980px; margin: 0 auto }
.skills-tiles{ display:grid; gap:16px; grid-template-columns: repeat(6, 160px); justify-content:center; align-content:start; align-items:start; overflow:visible }
@media(max-width: 1200px){ .skills-tiles{ grid-template-columns: repeat(5, 160px) } }
@media(max-width: 1000px){ .skills-tiles{ grid-template-columns: repeat(4, 160px) } }
@media(max-width: 800px){ .skills-tiles{ grid-template-columns: repeat(3, 160px) } }
@media(max-width: 620px){
  .skills-tiles{ grid-template-columns: repeat(3, 110px); gap:12px }
  .tile{ width:110px; height:110px }
  .tile img{ width:22px; height:22px }
  .tile span{ font-size:12px }
}
.tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:160px; height:160px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#fff,#fafbff); box-shadow:var(--shadow); transition: transform .25s ease, box-shadow .3s ease, opacity .4s ease; opacity:0; transform: translateY(10px) scale(.98) }

.tile.in{ opacity:1; transform:none }
.tile:hover{ transform: translateY(-4px) scale(1.03); box-shadow:0 20px 50px rgba(2,6,23,.14) }
.tile.swirl-in{ animation: swirlIn .6s ease-out both }
.tile.swirl-out{ animation: swirlOut .5s ease-in both }
@keyframes swirlIn{ from{ opacity:0; transform: translateY(-8px) scale(.85) rotate(12deg) } to{ opacity:1; transform:none } }
@keyframes swirlOut{ from{ opacity:1; transform:none } to{ opacity:0; transform: translateY(8px) scale(.85) rotate(-12deg) } }
.tile img{ width:36px; height:36px; filter: grayscale(100%); opacity:.95 }
.tile span{ font-weight:700; font-size:13px }
.sr-only{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* Canvas layer (hero) */
.fx-canvas{position:absolute; inset:0; z-index:1; pointer-events:none}
/* Mobile overrides placed AFTER base rules to win cascade */
@media(max-width: 620px){
  #competences .skills-tiles{ grid-template-columns: repeat(3, 110px); gap:12px }
  #competences .skills-tiles .tile{ width:110px; height:110px }
  #competences .skills-tiles .tile img{ width:22px; height:22px }
  #competences .skills-tiles .tile span{ font-size:12px }
}
/* Échelons supplémentaires pour très petits écrans */
@media(max-width: 540px){
  #competences .skills-tiles{ grid-template-columns: repeat(3, 105px); gap:10px }
  #competences .skills-tiles .tile{ width:105px; height:105px }
  #competences .skills-tiles .tile img{ width:20px; height:20px }
}
@media(max-width: 420px){
  #competences .skills-tiles{ grid-template-columns: repeat(3, 96px); gap:10px }
  #competences .skills-tiles .tile{ width:96px; height:96px }
  #competences .skills-tiles .tile img{ width:18px; height:18px }
  #competences .skills-tiles .tile span{ font-size:11px }
}
@media(max-width: 360px){
  #competences .skills-tiles{ grid-template-columns: repeat(3, 88px); gap:8px }
  #competences .skills-tiles .tile{ width:88px; height:88px }
  #competences .skills-tiles .tile img{ width:16px; height:16px }
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }

/* === Spotlight & focus de section Projets (version CSS comme le snippet) === */
#projets{ --x: 50%; --y: 50%; --spot-size: 280px; position:relative; overflow:hidden }
#projets .container{ position:relative; z-index:2 }
#projets::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(
      circle at var(--x) var(--y),
      rgba(255,255,255,0) calc(var(--spot-size) - 60px),
      rgba(2,6,23,0.22) var(--spot-size),
      rgba(2,6,23,0.45) calc(var(--spot-size) + 120px)
    );
  opacity:0; transition:opacity .25s ease;
}
#projets:has(.project:hover)::before{ opacity:1 }
/* Motif grille + particules façon IA */
#projets::after{
  content:""; position:absolute; inset:-10%; z-index:0; pointer-events:none; opacity:.45;
  background:
    repeating-linear-gradient(0deg, rgba(2,6,23,0.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(2,6,23,0.04) 0 1px, transparent 1px 40px),
    radial-gradient(600px 300px at 10% 20%, rgba(147,197,253,0.18), transparent 60%),
    radial-gradient(400px 260px at 90% 65%, rgba(196,181,253,0.16), transparent 60%),
    radial-gradient(500px 280px at 30% 80%, rgba(167,243,208,0.14), transparent 60%);
  filter: blur(0.4px);
}
/* suppression faisceau scan */
#projets .grid{ position:relative; z-index:2 }
#projets .project{ transition: transform .2s ease, filter .2s ease, box-shadow .2s ease }
#projets .grid:has(.project:hover) .project:not(:hover){ filter: blur(1px) brightness(.88) saturate(.9); transform: scale(.985) }
#projets .grid:has(.project:hover) .project:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 50px rgba(2,6,23,.18); outline: 2px solid color-mix(in oklab, var(--brand) 40%, #fff); outline-offset: 2px }
#projets:has(.project:hover) .thumb::after{ opacity:0; animation-play-state: paused }
@media (prefers-reduced-motion: reduce){ #projets .project{ transition:none } #projets .thumb::after{ animation:none } }

/* Modal projets */
.modal-overlay{ position:fixed; inset:0; background:color-mix(in oklab, #0b1220 56%, transparent); backdrop-filter: blur(8px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:60 }
.modal-overlay.open{ opacity:1; pointer-events:auto }
.modal-dialog{ width:min(960px, 92vw); max-height:88vh; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); position:relative; transform:translateY(6px); transition:transform .25s ease }
.modal-overlay.open .modal-dialog{ transform:none }
.modal-close{ position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:20px; line-height:1; cursor:pointer }
.modal-header{ padding:16px 16px 0 16px }
.modal-cover{ aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--line) }
.modal-cover img{ width:100%; height:100%; object-fit:cover; display:block }
.modal-body{ display:grid; gap:16px; grid-template-columns:1fr; padding:16px }
@media(min-width:900px){ .modal-body{ grid-template-columns: 1fr 1fr } }
.modal-body.stack{ grid-template-columns: 1fr !important }
.modal-title{ margin:0 0 8px }
.modal-desc p{ margin:0 0 10px; color: var(--muted) }
.modal-sep{ height:1px; background: linear-gradient(90deg, rgba(2,6,23,0.06), transparent 20%, transparent 80%, rgba(2,6,23,0.06)); border-radius:1px; margin:6px 0 8px }

.scroll-progress{ position:fixed; top:76px; right:14px; bottom:14px; width:6px; z-index:70; pointer-events:none }
.scroll-progress .track{ position:absolute; inset:0; border-radius:999px; background:#0f172a0d; border:1px solid var(--line) }
.scroll-progress .bar{ position:absolute; left:0; bottom:0; width:100%; height:0%; border-radius:999px; background:linear-gradient(180deg, #60a5fa, #a78bfa, #34d399) }

body.modal-open{ overflow:hidden }


/* ====== CSS AJOUTÉ pour le nouveau visuel CV ====== */
.cv-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
@media(min-width:900px){ .cv-wrap{grid-template-columns:1.2fr .8fr} }

.term{border:1px solid #0f172a20;border-radius:12px;overflow:hidden;background:#0b1220;color:#cbd5e1}
.term-bar{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-bottom:1px solid #0f172a33;background:linear-gradient(180deg,#0f172a,#0b1220);position:relative}
.win-dot{width:10px;height:10px;border-radius:50%}
.win-dot.red{background:#ef4444}
.win-dot.yellow{background:#f59e0b}
.win-dot.green{background:#22c55e}
.term-title{position:absolute;left:0;right:0;text-align:center;font-size:12px;color:#94a3b8}
.term-screen{margin:0;padding:18px;font-family:"JetBrains Mono",ui-monospace,monospace;min-height:220px;white-space:pre-wrap}
.term-screen .g{color:#60a5fa}
@keyframes blinkC{50%{opacity:0}}
.blink::after{content:"";display:inline-block;width:8px;height:1.05em;background:#60a5fa;vertical-align:-2px;margin-left:2px;animation:blinkC 1s steps(1) infinite}
.cv-caption{color:var(--muted);margin:10px 0 12px;text-align:center}
.cv-open{display:flex;align-items:center;justify-content:center;width:100%}

.cv-title{margin:0 0 10px;font-size:18px}
.cv-dl{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#f8fafc;font-weight:600;text-decoration:none;transition:box-shadow .2s ease, transform .06s ease}
.cv-dl:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.cv-dl-ic{font-size:18px}
.cv-meta{list-style:none;padding:0;margin:14px 0;color:var(--muted)}
.cv-meta li{margin:6px 0}
.cv-badges{display:flex;gap:8px;flex-wrap:wrap}
    .badge{
      --b:#3b82f6;
      border:1px solid color-mix(in oklab, var(--b) 40%, var(--line));
      color:color-mix(in oklab, var(--b) 50%, #0b1220);
      background:linear-gradient(135deg, color-mix(in oklab, var(--b) 18%, #fff), #fff 60%, color-mix(in oklab, var(--b) 8%, #fff));
      padding:6px 10px;border-radius:999px;font-size:12.5px;font-weight:700;
    }

/* (cursor follower retiré — remplacé par kursor.js via CDN) */

/* (Section Histoire supprimée) */

/* Timeline (CV) */
.timeline{ list-style:none; padding-left:12px; margin:8px 0 }
.tl-item{ position:relative; padding-left:14px; margin:10px 0; border-left:2px solid var(--line) }
.tl-item::before{ content:""; position:absolute; left:-6px; top:8px; width:10px; height:10px; border-radius:50%; background:var(--brand) }
#competences{ padding-top: 40px; padding-bottom: 32px }