/* ══════════════════════════════════════════════════
   RESET & ROOT TOKENS
══════════════════════════════════════════════════ */
*,::before,::after{margin:0;padding:0;box-sizing:border-box}

/* ─── DARK MODE (défaut) ─── */
:root,[data-theme="dark"]{
  --bg:#07091A;
  --bg2:#0D1128;
  --bg3:#141830;
  --bg4:#1C2240;
  --border:rgba(124,111,255,.12);
  --border-hi:rgba(124,111,255,.45);
  --accent:#7C6FFF;
  --accent2:#5B4FE8;
  --accent3:#3D35C0;
  --glow:rgba(124,111,255,.18);
  --glow2:rgba(124,111,255,.08);
  --green:#34D399;
  --red:#F87171;
  --amber:#FBBF24;
  --purple:#C084FC;
  --orange:#FB923C;
  --white:#EEF2FF;
  --text:#8895B8;
  --muted:#4E5A7A;
  --card-shadow:0 8px 40px rgba(0,0,0,.55);
  --noise-opacity:.035;
  --orb1:rgba(61,53,192,.35);
  --orb2:rgba(20,40,120,.25);
  --orb3:rgba(124,111,255,.12);
  --theme-icon:"☀️";
  --input-bg:var(--bg2);
}

/* ─── LIGHT MODE (chaud / pastel orange) ─── */
[data-theme="light"]{
  --bg:#FEF6EE;
  --bg2:#FFF0E3;
  --bg3:#FFE8D4;
  --bg4:#FFD9BC;
  --border:rgba(190,100,30,.13);
  --border-hi:rgba(210,90,20,.45);
  --accent:#D95F1A;
  --accent2:#C04E10;
  --accent3:#A03A05;
  --glow:rgba(217,95,26,.15);
  --glow2:rgba(217,95,26,.07);
  --green:#0D9E6A;
  --red:#DC3545;
  --amber:#C87800;
  --purple:#8B5CF6;
  --orange:#E8580C;
  --white:#2B1205;
  --text:#7A4E32;
  --muted:#B08060;
  --card-shadow:0 4px 24px rgba(180,80,10,.12);
  --noise-opacity:.018;
  --orb1:rgba(245,140,50,.22);
  --orb2:rgba(255,180,90,.18);
  --orb3:rgba(240,120,30,.1);
  --theme-icon:"🌙";
  --input-bg:#FFF7EF;
}

/* ─── TRANSITIONS THEME ─── */
body,
.topnav,.page,.qcard,.cv-blk,.cv-sec,.pcard,.sf,.cert,
.vc,.g-card,.stage-main,.flip-front,.flip-back,.pj,
.terminal,.lock-input,.btn-g,.cl,.chip,.tp,.cv-tag,
footer,.lock{
  transition:background .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease;
}

/* ─── TYPO & GLOBALS ─── */
html{scroll-behavior:smooth;height:100%}
body{
  font-family:"Instrument Sans",sans-serif;
  background:var(--bg);
  color:var(--white);
  overflow:hidden;
  line-height:1.6;
  height:100vh;
  font-size:15px;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:2px}

/* ─── VARIABLES TYPO ─── */
:root{
  --mono:"JetBrains Mono",monospace;
  --sans:"Instrument Sans",sans-serif;
  --display:"Cabinet Grotesk",sans-serif;
  --r:10px;--r-lg:16px;
}

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

/* ─── AMBIENT ORBS ─── */
.amb{position:fixed;pointer-events:none;z-index:0;border-radius:50%;filter:blur(140px);transition:background .6s ease}
.amb1{width:750px;height:750px;background:var(--orb1);top:-280px;right:-180px;animation:af1 14s ease-in-out infinite}
.amb2{width:500px;height:500px;background:var(--orb2);bottom:0;left:-160px;animation:af2 17s ease-in-out infinite}
.amb3{width:350px;height:350px;background:var(--orb3);top:38%;right:8%;animation:af2 11s ease-in-out infinite reverse}
@keyframes af1{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(35px) scale(1.06)}}
@keyframes af2{0%,100%{transform:translateY(0)}50%{transform:translateY(-28px)}}