/* Central Trading OP — charte commune
   Encre bleue profonde · CPSR = safran · CTOP = sarcelle · Aigle Contrôle = violet · Paramètres = acier */
:root{
  --ink:#0c1729; --ink-2:#13223a; --ink-3:#1c2f4d; --ink-4:#24395c; --line:#2a4064;
  --paper:#eef3fa; --mute:#8fa3c2; --soft:#c7d3e6;
  --cpsr:#f2a93b; --ctop:#2ec4b6; --ctrl:#9b8cff; --param:#7da2d6; --ok:#4ade80; --warn:#fb923c;
  --f-display:'Bricolage Grotesque','Avenir Next',system-ui,sans-serif;
  --f-body:'Manrope','Segoe UI',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --nav-w:290px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:var(--f-body);color:var(--paper);font-size:15px;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 700px at 90% -10%,rgba(46,196,182,.10),transparent 60%),
             radial-gradient(900px 600px at 10% 110%,rgba(242,169,59,.08),transparent 60%),var(--ink);background-attachment:fixed}
a{color:inherit;text-decoration:none}
.ico{flex:none;display:block}
.grid-bg{position:fixed;inset:0;pointer-events:none;opacity:.4;z-index:0;
  background-image:linear-gradient(var(--ink-2) 1px,transparent 1px),linear-gradient(90deg,var(--ink-2) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%)}

/* Couleur par menu */
.c-ctop{--c:var(--ctop);--c-soft:rgba(46,196,182,.13);--c-line:rgba(46,196,182,.4)}
.c-cpsr{--c:var(--cpsr);--c-soft:rgba(242,169,59,.13);--c-line:rgba(242,169,59,.4)}
.c-ctrl{--c:var(--ctrl);--c-soft:rgba(155,140,255,.14);--c-line:rgba(155,140,255,.42)}
.c-param{--c:var(--param);--c-soft:rgba(125,162,214,.13);--c-line:rgba(125,162,214,.4)}

/* ---------- Structure ---------- */
.shell{position:relative;z-index:1;display:grid;grid-template-columns:var(--nav-w) 1fr;min-height:100vh}
.content{min-width:0;display:flex;flex-direction:column}
.main{flex:1;padding:8px max(28px,env(safe-area-inset-right)) 40px 28px;display:grid;gap:22px;align-content:start;max-width:1280px;width:100%}

/* ---------- Barre latérale ---------- */
.nav{position:sticky;top:0;height:100vh;overflow-y:auto;background:rgba(15,29,51,.92);backdrop-filter:blur(8px);
  border-right:1.5px solid var(--line);padding:22px 14px calc(18px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:6px}
.nav-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 18px}
.logo{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--ink);
  background:linear-gradient(135deg,var(--cpsr),#e2713a 48%,var(--ctop) 52%,#1a8f86)}
.nav-brand b{display:block;font-family:var(--f-display);font-weight:800;font-size:18px;letter-spacing:-.01em;line-height:1.1}
.nav-brand b i{font-style:normal;color:var(--ctop)}
.nav-brand small{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--mute);margin-top:3px}
.nav-close{display:none}
.nav-home{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--soft);font-weight:600}
.nav-home:hover,.nav-home.on{background:var(--ink-3);color:#fff}
.nav-grp{border-radius:14px;margin-top:2px}
.nav-head{display:flex;align-items:center;gap:4px}
.nav-main{min-width:0;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;margin-top:2px}
.nav-main:hover{background:var(--ink-3)}
.nav-main.on{background:var(--c-soft);box-shadow:inset 0 0 0 1.5px var(--c-line)}
.nav-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--c-soft);color:var(--c);flex:none;transition:transform .2s}
.nav-main:hover .nav-ico{transform:scale(1.06)}
.nav-txt{min-width:0}
.nav-txt b{display:block;font-size:15px;font-weight:700}
.nav-txt small{display:block;font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-tog{width:34px;height:34px;flex:none;border:0;border-radius:10px;background:transparent;color:var(--mute);cursor:pointer;display:grid;place-items:center;transition:transform .2s,background .2s}
.nav-tog:hover{background:var(--ink-3);color:#fff}
.nav-grp.open .nav-tog{transform:rotate(90deg);color:var(--c)}
.nav-sub{padding-left:28px}
.nav-sub a{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:1px 0;border-radius:10px;color:var(--soft);font-size:14px;border-left:2px solid var(--line);border-radius:0 10px 10px 0}
.nav-sub a:hover{background:var(--ink-3);color:#fff}
.nav-sub a.on{color:#fff;background:var(--c-soft);border-left-color:var(--c)}
.nav-sub a .ico{color:var(--c)}
.nav-sub{display:block;max-height:0;overflow:hidden;transition:max-height .3s ease}
.nav-grp.open .nav-sub{max-height:420px}
.nav-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.nav-foot a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--mute);font-weight:600}
.nav-foot a:hover{background:var(--ink-3);color:#fff}
.veil{display:none}

/* ---------- En-tête ---------- */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:16px max(28px,env(safe-area-inset-right)) 12px 28px;
  background:linear-gradient(var(--ink) 60%,rgba(12,23,41,0))}
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1.5px solid var(--line);background:var(--ink-2);color:var(--paper);cursor:pointer;place-items:center}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mute);min-width:0;flex-wrap:wrap}
.crumbs a:hover{color:#fff}.crumbs b{color:var(--paper);font-weight:600}
.clock{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:13px;color:var(--mute);padding:7px 12px;border-radius:99px;border:1px solid var(--line)}

/* ---------- Accueil ---------- */
.welcome{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;animation:up .6s cubic-bezier(.2,.8,.2,1) both}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
h1{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,4vw,46px);letter-spacing:-.03em;line-height:1.05;margin-top:6px;text-wrap:balance}
h1 em{font-style:normal;color:var(--ctop)}
.lead{color:var(--mute);font-size:16px;line-height:1.55;margin-top:8px;max-width:62ch}
.date{font-family:var(--f-mono);font-size:13px;color:var(--soft);padding:9px 14px;border-radius:12px;background:var(--ink-2);border:1px solid var(--line)}

.menus{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.menu-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:20px;background:var(--ink-2);border:1.5px solid var(--line);
  transition:transform .2s,border-color .2s,box-shadow .2s;animation:up .6s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.menu-card::before{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,var(--c-soft),transparent 70%);transition:transform .4s}
.menu-card:hover,.menu-card:focus-visible{transform:translateY(-4px);border-color:var(--c-line);box-shadow:0 18px 40px -16px var(--c);outline:none}
.menu-card:hover::before{transform:scale(1.4)}
.menu-ico{position:relative;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;color:var(--c);background:var(--c-soft);border:1.5px solid var(--c-line)}
.menu-ico::after{content:"";position:absolute;inset:-6px;border-radius:22px;border:1.5px dashed var(--c-line);opacity:0;transition:opacity .3s}
.menu-card:hover .menu-ico::after{opacity:1;animation:spin 8s linear infinite}
.menu-card h2{font-family:var(--f-display);font-size:26px;font-weight:800;letter-spacing:-.02em}
.menu-card .tag{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.menu-card p{color:var(--mute);font-size:14px;line-height:1.5}
.menu-card .count{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--soft);padding-top:12px;border-top:1px solid var(--line)}
.menu-card .count .ico{color:var(--c);transition:transform .2s}
.menu-card:hover .count .ico{transform:translateX(4px)}

.section-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px}
.section-t h2{font-family:var(--f-display);font-size:22px;font-weight:800;letter-spacing:-.01em}
.section-t small{color:var(--mute);font-size:13px}
.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.qk{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line);
  transition:border-color .2s,background .2s;animation:up .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.qk:hover,.qk:focus-visible{border-color:var(--c-line);background:var(--ink-3);outline:none}
.qk-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--c-soft);color:var(--c);flex:none}
.qk b{display:block;font-size:14px;font-weight:700}
.qk small{display:block;font-size:12px;color:var(--mute)}
.qk span{min-width:0}

/* ---------- Pages menu / département ---------- */
.hero{display:flex;gap:20px;align-items:center;padding:26px;border-radius:22px;background:linear-gradient(120deg,var(--c-soft),transparent 70%),var(--ink-2);
  border:1.5px solid var(--c-line);animation:up .6s cubic-bezier(.2,.8,.2,1) both}
.hero-ico{width:74px;height:74px;border-radius:20px;flex:none;display:grid;place-items:center;color:var(--c);background:var(--ink);border:1.5px solid var(--c-line)}
.hero .eyebrow{color:var(--c)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tile{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:18px;background:var(--ink-2);border:1.5px solid var(--line);
  transition:transform .2s,border-color .2s;animation:up .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);border-color:var(--c-line);outline:none}
.tile-ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--c-soft);color:var(--c)}
.tile b{font-family:var(--f-display);font-size:20px;font-weight:800}
.tile-desc{color:var(--mute);font-size:14px;line-height:1.5}
.tile-go{margin-top:auto;display:flex;align-items:center;gap:6px;color:var(--c);font-weight:700;font-size:13.5px}
.dept{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.panel{padding:22px;border-radius:18px;background:var(--ink-2);border:1.5px solid var(--line);animation:up .5s cubic-bezier(.2,.8,.2,1) .1s both;min-width:0}
.panel h2{font-size:16px;font-weight:700;margin-bottom:12px}
.todo{list-style:none;display:grid;gap:10px}
.todo li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--ink-3);font-size:15px}
.todo li .ico{color:var(--c)}
.soon{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--mute)}
.soon code{font-family:var(--f-mono);font-size:12.5px;color:var(--soft);background:var(--ink);padding:2px 7px;border-radius:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 4px rgba(251,146,60,.18)}
.btn{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:11px 16px;border-radius:12px;font-weight:700;font-size:14px;color:var(--ink);background:var(--c)}
.btn:hover{filter:brightness(1.08)}
.others{display:grid;gap:6px}
.others a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--soft);font-size:14px}
.others a:hover{background:var(--ink-3);color:#fff}
.others a .ico{color:var(--c)}

.foot{padding:18px 28px calc(22px + env(safe-area-inset-bottom));font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;color:var(--mute)}
.foot b{color:var(--cpsr);font-weight:500}.foot i{color:var(--ctop);font-style:normal}

@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

:focus-visible{outline:2px solid var(--ctop);outline-offset:2px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){ .menus{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .nav{position:fixed;left:0;top:0;bottom:0;width:min(310px,86vw);height:auto;z-index:30;transform:translateX(-105%);transition:transform .28s ease;
    padding-top:max(22px,env(safe-area-inset-top))}
  .nav.show{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.5)}
  .nav-brand{padding-right:48px}
  .nav-close{display:grid;place-items:center;position:absolute;right:12px;top:max(18px,env(safe-area-inset-top));width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--ink-2);color:var(--paper);cursor:pointer}
  .veil{display:block;position:fixed;inset:0;z-index:20;background:rgba(5,10,20,.6);opacity:0;pointer-events:none;transition:opacity .25s}
  .veil.show{opacity:1;pointer-events:auto}
  .burger{display:grid}
  .top{padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}
  .main{padding:6px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left))}
  .dept{grid-template-columns:1fr}
  .foot{padding-left:max(16px,env(safe-area-inset-left))}
}
@media (max-width:560px){
  .menus{grid-template-columns:1fr}
  .hero{flex-direction:column;align-items:flex-start;padding:20px}
  .clock{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
}

/* ======================================================================
   ACCUEIL — menus (2 × 2) à gauche, homme d'affaires animé à droite
   ====================================================================== */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:center;overflow-x:clip}
.home-menus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hm{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-height:220px;padding:22px;border-radius:22px;
  background:var(--ink-2);border:1.5px solid var(--line);transition:transform .25s,border-color .25s,box-shadow .25s;
  animation:up .6s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.hm::before{content:"";position:absolute;right:-60px;top:-60px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,var(--c-soft),transparent 70%);transition:transform .4s}
.hm:hover,.hm:focus-visible{transform:translateY(-4px);border-color:var(--c-line);box-shadow:0 20px 44px -18px var(--c);outline:none}
.hm:hover::before{transform:scale(1.5)}
.hm-ico{position:relative;width:60px;height:60px;border-radius:18px;display:grid;place-items:center;color:var(--c);background:var(--c-soft);border:1.5px solid var(--c-line)}
.hm-ico::after{content:"";position:absolute;inset:-7px;border-radius:23px;border:1.5px dashed var(--c-line);opacity:0;transition:opacity .3s}
.hm:hover .hm-ico::after{opacity:1;animation:spin 8s linear infinite}
.hm .tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.hm h2{font-family:var(--f-display);font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.hm .go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--soft)}
.hm .go .ico{color:var(--c);transition:transform .2s}
.hm:hover .go .ico{transform:translateX(4px)}

/* Scène : disque lumineux + image + anneaux d'informations */
.scene-pro{position:relative;width:100%;max-width:640px;justify-self:center;aspect-ratio:1;container-type:inline-size;animation:up .7s cubic-bezier(.2,.8,.2,1) .15s both}
.disc{position:absolute;inset:27%;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#ffffff 0%,#eef3fa 46%,#d7e2f1 70%,#b9c9e0 100%);
  box-shadow:0 0 0 10px rgba(46,196,182,.10),0 0 0 22px rgba(46,196,182,.05),0 30px 70px -20px rgba(46,196,182,.5)}
.disc::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(46,196,182,.55);animation:ping2 3.2s ease-out infinite}
.man{position:absolute;left:17.2%;top:28.8%;width:54.7%;height:auto;animation:bob 6s ease-in-out infinite;filter:drop-shadow(0 14px 14px rgba(12,23,41,.25))}
/* Reflet de l'écran du portable + vapeur de la tasse (posés sur l'image) */
.screen-glow{position:absolute;left:40.8%;top:45.3%;width:7%;height:5%;border-radius:50%;background:radial-gradient(circle,rgba(46,196,182,.55),transparent 70%);
  animation:glow 2.4s ease-in-out infinite}
.steam2{position:absolute;left:38.6%;top:45%;width:2%;height:3.6%}
.steam2 i{position:absolute;bottom:0;width:2px;height:100%;border-radius:2px;background:linear-gradient(transparent,#8fa3c2);opacity:0;animation:steam2 2.4s ease-in-out infinite}
.steam2 i:nth-child(2){left:60%;animation-delay:1.2s}

.orbit-ring{position:absolute;border-radius:50%;border:1.5px dashed rgba(46,196,182,.35);animation:spin 46s linear infinite}
.orbit-ring.o1{inset:22%;border-color:rgba(46,196,182,.4)}
.sat{position:absolute;width:10px;height:10px;border-radius:50%;margin:-5px}
.sat.s1{left:50%;top:0;background:var(--ctop);box-shadow:0 0 12px var(--ctop)}
.sat.s2{left:7%;top:75%;background:var(--cpsr);box-shadow:0 0 12px var(--cpsr)}
.sat.s3{left:93%;top:75%;background:var(--ctrl);box-shadow:0 0 12px var(--ctrl)}
.orbit-ring.o2{z-index:2}
.orbit-ring.o2{inset:14%;border-color:rgba(242,169,59,.3);animation-duration:64s;animation-direction:reverse}
.orb{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1))}
.orb>span{position:absolute;left:0;top:0;transform:translate(-50%,-50%) rotate(calc(var(--a) * -1))}
.orb i{display:block;font-style:normal;animation:spin 46s linear infinite reverse}
.o2 .orb i{animation:spin 64s linear infinite}
.orb b{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:clamp(10px,2cqw,12.5px);font-weight:600;color:var(--paper);
  padding:7px 11px;border-radius:99px;background:rgba(19,34,58,.94);border:1.3px solid var(--line);box-shadow:0 8px 20px -8px rgba(0,0,0,.6);
  animation:pop .6s cubic-bezier(.2,.8,.2,1) var(--d) both}
.orb b .ico{width:15px;height:15px}
.orb b.t-ctop{border-color:rgba(46,196,182,.5)}.orb b.t-ctop .ico{color:var(--ctop)}
.orb b.t-cpsr{border-color:rgba(242,169,59,.5)}.orb b.t-cpsr .ico{color:var(--cpsr)}
.orb b.t-ctrl{border-color:rgba(155,140,255,.5)}.orb b.t-ctrl .ico{color:var(--ctrl)}
.orb b.t-ok .ico{color:var(--ok)}
.o1{--r:28cqw}.o2{--r:36cqw}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes glow{0%,100%{opacity:.45}50%{opacity:.9}}
@keyframes steam2{0%{opacity:0;transform:translateY(4px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-12px)}}
@keyframes ping2{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.12);opacity:0}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}

@media (max-width:1150px){ .home-grid{grid-template-columns:1fr} .scene-pro{max-width:520px} }
@media (max-width:560px){
  .o2{--r:29cqw}.orbit-ring.o2{inset:21%}
  .orb b{padding:5px 9px;gap:5px}
  .home-menus{gap:10px}
  .hm{min-height:0;padding:16px;gap:8px}
  .hm-ico{width:46px;height:46px;border-radius:14px}
  .hm h2{font-size:19px}
  .hm .tag{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .orbit-ring,.orb i,.man,.disc::after{animation:none!important}
}