@import url("https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap");

:root {
  --ink: #090d17;
  --ink-2: #111a2c;
  --mist: #b9c7dc;
  --paper: #edf1f7;
  --line: rgba(224, 233, 247, 0.24);
  --glass: rgba(9, 15, 29, 0.45);
  --accent: #e6909a;
  --lime: #aee3bf;
  --mono: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  --display: "UnifrakturCook", "Old English Text MT", "Lucida Blackletter", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--paper); background: var(--ink); font-family: var(--mono); overflow-x: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .14; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.intro { position: fixed; z-index: 50; inset: 0; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 35% 38%, #202d4a 0, #101827 31%, #060912 78%); cursor: pointer; transition: opacity .8s ease, visibility .8s ease; }
.intro::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#dbe6ff 1px, transparent 1px), radial-gradient(#dbe6ff 1px, transparent 1px); background-position: 0 0, 31px 44px; background-size: 93px 93px, 131px 131px; opacity: .65; }
.intro::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(223,235,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(223,235,255,.06) 1px,transparent 1px); background-size:4px 4px; opacity:.45; }
.intro.leaving { opacity: 0; visibility: hidden; }
.intro-stars { position: absolute; inset: 0; background: radial-gradient(ellipse at 48% 29%, rgba(255,255,255,.45), transparent 1px), radial-gradient(ellipse at 18% 69%, #fff, transparent 2px), radial-gradient(ellipse at 84% 46%, #fff, transparent 1.5px); filter: drop-shadow(0 0 8px #c7d8ff); }
.intro-content { position: relative; z-index: 2; display: grid; justify-items: center; max-width: 42rem; padding: 2rem; text-align: center; }
.eyebrow, .intro-subtitle { font-size: clamp(.56rem, 1vw, .68rem); letter-spacing: .24em; color: #a8b5ce; }
.intro-name { margin: .5rem 0 0; color: #f0f2f9; font: 700 clamp(4.4rem, 13vw, 9rem)/.7 var(--display); text-shadow: 0 0 20px #c6ccec55; }
.intro-subtitle { margin: 1.7rem 0 2.2rem; letter-spacing: .08em; }
.enter-button { position: relative; border: 1px solid rgba(229, 237, 255, .35); padding: .85rem 1.1rem; color: #f2f5fc; background: rgba(11, 17, 31, .35); letter-spacing: .21em; font-size: .65rem; cursor: pointer; transition: transform .25s, background .25s; }
.enter-button:hover, .enter-button:focus-visible { transform: translateY(-3px); background: rgba(230,144,154,.16); outline: 1px solid var(--accent); }
.enter-button span { color: var(--accent); font-size: 1rem; }
.boot-log { width: min(100%, 30rem); min-height: 0; margin-top: 1.1rem; color: var(--lime); text-align: left; font-size: clamp(.51rem, 1vw, .66rem); line-height: 1.65; letter-spacing: .05em; text-shadow: 0 0 8px #aee3bf77; }
.boot-log p { margin: 0; }
.intro.booting .intro-content { display:block; width:100%; max-width:none; height:100%; padding:clamp(2.6rem,7vw,5rem); text-align:left; }
.intro.booting .eyebrow, .intro.booting .intro-subtitle, .intro.booting .enter-button { display:none; }
.intro.booting .intro-name { position:absolute; top:31%; left:50%; margin:0; color:#dce4ef; font-size:clamp(5.5rem,15vw,12rem); opacity:.2; transform:translateX(-50%); white-space:nowrap; }
.intro.booting .boot-log { width:min(25rem, 42vw); margin:0; padding-top:0; }
.intro.booting .intro-rune { opacity:.16; }
.intro-rune { position: absolute; right: 13vw; bottom: 16vh; color: #f2f4fa; font-size: clamp(4rem, 12vw, 10rem); opacity: .75; transform: rotate(12deg); text-shadow: 0 0 30px #fff9; }
.intro-orb { position: absolute; width: 8px; aspect-ratio: 1; border-radius: 50%; background: #fff; filter: blur(1px) drop-shadow(0 0 14px white); }
.orb-a { top: 21%; left: 24%; }.orb-b { right: 27%; top: 36%; }
.intro-water { position: absolute; bottom: -15%; left: -10%; width: 120%; height: 36%; background: repeating-radial-gradient(ellipse at 50% 10%, transparent 0 17px, rgba(223, 236, 255, .1) 18px 19px); transform: perspective(500px) rotateX(55deg); opacity: .7; }

/* Écran de lancement 4mlzOS : une simulation visuelle, sans action sur l'ordinateur. */
.intro { background:radial-gradient(circle at 50% 43%,#132b36 0,#08131d 42%,#03070c 100%); }
.intro::before { background-image:linear-gradient(rgba(155,242,210,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(155,242,210,.045) 1px,transparent 1px); background-size:18px 18px; opacity:1; }
.intro::after { background:repeating-linear-gradient(0deg,rgba(202,255,229,.026) 0 1px,transparent 1px 4px); opacity:1; }
.intro-stars { opacity:.55; filter:drop-shadow(0 0 7px #b7ffe0); }
.intro-content { width:min(100% - 2.5rem,42rem); max-width:none; padding:0; text-align:left; }
.boot-window-head { display:flex; justify-content:space-between; gap:1rem; padding:.55rem .75rem; border:1px solid rgba(170,255,215,.28); color:#bff3d4; background:rgba(5,18,23,.48); font-size:.53rem; letter-spacing:.18em; }
.boot-window-head span:last-child { color:#789b91; }
.intro .eyebrow { margin:1.25rem 0 0; color:#9abcb1; font-size:.56rem; letter-spacing:.18em; }
.intro-command { margin:2.4rem 0 .65rem; color:#7ca398; font-size:.68rem; letter-spacing:.16em; }
.intro-command span { color:#d6ffe8; }
.intro-name { margin:0; color:#e5fff1; font:600 clamp(3.5rem,10vw,7rem)/.82 var(--mono); letter-spacing:-.09em; text-shadow:0 0 23px rgba(161,255,210,.13); }
.intro-subtitle { margin:1rem 0 2rem; color:#a6c6ba; font-size:.57rem; letter-spacing:.15em; }
.intro-subtitle strong { color:#d9ffea; font-weight:500; }
.intro .enter-button { border-color:rgba(170,255,215,.42); color:#d9ffea; background:rgba(9,36,38,.56); box-shadow:inset 0 0 0 1px rgba(179,255,220,.05); }
.intro .enter-button:hover, .intro .enter-button:focus-visible { background:rgba(100,220,165,.16); outline-color:#a8f6cd; }
.intro .enter-button span { color:#a8f6cd; }
.intro-hint { margin:1rem 0 0; color:#72968b; font-size:.48rem; letter-spacing:.12em; }
.intro-rune { right:8vw; bottom:11vh; color:#bdf1d6; font:400 clamp(5rem,13vw,11rem)/1 var(--mono); letter-spacing:-.16em; opacity:.13; transform:none; text-shadow:none; }
.intro.booting .intro-content { display:block; width:100%; max-width:none; height:100%; padding:clamp(2rem,6vw,5rem); }
.intro.booting .boot-window-head, .intro.booting .eyebrow, .intro.booting .intro-command, .intro.booting .intro-name, .intro.booting .intro-subtitle, .intro.booting .enter-button, .intro.booting .intro-hint { display:none; }
.intro.booting .boot-log { width:min(37rem,78vw); margin:0; padding:.9rem 0 .9rem 1rem; border-left:1px solid rgba(174,255,214,.4); color:#bdf3d1; font-size:clamp(.58rem,1.1vw,.72rem); line-height:1.85; text-shadow:0 0 10px rgba(150,255,200,.28); }
.boot-emblem, .boot-progress-wrap { display:none; }

/* Veille : une page d'allumage minimale avant le diagnostic. */
.intro:not(.booting) .intro-content { display:grid; justify-items:center; width:min(100% - 2.5rem,36rem); text-align:center; }
.intro:not(.booting) .boot-window-head, .intro:not(.booting) .intro-command { display:none; }
.intro:not(.booting) .eyebrow { margin:0 0 1.15rem; color:#819b95; font-size:.48rem; }
.intro:not(.booting) .intro-name { color:#e6f5ed; font:600 clamp(2.3rem,5vw,4.2rem)/.9 var(--display); letter-spacing:-.05em; text-shadow:0 0 18px rgba(211,255,232,.16); }
.intro:not(.booting) .intro-subtitle { margin:.85rem 0 1.3rem; color:#8ca59d; font-size:.49rem; }
.intro:not(.booting) .enter-button { border:0; padding:.55rem; background:transparent; color:#b7d5c9; font-size:.52rem; letter-spacing:.27em; }
.intro:not(.booting) .enter-button:hover, .intro:not(.booting) .enter-button:focus-visible { background:transparent; color:#e6fff0; outline:0; transform:none; }
.intro:not(.booting) .intro-hint { margin:.65rem 0 0; color:#5d7970; font-size:.42rem; }

/* Démarrage : console fictive et diagnostic graphique de 4mlzOS. */
.intro.booting { background:radial-gradient(ellipse at 50% 47%,#102018 0,#050907 49%,#010202 100%); }
.intro.booting::before { background-image:linear-gradient(rgba(136,255,177,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(136,255,177,.11) 1px,transparent 1px); background-size:8px 8px; opacity:.5; }
.intro.booting::after { background:repeating-linear-gradient(0deg,rgba(172,255,199,.035) 0 1px,transparent 1px 3px); }
.intro.booting .intro-stars { opacity:.17; }
.intro.booting .boot-window-head { position:absolute; top:clamp(1.5rem,5vw,4rem); left:clamp(1.5rem,5vw,4rem); display:flex; width:min(25rem,65vw); border-color:rgba(183,255,206,.32); background:rgba(5,13,8,.72); }
.intro.booting .boot-log { position:absolute; top:clamp(5.2rem,13vw,8.2rem); left:clamp(1.5rem,5vw,4rem); width:min(30rem,43vw); max-height:60vh; overflow:hidden; margin:0; padding:.65rem 0 .65rem .95rem; border-left-color:#90e6ae; color:#d2f6de; font-size:clamp(.54rem,.85vw,.68rem); line-height:1.72; }
.intro.booting .boot-log p { white-space:nowrap; }
.intro.booting .boot-emblem { position:absolute; top:50%; left:57%; display:grid; place-items:center; width:clamp(10rem,21vw,20rem); aspect-ratio:1; border:1px solid rgba(171,255,197,.21); border-radius:50%; color:#c9f9d8; transform:translate(-50%,-50%); box-shadow:0 0 0 1.2rem rgba(170,255,194,.025),0 0 0 2.6rem rgba(170,255,194,.018),0 0 50px rgba(111,238,160,.09); }
.intro.booting .boot-emblem::before, .intro.booting .boot-emblem::after { content:""; position:absolute; background:rgba(181,255,210,.28); }.intro.booting .boot-emblem::before { width:125%; height:1px; }.intro.booting .boot-emblem::after { width:1px; height:125%; }
.boot-emblem span { position:relative; z-index:1; font:600 clamp(2.1rem,5vw,5rem)/1 var(--mono); letter-spacing:-.17em; text-shadow:0 0 14px rgba(183,255,212,.35); }.boot-emblem i, .boot-emblem b, .boot-emblem em { position:absolute; display:block; border:1px solid rgba(191,255,215,.35); }.boot-emblem i { inset:12%; transform:rotate(45deg); }.boot-emblem b { inset:27%; border-radius:50%; }.boot-emblem em { width:34%; height:34%; border:0; border-left:1px solid #c7fadb; border-bottom:1px solid #c7fadb; transform:rotate(-45deg); }
.intro.booting .boot-progress-wrap { position:absolute; right:clamp(1.5rem,5vw,4rem); bottom:clamp(2rem,7vw,5rem); display:grid; justify-items:end; width:min(23rem,46vw); color:#b8e8c7; text-align:right; }
.boot-progress-wrap p { margin:0 0 .65rem; font-size:.53rem; letter-spacing:.16em; }.boot-progress { width:100%; height:2px; background:rgba(189,255,213,.22); }.boot-progress i { display:block; width:0; height:100%; background:#b9ffd2; box-shadow:0 0 12px #a9ffc6; transition:width .32s ease; }.boot-progress-wrap small { margin-top:.5rem; color:#7fa890; font-size:.52rem; letter-spacing:.1em; }

/* Session 4mlzOS : interface de bureau sombre, sobre et originale. */
.intro { background:#07070e url("assets/images/fond-session-4mlzos.jpg") center center / cover no-repeat; }
.intro::before { background:linear-gradient(105deg,rgba(3,8,18,.85),rgba(7,5,12,.52) 53%,rgba(17,4,11,.7)); }
.intro::after { background-image:linear-gradient(rgba(202,218,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(202,218,255,.035) 1px,transparent 1px); background-size:32px 32px; opacity:.55; }
.intro-stars { opacity:.28; filter:drop-shadow(0 0 9px rgba(227,237,255,.7)); }
.intro-rune { display:none; }
.intro:not(.booting) .intro-content { width:min(100% - 2.5rem,31rem); padding:2.8rem 3rem; border:1px solid rgba(224,231,255,.19); border-radius:1.05rem; background:linear-gradient(135deg,rgba(10,13,25,.69),rgba(10,10,18,.39)); box-shadow:0 2rem 5rem rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(16px); }
.intro:not(.booting) .boot-window-head { position:fixed; top:1.8rem; left:2rem; display:flex; width:auto; padding:0; border:0; background:none; color:#e8ecff; font-size:.54rem; letter-spacing:.17em; }
.intro:not(.booting) .boot-window-head span:last-child { display:none; }
.session-avatar { display:grid; place-items:center; width:4.4rem; aspect-ratio:1; margin:0 auto 1.2rem; border:1px solid rgba(218,228,255,.43); border-radius:50%; color:#edf1ff; background:radial-gradient(circle at 35% 30%,#405d9c,#18203a 55%,#0a0b13); box-shadow:0 .65rem 2rem rgba(0,0,0,.32),inset 0 1px 8px rgba(207,223,255,.24); font:500 1.25rem/1 var(--mono); }
.intro:not(.booting) .eyebrow { margin:0 0 .8rem; color:#afb8d5; font-size:.47rem; letter-spacing:.16em; }
.intro:not(.booting) .intro-name { color:#f4f5ff; font:500 clamp(2.3rem,5vw,3.55rem)/.95 var(--mono); letter-spacing:-.1em; text-shadow:0 .25rem 1.3rem rgba(93,116,225,.18); }
.intro:not(.booting) .intro-subtitle { margin:.85rem 0 1.65rem; color:#aeb8d3; font-size:.52rem; letter-spacing:.11em; }
.intro:not(.booting) .intro-subtitle strong { color:#f2f4ff; }
.intro:not(.booting) .enter-button { width:100%; border:1px solid rgba(211,221,255,.29); border-radius:.45rem; padding:.86rem 1rem; color:#eef1ff; background:rgba(222,229,255,.09); font-size:.56rem; letter-spacing:.17em; }
.intro:not(.booting) .enter-button:hover, .intro:not(.booting) .enter-button:focus-visible { background:rgba(201,213,255,.18); box-shadow:0 0 0 3px rgba(180,198,255,.08); color:#fff; }
.intro:not(.booting) .enter-button span { color:#afc2ff; }.intro:not(.booting) .intro-hint { color:#7c86a2; font-size:.43rem; }

.intro.booting { background:#07070e url("assets/images/fond-session-4mlzos.jpg") center center / cover no-repeat; }
.intro.booting::before { background:linear-gradient(105deg,rgba(4,7,15,.9),rgba(7,8,18,.68) 53%,rgba(17,5,10,.77)); }
.intro.booting::after { background:repeating-linear-gradient(0deg,rgba(222,232,255,.035) 0 1px,transparent 1px 4px); opacity:.55; }
.intro.booting .intro-content { padding:0; background:none; backdrop-filter:none; }
.intro.booting .boot-window-head { top:2rem; left:2rem; display:flex; width:calc(100% - 4rem); padding:0 0 .8rem; border:0; border-bottom:1px solid rgba(224,230,255,.19); background:none; color:#e8edff; }
.intro.booting .boot-window-head span:last-child { color:#a7b2d4; }
.intro.booting .session-avatar { display:none; }
.intro.booting .boot-log { top:7rem; left:clamp(1.8rem,5vw,4.5rem); width:min(32rem,45vw); max-height:52vh; padding:1.2rem; border:1px solid rgba(220,228,255,.16); border-left:2px solid #aabaff; border-radius:.45rem; background:rgba(7,10,19,.43); color:#dce3ff; font-size:clamp(.54rem,.82vw,.68rem); text-shadow:none; box-shadow:0 1.5rem 4rem rgba(0,0,0,.18); backdrop-filter:blur(8px); }
.intro.booting .boot-emblem { left:64%; width:clamp(11rem,22vw,21rem); border-color:rgba(210,222,255,.2); color:#eef1ff; box-shadow:0 0 0 1.15rem rgba(195,209,255,.025),0 0 0 2.4rem rgba(195,209,255,.018),0 0 4rem rgba(0,0,0,.18); }
.intro.booting .boot-emblem::before, .intro.booting .boot-emblem::after { background:rgba(215,225,255,.22); }.boot-emblem span { font:500 clamp(1.15rem,2.5vw,2.2rem)/1 var(--mono); letter-spacing:-.1em; text-shadow:0 0 1rem rgba(205,217,255,.24); }.boot-emblem i, .boot-emblem b, .boot-emblem em { border-color:rgba(218,226,255,.27); }.boot-emblem em { border-color:#d9e2ff; }
.intro.booting .boot-progress-wrap { right:clamp(1.8rem,5vw,4.5rem); bottom:2.4rem; width:min(28rem,48vw); padding:1rem 1.1rem; border:1px solid rgba(220,228,255,.16); border-radius:.45rem; background:rgba(7,10,19,.36); color:#d9e2ff; backdrop-filter:blur(8px); }.boot-progress { background:rgba(213,224,255,.22); }.boot-progress i { background:#c4d1ff; box-shadow:0 0 .8rem rgba(191,206,255,.85); }.boot-progress-wrap small { color:#aab8dd; }


.art-scene { position: fixed; z-index: -2; inset: -2.5%; overflow: hidden; background: #243650 var(--hero-image, url("assets/images/fond-aymen.png")) var(--hero-position, center center) / cover no-repeat; transform: translate(var(--scene-x, 0), var(--scene-y, 0)) scale(1.02); transition: transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.art-scene::before { content: ""; position: absolute; z-index:2; inset: 0; background: linear-gradient(90deg, rgba(7,12,26,.54), rgba(7,12,26,.12) 52%, rgba(7,12,26,.18)), linear-gradient(0deg, rgba(7,12,26,.36), transparent 65%); background-color: rgb(7 12 26 / var(--hero-darkness, .42)); pointer-events:none; }
.art-scene::after { content:""; position:absolute; z-index:3; inset:0; background:radial-gradient(ellipse at 50% 45%, transparent 34%, rgba(7,12,26,.32) 100%); mix-blend-mode:multiply; pointer-events:none; }
.background-video { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--hero-position, center center); opacity:0; transition:opacity .8s ease; pointer-events:none; }
.background-video.is-ready { opacity:1; }
.background-video[hidden] { display:none; }
.art-scene > :not(.background-video) { display:none; }
.moon { position: absolute; top: 5%; right: 7%; width: min(29vw, 300px); aspect-ratio: 1; border-radius: 50%; opacity: .6; background: radial-gradient(circle at 37% 35%, #fff, #c2d1e6 44%, #8397b6 45%, #f2f5fa 49%, #8192ad 60%, #d3dfec 64%, #8497b1 78%); box-shadow: 0 0 70px #f2f5fa88; }
.haze { position: absolute; width: 80vw; height: 23vw; border-radius: 50%; filter: blur(35px); opacity: .36; background: #d9e5f2; }.haze-one { top: 22%; left: -23%; }.haze-two { bottom: 12%; right: -27%; }
.ridge { position: absolute; bottom: 12%; width: 125%; height: 31%; background: #18223c; filter: blur(1px); }.ridge-back { left: -15%; clip-path: polygon(0 65%, 17% 37%, 29% 55%, 46% 21%, 61% 65%, 78% 31%, 100% 64%, 100% 100%, 0 100%); opacity: .5; }.ridge-front { bottom: -2%; left: 0; height: 33%; background: #0c1426; clip-path: polygon(0 52%, 19% 31%, 35% 64%, 55% 34%, 72% 57%, 86% 25%, 100% 48%, 100% 100%, 0 100%); }
.figure { position: absolute; right: 15%; top: 20%; width: min(43vw, 650px); height: min(70vw, 850px); transform: rotate(-10deg); opacity: .96; }.figure-hair { position: absolute; inset: 8% 5% 10% 0; border-radius: 55% 42% 50% 49%; background: radial-gradient(ellipse at 70% 34%, #697a9a 0 8%, transparent 8.7%), repeating-radial-gradient(ellipse at 44% 28%, #111a2d 0 3%, #576783 3.5% 5%, #0a1120 5.5% 7.2%); transform: rotate(17deg); filter: drop-shadow(25px 30px 20px #08101f99); }.figure-face { position: absolute; top: 26%; left: 31%; width: 41%; height: 37%; border-radius: 47% 45% 55% 39%; background: linear-gradient(100deg, #8ea4c1, #d0c9d0 56%, #6d7590 57%); transform: rotate(21deg); }.figure-face::after { content:""; position:absolute; top:44%; right:10%; width:33%; height:6%; background:#27324a; border-radius:50%; box-shadow:0 13px 0 -1px #27324a; }.figure-neck { position: absolute; bottom: 10%; left: 31%; width: 37%; height: 44%; border-radius: 40% 60% 10% 30%; background: linear-gradient(95deg, #657690, #b1bdcc 60%, #2d3a55); transform: rotate(27deg); }
.flowers { position: absolute; bottom: -6%; width: 48%; height: 58%; opacity: .92; background: radial-gradient(ellipse at 11% 75%, #e7edff 0 7%, transparent 7.3%), radial-gradient(ellipse at 21% 58%, #dce6ff 0 8%, transparent 8.4%), radial-gradient(ellipse at 36% 82%, #eaf1ff 0 10%, transparent 10.4%), radial-gradient(ellipse at 48% 56%, #d1ddff 0 9%, transparent 9.5%), radial-gradient(ellipse at 65% 85%, #eaf1ff 0 12%, transparent 12.4%), radial-gradient(ellipse at 82% 61%, #d7e2ff 0 9%, transparent 9.5%); filter: blur(.4px); }.flowers-left { left: -6%; }.flowers-right { right: -13%; transform: scale(1.25) rotate(-8deg); opacity: .5; }

.site-shell { position:relative; min-height: 100vh; opacity: 0; transition: opacity .9s ease .25s; }.site-shell.is-visible { opacity: 1; }.site-header { position: absolute; z-index: 10; top: 37vh; left: clamp(1.5rem, 4vw, 4rem); width: min(18rem, 28vw); min-height: 0; padding: 0; background: none; }.site-header::before { content:""; position:absolute; top:8.9rem; bottom:2.5rem; left:-.95rem; width:1px; background:linear-gradient(transparent,rgba(223,235,255,.5),transparent); }.brand { display: inline-block; font: 700 clamp(3.2rem, 6vw, 5.4rem)/.7 var(--display); text-decoration: none; text-shadow: 0 2px 10px #02050a; }.tagline { margin: 1.15rem 0 1.6rem; color: #d7dfed; font-size: clamp(.5rem, .75vw, .63rem); letter-spacing: .18em; white-space: nowrap; }.main-nav { display: grid; width: 100%; border-top: 1px solid var(--line); }.nav-link { position:relative; width: 100%; display: flex; align-items: center; gap: .65rem; padding: .85rem 0; border: 0; border-bottom: 1px solid var(--line); color: #d9e1ed; background: transparent; text-align: left; text-decoration: none; font-size: clamp(.6rem, 1vw, .75rem); letter-spacing: .12em; cursor: pointer; transition: color .2s, padding .2s, background .2s; }.nav-link span { color: #9aa7b9; font-size: .53rem; }.nav-link b { margin-left: auto; font-size: .7rem; font-weight: 400; opacity: 0; transform: translateX(-5px); transition: .2s; }.nav-link:hover, .nav-link:focus-visible, .nav-link.active { padding-left: .55rem; color: #fff; outline: none; background:linear-gradient(90deg,rgba(223,235,255,.1),transparent 72%); }.nav-link:hover b, .nav-link:focus-visible b, .nav-link.active b { opacity: 1; transform: translateX(0); }.nav-link.reboot { color: var(--accent); }.explore { display: inline-block; margin-top: 1.45rem; color: #d9e0eb; text-decoration: none; font-size: .54rem; letter-spacing: .16em; }.explore span { display:block; margin-top:.45rem; color:var(--accent); font-size: 1rem; animation: bounce 1.8s infinite; }

.music-player { position: absolute; z-index: 10; top: 66svh; right: clamp(1.75rem, 5vw, 4.5rem); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .85rem; width: min(15.5rem, 24vw); color: #e5ebf5; }.record { position:relative; display:grid; place-items:center; overflow:hidden; width: 4.1rem; aspect-ratio: 1; border-radius:50%; border: 1px solid #c7d5e7aa; background: repeating-radial-gradient(circle, #111827 0 2px, #9ca9bc 3px 4px, #202a3b 5px 8px); box-shadow:0 0 15px #dce7f055; }.record #profile-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.record.has-profile span { display:none; }.record span { position:relative; z-index:1; display:grid; place-items:center; width: .75rem; aspect-ratio: 1; border-radius: 50%; background:var(--accent); color:#111; font-size:.5rem; }.record.playing { animation: spin 5s linear infinite; }.track-info > p:first-child { margin:0; font-size:.56rem; font-weight:500; letter-spacing:.07em; }.progress { height:1px; margin: .65rem 0 .35rem; background:#dce7f655; }.progress span { display:block; width:0; height:100%; background:#f2f6fc; }.track-info > p:nth-of-type(2), .music-player small { margin:0; color:#cbd3df; font-size:.53rem; letter-spacing:.05em; }.player-controls { display:flex; align-items:center; justify-content:center; gap:.75rem; margin-top:.55rem; }.player-controls button { border:0; padding:0; color:#dce5f3; background:transparent; cursor:pointer; font-size:.8rem; }.player-controls .play-toggle { display:grid; place-items:center; width:1.8rem; aspect-ratio:1; border:1px solid #dce5f377; border-radius:50%; font-size:.6rem; }.music-player small { grid-column:2; text-align:center; opacity:.6; }.sound-meter { position:absolute; top:-1rem; right:0; display:flex; align-items:end; gap:2px; height:.48rem; opacity:.55; }.sound-meter i { display:block; width:2px; height:20%; background:var(--accent); }.music-player.is-playing .sound-meter i { animation:meter .55s ease-in-out infinite alternate; }.music-player.is-playing .sound-meter i:nth-child(2) { animation-delay:.12s; }.music-player.is-playing .sound-meter i:nth-child(3) { animation-delay:.28s; }.music-player.is-playing .sound-meter i:nth-child(4) { animation-delay:.06s; }.music-player.is-playing .sound-meter i:nth-child(5) { animation-delay:.19s; }

main { padding: 0 clamp(1.4rem, 7vw, 9rem) 8rem clamp(1.4rem, 5vw, 4rem); }.hero-spacer { min-height: 100svh; display: flex; align-items: end; padding-bottom: 7vh; }.hero-quote { display:none; }.content-section { min-height: 71svh; padding: 4.5rem 0 5rem; scroll-margin-top: 1rem; }.section-kicker { display:flex; align-items:center; gap:.7rem; margin-bottom: 1.5rem; color:#d7dfeb; font-size:.59rem; letter-spacing:.19em; }.section-kicker > span:first-child { flex:0 0 2rem; width:2rem; height:1px; background:var(--mist); }.section-kicker > span:last-child { width:auto; height:auto; background:none; white-space:nowrap; }.glass-panel { border:1px solid rgba(227,234,247,.22); border-radius: .8rem; background: linear-gradient(120deg, rgba(14,22,41,.57), rgba(20,30,51,.19)); box-shadow:0 20px 60px rgba(1,5,12,.2); backdrop-filter: blur(8px); }
.about-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 5vw, 5rem); padding: clamp(1.5rem, 4.5vw, 4rem); }.avatar { display:grid; place-items:center; float:left; width:3.8rem; aspect-ratio:1; margin:.3rem 1rem .6rem 0; border: 1px solid #dde7f9aa; border-radius:50%; background: radial-gradient(circle at 34% 28%, #ec9aa1 0 9%, transparent 10%), linear-gradient(142deg, #f2a3a9, #531f36 50%, #07101f 51%); box-shadow:0 0 20px #101929; }.avatar span { display:none; }.mini-label { margin:0 0 .65rem; color:#a4b2c7; font-size:.57rem; letter-spacing:.17em; }.about-copy h2 { clear:both; margin:.1rem 0 1.3rem; color:#f3f6fc; font-size:clamp(3rem, 6vw, 6rem); line-height:.72; letter-spacing:-.06em; }.about-copy h2 em { font-style:normal; color:#dfe8f8; }.lead { max-width: 36rem; color:#e1e8f4; font-size:clamp(.72rem, 1.2vw, .94rem); line-height:1.75; }.tool-row { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.6rem; }.tool-row span { display:grid; place-items:center; min-width:1.65rem; height:1.65rem; padding:.15rem; border:1px solid #dce6f444; color:#dce5f3; background:#0e182a88; font-size:.52rem; }.social-list { align-self:center; }.status { margin:0 0 1.15rem; color:#d9e1ef; font-size:.68rem; }.status i { display:inline-block; width:.45rem; aspect-ratio:1; margin-right:.35rem; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }.social-list a { display:flex; gap:.7rem; padding:.82rem 0; border-top:1px solid var(--line); color:#dce5f1; text-decoration:none; font-size:.64rem; letter-spacing:.04em; transition: color .2s, padding .2s; }.social-list a:hover { padding-left:.4rem; color:white; }.social-list a b { margin-left:auto; color:#a8b6cb; font-weight:400; }

.project-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; }.project-card { position:relative; min-height:16rem; padding:1.5rem; overflow:hidden; text-decoration:none; transition: transform .25s, border-color .25s, background .25s; }.project-card:hover, .project-card:focus-visible { transform:translateY(-5px); border-color:#e4edfc88; background:rgba(20,32,55,.64); outline:none; }.project-card::after { content:""; position:absolute; width:14rem; aspect-ratio:1; right:-4rem; bottom:-8rem; border:1px solid #bbcff444; border-radius:50%; box-shadow:0 0 0 22px #bbcff40d, 0 0 0 46px #bbcff40a; }.project-number { position:absolute; top:1rem; right:1.2rem; color:#a7b6cd; font-size:.58rem; }.project-overline { margin:1rem 0 .4rem; color:#bdc9da; font-size:.61rem; letter-spacing:.11em; }.project-overline span { color:var(--accent); }.project-card h3 { position:relative; margin:0 0 1rem; color:#fff; font-size:clamp(1.45rem, 2.5vw, 2.15rem); letter-spacing:-.07em; }.project-card > p:not(.project-overline) { position:relative; max-width:22rem; color:#d7dfeb; font-size:.69rem; line-height:1.65; }.stack { position:absolute; left:1.5rem; bottom:1.4rem; display:flex; gap:.7rem; flex-wrap:wrap; color:#dce9f6; font-size:.57rem; }.stack span::before { content:"•"; margin-right:.25rem; color:var(--accent); }.project-card-wide { grid-column:span 2; min-height:13rem; }.commission-note { margin:1.15rem 0; color:#dce5f2; font-size:.65rem; }.commission-note a { color:#fff; text-decoration-color:var(--accent); text-underline-offset:3px; }

.back-top { position:fixed; z-index:12; right:1.5rem; bottom:1.5rem; display:grid; place-items:center; width:2.25rem; aspect-ratio:1; border:1px solid #e4ecf966; border-radius:50%; color:white; background:#111b2b99; opacity:0; cursor:pointer; pointer-events:none; transition:.2s; }.back-top.show { opacity:1; pointer-events:auto; }.back-top:hover { background:#32415d; transform:translateY(-3px); } footer { padding:2rem; color:#bdc8d8; text-align:center; font-size:.53rem; letter-spacing:.1em; } footer span { color:var(--accent); }
.other-card { max-width:44rem; padding:clamp(1.7rem,5vw,4rem); }.other-card h2 { margin:.1rem 0 1rem; color:#fff; font-size:clamp(2rem,4.5vw,4rem); letter-spacing:-.07em; }.other-card > p:not(.mini-label) { max-width:32rem; margin:0; color:#d8e1ee; font-size:.72rem; line-height:1.8; }.other-action { display:inline-flex; gap:.55rem; margin-top:1.7rem; border:1px solid #d9e4f677; padding:.75rem .9rem; color:#f3f6fb; background:#202d47aa; text-decoration:none; font-size:.56rem; letter-spacing:.1em; transition:transform .2s, background .2s; }.other-action:hover, .other-action:focus-visible { transform:translateY(-3px); background:#465473; outline:none; }.other-action span { color:var(--accent); font-size:.8rem; }
.system-stamp { position:fixed; z-index:9; top:1.4rem; left:clamp(1.4rem,4vw,4rem); display:flex; align-items:center; gap:.5rem; color:#e6edf8; font-size:.5rem; letter-spacing:.16em; text-shadow:0 1px 5px #07101e; }.system-stamp small { color:#adbacd; font-size:.47rem; }.system-dot { width:.42rem; aspect-ratio:1; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); animation:system-pulse 1.8s ease-in-out infinite; }.corner-readout { position:fixed; z-index:9; top:1.4rem; right:clamp(1.4rem,4vw,4rem); display:grid; justify-items:end; gap:.32rem; color:#cbd6e7; font-size:.45rem; letter-spacing:.14em; text-align:right; text-shadow:0 1px 5px #07101e; }.corner-readout span:last-child { color:#8da0bd; }.brand { position:relative; min-width:4.8em; white-space:nowrap; }.brand .name-letter { display:inline-block; min-width:.12em; font-family:var(--display); transform-origin:50% 74%; }.brand.name-shuffling { text-shadow:0 2px 10px #02050a, 2px 0 #ef7892, -2px 0 #78d7ef; }.brand.name-shuffling::before, .brand.name-shuffling::after { content:attr(data-text); position:absolute; inset:0; overflow:hidden; color:#f5f6fb; font:inherit; pointer-events:none; }.brand.name-shuffling::before { color:#78d7ef; transform:translate(-3px,-1px); clip-path:inset(12% 0 58% 0); animation:name-glitch-top .34s steps(2,end) infinite; }.brand.name-shuffling::after { color:#ef7892; transform:translate(3px,1px); clip-path:inset(62% 0 8% 0); animation:name-glitch-bottom .27s steps(2,end) infinite; }.brand.name-shuffling .name-letter { animation:name-letter-glitch .18s steps(2,end) both; animation-delay:var(--glitch-delay, 0ms); }.nav-link.active { text-shadow:0 0 12px #dbe7ff77; }.nav-link.active::before { content:""; width:3px; height:1.4rem; margin-left:-.55rem; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.hud-scan { position:fixed; z-index:7; inset:0; overflow:hidden; pointer-events:none; opacity:.28; mix-blend-mode:screen; }.hud-scan::before { content:""; position:absolute; left:0; width:100%; height:1px; background:linear-gradient(90deg,transparent,rgba(232,242,255,.78),transparent); box-shadow:0 0 15px #e1ecff; animation:hud-sweep 7s linear infinite; }.hud-scan::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(230,238,255,.04) 4px); }

@keyframes spin { to { transform:rotate(360deg); } } @keyframes bounce { 50% { transform:translateY(5px); } } @keyframes hud-sweep { from { top:-5%; } to { top:105%; } } @keyframes system-pulse { 50% { opacity:.38; box-shadow:0 0 3px var(--accent); } } @keyframes meter { from { height:20%; } to { height:100%; } } @keyframes name-letter-glitch { 0%,100% { transform:translate(0); opacity:1; } 35% { transform:translate(-2px,1px) skewX(3deg); opacity:.82; } 65% { transform:translate(2px,-1px) skewX(-3deg); opacity:1; } } @keyframes name-glitch-top { 0%,100% { transform:translate(-3px,-1px); } 50% { transform:translate(4px,1px); } } @keyframes name-glitch-bottom { 0%,100% { transform:translate(3px,1px); } 50% { transform:translate(-4px,-1px); } }
@media (max-width: 850px) { .system-stamp { top:.9rem; }.corner-readout { display:none; }.site-header { position:relative; width:100%; min-height:0; padding:3.35rem 1.4rem 1.75rem; background:linear-gradient(180deg,rgba(6,10,18,.8),transparent); }.site-header::before { display:none; }.brand { font-size:3.9rem; }.main-nav { grid-template-columns:repeat(2, minmax(0,1fr)); width:100%; }.nav-link { padding:.75rem 0; }.nav-link:nth-child(odd) { padding-right:.7rem; }.nav-link b { display:none; }.explore { display:none; }.music-player { position:absolute; top:1.7rem; right:1.4rem; width:11rem; }.music-player small, .track-info > p:first-child { display:none; }.record { width:2.7rem; }.track-info > p:nth-of-type(2) { font-size:.47rem; }.player-controls { gap:.45rem; margin-top:.25rem; } main { padding:0 1.4rem 5rem; }.hero-spacer { min-height:24svh; padding-bottom:1rem; }.content-section { min-height:0; padding:3.5rem 0; }.about-grid { grid-template-columns:1fr; } }
@media (max-width: 850px) { .intro.booting .boot-log { width:48vw; }.intro.booting .boot-emblem { left:72%; width:14rem; }.intro.booting .boot-progress-wrap { width:40vw; } }
@media (max-width: 520px) { .tagline { max-width:12rem; line-height:1.5; white-space:normal; }.music-player { top:1.5rem; width:8.5rem; }.record { display:none; }.music-player { display:block; }.project-grid { grid-template-columns:1fr; }.project-card-wide { grid-column:auto; }.social-list a b { font-size:.55rem; }.intro-rune { right:5vw; }.intro.booting .boot-window-head { width:calc(100vw - 3rem); }.intro.booting .boot-log { top:5.5rem; width:calc(100vw - 3rem); max-height:55vh; font-size:.54rem; }.intro.booting .boot-emblem { display:none; }.intro.booting .boot-progress-wrap { right:1.5rem; width:calc(100vw - 3rem); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Responsive simple — conserve exactement le design original. */
@media (max-width: 900px) {
  .site-header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 3.4rem clamp(1rem, 4vw, 2rem) 1rem;
  }

  .brand { font-size: clamp(3.15rem, 11vw, 4.6rem); }
  .tagline { max-width: 70vw; white-space: normal; }
  .main-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-link { min-height: 44px; }

  .music-player {
    position: relative;
    top: auto;
    right: auto;
    width: min(27rem, calc(100% - 2rem));
    margin: 0 1rem 1.5rem auto;
    padding: .75rem;
    border: 1px solid rgba(227, 234, 247, .18);
    border-radius: .65rem;
    background: rgba(8, 14, 27, .48);
    backdrop-filter: blur(8px);
  }

  .music-player small,
  .track-info > p:first-child { display: block; }
  .player-controls button { min-width: 2.25rem; min-height: 2.25rem; }

  main { padding: 0 clamp(1rem, 4vw, 2rem) 4rem; }
  .hero-spacer { min-height: clamp(2.5rem, 10svh, 7rem); }
  .content-section { min-height: 0; padding: 3rem 0; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card-wide { grid-column: auto; }
}

@media (max-width: 600px) {
  .system-stamp { top: .85rem; left: 1rem; }
  .site-header { padding: 3rem 1rem .8rem; }
  .brand { font-size: clamp(2.8rem, 16vw, 3.8rem); }
  .tagline { max-width: 100%; margin: .9rem 0 1.2rem; font-size: .62rem; }
  .main-nav { width: 100%; }
  .nav-link { min-height: 46px; padding: .7rem .4rem; font-size: .67rem; }
  .nav-link:nth-child(odd) { padding-right: .4rem; }

  .music-player {
    grid-template-columns: 2.7rem minmax(0, 1fr);
    width: calc(100% - 2rem);
    margin: .2rem 1rem 1.25rem;
  }
  .record { display: grid; width: 2.7rem; }
  .track-info { min-width: 0; }
  .track-info > p:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .music-player small { grid-column: 1 / -1; }

  main { padding: 0 1rem 3.5rem; }
  .hero-spacer { min-height: 2rem; }
  .content-section { padding: 2.5rem 0; }
  .section-kicker { font-size: .86rem; }
  .about-grid, .other-card { padding: 1.15rem; }
  .about-copy h2 { font-size: clamp(2.7rem, 16vw, 4.2rem); }
  .lead, .other-card > p:not(.mini-label), .project-card > p:not(.project-overline) { font-size: .78rem; }
  .social-list a { align-items: center; min-height: 48px; font-size: .7rem; }
  .project-card { min-height: 15rem; padding: 1.2rem; }
  .stack { left: 1.2rem; bottom: 1.2rem; }
  .other-action { align-items: center; min-height: 44px; }
  .back-top { right: 1rem; bottom: 1rem; }
  footer { padding: 1.5rem 1rem 5rem; line-height: 1.7; }

  .intro:not(.booting) .intro-content {
    width: calc(100% - 2rem);
    padding: 2rem 1.25rem;
  }
  .intro:not(.booting) .boot-window-head { top: 1rem; left: 1rem; }
}

@media (max-width: 900px) and (max-height: 620px) {
  .site-header { padding-top: 2.7rem; }
  .hero-spacer { min-height: 1rem; }
}

/* Lisibilité des sections sur les grands écrans. */
@media (min-width: 901px) {
  .section-kicker {
    gap: 1rem;
    margin-bottom: 1.8rem;
    font-size: clamp(.78rem, .8vw, .95rem);
    font-weight: 600;
    letter-spacing: .2em;
  }

  .section-kicker > span:first-child {
    flex-basis: 3rem;
    width: 3rem;
  }

  .about-grid {
    min-height: 22rem;
    align-items: center;
  }

  .about-copy {
    align-self: center;
    max-width: 44rem;
  }

  .avatar {
    width: 4.7rem;
    margin-right: 1.35rem;
  }

  .mini-label {
    margin-bottom: .9rem;
    font-size: clamp(.67rem, .7vw, .8rem);
  }

  .about-copy h2 {
    margin-top: .35rem;
    margin-bottom: 1.65rem;
    font-size: clamp(4.6rem, 6.4vw, 7.4rem);
  }

  .lead {
    max-width: 42rem;
    font-size: clamp(.9rem, 1vw, 1.1rem);
  }

  .tool-row { gap: .6rem; margin-top: 2rem; }
  .tool-row span {
    min-width: 2.1rem;
    height: 2.1rem;
    padding: .35rem;
    font-size: .64rem;
  }
}