/* =========================================================
   DEV — thème « dev royal »
   ========================================================= */
:root{--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;--term:#0b0d12;--tline:#1d2230}

/* ---------- fond : pluie de code + grille + scanlines ---------- */
#rain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.33;-webkit-mask:linear-gradient(#000 0%,#000a 45%,transparent 95%);mask:linear-gradient(#000 0%,#000a 45%,transparent 95%)}
#fx{opacity:.6}
body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:28px 28px;-webkit-mask:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%);mask:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%)}
body:after{content:"";position:fixed;inset:0;z-index:250;pointer-events:none;background:repeating-linear-gradient(#0000 0 2px,#00000014 2px 3px);mix-blend-mode:multiply}

/* ---------- boot ---------- */
.boot{font-family:var(--mono);font-size:11.5px;line-height:1.7;text-align:left;width:260px;min-height:136px;margin:16px auto 0;color:#8b93a7;white-space:pre}
.boot .cmd{color:#fff}.boot .ok{color:#3ddc84}.boot .gold{color:var(--gold2);font-weight:800}
.boot span{animation:in .25s both}
.sp-title{font-size:20px!important;margin-top:20px!important}

/* ---------- en-tête ---------- */
.top{border-bottom:1px solid #ffffff08;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.top .t span{font-family:var(--mono);font-size:10.5px;color:var(--blue2)}
.top .t span:before{content:"~/"}
.top .live{font-family:var(--mono);font-size:10.5px;letter-spacing:.5px}
.cmdk{display:flex;align-items:center;gap:3px;padding:6px 9px;border-radius:9px;font-family:var(--mono);font-size:11px;font-weight:800;color:#cfd6e6;background:#ffffff0a;border:1px solid #ffffff1a;box-shadow:inset 0 -2px 0 #0006}
.cmdk span{font-size:12px;color:var(--gold2)}
.cmdk:active{transform:translateY(1px)}

/* ---------- hero ---------- */
.hero{background:radial-gradient(120% 80% at 50% 0%,#2a1f00 0%,#0d0b06 50%,#07080c 100%);border:none;isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang,0deg),#f5b40000 0deg,#ffd65a 60deg,#2aabee 120deg,#f5b40000 180deg,#f5b40000 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:ang 6s linear infinite;pointer-events:none;z-index:2}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes ang{to{--ang:360deg}}
.hero h1 small{font-family:var(--mono)!important;font-weight:600!important;letter-spacing:4px!important}
.hero h1 small:before{content:"<";color:#ffffff55}.hero h1 small:after{content:" />";color:#ffffff55}
.hero h1.glitch{animation:glitch .38s steps(2) both}
@keyframes glitch{
  0%{transform:none;text-shadow:none}
  20%{transform:translate(-3px,1px) skewX(-6deg);text-shadow:3px 0 #ff2b6a,-3px 0 #2be4ff}
  40%{transform:translate(3px,-1px);text-shadow:-3px 0 #ff2b6a,3px 0 #2be4ff;clip-path:inset(10% 0 45% 0)}
  60%{transform:translate(-2px,0);clip-path:inset(55% 0 5% 0);text-shadow:2px 0 #ff2b6a,-2px 0 #2be4ff}
  100%{transform:none;text-shadow:none;clip-path:none}}
.typer{font-family:var(--mono);font-size:13px;color:#d6dbe7;text-align:center;margin:12px 0 -4px;min-height:20px}
.tp-pre{color:#3ddc84;font-weight:800}
.caret{display:inline-block;width:8px;height:15px;margin-left:2px;vertical-align:-2px;background:var(--gold2);animation:caret 1s steps(1) infinite;box-shadow:0 0 8px var(--gold)}
@keyframes caret{50%{opacity:0}}
.hero p{font-size:13px;color:#a9a497}
.stats div{background:#0b0d1299;border:1px solid var(--tline);border-radius:12px}
.stats span{font-family:var(--mono);font-size:9.5px}

/* ---------- fenêtre d'éditeur ---------- */
.term{position:relative;text-align:left;margin:4px 0 16px;border-radius:14px;overflow:hidden;background:var(--term);border:1px solid var(--tline);box-shadow:0 18px 40px #000a,0 0 0 1px #00000080,0 0 40px #2aabee14}
.term-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#11141c;border-bottom:1px solid var(--tline)}
.term-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term-bar span{flex:1;text-align:center;font-family:var(--mono);font-size:11px;color:#8b93a7;margin-right:30px}
.term-bar em{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:800;color:#2aabee;padding:2px 5px;border-radius:4px;background:#2aabee1a}
.term-code{display:flex;gap:12px;margin:0;padding:12px 12px 14px;font-family:var(--mono);font-size:11px;line-height:1.65;min-height:206px;overflow:hidden;color:#cfd6e6}
.term-code .ln{color:#3d4457;text-align:right;user-select:none;min-width:14px;white-space:pre}
.term-code code{white-space:pre;font-family:inherit}
.term-code .k{color:#c792ea}.term-code .s{color:#ffd65a}.term-code .f{color:#82aaff}.term-code .t{color:#62d0ff}.term-code .c{color:#3ddc84;font-style:italic}
.term-code .caret{width:7px;height:13px}

/* ---------- sections ---------- */
.sec-h h2{display:flex;align-items:baseline;gap:8px}
.sec-h h2 .cm{font-family:var(--mono);font-size:11px;font-weight:600;color:#3ddc84;letter-spacing:0}
.sec-h a{font-family:var(--mono);font-size:11px}
.marquee .mq-track{font-family:var(--mono);font-weight:800;font-size:12.5px}

/* ---------- cartes de service façon fichier ---------- */
.svc{background:linear-gradient(180deg,#10131b,#0b0c11);border:1px solid var(--tline);padding-top:22px}
.svc:after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--gold),#2aabee);opacity:.7}
.fname{position:absolute;top:0;right:0;padding:3px 9px 3px 10px;border-radius:0 0 0 10px;font-family:var(--mono);font-size:9.5px;color:#8b93a7;background:#151925;border-left:1px solid var(--tline);border-bottom:1px solid var(--tline)}
.fname:before{content:"● ";color:#3ddc84}
.svc .em{background:radial-gradient(circle at 30% 20%,#2a1f00,#0b0b0e);border-color:#f5b40044}
.svc .dl,.svc .from{font-family:var(--mono)}
.badge{font-family:var(--mono)}

/* ---------- catégories, packs, chips ---------- */
.cat{background:#0f1118;border-color:var(--tline);font-family:var(--mono);font-size:9.5px;letter-spacing:-.2px}
.chip{font-family:var(--mono);font-size:12px;background:#0f1118;border-color:var(--tline)}
.chip.on:before{content:"$ "}
.pack{background:linear-gradient(150deg,#241a00,#0b0c11 65%)}
.pack .tag{font-family:var(--mono)}
.trust div{background:#0f1118;border-color:var(--tline)}
.trust b{font-family:var(--mono);font-size:13px}
.avi{background:#0f1118;border-color:var(--tline)}

/* ---------- fiche (sheet) façon IDE ---------- */
.sheet{background:linear-gradient(180deg,#121520,#0a0b10 40%);border-color:#2aabee33}
.fm{background:#0f1118;border-color:var(--tline)}
.fm b{font-family:var(--mono);font-size:13px}
.fm>i{color:#3ddc84}
.lvl button{font-family:var(--mono);font-size:10px}
.demo-btn,.dtabs button{font-family:var(--mono)}
.dstage{background:radial-gradient(120% 100% at 50% 0%,#141a26,#08090d);border-color:var(--tline)}
.dinfo{font-family:var(--mono);font-size:11px}
.dcap{font-family:var(--mono);font-size:12.5px}

/* ---------- navigation ---------- */
.nav{background:#0d0f16e6;border-color:#2aabee2e}
.nav button{font-family:var(--mono);font-size:9.5px;letter-spacing:.3px}
.nav-ind{background:linear-gradient(160deg,#2aabee22,#f5b40014);border-color:#2aabee55;box-shadow:0 0 22px #2aabee33,inset 0 1px 0 #fff2}

/* ---------- toast façon terminal ---------- */
.toast{font-family:var(--mono);font-size:12.5px;background:#0b0d12;border-color:#3ddc84;color:#d6ffe6;box-shadow:0 10px 30px #000a,0 0 20px #3ddc8433}
.toast.err{border-color:#ff5470;color:#ffd0d8;box-shadow:0 10px 30px #000a,0 0 20px #ff547033}

/* ---------- palette ⌘K ---------- */
.pal{position:fixed;inset:0;z-index:260;display:flex;align-items:flex-start;justify-content:center;padding:70px 14px 0;background:#000b;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.25s}
.pal.on{opacity:1;visibility:visible}
.pal-box{width:100%;max-width:520px;border-radius:16px;overflow:hidden;background:#0d0f16;border:1px solid #2aabee44;box-shadow:0 30px 80px #000,0 0 40px #2aabee22;transform:translateY(-14px) scale(.97);transition:.3s cubic-bezier(.2,1.3,.4,1)}
.pal.on .pal-box{transform:none}
.pal-in{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--tline)}
.pal-in span{font-family:var(--mono);font-weight:800;color:#3ddc84}
.pal-in input{flex:1;min-width:0;font-family:var(--mono);font-size:14px;color:#fff}
.pal-in input::placeholder{color:#59617a}
kbd{font-family:var(--mono);font-size:10px;padding:3px 6px;border-radius:6px;background:#1a1f2c;border:1px solid #2a3142;color:#8b93a7}
.pal-list{max-height:52vh;overflow-y:auto;padding:6px}
.pal-list button{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:10px}
.pal-list button .pi{grid-row:span 2;display:grid;place-items:center;font-size:18px}
.pal-list button b{font-size:13.5px}
.pal-list button small{font-family:var(--mono);font-size:10.5px;color:#6b7390}
.pal-list button.on{background:linear-gradient(90deg,#2aabee22,#f5b40010);box-shadow:inset 2px 0 0 var(--gold2)}
.pal-empty{font-family:var(--mono);font-size:12px;color:#ff8a9c;padding:18px;text-align:center}
.pal-ft{display:flex;gap:14px;padding:9px 14px;border-top:1px solid var(--tline);font-family:var(--mono);font-size:10px;color:#59617a}
.pal-ft span:last-child{margin-left:auto;color:var(--gold2)}

@media (prefers-reduced-motion:reduce){#rain{display:none}.hero:before{animation:none}}

/* ---------- logos animés ---------- */
.anims{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 8px;scrollbar-width:none}
.anims::-webkit-scrollbar{display:none}
.anim{position:relative;flex:0 0 64%;aspect-ratio:1;scroll-snap-align:start;border-radius:20px;overflow:hidden;background:#000;border:1px solid var(--tline);box-shadow:0 12px 30px #000a,0 0 0 1px #2aabee22;cursor:pointer}
.anim video{width:100%;height:100%;object-fit:cover;display:block}
.an-tabs{position:absolute;top:10px;left:10px;display:flex;gap:4px;padding:3px;border-radius:10px;background:#000a;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.an-tabs button{padding:5px 10px;border-radius:7px;font-family:var(--mono);font-size:11px;font-weight:800;color:#cfd6e6}
.an-tabs button.on{background:var(--goldgrad);color:#1a1200}
.an-t{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 10px;background:linear-gradient(transparent,#000d);font-weight:800;font-size:13.5px}
.an-t small{display:block;font-family:var(--mono);font-size:10px;color:#3ddc84;letter-spacing:.5px}
.an-play{position:absolute;top:10px;right:10px;font-style:normal;font-size:14px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#000a}
.an-big{width:100%;border-radius:18px;display:block;background:#000;border:1px solid var(--line)}

/* ---------- exemples dans les fiches service ---------- */
.ex-row{display:flex;gap:8px;overflow-x:auto;margin:0 -18px 14px;padding:0 18px 4px;scroll-snap-type:x mandatory;scrollbar-width:none}
.ex-row::-webkit-scrollbar{display:none}
.ex-row img,.ex-row video{flex:none;height:220px;max-width:86%;object-fit:contain;border-radius:14px;background:repeating-conic-gradient(#14161e 0 25%,#0d0f15 0 50%) 0 0/16px 16px;border:1px solid var(--tline);scroll-snap-align:start}
.ex-row.solo{justify-content:center}
.ex-row.solo img,.ex-row.solo video{height:auto;max-height:420px;max-width:100%}