/* ════════════════════════════════════════════════════════════════
   Portfolio Noah Condamines — D.A. Cloud Y2K / Frutiger Aero 2026
   ════════════════════════════════════════════════════════════════ */

:root {
  --electric: #0099FF;
  --navy:     #051433;
  --deep:     #020A1F;
  --sky:      #4DA5FF;
  --sky-lt:   #A8D5FF;
  --sky-pale: #DFF0FF;
  --cream:    #F0E4C8;
  --neon:     #39FF7A;
  --holo-1:   #FFB0E0;
  --holo-2:   #B0E0FF;
  --holo-3:   #B0FFE0;
  --holo-4:   #FFE0B0;
  --holo-5:   #E0B0FF;
  --white:    #FFFFFF;
  --danger:   #FF4D6D;
  --warn:     #FFB347;
  --ok:       #39FF7A;

  --panel-bg:       linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%);
  --panel-border:   1px solid rgba(255,255,255,.28);
  --panel-shadow:
      inset 0 1px 0 rgba(255,255,255,.35),
      inset 0 -1px 0 rgba(0,0,0,.25),
      0 25px 55px rgba(0,10,40,.45);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* scroll-behavior:smooth retiré : interfère avec le parallax JS et coûte des frames */

/* ── Body en flex column → footer toujours en bas ── */
body {
  color: var(--white);
  font-family: 'Satoshi', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg,
      #020A1F 0%,
      #0A2050 6%,
      #1A4590 14%,
      #3680D0 24%,
      #78B6F0 38%,
      #C8E4FF 52%,
      #FFD4EC 62%,
      #FFE8D4 70%,
      #A8D5FF 82%,
      #4DA5FF 92%,
      #051433 100%);
}
main { flex: 1 0 auto; position: relative; z-index: 6; }

/* Noise grain + scanlines : retirés.
   Raison : deux overlays fixed plein écran avec mix-blend-mode:overlay,
   chacun forçait un repaint composite plein écran à chaque pixel scrollé.
   L'effet visuel était subtil (.06 opacity), le coût scroll était massif. */

/* ═══ CURSOR (optimisé — pas de listeners JS) ═══ */
#cursor {
  width:10px; height:10px; background:var(--white);
  border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  transform: translate3d(-50%,-50%,0);
  transition: width .18s, height .18s, background .18s;
  box-shadow: 0 0 12px rgba(200,220,255,.9);
  will-change: transform;
}
#cursor-ring {
  width:36px; height:36px; border:1.5px solid rgba(255,255,255,.7);
  border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9998;
  transform: translate3d(-50%,-50%,0);
  transition: width .3s, height .3s, border-color .25s;
  will-change: transform;
}
/* Grow automatique via CSS :has (aucun event listener JS) */
body:has(a:hover, button:hover, input:hover, textarea:hover, select:hover, .win-card:hover, .depth .tick:hover, .panel:hover, label:hover) #cursor {
  width:20px; height:20px; background: var(--neon);
}
body:has(a:hover, button:hover, input:hover, textarea:hover, select:hover, .win-card:hover, .depth .tick:hover, .panel:hover, label:hover) #cursor-ring {
  width:60px; height:60px; border-color: var(--neon);
}

.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }

/* ═══ CHROME TEXT ═══ */
.chrome {
  background: linear-gradient(180deg,
    #FFFFFF 0%, #EAF0FF 8%, #BFCFE8 18%, #FFFFFF 28%,
    #7890B5 42%, #142448 52%, #4568A0 62%, #90ACD0 72%,
    #FFFFFF 85%, #CEDCF0 94%, #FFFFFF 100%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 8px rgba(10,25,70,.7)) drop-shadow(0 0 30px rgba(180,210,255,.35));
}
.chrome-anim {
  background: linear-gradient(180deg,
    #FFFFFF 0%, #EAF0FF 10%, #BFCFE8 22%, #FFFFFF 32%,
    #7890B5 46%, #142448 54%, #4568A0 62%, #90ACD0 72%,
    #FFFFFF 85%, #CEDCF0 94%, #FFFFFF 100%);
  background-size: 100% 300%;
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: chromeShine 5s ease-in-out infinite;
  filter: drop-shadow(0 3px 8px rgba(10,25,70,.7));
}
@keyframes chromeShine {
  0%,100% { background-position: 0% 0%; }
  50%     { background-position: 0% 100%; }
}
.chrome-blue {
  background: linear-gradient(180deg,
    #FFFFFF 0%, #D0E8FF 12%, #4A9EFF 28%, #FFFFFF 38%,
    #1870DC 52%, #002888 62%, #1870DC 72%, #7CC0FF 85%,
    #FFFFFF 100%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,50,170,.6)) drop-shadow(0 0 30px rgba(120,200,255,.4));
}

/* ═══ SKY + CLOUDS PARALLAX ═══ */
/* Sky-bg étendu (200% viewport en hauteur) pour permettre la translation
   verticale par JS sans révéler les bords → vraie sensation de chute */
.sky-bg {
  position: fixed;
  left: 0; right: 0;
  top: -100vh; bottom: -100vh;   /* 300% viewport tall — buffer pour parallax */
  z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(2,10,31,.88) 0%,
      rgba(10,32,80,.75) 6%,
      rgba(26,69,144,.55) 14%,
      rgba(54,128,208,.35) 24%,
      rgba(120,182,240,.2) 40%,
      rgba(200,228,255,.15) 52%,
      rgba(255,212,236,.22) 62%,
      rgba(255,232,212,.22) 70%,
      rgba(168,213,255,.2) 82%,
      rgba(77,165,255,.35) 92%,
      rgba(5,20,51,.85) 100%),
    url("../img/sky.jpg") center / cover no-repeat;
  will-change: transform;
}
/* Aurora/bokeh : retiré (3 radial-gradients superposés sur un élément 300% viewport
   qui se déplace en transform → repaint très coûteux à chaque scroll).
   Les nuages + le sun core donnent déjà la lumière colorée. */

.cloud-parallax { display: contents; }
.cloud-layer {
  position: fixed; inset: -15% -10% -15% -10%;
  width: 120%; height: 130%;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}
.cloud-layer.back  { z-index: 1; }
.cloud-layer.mid   { z-index: 3; }
.cloud-layer.front { z-index: 5; }

/* ── Couches de profondeur (éléments qui passent entre les nuages) ── */
.depth-layer {
  position: fixed; inset: 0;
  pointer-events: none; overflow: hidden;
}
.depth-layer.depth-far  { z-index: 2; }
.depth-layer.depth-near { z-index: 4; }

.depth-el {
  position: absolute;
  image-rendering: pixelated; image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 10px rgba(0,20,70,.3));
  will-change: transform;
}
/* Avion lointain, traverse l'écran en 70s */
.depth-plane {
  width: 64px; height: 28px; top: 18%; left: -10%;
  animation: planeFly 75s linear infinite;
  opacity: .85;
}
@keyframes planeFly {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(120vw, -40px, 0); }
}
/* Montgolfière lointaine qui flotte lentement */
.depth-balloon {
  width: 54px; height: 80px; top: 42%; left: 8%;
  animation: balloonFloat 22s ease-in-out infinite;
  opacity: .75;
}
@keyframes balloonFloat {
  0%,100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50%     { transform: translate3d(18px, -28px, 0) rotate(2deg); }
}
/* Oiseaux en V */
.depth-bird {
  width: 28px; height: 14px;
  animation: birdFlap 50s linear infinite;
}
.depth-bird.bird-1 { top: 28%; left: -6%; animation-duration: 58s; }
.depth-bird.bird-2 { top: 35%; left: -15%; animation-duration: 62s; animation-delay: -22s; }
.depth-bird.bird-3 { top: 55%; left: -8%; animation-duration: 46s; animation-delay: -15s; opacity: .92; }
.depth-bird.bird-4 { top: 72%; left: -12%; animation-duration: 54s; animation-delay: -30s; opacity: .88; }
@keyframes birdFlap {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(120vw, -30px, 0); }
}
/* Étoile filante lointaine (occasionnelle) */
.depth-shooter {
  width: 3px; height: 3px;
  top: 12%; right: 30%;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px #fff, 0 0 20px rgba(200,230,255,.8);
  animation: shootStar 14s linear infinite;
  opacity: 0;
}
.depth-shooter::after {
  content:''; position:absolute; right:0; top:50%;
  width: 60px; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9));
  transform: translateY(-50%);
}
@keyframes shootStar {
  0%,85% { opacity: 0; transform: translate3d(0,0,0); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-160px, 80px, 0); }
}
.rcloud {
  position: absolute;
  background-image: url("../img/clouds.jpg");
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 58% 50% at 50% 52%,
    rgba(0,0,0,1) 25%, rgba(0,0,0,.85) 45%, rgba(0,0,0,.3) 70%, rgba(0,0,0,0) 92%);
  mask-image: radial-gradient(ellipse 58% 50% at 50% 52%,
    rgba(0,0,0,1) 25%, rgba(0,0,0,.85) 45%, rgba(0,0,0,.3) 70%, rgba(0,0,0,0) 92%);
  opacity: .85;
  /* will-change retiré : c'est la cloud-layer parente qui est translatée,
     pas chaque rcloud individuel. ~17 textures GPU économisées. */
}
.rcloud.v1 { background-position: 0% 60%;     background-size: 140% auto; }
.rcloud.v2 { background-position: 25% 55%;    background-size: 180% auto; }
.rcloud.v3 { background-position: 60% 50%;    background-size: 160% auto; }
.rcloud.v4 { background-position: 80% 65%;    background-size: 200% auto; }
.rcloud.v5 { background-position: 40% 70%;    background-size: 220% auto; }
.rcloud.v6 { background-position: 15% 45%;    background-size: 170% auto; }
/* Filtres sur les nuages : conservés mais simplifiés.
   Le blur sur back est retiré (très cher quand combiné à transform animé).
   La différence visuelle est compensée par l'opacity réduite. */
.cloud-layer.back  .rcloud { opacity: .45; }
.cloud-layer.mid   .rcloud { opacity: .72; }
.cloud-layer.front .rcloud { opacity: .9; }
.c01 { top: 4%;   left: -6%;  width: 540px; height: 260px; }
.c02 { top: 12%;  right: -8%; width: 620px; height: 300px; }
.c03 { top: 22%;  left: 22%;  width: 460px; height: 230px; }
.c04 { top: 30%;  right: 8%;  width: 380px; height: 200px; }
.c05 { top: 40%;  left: -4%;  width: 580px; height: 280px; }
.c06 { top: 48%;  right: 14%; width: 520px; height: 250px; }
.c07 { top: 58%;  left: 28%;  width: 440px; height: 220px; }
.c08 { top: 66%;  right: -6%; width: 600px; height: 290px; }
.c09 { top: 74%;  left: 6%;   width: 480px; height: 240px; }
.c10 { top: 82%;  right: 20%; width: 400px; height: 210px; }
.c11 { top: 90%;  left: -4%;  width: 560px; height: 270px; }
.c12 { top: 96%;  right: 10%; width: 500px; height: 250px; }
/* drift animation retirée : combinée au translate JS du parent,
   elle forçait un transform composite à chaque frame sur 8+ enfants.
   Le parallax scroll donne déjà l'effet de mouvement. */

/* ═══ NAV ═══ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:1.1rem 6%;
  display:flex; justify-content:space-between; align-items:center;
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  background: linear-gradient(180deg, rgba(10,30,70,.45), rgba(10,30,70,.2));
  border-bottom: 1px solid rgba(255,255,255,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 20px rgba(0,10,40,.25);
}
.nav-logo {
  font-family:'Clash Display',sans-serif; font-weight:700; font-size:1.4rem;
  color:var(--white); text-decoration:none; letter-spacing:-.03em;
  text-shadow: 0 2px 8px rgba(0,20,60,.6);
}
.nav-logo span {
  background: linear-gradient(180deg, #7CC8FF, #0066DD 55%, #7CC8FF);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.nav-links { display:flex; gap:2.3rem; list-style:none; align-items:center; }
.nav-links a {
  font-family:'Space Grotesk',sans-serif; font-size:.74rem; font-weight:500;
  color:rgba(255,255,255,.88); text-decoration:none;
  letter-spacing:.1em; text-transform:uppercase; transition:color .2s;
  text-shadow: 0 2px 6px rgba(0,20,60,.6);
}
.nav-links a:hover { color:var(--white); }
.nav-links a.admin-link { color: var(--neon); text-shadow: 0 0 10px rgba(57,255,122,.5); }

/* Nav sticker/status — chrome aqua cohérent (remplace le cream) */
.nav-sticker {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Space Grotesk',sans-serif; font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.55rem 1.05rem; border-radius:100px; text-decoration:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.05) 50%, rgba(255,255,255,.18)),
    linear-gradient(180deg, #3AA8FF, #0065DD);
  border: 1px solid rgba(255,255,255,.55);
  color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 8px 20px rgba(0,80,200,.35);
  transition: transform .2s, filter .2s;
  text-shadow: 0 1px 1px rgba(0,30,100,.5);
}
.nav-sticker:hover { transform: translateY(-1px); filter: brightness(1.08); }
.nav-sticker .dot {
  width:6px; height:6px; background:var(--neon); border-radius:50%;
  box-shadow: 0 0 8px var(--neon);
  animation: blink 1.4s ease-in-out infinite;
}
.nav-sticker.user {
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 50%, rgba(255,255,255,.15)),
    linear-gradient(180deg, #6BFF9C 0%, #1FB456 100%);
  color: var(--navy);
  text-shadow: none;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.25;} }

/* ═══ SECTIONS ═══ */
.cloud-section {
  position: relative;
  padding: 7rem 6% 8rem;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}
.cloud-platform { position: relative; max-width: 1320px; margin: 0 auto; width: 100%; }

/* ═══ HERO ═══ */
.hero {
  min-height: 100vh; padding: 8rem 6% 6rem;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  z-index: 3;
}
.holo-disc {
  position:absolute; width:560px; height:560px;
  right:-170px; top:-80px; z-index:1;
  border-radius:50%;
  background: conic-gradient(from 0deg, #FFB0E0, #B0E0FF, #B0FFE0, #FFE8B0, #E0B0FF, #FFB0E0);
  filter: blur(1.5px) saturate(1.2);
  opacity:.5;
  animation: spin 28s linear infinite;
  mask: radial-gradient(circle, transparent 36%, black 55%, black 85%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 36%, black 55%, black 85%, transparent 100%);
}
@keyframes spin { to { transform: rotate(360deg); } }

.bubble {
  position:absolute; border-radius:50%; z-index:2;
  background:
    radial-gradient(ellipse 60% 50% at 32% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.2) 18%, transparent 42%),
    radial-gradient(ellipse at 50% 50%, rgba(140,210,255,.5) 0%, rgba(30,100,220,.25) 55%, rgba(0,30,100,.15) 100%);
  box-shadow:
    inset 0 -22px 40px rgba(5,20,80,.45),
    inset 14px 14px 25px rgba(255,255,255,.35),
    0 20px 45px rgba(0,60,200,.4);
  animation: floatUp 7s ease-in-out infinite;
  will-change: transform;
}
.bubble::before {
  content:''; position:absolute; top:10%; left:18%; width:30%; height:18%;
  background: radial-gradient(ellipse, rgba(255,255,255,.85), transparent 70%);
  border-radius:50%; filter: blur(2px);
}
.bubble-1 { width:130px; height:130px; top:18%; right:14%; animation-delay:0s; }
.bubble-2 { width:80px;  height:80px;  top:60%; right:6%;  animation-delay:1.5s; }
.bubble-3 { width:55px;  height:55px;  top:46%; right:34%; animation-delay:3s; }
.bubble-4 { width:90px;  height:90px;  top:72%; left:8%;   animation-delay:2s; }
.bubble-5 { width:40px;  height:40px;  top:26%; left:36%;  animation-delay:4s; }
@keyframes floatUp { 0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-25px) rotate(4deg);} }

.sparkle {
  position:absolute; z-index:3; pointer-events:none;
  animation: sparkleTwinkle 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.7));
}
.sparkle svg { display:block; width:100%; height:100%; }
@keyframes sparkleTwinkle {
  0%,100% { opacity:.3; transform: scale(.8) rotate(0deg); }
  50%     { opacity:1;  transform: scale(1.3) rotate(25deg); }
}
.sp1 { width:42px; height:42px; top:14%; left:48%; animation-delay:0s; }
.sp2 { width:22px; height:22px; top:65%; right:28%; animation-delay:1.3s; }
.sp3 { width:58px; height:58px; top:42%; left:18%; animation-delay:2.1s; }
.sp4 { width:26px; height:26px; top:80%; right:40%; animation-delay:.7s; }
.sp5 { width:30px; height:30px; top:28%; right:6%;  animation-delay:3s; }

/* ── Badges Y2K chrome (remplacent les stickers cream) ── */
.y2k-badge {
  position:absolute; z-index:4; pointer-events:none;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.5rem 1rem; border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.08) 50%, rgba(255,255,255,.22)),
    linear-gradient(180deg, rgba(60,140,230,.35), rgba(10,40,120,.3));
  border: 1px solid rgba(255,255,255,.55);
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0,20,60,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 8px 22px rgba(0,50,160,.35),
    0 0 25px rgba(120,200,255,.2);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  animation: floatUp 8s ease-in-out infinite;
}
.y2k-badge .bar {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 8px var(--neon);
  animation: blink 1.4s ease-in-out infinite;
}
.y2k-badge-1 { top:18%; right:7%; transform:rotate(3deg); animation-delay:0s; }
.y2k-badge-2 { top:78%; right:20%; transform:rotate(-2deg); animation-delay:2.2s; }

/* ═══ HERO CONTENT ═══ */
.hero-content { position: relative; z-index: 5; max-width: 1320px; margin: 0 auto; width: 100%; }
.hero-eyebrow {
  font-family:'Space Grotesk',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color: #fff; margin-bottom:1.4rem;
  display:flex; align-items:center; gap:.6rem;
  text-shadow: 0 2px 12px rgba(0,20,60,.75), 0 0 30px rgba(0,40,100,.5);
}
.hero-eyebrow::before { content:''; width:22px; height:1.5px; background: linear-gradient(90deg, #fff, transparent); }

h1.hero-name {
  font-family:'Clash Display',sans-serif; font-weight:700;
  line-height:.88; letter-spacing:-.045em;
  margin-bottom: 2.8rem; position: relative;
  display: flex; flex-direction: column;
}
.hero-name .line-1 { font-size: clamp(4.5rem, 13vw, 12rem); }
/* CONDAMINES entier : scale à la viewport width → jamais coupé */
.hero-name .line-2 {
  font-size: clamp(2.4rem, 9.5vw, 9.5rem);
  white-space: nowrap; letter-spacing: -.035em;
}

.hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:2rem; position:relative; }
.hero-desc { max-width: 420px; }
.hero-desc p {
  font-size:1rem; line-height:1.75; color:#fff;
  margin-bottom:2rem;
  text-shadow: 0 2px 14px rgba(0,20,60,.8), 0 0 24px rgba(0,30,80,.5);
}
.hero-cta {
  display:inline-flex; align-items:center; gap:.6rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(140,200,255,.1) 45%, rgba(0,80,200,.3) 55%, rgba(0,80,200,0)),
    linear-gradient(180deg, #3AA8FF 0%, #0065DD 100%);
  color:#fff;
  font-family:'Space Grotesk',sans-serif; font-size:.85rem; font-weight:700;
  text-decoration:none; padding:1rem 2.1rem; border-radius:100px;
  letter-spacing:.02em; border: 1px solid rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 10px 30px rgba(0,80,200,.45),
    0 0 40px rgba(70,160,255,.35);
  transition: transform .2s, box-shadow .2s, filter .2s;
  text-shadow: 0 1px 2px rgba(0,30,100,.4);
}
.hero-cta:hover { transform: translateY(-3px); filter: brightness(1.08); }
.hero-cta .arr { transition: transform .2s; }
.hero-cta:hover .arr { transform: translateX(4px); }

.hero-nums { display:flex; gap:3rem; }
.hero-num { text-align:right; }
.hero-num .n { font-family:'Clash Display',sans-serif; font-weight:700; font-size:2.6rem; line-height:1; letter-spacing:-.03em; }
.hero-num .l { font-size:.68rem; color:#fff; letter-spacing:.06em; text-transform:uppercase; margin-top:.3rem; text-shadow: 0 2px 10px rgba(0,20,60,.7); }

/* ── Scroll hint plus haut + plus net ── */
.scroll-hint {
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:#fff; font-family:'Space Grotesk',sans-serif;
  font-size:.64rem; letter-spacing:.25em; text-transform:uppercase; z-index:5;
  text-shadow: 0 2px 10px rgba(0,20,60,.85);
  font-weight: 700;
}
.scroll-hint .bar {
  width:1px; height:28px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), transparent);
  animation: sb 1.8s ease-in-out infinite;
}
@keyframes sb { 0%,100%{opacity:.2;} 50%{opacity:1;} }

/* ═══ SEC HEADER ═══ */
.sec-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:3.5rem; position:relative; z-index:1; flex-wrap: wrap; gap: 1.5rem;
}
.sec-num { font-family:'Clash Display',sans-serif; font-weight:700; font-size:.88rem; color: rgba(255,255,255,.4); letter-spacing:.05em; margin-bottom:.35rem; }
.sec-label { font-family:'Space Grotesk',sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--sky-lt); margin-bottom:.7rem; }
.sec-title {
  font-family:'Clash Display',sans-serif; font-weight:700;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  letter-spacing:-.03em; line-height:1.05; color: #fff;
  text-shadow: 0 4px 20px rgba(0,10,40,.6);
}
.sec-link {
  font-family:'Space Grotesk',sans-serif; font-size:.76rem; font-weight:700;
  color: rgba(255,255,255,.92); text-decoration:none;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.4);
  padding: .65rem 1.2rem; border-radius: 100px;
  letter-spacing:.04em; transition: all .2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sec-link:hover { color: var(--white); border-color: rgba(255,255,255,.7); transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════
   PANEL Y2K — Mac OS window générique (réutilisable partout)
   ═══════════════════════════════════════════════════════ */
.panel {
  border-radius: 16px; overflow: hidden; position: relative;
  background: var(--panel-bg);
  border: var(--panel-border);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  max-width: 560px; margin: 0 auto;
}
.panel.wide { max-width: 780px; }
.panel.xl   { max-width: 1080px; }
.panel.full { max-width: none; }
.panel::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 35%);
  border-radius: 16px;
}
.panel-bar {
  display:flex; align-items:center; gap:.55rem;
  padding: .65rem .95rem;
  background: linear-gradient(180deg, #3DA0F5 0%, #1575E8 45%, #0D5DD0 55%, #1575E8 90%);
  border-bottom: 1px solid rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.25);
  position: relative; z-index: 1;
}
.panel-body { padding: 1.8rem 2rem; position: relative; z-index: 1; }
.panel-body-lg { padding: 2.4rem 2.4rem; }
.panel-title {
  font-family:'Clash Display',sans-serif; font-weight:700;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  letter-spacing:-.02em; line-height:1.2;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,10,40,.55);
}
.panel-title em {
  font-style: normal;
  background: linear-gradient(180deg, #7CC8FF, #0099FF 60%, #7CC8FF);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.panel h2 {
  font-family:'Clash Display',sans-serif; font-weight:700;
  font-size: 1.75rem; margin-bottom: .4rem; color: #fff;
}
.panel .sub {
  font-size:.9rem; color:rgba(255,255,255,.8); margin-bottom: 1.6rem; line-height:1.6;
}

.win-dots { display:flex; gap:5px; }
.win-dots span {
  width:10px; height:10px; border-radius:50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
}
.win-dots span:nth-child(1){ background: radial-gradient(circle at 35% 30%, #FF8080, #D02020); }
.win-dots span:nth-child(2){ background: radial-gradient(circle at 35% 30%, #FFE060, #D08800); }
.win-dots span:nth-child(3){ background: radial-gradient(circle at 35% 30%, #70E880, #208840); }
.win-label {
  font-family:'Space Grotesk',sans-serif; font-size:.64rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.98); text-shadow: 0 1px 2px rgba(0,40,100,.6);
}
.win-bubble {
  margin-left:auto; width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,.25) 50%, transparent);
}

/* ═══ PROJECTS section ═══ */
.projects .cloud-platform { padding: 4.5rem 3rem 5.5rem; }
.projects-platform-bg {
  position: absolute; inset: -6% -4%; z-index: 0; pointer-events: none;
  background-image: url("../img/clouds.jpg");
  background-size: 200% auto; background-position: 55% 50%;
  -webkit-mask-image: radial-gradient(ellipse 65% 58% at 50% 55%, rgba(0,0,0,1) 30%, rgba(0,0,0,.85) 50%, rgba(0,0,0,.35) 78%, rgba(0,0,0,0) 95%);
  mask-image: radial-gradient(ellipse 65% 58% at 50% 55%, rgba(0,0,0,1) 30%, rgba(0,0,0,.85) 50%, rgba(0,0,0,.35) 78%, rgba(0,0,0,0) 95%);
  filter: brightness(.38) contrast(1.2) hue-rotate(210deg) saturate(1.2);
  opacity: .95;
}
.projects-platform-tint {
  position: absolute; inset: -6% -4%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 65% 58% at 50% 55%,
    rgba(5,15,45,.72) 0%, rgba(10,30,80,.6) 40%, rgba(10,30,80,.3) 70%, rgba(10,30,80,0) 95%);
}
.projects-inner { position: relative; z-index: 2; }
.stars-inner {
  position: absolute; inset: 0; pointer-events: none; opacity:.55; z-index:0;
  background-image:
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.9), transparent 50%),
    radial-gradient(1px 1px at 84% 14%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(1px 1px at 44% 78%, rgba(255,255,255,.8), transparent 50%),
    radial-gradient(1.5px 1.5px at 68% 36%, rgba(180,220,255,.8), transparent 50%),
    radial-gradient(1px 1px at 12% 66%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 92% 62%, rgba(255,255,255,.6), transparent 50%);
}

/* ═══ WIN CARDS (projets) ═══ */
.projects-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; position:relative; z-index:1; }
.win-card {
  border-radius: 14px; overflow: hidden; cursor: pointer;
  background: var(--panel-bg);
  border: var(--panel-border);
  box-shadow: var(--panel-shadow);
  transition: transform .35s cubic-bezier(.22,.68,0,1.2), box-shadow .35s;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  position: relative;
  text-decoration: none; color: inherit; display: block;
}
.win-card::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 35%);
  pointer-events:none; border-radius:14px;
}
.win-card:hover {
  transform: translateY(-10px) rotate(-.3deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 35px 75px rgba(0,20,80,.6),
    0 0 45px rgba(0,153,255,.35);
}
.win-card.wide { grid-column: span 2; }
.win-title {
  display:flex; align-items:center; gap:.55rem; padding: .6rem .9rem;
  background: linear-gradient(180deg, #3DA0F5 0%, #1575E8 45%, #0D5DD0 55%, #1575E8 90%);
  border-bottom: 1px solid rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

.card-thumb { width:100%; aspect-ratio: 16/9; overflow:hidden; position:relative; background: linear-gradient(135deg, #050C22 0%, #003AA0 45%, #0099FF 100%); }
.win-card.wide .card-thumb { aspect-ratio: 2.3/1; }
.card-thumb img { width:100%; height:100%; object-fit:cover; transition: transform .4s; }
.win-card:hover .card-thumb img { transform: scale(1.05); }
.card-thumb-fallback {
  position: absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Clash Display',sans-serif; font-size: 4rem; font-weight: 700;
  color: rgba(255,255,255,.25); letter-spacing:-.03em;
}
.card-body { padding: 1.3rem 1.4rem 1.6rem; position:relative; z-index:1; }
.card-cat {
  display:inline-block;
  font-family:'Space Grotesk',sans-serif; font-size:.64rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  background: rgba(0,153,255,.25); border:1px solid rgba(0,153,255,.55);
  color: var(--sky-lt);
  padding:.28rem .75rem; border-radius:7px;
  margin-bottom:.65rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.card-cat.pro { background: rgba(57,255,122,.22); border-color: rgba(57,255,122,.5); color: #D6FFE3; }
.card-name { font-family:'Clash Display',sans-serif; font-weight:700; font-size:1.2rem; letter-spacing:-.01em; margin-bottom:.4rem; color: #fff; text-shadow: 0 2px 6px rgba(0,20,60,.5); }
.card-desc { font-size:.85rem; color:#EAF2FF; line-height:1.65; text-shadow: 0 1px 3px rgba(0,20,60,.8); }
.card-link {
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem;
  font-family:'Space Grotesk',sans-serif; font-size:.7rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color: var(--sky-lt);
}

/* ═══ FILTERS ═══ */
.filters {
  display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.5rem;
  position:relative; z-index:1;
}
.filter-pill {
  font-family:'Space Grotesk',sans-serif; font-size:.74rem; font-weight:700;
  padding:.6rem 1.3rem; border-radius:100px; text-decoration:none;
  letter-spacing:.08em; text-transform:uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: all .2s;
}
.filter-pill:hover { color: #fff; border-color: rgba(255,255,255,.7); transform: translateY(-1px); }
.filter-pill.active {
  background: linear-gradient(180deg, #3AA8FF, #0065DD);
  color: #fff; border-color: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 24px rgba(0,80,200,.4);
}
.filter-pill.active.pro {
  background: linear-gradient(180deg, #6BFF9C, #1FB456);
  color: var(--navy);
}

/* ═══ ABOUT pills ═══ */
.about-pills { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1.8rem; }
.pill-y2k {
  font-family:'Space Grotesk',sans-serif; font-size:.72rem; font-weight:700;
  padding:.45rem 1rem; border-radius:999px;
  background: linear-gradient(180deg, rgba(0,153,255,.3), rgba(0,100,220,.08));
  border: 1px solid rgba(120,200,255,.5);
  color: #EAF6FF;
  letter-spacing:.06em; text-transform:uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

/* ═══ FORMS ═══ */
.field { margin-bottom: 1.2rem; }
.field label {
  display:block;
  font-family:'Space Grotesk',sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--sky-lt); margin-bottom:.4rem;
}
.field input, .field textarea, .field select {
  width:100%;
  font-family:'Satoshi',sans-serif; font-size:.95rem;
  background: rgba(5,15,45,.5);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px;
  padding: .8rem 1rem; color:#fff;
  outline:none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.55; font-family: 'Satoshi', sans-serif; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(0,153,255,.25);
  background: rgba(5,15,45,.65);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.45); }
.field input[type="file"] { padding: .55rem 1rem; }
.field select {
  appearance:none; cursor:pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--sky-lt) 50%), linear-gradient(135deg, var(--sky-lt) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem;
}
.field select option { background: var(--navy); color: #fff; }

/* ═══ BUTTONS Y2K aqua gloss ═══ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Space Grotesk',sans-serif; font-size:.82rem; font-weight:700;
  text-decoration:none; cursor:pointer; border:none;
  padding: .85rem 1.6rem; border-radius: 100px;
  letter-spacing:.04em; transition: transform .2s, box-shadow .2s, filter .2s;
  line-height: 1;
}
.btn-lg { padding: 1rem 2rem; font-size:.88rem; }
.btn-sm { padding: .48rem 1rem; font-size:.7rem; }

.btn-primary, .btn-aqua {
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(140,200,255,.1) 45%, rgba(0,80,200,.3) 55%, rgba(0,80,200,0) 100%),
    linear-gradient(180deg, #3AA8FF 0%, #0065DD 100%);
  color:#fff;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 10px 25px rgba(0,80,200,.45),
    0 0 30px rgba(70,160,255,.28);
  text-shadow: 0 1px 2px rgba(0,30,100,.4);
}
.btn-primary:hover, .btn-aqua:hover { transform: translateY(-2px); filter: brightness(1.08); }

.btn-ghost {
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.75); }

.btn-danger {
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #FF6B85 0%, #C71D45 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 20px rgba(180,30,60,.4);
  text-shadow: 0 1px 2px rgba(100,0,20,.4);
}
.btn-danger:hover { transform: translateY(-2px); }
.btn-success {
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #6BFF9C 0%, #1FB456 100%);
  color: var(--navy); border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px rgba(30,180,90,.4);
}
.btn-success:hover { transform: translateY(-2px); }

/* alias btn-stk → btn-ghost (compat) */
.btn-stk {
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-stk:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.75); }

/* alias form-card → panel (compat connexion / inscription / creer-projet) */
.form-card { composes: panel; }
.form-card { /* fallback réel vu que composes ne marche pas en CSS vanilla */
  border-radius: 16px; overflow: hidden; position: relative;
  background: var(--panel-bg);
  border: var(--panel-border);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  max-width: 560px; margin: 0 auto;
}
.form-card.wide { max-width: 780px; }
.form-card::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 35%);
  border-radius: 16px;
}
.form-body { padding: 1.8rem 2rem; position: relative; z-index: 1; }
.form-body h2 { font-family:'Clash Display',sans-serif; font-weight:700; font-size: 1.75rem; margin-bottom: .4rem; color: #fff; }
.form-body .sub { font-size:.9rem; color:rgba(255,255,255,.8); margin-bottom: 1.6rem; line-height:1.6; }
.form-card .win-title { border-radius: 16px 16px 0 0; }

.form-actions { display:flex; gap:.8rem; align-items:center; margin-top: 1.6rem; flex-wrap: wrap; }
.form-actions .alt { color: rgba(255,255,255,.8); font-size:.82rem; text-decoration:none; }
.form-actions .alt:hover { color: #fff; text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   ICÔNES PIXEL Y2K + EFFETS MULTICOLOR
   ════════════════════════════════════════════════════════════════ */

/* Utilitaire icône — rendu pixel (pas d'antialiasing) pour look bitmap */
.y2k-icon {
  display: inline-block;
  width: 16px; height: 16px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  vertical-align: middle;
}
.y2k-icon-lg { width: 32px; height: 32px; }
.y2k-icon-xl { width: 48px; height: 48px; }

/* Spin animation (pour CD-ROM) */
@keyframes y2kSpin { to { transform: rotate(360deg); } }
.y2k-spin { animation: y2kSpin 6s linear infinite; }

/* Favicon style Mac dans les panel-bar */
.panel-icon, .win-title .panel-icon {
  width: 16px; height: 16px;
  image-rendering: pixelated; image-rendering: crisp-edges;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
  flex-shrink: 0;
}

/* Icônes déco absolues dans le hero */
.y2k-deco {
  position: absolute;
  image-rendering: pixelated; image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 10px rgba(0,10,40,.45));
  z-index: 3;
  pointer-events: none;
  animation: floatUp 9s ease-in-out infinite;
  will-change: transform;
}
.y2k-deco-disk     { width: 64px; height: 64px; top: 12%; left: 4%;  transform: rotate(-8deg); animation-delay: 0s; }
.y2k-deco-flower   { width: 48px; height: 48px; top: 56%; left: 44%; animation-delay: 2s; }
.y2k-deco-cd       { width: 72px; height: 72px; top: 68%; right: 4%; animation: y2kSpin 9s linear infinite; filter: drop-shadow(0 4px 20px rgba(180,220,255,.5)); }
.y2k-deco-folder   { width: 58px; height: 58px; top: 74%; left: 12%; transform: rotate(6deg); animation-delay: 1.7s; }
.y2k-deco-heart    { width: 40px; height: 40px; top: 36%; left: 8%;  animation-delay: 1.2s; }
.y2k-deco-butterfly{ width: 56px; height: 56px; top: 20%; right: 30%; animation-delay: 3s; }

/* Classe utilitaire PNG bitmap : rendu pixelated net */
img.y2k-png, img.y2k-deco {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* ════════════════════════════════════════════════════════════════
   TASKBAR Y2K (bas d'écran, discrète, flottante)
   ════════════════════════════════════════════════════════════════ */
.y2k-taskbar {
  position: fixed;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  z-index: 550;
  display: flex; align-items: center; gap: .25rem;
  padding: .4rem .5rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.05) 50%, rgba(255,255,255,.2)),
    linear-gradient(180deg, rgba(60,140,230,.4), rgba(10,40,120,.35));
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 15px 40px rgba(0,20,80,.45),
    0 0 30px rgba(120,200,255,.2);
}
.y2k-taskbar-item {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.35);
  transition: transform .2s, background .2s, box-shadow .2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  text-decoration: none;
}
.y2k-taskbar-item svg,
.y2k-taskbar-item img {
  width: 26px; height: 26px;
  min-width: 26px; min-height: 26px;
  max-width: 26px; max-height: 26px;
  object-fit: contain;
  image-rendering: pixelated; image-rendering: crisp-edges;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
  display: block;
}
.y2k-taskbar-item:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.1));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 10px 20px rgba(0,80,200,.35),
    0 0 20px rgba(120,200,255,.4);
}
.y2k-taskbar-spin svg,
.y2k-taskbar-spin img { animation: y2kSpin 4s linear infinite; }
.y2k-taskbar-clock {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-left: .35rem; padding: 0 .8rem 0 .6rem;
  border-left: 1px solid rgba(255,255,255,.3);
  height: 38px;
  font-family: 'Space Grotesk', sans-serif; font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; color: #fff;
  text-shadow: 0 1px 2px rgba(0,20,60,.5);
}
.y2k-taskbar-flower { width: 18px; height: 18px; image-rendering: pixelated; image-rendering: crisp-edges; animation: y2kSpin 14s linear infinite; }

@media (max-width: 700px) {
  .y2k-taskbar { bottom: .5rem; gap: .15rem; padding: .3rem .4rem; }
  .y2k-taskbar-item { width: 34px; height: 34px; }
  .y2k-taskbar-item svg,
  .y2k-taskbar-item img {
    width: 22px; height: 22px;
    min-width: 22px; min-height: 22px;
    max-width: 22px; max-height: 22px;
  }
  .y2k-taskbar-clock { display: none; }
  .y2k-deco-butterfly, .y2k-deco-heart { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   EFFETS MULTICOLOR
   ════════════════════════════════════════════════════════════════ */

/* Bord arc-en-ciel animé (conic gradient qui tourne) */
@keyframes holoBorderSpin { to { --ha: 360deg; } }
@property --ha {
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}
.holo-border {
  position: relative;
  background-clip: padding-box;
}
.holo-border::before {
  content:''; position:absolute; inset:-2px; border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--ha, 0deg),
    #FF6ECB, #FFD85E, #7EFF95, #6ECFFF, #C77EFF, #FF6ECB);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: holoBorderSpin 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
/* Fallback (browsers qui n'ont pas @property) → gradient statique */
@supports not (background: conic-gradient(from 0deg, red)) {
  .holo-border::before { display: none; }
}

/* Iridescent sweep sur les win-card au hover */
.win-card { isolation: isolate; }
.win-card .card-thumb::before {
  content:''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255,182,255,.0) 30%,
    rgba(176,224,255,.35) 45%,
    rgba(176,255,224,.35) 55%,
    rgba(255,216,94,.0) 70%,
    transparent 100%);
  mix-blend-mode: screen;
  transform: translateX(-120%);
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.win-card:hover .card-thumb::before { transform: translateX(120%); }

/* Rainbow underline (soulignage arc-en-ciel pour liens spéciaux) */
.rainbow-underline {
  background:
    linear-gradient(90deg, #FF6ECB, #FFD85E, #7EFF95, #6ECFFF, #C77EFF) bottom / 100% 3px no-repeat;
  padding-bottom: 4px;
}

/* Holo text — arc-en-ciel animé */
.holo-text {
  background: linear-gradient(90deg, #FF6ECB, #FFD85E, #7EFF95, #6ECFFF, #C77EFF, #FF6ECB);
  background-size: 300% 100%;
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: holoTextSlide 6s linear infinite;
  filter: drop-shadow(0 2px 8px rgba(180,140,255,.35));
}
@keyframes holoTextSlide {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* RGB split au hover (effet glitch Y2K soft) */
.rgb-split:hover {
  text-shadow:
    -2px 0 rgba(255,80,180,.85),
     2px 0 rgba(80,220,255,.85);
  animation: rgbNoise .18s steps(2) infinite;
}
@keyframes rgbNoise {
  0%   { text-shadow: -2px 0 rgba(255,80,180,.85),  2px 0 rgba(80,220,255,.85); }
  50%  { text-shadow:  2px 0 rgba(255,80,180,.85), -2px 0 rgba(80,220,255,.85); }
}

/* Taskbar au-dessus du footer — le footer gère son propre padding-bottom */
@media (max-width: 700px) {
  footer { padding-bottom: calc(2rem + 80px); }
}

/* ═══ THUMB SOURCE radios (form) ═══ */
.thumb-source { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.thumb-source-opt {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .85rem 1rem;
  background: rgba(5,15,45,.45);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  letter-spacing: normal; text-transform: none; font-weight: 500;
}
.thumb-source-opt:hover { border-color: rgba(120,200,255,.6); background: rgba(5,15,45,.6); }
.thumb-source-opt input[type="radio"] {
  width: auto; margin: 0; accent-color: var(--electric);
  margin-top: .22rem; flex-shrink: 0;
}
.thumb-source-opt:has(input:checked) {
  border-color: var(--electric);
  background: linear-gradient(180deg, rgba(0,153,255,.22), rgba(0,100,220,.08));
  box-shadow: 0 0 0 2px rgba(0,153,255,.22), inset 0 1px 0 rgba(255,255,255,.15);
}
.thumb-source-lbl { display: flex; flex-direction: column; gap: .15rem; }
.thumb-source-lbl strong {
  color: #fff; font-family:'Space Grotesk',sans-serif;
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
}
.thumb-source-lbl span {
  color: rgba(255,255,255,.62); font-size: .72rem; line-height: 1.4;
}
@media (max-width: 600px) { .thumb-source { grid-template-columns: 1fr; } }

/* ═══ YouTube play overlay ═══ */
.yt-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
  background: radial-gradient(circle at 50% 50%, rgba(5,15,45,0) 25%, rgba(5,15,45,.35) 80%);
  transition: background .25s;
}
.yt-play-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #FF3A3A 0%, #C70000 100%);
  border: 2px solid rgba(255,255,255,.85);
  color: #fff; font-size: 1.5rem; padding-left: 6px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    0 10px 30px rgba(200,0,0,.5),
    0 0 30px rgba(255,60,60,.35);
  transition: transform .25s, box-shadow .25s;
  text-shadow: 0 1px 2px rgba(80,0,0,.5);
}
.win-card:hover .yt-play-btn { transform: scale(1.1); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 14px 40px rgba(200,0,0,.7); }
.win-card:hover .yt-play-overlay { background: radial-gradient(circle at 50% 50%, rgba(5,15,45,0) 15%, rgba(5,15,45,.5) 85%); }

/* Version overlay sur page détail (plus gros + clickable) */
.project-hero .yt-play-overlay { pointer-events: auto; text-decoration: none; }
.project-hero .yt-play-btn { width: 88px; height: 88px; font-size: 2rem; padding-left: 8px; }
.project-hero .yt-play-overlay:hover .yt-play-btn { transform: scale(1.08); }

/* ═══ FLASH ═══ */
.flashes { position:fixed; top: 5.5rem; right: 1.5rem; z-index: 700; display:flex; flex-direction:column; gap:.6rem; max-width: 360px; }
.flash {
  padding:.85rem 1.1rem; border-radius:12px;
  font-family:'Space Grotesk',sans-serif; font-size:.78rem; font-weight:600;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 12px 30px rgba(0,10,40,.4);
  animation: flashIn .3s ease;
}
.flash.success { background: rgba(57,255,122,.25); color: #DBFFE5; border-color: rgba(57,255,122,.55); }
.flash.error   { background: rgba(255,77,109,.25); color: #FFD9E0; border-color: rgba(255,77,109,.55); }
.flash.info    { background: rgba(0,153,255,.25); color: #D9EFFF; border-color: rgba(0,153,255,.55); }
@keyframes flashIn { from { transform: translateX(20px); opacity: 0; } }

.alert {
  padding: .85rem 1.1rem; border-radius:10px;
  font-family:'Space Grotesk',sans-serif; font-size:.8rem; font-weight:600;
  margin-bottom: 1.2rem; border: 1px solid;
}
.alert.error   { background: rgba(255,77,109,.2); color: #FFC1CD; border-color: rgba(255,77,109,.5); }
.alert.success { background: rgba(57,255,122,.16); color: #C6FFDA; border-color: rgba(57,255,122,.45); }
.alert.info    { background: rgba(0,153,255,.18); color: #C6E5FF; border-color: rgba(0,153,255,.45); }

/* ═══ PROJECT DETAIL ═══ */
.project-detail { padding-top: 9rem; padding-bottom: 6rem; max-width: 1100px; margin: 0 auto; position:relative; z-index:1; padding-left: 6%; padding-right: 6%; }
.project-back { color: rgba(255,255,255,.85); font-family:'Space Grotesk',sans-serif; font-size:.75rem; text-decoration:none; letter-spacing:.1em; text-transform:uppercase; margin-bottom: 2rem; display:inline-block; }
.project-back:hover { color: #fff; }
.project-hero {
  border-radius: 16px; overflow: hidden;
  background: var(--panel-bg);
  border: var(--panel-border);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  margin-bottom: 2.5rem;
}
.project-hero .img { aspect-ratio: 21/9; background: linear-gradient(135deg, #050C22 0%, #003AA0 45%, #0099FF 100%); position: relative; overflow:hidden; }
.project-hero .img img { width:100%; height:100%; object-fit:cover; }
.project-meta { padding: 2rem 2.5rem 2.4rem; }
.project-meta h1 { font-family:'Clash Display',sans-serif; font-weight:700; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing:-.03em; color:#fff; margin-bottom: .8rem; }
.project-meta .by { font-size:.82rem; color: rgba(255,255,255,.78); margin-bottom: 1.2rem; }
.project-meta .desc { font-size: 1rem; line-height: 1.8; color: rgba(255,255,255,.92); margin-bottom: 1.6rem; white-space: pre-wrap; }
.project-meta .links { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }
.project-meta .technos { display:flex; gap:.4rem; flex-wrap:wrap; margin-top: 1.2rem; margin-bottom: 1.5rem; }
.project-meta .technos .pill {
  font-family:'Space Grotesk',sans-serif; font-size:.7rem; font-weight:700;
  padding:.32rem .8rem; border-radius:999px;
  background: linear-gradient(180deg, rgba(0,153,255,.3), rgba(0,100,220,.08));
  border:1px solid rgba(120,200,255,.5);
  color:#EAF6FF;
}

/* ═══ COMMENTS ═══ */
.comments {
  border-radius: 16px; overflow: hidden;
  background: var(--panel-bg); border: var(--panel-border); box-shadow: var(--panel-shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.comments-head { padding: 1.4rem 1.8rem; border-bottom: 1px solid rgba(255,255,255,.2); }
.comments-head h3 { font-family:'Clash Display',sans-serif; font-weight:700; color: #fff; font-size: 1.2rem; }
.comments-head .count { color: var(--sky-lt); font-size:.85rem; font-weight:500; margin-left: .4rem; }
.comments-list { padding: 1.4rem 1.8rem; display:flex; flex-direction:column; gap: 1.2rem; }
.comment { padding-bottom: 1.2rem; border-bottom: 1px dashed rgba(255,255,255,.15); }
.comment:last-child { border-bottom: 0; padding-bottom: 0; }
.comment .head { display:flex; align-items:baseline; gap:.6rem; margin-bottom: .35rem; }
.comment .head .pseudo { font-family:'Clash Display',sans-serif; font-weight:600; color: #fff; font-size:.95rem; }
.comment .head .date { font-family:'Space Grotesk',sans-serif; font-size:.66rem; color: rgba(255,255,255,.55); letter-spacing:.08em; text-transform:uppercase; }
.comment .body { font-size:.9rem; color: rgba(255,255,255,.88); line-height: 1.65; white-space: pre-wrap; }
.comment-form { padding: 1.4rem 1.8rem; border-top: 1px solid rgba(255,255,255,.2); background: rgba(5,15,45,.2); }
.comment-empty { padding: 2.2rem 1.8rem; text-align:center; color: rgba(255,255,255,.6); font-size:.88rem; }

/* ═══ ADMIN ═══ */
.admin-shell { padding-top: 9rem; padding-bottom: 6rem; max-width: 1320px; margin: 0 auto; padding-left: 6%; padding-right: 6%; position: relative; z-index: 1; }
.admin-tabs { display:flex; gap:.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.admin-tab {
  font-family:'Space Grotesk',sans-serif; font-size:.74rem; font-weight:700;
  padding:.6rem 1.2rem; border-radius:100px; text-decoration:none;
  letter-spacing:.1em; text-transform:uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: all .2s;
}
.admin-tab { text-shadow: 0 1px 2px rgba(0,15,55,.6); }
.admin-tab:hover { color:#fff; border-color: rgba(255,255,255,.7); }
.admin-tab.active {
  background: linear-gradient(180deg, #3AA8FF, #0065DD);
  color: #fff; border-color: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px rgba(0,80,200,.4);
}
.admin-tab .badge { background: var(--neon); color: var(--navy); font-size:.62rem; padding: .1rem .5rem; border-radius: 100px; margin-left:.4rem; font-weight:700; }

.admin-stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; margin-bottom: 2.5rem; }
.stat-card {
  border-radius: 16px; padding: 1.5rem 1.6rem;
  background: var(--panel-bg); border: var(--panel-border);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--panel-shadow);
  position:relative; overflow: hidden;
}
.stat-card .label { font-family:'Space Grotesk',sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: #CDE7FF; margin-bottom: .6rem; text-shadow: 0 1px 3px rgba(0,15,55,.7); }
.stat-card .num { font-family:'Clash Display',sans-serif; font-weight:700; font-size: 2.6rem; line-height:1; letter-spacing:-.03em; color: #fff; text-shadow: 0 3px 10px rgba(0,15,55,.65); }
.stat-card .sub { font-size:.74rem; color: #DDEAFF; margin-top: .4rem; text-shadow: 0 1px 3px rgba(0,15,55,.7); }

.data-card {
  border-radius: 16px; overflow: hidden;
  background: var(--panel-bg); border: var(--panel-border);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--panel-shadow);
}
.data-table { width:100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 1rem 1.2rem; vertical-align: middle; }
.data-table thead th {
  font-family:'Space Grotesk',sans-serif; font-size:.66rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--sky-lt);
  background: rgba(5,15,45,.55); border-bottom: 1px solid rgba(255,255,255,.2);
}
.data-table tbody td { color: rgba(255,255,255,.9); font-size:.88rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(255,255,255,.05); }
.data-table .actions { display:flex; gap:.4rem; flex-wrap: wrap; }

.tag {
  display:inline-block; font-family:'Space Grotesk',sans-serif; font-size:.62rem; font-weight:700;
  padding:.25rem .7rem; border-radius:7px; letter-spacing:.1em; text-transform:uppercase;
  border: 1px solid;
}
.tag.role-admin { background: rgba(255,77,109,.22); color:#FFC1CD; border-color: rgba(255,77,109,.5); }
.tag.role-user  { background: rgba(0,153,255,.22); color: var(--sky-lt); border-color: rgba(0,153,255,.5); }
.tag.status-ok  { background: rgba(57,255,122,.2); color:#D6FFE3; border-color: rgba(57,255,122,.5); }
.tag.status-pending { background: rgba(255,179,71,.2); color:#FFE3BD; border-color: rgba(255,179,71,.5); }
.tag.type-aca { background: rgba(0,153,255,.22); color: var(--sky-lt); border-color: rgba(0,153,255,.5); }
.tag.type-pro { background: rgba(57,255,122,.2); color:#D6FFE3; border-color: rgba(57,255,122,.5); }

.empty-state { padding: 3rem 2rem; text-align: center; color: rgba(255,255,255,.62); }
.empty-state .icn { font-size: 3rem; margin-bottom: .8rem; opacity:.4; }
.empty-state p { color: rgba(255,255,255,.8); }

/* ═══ FOOTER ═══ */
footer {
  background: var(--deep);
  /* padding-bottom élargi pour laisser de la place à la taskbar flottante
     au lieu d'un margin-bottom qui décollait le footer du bas de page */
  padding: 2.5rem 6% calc(2.5rem + 90px);
  display:flex; justify-content:space-between; align-items:center;
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative; z-index: 7; flex-wrap: wrap; gap: 1rem;
  flex-shrink: 0;
  margin-top: auto;
}
.footer-logo { font-family:'Clash Display',sans-serif; font-weight:700; font-size:1.2rem; color:var(--white); text-decoration:none; }
.footer-logo span { background: linear-gradient(180deg, #7CC8FF, #0066DD); background-clip: text; -webkit-background-clip: text; color:transparent; -webkit-text-fill-color: transparent; }
footer p { font-size:.74rem; color:rgba(255,255,255,.5); }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { font-family:'Space Grotesk',sans-serif; font-size:.7rem; color:rgba(255,255,255,.55); text-decoration:none; letter-spacing:.08em; text-transform:uppercase; transition: color .2s; }
.footer-links a:hover { color:var(--white); }

/* ═══ FALL-IN ═══ */
.fall-in {
  opacity: 0; transform: translateY(-80px) scale(.98); filter: blur(3px);
  transition: opacity .8s cubic-bezier(.25,.8,.3,1), transform .9s cubic-bezier(.25,.8,.3,1), filter .6s ease;
}
.fall-in.visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

/* ═══ DEPTH ═══ */
.depth { position: fixed; right: 1.7rem; top: 50%; transform: translateY(-50%); z-index: 600; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.depth .tick { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.55); transition: background .3s, transform .3s, box-shadow .3s; }
.depth .tick.active { background: var(--white); transform: scale(1.55); box-shadow: 0 0 18px rgba(180,220,255,.95); }
.depth .label { font-family:'Space Grotesk',sans-serif; font-size:.55rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color: rgba(255,255,255,.7); writing-mode: vertical-rl; margin-top: .6rem; text-shadow: 0 2px 6px rgba(0,20,60,.5); }

/* ═══ PAGE HEADER ═══ */
.page-header { padding: 9rem 6% 3rem; max-width: 1320px; margin: 0 auto; position: relative; z-index: 1; }
.page-header h1 {
  font-family:'Clash Display',sans-serif; font-weight:700;
  font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing:-.04em; line-height:1; color:#fff;
  margin-bottom: .8rem;
  /* halo noir profond pour rester lisible par-dessus les nuages blancs et le ciel clair */
  filter: drop-shadow(0 6px 18px rgba(0,10,45,.85)) drop-shadow(0 0 40px rgba(0,30,100,.5));
}
.page-header p {
  color: #fff; font-size: 1.02rem; max-width: 580px; line-height: 1.65;
  /* halo sombre derrière le paragraphe pour contrer les nuages blancs */
  text-shadow:
    0 2px 8px rgba(0,15,55,.95),
    0 0 22px rgba(0,20,70,.6);
  font-weight: 500;
}
.page-shell { padding: 0 6% 6rem; max-width: 1320px; margin: 0 auto; position: relative; z-index: 1; }

/* ═══ APROPOS — page dédiée ═══ */
.about-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.4rem; align-items: center;
}
.about-lead {
  font-size: 1.02rem; line-height: 1.8; color: #EAF2FF;
  margin-top: 1rem; text-shadow: 0 1px 3px rgba(0,20,60,.4);
}
.about-lead em {
  font-style: normal;
  background: linear-gradient(90deg, #FF6ECB, #FFD85E, #7EFF95, #6ECFFF);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.about-portrait {
  aspect-ratio: 1;
  border-radius: 20px; overflow: hidden; position: relative;
  background:
    linear-gradient(135deg, #3AA8FF 0%, #0065DD 55%, #052090 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.3),
    0 25px 50px rgba(0,30,120,.5);
  border: 2px solid rgba(255,255,255,.45);
}
.about-portrait::before {
  content:''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 30% at 25% 18%, rgba(255,255,255,.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 75% 80%, rgba(200,240,255,.35) 0%, transparent 60%);
  pointer-events: none;
}
.about-portrait-inner {
  position: absolute; inset: 12%;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 45% 35% at 50% 35%, rgba(255,210,245,.6) 0%, transparent 60%),
    linear-gradient(180deg, #78B6F0 0%, #C8E4FF 45%, #FFD4EC 80%);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  box-shadow: inset 0 0 40px rgba(255,255,255,.3);
  border: 1px solid rgba(255,255,255,.55);
}
/* Portrait : photo qui remplit l'intérieur du cadre Y2K */
.about-portrait-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* léger filter qui rappelle la D.A. Y2K sans dénaturer */
  filter: saturate(1.08) contrast(1.03);
}
/* Petit dégradé pour la lisibilité du label en bas */
.about-portrait-inner::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.55));
  pointer-events: none;
}
.about-portrait-sticker {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem); font-weight: 700;
  background: linear-gradient(180deg,
    #FFFFFF 0%, #EAF0FF 10%, #BFCFE8 22%, #FFFFFF 32%,
    #7890B5 46%, #142448 54%, #4568A0 62%, #90ACD0 72%,
    #FFFFFF 85%, #CEDCF0 94%, #FFFFFF 100%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 10px rgba(10,25,70,.5));
  letter-spacing: -.04em; line-height: 1;
}
.about-portrait-label {
  position: absolute; bottom: .7rem; left: 50%; transform: translateX(-50%);
  z-index: 2;
  font-family: 'Space Grotesk', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(5,20,80,.9);
  text-shadow:
    0 1px 2px rgba(255,255,255,.7),
    0 0 8px rgba(255,255,255,.5);
}
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 340px; margin: 0 auto; }
}

/* Skill rows (progress bars Y2K) */
.skill-rows { display: flex; flex-direction: column; gap: 1.2rem; }
.skill-row {
  display: grid;
  grid-template-columns: 200px 1fr 1.1fr;
  gap: 1.2rem; align-items: center;
}
.skill-name {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: 1.02rem; color: #fff;
  text-shadow: 0 1px 3px rgba(0,20,60,.5);
}
.skill-bar {
  height: 14px; border-radius: 100px;
  background: rgba(5,15,45,.45);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3);
  overflow: hidden; position: relative;
}
.skill-bar span {
  display: block; height: 100%; border-radius: 100px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,.1) 100%),
    linear-gradient(90deg, #6ECFFF, #3AA8FF 40%, #1870DC 80%, #FF6ECB 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 10px rgba(120,200,255,.5);
  position: relative;
  animation: skillFill 1.2s cubic-bezier(.2,.8,.3,1) backwards;
}
@keyframes skillFill { from { width: 0; } }
.skill-tools {
  font-family: 'Space Grotesk', sans-serif; font-size: .78rem;
  color: #CDE7FF; letter-spacing: .06em;
  text-shadow: 0 1px 2px rgba(0,20,60,.5);
}
@media (max-width: 700px) {
  .skill-row { grid-template-columns: 1fr; gap: .5rem; }
}

/* Timeline parcours */
.timeline {
  list-style: none; padding: 0; margin: 0;
  position: relative;
  padding-left: 1.6rem;
}
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, #FF6ECB, #FFD85E, #7EFF95, #6ECFFF, #C77EFF);
  border-radius: 2px;
}
.timeline-item {
  position: relative; padding: .4rem 0 1.4rem;
}
.timeline-item::before {
  content: ''; position: absolute; left: -1.6rem; top: .6rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #C8E4FF 40%, #3AA8FF);
  border: 2px solid #fff;
  box-shadow: 0 0 12px rgba(120,200,255,.7), inset 0 1px 0 rgba(255,255,255,.8);
}
.timeline-year {
  font-family: 'Space Grotesk', sans-serif; font-size: .76rem; font-weight: 700;
  color: #CDE7FF; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,20,60,.6);
  margin-bottom: .2rem;
}
.timeline-title {
  font-family: 'Clash Display', sans-serif; font-weight: 700;
  font-size: 1.2rem; color: #fff;
  text-shadow: 0 2px 6px rgba(0,20,60,.5);
  margin-bottom: .3rem;
}
.timeline-desc {
  color: #EAF2FF; line-height: 1.65; font-size: .92rem;
  text-shadow: 0 1px 2px rgba(0,20,60,.4);
}

/* ═══ CONTACT ═══ */
.contact { padding: 12rem 6% 14rem; text-align: center; position: relative; overflow: hidden; }
.contact-clouds { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ccloud {
  position: absolute;
  background-image: url("../img/clouds.jpg");
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 55% 48% at 50% 52%, rgba(0,0,0,1) 30%, rgba(0,0,0,.8) 50%, rgba(0,0,0,.25) 75%, rgba(0,0,0,0) 95%);
  mask-image: radial-gradient(ellipse 55% 48% at 50% 52%, rgba(0,0,0,1) 30%, rgba(0,0,0,.8) 50%, rgba(0,0,0,.25) 75%, rgba(0,0,0,0) 95%);
  mix-blend-mode: screen; filter: brightness(1.2) contrast(1.1); opacity: .98;
}
.cc1 { width: 680px; height: 340px; top: -4%;  left: -8%;  background-size: 150% auto; background-position: 20% 45%; }
.cc2 { width: 560px; height: 280px; top: 8%;   right: -6%; background-size: 180% auto; background-position: 70% 40%; }
.cc3 { width: 720px; height: 360px; bottom: 4%; left: -4%; background-size: 140% auto; background-position: 50% 60%; }
.cc4 { width: 520px; height: 270px; bottom: 12%; right: 6%; background-size: 170% auto; background-position: 20% 65%; }
.contact-inner { position: relative; z-index: 3; }
.contact-big { font-family:'Clash Display',sans-serif; font-weight:700; font-size: clamp(4.5rem, 13vw, 11.5rem); letter-spacing:-.05em; line-height:.88; margin-bottom: 2.5rem; position: relative; }
.contact-big::before {
  content:''; position: absolute; inset: -10% -10% -15% -10%;
  background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(5,15,45,.48) 0%, rgba(5,15,45,.22) 50%, rgba(5,15,45,0) 85%);
  z-index: -1; filter: blur(20px);
}
.contact-sub { font-size: 1rem; color: #fff; max-width: 480px; margin: 0 auto 3rem; line-height: 1.75; position: relative; z-index: 1; text-shadow: 0 2px 14px rgba(0,20,60,.8); font-weight: 500; }
.contact-btns { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; position:relative; z-index:1; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .projects-grid, .admin-stats { grid-template-columns: 1fr; }
  .win-card.wide { grid-column: span 1; }
  .cloud-section { padding: 5rem 5% 7rem; }
  .depth { display:none; }
  .data-table thead { display:none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display:block; width:100%; }
  .data-table tr { padding: 1rem; border-bottom: 1px solid rgba(255,255,255,.12); }
  .data-table td { padding: .35rem 0; border: 0; }
  .data-table td::before { content: attr(data-label); font-family:'Space Grotesk',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--sky-lt); display:block; margin-bottom: .15rem; }
  nav { padding: .9rem 5%; }
  .nav-links { gap: 1rem; font-size: .65rem; }
  .nav-links a { font-size: .62rem; }
  .nav-sticker { display: none; }
  .hero-name .line-2 { white-space: normal; }
  .y2k-badge-2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rcloud, .bubble, .sparkle, .holo-disc, .chrome-anim, .y2k-badge {
    animation: none !important;
  }
  .fall-in { transform: none; filter: none; transition: opacity .4s ease; }
}

/* ════════════════════════════════════════════════════════════════
   Y2K ENHANCEMENT LAYER 2026
   - Parallax cosmique multi-couches (mouse + scroll)
   - Lisibilité du texte maximisée (haze, halos, frosted backdrops)
   - Chrome / glass / iridescent poussés à fond
   - 3D tilt cards, magnetic CTAs, richer hovers
   ════════════════════════════════════════════════════════════════ */

/* ── ATMOS HAZE : voile global qui aère le texte du fond ── */
.atmos-haze {
  position: fixed; inset: 0; z-index: 6;
  pointer-events: none;
  background:
    /* léger halo central qui sépare le contenu des nuages clairs */
    radial-gradient(ellipse 70% 36% at 50% 50%, rgba(2,8,30,.20) 0%, rgba(2,8,30,.08) 45%, transparent 80%),
    /* haut : ancre la nav */
    linear-gradient(180deg, rgba(2,8,30,.42) 0%, rgba(2,8,30,.12) 12%, transparent 22%),
    /* bas : ancre la taskbar / footer */
    linear-gradient(0deg, rgba(2,8,30,.4) 0%, rgba(2,8,30,.08) 14%, transparent 24%);
  mix-blend-mode: multiply;
}

/* ── GRID FLOOR : sol cyber Y2K très subtil ── */
.grid-floor {
  position: fixed; left: -10%; right: -10%; bottom: -20%; height: 60vh;
  z-index: 7; pointer-events: none;
  perspective: 700px;
  perspective-origin: 50% 0%;
  opacity: .35;
}
.grid-floor::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(120,200,255,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,200,255,.55) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: rotateX(72deg);
  transform-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,1) 100%);
  filter: drop-shadow(0 0 10px rgba(60,180,255,.3));
}

/* ── STARFIELD : étoiles fixes (haut du viewport) ── */
.starfield {
  position: fixed; inset: 0;
  z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 8% 6%,  rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(1px 1px at 14% 18%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 26% 9%, rgba(190,220,255,.95) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 22%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 49% 4%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 14%, rgba(220,235,255,.95) 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 26%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 7%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 19%, rgba(220,235,255,.9) 50%, transparent 51%),
    radial-gradient(2px 2px at 18% 30%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 31%, rgba(220,235,255,.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 35%, rgba(255,255,255,.6) 50%, transparent 51%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 32%, transparent 55%);
          mask-image: linear-gradient(180deg, #000 0%, #000 32%, transparent 55%);
  will-change: transform, opacity;
}
.star-twinkle {
  position: absolute;
  width: 4px; height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px #fff, 0 0 12px rgba(180,220,255,.8), 0 0 22px rgba(140,200,255,.5);
  animation: starTwinkle 3.6s ease-in-out infinite;
  opacity: .9;
}
.star-twinkle::before, .star-twinkle::after {
  content:''; position: absolute; left: 50%; top: 50%;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: translate(-50%,-50%);
}
.star-twinkle::before { width: 22px; height: 1px; }
.star-twinkle::after  { width: 1px; height: 22px; }
@keyframes starTwinkle {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.2); }
}
.st1 { top: 8%;  left: 20%; animation-delay: 0s; }
.st2 { top: 14%; left: 70%; animation-delay: .8s; }
.st3 { top: 22%; left: 45%; animation-delay: 1.6s; }
.st4 { top: 6%;  left: 90%; animation-delay: 2.4s; width: 3px; height: 3px; }
.st5 { top: 28%; left: 12%; animation-delay: 1.2s; width: 3px; height: 3px; }
.st6 { top: 18%; left: 86%; animation-delay: 2.8s; width: 3px; height: 3px; }
.st7 { top: 32%; left: 60%; animation-delay: .4s; }

/* ── SKY SUN : orbe iridescente, fixée en haut à droite ── */
.sky-sun {
  position: fixed;
  top: 8%; right: 8%;
  width: 280px; height: 280px;
  z-index: 1; pointer-events: none;
  will-change: transform;
}
.sky-sun-core {
  position: absolute; inset: 24%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255,255,255,1) 0%, rgba(255,232,180,.92) 18%, rgba(255,180,224,.65) 38%, rgba(160,200,255,.4) 60%, rgba(160,140,255,.18) 80%, rgba(0,30,80,0) 100%);
  filter: blur(.5px) saturate(1.3);
  box-shadow:
    0 0 40px rgba(255,232,200,.55),
    0 0 90px rgba(255,200,232,.4),
    0 0 180px rgba(160,200,255,.3);
  animation: sunBreath 7s ease-in-out infinite;
}
.sky-sun-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255,176,224,.55), rgba(176,224,255,.55), rgba(176,255,224,.55),
    rgba(255,232,176,.55), rgba(224,176,255,.55), rgba(255,176,224,.55));
  filter: blur(28px);
  opacity: .55;
  animation: sunSpin 32s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 60%, transparent 100%);
          mask: radial-gradient(circle, transparent 30%, #000 60%, transparent 100%);
}
@keyframes sunBreath {
  0%, 100% { transform: scale(1);    filter: blur(.5px) saturate(1.3) brightness(1); }
  50%      { transform: scale(1.07); filter: blur(.5px) saturate(1.5) brightness(1.15); }
}
@keyframes sunSpin { to { transform: rotate(360deg); } }

/* ── CYBER HORIZON : ligne d'horizon Y2K visible dans le hero ── */
.cyber-horizon {
  position: fixed;
  left: -10%; right: -10%;
  top: 65%;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}
.cyber-horizon-line {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(120,200,255,.65) 18%, rgba(255,180,224,.85) 50%,
    rgba(120,200,255,.65) 82%, transparent 100%);
  box-shadow:
    0 0 18px rgba(180,220,255,.75),
    0 0 38px rgba(255,180,232,.45),
    0 -2px 30px rgba(180,220,255,.35);
}
.cyber-horizon-grid {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 240px;
  background-image: linear-gradient(90deg, rgba(180,220,255,.18) 1px, transparent 1px);
  background-size: 5% 100%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  transform-origin: 50% 0%;
  transform: perspective(420px) rotateX(60deg);
}
.cyber-horizon-glow {
  position: absolute; left: 30%; right: 30%; top: -28px; height: 80px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,200,240,.35) 0%, transparent 70%);
  filter: blur(8px);
  animation: horizonPulse 5s ease-in-out infinite;
}
@keyframes horizonPulse {
  0%, 100% { opacity: .55; transform: scaleX(1); }
  50%      { opacity: 1;   transform: scaleX(1.15); }
}

/* ── NOUVELLES COUCHES NUAGES (strato + ultra) ── */
.cloud-layer.strato { z-index: 0; }
.cloud-layer.ultra  { z-index: 6; }
.cloud-layer.strato .rcloud { opacity: .35; }
.cloud-layer.ultra  .rcloud { opacity: .78; }

/* ── NOUVEAUX DEPTH ELEMENTS ── */
.depth-planet {
  width: 90px; height: 90px;
  top: 8%; left: 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0%, rgba(255,210,232,.85) 22%, rgba(180,140,220,.75) 50%, rgba(80,60,140,.6) 78%, rgba(20,15,50,.85) 100%);
  box-shadow:
    inset -10px -8px 22px rgba(20,5,40,.55),
    inset 14px 12px 24px rgba(255,255,255,.35),
    0 0 18px rgba(255,180,232,.4),
    0 0 38px rgba(180,140,255,.3);
  animation: floatUp 14s ease-in-out infinite;
  opacity: .9;
}
.depth-planet::after {
  content: '';
  position: absolute;
  left: -22%; right: -22%;
  top: 38%; height: 18px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(180,220,255,.7), rgba(255,200,232,.7), rgba(180,220,255,.7), transparent);
  filter: blur(3px);
  transform: rotate(-15deg);
  opacity: .65;
}
.depth-smiley {
  width: 38px; height: 38px;
  top: 24%; right: -5%;
  animation: driftRight 38s linear infinite;
  filter: drop-shadow(0 4px 12px rgba(0,30,80,.45));
  image-rendering: pixelated; image-rendering: crisp-edges;
  opacity: .9;
}
.depth-disk {
  width: 32px; height: 32px;
  top: 64%; left: -5%;
  animation: driftLeft 44s linear infinite;
  filter: drop-shadow(0 4px 12px rgba(0,30,80,.45));
  image-rendering: pixelated; image-rendering: crisp-edges;
  opacity: .85;
}
@keyframes driftRight {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(-115vw, 22px, 0) rotate(-22deg); }
}
@keyframes driftLeft {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(115vw, -18px, 0) rotate(28deg); }
}

/* ════════════════════════════════════════════════════════════════
   LISIBILITÉ — text-shadows renforcés sur les zones critiques
   ════════════════════════════════════════════════════════════════ */

/* Hero : texte sur nuages clairs → halo sombre profond */
.hero-content { position: relative; z-index: 5; }
.hero-eyebrow {
  text-shadow:
    0 1px 0 rgba(0,15,55,.8),
    0 2px 14px rgba(0,15,55,.85),
    0 0 28px rgba(0,15,55,.55);
}
.hero-desc p {
  text-shadow:
    0 1px 0 rgba(0,15,55,.85),
    0 2px 14px rgba(0,15,55,.95),
    0 0 24px rgba(0,15,55,.6);
  font-weight: 500;
}
.hero-num .l {
  text-shadow:
    0 1px 0 rgba(0,15,55,.8),
    0 2px 10px rgba(0,15,55,.85);
}

/* Hero name : double drop-shadow pour dégager du fond */
h1.hero-name .line-1.chrome-anim,
h1.hero-name .line-2.chrome-blue {
  filter:
    drop-shadow(0 2px 0 rgba(0,15,55,.55))
    drop-shadow(0 8px 22px rgba(0,15,55,.7))
    drop-shadow(0 0 50px rgba(120,200,255,.35));
}

/* Contact : titre énorme sur nuages clairs → contre-fond sombre flouté */
.contact-big {
  filter:
    drop-shadow(0 4px 0 rgba(0,15,55,.45))
    drop-shadow(0 12px 32px rgba(0,15,55,.65))
    drop-shadow(0 0 60px rgba(120,200,255,.3));
}
.contact-big::before {
  background: radial-gradient(ellipse 65% 60% at 50% 55%,
    rgba(2,10,35,.55) 0%, rgba(2,10,35,.28) 45%, rgba(2,10,35,0) 85%);
  filter: blur(26px);
}
.contact-sub {
  text-shadow:
    0 1px 0 rgba(0,15,55,.85),
    0 2px 16px rgba(0,15,55,.95),
    0 0 34px rgba(0,15,55,.6);
  font-weight: 500;
}

/* Sec-title (titres de section) : halo plus profond */
.sec-title {
  filter: drop-shadow(0 4px 16px rgba(0,15,55,.7)) drop-shadow(0 0 36px rgba(120,200,255,.25));
}
.sec-num     { color: #C8DDFF; text-shadow: 0 2px 8px rgba(0,15,55,.7); }
.sec-label   { color: #DBEDFF; text-shadow: 0 2px 8px rgba(0,15,55,.7); }

/* Page header (sous-titre projets/apropos/etc) : amélioré */
.page-header h1 {
  filter:
    drop-shadow(0 4px 0 rgba(0,15,55,.5))
    drop-shadow(0 10px 28px rgba(0,15,55,.85))
    drop-shadow(0 0 50px rgba(0,30,100,.5));
}
.page-header p {
  text-shadow:
    0 1px 0 rgba(0,15,55,.85),
    0 2px 12px rgba(0,15,55,1),
    0 0 28px rgba(0,15,55,.7);
  color: #F4F8FF;
}

/* Panel paragraphes — assure que blocs texte sur nuages restent lisibles */
.panel p, .panel .about-lead {
  text-shadow:
    0 1px 0 rgba(0,15,55,.55),
    0 2px 8px rgba(0,15,55,.55);
}

/* ════════════════════════════════════════════════════════════════
   READABILITY CONTAINER : utilitaire pour zone texte sur fond clair
   ════════════════════════════════════════════════════════════════ */
.text-tint {
  position: relative;
  isolation: isolate;
}
.text-tint::before {
  content: ''; position: absolute;
  inset: -1.4rem -2rem;
  background: radial-gradient(ellipse 80% 80% at 50% 50%,
    rgba(2,10,35,.42) 0%, rgba(2,10,35,.18) 50%, transparent 90%);
  filter: blur(18px);
  z-index: -1;
}

/* ════════════════════════════════════════════════════════════════
   3D CARD TILT — appliqué via JS [data-tilt] (rotateX/Y + sweep)
   ════════════════════════════════════════════════════════════════ */
[data-tilt] {
  transform-style: preserve-3d;
  --tx: 0deg; --ty: 0deg; --gx: 50%; --gy: 50%;
  transition: transform .25s cubic-bezier(.22,.68,0,1.2), box-shadow .25s;
}
[data-tilt].is-tilting {
  transition: transform .12s linear, box-shadow .25s;
  transform: translateY(-6px) rotateX(var(--tx)) rotateY(var(--ty));
}
[data-tilt] .tilt-shine {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; z-index: 4;
  background: radial-gradient(circle 220px at var(--gx) var(--gy),
    rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 30%, transparent 60%);
  opacity: 0; transition: opacity .25s;
  mix-blend-mode: screen;
}
[data-tilt].is-tilting .tilt-shine { opacity: 1; }

/* Effet tilt natif sur les win-cards et panels (sans data-tilt requis) */
.win-card, .panel.holo-border, .stat-card {
  transform-style: preserve-3d;
  --tx: 0deg; --ty: 0deg; --gx: 50%; --gy: 50%;
}
.win-card.is-tilting {
  transform: translateY(-10px) rotateX(var(--tx)) rotateY(var(--ty)) rotate(-.3deg);
  transition: transform .12s linear, box-shadow .35s;
}
.panel.holo-border.is-tilting {
  transform: rotateX(var(--tx)) rotateY(var(--ty));
  transition: transform .12s linear;
}
.stat-card.is-tilting {
  transform: translateY(-3px) rotateX(var(--tx)) rotateY(var(--ty));
  transition: transform .12s linear;
}
/* Sweep iridescent qui suit la souris sur hover */
.win-card::before {
  content: ''; position: absolute; inset: 0; z-index: 3;
  border-radius: 14px;
  background: radial-gradient(circle 280px at var(--gx) var(--gy),
    rgba(255,200,240,.22) 0%, rgba(180,220,255,.12) 30%, transparent 65%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none; mix-blend-mode: screen;
}
.win-card.is-tilting::before { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   NAV : passage à un look chrome / aero plus prononcé
   ════════════════════════════════════════════════════════════════ */
nav {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 45%, rgba(0,0,0,.05)),
    linear-gradient(180deg, rgba(20,50,110,.55), rgba(8,30,80,.35));
  border-bottom: 1px solid rgba(180,220,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(120,200,255,.25),
    0 6px 24px rgba(0,10,40,.4),
    0 0 0 1px rgba(120,200,255,.1);
}
nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,220,255,.55) 20%, rgba(255,180,224,.55) 50%, rgba(180,220,255,.55) 80%, transparent);
  filter: blur(.3px);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   Z-INDEX HARMONISATION
   Tout reste DERRIÈRE le contenu (main) et le footer pour lisibilité.
   Atmos-haze juste sous le contenu pour assombrir les nuages.
   ════════════════════════════════════════════════════════════════ */
.sky-bg                 { z-index: 0; }
.starfield              { z-index: 1; }
.sky-sun                { z-index: 1; }
.cloud-layer.strato     { z-index: 1; }
.grid-floor             { z-index: 1; }
.cloud-layer.back       { z-index: 2; }
.cyber-horizon          { z-index: 2; }
.depth-layer.depth-far  { z-index: 3; }
.cloud-layer.mid        { z-index: 4; }
.depth-layer.depth-near { z-index: 4; }
.cloud-layer.front      { z-index: 5; }
.cloud-layer.ultra      { z-index: 5; }
.atmos-haze             { z-index: 5; }
main                    { z-index: 10; position: relative; }
footer                  { z-index: 11; }
nav                     { z-index: 500; }
.depth                  { z-index: 600; }
.y2k-taskbar            { z-index: 550; }
#cursor-ring            { z-index: 9998; }
#cursor                 { z-index: 9999; }

/* ════════════════════════════════════════════════════════════════
   HOLO BORDER : version améliorée (épaisseur + glow)
   ════════════════════════════════════════════════════════════════ */
.holo-border::before {
  padding: 2.5px;
  background: conic-gradient(from var(--ha, 0deg),
    #FF6ECB, #FFB05E, #FFD85E, #7EFF95, #6ECFFF, #C77EFF, #FF6ECB);
  filter: drop-shadow(0 0 12px rgba(255,140,220,.45)) drop-shadow(0 0 20px rgba(120,200,255,.3));
}

/* ════════════════════════════════════════════════════════════════
   MAGNETIC CTA — style supplémentaire pour boutons aimantés
   ════════════════════════════════════════════════════════════════ */
[data-magnetic] {
  transition: transform .3s cubic-bezier(.22,.68,0,1.2), filter .25s, box-shadow .25s;
  will-change: transform;
}

/* ════════════════════════════════════════════════════════════════
   HERO : amélioration de la profondeur (ajout glow chromatique)
   ════════════════════════════════════════════════════════════════ */
.hero::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 60% 40% at 25% 30%, rgba(255,180,232,.16) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 80% 70%, rgba(120,200,255,.18) 0%, transparent 60%);
  mix-blend-mode: screen;
}
.hero-content::before {
  content: ''; position: absolute; inset: -4rem -6rem;
  background: radial-gradient(ellipse 75% 65% at 25% 50%,
    rgba(2,10,35,.45) 0%, rgba(2,10,35,.18) 50%, transparent 90%);
  filter: blur(40px);
  z-index: -1; pointer-events: none;
}

/* Holo disc plus iridescent */
.holo-disc {
  filter: blur(1px) saturate(1.45);
  opacity: .7;
}

/* Bubbles : ajout d'un highlight iridescent supplémentaire */
.bubble::after {
  content:''; position:absolute; inset:0;
  border-radius:50%; pointer-events:none;
  background:
    radial-gradient(ellipse 22% 16% at 78% 76%, rgba(180,220,255,.55), transparent 70%),
    conic-gradient(from 90deg at 50% 50%, transparent 75%, rgba(255,180,232,.2) 80%, transparent 88%);
  mix-blend-mode: screen;
}

/* ════════════════════════════════════════════════════════════════
   SCROLL HINT : plus de présence
   ════════════════════════════════════════════════════════════════ */
.scroll-hint::before {
  content:''; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  width: 90px; height: 12px;
  background: radial-gradient(ellipse, rgba(2,10,35,.5), transparent 70%);
  filter: blur(8px);
  z-index: -1;
}

/* ════════════════════════════════════════════════════════════════
   FORM FIELDS : focus glow Y2K
   ════════════════════════════════════════════════════════════════ */
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: rgba(120,220,255,.85);
  box-shadow:
    0 0 0 3px rgba(120,200,255,.25),
    0 0 22px rgba(120,200,255,.4),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.field label {
  color: #DBEDFF;
  text-shadow: 0 1px 3px rgba(0,15,55,.6);
}

/* ════════════════════════════════════════════════════════════════
   PROJECTS : darken plus profond pour lisibilité du grid
   ════════════════════════════════════════════════════════════════ */
.projects-platform-tint {
  background: radial-gradient(ellipse 65% 58% at 50% 55%,
    rgba(2,10,35,.82) 0%, rgba(8,28,75,.7) 38%, rgba(8,28,75,.32) 70%, rgba(8,28,75,0) 95%);
}

/* card-desc plus lisible */
.card-desc {
  color: #F0F6FF;
  text-shadow: 0 1px 3px rgba(0,15,55,.85);
}
.card-name {
  color: #fff;
  text-shadow:
    0 2px 8px rgba(0,15,55,.85),
    0 0 18px rgba(120,200,255,.35);
}

/* ════════════════════════════════════════════════════════════════
   BTN : ajout d'un sweep iridescent au hover
   ════════════════════════════════════════════════════════════════ */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content:''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%,
    rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); }

/* Aqua hover plus rich */
.btn-aqua:hover, .btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 14px 35px rgba(0,80,200,.55),
    0 0 50px rgba(70,160,255,.45);
}

/* ════════════════════════════════════════════════════════════════
   TASKBAR : start menu + glow iridescent
   ════════════════════════════════════════════════════════════════ */
.y2k-taskbar::before {
  content:''; position: absolute; inset: -4px;
  border-radius: 18px;
  background: conic-gradient(from var(--ha, 0deg),
    rgba(255,110,203,.4), rgba(255,216,94,.4), rgba(126,255,149,.4),
    rgba(110,207,255,.4), rgba(199,126,255,.4), rgba(255,110,203,.4));
  filter: blur(14px);
  z-index: -1;
  opacity: .55;
  animation: holoBorderSpin 8s linear infinite;
}
.y2k-taskbar { position: fixed; }

/* ════════════════════════════════════════════════════════════════
   DEPTH RAIL (altitude) : un peu plus visible
   Les ticks sont des <button> (a11y) — on neutralise les styles
   natifs et on étend la zone de touche à 44×44 sans agrandir le visuel.
   ════════════════════════════════════════════════════════════════ */
.depth { gap: .8rem; }
.depth .tick {
  /* reset button */
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* visuel */
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: 1.5px solid rgba(255,255,255,.7);
  box-shadow: 0 0 8px rgba(180,220,255,.4);
  transition: background .3s, transform .3s, box-shadow .3s;
}
/* Zone de touche élargie (transparente, ne change pas le visuel) — WCAG 2.5.5 */
.depth .tick::before {
  content: '';
  position: absolute;
  inset: -18px;            /* 9 + 18*2 = 45px de zone tactile */
  border-radius: 50%;
}
.depth .tick.active {
  transform: scale(1.7);
  background: linear-gradient(135deg, #FFB0E0, #B0E0FF, #B0FFE0);
  box-shadow: 0 0 22px rgba(180,220,255,1), 0 0 36px rgba(255,180,232,.6);
}

/* ════════════════════════════════════════════════════════════════
   CONTACT : ajout d'un voile derrière le texte (lisibilité absolue)
   ════════════════════════════════════════════════════════════════ */
.contact-inner::before {
  content:''; position: absolute; inset: -4rem -6rem; z-index: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    rgba(2,10,35,.62) 0%, rgba(2,10,35,.28) 50%, transparent 88%);
  filter: blur(40px);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   CHROME-ANIM : speed up + plus brillant
   ════════════════════════════════════════════════════════════════ */
.chrome-anim {
  background-size: 100% 220%;
  animation-duration: 3.4s;
}

/* ════════════════════════════════════════════════════════════════
   PILL Y2K : effet glass plus marqué
   ════════════════════════════════════════════════════════════════ */
.pill-y2k {
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,30,80,.2),
    0 4px 14px rgba(0,40,120,.25);
  text-shadow: 0 1px 2px rgba(0,15,55,.5);
}

/* ════════════════════════════════════════════════════════════════
   ABOUT LEAD : plus blanc
   ════════════════════════════════════════════════════════════════ */
.about-lead {
  color: #F4F8FF;
  text-shadow: 0 1px 3px rgba(0,15,55,.6), 0 0 14px rgba(0,15,55,.4);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — désactive les éléments coûteux sur mobile
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sky-sun { width: 200px; height: 200px; top: 5%; right: 4%; }
  .cloud-layer.strato, .cloud-layer.ultra { display: none; }
  .grid-floor { display: none; }
  .depth-planet { width: 64px; height: 64px; left: 2%; top: 6%; }
}
@media (max-width: 700px) {
  .starfield { display: none; }
  .cyber-horizon { display: none; }
  .depth-smiley, .depth-disk { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .star-twinkle, .sky-sun-core, .sky-sun-ring,
  .cyber-horizon-glow, .depth-planet, .depth-smiley, .depth-disk {
    animation: none !important;
  }
  .btn::after { transition: none; transform: translateX(130%); }
}

/* ════════════════════════════════════════════════════════════════
   FALLING SENSATION — sky parallax + speed streaks + icônes qui filent
   ════════════════════════════════════════════════════════════════ */

/* SPEED STREAKS : motion lines verticales qui apparaissent quand on scroll vite */
.speed-streaks {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  background-image:
    linear-gradient(180deg, transparent, rgba(180,220,255,.45) 35%, rgba(255,180,232,.4) 50%, rgba(180,220,255,.45) 65%, transparent),
    linear-gradient(180deg, transparent, rgba(255,255,255,.3) 50%, transparent),
    linear-gradient(180deg, transparent, rgba(120,200,255,.4) 40%, rgba(180,255,232,.3) 60%, transparent),
    linear-gradient(180deg, transparent, rgba(255,200,232,.35) 50%, transparent),
    linear-gradient(180deg, transparent, rgba(180,220,255,.4) 45%, rgba(255,255,255,.3) 55%, transparent),
    linear-gradient(180deg, transparent, rgba(255,255,255,.25) 50%, transparent),
    linear-gradient(180deg, transparent, rgba(180,220,255,.35) 50%, transparent);
  background-size:
    1.5px 100%, 1px 100%, 2px 100%, 1px 100%, 1.5px 100%, 1px 100%, 1px 100%;
  background-position:
    8% 0, 14% 0, 22% 0, 31% 0, 38% 0, 46% 0, 54% 0;
  background-repeat: no-repeat;
  filter: blur(.5px);
  mix-blend-mode: screen;
  transition: opacity .12s linear;
  will-change: opacity, transform;
}
.speed-streaks::after {
  /* deuxième jeu de streaks à droite */
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, transparent, rgba(180,220,255,.4) 50%, transparent),
    linear-gradient(180deg, transparent, rgba(255,180,232,.35) 50%, transparent),
    linear-gradient(180deg, transparent, rgba(120,200,255,.45) 50%, transparent),
    linear-gradient(180deg, transparent, rgba(255,232,180,.3) 50%, transparent),
    linear-gradient(180deg, transparent, rgba(180,220,255,.4) 50%, transparent),
    linear-gradient(180deg, transparent, rgba(255,255,255,.35) 50%, transparent);
  background-size: 1px 100%, 1.5px 100%, 1px 100%, 2px 100%, 1px 100%, 1.5px 100%;
  background-position: 62% 0, 70% 0, 78% 0, 85% 0, 91% 0, 97% 0;
  background-repeat: no-repeat;
  filter: blur(.5px);
}

/* FALLING ICONS LAYER : conteneur fixe d'icônes qui dérivent verticalement */
.falling-icons {
  position: fixed;
  inset: -10vh -5% -10vh -5%;  /* déborde un peu pour ne pas révéler les bords */
  z-index: 4;                  /* entre nuages et content */
  pointer-events: none;
  overflow: hidden;
}
.fall-icon {
  position: absolute;
  image-rendering: pixelated; image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 10px rgba(0,15,55,.45)) drop-shadow(0 0 8px rgba(180,220,255,.25));
  animation: fallIconDrift 12s ease-in-out infinite;
  will-change: transform;
}
.fall-icon svg, .fall-icon img {
  width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  display: block;
}
@keyframes fallIconDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-22px) rotate(8deg); }
}

/* Icônes individuelles : tailles + positions différentes pour effet 3D */
.fall-icon.fi-floppy   { width: 38px; height: 38px; top: 12%;  left: 6%;  animation-delay: 0s;   animation-duration: 11s; }
.fall-icon.fi-cd       { width: 46px; height: 46px; top: 28%;  left: 18%; animation-delay: 1.2s; animation-duration: 14s; animation-name: fallIconSpin; }
.fall-icon.fi-mail     { width: 32px; height: 32px; top: 42%;  left: 4%;  animation-delay: .8s;  animation-duration: 9s; }
.fall-icon.fi-msn      { width: 42px; height: 42px; top: 58%;  left: 22%; animation-delay: 2.1s; animation-duration: 12s; }
.fall-icon.fi-speaker  { width: 30px; height: 30px; top: 72%;  left: 8%;  animation-delay: 3s;   animation-duration: 10s; }
.fall-icon.fi-notepad  { width: 36px; height: 36px; top: 86%;  left: 14%; animation-delay: 1.4s; animation-duration: 13s; }
.fall-icon.fi-trash    { width: 32px; height: 32px; top: 18%;  right: 8%; animation-delay: .6s;  animation-duration: 12s; }
.fall-icon.fi-globe    { width: 40px; height: 40px; top: 36%;  right: 18%;animation-delay: 1.8s; animation-duration: 15s; animation-name: fallIconSpin; }
.fall-icon.fi-outlook  { width: 34px; height: 34px; top: 52%;  right: 5%; animation-delay: 2.5s; animation-duration: 11s; }
.fall-icon.fi-bolt     { width: 28px; height: 28px; top: 66%;  right: 22%;animation-delay: .3s;  animation-duration: 8s; }
.fall-icon.fi-clip     { width: 30px; height: 30px; top: 80%;  right: 12%;animation-delay: 1.6s; animation-duration: 13s; }
.fall-icon.fi-smiley   { width: 36px; height: 36px; top: 92%;  right: 28%;animation-delay: 2.8s; animation-duration: 10s; }
.fall-icon.fi-flower   { width: 32px; height: 32px; top: 8%;   left: 42%; animation-delay: 1s;   animation-duration: 11s; }
.fall-icon.fi-heart    { width: 26px; height: 26px; top: 48%;  left: 48%; animation-delay: 2.2s; animation-duration: 9s; }
.fall-icon.fi-butterfly{ width: 38px; height: 38px; top: 78%;  left: 54%; animation-delay: 1.7s; animation-duration: 12s; }
@keyframes fallIconSpin {
  0%   { transform: translateY(0)    rotate(0deg); }
  50%  { transform: translateY(-18px) rotate(180deg); }
  100% { transform: translateY(0)    rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════
   NOUVELLES DÉCO HERO — Y2K élargi (Happy Mac, Clippy, lightning, etc.)
   ════════════════════════════════════════════════════════════════ */
/* Décos concentrées dans la moitié haute du hero (au-dessus de la ligne de flottaison)
   pour entourer le titre sans le concurrencer */
.y2k-deco-notepad  { width: 44px; height: 44px; top: 5%;  right: 8%;  animation-delay: 2.5s; transform: rotate(4deg);  animation-duration: 12s; }
.y2k-deco-smiley   { width: 56px; height: 56px; top: 14%; right: 4%;  animation-delay: .6s;  transform: rotate(-6deg); animation-duration: 11s; }
.y2k-deco-pc       { width: 60px; height: 60px; top: 8%;  right: 32%; animation-delay: 2.8s; transform: rotate(-4deg); animation-duration: 13s; }
.y2k-deco-trash    { width: 40px; height: 40px; top: 4%;  left: 48%;  animation-delay: 1.8s; transform: rotate(8deg);  animation-duration: 11s; }
.y2k-deco-globe    { width: 48px; height: 48px; top: 24%; right: 18%; animation-delay: .9s;  animation-duration: 12s; }
.y2k-deco-clip     { width: 44px; height: 44px; top: 26%; left: 3%;   animation-delay: 2.4s; transform: rotate(-10deg);animation-duration: 10s; }
.y2k-deco-msn      { width: 50px; height: 50px; top: 42%; right: 4%;  animation-delay: 3.2s; transform: rotate(6deg);  animation-duration: 11s; }
.y2k-deco-bolt     { width: 38px; height: 38px; top: 56%; right: 24%; animation-delay: 1.4s; animation-duration: 9s; }
.y2k-deco-speaker  { width: 40px; height: 40px; top: 88%; left: 36%;  animation-delay: 1.1s; transform: rotate(-8deg); animation-duration: 10s; }

/* Légère pulse iridescent sur le smiley (Happy Mac vit) */
.y2k-deco-smiley { filter: drop-shadow(0 4px 14px rgba(120,200,255,.55)) drop-shadow(0 0 20px rgba(255,200,240,.4)); }
.y2k-deco-clip   { filter: drop-shadow(0 4px 14px rgba(255,180,232,.55)) drop-shadow(0 0 22px rgba(180,220,255,.4)); }
.y2k-deco-bolt   { filter: drop-shadow(0 4px 14px rgba(255,232,80,.65)) drop-shadow(0 0 22px rgba(255,180,80,.5)); }
.y2k-deco-pc     { filter: drop-shadow(0 6px 18px rgba(0,30,90,.55)) drop-shadow(0 0 18px rgba(120,200,255,.35)); }
.y2k-deco-globe  { filter: drop-shadow(0 4px 14px rgba(120,200,255,.55)) drop-shadow(0 0 22px rgba(120,255,180,.35)); animation: y2kSpin 18s linear infinite; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — désactive les éléments coûteux sur mobile
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .falling-icons { display: none; }
  .y2k-deco-pc, .y2k-deco-msn, .y2k-deco-notepad, .y2k-deco-trash, .y2k-deco-speaker { display: none; }
}
@media (max-width: 700px) {
  .speed-streaks { display: none; }
  .y2k-deco-clip, .y2k-deco-globe, .y2k-deco-bolt { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   COLLAGE Y2K LAYER — inspiré des refs (chrome stars, halftone,
   stickers chunky, mini-widgets desktop)
   ════════════════════════════════════════════════════════════════ */

/* ─── CHROME 3D STARS (refs 2, 5) — étoiles métalliques liquides ─── */
.chrome-star {
  position: absolute;
  pointer-events: none;
  filter:
    drop-shadow(0 4px 0 rgba(0,15,45,.55))
    drop-shadow(0 10px 22px rgba(0,15,45,.6))
    drop-shadow(0 0 14px rgba(255,200,240,.35));
  animation: chromeStarFloat 8s ease-in-out infinite;
  will-change: transform;
}
.chrome-star svg { width: 100%; height: 100%; display: block; }
@keyframes chromeStarFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-18px) rotate(calc(var(--rot, 0deg) + 14deg)); }
}
/* Variantes de taille / position dans le hero */
.chrome-star.cs-1 { width: 110px; height: 110px; top: 4%;  left: 4%;   --rot: -12deg; animation-delay: 0s; }
.chrome-star.cs-2 { width: 64px;  height: 64px;  top: 38%; right: 12%; --rot:  8deg;  animation-delay: 1.4s; }
.chrome-star.cs-3 { width: 84px;  height: 84px;  top: 70%; left: 38%;  --rot: -18deg; animation-delay: 2.6s; }
.chrome-star.cs-4 { width: 50px;  height: 50px;  top: 18%; left: 64%;  --rot: 22deg;  animation-delay: 3.4s; }
.chrome-star.cs-5 { width: 72px;  height: 72px;  top: 86%; right: 6%;  --rot: -6deg;  animation-delay: 1.8s; }

/* ─── HALFTONE DOT BURSTS (refs 2, 7) — explosions de points ─── */
.halftone-burst {
  position: absolute;
  pointer-events: none;
  color: #050B1F;          /* couleur des points */
  opacity: .55;
  mix-blend-mode: multiply;
  z-index: 2;              /* derrière le titre, devant les nuages */
  animation: htPulse 6s ease-in-out infinite;
  will-change: transform, opacity;
}
.halftone-burst svg { width: 100%; height: 100%; display: block; }
@keyframes htPulse {
  0%, 100% { transform: scale(1)    rotate(var(--rot, 0deg)); opacity: .55; }
  50%      { transform: scale(1.06) rotate(calc(var(--rot, 0deg) + 8deg)); opacity: .68; }
}
.halftone-burst.hb-1 { width: 460px; height: 460px; top: -8%; left: -8%; --rot: -10deg; }
.halftone-burst.hb-2 { width: 380px; height: 380px; bottom: -6%; right: -4%; --rot: 22deg; animation-delay: 2s; }
.halftone-burst.hb-3 { width: 320px; height: 320px; top: 32%; right: 44%; --rot: -18deg; opacity: .35; animation-delay: 4s; }

/* ─── STAR BURSTS POINTUS (refs 2, 7) — éclats coloriés ─── */
.star-burst {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0,15,45,.5));
  animation: chromeStarFloat 9s ease-in-out infinite;
}
.star-burst svg { width: 100%; height: 100%; display: block; }
.star-burst.sb-black  { color: #050B1F; }
.star-burst.sb-pink   { color: #FF3A8C; }
.star-burst.sb-aqua   { color: #1870DC; }
.star-burst.sb-yellow { color: #FFB81F; }
.star-burst.sb-1 { width: 84px;  height: 84px;  top: 14%; right: 22%; --rot: 0deg;   animation-delay: .8s; }
.star-burst.sb-2 { width: 60px;  height: 60px;  top: 64%; left: 12%;  --rot: 20deg;  animation-delay: 2.2s; }
.star-burst.sb-3 { width: 48px;  height: 48px;  top: 90%; left: 28%;  --rot: -10deg; animation-delay: 1.5s; }

/* ─── STICKERS Y2K CHUNKY (refs 2, 7) — labels rotated avec contour épais ─── */
.y2k-sticker {
  position: absolute;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem 1.05rem;
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(180deg, #FF6ECB 0%, #C71D8C 100%);
  border: 3px solid #fff;
  border-radius: 14px;
  box-shadow:
    0 0 0 3px #050B1F,
    0 6px 0 #050B1F,
    0 14px 22px rgba(5,11,31,.55);
  text-shadow:
    1px 1px 0 #050B1F,
    -1px 1px 0 #050B1F,
    1px -1px 0 #050B1F,
    -1px -1px 0 #050B1F,
    0 2px 4px rgba(0,0,0,.4);
  pointer-events: none;
  z-index: 6;
  animation: stickerWobble 4.2s ease-in-out infinite;
  white-space: nowrap;
  will-change: transform;
  --rot: -8deg;
}
.y2k-sticker::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #050B1F, 0 0 8px rgba(255,255,255,.7);
  flex-shrink: 0;
}
@keyframes stickerWobble {
  0%, 100% { transform: rotate(var(--rot, -8deg)) translateY(0); }
  50%      { transform: rotate(calc(var(--rot, -8deg) + 3deg)) translateY(-5px); }
}
.y2k-sticker.aqua   { background: linear-gradient(180deg, #6ECFFF 0%, #1870DC 100%); }
.y2k-sticker.lime   { background: linear-gradient(180deg, #7EFF95 0%, #1FB456 100%); color: #052020; text-shadow: 1px 1px 0 #052020, -1px 1px 0 #052020, 1px -1px 0 #052020, -1px -1px 0 #052020; }
.y2k-sticker.yellow { background: linear-gradient(180deg, #FFE060 0%, #DC8800 100%); color: #2A1700; text-shadow: 1px 1px 0 #2A1700, -1px 1px 0 #2A1700, 1px -1px 0 #2A1700, -1px -1px 0 #2A1700; }
.y2k-sticker.holo   {
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 50%),
    linear-gradient(115deg, #FFB0E0, #B0E0FF 30%, #B0FFE0 55%, #FFE89A 75%, #E0B0FF 100%);
  color: #1A0F30;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

/* Positions stickers hero — placés en bordure pour ne pas chevaucher le titre */
.y2k-sticker.st-1 { top: 4%;  left: 4%;    --rot: -10deg; animation-delay: 0s; }
.y2k-sticker.st-2 { top: 8%;  right: 22%;  --rot: 8deg;   animation-delay: 1.6s; }
.y2k-sticker.st-3 { bottom: 6%;  left: 4%; top: auto;     --rot: -6deg;  animation-delay: 2.2s; }
.y2k-sticker.st-4 { top: 62%; right: 6%;   --rot: 12deg;  animation-delay: 3.4s; }
.y2k-sticker.st-5 { top: 92%; right: 38%;  --rot: -16deg; animation-delay: 1s; }

/* Sticker pour les sections projets / contact */
.y2k-sticker.is-section { position: relative; display: inline-flex; }

/* ─── MINI WINDOWS (refs 6, 7) — fenêtres desktop empilées flottantes ─── */
.mini-window {
  position: absolute;
  width: 220px;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 60%, rgba(0,0,0,.05));
  border: 1px solid rgba(255,255,255,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 18px 40px rgba(0,15,45,.55),
    0 0 30px rgba(120,200,255,.2);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  font-family: 'Space Grotesk', sans-serif;
  z-index: 7;
  pointer-events: auto;
  --rot: -3deg;
  transform: rotate(var(--rot));
  transition: transform .3s cubic-bezier(.22,.68,0,1.2);
}
.mini-window:hover { transform: rotate(0deg) translateY(-4px); }
.mini-window-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .42rem .65rem;
  background: linear-gradient(180deg, #3DA0F5 0%, #1575E8 50%, #0D5DD0 100%);
  border-bottom: 1px solid rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.mini-window-bar .win-dots span { width: 8px; height: 8px; }
.mini-window-bar .label {
  font-size: .58rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 2px rgba(0,40,100,.6);
}
.mini-window-body {
  padding: .85rem .9rem;
  color: #fff;
}

/* CD Player widget */
.mini-cd-widget {
  /* hérite de .mini-window, classe additionnelle pour positionnement */
  top: 78%; right: 4%;
  --rot: -4deg;
}
.mini-cd-disk {
  width: 38px; height: 38px;
  image-rendering: pixelated; image-rendering: crisp-edges;
  flex-shrink: 0;
  animation: y2kSpin 5s linear infinite;
  filter: drop-shadow(0 2px 6px rgba(0,40,100,.5));
}
.mini-cd-row {
  display: flex; align-items: center; gap: .65rem;
}
.mini-cd-info { flex: 1; min-width: 0; }
.mini-cd-track {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: .82rem; color: #fff;
  text-shadow: 0 1px 2px rgba(0,15,45,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-cd-artist {
  font-size: .64rem; color: #C8DDFF;
  letter-spacing: .04em; margin-top: .15rem;
  text-shadow: 0 1px 2px rgba(0,15,45,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-cd-bar {
  height: 5px; border-radius: 100px;
  background: rgba(5,15,45,.5);
  border: 1px solid rgba(255,255,255,.25);
  margin-top: .55rem;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.mini-cd-bar span {
  display: block; height: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), transparent 50%),
    linear-gradient(90deg, #6ECFFF, #3AA8FF 50%, #FF6ECB);
  border-radius: 100px;
  box-shadow: 0 0 8px rgba(120,200,255,.6);
  width: 64%;
  animation: cdProgress 18s linear infinite;
}
@keyframes cdProgress {
  0%   { width: 0%; }
  92%  { width: 100%; }
  100% { width: 100%; }
}
.mini-cd-controls {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .6rem;
  font-size: .68rem; color: #DBEDFF;
  letter-spacing: .12em;
}
.mini-cd-controls span {
  cursor: pointer;
  opacity: .85; transition: opacity .2s;
}
.mini-cd-controls span:hover { opacity: 1; }

/* System message widget Y2K — placé en haut-gauche au-dessus du titre */
.mini-sys-widget {
  top: 4%; left: 50%;
  transform: rotate(4deg) translateX(-50%);
  width: 220px;
  --rot: 4deg;
  z-index: 7;
}
.mini-sys-widget:hover { transform: rotate(0deg) translateX(-50%) translateY(-4px); }
.mini-sys-msg {
  font-size: .76rem; line-height: 1.45;
  color: #F0F6FF;
  text-shadow: 0 1px 2px rgba(0,15,45,.65);
}
.mini-sys-msg strong { color: #fff; font-weight: 700; }
.mini-sys-actions {
  display: flex; gap: .35rem; margin-top: .7rem; justify-content: flex-end;
}
.mini-sys-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .62rem; font-weight: 700; letter-spacing: .08em;
  padding: .3rem .65rem; border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.55);
  color: #fff; cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,15,45,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  transition: filter .2s, transform .2s;
}
.mini-sys-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.mini-sys-btn.primary {
  background: linear-gradient(180deg, #3AA8FF, #0065DD);
  border-color: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 12px rgba(0,80,200,.4);
}

/* ─── EDITORIAL ROTATED LABELS (ref 3 — Nike watch style) ─── */
.editorial-label {
  position: absolute;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  pointer-events: none;
  z-index: 5;
  text-shadow: 0 1px 3px rgba(0,15,45,.6);
}
.editorial-label.el-1 { top: 10%; left: -1.5%; }
.editorial-label.el-2 { top: 50%; right: -1%; }
.editorial-label.el-3 { bottom: 8%;  left: 50%; }

/* ─── Responsive — hide les éléments lourds sur mobile ─── */
@media (max-width: 900px) {
  .chrome-star.cs-1, .chrome-star.cs-3, .chrome-star.cs-5 { display: none; }
  .halftone-burst.hb-2, .halftone-burst.hb-3 { display: none; }
  .star-burst.sb-2, .star-burst.sb-3 { display: none; }
  .y2k-sticker.st-3, .y2k-sticker.st-4, .y2k-sticker.st-5 { display: none; }
  .mini-cd-widget { width: 180px; top: 92%; right: 2%; }
  .mini-sys-widget { display: none; }
  .editorial-label { display: none; }
}
@media (max-width: 700px) {
  .chrome-star, .halftone-burst, .star-burst { display: none; }
  .y2k-sticker.st-1, .y2k-sticker.st-2 { display: none; }
  .mini-cd-widget { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chrome-star, .halftone-burst, .star-burst, .y2k-sticker, .mini-cd-disk {
    animation: none !important;
  }
  .mini-cd-bar span { animation: none; width: 64%; }
}

/* ════════════════════════════════════════════════════════════════
   IS-SCROLLING — ajouté par JS pendant un scroll actif (~140ms)
   Coupe les effets composite les plus chers pour que le scroll reste fluide.
   Le navigateur reprend ses ressources GPU pour faire défiler la page.
   ════════════════════════════════════════════════════════════════ */
.is-scrolling .panel,
.is-scrolling .win-card,
.is-scrolling .mini-window,
.is-scrolling nav,
.is-scrolling .y2k-taskbar,
.is-scrolling .nav-sticker,
.is-scrolling .btn,
.is-scrolling .scroll-hint {
  /* On garde l'effet glass au repos, on le coupe pendant le scroll */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.is-scrolling .chrome-anim,
.is-scrolling .sky-sun-core,
.is-scrolling .sky-sun-ring,
.is-scrolling .cyber-horizon-glow,
.is-scrolling .star-twinkle,
.is-scrolling .y2k-deco,
.is-scrolling .chrome-star,
.is-scrolling .halftone-burst,
.is-scrolling .y2k-sticker {
  animation-play-state: paused !important;
}

/* ════════════════════════════════════════════════════════════════
   LOW-POWER MODE — appliqué par JS (.low-power sur <body>)
   pour mobiles, tactile, peu de RAM/coeurs, ou écran < 900px.
   Coupe les effets GPU les plus chers pour réduire CPU/GPU/batterie.
   ════════════════════════════════════════════════════════════════ */
.low-power {
  cursor: auto;                /* le custom cursor coûte des paints */
}
.low-power #cursor,
.low-power #cursor-ring {
  display: none;
}
/* Coupe les deux overlays full-screen (noise + scanlines) qui repaint en permanence */
.low-power::before,
.low-power::after { display: none !important; }

/* Coupe le backdrop-filter partout (post-process plein écran très coûteux) */
.low-power nav,
.low-power .panel,
.low-power .panel.holo-border,
.low-power .win-card,
.low-power .mini-window,
.low-power .scroll-hint,
.low-power .y2k-sticker,
.low-power .y2k-badge,
.low-power .pill-y2k,
.low-power .flash,
.low-power .btn,
.low-power .nav-sticker,
.low-power .card-cat,
.low-power .card-link,
.low-power .card-thumb,
.low-power .stat-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Désactive les blur sur nuages (très lourd avec mix-blend-mode) */
.low-power .cloud-layer .rcloud,
.low-power .cloud-layer.strato .rcloud,
.low-power .cloud-layer.back .rcloud,
.low-power .cloud-layer.ultra .rcloud {
  filter: none !important;
  mix-blend-mode: normal;
}

/* Coupe les animations infinies décoratives (les Y2K decos restent statiques) */
.low-power .star-twinkle,
.low-power .sky-sun-core,
.low-power .sky-sun-ring,
.low-power .cyber-horizon-glow,
.low-power .depth-plane,
.low-power .depth-balloon,
.low-power .depth-bird,
.low-power .depth-shooter,
.low-power .depth-smiley,
.low-power .depth-disk,
.low-power .depth-planet,
.low-power .chrome-star,
.low-power .halftone-burst,
.low-power .star-burst,
.low-power .y2k-sticker,
.low-power .y2k-deco,
.low-power .chrome-anim,
.low-power .mini-cd-disk,
.low-power .mini-cd-bar span,
.low-power .cloud-layer.back .rcloud,
.low-power .cloud-layer.mid .rcloud,
.low-power .fall-icon {
  animation: none !important;
}

/* Will-change consomme de la RAM GPU — utile seulement quand ça bouge */
.low-power .sky-bg,
.low-power .cloud-layer,
.low-power .depth-el,
.low-power .sky-sun,
.low-power .cyber-horizon,
.low-power .rcloud,
.low-power #cursor,
.low-power #cursor-ring,
.low-power .chrome-star,
.low-power .halftone-burst {
  will-change: auto;
}

/* Simplifie les filtres drop-shadow empilés (jusqu'à 3x sur certains éléments) */
.low-power .chrome-star,
.low-power .halftone-burst,
.low-power .star-burst,
.low-power .y2k-deco,
.low-power .y2k-deco-smiley,
.low-power .y2k-deco-clip,
.low-power .y2k-deco-bolt,
.low-power .y2k-deco-pc,
.low-power .y2k-deco-globe,
.low-power .depth-el {
  filter: none;
}

/* Skip-rendering des sections hors viewport (sauf le hero qui est toujours
   actif via le parallax) — l'effet est gratuit côté layout grâce à
   contain-intrinsic-size */
.cloud-section + .cloud-section,
.cloud-section.projects,
.cloud-section.contact {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* Empêche le grain noise + scanlines de repaint pendant un scroll long :
   ils restent fixed donc le navigateur les redessine quand le viewport bouge.
   On les passe en will-change:auto pour ne pas garder de couche GPU dédiée
   (économie mémoire), et on retire le mix-blend-mode lourd en low-power
   déjà couvert plus haut. */

/* ════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — skip-link, focus-visible, field-help
   ════════════════════════════════════════════════════════════════ */

/* Skip-link : caché hors-écran sauf au focus clavier (Tab) */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 99999;
  background: #051433;
  color: #fff;
  padding: .9rem 1.4rem;
  border-radius: 0 0 14px 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #39FF7A;
  box-shadow: 0 8px 24px rgba(0,10,40,.55);
  transition: transform .18s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 3px solid #39FF7A;
  outline-offset: 2px;
}

/* Focus-visible cohérent et accessible (WCAG 4.5:1 vs fond bleu)
   On utilise :focus-visible pour ne pas l'afficher au clic souris. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.tick:focus-visible,
.y2k-taskbar-item:focus-visible,
.win-card:focus-visible,
.mini-sys-btn:focus-visible,
summary:focus-visible {
  outline: 3px solid #39FF7A;
  outline-offset: 3px;
  border-radius: 6px;
}
/* Inputs : focus ring distinct du `box-shadow` :focus existant pour le clavier */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #39FF7A;
  outline-offset: 2px;
}

/* Hint persistant sous les champs (registration) — meilleur que placeholder seul */
.field-help {
  display: block;
  margin-top: .5rem;
  font-size: .78rem;
  letter-spacing: .03em;
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 2px rgba(0,15,45,.5);
}

/* ════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — coupe globalement TOUTES les animations
   infinies et le smooth-scroll. Respect strict WCAG 2.3.3.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Affiche immédiatement les éléments qui dépendaient d'une transition fall-in */
  .fall-in { opacity: 1 !important; transform: none !important; }
}