/* ════════ POLICES AUTO-HÉBERGÉES (privacy : zéro appel à Google) ════════ */
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjgn7MsNo.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjjH7M.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jizBRFtNs2ka5fXjeivQ4LroWlx-6zsTjmbI.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jizBRFtNs2ka5fXjeivQ4LroWlx-6zUTjg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/8vIH7w4qzmVxm2NL9Hz_.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/8vIH7w4qzmVxm25L9Hz_.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/8vIH7w4qzmVxm2BL9A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/8vIH7w4qzmVxm2NL9Hz_.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/8vIH7w4qzmVxm25L9Hz_.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/8vIH7w4qzmVxm2BL9A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/8vIH7w4qzmVxm2NL9Hz_.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/8vIH7w4qzmVxm25L9Hz_.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/8vIH7w4qzmVxm2BL9A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ════════════════════════════════════════════════ */
/* TOKENS                                            */
/* ════════════════════════════════════════════════ */
:root {
  --bg: #05060d;
  --white: #ffffff;
  --w90: rgba(255,255,255,0.92);
  --w70: rgba(255,255,255,0.7);
  --w50: rgba(255,255,255,0.5);
  --w35: rgba(255,255,255,0.35);
  --w20: rgba(255,255,255,0.2);
  --w12: rgba(255,255,255,0.12);
  --w10: rgba(255,255,255,0.1);
  --line: rgba(255,255,255,0.08);
  --cyan: rgba(125,225,255,1);
  --violet: rgba(196,160,255,1);
  --pink: rgba(255,150,220,1);
  --display: 'Syne', sans-serif;
  --serif: 'Instrument Serif', serif;
  --body: 'Inter', sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }

/* ── Transitions fluides ENTRE PAGES (multi-pages) ──────────────────────────
   View Transitions API : fondu + léger glissé à chaque changement de page sur
   les navigateurs Chromium. Ailleurs (Firefox/Safari anciens) : navigation
   normale, aucun effet de bord. Coupé si l'utilisateur préfère moins d'animations. */
@view-transition { navigation: auto; }   /* fondu doux entre pages (Chromium) ; navigation normale ailleurs */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
body {
  background: #05060d;
  color: var(--white);
  font-family: var(--body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none;
  position: relative;
}
::selection { background: rgba(120,220,255,0.3); color: #fff; }

/* ════════════════════════════════════════════════ */
/* BACKGROUND STACK                                  */
/* ════════════════════════════════════════════════ */
.bg-space {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 18% -5%, rgba(40,30,80,0.9) 0%, transparent 55%),
    radial-gradient(ellipse 60% 55% at 88% 105%, rgba(52,18,68,0.8) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(12,16,44,0.65) 0%, #05060d 100%);
}

.light-field {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  filter: saturate(1.12);
}
.light-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  opacity: 0.85;
  will-change: transform;
}
.light-blob.l1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(120,200,255,0.85) 0%, rgba(120,200,255,0.4) 30%, transparent 70%);
  top: 8%; left: -8%;
  animation: lf1 20s infinite ease-in-out;
}
.light-blob.l2 {
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(200,160,255,0.8) 0%, rgba(200,160,255,0.35) 30%, transparent 70%);
  top: 25%; right: -12%;
  animation: lf2 25s infinite ease-in-out;
}
.light-blob.l3 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,150,220,0.75) 0%, rgba(255,150,220,0.35) 30%, transparent 70%);
  bottom: 8%; left: 22%;
  animation: lf3 22s infinite ease-in-out;
}
.light-blob.l4 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(150,170,255,0.72) 0%, rgba(150,170,255,0.32) 30%, transparent 70%);
  top: 60%; left: -5%;
  animation: lf4 28s infinite ease-in-out;
}
.light-blob.l5 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(180,180,255,0.75) 0%, rgba(180,180,255,0.35) 30%, transparent 70%);
  top: 18%; left: 38%;
  animation: lf5 24s infinite ease-in-out;
}
@keyframes lf1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30%,40%) scale(1.2); } 66% { transform: translate(50%,20%) scale(0.9); } }
@keyframes lf2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40%,-30%) scale(1.3); } }
@keyframes lf3 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-30%,-40%) scale(1.15); } 66% { transform: translate(20%,-20%) scale(0.85); } }
@keyframes lf4 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40%,-30%) scale(1.2); } }
@keyframes lf5 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30%,50%) scale(1.15); } }
/* Désynchronisation des halos pour un fond plus organique */
.light-blob.l1 { animation-delay: -3s; }
.light-blob.l2 { animation-delay: -9s; }
.light-blob.l3 { animation-delay: -5s; }
.light-blob.l4 { animation-delay: -14s; }
.light-blob.l5 { animation-delay: -7s; }

.aurora-canvas {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: screen;
  filter: blur(30px);
}

#particles {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 2; pointer-events: none;
  filter: blur(2.8px);
  opacity: 0.78;
}

.bg-grid {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.016) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%);
  opacity: 0.5;
}
.bg-vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 22%, rgba(0,0,5,0.6) 72%, rgba(0,0,5,0.95) 100%);
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: multiply;
}

/* layering */
#nav { z-index: 100; }
.cur, .cur-glass { z-index: 9999; }
.scroll-indicator, .side-rail { z-index: 50; }
.hero, .about, .parcours, .projects, .skills, .certs, .competences, .cv, .wip, .contact, footer, .marquee-wrap, .quote, .now, .section-divider { position: relative; z-index: 4; }

/* ════════════════════════════════════════════════ */
/* CURSOR                                            */
/* ════════════════════════════════════════════════ */
.cur {
  position: fixed;
  width: 5px; height: 5px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cur-glass {
  position: fixed;
  width: 220px; height: 220px;
  pointer-events: none;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150,200,255,0.07) 0%, rgba(200,160,255,0.035) 30%, transparent 60%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity .8s;
  mix-blend-mode: screen;
}
.cur-glass.show { opacity: 1; }

/* ════════════════════════════════════════════════ */
/* SCROLL PROGRESS + INDICATORS                      */
/* ════════════════════════════════════════════════ */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(120,220,255,0) 0%,
    rgba(120,220,255,1) 30%,
    rgba(200,160,255,1) 70%,
    rgba(255,150,220,0) 100%);
  width: 0;
  z-index: 200;
  box-shadow: 0 0 12px rgba(120,220,255,0.7);
}

.scroll-indicator {
  position: fixed; right: 1.85rem; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 1.2rem;
  opacity: 0; transition: opacity .6s;
}
.scroll-indicator.visible { opacity: 1; }
.scroll-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--w35);
  cursor: none;
  transition: all .35s var(--ease);
  position: relative;
}
.scroll-dot.active {
  background: var(--cyan);
  height: 18px;
  border-radius: 4px;
  box-shadow: 0 0 12px var(--cyan);
}
.scroll-dot span {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-size: .58rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--w50);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  white-space: nowrap;
}
.scroll-dot:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }

.side-rail {
  position: fixed; left: 1.85rem; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  opacity: 0; transition: opacity .6s;
}
.side-rail.visible { opacity: 1; }
.side-rail-line { width: 1px; height: 60px; background: linear-gradient(180deg, transparent, var(--w20), transparent); }
.side-rail-text {
  font-size: .55rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--w35);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.side-rail-dot {
  width: 5px; height: 5px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse 2.5s infinite;
}
@media (max-width: 1240px) { .side-rail, .scroll-indicator { display: none; } }

/* Shared by the hero title character reveal */
@keyframes rise { to { transform: translateY(0); } }

/* ════════════════════════════════════════════════ */
/* SVG defs holder                                   */
/* ════════════════════════════════════════════════ */
.svg-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

/* ════════════════════════════════════════════════ */
/* NAV — fluid, scroll-driven via --np               */
/* ════════════════════════════════════════════════ */
#nav {
  --np: 0;
  position: fixed;
  top: calc(1.2rem - var(--np) * 0.2rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 4rem), calc(1400px + (940px - 1400px) * var(--np)));
  padding:
    calc(1.3rem - var(--np) * 0.4rem)
    calc(2.2rem - var(--np) * 0.5rem);
  display: flex; justify-content: space-between; align-items: center;
  gap: calc(2rem - var(--np) * 0.5rem);
  background: rgba(255,255,255, calc(0.04 + var(--np) * 0.02));
  backdrop-filter: url(#glassDisplaceRound) blur(6px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255, calc(0.1 + var(--np) * 0.05));
  border-radius: 100px;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255, calc(0.18 + var(--np) * 0.12)),
    inset 0 -1.5px 1px rgba(255,255,255, calc(0.05 + var(--np) * 0.03)),
    inset 0 0 30px rgba(255,255,255, calc(var(--np) * 0.04)),
    0 calc(12px + var(--np) * 6px) calc(40px + var(--np) * 16px) rgba(0,0,0, calc(0.4 + var(--np) * 0.12));
}
.nav-logo {
  font-family: var(--display);
  font-size: calc(0.9rem - var(--np, 0) * 0.08rem);
  font-weight: 700;
  letter-spacing: calc(5px - var(--np, 0) * 1.5px);
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  display: flex; align-items: center; gap: .8rem;
  white-space: nowrap;
}
.nav-logo::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--cyan);
  animation: pulse 2.5s infinite ease-in-out;
  flex-shrink: 0;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.nav-right { display: flex; align-items: center; gap: calc(2rem - var(--np, 0) * 0.5rem); position: relative; }
.nav-right::before {
  content: '';
  position: absolute;
  left: -1rem; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 20px;
  background: linear-gradient(180deg, transparent, var(--w20), transparent);
  opacity: var(--np, 0);
}
.nav-time {
  font-size: calc(0.72rem - var(--np, 0) * 0.07rem);
  letter-spacing: calc(2px - var(--np, 0) * 0.5px);
  text-transform: uppercase;
  color: var(--w35);
  display: flex; align-items: center; gap: .5rem;
  white-space: nowrap;
}
.nav-time::before {
  content: '';
  width: 5px; height: 5px;
  background: #4caf73;
  border-radius: 50%;
  box-shadow: 0 0 6px #4caf73;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
/* Sous ~1150px : on masque l'horloge (décorative) pour que la nav agrandie garde une marge confortable */
@media (max-width: 1150px) { .nav-time, .nav-right::before { display: none; } }
.nav-links { list-style: none; display: flex; gap: calc(2.5rem - var(--np, 0) * 1rem); }
.nav-links a {
  font-size: calc(0.82rem - var(--np, 0) * 0.06rem);
  letter-spacing: calc(2.5px - var(--np, 0) * 0.5px);
  text-transform: uppercase;
  color: var(--w50);
  text-decoration: none;
  position: relative;
  transition: color .3s;
  white-space: nowrap;
}
.nav-links a::before {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 0; height: 1px;
  background: var(--cyan);
  transition: width .4s var(--ease);
  box-shadow: 0 0 4px var(--cyan);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::before { width: 100%; }
/* Page courante : libellé en dégradé (raccord avec la DA des titres) + soulignement dégradé */
.nav-links a.active {
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.nav-links a.active::before {
  width: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
  box-shadow: 0 0 6px rgba(123,45,255,0.45);
}

/* Mobile menu toggle — hidden on desktop, becomes a burger ≤860px */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; padding: 0;
  background: transparent; border: none; cursor: none;
}
.nav-toggle span {
  display: block; width: 20px; height: 1.5px; margin: 0 auto;
  background: var(--w70); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  /* Let the dropdown anchor to the whole nav, not the right cluster. */
  .nav-right { position: static; }
  #nav.open .nav-toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
  #nav.open .nav-toggle span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
  .nav-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: center; gap: 1.3rem;
    padding: 1.5rem 1.4rem;
    background: rgba(10,12,24,0.86);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--w12);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 1px 1px rgba(255,255,255,0.08);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  #nav.open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { font-size: .82rem; letter-spacing: 1.5px; }
}

/* ════════════════════════════════════════════════ */
/* GLASS SHINE — animated specular sweep             */
/* ════════════════════════════════════════════════ */
.glass-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse 100% 60% at 30% 0%, rgba(255,255,255,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 80% 100%, rgba(255,255,255,0.04) 0%, transparent 50%);
}
.glass-shine::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.07) 45%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.07) 55%,
    transparent 70%);
  transform: translateX(-100%);
  animation: shine 9s infinite ease-in-out;
}
/* Warped, drifting caustic light — refraction trapped inside the glass.
   Uses filter:url() (NOT backdrop-filter) so it renders in Chrome too. */
.glass-shine::after {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(38% 30% at 28% 24%, rgba(255,255,255,0.20) 0%, transparent 72%),
    radial-gradient(34% 26% at 76% 68%, rgba(150,210,255,0.16) 0%, transparent 72%),
    radial-gradient(30% 24% at 56% 46%, rgba(220,180,255,0.14) 0%, transparent 72%);
  filter: url(#liquidCaustic);
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: causticDrift 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes shine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}
@keyframes causticDrift {
  0%   { transform: translate(0%, 0%) scale(1); }
  50%  { transform: translate(5%, -4%) scale(1.1) rotate(2deg); }
  100% { transform: translate(-4%, 5%) scale(1.05) rotate(-2deg); }
}

/* ════════════════════════════════════════════════ */
/* HERO                                              */
/* ════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 8rem 4rem 4rem;
  position: relative;
  overflow: hidden;
}
.hero-orb {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 720px; height: 720px;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.hero-orb-inner {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 33%, rgba(255,255,255,0.22) 0%, transparent 28%),
    radial-gradient(circle at 32% 32%,
      rgba(185,222,255,0.38) 0%,
      rgba(120,180,255,0.24) 22%,
      rgba(200,160,255,0.17) 45%,
      rgba(120,80,200,0.08) 70%,
      transparent 100%);
  filter: blur(30px);
  animation: orbPulse 7s infinite ease-in-out;
}
.hero-orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(180,220,255,0.12);
}
.hero-orb-ring.r1 { inset: 25%; animation: orbSpin 26s infinite linear; }
.hero-orb-ring.r2 { inset: 15%; border-color: rgba(200,160,255,0.08); animation: orbSpin 36s infinite linear reverse; }
.hero-orb-ring.r3 { inset: 35%; border: 1px dashed rgba(255,150,220,0.1); animation: orbSpin 30s infinite linear; }
@keyframes orbPulse { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes orbSpin { to { transform: rotate(360deg); } }

/* texte de fond « RT » retiré sur demande
.hero-bg-text {
  position: absolute;
  bottom: -5rem; right: -3rem;
  font-family: var(--display);
  font-size: clamp(15rem, 36vw, 36rem);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.045);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  letter-spacing: -14px;
  z-index: 1;
  will-change: transform;
}
*/

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .58rem 1.3rem;
  font-size: .62rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--w70);
  background: rgba(255,255,255,0.05);
  backdrop-filter: url(#glassDisplaceRound) blur(5px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(5px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 100px;
  margin-bottom: 2.4rem;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.2),
    inset 0 -1.5px 1px rgba(255,255,255,0.05),
    0 4px 24px rgba(0,0,0,0.25);
  opacity: 0;
  animation: up .7s .15s forwards;
  position: relative;
  overflow: hidden;
}
.hero-tag .dot {
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(3.2rem, 10.5vw, 11.5rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -5px;
  color: var(--white);
  margin-bottom: 2.2rem;
  text-shadow: 0 0 80px rgba(150,200,255,0.18), 0 2px 30px rgba(0,0,0,0.4);
}
.hero-title .line {
  overflow: hidden;
  display: block;
  white-space: nowrap;
  /* Room pour ascendantes/descendantes du serif italique : sans ça, overflow:hidden
     (nécessaire à l'anim de montée des lettres) rognait le haut des capitales et le 'y'
     de « Tanguy »/« Le Guilly ». padding + marge négative ÉGALE = la boîte de clip
     s'agrandit SANS changer l'empilement serré (line-height:.9) ni la position des lignes. */
  padding: 0.32em 0 0.3em;
  margin: -0.32em 0 -0.3em;
}
.hero-title .char {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 1.05s var(--ease) forwards;
}
.hero-title .italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -3px;
  background: linear-gradient(110deg,
    rgba(190,225,255,1) 0%,
    rgba(200,165,255,1) 45%,
    rgba(255,160,220,1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Gradient applied per character so it survives the per-letter transform
   (background-clip:text breaks if a DESCENDANT is transformed; keeping the
   clip on the same element as the transform fixes it). */
.hero-title .italic .char {
  background: linear-gradient(110deg,
    rgba(190,225,255,1) 0%,
    rgba(200,165,255,1) 50%,
    rgba(255,160,220,1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* La zone peinte (background-clip:text) d'un inline-block = sa boîte (≈ line-height:.9),
     plus courte que le glyphe italique → bas des lettres et 'y' de « Guilly » sans couleur
     = « coupés ». padding agrandit la zone peinte ; marge négative ÉGALE annule l'impact
     layout (interlettrage serré -5px conservé). Reste dans le clip de .line (padding .32/.3em). */
  padding: 0.26em 0.1em 0.32em;
  margin: -0.26em -0.1em -0.32em;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-desc {
  max-width: 560px;
  margin: 0 auto 2.4rem;
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--w70);
  letter-spacing: 0.3px;
  opacity: 0;
  animation: up .8s .85s var(--ease) forwards;
}
.hero-desc strong { color: var(--white); font-weight: 400; }
.hero-desc em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06em;
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  opacity: 0;
  animation: up .8s 1.05s var(--ease) forwards;
}

.hero-badges {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin-top: 2.8rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: up .8s 1.25s var(--ease) forwards;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1.2rem;
  font-size: .6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--w50);
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplaceRound) blur(5px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(5px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 100px;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.18),
    inset 0 -1.5px 1px rgba(255,255,255,0.04),
    0 4px 20px rgba(0,0,0,0.2);
  transition: all .4s var(--ease);
  position: relative;
  overflow: hidden;
}
.hero-badge:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(120,220,255,0.3);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.25),
    0 10px 30px rgba(120,220,255,0.12);
}
.hero-badge .v { color: var(--white); font-family: var(--display); font-weight: 700; }
.hero-badge .ico {
  width: 10px; height: 10px;
  display: inline-block;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cyan);
  flex-shrink: 0;
}

.scroll-cue {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  opacity: 0;
  animation: fadeIn 1s 1.6s forwards;
  z-index: 2;
}
@media (max-height: 820px) { .scroll-cue { display: none; } }
.scroll-cue-text { font-size: .55rem; letter-spacing: 3px; text-transform: uppercase; color: var(--w35); }
.scroll-cue-line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--w35), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue-line::after {
  content: '';
  position: absolute;
  top: -20px; left: 0;
  width: 100%; height: 20px;
  background: linear-gradient(180deg, transparent, var(--cyan));
  animation: cueDrop 2s infinite ease-in-out;
}
@keyframes cueDrop { 0% { top: -20px; opacity: 0; } 50% { opacity: 1; } 100% { top: 40px; opacity: 0; } }
@keyframes fadeIn { to { opacity: 1; } }

/* ════════════════════════════════════════════════ */
/* BUTTONS                                           */
/* ════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 2.2rem;
  font-family: var(--body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .45s var(--ease);
  cursor: none;
  border: none;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}
.btn-solid { background: var(--white); color: var(--bg); }
.btn-solid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(120,220,255,0.6), rgba(200,160,255,0.5), transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s var(--ease);
}
.btn-solid:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(120,220,255,0.3);
}
.btn-solid:hover::before { transform: translateX(100%); }
.btn-glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: url(#glassDisplaceRound) blur(5px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(5px) saturate(175%) brightness(1.05);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.2),
    inset 0 -1.5px 1px rgba(255,255,255,0.05),
    0 4px 20px rgba(0,0,0,0.2);
}
.btn-glass:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(120,220,255,0.45);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.25),
    0 12px 40px rgba(120,220,255,0.18);
}
.btn svg { transition: transform .4s var(--ease); flex-shrink: 0; }

/* ════════════════════════════════════════════════ */
/* DIVIDER + MARQUEE                                 */
/* ════════════════════════════════════════════════ */
.section-divider {
  height: 80px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.section-divider::before {
  content: '';
  position: absolute;
  left: 4rem; right: 4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.section-divider-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
  position: relative; z-index: 1;
  animation: pulse 3s infinite ease-in-out;
}

.marquee-wrap {
  padding: 1.5rem 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  margin: 0 4rem;
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplaceRound) blur(5px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(5px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 100px;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.18),
    inset 0 -1.5px 1px rgba(255,255,255,0.04),
    0 10px 36px rgba(0,0,0,0.28);
}
.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 160px;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(90deg, rgba(4,4,12,0.92), transparent); border-radius: 100px 0 0 100px; }
.marquee-wrap::after { right: 0; background: linear-gradient(-90deg, rgba(4,4,12,0.92), transparent); border-radius: 0 100px 100px 0; }
.marquee-track { display: inline-flex; animation: slide 42s linear infinite; }
.marquee-item {
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--w35);
  padding: 0 2.5rem;
  display: inline-flex; align-items: center; gap: 2.5rem;
}
.marquee-item.bright {
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marquee-item .serif {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0;
  text-transform: lowercase;
  font-size: .85rem;
  color: var(--w35);
  background: none;
  -webkit-text-fill-color: var(--w35);
}
.marquee-item .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--cyan);
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ════════════════════════════════════════════════ */
/* SECTIONS                                          */
/* ════════════════════════════════════════════════ */
section { padding: 8.5rem clamp(1.5rem, 4vw, 4rem); position: relative; scroll-margin-top: 6rem; }
/* Perf : sections hors écran non rendues (visuel identique une fois visibles) */
.now, .about, .parcours, .quote, .competences, .projects, .skills, .certs, .cv, .contact {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

/* Decorative section index — kept subtle and BEHIND content so it never
   overlaps the right column. Hidden on smaller screens. */
.sec-num {
  position: absolute;
  top: 3rem; right: 4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.05);
  pointer-events: none;
  user-select: none;
  letter-spacing: -3px;
  z-index: -1;
  opacity: 0.6;
}
.sec-num span {
  display: inline-block;
  font-size: 0.3em;
  vertical-align: super;
  margin-left: 0.2em;
  color: var(--w35);
  -webkit-text-stroke: 0;
}
@media (max-width: 1280px) { .sec-num { display: none; } }
/* Multi-pages : sur la 1re section d'une sous-page, le grand numéro décoratif
   tomberait derrière la nav fixe (en haut à droite). On le descend pour qu'il
   reste lisible. Le hero de l'accueil est exclu (il n'a pas de .sec-num). */
main > section:first-of-type:not(.hero) .sec-num { top: 7rem; }

.sec-label {
  font-size: .58rem;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: var(--w50);
  margin-bottom: 1.8rem;
  display: flex; align-items: center; gap: .8rem;
}
.sec-label::before {
  content: '';
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}
.sec-title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.8vw, 4.4rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -2.5px;
  color: var(--white);
  text-shadow: 0 0 60px rgba(140,180,255,0.12);
}
.sec-title .italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(120deg, var(--cyan), var(--violet), var(--pink));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s infinite linear;
  letter-spacing: -1px;
}

/* ════════════════════════════════════════════════ */
/* NOW STATS                                         */
/* ════════════════════════════════════════════════ */
.now {
  padding: 7rem 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.now-intro {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .58rem;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: var(--w50);
  margin-bottom: .8rem;
}
.now-intro-line { width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); flex-shrink: 0; }
.now-card {
  padding: 2.2rem 1.8rem;
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplace) blur(6px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.35),
    inset 0 -2px 1px rgba(255,255,255,0.08),
    inset 2px 0 1px rgba(255,255,255,0.1),
    inset -2px 0 1px rgba(255,255,255,0.1),
    inset 0 0 60px rgba(255,255,255,0.03),
    0 30px 80px -10px rgba(0,0,0,0.4),
    0 8px 24px -4px rgba(0,0,0,0.3),
    0 0 40px -10px rgba(180,200,255,0.08);
  transition: transform .5s var(--ease), border-color .5s, background .5s, box-shadow .5s;
  position: relative;
  overflow: hidden;
}
.now-card:hover {
  transform: translateY(-6px);
  border-color: rgba(120,220,255,0.3);
  background: rgba(255,255,255,0.06);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.4),
    inset 0 -2px 1px rgba(255,255,255,0.1),
    inset 0 0 80px rgba(120,220,255,0.06),
    0 40px 100px -15px rgba(120,220,255,0.18),
    0 12px 30px -5px rgba(0,0,0,0.3);
}
.now-card .corner {
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  z-index: 3;
  border-radius: 2px;
}
.now-label {
  font-size: .56rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--w35);
  margin-bottom: 1rem;
  position: relative; z-index: 2;
}
.now-value {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--white);
  line-height: 1;
  position: relative; z-index: 2;
}
.now-value .italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.now-sub { font-size: .74rem; color: var(--w50); margin-top: .5rem; position: relative; z-index: 2; }

/* ════════════════════════════════════════════════ */
/* ABOUT                                             */
/* ════════════════════════════════════════════════ */
.about {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 6rem;
}
.about-body { font-size: 1rem; line-height: 1.88; color: var(--w70); margin-top: 2rem; }
.about-body strong { color: var(--white); font-weight: 400; }
.about-body em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06em;
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
}
.about-body p + p { margin-top: 1.1rem; }
.tools-label {
  margin-top: 2.6rem;
  font-size: .56rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--w35);
}
.tools {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
}
.tool {
  padding: 1rem 1.2rem;
  font-size: .72rem;
  letter-spacing: .5px;
  color: var(--w70);
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplace) blur(5px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(5px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.28),
    inset 0 -1.5px 1px rgba(255,255,255,0.06),
    0 6px 16px -2px rgba(0,0,0,0.2);
  transition: all .4s var(--ease);
  cursor: none;
  display: flex; align-items: center; gap: .65rem;
  position: relative;
  overflow: hidden;
}
.tool::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--w35);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all .3s;
  z-index: 2;
  position: relative;
}
.tool:hover {
  color: var(--white);
  border-color: rgba(120,220,255,0.4);
  transform: translateY(-3px);
  background: rgba(120,220,255,0.06);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.4),
    inset 0 0 30px rgba(120,220,255,0.1),
    0 12px 30px -4px rgba(120,220,255,0.2);
}
.tool:hover::before {
  background: var(--cyan);
  transform: scale(1.9);
  box-shadow: 0 0 12px var(--cyan);
}
.tool span { position: relative; z-index: 2; }

/* ════════════════════════════════════════════════ */
/* QUOTE                                             */
/* ════════════════════════════════════════════════ */
.quote {
  padding: 10rem 4rem;
  display: flex;
  justify-content: center;
}
.quote-inner {
  max-width: 900px;
  text-align: center;
  padding: 4.2rem 3.2rem;
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplace) blur(7px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(7px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.35),
    inset 0 -2px 1px rgba(255,255,255,0.08),
    inset 2px 0 1px rgba(255,255,255,0.1),
    inset -2px 0 1px rgba(255,255,255,0.1),
    inset 0 0 80px rgba(255,255,255,0.04),
    0 40px 100px -15px rgba(0,0,0,0.4),
    0 12px 30px -5px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
.quote-inner > * { position: relative; z-index: 2; }
.quote-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 4rem;
  color: var(--w35);
  line-height: 1;
  margin-bottom: 1.5rem;
}
.quote-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 2.6rem);
  line-height: 1.38;
  color: var(--w90);
  letter-spacing: -.3px;
}
.quote-text .accent {
  font-family: var(--display);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(120deg, var(--cyan), var(--violet), var(--pink));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s infinite linear;
}
.quote-meta {
  margin-top: 2.6rem;
  font-size: .58rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--w35);
}

/* ════════════════════════════════════════════════ */
/* PROJECTS                                          */
/* ════════════════════════════════════════════════ */
.proj-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: .6rem 1rem;
  margin-bottom: 4rem;
}
.proj-count {
  font-family: var(--display);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--w35);
  text-transform: uppercase;
  display: flex; align-items: center; gap: .6rem;
}
.proj-count::before { content: ''; width: 24px; height: 1px; background: var(--cyan); }

.proj-list { display: flex; flex-direction: column; gap: 1.1rem; }
.proj-row {
  display: flex;
  align-items: flex-start;
  gap: 1.8rem;
  padding: 2rem 2.2rem;
  background: rgba(255,255,255,0.035);
  backdrop-filter: url(#glassDisplace) blur(6px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.28),
    inset 0 -2px 1px rgba(255,255,255,0.06),
    inset 2px 0 1px rgba(255,255,255,0.08),
    inset -2px 0 1px rgba(255,255,255,0.08),
    inset 0 0 50px rgba(255,255,255,0.025),
    0 20px 50px -10px rgba(0,0,0,0.3),
    0 6px 16px -4px rgba(0,0,0,0.2);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s, background .5s, box-shadow .5s;
  cursor: none;
}
.proj-row:hover {
  transform: translateX(12px) translateY(-3px);
  border-color: rgba(120,220,255,0.3);
  background: rgba(255,255,255,0.06);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.38),
    inset 0 -2px 1px rgba(255,255,255,0.08),
    inset 0 0 80px rgba(120,220,255,0.06),
    0 30px 80px -12px rgba(120,220,255,0.15),
    0 10px 24px -4px rgba(0,0,0,0.3);
}
.proj-row > * { position: relative; z-index: 2; }
.proj-n {
  flex-shrink: 0;
  width: 40px;
  padding-top: .35rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--w35);
  transition: all .4s;
}
.proj-body { flex: 1; min-width: 0; }
.proj-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.proj-row:hover .proj-n {
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.proj-name {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.7px;
  color: var(--white);
  margin: 0;
  transition: transform .4s var(--ease);
}
.proj-row:hover .proj-name { transform: translateX(6px); }
.proj-desc { font-size: .82rem; color: var(--w50); line-height: 1.65; max-width: 560px; margin: .5rem 0 0; }
.proj-pills { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-start; margin-top: 1rem; }
.pill {
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--w50);
  padding: .28rem .7rem;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.02);
  border-radius: 100px;
  transition: all .3s;
}
.proj-row:hover .pill {
  color: var(--white);
  border-color: rgba(120,220,255,0.32);
  background: rgba(120,220,255,0.06);
}
.proj-row::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  border-radius: 3px;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .55s var(--ease);
  z-index: 3;
  box-shadow: 0 0 14px rgba(125,225,255,0.55);
}
.proj-row:hover::after { transform: scaleY(1); }

/* ════════════════════════════════════════════════ */
/* SKILLS                                            */
/* ════════════════════════════════════════════════ */
.skills-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 6rem;
}
.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.sk-card {
  padding: 2rem 1.8rem;
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplace) blur(6px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.3),
    inset 0 -2px 1px rgba(255,255,255,0.08),
    inset 2px 0 1px rgba(255,255,255,0.1),
    inset -2px 0 1px rgba(255,255,255,0.1),
    inset 0 0 50px rgba(255,255,255,0.03),
    0 24px 60px -10px rgba(0,0,0,0.35),
    0 6px 20px -4px rgba(0,0,0,0.25);
  transition: transform .5s var(--ease), border-color .5s, background .5s, box-shadow .5s;
  position: relative;
  overflow: hidden;
}
.sk-card:hover {
  transform: translateY(-4px);
  border-color: rgba(120,220,255,0.25);
  background: rgba(255,255,255,0.06);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.4),
    inset 0 -2px 1px rgba(255,255,255,0.1),
    inset 0 0 80px rgba(120,220,255,0.05),
    0 32px 80px -12px rgba(120,220,255,0.15),
    0 10px 24px -4px rgba(0,0,0,0.3);
}
.sk-card > * { position: relative; z-index: 2; }
.sk-group-label {
  font-family: var(--display);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.4rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: .6rem;
}
.sk-group-label::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan);
  flex-shrink: 0;
}
.sk-list { list-style: none; display: flex; flex-direction: column; gap: .85rem; }
.sk-list li {
  font-size: .82rem;
  color: var(--w50);
  display: flex; align-items: center; gap: .7rem;
  transition: color .3s, transform .3s var(--ease);
  cursor: none;
}
.sk-list li:hover { color: var(--white); transform: translateX(6px); }
.sk-list li::before {
  content: '';
  width: 3px; height: 3px;
  background: var(--w35);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all .3s;
}
.sk-list li:hover::before {
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  transform: scale(1.6);
}

/* ════════════════════════════════════════════════ */
/* CONTACT                                           */
/* ════════════════════════════════════════════════ */
.contact {
  padding: 11rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(120,220,255,0.08) 0%, rgba(200,160,255,0.04) 30%, transparent 60%);
  pointer-events: none;
  animation: orbPulse 8s infinite ease-in-out;
}
.contact-title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  font-weight: 800;
  letter-spacing: -3px;
  line-height: .95;
  color: var(--white);
  position: relative; z-index: 1;
  word-break: keep-all;
  text-shadow: 0 0 70px rgba(150,200,255,0.16);
}
.contact-title .italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -2px;
  background: linear-gradient(120deg, var(--cyan), var(--violet), var(--pink));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 8s infinite linear;
}
.contact-right {
  position: relative; z-index: 1;
  padding: 2.6rem;
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplace) blur(6px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.32),
    inset 0 -2px 1px rgba(255,255,255,0.08),
    inset 2px 0 1px rgba(255,255,255,0.1),
    inset -2px 0 1px rgba(255,255,255,0.1),
    inset 0 0 60px rgba(255,255,255,0.03),
    0 24px 70px -10px rgba(0,0,0,0.35),
    0 8px 20px -4px rgba(0,0,0,0.25);
  overflow: hidden;
}
.contact-right > * { position: relative; z-index: 2; }
.contact-sub {
  font-size: .92rem;
  color: var(--w70);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}
.contact-sub em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06em;
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
}
.contact-links { display: flex; flex-direction: column; gap: 1rem; }
.contact-link {
  font-family: var(--display);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--w70);
  text-decoration: none;
  display: flex; align-items: center; gap: 1rem;
  overflow-wrap: anywhere; /* URL longue (pseudo GitHub) : casse au lieu d'être rognée sur mobile */
  padding: .95rem 1.3rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  transition: all .35s var(--ease);
}
.contact-link .arrow {
  width: 24px; height: 1px;
  background: var(--w35);
  position: relative;
  transition: width .45s var(--ease), background .3s, box-shadow .3s;
  flex-shrink: 0;
}
.contact-link .arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 0; height: 0;
  border-left: 5px solid var(--w35);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transition: border-left-color .3s;
}
.contact-link:hover {
  color: var(--white);
  border-color: rgba(120,220,255,0.35);
  background: rgba(120,220,255,0.06);
  transform: translateX(5px);
}
.contact-link:hover .arrow {
  width: 42px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.contact-link:hover .arrow::after { border-left-color: var(--cyan); }

/* ════════════════════════════════════════════════ */
/* FOOTER                                            */
/* ════════════════════════════════════════════════ */
footer {
  margin: 0 4rem 1.5rem;
  padding: 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplaceRound) blur(6px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 100px;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.18),
    inset 0 -1.5px 1px rgba(255,255,255,0.04),
    0 12px 40px rgba(0,0,0,0.3);
}
.f-name {
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--w70);
}
.f-copy { font-size: .58rem; letter-spacing: 1.5px; color: var(--w35); text-transform: uppercase; text-align: center; }
.f-top {
  justify-self: end;
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--body);
  font-size: .6rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--w50); text-decoration: none;
  transition: color .3s;
}
.f-top:hover { color: var(--white); }
.f-top-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--w20);
  font-size: .72rem; line-height: 1;
  transition: all .35s var(--ease);
}
.f-top:hover .f-top-ico {
  border-color: var(--cyan);
  background: rgba(125,225,255,0.1);
  color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(125,225,255,0.3);
}

/* ════════════════════════════════════════════════ */
/* REVEAL — blur-in cinematic                        */
/* ════════════════════════════════════════════════ */
.r {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(10px);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease),
    filter 1s var(--ease);
}
.r.on { opacity: 1; transform: none; filter: blur(0); }

@keyframes up { to { opacity: 1; transform: translateY(0); } }

/* ════════════════════════════════════════════════ */
/* MOBILE                                            */
/* ════════════════════════════════════════════════ */
@media (max-width: 860px) {
  #nav { width: calc(100% - 2rem) !important; padding: .8rem 1.2rem; }
  .nav-time { display: none; }
  .hero { padding: 7rem 1.5rem 4rem; }
  .hero-orb { width: 420px; height: 420px; }
  .hero-title { letter-spacing: -3px; }
  section { padding: 5rem 1.5rem; }
  .quote { padding: 5rem 1.5rem; }
  .quote-inner { padding: 3rem 1.8rem; }
  .now { padding: 4rem 1.5rem; grid-template-columns: 1fr 1fr; }
  .about { grid-template-columns: 1fr; gap: 3rem; }
  .tools { grid-template-columns: repeat(2,1fr); }
  .skills-layout { grid-template-columns: 1fr; gap: 3rem; }
  .skills-grid { grid-template-columns: 1fr; }
  .proj-row { gap: 1rem; padding: 1.5rem 1.6rem; }
  .proj-n { width: 26px; padding-top: .25rem; font-size: 1rem; }
  .proj-name { font-size: 1.4rem; }
  .contact { grid-template-columns: 1fr; gap: 3rem; padding: 5rem 1.5rem; }
  .marquee-wrap { margin: 0 1.5rem; }
  footer { margin: 0 1.5rem 1.5rem; padding: 1.2rem 1.5rem; grid-template-columns: 1fr; gap: .7rem; text-align: center; justify-items: center; }
  .f-copy { text-align: center; }
  .f-top { justify-self: center; }
  .sec-num { font-size: 5rem; right: 1.5rem; top: 5rem; }
}

/* ════════════════════════════════════════════════ */
/* ACCESSIBILITY — skip link + keyboard focus        */
/* ════════════════════════════════════════════════ */
.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translateX(-50%) translateY(-150%);
  z-index: 1000;
  padding: .75rem 1.4rem;
  border-radius: 0 0 14px 14px;
  background: rgba(125,225,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(125,225,255,0.4);
  color: #fff;
  font-size: .66rem; letter-spacing: 1.5px; text-transform: uppercase;
  text-decoration: none;
  transition: transform .3s var(--ease);
}
.skip-link:focus { transform: translateX(-50%) translateY(0); outline: none; }

/* Visible focus ring for keyboard users (the custom cursor hides the pointer,
   so keyboard navigation must stay obvious). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.tool:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ════════════════════════════════════════════════ */
/* TIMELINE / PARCOURS                               */
/* ════════════════════════════════════════════════ */
.timeline { margin-top: 1rem; }
.tl-item {
  display: grid;
  grid-template-columns: 120px 24px 1fr;
  gap: 1.4rem;
}
.tl-when { text-align: right; padding-top: 1.7rem; }
.tl-year {
  font-family: var(--display);
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.5px;
  color: var(--white); line-height: 1;
}
.tl-when small {
  display: block; margin-top: .35rem;
  font-size: .6rem; letter-spacing: 2px; text-transform: uppercase; color: var(--w35);
}
.tl-rail { position: relative; display: flex; justify-content: center; }
.tl-rail::before {
  content: '';
  position: absolute; top: 1.7rem; bottom: -1.1rem; left: 50%;
  width: 1px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--w35), var(--w12));
}
.tl-item:last-child .tl-rail::before { display: none; }
.tl-node {
  position: relative; z-index: 1; margin-top: 1.7rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
  border: 2px solid var(--bg);
  flex-shrink: 0;
}
.tl-node.dim { background: var(--w35); box-shadow: none; }
.tl-card {
  padding: 1.5rem 1.7rem;
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplace) blur(6px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.25),
    inset 0 -1.5px 1px rgba(255,255,255,0.05),
    0 18px 50px -12px rgba(0,0,0,0.35);
  transition: transform .5s var(--ease), border-color .5s, background .5s;
  position: relative; overflow: hidden;
}
.tl-card:hover {
  transform: translateY(-3px);
  border-color: rgba(120,220,255,0.28);
  background: rgba(255,255,255,0.06);
}
.tl-card > * { position: relative; z-index: 2; }
.tl-title { font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.3px; color: var(--white); }
.tl-place { font-size: .76rem; color: var(--cyan); margin-top: .25rem; letter-spacing: .3px; }
.tl-desc { font-size: .82rem; color: var(--w50); line-height: 1.62; margin-top: .7rem; }
.tl-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }

/* ════════════════════════════════════════════════ */
/* PROJECT CARD — context tag (non-link, honest)     */
/* ════════════════════════════════════════════════ */
.proj-ctx {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .53rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--w50);
  padding: .25rem .65rem;
  border: 1px solid var(--w12);
  border-radius: 100px;
  margin-bottom: .8rem;
}
.proj-ctx::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 6px var(--cyan);
}
.proj-outcome {
  margin-top: .8rem;
  font-size: .76rem; line-height: 1.55;
  color: var(--w70);
  display: flex; align-items: flex-start; gap: .5rem;
}
.proj-outcome::before {
  content: '→'; color: var(--cyan); flex-shrink: 0;
}

/* ════════════════════════════════════════════════ */
/* CERTIFICATIONS & VEILLE                           */
/* ════════════════════════════════════════════════ */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: 2.6rem;
}
.cert-card {
  padding: 1.9rem 1.6rem;
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplace) blur(6px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.3),
    inset 0 -2px 1px rgba(255,255,255,0.07),
    0 22px 60px -12px rgba(0,0,0,0.35);
  transition: transform .5s var(--ease), border-color .5s, background .5s;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .7rem;
}
.cert-card:hover {
  transform: translateY(-4px);
  border-color: rgba(120,220,255,0.28);
  background: rgba(255,255,255,0.06);
}
.cert-card > * { position: relative; z-index: 2; }
.cert-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cert-name { font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: -.3px; color: var(--white); }
.cert-meta { font-size: .78rem; color: var(--w50); line-height: 1.55; }
.cert-status {
  flex-shrink: 0;
  font-size: .5rem; letter-spacing: 1.5px; text-transform: uppercase;
  padding: .24rem .6rem; border-radius: 100px;
  border: 1px solid var(--w12); color: var(--w50); white-space: nowrap;
}
.cert-status.done { color: var(--cyan); border-color: rgba(125,225,255,0.35); background: rgba(125,225,255,0.08); }
.cert-status.wip  { color: var(--violet); border-color: rgba(196,160,255,0.35); background: rgba(196,160,255,0.08); }

.veille { margin-top: 3rem; }
.veille-label {
  font-size: .56rem; letter-spacing: 3.5px; text-transform: uppercase; color: var(--w35);
  margin-bottom: 1rem;
}
.veille-list { display: flex; flex-wrap: wrap; gap: .65rem; }

@media (max-width: 860px) {
  .tl-item { grid-template-columns: 64px 20px 1fr; gap: .9rem; }
  .tl-when { padding-top: 1.4rem; }
  .tl-year { font-size: .9rem; }
  .certs-grid { grid-template-columns: 1fr; }
}

/* Tablet — avoid cramped 4-col tools grid between 860 and 1100px */
@media (max-width: 1100px) and (min-width: 861px) {
  .tools { grid-template-columns: repeat(3, 1fr); }
}

/* Very small phones — keep the hero name from overflowing */
@media (max-width: 400px) {
  .hero-title { font-size: clamp(2.4rem, 12vw, 3.2rem); letter-spacing: -2px; }
}

/* ════════════════════════════════════════════════ */
/* CURSOR GLOW — halo cyan suiveur dans les cartes   */
/* (pas de transform : préserve la réfraction glass) */
/* ════════════════════════════════════════════════ */
.now-card::after, .sk-card::after, .cert-card::after, .tl-card::after,
.quote-inner::after, .contact-right::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
    rgba(125,225,255,0.17) 0%, rgba(150,200,255,0.07) 38%, transparent 72%);
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1);
}
.now-card:hover::after, .sk-card:hover::after, .cert-card:hover::after,
.tl-card:hover::after, .quote-inner:hover::after, .contact-right:hover::after { opacity: 1; }

/* ════════════════════════════════════════════════ */
/* PRINT — version papier / PDF propre (recruteurs)  */
/* ════════════════════════════════════════════════ */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; }
  body { background: #fff !important; color: #111 !important; cursor: auto !important; }
  body::after,
  .bg-space, .light-field, .aurora-canvas, #particles, .bg-grid, .bg-vignette,
  .cur, .cur-glass, .scroll-progress, .scroll-indicator, .side-rail, .scroll-cue,
  #nav, .nav-toggle, .marquee-wrap, .hero-orb, .hero-bg-text, .glass-shine, .sec-num,
  .skip-link { display: none !important; }
  main { display: block; }
  .hero { min-height: auto !important; padding: 1rem 0 2rem !important; }
  section { padding: 1.2rem 0 !important; break-inside: avoid; }
  .r { opacity: 1 !important; transform: none !important; filter: none !important; }
  .now-card, .sk-card, .proj-row, .tl-card, .cert-card, .quote-inner, .contact-right {
    background: #fff !important; border: 1px solid #ccc !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .hero-title, .sec-title, .contact-title, .proj-name, .tl-title, .cert-name,
  .now-value, .quote-text, .hero-desc, .about-body, .proj-desc, .tl-desc, .cert-meta, .sk-list li {
    color: #111 !important; -webkit-text-fill-color: #111 !important; text-shadow: none !important;
  }
  .hero-title .italic, .sec-title .italic, .contact-title .italic, .now-value .italic, .quote-text .accent {
    color: #444 !important; -webkit-text-fill-color: #444 !important;
  }
  a { color: #06c !important; }
}

/* ════════════════════════════════════════════════ */
/* HERO REWORK — compo asymétrique + chrome graffiti */
/* ════════════════════════════════════════════════ */
.page-grad {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  overflow: hidden;
  animation: gradDrift 28s ease-in-out infinite;
  will-change: transform;
  background:
    radial-gradient(42% 50% at 12% 22%, rgba(125,225,255,0.45), transparent 60%),
    radial-gradient(44% 52% at 88% 26%, rgba(196,160,255,0.45), transparent 60%),
    radial-gradient(46% 50% at 84% 86%, rgba(255,150,220,0.38), transparent 60%),
    radial-gradient(40% 48% at 14% 84%, rgba(120,140,255,0.34), transparent 60%);
}
/* Grain « grainy gradient » : bruit feTurbulence sur le dégradé vif global */
.page-grad::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='hg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hg)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  mix-blend-mode: multiply;
  opacity: 0.24;
}
@keyframes gradDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(2%, -2%) scale(1.06); }
}

/* Lueur subtile sur les titres en dégradé (profondeur) */
.hero-title .italic, .sec-title .italic, .contact-title .italic, .quote-text .accent {
  text-shadow: 0 0 26px rgba(125,225,255,0.18), 0 0 54px rgba(196,160,255,0.12);
}
/* Anti-rognage des italiques en dégradé : background-clip:text ne peignait que la
   hauteur de ligne (line-height serré) ; le bas des glyphes serifs (pointe du « V »
   de « CV », etc.) dépassait de la zone peinte → lettres « coupées ». Un padding
   vertical agrandit la zone de peinture pour couvrir TOUT le glyphe, sans toucher la
   mise en page (padding vertical sur un inline ne change pas la hauteur de ligne). */
.sec-title .italic, .contact-title .italic, .now-value .italic, .quote-text .accent {
  padding: 0.18em 0.05em;
}

/* ════════════════════════════════════════════════ */
/* THÈME CLAIR — « Clair & soft » (réversible : classe) */
/* ════════════════════════════════════════════════ */
body.theme-light {
  --bg: #eceaf6;
  --white: #1a1726;
  --w90: rgba(26,23,38,0.90);
  --w70: rgba(26,23,38,0.64);
  /* a11y — texte secondaire/labels remontés à 0,64 d'encre (≥4,5:1 WCAG AA) ; même
     teinte, juste moins transparente. Les usages DÉCORATIFS de --w35 (points/filets)
     sont repinés plus bas pour rester discrets — seul le texte s'assombrit. */
  --w50: rgba(26,23,38,0.64);
  --w35: rgba(26,23,38,0.64);
  --w20: rgba(26,23,38,0.16);
  --w12: rgba(26,23,38,0.10);
  --w10: rgba(26,23,38,0.08);
  --line: rgba(26,23,38,0.10);
  --cyan: #0c9fe6;
  --violet: #7b2dff;
  --pink: #ff2e96;
  color: #1a1726;
  background:
    radial-gradient(60% 60% at 20% 8%, #f1ecfb, transparent 62%),
    radial-gradient(60% 60% at 86% 96%, #f7ecf5, transparent 62%),
    #eef1f8;
  background-attachment: fixed;
}
/* Lueurs plus NETTES en clair : blobs saturés à chute resserrée */
body.theme-light .page-grad {
  background:
    radial-gradient(24% 28% at 13% 16%, rgba(40,150,255,0.74), transparent 56%),
    radial-gradient(17% 20% at 33% 7%, rgba(0,200,225,0.56), transparent 56%),
    radial-gradient(26% 30% at 89% 15%, rgba(150,75,255,0.72), transparent 56%),
    radial-gradient(16% 19% at 67% 27%, rgba(255,85,175,0.5), transparent 56%),
    radial-gradient(27% 30% at 87% 89%, rgba(255,85,175,0.64), transparent 56%),
    radial-gradient(20% 24% at 18% 87%, rgba(120,90,255,0.62), transparent 56%),
    radial-gradient(15% 18% at 52% 96%, rgba(0,200,225,0.46), transparent 56%);
  animation: gradFlow 22s ease-in-out infinite;
}
@keyframes gradFlow {
  0%,100% { transform: translate(0,0) scale(1.06); }
  25%     { transform: translate(-3%, 2%) scale(1.12); }
  50%     { transform: translate(2%, -3%) scale(1.09); }
  75%     { transform: translate(3%, 1%) scale(1.13); }
}
/* Texte en dégradé plus PUNCHY sur fond clair */
body.theme-light .hero-title .italic,
body.theme-light .hero-title .italic .char,
body.theme-light .sec-title .italic,
body.theme-light .contact-title .italic,
body.theme-light .now-value .italic,
body.theme-light .quote-text .accent,
body.theme-light .hero-desc em,
body.theme-light .about-body em,
body.theme-light .contact-sub em,
body.theme-light .marquee-item.bright {
  background-image: linear-gradient(110deg, #00c2ff, #4d6bff 35%, #9b2dff 65%, #ff2e96);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}
/* couches sombres masquées en thème clair */
body.theme-light .bg-space,
body.theme-light .aurora-canvas,
body.theme-light #particles,
body.theme-light .bg-grid,
body.theme-light .bg-vignette,
body.theme-light .light-field { display: none; }

/* Surfaces glass en clair : frosted blanc + bord doux foncé */
body.theme-light #nav,
body.theme-light .hero-tag,
body.theme-light .hero-badge,
body.theme-light .btn-glass,
body.theme-light .now-card,
body.theme-light .sk-card,
body.theme-light .proj-row,
body.theme-light .tl-card,
body.theme-light .cert-card,
body.theme-light .quote-inner,
body.theme-light .contact-right,
body.theme-light .marquee-wrap,
body.theme-light footer,
body.theme-light .tool,
body.theme-light .contact-link,
body.theme-light .comp-item,
body.theme-light .cv-card {
  background: rgba(255,255,255,0.55);
  border-color: rgba(26,23,38,0.09);
}
body.theme-light .pill,
body.theme-light .proj-ctx {
  background: rgba(26,23,38,0.04);
  border-color: rgba(26,23,38,0.12);
}
/* hover clair : plus opaque + accent doux */
body.theme-light .now-card:hover,
body.theme-light .sk-card:hover,
body.theme-light .proj-row:hover,
body.theme-light .tl-card:hover,
body.theme-light .cert-card:hover,
body.theme-light .quote-inner:hover,
body.theme-light .contact-right:hover,
body.theme-light .tool:hover,
body.theme-light .hero-badge:hover,
body.theme-light .cv-card:hover,
body.theme-light .wip-card:hover,
body.theme-light .btn-glass:hover {
  background: rgba(255,255,255,0.78);
  border-color: rgba(120,150,235,0.55);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.85), 0 20px 46px -16px rgba(110,80,210,0.30);
}
/* ombres de cartes adoucies en clair (le sombre tape trop) */
body.theme-light .now-card,
body.theme-light .sk-card,
body.theme-light .proj-row,
body.theme-light .tl-card,
body.theme-light .cert-card,
body.theme-light .quote-inner,
body.theme-light .contact-right {
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 18px 44px -16px rgba(40,30,80,0.28);
}
/* halo sombre parasite du titre retiré en clair */
body.theme-light .hero-title { text-shadow: none; }

/* grain spray coloré (texture graffiti) sur les lueurs */
body.theme-light .page-grad::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='cg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cg)'/%3E%3C/svg%3E");
  background-size: 110px 110px;
  mix-blend-mode: overlay;
  opacity: 0.38;
}
/* marqueur défilant : fondus de bord CLAIRS (plus de noir) */
body.theme-light .marquee-wrap::before { background: linear-gradient(90deg, rgba(247,247,252,0.96), transparent); }
body.theme-light .marquee-wrap::after  { background: linear-gradient(-90deg, rgba(247,247,252,0.96), transparent); }

/* Polish premium (clair) : lecture aérée, hairline cartes, hover boutons, shimmer doux */
body.theme-light .hero-desc { line-height: 1.92; letter-spacing: 0.4px; }
body.theme-light .about-body { line-height: 1.95; letter-spacing: 0.3px; }
body.theme-light .contact-sub { line-height: 1.9; letter-spacing: 0.3px; }

body.theme-light .sk-card::before,
body.theme-light .cert-card::before,
body.theme-light .tl-card::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 2px;
  border-radius: 2px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(12,159,230,0.5), rgba(123,45,255,0.45), transparent);
}

body.theme-light .btn-glass:hover {
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.5), 0 14px 40px -10px rgba(60,120,255,0.3);
}

body.theme-light .sec-title .italic,
body.theme-light .contact-title .italic,
body.theme-light .quote-text .accent {
  animation: shimmer 12s infinite linear;
}

/* ════════════════════════════════════════════════ */
/* COMPÉTENCES — portfolio par compétence (accordéon) */
/* ════════════════════════════════════════════════ */
.comp-list { display: flex; flex-direction: column; gap: 1.1rem; }
.comp-item {
  background: rgba(255,255,255,0.035);
  backdrop-filter: url(#glassDisplace) blur(6px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  box-shadow: inset 0 2px 1px rgba(255,255,255,0.28), 0 20px 50px -12px rgba(0,0,0,0.3);
}
.comp-head {
  list-style: none; cursor: none;
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.5rem 1.9rem;
}
.comp-head::-webkit-details-marker { display: none; }
.comp-num { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--cyan); flex-shrink: 0; min-width: 1.4rem; }
.comp-title { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.4px; color: var(--white); flex: 1; line-height: 1.25; }
.comp-chevron { color: var(--w50); flex-shrink: 0; transition: transform .4s var(--ease); }
.comp-item[open] .comp-chevron { transform: rotate(180deg); }
.comp-body-pad { padding: 0 1.9rem 1.9rem; }
.comp-compo { display: flex; flex-wrap: wrap; gap: .45rem; }
.comp-part { margin-top: 1.7rem; }
.comp-part-label {
  font-family: var(--display); font-size: .58rem; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--cyan);
  display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem;
}
.comp-part-label::before { content: ''; width: 20px; height: 1px; background: var(--cyan); flex-shrink: 0; }
.comp-part p { font-size: .9rem; line-height: 1.7; color: var(--w70); margin: 0 0 .7rem; }
.comp-part strong { color: var(--white); font-weight: 600; }
.comp-sub { font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--w50); margin: 1rem 0 .35rem; font-weight: 500; font-family: var(--display); }
.todo { color: var(--violet); background: rgba(196,160,255,0.1); border: 1px dashed rgba(196,160,255,0.45); border-radius: 6px; padding: .03rem .4rem; }
.comp-ac ul { list-style: none; margin-top: .4rem; }
.comp-ac li { font-size: .78rem; color: var(--w50); line-height: 1.55; padding-left: 1rem; position: relative; margin-bottom: .35rem; }
.comp-ac li::before { content: '\203A'; position: absolute; left: 0; color: var(--cyan); }

/* CV */
.cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 2.5rem; }
.cv-card {
  padding: 2rem 1.8rem;
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplace) blur(6px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), 0 22px 60px -12px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; gap: 1rem;
}
.cv-card .comp-part-label { margin-bottom: 0; }
.cv-card p { font-size: .86rem; line-height: 1.65; color: var(--w50); margin: 0; }

/* ════════════════════════════════════════════════ */
/* PROJET EN COURS — section vitrine « wip »          */
/* ════════════════════════════════════════════════ */
.wip-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplace) blur(6px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  padding: 2.2rem 2.4rem;
  margin-top: 2rem;
  box-shadow: inset 0 2px 1px rgba(255,255,255,0.28), 0 24px 60px -16px rgba(0,0,0,0.34);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.wip-card:hover { transform: translateY(-3px); }
.wip-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.wip-live {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-size: .6rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--cyan);
  padding: .42rem .85rem; border-radius: 100px;
  background: rgba(125,225,255,0.10); border: 1px solid rgba(125,225,255,0.30);
}
.wip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; animation: wipPulse 1.8s infinite; }
@keyframes wipPulse {
  0%   { box-shadow: 0 0 0 0 rgba(125,225,255,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(125,225,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(125,225,255,0); }
}
.wip-meta { font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--w50); }
.wip-name { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -1px; line-height: 1.12; color: var(--white); margin-bottom: .7rem; }
.wip-desc { font-size: .95rem; line-height: 1.7; color: var(--w70); max-width: 62ch; margin-bottom: 1.6rem; }
/* Thème clair : carte blanche frosted */
body.theme-light .wip-card { background: rgba(255,255,255,0.55); border-color: rgba(26,23,38,0.09); }
@media (max-width: 860px) {
  .wip { padding: 6rem 1.5rem 3rem; }
  .wip-card { padding: 1.6rem 1.5rem; }
  .comp-head { padding: 1.2rem 1.3rem; gap: .8rem; }
  .comp-title { font-size: 1.05rem; }
  .comp-body-pad { padding: 0 1.3rem 1.4rem; }
  .cv-grid { grid-template-columns: 1fr; }
  /* Menu mobile en thème clair : panneau frosté CLAIR — sinon les liens (encre sombre) sont
     posés sur le fond sombre d'origine rgba(10,12,24,.86) → invisibles. */
  body.theme-light .nav-links {
    background: rgba(255,255,255,0.94);
    border-color: rgba(26,23,38,0.12);
    box-shadow: 0 24px 60px rgba(40,30,80,0.22), inset 0 1px 1px rgba(255,255,255,0.85);
  }
  body.theme-light .nav-links a:not(.active) { color: #1a1726; }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .cur, .cur-glass { display: none; }
  /* Curseur custom masqué → rétablir un curseur natif VISIBLE partout (sinon plus aucun curseur
     sur les éléments qui forcent cursor:none — boutons, cartes, pastilles…). */
  *, *::before, *::after { cursor: auto !important; }
  a, a *, button, button *, .btn, .btn *, summary, label, [role="button"] { cursor: pointer !important; }
}

/* ════════════════════════════════════════════════ */
/* CORRECTIFS — revue d'audit (a11y, contraste,      */
/* layout, responsive) — surcharges en fin de fichier */
/* ════════════════════════════════════════════════ */

/* a11y — sélection de texte lisible en thème clair (sinon texte blanc sur surlignage pâle) */
body.theme-light ::selection { background: rgba(12,159,230,0.22); color: #1a1726; }

/* a11y — petits libellés majuscules : contraste AA sur cartes claires */
body.theme-light .now-label,
body.theme-light .tools-label,
body.theme-light .veille-label,
body.theme-light .cert-status { color: rgba(26,23,38,0.64); }

/* a11y — accent cyan en TEXTE : teinte plus foncée sur fond clair (les points/halos gardent le cyan vif) */
body.theme-light .comp-part-label,
body.theme-light .wip-live,
body.theme-light .tl-place { color: #0a73a3; } /* cyan TEXTE légèrement plus foncé → ≥4,5:1 (AA) sur petits libellés */

/* polish — halo de curseur visible sur fond clair (multiply teinté au lieu de screen) */
body.theme-light .cur-glass {
  mix-blend-mode: multiply;
  background: radial-gradient(circle, rgba(80,140,255,0.10) 0%, rgba(150,90,255,0.06) 30%, transparent 60%);
}

/* polish — survol du bouton plein lisible sur fond clair (ombre nette plutôt qu'un glow cyan) */
body.theme-light .btn-solid:hover { box-shadow: 0 14px 40px -8px rgba(40,30,80,0.30); }

/* layout — footer ancré en bas même sur pages courtes / écrans hauts */
main { min-height: calc(100vh - 5rem); min-height: calc(100svh - 5rem); }

/* responsive — palier tablette (861–1100px) : les grilles desktop sont trop serrées sinon */
@media (min-width: 861px) and (max-width: 1100px) {
  .now { grid-template-columns: repeat(2, 1fr); }
  .skills-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .certs-grid { grid-template-columns: repeat(2, 1fr); }
  .about { gap: 3rem; }
}

/* ════════════════════════════════════════════════ */
/* UX — micro-interactions, feedback, lisibilité      */
/* (revue UX 2026-06-14 — surcharges en fin de fichier) */
/* ════════════════════════════════════════════════ */

/* Cartes-projets NON cliquables (projets.html) : feedback sobre, pas d'affordance de lien */
article.proj-row:hover { transform: translateY(-3px); }
article.proj-row:hover::after { transform: scaleY(0); }
article.proj-row:hover .proj-name { transform: none; }

/* Carte-lien .cv-card (accueil) : toute la carte réagit au survol / focus clavier */
a.cv-card { transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; }
a.cv-card:hover, a.cv-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(120,220,255,0.3);
  box-shadow: inset 0 2px 1px rgba(255,255,255,0.4), 0 30px 70px -14px rgba(120,220,255,0.18);
}
body.theme-light a.cv-card:hover, body.theme-light a.cv-card:focus-visible {
  background: rgba(255,255,255,0.82);
  border-color: rgba(120,150,235,0.5);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.85), 0 26px 56px -18px rgba(110,80,210,0.28);
}

/* État « pressé » (:active) — retour net au clic / tap, subtil */
.btn:active { transform: translateY(-1px) scale(.98); transition-duration: .08s; }
.contact-link:active { transform: translateX(5px) scale(.99); }
a.proj-row:active { transform: translateX(12px) translateY(-1px) scale(.995); }
a.cv-card:active { transform: translateY(-2px) scale(.99); }
.scroll-dot:active { transform: scale(.8); }
.f-top:active { color: var(--cyan); }
.f-top:active .f-top-ico { transform: translateY(-5px); }

/* Égalité clavier : le focus des cartes-liens reproduit le feedback du survol */
a.proj-row:focus-visible { transform: translateX(12px) translateY(-3px); }

/* Pastilles stack/veille (.tool) : « étiquette vivante » et non faux bouton */
.tool:hover { transform: translateY(-1px); box-shadow: none; }

/* Curseur custom : grossit + se teinte au survol des éléments interactifs */
.cur { transition: width .2s var(--ease), height .2s var(--ease), background .2s; }
.cur.cur-hot { width: 14px; height: 14px; background: var(--cyan); mix-blend-mode: normal; }

/* Flèche des boutons : → en navigation interne ; ↗ (diagonale) réservée aux liens externes */
.btn:hover svg { transform: translateX(4px); }
.btn[target="_blank"]:hover svg { transform: translate(4px,-4px) rotate(45deg); }

/* Lisibilité : borner la mesure des textes longs (pages compétences + hub) */
.comp-part p { max-width: 68ch; }
.comp-ac li { max-width: 70ch; }
.about-body { max-width: 72ch; }

/* Scannabilité : filet de séparation discret entre les volets d'une compétence */
.comp-part + .comp-part { border-top: 1px solid var(--line); padding-top: 1.7rem; }

/* Grilles 2 colonnes : écart fluide sur écran intermédiaire (évite le vide central) */
.about, .contact, .skills-layout { gap: clamp(2.5rem, 5vw, 6rem); }

/* Bouton « retour haut » flottant (apparaît au scroll) */
.to-top {
  position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--w20); color: var(--w50);
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDisplaceRound) blur(6px) saturate(175%);
  -webkit-backdrop-filter: blur(6px) saturate(175%);
  font-size: 1.1rem; line-height: 1; cursor: none;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), color .3s, border-color .3s, box-shadow .3s;
}
.to-top.visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 16px rgba(125,225,255,0.3); }
.to-top:active { transform: scale(.9); }
body.theme-light .to-top { background: rgba(255,255,255,0.6); border-color: rgba(26,23,38,0.12); color: rgba(26,23,38,0.64); }
@media (max-width: 860px) { .to-top { right: 1rem; bottom: 1rem; } }

/* Cible tactile du burger ≥44px (visuel inchangé : les 2 barres restent centrées) */
.nav-toggle { width: 44px; height: 44px; }
@media (max-width: 860px) { .nav-links a { padding: .55rem 1rem; display: block; } }

/* Pager de sortie (projets/contact) au-dessus du fond ; hero à 3 boutons qui s'enroule */
.comp-pager { position: relative; z-index: 4; }
.hero-actions { flex-wrap: wrap; }

/* Très grand écran : recentrer le contenu en colonne « éditoriale » (le fond reste pleine fenêtre) */
@media (min-width: 1500px) {
  main > section:not(.hero), .marquee-wrap, footer { max-width: 1320px; margin-inline: auto; }
}

/* Contact : puce « Copier l'email » + confirmation */
.contact-mail-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.copy-mail {
  font-family: var(--display); font-size: .56rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan);
  display: inline-flex; align-items: center; min-height: 30px; /* cible tactile WCAG 2.5.8 (≥24px) */
  padding: .5rem .85rem; border-radius: 100px; cursor: none;
  border: 1px solid rgba(125,225,255,0.32); background: rgba(125,225,255,0.08);
  transition: color .25s, border-color .25s, background .25s, transform .12s;
}
.copy-mail:hover { border-color: var(--cyan); background: rgba(125,225,255,0.16); }
.copy-mail:active { transform: scale(.95); }
.copy-mail.copied { color: #1f9d5b; border-color: rgba(31,157,91,0.55); background: rgba(31,157,91,0.12); }
body.theme-light .copy-mail { color: #0a73a3; }
body.theme-light .copy-mail.copied { color: #1a7a45; }

/* Cartes en verre : légère perspective au survol (composée en JS) — pas de transition figée */
.now-card, .sk-card, .cert-card, .tl-card, .cv-card, .wip-card { transform-origin: center; }

/* Ondulation douce au clic/tap (delight, raccord palette) */
.click-ripple {
  position: fixed; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; pointer-events: none; z-index: 9998;
  background: radial-gradient(circle, rgba(125,225,255,0.5), rgba(196,160,255,0.22) 55%, transparent 70%);
  animation: clickRipple .6s var(--ease) forwards;
}
@keyframes clickRipple {
  from { opacity: .65; transform: scale(.3); }
  to   { opacity: 0; transform: scale(5); }
}
body.theme-light .click-ripple {
  background: radial-gradient(circle, rgba(12,159,230,0.38), rgba(123,45,255,0.16) 55%, transparent 70%);
}

/* Très petits écrans (≤480px, iPhone) : logo plus compact + padding réduit pour que
   le burger tienne dans la pilule de nav (le logo agrandi débordait sinon). */
@media (max-width: 480px) {
  #nav { padding-left: 1rem; padding-right: 1rem; }
  .nav-logo { font-size: .72rem; letter-spacing: 1px; }
}

/* A11Y — lien d'évitement clavier : en thème CLAIR, le texte blanc sur fond clair
   translucide était illisible (~1.2:1). Pilule encre + texte clair = contraste fort.
   (N'apparaît qu'au focus clavier — aucun impact sur le rendu visuel souris.) */
body.theme-light .skip-link {
  background: #1a1726;
  border-color: rgba(26,23,38,0.5);
  color: #f4f2fb;
}

/* A11Y — contraste : --w35/--w50 sont remontés à 0,64 pour le TEXTE (≥AA), mais
   --w35 sert aussi à des décors (points, filets, flèches). On les repine ici à leur
   valeur d'origine (0,40) pour qu'ils restent discrets — l'assombrissement ne touche
   que le texte, conformément à la DA « clair & soft ». */
body.theme-light .scroll-dot,
body.theme-light .tool::before,
body.theme-light .sk-list li::before,
body.theme-light .tl-node.dim,
body.theme-light .contact-link .arrow { background: rgba(26,23,38,0.40); }
body.theme-light .scroll-cue-line { background: linear-gradient(180deg, rgba(26,23,38,0.40), transparent); }
body.theme-light .tl-rail::before { background: linear-gradient(180deg, rgba(26,23,38,0.40), rgba(26,23,38,0.10)); }
body.theme-light .contact-link .arrow::after { border-left-color: rgba(26,23,38,0.40); }
/* Gros guillemet purement décoratif : assez d'encre pour ≥3:1 (grand texte) sans alourdir. */
body.theme-light .quote-mark { color: rgba(26,23,38,0.52); }

/* ════════════════════════════════════════════════ */
/* LIENS CROISÉS  projets ↔ compétences              */
/* ════════════════════════════════════════════════ */
/* Sur une carte projet : compétence(s) liée(s), cliquable(s) vers le détail */
.proj-comp { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: 1.1rem; }
.proj-comp-label {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 1.5px;
  font-size: .56rem; font-weight: 700; color: var(--w50);
}
.proj-comp a {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 26px;
  padding: .4rem .8rem; border-radius: 100px; cursor: none;
  font-family: var(--display); font-size: .68rem; font-weight: 600; letter-spacing: .3px;
  color: var(--cyan); text-decoration: none;
  border: 1px solid rgba(125,225,255,0.32); background: rgba(125,225,255,0.08);
  transition: border-color .25s, background .25s, transform .12s;
}
.proj-comp a:hover { border-color: var(--cyan); background: rgba(125,225,255,0.16); }
.proj-comp a:active { transform: scale(.96); }
body.theme-light .proj-comp a { color: #0a73a3; }

/* Sur une page compétence : bloc « Projets en lien » */
.comp-projects { margin-top: 2.4rem; }
.comp-proj-links { display: grid; gap: .8rem; margin-top: 1rem; }
.comp-proj-link {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem;
  border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.025);
  text-decoration: none; color: inherit; cursor: none;
  transition: border-color .3s, background .3s, transform .25s;
}
.comp-proj-link:hover { border-color: rgba(125,225,255,0.4); background: rgba(125,225,255,0.05); transform: translateX(4px); }
.comp-proj-link:active { transform: translateX(2px) scale(.99); }
.comp-proj-num { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--w50); flex-shrink: 0; }
.comp-proj-name { font-family: var(--display); font-weight: 600; font-size: .92rem; color: var(--white); line-height: 1.3; }
.comp-proj-arrow { margin-left: auto; flex-shrink: 0; color: var(--cyan); font-size: 1.1rem; }
body.theme-light .comp-proj-arrow { color: #0a73a3; }

/* ════════════════════════════════════════════════ */
/* PROJETS — détail dépliable (« cliquable », tout dedans) */
/* ════════════════════════════════════════════════ */
.proj-toggle {
  margin-top: 1.3rem; display: inline-flex; align-items: center; gap: .5rem; cursor: none;
  background: rgba(125,225,255,0.06); border: 1px solid rgba(125,225,255,0.28); border-radius: 100px;
  padding: .6rem 1.15rem; font-family: var(--display); font-size: .64rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan);
  transition: border-color .25s, background .25s, transform .12s;
}
.proj-toggle:hover { border-color: var(--cyan); background: rgba(125,225,255,0.13); }
.proj-toggle:active { transform: scale(.97); }
.proj-toggle-ico { transition: transform .35s var(--ease); font-size: .85em; }
.proj-toggle[aria-expanded="true"] .proj-toggle-ico { transform: rotate(180deg); }
body.theme-light .proj-toggle { color: #0a73a3; }

.proj-detail { display: none; margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.proj-detail.open { display: block; animation: projDetail .4s var(--ease); }
@keyframes projDetail { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.proj-detail h4 {
  font-family: var(--display); font-size: .62rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--w50); margin: 1.4rem 0 .5rem;
  display: flex; align-items: center; gap: .7rem;
}
.proj-detail h4::before { content: ''; width: 18px; height: 1px; background: var(--cyan); flex-shrink: 0; }
.proj-detail h4:first-child { margin-top: 0; }
.proj-detail p { font-size: .86rem; line-height: 1.7; color: var(--w70); margin: 0 0 .6rem; max-width: 70ch; }
.proj-detail ul { list-style: none; margin: .2rem 0 .7rem; }
.proj-detail li { font-size: .84rem; line-height: 1.6; color: var(--w70); padding-left: 1.1rem; position: relative; margin-bottom: .4rem; max-width: 70ch; }
.proj-detail li::before { content: '\203A'; position: absolute; left: 0; color: var(--cyan); }
.proj-detail strong { color: var(--white); font-weight: 600; }

/* ════════════════════════════════════════════════ */
/* PAGES PROJET DÉDIÉES — en-tête, galerie, fichiers  */
/* (réutilise .comp-item/.comp-part pour le texte ;   */
/*  ci-dessous = seulement les briques nouvelles)     */
/* ════════════════════════════════════════════════ */
@keyframes projPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* Bandeau méta sous le titre : contexte + statut */
.proj-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 1rem 0 .2rem; }
.proj-page-ctx { font-family: var(--display); font-size: .74rem; font-weight: 600; letter-spacing: .3px; color: var(--w50); }
.proj-status {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .6rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  padding: .34rem .72rem; border-radius: 100px; border: 1px solid var(--line);
  background: rgba(125,225,255,0.08); color: var(--cyan); min-height: 24px;
}
.proj-status.done { color: #0a7d4f; border-color: rgba(16,150,95,0.40); background: rgba(16,160,100,0.12); }
.proj-status.wip  { color: #a8590a; border-color: rgba(205,120,10,0.42); background: rgba(230,150,30,0.14); }
.proj-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.proj-status.wip .dot { animation: projPulse 1.8s var(--ease) infinite; }

/* Galerie d'images du projet */
.proj-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.proj-figure {
  margin: 0; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: rgba(255,255,255,0.04);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.proj-figure a { display: block; line-height: 0; text-decoration: none; }
.proj-figure img { display: block; width: 100%; height: auto; }
.proj-figure figcaption { font-size: .76rem; line-height: 1.55; color: var(--w50); padding: .75rem .95rem; }
.proj-figure:hover { border-color: rgba(125,225,255,0.42); transform: translateY(-3px); }

/* Boutons de téléchargement (PDF, archives, dépôt) */
.proj-downloads { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.dl-btn {
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 44px; padding: .55rem 1.05rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,0.04); color: inherit; text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.dl-btn:hover { border-color: rgba(125,225,255,0.45); background: rgba(125,225,255,0.07); transform: translateY(-2px); }
.dl-btn:active { transform: translateY(0) scale(.98); }
.dl-ico { font-size: 1.1rem; line-height: 1; color: var(--cyan); flex-shrink: 0; }
.dl-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dl-name { font-family: var(--display); font-weight: 600; font-size: .82rem; color: var(--white); }
.dl-meta { font-size: .62rem; letter-spacing: .6px; text-transform: uppercase; color: var(--w50); margin-top: .14rem; }

/* Carte « projet » cliquable sur la page Projets (remplace le panneau dépliable) */
.proj-go { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem;
  font-family: var(--display); font-weight: 600; font-size: .8rem; color: var(--cyan);
  text-decoration: none; }
.proj-go .arrow { transition: transform .35s var(--ease); }
.proj-row:hover .proj-go .arrow { transform: translateX(5px); }

/* Thème clair : verre frosté pour les briques nouvelles */
body.theme-light .proj-figure,
body.theme-light .dl-btn { background: rgba(255,255,255,0.55); border-color: rgba(26,23,38,0.10); }
body.theme-light .proj-figure:hover,
body.theme-light .dl-btn:hover { background: rgba(255,255,255,0.80); border-color: rgba(120,150,235,0.5); }
body.theme-light .proj-go { color: #0a73a3; }

/* Ligne d'en-tête de carte projet : contexte à gauche, pastille d'état à droite */
.proj-head-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; }
/* Pastille d'état clignotante (vert = terminé, rouge = en cours) sur les cartes de la liste */
.proj-flag { display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0;
  font-size: .58rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.proj-flag .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0;
  animation: flagBlink 1.5s ease-in-out infinite; }
.proj-flag.done { color: #0a7d4f; }
.proj-flag.wip  { color: #d12f2f; }
.proj-flag.wip .dot { box-shadow: 0 0 6px rgba(209,47,47,.55); }
.proj-flag.done .dot { box-shadow: 0 0 6px rgba(16,150,95,.45); }
@keyframes flagBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .proj-flag .dot { animation: none; } }

/* Image projet en version réduite (galerie à une seule vignette compacte) */
.proj-figure.compact { max-width: 480px; }