:root {
  --bg: #050507;
  --surface: #0c0c0f;
  --surface2: #121215;
  --surface3: #181820;
  --border: rgba(255,255,255,0.055);
  --border2: rgba(255,255,255,0.1);
  --accent: #e8ff00;
  --accent2: #00d4ff;
  --accent-dim: rgba(232,255,0,0.07);
  --text: #eeeae4;
  --muted: rgba(238,234,228,0.38);
  --muted2: rgba(238,234,228,0.14);
  --sidebar-w: 68px;
  --projects-w: 260px;
  --footer-h: 48px;
  --gap: 8px;
  --r: 10px;          /* ← border-radius unifié 10px */
  --shadow: 0 20px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  cursor: none;
  background-image:
    radial-gradient(ellipse 60vw 40vw at 50% -8%, rgba(255,255,255,.055), transparent 42%),
    radial-gradient(ellipse 28vw 28vw at 12% 82%, rgba(0,212,255,.04), transparent 40%),
    radial-gradient(ellipse 22vw 22vw at 92% 18%, rgba(232,255,0,.03), transparent 38%);
}

/* ── CURSOR ── */
#cur { position:fixed; width:7px; height:7px; background:var(--accent); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:exclusion; transition:width .18s,height .18s; }
#cur-ring { position:fixed; width:32px; height:32px; border:1px solid rgba(232,255,0,.22); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .32s,height .32s,border-color .32s; }
body.hovering #cur { width:13px; height:13px; }
body.hovering #cur-ring { width:48px; height:48px; border-color:rgba(232,255,0,.5); }

/* ── NOISE ── */
body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.02; pointer-events:none; z-index:9990; }

/* ════════════════════════════════
   SHELL DESKTOP
════════════════════════════════ */
#shell {
  position: fixed; inset: var(--gap);
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--projects-w);
  grid-template-rows: 1fr var(--footer-h);
  gap: var(--gap);
}

/* ════════════════════════════════
   NAV GAUCHE
════════════════════════════════ */
#nav-sidebar {
  grid-column: 1; grid-row: 1 / 3;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.016));
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 0 16px;
  position: relative; overflow: hidden;
  transform: none; opacity: 1;
  transition: transform .85s cubic-bezier(.16,1,.3,1), opacity .85s cubic-bezier(.16,1,.3,1);
}
#nav-sidebar.in { transform: translateX(0); opacity: 1; }
#nav-sidebar::after { content:'SHAKASS'; position:absolute; bottom:68px; left:50%; transform:translateX(-50%); font-family:'Bebas Neue'; font-size:10px; letter-spacing:.55em; color:rgba(255,255,255,.03); writing-mode:vertical-lr; pointer-events:none; white-space:nowrap; }

.nav-brand { width:36px; height:36px; border-radius:8px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue'; font-size:21px; color:var(--bg); letter-spacing:.04em; margin-bottom:22px; flex-shrink:0; overflow:hidden; }
.nav-brand span { display:inline-block; animation:logoScratch 3.5s cubic-bezier(0,.55,.45,1) infinite; animation-delay:2s; }

.nav-items { display:flex; flex-direction:column; gap:3px; flex:1; align-items:center; }
.nav-btn {
  width:42px; height:42px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:19px; cursor:none;
  border:1px solid transparent;
  transition:all .22s; text-decoration:none; position:relative;
  background:transparent;
}
.nav-btn:hover, .nav-btn.active { color:var(--accent); background:var(--accent-dim); border-color:rgba(232,255,0,.22); box-shadow:0 0 20px rgba(232,255,0,.10) inset, 0 0 10px rgba(232,255,0,.08); }
.nav-btn::after {
  content:attr(data-label);
  position:absolute; left:calc(100% + 12px);
  background:var(--surface2); border:1px solid var(--border2);
  color:var(--text); font-family:'DM Sans'; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; white-space:nowrap;
  opacity:0; transform:translateX(-5px);
  transition:opacity .16s,transform .16s; z-index:300;
  border-radius:var(--r); pointer-events:none;
}
.nav-btn:hover::after { opacity:1; transform:translateX(0); }

.nav-socials { display:flex; flex-direction:column; gap:8px; align-items:center; padding-top:14px; border-top:1px solid var(--border); }
.nav-soc { width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--muted2); font-size:15px; text-decoration:none; transition:color .2s; cursor:none; }
.nav-soc:hover { color:var(--accent); }

/* ════════════════════════════════
   MASQUE CENTRAL — DEVICE FRAME
════════════════════════════════ */
#mask-wrap {
  grid-column:2; grid-row:1;
  position:relative;
  transform:none; opacity:1;
  transition:transform 1s cubic-bezier(.16,1,.3,1) .1s, opacity 1s cubic-bezier(.16,1,.3,1) .1s;
}
#mask-wrap.in { transform:translateY(0); opacity:1; }

/* Cadre device */
.device-frame {
  position:absolute; inset:0;
  background:linear-gradient(145deg,#1e1e26 0%,#10101a 35%,#060608 100%);
  border-radius:18px;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.7),
    inset 1px 0 0 rgba(255,255,255,.04),
    inset -1px 0 0 rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none; z-index:10;
}
/* reflet haut */
.device-frame::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:50%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
}
/* notch */
.device-frame::after {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:160px; height:26px;
  background:var(--bg);
  border-bottom-left-radius:14px; border-bottom-right-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}

/* Logo notch — grand, couleurs d'origine */
.device-notch-logo {
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  z-index:25; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.device-notch-logo img { height:70px; width:auto; object-fit:contain; display:block; }

/* Chips menu — supprimés */
.device-menu { display:none !important; }

/* Point indicateur */
.device-dot { position:absolute; top:13px; right:16px; z-index:25; width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,.28); pointer-events:none; }
.device-dot::before { content:''; position:absolute; inset:2px; border-radius:50%; background:rgba(255,255,255,.14); animation:dp 3s ease-in-out infinite; }
@keyframes dp { 0%,100%{opacity:.3}50%{opacity:1} }

/* Boutons latéraux déco */
.device-buttons { position:absolute; left:-1px; top:25%; display:flex; flex-direction:column; gap:7px; z-index:25; pointer-events:none; }
.device-btn { width:3px; height:24px; background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03)); border-radius:2px 0 0 2px; }

/* ════ ÉCRAN (zone scrollable) ════ */
#mask {
  position:absolute;
  top:40px; left:9px; right:9px; bottom:9px;
  border-radius:10px;
  overflow:hidden;
  background:var(--surface);
  z-index:21;
}
#mask::before {
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.28),transparent);
  z-index:10; animation:sx 5s linear infinite; pointer-events:none;
}
@keyframes sx { 0%{top:0;opacity:0}5%{opacity:1}95%{opacity:1}100%{top:100%;opacity:0} }

#mask-scroll { position:absolute; inset:0; overflow-y:scroll; overflow-x:hidden; scroll-behavior:smooth; }
#mask-scroll::-webkit-scrollbar { width:2px; }
#mask-scroll::-webkit-scrollbar-thumb { background:rgba(232,255,0,.22); border-radius:1px; }

#scroll-prog { position:absolute; right:0; top:0; width:2px; height:100%; background:rgba(255,255,255,.03); z-index:20; pointer-events:none; }
#scroll-prog-bar { width:100%; height:0%; background:linear-gradient(to bottom,var(--accent),var(--accent2)); transition:height .05s; }

/* ════════════════════════════════
   SIDEBAR PROJETS — ACCORDÉON
════════════════════════════════ */
#proj-sidebar {
  grid-column:3; grid-row:1;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.016));
  border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
  transform:none; opacity:1;
  transition:transform .85s cubic-bezier(.16,1,.3,1) .2s, opacity .85s cubic-bezier(.16,1,.3,1) .2s;
}
#proj-sidebar.in { transform:translateX(0); opacity:1; }

.proj-head { padding:16px 16px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.proj-head-label { font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:7px; }
.proj-head-label::before { content:''; width:12px; height:1px; background:var(--accent); }
.proj-head-title { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; letter-spacing:-.04em; margin-top:3px; }
.proj-head-sub { font-size:21px; color:var(--muted); margin-top:6px; }

.proj-list { overflow-y:auto; flex:1; padding:8px; display:flex; flex-direction:column; gap:6px; }
.proj-list::-webkit-scrollbar { width:2px; }
.proj-list::-webkit-scrollbar-thumb { background:var(--border2); border-radius:1px; }

/* ── ACCORDÉON ITEM ── */
.pa-item {
  position:relative;
  height:72px;   /* hauteur fixe au repos — pas de min-height pour éviter le débordement */
  border-radius:var(--r);
  border:1px solid var(--border);
  overflow:hidden;
  cursor:none;
  transition:height .4s cubic-bezier(.16,1,.3,1), border-color .25s, transform .2s;
  background:rgba(255,255,255,.02);
  flex-shrink:0;
}
.pa-item:hover { height:112px; transform:translateX(-2px); border-color:rgba(255,255,255,.14); }
.pa-item.active { height:150px; border-color:rgba(232,255,0,.28); background:rgba(232,255,0,.025); }

.pa-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:grayscale(.35) brightness(.5) contrast(1.02); transition:filter .4s; }
.pa-item:hover .pa-bg, .pa-item.active .pa-bg { filter:grayscale(.12) brightness(.72) contrast(1.05); }
.pa-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,5,7,.64) 34%,rgba(5,5,7,.16) 100%); }

.pa-new { position:absolute; top:8px; right:8px; z-index:5; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); border:1px solid rgba(232,255,0,.3); padding:2px 6px; border-radius:999px; background:rgba(232,255,0,.06); }

.pa-meta { position:relative; z-index:2; padding:12px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; }
.pa-cat { font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.pa-name { font-family:'Syne',sans-serif; font-size:19px; font-weight:700; letter-spacing:-.03em; line-height:1.1; max-width:78%; }
.pa-year { font-size:14px; color:var(--muted2); }
.pa-desc { font-size:15px; color:var(--muted); line-height:1.6; max-width:82%; opacity:0; transform:translateY(6px); transition:opacity .25s,transform .25s; margin-top:1px; }
.pa-item:hover .pa-desc, .pa-item.active .pa-desc { opacity:1; transform:translateY(0); }

.proj-foot { padding:9px 16px; border-top:1px solid var(--border); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted2); flex-shrink:0; }

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
#footer {
  grid-column:2/4; grid-row:2;
  background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.016));
  border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow);
  display:flex; align-items:center; padding:0 20px; gap:20px;
  transform:none; opacity:1;
  transition:transform .8s cubic-bezier(.16,1,.3,1) .4s, opacity .8s cubic-bezier(.16,1,.3,1) .4s;
}
#footer.in { transform:translateY(0); opacity:1; }

.f-logo { font-family:'Bebas Neue'; font-size:21px; letter-spacing:.18em; }
.f-logo span { color:var(--accent); }
.f-sep { width:1px; height:16px; background:var(--border2); flex-shrink:0; }
.f-copy { font-size:14px; color:var(--muted); letter-spacing:.08em; }
.f-loc { font-size:19px; color:var(--muted2); display:flex; align-items:center; gap:6px; }
.f-loc i { color:var(--accent); font-size:12px; }
.f-links { display:flex; gap:16px; margin-left:auto; }
.f-links a { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; cursor:none; }
.f-links a:hover { color:var(--accent); }

/* ════════════════════════════════
   CONTENU — HERO
   FIX : height:100% au lieu de 100vh
════════════════════════════════ */
.ch {
  position:relative;
  height:100%;
  min-height:500px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:40px 44px 44px;
  overflow:hidden;
}
.ch-bg { position:absolute; inset:0; background:radial-gradient(ellipse 62% 52% at 63% 28%,rgba(0,212,255,.07) 0%,transparent 58%),radial-gradient(ellipse 32% 32% at 80% 82%,rgba(232,255,0,.04) 0%,transparent 48%),linear-gradient(145deg,#060608 0%,#0d0e14 100%); }
.ch-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px); background-size:64px 64px; }
.ch-orb { position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,212,255,.1),transparent 64%); top:36%; left:60%; transform:translate(-50%,-50%); animation:of 9s ease-in-out infinite; }
@keyframes of { 0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-56%) scale(1.07)} }
.ch-scan { position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(0,212,255,.22),transparent); animation:vs 8s linear infinite; pointer-events:none; }
@keyframes vs { 0%{top:0;opacity:0}5%{opacity:1}95%{opacity:1}100%{top:100%;opacity:0} }

.ch-stats { position:absolute; top:28px; right:36px; z-index:5; display:flex; flex-direction:column; gap:3px; text-align:right; }
.ch-stat-n { font-family:'Bebas Neue'; font-size:28px; color:var(--accent); line-height:1; }
.ch-stat-l { font-size:10px; letter-spacing:.22em; color:var(--muted); text-transform:uppercase; }

.ch-content { position:relative; z-index:5; }
.ch-tag { font-size:10px; letter-spacing:.5em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.ch-tag::before { content:''; width:18px; height:1px; background:var(--accent); }
.ch-title { font-family:'Bebas Neue'; font-size:clamp(72px,9vw,144px); line-height:.87; letter-spacing:-.01em; }
.ch-title em { font-style:normal; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.55); }
.ch-sub { margin-top:14px; font-size:16px; color:var(--muted); max-width:520px; line-height:1.85; }
.ch-ctas { margin-top:24px; display:flex; gap:9px; }
.ch-bg-num { position:absolute; bottom:32px; right:32px; font-family:'Bebas Neue'; font-size:64px; color:rgba(255,255,255,.018); line-height:1; pointer-events:none; }

/* ════════════════════════════════
   BOUTONS
════════════════════════════════ */
.btn-y { display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:var(--bg); font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; padding:10px 20px; text-decoration:none; transition:all .26s; cursor:none; border-radius:var(--r); }
.btn-y:hover { background:#fff; transform:translateY(-2px); }
.btn-o { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border2); color:var(--muted); font-size:12px; letter-spacing:.18em; text-transform:uppercase; padding:10px 20px; text-decoration:none; transition:all .26s; cursor:none; border-radius:var(--r); }
.btn-o:hover { border-color:var(--accent); color:var(--accent); }

/* ════════════════════════════════
   SECTIONS
════════════════════════════════ */
.cs { padding:48px 44px; position:relative; }
.cs + .cs { border-top:1px solid var(--border); }

.cl { font-size:10px; letter-spacing:.48em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.cl::before { content:''; width:16px; height:1px; background:var(--accent); }
.ct { font-family:'Bebas Neue'; font-size:clamp(45px,5.7vw,84px); line-height:.9; letter-spacing:-.01em; }
.ct em { font-style:normal; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.5); }

/* ABOUT */
.ab-wrap { display:grid; grid-template-columns:1fr 1.35fr; gap:40px; align-items:center; }
.ab-img-side { position:relative; }
.ab-frame { aspect-ratio:3/4; background:var(--surface2); overflow:hidden; position:relative; border:1px solid var(--border); border-radius:var(--r); }
.ab-frame img { width:100%; height:100%; object-fit:cover; filter:grayscale(.2) contrast(1.05); }
.ab-frame-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(5,5,7,.75) 0%,transparent 50%); }
.ab-corner { position:absolute; width:14px; height:14px; border-color:var(--accent); border-style:solid; }
.ab-corner.tl { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.ab-corner.br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.ab-badge { position:absolute; right:-16px; bottom:24px; background:rgba(5,5,7,.92); border:1px solid var(--border2); padding:10px 14px; backdrop-filter:blur(14px); border-radius:var(--r); }
.ab-badge-n { font-family:'Bebas Neue'; font-size:28px; color:var(--accent); line-height:1; }
.ab-badge-l { font-size:10px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }
.ab-text .ct { margin-bottom:16px; }
.ab-p { font-size:16px; color:var(--muted); line-height:1.9; margin-bottom:14px; }
.chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:18px; }
.chip { font-size:10px; letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--border); padding:5px 11px; color:var(--muted); transition:all .2s; cursor:none; border-radius:var(--r); }
.chip:hover { border-color:var(--accent); color:var(--accent); }

/* SERVICES */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:32px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.svc { background:var(--surface2); padding:22px 18px 18px; position:relative; overflow:hidden; transition:background .28s; }
.svc:hover { background:var(--surface3); }
.svc::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:0; transform:scaleX(0); transition:transform .6s ease, opacity .4s ease; z-index:2; }
.svc:hover::before { opacity:1; transform:scaleX(1); }
.svc-num { position:absolute; top:-6px; right:10px; font-family:'Bebas Neue'; font-size:50px; color:rgba(255,255,255,.032); line-height:1; pointer-events:none; }
.svc-icon { font-size:16px; color:var(--accent); margin-bottom:12px; display:block; position:relative; z-index:1; }
.svc-name { font-family:'Syne',sans-serif; font-size:18px; font-weight:700; margin-bottom:6px; position:relative; z-index:1; }
.svc-desc { font-size:15px; color:var(--muted); line-height:1.75; position:relative; z-index:1; }
.svc-foot { margin-top:14px; padding-top:10px; border-top:1px solid var(--border); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted2); position:relative; z-index:1; }

/* PROCESS */
.proc-wrap { position:relative; margin-top:40px; }
.p-step { display:grid; grid-template-columns:80px 1fr; gap:24px; padding:36px 0; border-bottom:1px solid var(--border); position:relative; transition:all .4s cubic-bezier(.16,1,.3,1); }
.p-step:last-child { border-bottom:none; }
.p-step:hover { padding-left:8px; }
.ps-left { position:relative; }
.ps-n {
  font-family:'Bebas Neue'; font-size:40px; color:var(--accent); line-height:1;
  position:relative; transition:color .35s;
}
.ps-n::before, .ps-n::after {
  content:attr(data-n); position:absolute; top:0; left:0;
  font-family:'Bebas Neue'; font-size:40px; color:var(--accent); opacity:0;
  transition:top .35s, opacity .35s;
}
.p-step:hover .ps-n::before { opacity:.3; top:100%; }
.p-step:hover .ps-n::after  { opacity:.1; top:200%; }
.ps-title {
  font-family:'Syne',sans-serif; font-size:20px; font-weight:700;
  color:var(--text); margin-bottom:8px; transition:color .35s;
}
.ps-desc {
  font-size:15px; color:var(--muted); line-height:1.8; max-width:520px;
  transition:color .35s;
}
.ps-tag {
  display:inline-block; margin-top:14px; padding:4px 12px;
  border:1px solid var(--border2); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted2); border-radius:4px;
  transition:border-color .3s, color .3s;
}
.p-step:hover .ps-tag { border-color:var(--accent); color:var(--accent); }
.ps-connector {
  position:absolute; left:19px; top:100%; width:1px; height:36px;
  background:linear-gradient(to bottom, var(--border2), transparent);
  display:none;
}
.p-step:not(:last-child) .ps-connector { display:block; }


/* TÉMOIGNAGES */
.tg { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:32px; }
.tgc { background:var(--surface2); border:1px solid var(--border); padding:20px 18px; position:relative; overflow:hidden; transition:border-color .26s; border-radius:var(--r); }
.tgc:hover { border-color:rgba(232,255,0,.13); }
.tgc-q { position:absolute; top:10px; right:14px; font-family:'Bebas Neue'; font-size:48px; color:rgba(255,255,255,.028); line-height:1; pointer-events:none; }
.tgc-stars { color:var(--accent); font-size:15px; letter-spacing:2px; margin-bottom:10px; }
.tgc-text { font-size:15px; color:var(--muted); line-height:1.8; margin-bottom:18px; font-style:italic; }
.tgc-author { font-size:15px; font-weight:500; }
.tgc-role { font-size:12px; color:var(--muted); letter-spacing:.1em; }

/* CONTACT */
.cc-wrap { text-align:center; position:relative; background:var(--surface2); overflow:hidden; }
.cc-wrap::before { content:'CONTACT'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Bebas Neue'; font-size:140px; color:rgba(255,255,255,.012); white-space:nowrap; pointer-events:none; }
.cc-wrap > * { position:relative; z-index:1; }
.cc-email { display:block; font-family:'Bebas Neue'; font-size:clamp(16px,2.2vw,28px); color:var(--text); text-decoration:none; margin:18px 0; letter-spacing:.1em; transition:color .26s; cursor:none; }
.cc-email:hover { color:var(--accent); }
.cc-infos { display:flex; justify-content:center; gap:28px; margin-top:20px; flex-wrap:wrap; }
.cc-info { font-size:14px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.cc-info i { color:var(--accent); }

/* ════════════════════════════════
   VUE PROJET
════════════════════════════════ */
#c-proj { display:none; }
#c-proj.on { display:block; }
.pv-hero { position:relative; height:340px; overflow:hidden; background:var(--surface2); }
.pv-hero img { width:100%; height:140%; object-fit:cover; filter:grayscale(.25) brightness(.6); object-position:center top; }
.pv-hero-ov { position:absolute; inset:0; background:linear-gradient(to top,var(--surface) 0%,rgba(5,5,7,.5) 42%,transparent 68%); }
.pv-back { position:absolute; top:16px; left:16px; z-index:10; display:flex; align-items:center; gap:6px; background:rgba(5,5,7,.72); border:1px solid var(--border2); padding:6px 13px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); cursor:none; transition:all .2s; backdrop-filter:blur(12px); border-radius:999px; }
.pv-back:hover { color:var(--accent); border-color:rgba(232,255,0,.3); }
.pv-hero-info { position:absolute; bottom:20px; left:32px; right:32px; z-index:10; }
.pv-cat { font-size:10px; letter-spacing:.42em; text-transform:uppercase; color:var(--accent); margin-bottom:5px; }
.pv-name { font-family:'Bebas Neue'; font-size:42px; line-height:.88; }
.pv-year { font-size:14px; color:var(--muted); margin-top:4px; }
.pv-body { padding:32px 44px 52px; display:grid; grid-template-columns:1.2fr 1fr; gap:36px; }
.pv-desc { font-size:16px; color:var(--muted); line-height:1.9; }
.pv-pills { display:grid; gap:6px; margin-top:16px; }
.pv-pill { padding:10px 14px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface2); font-size:15px; color:rgba(238,234,228,.55); line-height:1.4; display:flex; align-items:center; gap:8px; }
.pv-pill::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.pv-link { display:inline-flex; align-items:center; gap:7px; margin-top:22px; color:var(--accent); font-size:18px; letter-spacing:.25em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid rgba(232,255,0,.28); padding-bottom:3px; transition:gap .2s,border-color .2s; cursor:none; }
.pv-link:hover { gap:13px; border-color:var(--accent); }
.pv-sidebar {}
.pv-sb { margin-bottom:20px; }
.pv-sb-label { font-size:10px; letter-spacing:.35em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; display:flex; align-items:center; gap:7px; }
.pv-sb-label::before { content:''; width:10px; height:1px; background:var(--accent); }
.pv-sb-val { font-family:'Syne',sans-serif; font-size:19px; font-weight:700; }
.pv-sb-sub { font-size:21px; color:var(--muted); margin-top:4px; }
.pv-tags { display:flex; flex-wrap:wrap; gap:4px; }
.pv-tag { font-size:12px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--border); padding:4px 9px; color:var(--muted); border-radius:var(--r); }

/* ════════════════════════════════
   REVEAL
════════════════════════════════ */
.rv { opacity:1; transform:none; transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1); }
.rv.in { opacity:1; transform:translateY(0); }
.rv.out { opacity:1; transform:none; }

/* ════════════════════════════════
   LOADER
════════════════════════════════ */
#loader { position:fixed; inset:0; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9995; transition:opacity .5s ease .05s,transform .5s ease .05s; }
#loader.out { opacity:0; transform:scale(1.012); pointer-events:none; }
.ld-logo { font-family:'Bebas Neue'; font-size:34px; letter-spacing:.22em; }
.ld-logo span { color:var(--accent); }
.ld-bar { width:120px; height:1px; background:var(--border2); margin-top:20px; overflow:hidden; }
.ld-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); width:0; animation:lf 1.6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes lf { to{width:100%} }
@keyframes logoScratch {
  0%   { transform:scaleX(1); transform-origin:center center; }
  35%  { opacity:1; transform:scaleX(0); transform-origin:center center; }
  36%  { opacity:0; transform:scaleX(1) translateY(-44px); }
  49%  { opacity:0; transform:scaleX(1) translateY(-44px); }
  50%  { opacity:1; transform:translateY(-44px); }
  100% { transform:translateY(0); }
}
.ld-pct { font-size:12px; letter-spacing:.3em; color:var(--muted); margin-top:8px; }

/* ════════════════════════════════
   MOBILE — ≤ 768px
   Affiche seulement le masque.
   Tiroir NAV par la gauche.
   Tiroir PROJETS par la droite.
════════════════════════════════ */
@media (max-width:768px) {
  body { cursor:auto; overflow:hidden; }
  #cur, #cur-ring { display:none; }

  /* Shell devient simple colonne, masque prend tout */
  #shell {
    display:block;
    position:fixed; inset:0;
  }

  /* Masque : plein écran */
  #mask-wrap {
    position:absolute; inset:0;
    transform:none !important; opacity:1 !important;
  }
  .device-frame { border-radius:0; }
  .device-frame::after { width:130px; height:32px; } /* notch mobile plus petit */
  .device-dot { top:12px; right:10px; }
  .device-buttons { display:none; }
  #mask { top:36px; left:0; right:0; bottom:0; border-radius:0; }

  /* Sidebars cachées par défaut — tiroirs absolus */
  #nav-sidebar {
    position:fixed; left:0; top:0; bottom:0;
    width:240px; z-index:500;
    transform:translateX(-100%) !important;
    opacity:1 !important;
    border-radius:0 var(--r) var(--r) 0;
    padding:24px 0 20px;
    transition:transform .38s cubic-bezier(.16,1,.3,1) !important;
  }
  #nav-sidebar.mob-open { transform:translateX(0) !important; }

  /* Nav brand et items en mobile : affichage horizontal avec texte */
  .nav-items { flex-direction:column; align-items:flex-start; padding:0 16px; gap:4px; }
  .nav-btn { width:100%; justify-content:center; gap:0; padding:0; height:46px; }
  .nav-btn::after { display:none; } /* tooltips inutiles en mobile */
  .nav-btn-label { display:none; }
  .nav-socials { flex-direction:row; justify-content:center; padding:14px 0 0; }

  #proj-sidebar {
    position:fixed; right:0; top:0; bottom:0;
    width:280px; z-index:500;
    transform:translateX(100%) !important;
    opacity:1 !important;
    border-radius:var(--r) 0 0 var(--r);
    transition:transform .38s cubic-bezier(.16,1,.3,1) !important;
  }
  #proj-sidebar.mob-open { transform:translateX(0) !important; }

  /* Footer caché sur mobile */
  #footer { display:none; }

  /* Boutons tiroirs — AU-DESSUS de l'overlay (z-index:600) */
  #mob-nav-btn, #mob-proj-btn {
    position:fixed; top:50%; z-index:600;
    transform:translateY(-50%);
    width:28px; height:60px;
    display:flex !important; align-items:center; justify-content:center;
    background:rgba(255,255,255,.06); border:1px solid var(--border2);
    color:var(--muted); font-size:11px; cursor:pointer;
    transition:background .2s,color .2s;
    pointer-events:auto !important;
  }
  #mob-nav-btn { left:0; border-radius:0 var(--r) var(--r) 0; border-left:none; }
  #mob-proj-btn { right:0; border-radius:var(--r) 0 0 var(--r); border-right:none; }
  #mob-nav-btn:hover, #mob-proj-btn:hover { background:rgba(232,255,0,.1); color:var(--accent); }

  /* Overlay — ENTRE le masque et les tiroirs, SOUS les boutons */
  #mob-overlay {
    position:fixed; inset:0; z-index:490;
    background:rgba(0,0,0,.45); backdrop-filter:blur(3px);
    display:none; pointer-events:none;
  }
  #mob-overlay.on { display:block !important; pointer-events:auto !important; }
  .ch { padding:28px 20px 32px; min-height:100%; }
  .ch-title { font-size:clamp(44px,11vw,72px); }
  /* Outline des titres em plus visible sur petit écran */
  .ch-title em { -webkit-text-stroke:1px var(--accent); }
  .ct em { -webkit-text-stroke:1px rgba(255,255,255,.6); }
  /* Logo notch repositionné mobile */
  .device-notch-logo { top:2px; }
  .device-notch-logo img { height:26px; }
  .ch-stats { top:18px; right:16px; }
  .cs { padding:36px 20px; }
  .ab-wrap { grid-template-columns:1fr; gap:24px; }
  .ab-badge { right:0; }
  .svc-grid { grid-template-columns:1fr 1fr; }
  .tg { grid-template-columns:1fr; }
  .pv-body { grid-template-columns:1fr; }
  .p-step { grid-template-columns:44px 1fr; }

  .cc-email { font-size:clamp(14px,5vw,22px); }
  .cc-infos { flex-direction:column; align-items:center; gap:8px; }
  .ch-ctas { flex-direction:column; gap:7px; }
  .ch-ctas .btn-y, .ch-ctas .btn-o { justify-content:center; }
}



/* =========================================================
   LIGHT MODE + H2 OUTLINE — v11
   Fond clair, cartes lumineuses, gradient animé en arrière-plan
========================================================= */
:root{
  --bg:#f6f3ed;
  --surface:rgba(255,255,255,.70);
  --surface2:rgba(255,255,255,.58);
  --surface3:rgba(255,255,255,.78);
  --border:rgba(15,18,24,.12);
  --border2:rgba(15,18,24,.20);
  --accent:#d7ff00;
  --accent2:#00bde8;
  --accent-dim:rgba(215,255,0,.22);
  --text:#101116;
  --muted:rgba(16,17,22,.62);
  --muted2:rgba(16,17,22,.36);
  --shadow:0 20px 70px rgba(36,42,56,.14),0 8px 24px rgba(36,42,56,.10);
}

html,body{background:#f6f3ed!important;color:var(--text)!important;}
body{
  background-image:none!important;
  cursor:none;
}

/* fond blanc cassé + halos colorés animés */
body::after{
  content:'';
  position:fixed;
  inset:-22%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 24%,rgba(0,212,255,.22),transparent 26%),
    radial-gradient(circle at 78% 18%,rgba(215,255,0,.34),transparent 24%),
    radial-gradient(circle at 62% 78%,rgba(175,92,255,.16),transparent 26%),
    linear-gradient(135deg,#ffffff 0%,#f4f0e8 52%,#ffffff 100%);
  filter:blur(10px) saturate(1.1);
  animation:shakassLightFlow 16s ease-in-out infinite alternate;
}
@keyframes shakassLightFlow{
  0%{transform:translate3d(-3%,-2%,0) scale(1);}
  50%{transform:translate3d(4%,3%,0) scale(1.06);}
  100%{transform:translate3d(-1%,5%,0) scale(1.03);}
}

/* bruit beaucoup plus discret en clair */
body::before{opacity:.018!important;mix-blend-mode:multiply;}

/* Structure claire */
#nav-sidebar,
#proj-sidebar,
#footer,
.device-frame{
  background:rgba(255,255,255,.52)!important;
  border-color:var(--border)!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
}

.device-frame{
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.42))!important;
}
.device-frame::after{background:#f6f3ed!important;box-shadow:0 1px 0 rgba(15,18,24,.10)!important;}
.device-dot{border-color:rgba(15,18,24,.22)!important;}
.device-dot::before{background:rgba(15,18,24,.18)!important;}
.device-btn{background:linear-gradient(180deg,rgba(15,18,24,.16),rgba(15,18,24,.04))!important;}

#mask{
  background:rgba(255,255,255,.42)!important;
  border:1px solid rgba(15,18,24,.08);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
#mask::before,
.ch-scan{opacity:.35!important;}
#mask-scroll::-webkit-scrollbar-thumb,
.proj-list::-webkit-scrollbar-thumb{background:rgba(16,17,22,.22)!important;}
#scroll-prog{background:rgba(16,17,22,.08)!important;}

/* Hero clair */
.ch-bg{
  background:
    radial-gradient(ellipse 60% 46% at 62% 20%,rgba(0,212,255,.18),transparent 60%),
    radial-gradient(ellipse 42% 38% at 82% 80%,rgba(215,255,0,.28),transparent 55%),
    linear-gradient(145deg,rgba(255,255,255,.58),rgba(245,240,230,.34))!important;
}
.ch-grid{
  background-image:
    linear-gradient(rgba(16,17,22,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,17,22,.055) 1px,transparent 1px)!important;
}
.ch-orb{background:radial-gradient(ellipse,rgba(0,189,232,.20),transparent 64%)!important;}

/* Toutes les sections/cartes en clair */
.cs + .cs{border-top-color:var(--border)!important;}
.ab-frame,
.svc,
.tgc,
.pv-pill,
.cc-wrap,
.pv-hero,
.pa-item{
  background:rgba(255,255,255,.55)!important;
  border-color:var(--border)!important;
  box-shadow:0 12px 36px rgba(36,42,56,.08);
}
.svc:hover,.tgc:hover,.pa-item:hover,.pa-item.active{background:rgba(255,255,255,.78)!important;}
.svc-grid{background:var(--border)!important;border-color:var(--border)!important;}
.ab-frame img{filter:contrast(1.04) saturate(1.05)!important;}
.ab-frame-ov{background:linear-gradient(to top,rgba(255,255,255,.38),transparent 55%)!important;}
.ab-badge,.pv-back{
  background:rgba(255,255,255,.72)!important;
  color:var(--text)!important;
  border-color:var(--border2)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.cc-wrap::before{color:rgba(16,17,22,.045)!important;}

/* Portfolio lisible en thème clair */
.pa-bg{filter:saturate(.92) brightness(.95) contrast(1.02)!important;}
.pa-item:hover .pa-bg,.pa-item.active .pa-bg{filter:saturate(1.05) brightness(1) contrast(1.04)!important;}
.pa-bg::after{background:linear-gradient(90deg,rgba(255,255,255,.78) 22%,rgba(255,255,255,.30) 100%)!important;}
.pa-cat,.pa-new,.pv-cat,.pv-sb-label,.proj-head-label,.cl,.ch-tag,.svc-icon,.ps-n,.cc-info i,.f-loc i{color:#7c9200!important;}
.cl::before,.ch-tag::before,.proj-head-label::before,.pv-sb-label::before{background:#7c9200!important;}

/* Textes */
.ch-title,
.pa-name,
.proj-head-title,
.svc-name,
.ps-title,
.tgc-author,
.pv-name,
.pv-sb-val,
.f-logo,
.ld-logo{color:var(--text)!important;}
.ch-sub,.ab-p,.svc-desc,.ps-desc,.tgc-text,.pv-desc,.pa-desc,.proj-head-sub,.f-copy,.f-loc,.f-links a,.cc-info,.tgc-role,.pa-year,.chip,.pv-tag,.pv-sb-sub,.btn-o{color:var(--muted)!important;}

/* H2 façon CodePen : outline transparent */
h2,
.ct,
.ct em,
.ab-text .ct,
.cc-wrap .ct{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:1.2px #111!important;
  text-stroke:1.2px #111!important;
  text-shadow:none!important;
}
.ct em{opacity:.72;}

/* Le H1 garde un mix plein + outline */
.ch-title em{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:1.2px #111!important;
}

/* Boutons */
.btn-y{background:#d7ff00!important;color:#101116!important;box-shadow:0 10px 28px rgba(215,255,0,.24);}
.btn-y:hover{background:#101116!important;color:#fff!important;}
.btn-o{border-color:var(--border2)!important;background:rgba(255,255,255,.40)!important;}
.btn-o:hover{border-color:#7c9200!important;color:#7c9200!important;}
.nav-btn{color:rgba(16,17,22,.45)!important;}
.nav-btn:hover,.nav-btn.active{color:#7c9200!important;background:rgba(215,255,0,.28)!important;border-color:rgba(124,146,0,.30)!important;box-shadow:0 0 20px rgba(215,255,0,.16) inset!important;}
.nav-brand{background:#d7ff00!important;color:#101116!important;}
.nav-soc{color:rgba(16,17,22,.36)!important;}
.nav-soc:hover,.f-links a:hover,.cc-email:hover{color:#7c9200!important;}
.cc-email{color:var(--text)!important;}
.chip,.pv-tag{background:rgba(255,255,255,.45)!important;border-color:var(--border)!important;}
.chip:hover{border-color:#7c9200!important;color:#7c9200!important;}

/* Loader clair */
#loader{background:#f6f3ed!important;color:var(--text)!important;}
.ld-bar{background:rgba(16,17,22,.16)!important;}

/* Mobile clair */
@media(max-width:768px){
  #nav-sidebar,#proj-sidebar{background:rgba(255,255,255,.82)!important;}
  #mob-overlay{background:rgba(246,243,237,.62)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;}
  #mob-nav-btn,#mob-proj-btn{background:rgba(255,255,255,.72)!important;color:var(--text)!important;border-color:var(--border2)!important;}
  h2,.ct,.ct em{ -webkit-text-stroke:1px #111!important; }
}



/* V12 tweaks requested by user */
/* 1) Titres outline plus fin */
h2,
.ct,
.ct em,
.ab-text .ct,
.cc-wrap .ct{
  -webkit-text-stroke:0.72px #111 !important;
  text-stroke:0.72px #111 !important;
}
.ch-title em{
  -webkit-text-stroke:0.72px #111 !important;
  text-stroke:0.72px #111 !important;
}
@media(max-width:768px){
  h2,.ct,.ct em,.ab-text .ct,.cc-wrap .ct,
  .ch-title em{
    -webkit-text-stroke:0.65px #111 !important;
    text-stroke:0.65px #111 !important;
  }
}

/* 2) Miniatures projets : overlay supprimé / fortement atténué */
.pa-bg::after{
  background:linear-gradient(90deg,rgba(255,255,255,.10) 18%,rgba(255,255,255,.02) 100%) !important;
}
.pa-bg{
  filter:saturate(.98) brightness(.98) contrast(1.03) !important;
}
.pa-item:hover .pa-bg,
.pa-item.active .pa-bg{
  filter:saturate(1.05) brightness(1.01) contrast(1.04) !important;
}
.pa-cat,
.pa-name,
.pa-year,
.pa-desc{
  text-shadow:0 1px 2px rgba(255,255,255,.22);
}

/* 3) Suppression du curseur custom */
body,
a,
button,
.nav-btn,
.nav-soc,
.pa-item,
.svc,
.tgc,
.chip,
.pv-back,
.pv-link,
.btn-y,
.btn-o,
.cc-email,
.f-links a{
  cursor:auto !important;
}
body{cursor:auto !important;}
#cur,
#cur-ring{
  display:none !important;
}
body.hovering #cur,
body.hovering #cur-ring{
  display:none !important;
}


/* =========================================================
   WORDPRESS / SHORTCODE INTEGRATION
========================================================= */
body.shakass-landing-active,
html:has(#shakass-landing-root),
body:has(#shakass-landing-root){
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#f6f3ed!important;
}
body.shakass-landing-active .site-header,
body.shakass-landing-active .site-footer,
body.shakass-landing-active header.site-header,
body.shakass-landing-active footer.site-footer,
body.shakass-landing-active #masthead,
body.shakass-landing-active #colophon,
body.shakass-landing-active .elementor-location-header,
body.shakass-landing-active .elementor-location-footer{
  display:none!important;
}
#shakass-landing-root{
  position:fixed;
  inset:0;
  z-index:999;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:#f6f3ed;
}
#shakass-landing-root *{box-sizing:border-box;}
body.admin-bar #shakass-landing-root{top:32px;height:calc(100vh - 32px)}
body.admin-bar #shell{top:32px;inset:calc(var(--gap) + 32px) var(--gap) var(--gap) var(--gap)}
@media(max-width:782px){
  body.admin-bar #shakass-landing-root{top:46px;height:calc(100vh - 46px)}
  body.admin-bar #shell{top:46px;inset:46px 0 0 0}
}


/* =========================================================
   V1.1 — corrections Alan
   - fond gris #e4e4e4
   - textes noirs / plus contrastés
   - menu gauche corrigé (icônes seules)
   - overlay projets adapté au fond gris
========================================================= */
:root{
  --bg:#e4e4e4 !important;
  --surface:rgba(255,255,255,.58) !important;
  --surface2:rgba(255,255,255,.50) !important;
  --surface3:rgba(255,255,255,.76) !important;
  --text:#050505 !important;
  --muted:rgba(5,5,5,.82) !important;
  --muted2:rgba(5,5,5,.58) !important;
  --border:rgba(5,5,5,.13) !important;
  --border2:rgba(5,5,5,.22) !important;
}
html,
body,
body.shakass-landing-active,
#shakass-landing-root{
  background:#e4e4e4 !important;
  color:#050505 !important;
}
body::after{
  background:
    radial-gradient(circle at 18% 24%,rgba(0,212,255,.14),transparent 26%),
    radial-gradient(circle at 78% 18%,rgba(215,255,0,.22),transparent 24%),
    radial-gradient(circle at 62% 78%,rgba(120,120,120,.12),transparent 28%),
    linear-gradient(135deg,#eeeeee 0%,#e4e4e4 52%,#f5f5f5 100%) !important;
  filter:blur(10px) saturate(1.02) !important;
}
.device-frame::after,
#loader{
  background:#e4e4e4 !important;
}
#nav-sidebar,
#proj-sidebar,
#footer,
.device-frame{
  background:rgba(255,255,255,.46) !important;
  border-color:rgba(5,5,5,.14) !important;
}
#mask{
  background:rgba(255,255,255,.34) !important;
  border-color:rgba(5,5,5,.12) !important;
}
.ch-bg{
  background:
    radial-gradient(ellipse 60% 46% at 62% 20%,rgba(0,212,255,.12),transparent 60%),
    radial-gradient(ellipse 42% 38% at 82% 80%,rgba(215,255,0,.18),transparent 55%),
    linear-gradient(145deg,rgba(255,255,255,.32),rgba(228,228,228,.40)) !important;
}

/* Textes plus noirs */
.ch-title,
.pa-name,
.proj-head-title,
.svc-name,
.ps-title,
.tgc-author,
.pv-name,
.pv-sb-val,
.f-logo,
.ld-logo,
.ct,
.cc-email{
  color:#050505 !important;
}
.ch-sub,
.ab-p,
.svc-desc,
.ps-desc,
.tgc-text,
.pv-desc,
.pa-desc,
.proj-head-sub,
.f-copy,
.f-loc,
.f-links a,
.cc-info,
.tgc-role,
.pa-year,
.chip,
.pv-tag,
.pv-sb-sub,
.btn-o,
.ps-tag,
.svc-foot,
.ab-badge-l{
  color:rgba(5,5,5,.78) !important;
}
.proj-head-sub,
.f-copy,
.f-loc,
.f-links a,
.pa-year,
.proj-foot{
  color:rgba(5,5,5,.62) !important;
}
.cl,
.ch-tag,
.proj-head-label,
.pa-cat,
.pa-new,
.svc-icon,
.ps-n,
.cc-info i,
.f-loc i{
  color:#6f8500 !important;
}
.cl::before,
.ch-tag::before,
.proj-head-label::before,
.pv-sb-label::before{
  background:#6f8500 !important;
}

/* Menu gauche : icônes seules, labels masqués en desktop + mobile */
.nav-btn-label{display:none !important;}
.nav-btn{
  width:42px !important;
  height:42px !important;
  padding:0 !important;
  gap:0 !important;
  justify-content:center !important;
  align-items:center !important;
  overflow:hidden !important;
  color:rgba(5,5,5,.48) !important;
}
.nav-btn i{font-size:16px !important;line-height:1 !important;}
.nav-btn::after{display:none !important;content:none !important;}
.nav-items{align-items:center !important;padding:0 !important;}
.nav-socials{width:42px !important;}
.nav-soc{color:rgba(5,5,5,.42) !important;}
.nav-btn:hover,
.nav-btn.active{
  color:#6f8500 !important;
  background:rgba(215,255,0,.32) !important;
  border-color:rgba(111,133,0,.24) !important;
}

/* Cartes / sections sur gris */
.ab-frame,
.svc,
.tgc,
.pv-pill,
.cc-wrap,
.pv-hero,
.pa-item{
  background:rgba(255,255,255,.46) !important;
  border-color:rgba(5,5,5,.13) !important;
  box-shadow:0 12px 36px rgba(0,0,0,.055) !important;
}
.svc:hover,
.tgc:hover,
.pa-item:hover,
.pa-item.active{
  background:rgba(255,255,255,.68) !important;
}
.svc-grid{background:rgba(5,5,5,.13) !important;border-color:rgba(5,5,5,.13) !important;}
.chip,.pv-tag{background:rgba(255,255,255,.44) !important;border-color:rgba(5,5,5,.14) !important;color:rgba(5,5,5,.70)!important;}

/* Projets : image plus visible + overlay gris clair bas, pas noir */
.pa-item{
  background:rgba(255,255,255,.42) !important;
}
.pa-bg{
  filter:saturate(1.02) brightness(1) contrast(1.03) !important;
}
.pa-item:hover .pa-bg,
.pa-item.active .pa-bg{
  filter:saturate(1.08) brightness(1.02) contrast(1.04) !important;
}
.pa-bg::after{
  background:linear-gradient(
    to bottom,
    rgba(228,228,228,.00) 0%,
    rgba(228,228,228,.05) 42%,
    rgba(228,228,228,.62) 76%,
    rgba(228,228,228,.88) 100%
  ) !important;
}
.pa-meta{
  padding:10px 11px !important;
}
.pa-name,
.pa-year,
.pa-desc{
  color:#050505 !important;
  text-shadow:0 1px 8px rgba(255,255,255,.55) !important;
}
.pa-cat{
  text-shadow:0 1px 8px rgba(255,255,255,.75) !important;
}

/* Outline reste fin */
h2,
.ct,
.ct em,
.ab-text .ct,
.cc-wrap .ct,
.ch-title em{
  -webkit-text-stroke:.65px #050505 !important;
  text-stroke:.65px #050505 !important;
}

/* Boutons sur gris */
.btn-y{background:#d7ff00 !important;color:#050505 !important;}
.btn-y:hover{background:#050505 !important;color:#fff !important;}
.btn-o{background:rgba(255,255,255,.36) !important;border-color:rgba(5,5,5,.20) !important;color:#050505 !important;}

@media(max-width:768px){
  #nav-sidebar,#proj-sidebar{background:rgba(255,255,255,.82)!important;}
  .nav-btn{width:46px!important;height:46px!important;}
}


/* =========================================================
   V1.2 — corrections mobile/projets/couleurs
   - accent fluo mieux visible
   - projets fondus vers #e4e4e4
   - descriptions miniatures masquées au hover
   - overlay mobile désactivé pour ne plus flouter/bloquer
========================================================= */
:root{
  --accent:#d7ff00 !important;
  --accent2:#00d4ff !important;
}

/* Jaune fluo plus présent sur les animations et repères */
#scroll-prog-bar{
  background:linear-gradient(to bottom,#d7ff00 0%,#00d4ff 100%) !important;
  box-shadow:0 0 12px rgba(215,255,0,.55), 0 0 18px rgba(0,212,255,.28) !important;
}
#mask::before,
.ch-scan{
  background:linear-gradient(90deg,transparent,rgba(215,255,0,.75),rgba(0,212,255,.45),transparent) !important;
  opacity:.62 !important;
}
.svc::before{
  height:2px !important;
  background:linear-gradient(90deg,transparent 0%,#d7ff00 38%,#d7ff00 58%,transparent 100%) !important;
  box-shadow:0 0 14px rgba(215,255,0,.85) !important;
}
.svc:hover::before{
  opacity:1 !important;
  transform:scaleX(1) !important;
}
.svc-icon,
.ps-n,
.ch-stat-n,
.ab-badge-n,
.cl,
.ch-tag,
.proj-head-label,
.pa-cat,
.pa-new,
.cc-info i,
.f-loc i{
  color:#789000 !important;
}
.nav-brand,
.btn-y{
  background:#d7ff00 !important;
}
.nav-btn:hover,
.nav-btn.active{
  background:rgba(215,255,0,.38) !important;
  color:#5f7200 !important;
  box-shadow:0 0 20px rgba(215,255,0,.28) inset !important;
}

/* Miniatures projets : fondu naturel dans le fond gris */
.pa-item{
  background:#e4e4e4 !important;
}
.pa-bg{
  filter:saturate(1.04) brightness(1.02) contrast(1.04) !important;
}
.pa-bg::after{
  background:linear-gradient(
    to bottom,
    rgba(228,228,228,0) 0%,
    rgba(228,228,228,0) 34%,
    rgba(228,228,228,.22) 58%,
    rgba(228,228,228,.72) 82%,
    #e4e4e4 100%
  ) !important;
}
.pa-item:hover .pa-bg::after,
.pa-item.active .pa-bg::after{
  background:linear-gradient(
    to bottom,
    rgba(228,228,228,0) 0%,
    rgba(228,228,228,0) 30%,
    rgba(228,228,228,.16) 56%,
    rgba(228,228,228,.64) 82%,
    #e4e4e4 100%
  ) !important;
}
.pa-meta{
  justify-content:flex-end !important;
  gap:2px !important;
}
.pa-name{
  color:#050505 !important;
  text-shadow:0 2px 10px rgba(228,228,228,.95), 0 1px 2px rgba(255,255,255,.95) !important;
}
.pa-cat,
.pa-year{
  text-shadow:0 2px 8px rgba(228,228,228,.95), 0 1px 2px rgba(255,255,255,.95) !important;
}
.pa-desc,
.pa-item:hover .pa-desc,
.pa-item.active .pa-desc{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
.pa-item:hover{
  height:112px !important;
}
.pa-item.active{
  height:126px !important;
}

/* Mobile : suppression de l'overlay qui floute/bloque la page */
@media(max-width:768px){
  #mob-overlay,
  #mob-overlay.on{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  #mob-nav-btn,
  #mob-proj-btn{
    z-index:900 !important;
    background:rgba(255,255,255,.78) !important;
    color:#050505 !important;
    border-color:rgba(5,5,5,.18) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.08) !important;
  }
  #nav-sidebar,
  #proj-sidebar{
    z-index:880 !important;
    background:rgba(255,255,255,.92) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }
}