:root{
    --bg:#eef2f5; --bg-2:#ffffff; --panel:#ffffff; --panel-border:#dde3e9;
    --text:#20242b; --text-dim:#6b7280; --accent:#2f6fed; --accent-2:#0891b2;
    --line:#c7d0d9;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#e7ecf1; --bg-2:#ffffff; --panel:#ffffff; --panel-border:#d7dee5; --text:#1c2028; --text-dim:#697280;
    }
  }
  :root[data-theme="dark"]{
    --bg:#e7ecf1; --bg-2:#ffffff; --panel:#ffffff; --panel-border:#d7dee5; --text:#1c2028; --text-dim:#697280;
  }
  html{ scroll-padding-top:env(safe-area-inset-top,0px); height:100%; }
  body{
    margin:0; height:100%; background:var(--bg); color:var(--text); overflow:hidden;
    font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  #stage{ position:fixed; inset:0; touch-action:none; }
  canvas{ display:block; width:100%; height:100%; cursor:pointer; }

  .ui{ position:fixed; inset:0; pointer-events:none; z-index:5; }
  .ui > *{ pointer-events:auto; }

  header.hdr{
    position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); left:16px; right:16px;
    display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  }
  .brand{ line-height:1.25; }
  .brand .name{
    font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size:19px; letter-spacing:0.01em; color:var(--text);
  }
  .brand .role{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }
  .brand .name .fill{ border-bottom:1px dashed var(--accent-2); cursor:text; }

  .badge{
    display:flex; align-items:center; gap:7px; font-size:10.5px; color:#fff;
    background:var(--accent); padding:6px 10px; border-radius:3px; font-weight:600;
    letter-spacing:0.02em; white-space:nowrap; box-shadow:0 2px 8px rgba(47,111,237,.25);
  }
  .badge .dot{ width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.8s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }

  .hint{
    position:fixed; top:calc(64px + env(safe-area-inset-top,0px)); left:16px;
    font-size:11px; color:var(--text-dim); max-width:min(420px,calc(100vw - 32px)); transition:opacity .6s;
    background:rgba(255,255,255,.75); padding:6px 9px; border-radius:3px; border:1px solid var(--panel-border);
  }

  .periodic-explorer{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(18,29,40,.58);backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;}
  .periodic-explorer.open{opacity:1;visibility:visible;}
  .periodic-explorer__window{box-sizing:border-box;width:min(1160px,96vw);max-height:min(860px,94dvh);overflow:auto;background:#f8fafc;color:#182332;border:1px solid #dce3ea;border-radius:14px;box-shadow:0 28px 90px rgba(0,0,0,.32);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;}
  .periodic-explorer__header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e4e9ef;background:#fff;}
  .periodic-explorer__header p,.periodic-explorer__eyebrow{margin:0 0 5px;color:#607286;font-size:10px;font-weight:700;letter-spacing:.12em;}
  .periodic-explorer__header h2{margin:0;font-size:22px;letter-spacing:-.025em;}
  .periodic-explorer__header button{width:38px;height:38px;border:1px solid #dce3ea;border-radius:10px;background:#fff;color:#34465a;font-size:24px;line-height:1;cursor:pointer;}
  .periodic-explorer__content{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:18px;padding:20px 24px;align-items:start;}
  .periodic-explorer__table-scroll{max-width:100%;overflow-x:auto;padding:2px 1px 10px;}
  .periodic-web-grid{display:grid;grid-template-columns:repeat(18,minmax(34px,1fr));grid-template-rows:repeat(9,50px);gap:4px;min-width:760px;}
  .periodic-web-element{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:4px 5px;border:1px solid #d8e2eb;border-radius:7px;background:#fff;color:#24364a;text-align:left;cursor:pointer;transition:transform .13s,border-color .13s,box-shadow .13s,background .13s;}
  .periodic-web-element span{font-size:9px;color:#708195;line-height:1;}
  .periodic-web-element b{font-size:14px;line-height:1.05;}
  .periodic-web-element:hover,.periodic-web-element.is-selected{transform:translateY(-2px);border-color:#1686c5;background:#eef8ff;box-shadow:0 4px 12px rgba(24,116,169,.15);}
  .periodic-explorer__detail{position:sticky;top:0;padding:16px;border:1px solid #e0e7ee;border-radius:11px;background:#fff;}
  .periodic-explorer__detail h3{margin:0 0 12px;font-size:19px;}
  .periodic-web-fact{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #edf1f5;font-size:12px;}
  .periodic-web-fact span{color:#6b7a8b;}
  .periodic-web-fact strong{text-align:right;}
  .periodic-explorer__detail [data-periodic-detail] h3{margin:16px 0 7px;font-size:12px;}
  .periodic-web-isotope,.periodic-web-empty{margin:6px 0;padding:8px;border-radius:7px;background:#f0f6fa;color:#40576c;font-size:11px;line-height:1.5;}
  .periodic-explorer__footer{padding:12px 24px 16px;border-top:1px solid #e4e9ef;color:#67788b;font-size:11px;}
  @media(max-width:760px){.periodic-explorer{padding:8px}.periodic-explorer__window{width:100%;max-height:96dvh;border-radius:10px}.periodic-explorer__header{padding:15px 16px}.periodic-explorer__content{grid-template-columns:1fr;padding:14px 16px;gap:12px}.periodic-web-grid{grid-template-rows:repeat(9,44px);min-width:760px}.periodic-explorer__detail{position:static}.periodic-explorer__footer{padding:10px 16px;font-size:10px}}

  nav.dock{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    display:flex; gap:6px; background:var(--panel); border:1px solid var(--panel-border);
    padding:6px; border-radius:4px; box-shadow:0 6px 20px rgba(20,30,45,.08);
  }
  .navbtn{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background:transparent; border:1px solid transparent; color:var(--text-dim);
    padding:9px 16px; border-radius:3px; cursor:pointer; font-family:inherit;
    font-size:10.5px; letter-spacing:.02em; white-space:nowrap;
  }
  .navbtn .ic{ font-size:17px; }
  .navbtn:hover{ color:var(--text); background:var(--bg); }
  .navbtn.active{ color:#fff; background:var(--accent); }

  /* side info panel (zone details) */
  .panel{
    box-sizing:border-box; position:fixed; right:0; top:0; bottom:0; width:min(360px, 100%);
    background:var(--panel); border-left:1px solid var(--panel-border);
    transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
    padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px));
    overflow-y:auto; z-index:6; box-shadow:-8px 0 30px rgba(20,30,45,.06);
  }
  .panel.open{ transform:translateX(0); }
  .panel .tag{
    display:inline-block; font-size:10px; color:#fff; background:var(--accent-2);
    padding:3px 7px; border-radius:2px; letter-spacing:.03em; margin-bottom:12px;
  }
  .panel h2{ font-family:"Space Grotesk", sans-serif; font-size:21px; margin:0 0 10px; line-height:1.2; }
  .panel p{ font-size:13px; line-height:1.6; color:var(--text-dim); margin:0 0 14px; }
  .panel .close{
    position:absolute; top:calc(16px + env(safe-area-inset-top,0px)); right:16px;
    background:none; border:none; color:var(--text-dim); font-size:20px; cursor:pointer; line-height:1;
  }
  .card{ border:1px solid var(--panel-border); border-radius:3px; padding:12px; margin-bottom:10px; background:var(--bg); }
  .card .t{ font-size:13px; color:var(--text); margin-bottom:4px; font-weight:600; }
  .card .d{ font-size:12px; color:var(--text-dim); line-height:1.5; }
  .card .edit{ color:var(--accent); font-size:10.5px; margin-top:6px; display:block; }

  .panel-actions{ display:flex; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--panel-border); }
  .panel-actions button{ flex:1; border:1px solid var(--panel-border); background:var(--bg); color:var(--text); padding:10px 12px; border-radius:4px; cursor:pointer; font-family:inherit; font-size:11px; }
  .panel-actions button:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .frame-shot{
    width:100%; aspect-ratio:4/3; border-radius:3px; margin-bottom:8px;
    display:flex; align-items:center; justify-content:center; font-size:11px;
    color:var(--text-dim); border:1px dashed var(--panel-border); background:var(--bg-2);
  }

  /* compass modal (info panel that zooms then points to a zone) */
  .modal-wrap{
    position:fixed; inset:0; background:rgba(20,30,45,.28); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
    transition:opacity .3s; z-index:7;
  }
  .modal-wrap.open{ opacity:1; pointer-events:auto; }
  .compass{
    box-sizing:border-box; background:var(--panel); border:1px solid var(--panel-border); border-radius:6px;
    padding:26px 22px; width:min(320px, 88vw); box-shadow:0 20px 60px rgba(20,30,45,.18);
    text-align:center;
  }
  .compass h3{ font-family:"Space Grotesk", sans-serif; font-size:18px; margin:0 0 4px; }
  .compass .sub{ font-size:11.5px; color:var(--text-dim); margin-bottom:18px; }
  .compass-grid{
    display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr;
    gap:6px; margin:0 auto; width:220px; height:220px;
  }
  .compass-grid button{
    border:1px solid var(--panel-border); background:var(--bg); border-radius:4px;
    color:var(--text); font-family:inherit; font-size:10.5px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .compass-grid button:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
  .compass-grid button .ic{ font-size:19px; }
  .compass-grid .center{
    display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:20px;
  }
  .compass-close{
    margin-top:16px; background:none; border:none; color:var(--text-dim); font-size:11.5px;
    cursor:pointer; text-decoration:underline;
  }

  @media (max-width: 640px){
    .panel{ width:100%; }
    .hint{ display:none; }
    .brand .name{ font-size:16px; }
  }



#acceleratorOverlay{position:fixed;inset:0;z-index:9999;background:#071018;display:none;opacity:0;transition:opacity .35s ease;}
#acceleratorOverlay.open{display:block;opacity:1;}
#acceleratorFrameWrap{position:absolute;inset:0;overflow:hidden;}
#acceleratorFrame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#071018;}
#acceleratorBack{position:absolute;right:18px;top:18px;z-index:2;padding:9px 14px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(10,18,26,.88);color:#fff;font:600 13px system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(8px);}
#acceleratorBack:hover{background:rgba(35,55,70,.95);}



/* ---------- v64 : écran d'acquisition initial ---------- */
#siteLoader{position:fixed;inset:0;z-index:100000;background:#F8F9FA;color:#2C3E50;display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible;transition:opacity .55s ease,visibility .55s ease;}
#siteLoader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}

#siteLoader .loader-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  width:100%;
  max-width:none;
  min-height:100vh;

  padding:2rem;
  box-sizing:border-box;

  position:relative;
}

#siteLoader .canvas-container{
  position:relative;

  width:100%;
  max-width:650px;

  aspect-ratio:2.6/1;

  display:flex;
  align-items:center;
  justify-content:center;
}

#siteLoader #beamCanvas{width:100%;height:100%;display:block;cursor:default;}
#siteLoader .action-container{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;min-height:52px;display:flex;align-items:center;justify-content:center;z-index:3;}
#siteLoader .loading-status{font-size:1.05rem;font-weight:500;color:#2C3E50;letter-spacing:-.01em;text-align:center;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.6rem;transition:opacity .4s ease,transform .4s ease;}
#siteLoader .btn-tps{display:inline-flex;align-items:center;gap:.6rem;background:#0A66C2;color:#fff;font-weight:600;font-size:.8rem;border-radius:50px;border:none;padding:.8rem 1.15rem;cursor:pointer;box-shadow:0 4px 14px rgba(10,102,194,.25);transition:all .3s cubic-bezier(.16,1,.3,1);font-family:Inter,system-ui,-apple-system,sans-serif;}
#siteLoader .btn-tps:hover{background:#08529C;transform:translateY(-2px);box-shadow:0 6px 20px rgba(10,102,194,.35)}
#siteLoader .btn-tps:active{transform:translateY(0)}
#siteLoader .hidden{display:none!important;opacity:0;transform:translateY(10px)}
#siteLoader .fade-in{animation:v64FadeInUp .5s ease forwards}
@keyframes v64FadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){#siteLoader .loader-wrapper{padding:1.2rem}#siteLoader .loading-status{font-size:.92rem}}



/* v67 — Progression plus douce + Space Grotesk */
#siteLoader .loading-status{font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;}

/* v66 — Bienvenue sous la courbe, sans cartouche */
#siteLoader .action-container{
  position:absolute;
  left:50%;
  top:calc(50% + 145px);
  transform:translate(-50%,-50%);
  margin:0;
  min-height:0;
  width:100%;
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
}
#siteLoader .action-container > *{
  flex:0 0 auto;
  margin-left:0;
  margin-right:0;
}
#siteLoader .loading-status{
  white-space:nowrap;
  width:max-content;
}
#siteLoader #progressText{
  white-space:nowrap;
}
#siteLoader .btn-tps{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.1rem;
  background:transparent;
  color:#2C3E50;
  font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;
  font-size:17px;
  letter-spacing:.01em;
  border:0;
  border-radius:0;
  padding:.35rem .5rem;
  cursor:pointer;
  box-shadow:none;
  transition:color .2s ease,transform .2s ease;
}
#siteLoader .btn-tps:hover{
  background:transparent;
  color:#0A66C2;
  transform:translateY(-1px);
  box-shadow:none;
}
#siteLoader .btn-tps:active{transform:translateY(0);}
#siteLoader .btn-tps svg{width:16px;height:16px;}
@media(max-width:640px){
  #siteLoader .action-container{top:calc(50% + 120px);}
  #siteLoader .btn-tps{font-size:16px;}
}



/* v78 — Le groupe « Bienvenue → » est ancré sur le centre réel du profil. */
#siteLoader .action-container{
  position:absolute;

  left:50%;
  top:calc(50% + 145px);

  transform:translate(-50%,-50%);

  width:max-content;
  max-width:none;
  min-width:0;
  min-height:0;

  margin:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:18px;

  z-index:3;
}
#siteLoader .action-container > *{flex:0 0 auto;margin:0;}
#siteLoader .action-container{max-width:calc(100vw - 32px);}
#siteLoader .action-container > *{max-width:100%;}
#siteLoader .btn-tps{width:max-content;margin:0;}

#siteLoader .btn-tps{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0;
}

#siteLoader .btn-tps svg{
  display:block;
  width:16px;
  height:16px;
  margin:0;
  padding:0;
}

/* Halo bleu premium du bouton Bienvenue */
#siteLoader .btn-tps{
  position:relative;
  z-index:1;
  overflow:visible;
}

/* Halo lumineux derrière le bouton */
#siteLoader .btn-tps::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:150px;
  height:58px;
  transform:translate(-50%,-50%);
  border-radius:50%;

  background:radial-gradient(
    ellipse at center,
    rgba(0,140,255,.34) 0%,
    rgba(0,140,255,.24) 35%,
    rgba(0,140,255,.04) 62%,
    rgba(0,140,255,0) 78%
  );

  filter:blur(7px);
  opacity:0;
  z-index:-1;
  pointer-events:none;
}

/* Activation lorsque Bienvenue apparaît */
#siteLoader .btn-tps.fade-in::before{
  animation:
    welcomeGlowIn .9s ease-out forwards,
    welcomeGlowPulse 2.8s ease-in-out 1s infinite;
}

@keyframes welcomeGlowIn{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.65);
  }
  100%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
}

@keyframes welcomeGlowPulse{
  0%,100%{
    opacity:.45;
    transform:translate(-50%,-50%) scale(1);
  }
  50%{
    opacity:.8;
    transform:translate(-50%,-50%) scale(1.08);
  }
}



/* Semantic HTML portfolio card projected onto the rotating Three.js panel. */
#portfolioHtmlOverlay{
  position:fixed;left:0;top:0;width:689px;height:1000px;z-index:8;display:none;
  transform-origin:0 0;pointer-events:none;will-change:transform;
}
.portfolio-sheet{
  box-sizing:border-box;width:689px;height:1000px;padding:34px 38px 27px;
  overflow:hidden;background:#f8fafb;color:#163247;
  border:1px solid #d5dee5;font:16px/1.28 "Space Grotesk",Arial,sans-serif;
  pointer-events:none;
}
.portfolio-sheet *{box-sizing:border-box;}
.portfolio-sheet__header{
  display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px;
  border-bottom:2px solid #dce7ee;color:#0b5c8e;
}
.portfolio-sheet__header h1{margin:0;font:700 39px/1 "Space Grotesk",Arial,sans-serif;letter-spacing:.08em;}
.portfolio-sheet__eyebrow{margin:8px 0 0;font:600 13px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;}
.portfolio-sheet__discipline{padding-top:5px;font:600 13px/1.2 "IBM Plex Mono",monospace;text-align:right;}
.portfolio-sheet__identity{display:flex;align-items:center;gap:25px;padding:24px 0 21px;border-bottom:1px solid #dce7ee;}
.portfolio-sheet__monogram{
  display:grid;flex:0 0 86px;width:86px;height:86px;place-items:center;border-radius:50%;
  background:#e7eef3;color:#0b5c8e;font-size:30px;font-weight:700;
}
.portfolio-sheet__identity h2{margin:0 0 5px;font-size:31px;line-height:1.05;letter-spacing:.015em;}
.portfolio-sheet__identity p{margin:3px 0;color:#667580;font-size:14px;}
.portfolio-sheet__identity .portfolio-sheet__role{color:#315a70;font-size:13px;font-weight:700;}
.portfolio-sheet__section{margin-top:17px;}
.portfolio-sheet__section h3,.portfolio-sheet__contact h3{
  display:flex;align-items:center;gap:12px;margin:0 0 8px;color:#0b5c8e;
  font:700 17px/1.1 "Space Grotesk",Arial,sans-serif;letter-spacing:.055em;text-transform:uppercase;
}
.portfolio-sheet__section h3::after,.portfolio-sheet__contact h3::after{content:"";height:1px;flex:1;background:#8fb3c8;}
.portfolio-sheet dl{display:grid;gap:5px;margin:0;}
.portfolio-sheet dl>div{display:grid;grid-template-columns:126px 1fr;gap:8px;align-items:baseline;}
.portfolio-sheet dt{font:700 12px/1.25 "IBM Plex Mono",monospace;color:#163247;}
.portfolio-sheet dd{margin:0;color:#566875;font-size:14px;line-height:1.25;}
.portfolio-sheet__contact{margin-top:17px;padding-top:12px;border-top:1px solid #dce7ee;}
.portfolio-sheet__contact nav{display:flex;gap:10px;justify-content:space-between;margin-top:9px;}
.portfolio-sheet__contact a{
  display:flex;flex:1;align-items:center;justify-content:center;gap:8px;min-height:42px;
  border:1px solid #c6d8e3;border-radius:5px;background:#fff;color:#0b5c8e;
  font-size:14px;font-weight:600;text-decoration:none;pointer-events:auto;cursor:pointer;
}
.portfolio-sheet__contact a:hover,.portfolio-sheet__contact a:focus-visible{background:#eaf3f8;outline:2px solid #0b5c8e;outline-offset:2px;}
.portfolio-sheet__contact a span{font-weight:700;}
.portfolio-sheet__discipline strong,.portfolio-sheet__discipline small{display:block;}
.portfolio-sheet__discipline small{margin-top:7px;color:#667580;font-size:11px;font-weight:500;}
.portfolio-sheet__prompt{margin:10px 0 0;color:#667580;text-align:center;font:12px/1.3 "IBM Plex Mono",monospace;}