#sparks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hero { display: grid; grid-template-columns: auto fit-content(560px); justify-content: center; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: 5.5rem 0 2rem; min-height: 100svh; }
.portrait { position: relative; justify-self: center; height: min(600px, calc(100svh - 9rem)); aspect-ratio: 4/5; max-width: 100%; }
.portrait::before { content: ""; position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent); }
.portrait .frame { position: relative; width: 100%; height: 100%; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, #15110d, #15110d 14px, #1b1510 14px, #1b1510 28px); }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; }
.portrait .ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.intro h1 { font: 800 clamp(2.4rem, 5.5vw, 4.2rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; margin: .9rem 0 1.3rem; }
.intro h1 em { font-style: normal; background: linear-gradient(100deg, var(--accent3), var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro p { color: var(--muted); font-size: 1.08rem; margin-bottom: 1rem; max-width: 600px; }
.intro p b { color: var(--fg); font-weight: 600; }
.intro .actions { margin-top: 1.6rem; }
.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 3rem; }
.skill { padding: 1.6rem; position: relative; overflow: hidden; }
.skill::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--accent), var(--accent3)); }
.skill h3 { margin-bottom: .3rem; } .skill p { color: var(--muted); }
.meter { height: 4px; border-radius: 4px; background: var(--line); margin-top: 1rem; overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--v, 80%); background: linear-gradient(90deg, var(--accent3), var(--accent2)); transform-origin: left; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2,.8,.2,1) .3s; }
.in .meter i { transform: none; }
.mosaic { display: flex; flex-direction: column; gap: 10px; }
.mrow { display: flex; gap: 10px; }
.shot { position: relative; overflow: hidden; border-radius: 14px; cursor: zoom-in; border: 1px solid var(--line); background: #15110d; min-width: 0; margin: 0; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .5s, transform .7s, filter .5s; }
.shot img.ok { opacity: 1; }
.shot:hover img { transform: scale(1.06); filter: brightness(1.08); }
.shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); pointer-events: none; }
.shot.ph { display: grid; place-items: center; color: var(--muted); cursor: default; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; background: repeating-linear-gradient(135deg, #15110d, #15110d 14px, #1b1510 14px, #1b1510 28px); }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; padding-top: 4.2rem; min-height: 0; gap: 1.2rem; } .portrait { height: min(34svh, 280px); } .mosaic, .mrow { gap: 6px; } }
.cta { text-align: center; padding-bottom: 3rem; }
.cta h2 { font: 800 clamp(2rem, 6vw, 4rem)/1.05 var(--display); text-transform: uppercase; margin: 1rem 0 2rem; }
.cta .actions { justify-content: center; }

/* compétences : Atelier / Bureau / Atouts */
.cgroup { margin-bottom: 2.6rem; }
.gtitle { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; font: 700 .78rem system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.gtitle::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.cgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.sk { padding: 1.3rem 1.4rem; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .4rem; min-height: 150px; }
.sk.w3 { grid-column: span 3; } .sk.w4 { grid-column: span 4; } .sk.w5 { grid-column: span 5; } .sk.w7 { grid-column: span 7; } .sk.w8 { grid-column: span 8; }
.sk { min-height: 128px; } .sk.lg { min-height: 160px; } .sk.xl { min-height: 200px; }
.sk.xl h4 { font-size: 1.5rem; } .sk.xl p { font-size: 1rem; } .sk.lg h4 { font-size: 1.25rem; }
.sk::before { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; top: -110px; border-radius: 50%; background: radial-gradient(closest-side, var(--accent), transparent); opacity: .22; transition: opacity .4s, transform .5s; }
.sk:hover::before { opacity: .5; transform: scale(1.3); }
.sk:hover { border-color: var(--accent); }
.sk h4 { position: relative; font: 800 1.15rem var(--display); text-transform: uppercase; letter-spacing: .01em; }
.sk p { position: relative; color: var(--muted); font-size: .92rem; flex: 1; }
.lvl { position: relative; display: flex; align-items: center; gap: .6rem; font-size: .76rem; font-weight: 650; color: var(--accent2); white-space: nowrap; }
.pips { display: inline-flex; gap: 4px; } .pips i { width: 16px; height: 5px; border-radius: 3px; background: var(--line); } .pips i.on { background: linear-gradient(90deg, var(--accent3), var(--accent2)); }
@media (max-width: 800px) { .sk[class*="w"] { grid-column: span 6; } }
@media (max-width: 520px) { .sk[class*="w"] { grid-column: span 12; } }

@media (max-width: 800px) {
  .hero { text-align: left; }
  .sk { min-height: 0; padding: 1.15rem 1.2rem; }
  .sk.xl h4 { font-size: 1.3rem; } .sk.xl p { font-size: .95rem; }
  .gtitle { margin-bottom: .8rem; }
  .cta h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .cta .actions .btn { width: 100%; max-width: 320px; justify-content: center; }
}

@media (max-width: 800px) {
  .hero { justify-items: center; text-align: center; }
  .intro { display: grid; justify-items: center; }
  .intro p { margin-inline: auto; }
  .intro .actions { justify-content: center; }
  .sec-head { text-align: center; justify-items: center; }
  .sec-head p { text-align: center; }
  .gtitle { justify-content: center; }
  .gtitle::before { content: ""; flex: 1; height: 1px; background: linear-gradient(270deg, var(--line), transparent); }
  .sk { text-align: center; align-items: center; }
  .sk .lvl { justify-content: center; flex-wrap: wrap; }
}

.portrait .cap { position: absolute; left: 0; right: 0; bottom: -1.9rem; text-align: center; font-size: .78rem; color: var(--muted); letter-spacing: .04em; }
@media (max-width: 800px) { .portrait { margin-bottom: 1.8rem; } .portrait .cap { bottom: -1.6rem; } }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 4.2rem; min-height: 0; gap: 1.2rem; }
  .portrait { height: min(34svh, 280px); margin-bottom: 1.8rem; }
  .intro { display: grid; justify-items: center; }
  .intro .actions { justify-content: center; }
}