/* ==========================================================================
   Fleury Niyokwizera — Portfolio « Signal »
   Design system : bleu nuit + lime électrique, Instrument Serif / Geist
   ========================================================================== */

/* ---------- Polices auto-hébergées ---------- */
@font-face{ font-family:'Geist'; src:url('/assets/fonts/geist-latin-wght-normal.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face{ font-family:'Geist Mono'; src:url('/assets/fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face{ font-family:'Instrument Serif'; src:url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Instrument Serif'; src:url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

/* ---------- Jetons : thème sombre (par défaut) ---------- */
:root{
  --bg: #060a18;
  --bg-2: #0b1430;
  --surface: rgba(255,255,255,.035);
  --surface-strong: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --text: #e6eaf5;
  --muted: #8c96b4;
  --faint: #7c87a8;
  --accent: #c6f35a;
  --accent-ink: #0b1400;          /* texte posé sur l'accent */
  --accent-text: #c6f35a;         /* accent utilisé comme couleur de texte */
  --accent-glow: rgba(198,243,90,.35);
  --accent-soft: rgba(198,243,90,.10);
  --blue: #5b8cff;
  --warn: #f5b84b;
  --danger: #ff7a7a;
  --shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  --grid-line: rgba(255,255,255,.035);

  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);
  --step-4: clamp(3rem, 1.6rem + 6.4vw, 7.5rem);

  --radius-s: 10px;
  --radius: 18px;
  --radius-l: 28px;
  --header-h: 68px;
  --wrap: 1200px;
  --gutter: 16px;
  --ease-out: cubic-bezier(.22,1,.36,1);
  color-scheme: dark;
}

/* ---------- Thème clair ---------- */
:root[data-theme="light"]{
  --bg: #f6f7fb;
  --bg-2: #e9edf8;
  --surface: rgba(255,255,255,.7);
  --surface-strong: #ffffff;
  --border: rgba(15,23,42,.09);
  --border-strong: rgba(15,23,42,.18);
  --text: #0c1226;
  --muted: #4a5470;
  --faint: #5b6580;
  --accent: #c6f35a;
  --accent-ink: #0b1400;
  --accent-text: #4d6b00;
  --accent-glow: rgba(120,170,0,.25);
  --accent-soft: rgba(120,170,0,.10);
  --warn: #9a5b00;
  --danger: #b42318;
  --shadow: 0 30px 70px -35px rgba(15,23,42,.35);
  --grid-line: rgba(15,23,42,.05);
  color-scheme: light;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 12px); }
html:not(.lenis){ scroll-behavior:smooth; }
body{
  min-height:100vh; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body::before{ /* grille de fond très discrète */
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, var(--accent-soft), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--bg);
  mask-image:linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}
img,svg,canvas{ display:block; max-width:100%; }
img{ height:auto; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
strong,b{ font-weight:600; }
em{ font-style:italic; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
@media (min-width:640px){ :root{ --gutter:28px; } }
@media (min-width:1024px){ :root{ --gutter:40px; } }

.skip-link{
  position:fixed; left:12px; top:-60px; z-index:200; padding:10px 16px; border-radius:var(--radius-s);
  background:var(--accent); color:var(--accent-ink); font-weight:600; transition:top .2s;
}
.skip-link:focus{ top:12px; }

/* Verre */
.glass{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
}

/* ---------- Typographie commune ---------- */
.eyebrow, .tag-accent, .card-tag, .tl-date, .note{
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.04em;
}
.eyebrow{ color:var(--accent-text); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.eyebrow::before{ content:''; width:28px; height:1px; background:currentColor; }
.title{
  font-family:var(--font-display); font-weight:400; font-size:var(--step-3);
  line-height:1; letter-spacing:-.02em; max-width:20ch; margin-bottom:56px;
}
.title em, .feature-title em, .contact-title em{ color:var(--accent-text); }
.subtitle{ font-size:var(--step-1); font-weight:600; letter-spacing:-.01em; margin:72px 0 8px; }
.note{ color:var(--faint); margin-bottom:24px; }

.section{ padding-block:clamp(80px, 10vw, 140px); position:relative; }

.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chips li{
  font-family:var(--font-mono); font-size:12.5px; line-height:1; padding:7px 10px; border-radius:999px;
  color:var(--muted); background:var(--surface-strong); border:1px solid var(--border);
}

.ticks{ display:grid; gap:10px; }
.ticks li{ position:relative; padding-left:24px; color:var(--muted); }
.ticks li::before{
  content:''; position:absolute; left:2px; top:.62em; width:10px; height:5px;
  border-left:2px solid var(--accent-text); border-bottom:2px solid var(--accent-text); transform:rotate(-45deg);
}

.links{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:18px; font-weight:500; }
.links a{ color:var(--accent-text); background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition:background-size .3s var(--ease-out); }
.links a:hover{ background-size:100% 1px; }

/* ---------- Boutons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:15px; line-height:1.2;
  border:1px solid transparent; transition:transform .25s var(--ease-out), background-color .2s, border-color .2s, box-shadow .3s;
  will-change:transform;
}
.btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease-out); }
.btn:hover svg{ transform:translateX(3px); }
.btn-accent{ background:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 0 var(--accent-glow), 0 10px 40px -10px var(--accent-glow); }
.btn-accent:hover{ box-shadow:0 0 0 6px var(--accent-soft), 0 14px 50px -10px var(--accent-glow); }
.btn-glass{ background:var(--surface-strong); border-color:var(--border-strong); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.btn-glass:hover{ border-color:var(--accent-text); }
.btn-ghost{ color:var(--muted); }
.btn-ghost:hover{ color:var(--text); }

/* ---------- Barre de progression & curseur ---------- */
.progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:120; pointer-events:none; }
.progress span{ display:block; height:100%; background:var(--accent); box-shadow:0 0 12px var(--accent-glow); transform-origin:0 50%; transform:scaleX(0); }
.cursor{ display:none; }
@media (hover:hover) and (pointer:fine){
  html.js:not(.reduced-motion) .cursor{
    display:block; position:fixed; top:0; left:0; z-index:150; pointer-events:none;
    width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%;
    border:1px solid var(--accent-text); opacity:0; mix-blend-mode:difference;
    transition:width .25s var(--ease-out), height .25s var(--ease-out), margin .25s var(--ease-out), opacity .3s, background-color .25s;
  }
  html.js .cursor.is-visible{ opacity:.9; }
  html.js .cursor.is-hover{ width:64px; height:64px; margin:-32px 0 0 -32px; background:var(--accent-soft); }
}

/* ---------- En-tête ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  transition:background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.header.is-scrolled{
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--border);
}
.nav{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.01em; }
.brand-mark{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--accent-ink); background:var(--accent);
  box-shadow:0 0 24px -4px var(--accent-glow);
}
.brand-name{ display:none; }
@media (min-width:420px){ .brand-name{ display:inline; } }

.menu-btn{ width:44px; height:44px; display:grid; place-content:center; gap:7px; border-radius:12px; }
.menu-btn span{ display:block; width:22px; height:1.5px; background:var(--text); transition:transform .3s var(--ease-out); }
.menu-btn[aria-expanded="true"] span:first-child{ transform:translateY(4.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child{ transform:translateY(-4.25px) rotate(-45deg); }

.menu{
  position:fixed; inset:var(--header-h) 0 auto 0; padding:12px var(--gutter) 28px;
  background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:none;
}
.menu.is-open{ display:block; }
html.no-js .menu{ position:static; display:block; padding:0; background:none; border:0; }
html.no-js .menu-btn{ display:none; }
.menu-links a{ display:block; padding:14px 2px; font-size:var(--step-1); border-bottom:1px solid var(--border); color:var(--muted); }
.menu-links a:hover, .menu-links a.is-active{ color:var(--text); }
.menu-tools{ display:flex; align-items:center; gap:12px; margin-top:20px; }

.lang{ display:inline-flex; padding:3px; border:1px solid var(--border-strong); border-radius:999px; }
.lang a{ padding:6px 12px; border-radius:999px; font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--muted); }
.lang a[aria-current="page"]{ background:var(--accent); color:var(--accent-ink); }
.theme-btn{ width:40px; height:40px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--border-strong); color:var(--muted); }
.theme-btn:hover{ color:var(--text); }
.theme-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.i-sun{ display:none; }
:root[data-theme="light"] .i-sun{ display:block; }
:root[data-theme="light"] .i-moon{ display:none; }

@media (min-width:1024px){
  .menu-btn{ display:none; }
  .menu, html.no-js .menu{ position:static; display:flex; align-items:center; gap:28px; padding:0; background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .menu-links{ display:flex; gap:2px; }
  .menu-links a{ padding:8px 12px; font-size:14px; border:0; border-radius:999px; position:relative; }
  .menu-links a.is-active{ background:var(--surface-strong); }
  .menu-tools{ margin-top:0; }
}
@media (max-width:1023px){ html.no-js .menu-links{ display:none; } }

/* ---------- Hero ---------- */
.pulse{ position:relative; width:8px; height:8px; flex:none; border-radius:50%; background:var(--accent); }
.pulse::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--accent); animation:pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse{ from{ transform:scale(.6); opacity:1; } to{ transform:scale(2.2); opacity:0; } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

:root{ --grad-a:#c6f35a; --grad-b:#7ee0ff; --grad-c:#5b8cff; }
:root[data-theme="light"]{ --grad-a:#4d6b00; --grad-b:#0f7a8a; --grad-c:#2f5bd3; }

.hx{ position:relative; isolation:isolate; overflow:hidden; padding-block:calc(var(--header-h) + 28px) 56px; }
.hx-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:0; transition:opacity 1.2s; pointer-events:none; }
.hx-canvas.is-ready{ opacity:1; }
.hx-aura{
  position:absolute; z-index:-2; width:80vmax; height:80vmax; right:-30vmax; top:-38vmax; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent) 0%, color-mix(in srgb, var(--blue) 8%, transparent) 35%, transparent 62%);
}

.hx-grid{ position:relative; display:grid; gap:40px; grid-template-columns:minmax(0,1fr); grid-template-areas:"text" "visual" "bottom"; }
.hx-grid > *{ min-width:0; }
.hx-text{ grid-area:text; }
.hx-visual{ grid-area:visual; position:relative; }
.hx-bottom{ grid-area:bottom; }

/* Badges de confiance */
.hx-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.hx-badges li{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  font-size:13px; font-weight:500; color:var(--muted);
  background:var(--surface); border:1px solid var(--border-strong);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hx-badge-dot{ width:6px; height:6px; border-radius:2px; background:var(--accent-text); }
.hx-badges .hx-badge-on{ color:var(--text); border-color:color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }

.hx-name{ font-size:var(--step-0); color:var(--muted); margin-bottom:14px; }
.hx-name strong{ color:var(--text); }

.hx-title{
  font-family:var(--font-display); font-weight:400; font-size:clamp(2.6rem, 1.2rem + 4.6vw, 5.4rem);
  line-height:.98; letter-spacing:-.035em; max-width:14ch; text-wrap:balance;
}
/* Chiffre en dégradé : deux calques superposés, seule l'opacité du second est animée */
.hx-grad{ position:relative; display:inline-block; white-space:nowrap; color:var(--grad-a); }
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hx-grad, .hx-grad::after{
    background:linear-gradient(100deg, var(--grad-a) 0%, var(--grad-b) 55%, var(--grad-c) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hx-grad::after{
    content:attr(data-text); position:absolute; inset:0;
    background-image:linear-gradient(100deg, var(--grad-c) 0%, var(--grad-a) 50%, var(--grad-b) 100%);
    opacity:0; animation:grad-swap 4.5s ease-in-out infinite alternate;
  }
}
@keyframes grad-swap{ to{ opacity:1; } }

/* Phrase qui change */
.hx-rotator{ margin-top:22px; font-size:var(--step-1); line-height:1.4; color:var(--text); min-height:2.8em; }
.hx-rot-word{ color:var(--accent-text); font-weight:600; }
.hx-caret{ display:inline-block; width:2px; height:1.05em; margin-left:3px; vertical-align:-.15em; background:var(--accent-text); animation:caret 1s steps(1) infinite; }
@keyframes caret{ 50%{ opacity:0; } }
html.no-js .hx-caret, html.reduced-motion .hx-caret{ display:none; }

.hx-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }

/* Bloc « en direct » : une ligne discrète sous les boutons */
.hx-live{ margin-top:26px; font-size:12.5px; color:var(--muted); display:grid; gap:6px; opacity:0; transition:opacity .6s; }
/* Place réservée dès le départ : l'apparition ne décale pas la mise en page */
.hx-live.is-ready{ opacity:1; }
.hx-live-gh{ min-height:1.6em; opacity:0; transition:opacity .6s; }
.hx-live-gh.is-ready{ opacity:1; }
html.no-js .hx-live{ display:none; }
.hx-live-title{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); }
.hx-live ul{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.hx-live li{ display:inline-flex; align-items:center; gap:7px; }
.hx-live-val{ font-family:var(--font-mono); font-size:12px; color:var(--faint); }
.hx-dot{ width:7px; height:7px; border-radius:50%; background:var(--faint); flex:none; }
.hx-live li.is-up .hx-dot{ background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,.6); }
.hx-live li.is-down .hx-dot{ background:var(--warn); }
.hx-live-gh a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; }
.hx-live-gh a:hover{ color:var(--accent-text); }

/* Photo : médaillon moyen en haut à droite, anneau en dégradé animé */
.hx-photo{
  position:absolute; z-index:5; top:0; right:0; width:96px; aspect-ratio:1; border-radius:50%; padding:3px;
  will-change:transform;
}
.hx-blob{ position:absolute; inset:0; border-radius:50%; overflow:hidden; }
.hx-blob::before{
  content:''; position:absolute; inset:-25%;
  background:conic-gradient(from 0deg, var(--accent), var(--blue), #7ee0ff, var(--accent));
  animation:spin 8s linear infinite;
}
.hx-halo{
  position:absolute; inset:-30%; z-index:-1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 32%, transparent) 0%, transparent 62%);
  animation:halo 5s ease-in-out infinite alternate;
}
.hx-photo picture{ position:relative; z-index:1; display:block; width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 35%, #1a2a52, var(--bg-2) 70%); }
.hx-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; transform:scale(1.18); transform-origin:50% 30%; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes halo{ from{ transform:scale(.9); opacity:.55; } to{ transform:scale(1.05); opacity:1; } }

/* Conversation : pièce centrale */
.hx-spot{
  position:absolute; inset:8% -10% -6% -10%; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--blue) 10%, transparent) 55%, transparent);
  filter:blur(10px); animation:breathe 7s ease-in-out infinite alternate;
}
@keyframes breathe{ from{ transform:scale(.94); opacity:.7; } to{ transform:scale(1.04); opacity:1; } }
.hx-chat{
  position:relative; z-index:3; padding:0; overflow:hidden; will-change:transform; border-radius:22px;
  background:color-mix(in srgb, var(--bg) 88%, transparent); border-color:var(--border-strong);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.85), 0 0 60px -30px var(--accent-glow);
}
/* Bordure lumineuse qui tourne (transform seul, masquée sur 1,5 px) */
.hx-beam{
  position:absolute; inset:0; z-index:4; border-radius:inherit; padding:1.5px; pointer-events:none; overflow:hidden;
  -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);
}
.hx-beam span{
  position:absolute; left:50%; top:50%; width:200%; aspect-ratio:1; margin:-100% 0 0 -100%;
  background:conic-gradient(from 0deg, transparent 0 70%, var(--accent) 82%, #7ee0ff 88%, transparent 96%);
  animation:spin 6s linear infinite;
}
html.reduced-motion .hx-beam{ display:none; }

.hx-chat-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); padding-right:112px; }
.hx-chat-tag{ font-family:var(--font-mono); font-size:11px; color:var(--faint); border:1px solid var(--border-strong); border-radius:6px; padding:1px 6px; }
.hx-chat-warn{ padding:8px 16px; font-size:12.5px; color:var(--warn); background:color-mix(in srgb, var(--warn) 10%, transparent); border-bottom:1px solid var(--border); }
.hx-chat-log{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; height:330px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.hx-chat-log .msg{ font-size:14px; max-width:94%; }
.hx-chat-log .msg-bot p + ul, .hx-chat-log .msg-bot ul + p{ margin-top:8px; }
.hx-chat-log .msg-bot ul{ display:grid; gap:8px; margin-top:8px; }
.hx-chat-log .msg-bot li{ padding-left:10px; border-left:2px solid var(--border-strong); color:var(--muted); }
.hx-chat-log .msg-bot li strong{ color:var(--text); }
.hx-chat-log .msg-bot a{ color:var(--accent-text); font-weight:500; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.hx-chat-log .msg-bot small{ display:block; margin-top:2px; color:var(--faint); font-size:12px; }
.hx-chat-log .is-new{ animation:msg-in .45s var(--ease-out) both; }
@keyframes msg-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.hx-typing{ display:flex; gap:5px; align-self:flex-start; padding:12px 14px; border-radius:16px; background:var(--surface-strong); border:1px solid var(--border); }
.hx-typing span{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:typing 1.2s infinite; }
.hx-typing span:nth-child(2){ animation-delay:.15s; } .hx-typing span:nth-child(3){ animation-delay:.3s; }
.is-typing::after{ content:'▍'; margin-left:1px; animation:caret 1s steps(1) infinite; }

.hx-suggest{
  display:flex; align-items:center; gap:6px; padding:10px 16px 2px; border-top:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none; mask-image:linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image:linear-gradient(90deg, #000 85%, transparent);
}
.hx-suggest::-webkit-scrollbar{ display:none; }
.hx-suggest > *{ flex:none; }
.hx-suggest-label{ font-size:12px; color:var(--faint); margin-right:2px; }
.hx-chip{
  white-space:nowrap; font-size:12.5px; padding:5px 10px; border-radius:999px; color:var(--text);
  background:var(--surface-strong); border:1px solid var(--border-strong); transition:border-color .2s, background-color .2s;
}
.hx-chip:hover, .hx-chip[aria-pressed="true"]{ border-color:var(--accent-text); background:var(--accent-soft); }
html.no-js .hx-chip, html.no-js .hx-suggest-label{ display:none; }
.hx-ask{ display:flex; gap:8px; padding:10px 16px 6px; }
.hx-ask input{
  flex:1; min-width:0; height:44px; padding:0 16px; border-radius:999px; font:inherit; font-size:14px; color:var(--text);
  background:var(--surface-strong); border:1px solid var(--border-strong);
}
.hx-ask input::placeholder{ color:var(--faint); }
.hx-ask input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.hx-send{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--accent-ink); box-shadow:0 0 24px -6px var(--accent-glow); }
.hx-send svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hx-chat-note{ padding:4px 16px 14px; font-size:11.5px; line-height:1.45; color:var(--faint); }

/* Compteurs */
.hx-counters{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; border-radius:var(--radius); overflow:hidden; background:var(--border); border:1px solid var(--border); }
.hx-counters li{ padding:18px 20px; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.hx-num{ font-family:var(--font-display); font-size:clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hx-counters li:first-child .hx-num{ color:var(--accent-text); }
.hx-counters li > p:last-child{ margin-top:6px; font-size:13px; color:var(--muted); }

/* ---- Mobile : médaillon en haut à droite du texte, conversation sous le titre ---- */
@media (max-width:1099px){
  .hx-visual{ position:static; }
  .hx-photo{ top:0; right:var(--gutter); }
  .hx-badges{ padding-right:108px; }
  .hx-spot{ inset:20% -20% auto; height:60%; }
}
@media (max-width:699px){
  .hx-badges li{ font-size:12px; padding:5px 10px; }
  .hx-chat-log{ height:340px; }
}
/* ---- Tablette ---- */
@media (min-width:700px){
  .hx-photo{ width:128px; }
  .hx-badges{ padding-right:150px; }
  .hx-counters{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
/* ---- Ordinateur : texte à gauche, conversation à droite, médaillon en haut à droite ---- */
@media (min-width:1100px){
  .hx{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
  .hx-grid{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); grid-template-areas:"text visual" "bottom bottom"; column-gap:64px; row-gap:44px; align-items:center; }
  .hx-badges{ padding-right:0; }
  .hx-visual{ padding-top:88px; }
  .hx-photo{ width:150px; top:0; right:-14px; }
  .hx-chat{ width:100%; max-width:480px; }
  .hx-chat-head{ padding-right:150px; }
  .hx-chat-log{ height:270px; }
}

/* ---------- À propos ---------- */
.about-grid{ display:grid; gap:28px; }
.about-text p{ color:var(--muted); font-size:var(--step-1); line-height:1.55; max-width:52ch; }
.about-text p + p{ margin-top:18px; }
.about-text p:first-child{ color:var(--text); }
.about-photo{ border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); max-width:420px; }
.about-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.seek{ padding:24px; }
.seek h3{ font-size:var(--step-0); margin-bottom:16px; }
.seek dl{ display:grid; gap:14px; }
.seek dt{ font-family:var(--font-mono); font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; }
.seek dd{ font-weight:500; }
@media (min-width:960px){
  .about-grid{ grid-template-columns:1.3fr .9fr; grid-template-rows:auto auto; column-gap:56px; }
  .about-photo{ grid-column:2; grid-row:1 / span 2; align-self:start; }
  .seek{ grid-column:1; }
}

/* ---------- Bento ---------- */
.bento{ display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0,1fr)); }
.tile{ padding:22px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; min-height:150px; position:relative; overflow:hidden; }
.tile p:not(.kpi){ color:var(--muted); font-size:var(--step--1); line-height:1.45; }
.tile-xl{ grid-column:1 / -1; min-height:220px; }
.tile-wide{ grid-column:1 / -1; }
.kpi{ font-family:var(--font-display); font-size:var(--step-3); line-height:1; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; }
.kpi-sm{ font-size:var(--step-2); }
.tile-xl .kpi{ font-size:var(--step-4); color:var(--accent-text); }
.spark{ position:absolute; left:0; right:0; top:42%; width:100%; height:30%; opacity:.55; pointer-events:none; }
.spark path{ fill:none; stroke:var(--accent-text); stroke-width:2; vector-effect:non-scaling-stroke; }
@media (min-width:768px){
  .kpis{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .kpis .tile-xl{ grid-column:span 2; grid-row:span 2; }
}
/* Tuile synchronisation : barres avant / après */
.tile-sync{ min-height:0; gap:20px; }
.sync-bars{ display:grid; gap:10px; }
.sync-bars p{ display:grid; grid-template-columns:4.5em 1fr 4em; align-items:center; gap:12px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted); }
.sync-bars p > span:last-child{ text-align:right; color:var(--text); }
.sync-bar{ height:8px; border-radius:999px; background:var(--surface-strong); overflow:hidden; }
.sync-bar i{ display:block; height:100%; width:calc(var(--w) * 1%); border-radius:inherit; background:var(--muted); transform-origin:0 50%; }
.sync-bars p:last-child .sync-bar i{ background:var(--accent); box-shadow:0 0 12px var(--accent-glow); }
@media (min-width:768px){ .tile-sync{ flex-direction:row; align-items:center; } .tile-sync > div:first-child{ flex:0 0 38%; } .sync-bars{ flex:1; } }

/* Lueur qui suit le curseur sur les tuiles et cartes */
.tile::after, .card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), var(--accent-soft), transparent 60%);
}
.tile:hover::after, .card:hover::after{ opacity:1; }

/* ---------- Projet à la une ---------- */
.feature{ position:relative; padding-block:24px 40px; }
.feature::before{
  content:''; position:absolute; inset:0 0 auto 0; height:100%; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 50% at 30% 30%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 70%);
}
.tag-accent{ color:var(--accent-text); text-transform:uppercase; margin-bottom:16px; }
.feature-title{ font-family:var(--font-display); font-weight:400; font-size:var(--step-3); line-height:1; letter-spacing:-.02em; max-width:22ch; }
.feature-lead{ margin-top:22px; max-width:62ch; color:var(--muted); font-size:var(--step-1); line-height:1.5; }

.ha-metrics{ display:grid; gap:12px; margin-top:44px; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.ha-metrics li{ padding:20px 22px; }
.ha-metrics .kpi{ font-size:var(--step-2); color:var(--accent-text); }
.ha-metrics li > p:last-child{ color:var(--muted); font-size:var(--step--1); margin-top:6px; }

.ha-grid{ display:grid; gap:20px; margin-top:20px; }
@media (min-width:1024px){ .ha-grid{ grid-template-columns:1.1fr .9fr; } }

/* Démo de chat */
.chat{ overflow:hidden; padding:0; box-shadow:var(--shadow); }
.chat-head{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); }
.chat-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent-glow); }
.chat-site{ margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--faint); }
.chat-warn{ padding:9px 18px; font-size:12.5px; color:var(--warn); background:color-mix(in srgb, var(--warn) 10%, transparent); border-bottom:1px solid var(--border); }
.chat-body{ display:flex; flex-direction:column; gap:12px; padding:18px; min-height:360px; }
.msg{ max-width:92%; padding:12px 14px; border-radius:16px; font-size:14.5px; line-height:1.5; }
.msg-user{ align-self:flex-end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:4px; font-weight:500; }
.msg-bot{ align-self:flex-start; background:var(--surface-strong); border:1px solid var(--border); border-bottom-left-radius:4px; }
.msg-bot ul{ margin-top:10px; display:grid; gap:10px; }
.msg-bot li{ padding-left:12px; border-left:2px solid var(--border-strong); color:var(--muted); }
.msg-bot li strong{ color:var(--text); }
.st{ font-weight:600; padding:1px 7px; border-radius:6px; font-size:.92em; }
.st-ok{ color:var(--accent-text); background:var(--accent-soft); }
.st-warn{ color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent); }
.src{ display:inline-block; color:var(--accent-text); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.msg-typing{ display:none; align-self:flex-start; gap:5px; background:var(--surface-strong); border:1px solid var(--border); }
.msg-typing span{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:typing 1.2s infinite; }
.msg-typing span:nth-child(2){ animation-delay:.15s; } .msg-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
.chat figcaption, .arch figcaption{ padding:12px 18px 16px; font-size:12.5px; color:var(--faint); }
/* États pilotés par JS pour la démo (le contenu reste complet sans JS) */
.chat.is-armed .msg-user, .chat.is-armed .msg-bot, .chat.is-armed .msg-bot li{ opacity:0; transform:translateY(10px); }
.chat.is-armed .is-in, .chat.is-armed .msg-bot li.is-in{ opacity:1; transform:none; transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.chat.is-armed .msg-typing.is-in{ display:flex; }
.chat .q-text::after{ content:''; }
.chat .is-typing::after{ content:'▍'; margin-left:1px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* Schéma d'architecture */
.arch{ display:flex; flex-direction:column; justify-content:center; }
.arch-flow{ display:grid; gap:18px; padding:8px 0; }
.node{
  position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center;
  padding:14px 16px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.node strong{ grid-column:2; font-size:15px; }
.node span:not(.node-ico){ grid-column:2; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.node-ico{
  grid-row:1 / span 2; display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  font-family:var(--font-mono); font-size:12px; color:var(--muted); background:var(--surface-strong); border:1px solid var(--border);
}
.node-hot{ border-color:color-mix(in srgb, var(--accent) 40%, var(--border)); }
.node-hot .node-ico{ color:var(--accent-ink); background:var(--accent); border-color:transparent; box-shadow:0 0 22px -4px var(--accent-glow); }
/* Liaisons + paquets de données animés (transform uniquement) */
.node + .node::before{
  content:''; position:absolute; left:35px; top:-19px; width:1px; height:19px;
  background:linear-gradient(var(--border-strong), var(--accent-text));
}
.node + .node::after{
  content:''; position:absolute; left:32px; top:-22px; width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--accent-glow);
  animation:packet 2.4s var(--ease-out) infinite; animation-delay:calc(var(--i, 0) * .4s);
}
.node:nth-child(2){ --i:0; } .node:nth-child(3){ --i:1; } .node:nth-child(4){ --i:2; } .node:nth-child(5){ --i:3; }
@keyframes packet{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:1; } 80%{ opacity:1; } 100%{ transform:translateY(18px); opacity:0; } }
.arch.is-paused .node::after{ animation-play-state:paused; }

.ha-details{ display:grid; gap:32px; margin-top:44px; }
.ha-details h4{ font-size:var(--step-0); margin:0 0 14px; }
.ha-details h4:not(:first-child){ margin-top:28px; }
@media (min-width:860px){ .ha-details{ grid-template-columns:1fr 1fr; gap:56px; } }

/* Base en chiffres */
.db{ margin-top:44px; padding:24px; }
.db h4{ font-size:var(--step-1); margin-bottom:6px; }
.db-legend{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:20px; font-size:13px; color:var(--muted); }
.lg{ display:inline-flex; align-items:center; gap:8px; }
.lg::before{ content:''; width:10px; height:10px; border-radius:3px; background:var(--c); }
.lg-halal, .seg-halal{ --c:var(--accent); }
.lg-nc, .seg-nc{ --c:var(--danger); }
.lg-doubt, .seg-doubt{ --c:var(--warn); }
.lg-na, .seg-na{ --c:color-mix(in srgb, var(--muted) 45%, transparent); }
.db-row + .db-row{ margin-top:26px; }
.db-name{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; font-weight:600; margin-bottom:10px; }
.db-total{ font-family:var(--font-mono); font-size:13px; font-weight:400; color:var(--muted); }
.bar{ display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--surface-strong); gap:2px; }
.seg{ flex:0 0 calc(var(--w) * 1%); min-width:3px; background:var(--c); transform-origin:0 50%; }
.db-values{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 18px; margin-top:12px; }
.db-values dt{ font-size:12.5px; color:var(--faint); }
.db-values dd{ font-family:var(--font-mono); font-size:14px; }
@media (min-width:768px){ .db{ padding:32px; } .db-values{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ---------- Cartes projets ---------- */
.cards{ display:grid; gap:14px; margin-top:20px; }
@media (min-width:700px){ .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .cards{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.card{
  position:relative; display:flex; flex-direction:column; gap:12px; padding:24px; overflow:hidden;
  transition:border-color .3s, transform .4s var(--ease-out); transform-style:preserve-3d; will-change:transform;
}
.card:hover{ border-color:var(--border-strong); }
.card-tag{ color:var(--accent-text); }
.card h4{ font-size:var(--step-1); line-height:1.25; letter-spacing:-.01em; }
.card > p:not(.card-tag){ color:var(--muted); flex:1; }
.more summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  font-family:var(--font-mono); font-size:13px; color:var(--text);
}
.more summary::-webkit-details-marker{ display:none; }
.more summary::after{ content:'+'; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1px solid var(--border-strong); transition:transform .3s var(--ease-out); }
.more[open] summary::after{ transform:rotate(45deg); }
.more-body{ padding-top:14px; }
.more-body .ticks li{ font-size:var(--step--1); }

/* Panneau de détail (amélioration JS) */
.panel{
  position:fixed; inset:auto 0 0 0; margin:0 auto; width:min(720px, 100%); max-height:88vh; overflow:auto;
  padding:28px var(--gutter) 32px; border:1px solid var(--border-strong); border-bottom:0; border-radius:var(--radius-l) var(--radius-l) 0 0;
  background:color-mix(in srgb, var(--bg) 92%, transparent); color:var(--text);
  backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 -30px 80px -20px rgba(0,0,0,.6);
}
.panel::backdrop{ background:rgba(3,6,15,.6); backdrop-filter:blur(4px); }
.panel[open]{ animation:panel-in .5s var(--ease-out); }
@keyframes panel-in{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }
.panel h3{ font-family:var(--font-display); font-weight:400; font-size:var(--step-2); line-height:1.05; margin:6px 0 14px; }
.panel .panel-desc{ color:var(--muted); font-size:var(--step-1); line-height:1.5; margin-bottom:20px; }
.panel .chips{ margin:20px 0 4px; }
.panel-close{ position:sticky; top:0; float:right; width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong); display:grid; place-items:center; background:var(--surface-strong); }
.panel-close svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; }
@media (min-width:768px){ .panel{ inset:0; margin:auto; border-bottom:1px solid var(--border-strong); border-radius:var(--radius-l); padding:36px; } }

/* ---------- Parcours ---------- */
.path{ display:grid; gap:24px; }
.path .subtitle{ margin-top:0; margin-bottom:28px; }
@media (min-width:1024px){ .path{ grid-template-columns:1.25fr 1fr; gap:72px; } }
.timeline{ position:relative; padding-left:28px; }
.timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--border-strong); }
.timeline::after{ /* ligne lumineuse qui se dessine au scroll */
  content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow); transform-origin:50% 0; transform:scaleY(var(--progress, 1));
}
.tl{ position:relative; padding-bottom:40px; }
.tl:last-child{ padding-bottom:0; }
.tl::before{
  content:''; position:absolute; left:-28px; top:6px; width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:1px solid var(--accent-text); z-index:1; transition:background-color .4s, box-shadow .4s;
}
.tl.is-lit::before, html.no-js .tl::before{ background:var(--accent); box-shadow:0 0 14px var(--accent-glow); }
.tl-date{ color:var(--accent-text); }
.tl h4{ font-size:var(--step-1); line-height:1.3; margin-top:6px; letter-spacing:-.01em; }
.tl-org{ color:var(--muted); margin-top:4px; }
.tl ul{ margin-top:12px; display:grid; gap:8px; }
.tl ul li{ position:relative; padding-left:16px; color:var(--muted); font-size:var(--step--1); line-height:1.55; }
.tl ul li::before{ content:''; position:absolute; left:0; top:.65em; width:6px; height:1px; background:var(--muted); }

/* ---------- Compétences ---------- */
.skills{ grid-template-columns:minmax(0,1fr); }
.skills .tile{ min-height:0; justify-content:flex-start; gap:16px; }
.skills h3{ font-size:var(--step-0); display:flex; align-items:center; gap:10px; }
.skills h3::before{ content:''; width:8px; height:8px; border-radius:2px; background:var(--accent); box-shadow:0 0 10px var(--accent-glow); }
@media (min-width:700px){ .skills{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){
  .skills{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .skills .tile-wide{ grid-column:span 2; }
}

/* ---------- Contact ---------- */
.contact{ text-align:left; }
.contact-title{ font-family:var(--font-display); font-weight:400; font-size:var(--step-4); line-height:.95; letter-spacing:-.035em; }
.contact-lead{ margin-top:24px; max-width:56ch; color:var(--muted); font-size:var(--step-1); line-height:1.5; }
.contact-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.contact-actions .email{ word-break:break-all; }
.copy-status{ min-height:1.6em; margin-top:10px; font-size:14px; color:var(--accent-text); }
.socials{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:20px; font-weight:500; }
.socials a{ color:var(--muted); transition:color .2s; }
.socials a:hover{ color:var(--accent-text); }
.gh{ margin-top:56px; padding:20px 22px; max-width:720px; }
.gh-title{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted); margin-bottom:14px; }
.gh-stats{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.gh-stats dt{ font-size:12.5px; color:var(--faint); }
.gh-stats dd{ font-family:var(--font-mono); font-size:var(--step-1); }
@media (min-width:640px){ .gh-stats{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ---------- Pied de page ---------- */
.footer{ border-top:1px solid var(--border); padding-block:28px; color:var(--faint); font-size:13.5px; }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }

/* ---------- États d'animation (uniquement si JS + mouvement autorisé) ----------
   Sans JS ou en mouvement réduit, tout le contenu est visible immédiatement. */
html.js.motion .reveal{ opacity:0; transform:translateY(28px); }
html.js.motion .reveal-title{ opacity:0; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .node + .node::after{ display:none; }
}
html.reduced-motion .hx-canvas{ display:none; }

/* ---------- Impression ---------- */
@media print{
  body::before, .header, .hx-canvas, .hx-aura, .hx-chat, .hx-live, .cursor, .progress, .chat, .arch, .gh{ display:none !important; }
  .glass{ backdrop-filter:none; }
}