/* Singularity Group B.V. — charte « Éclipse » (U1) · v2 25/09/2026 : logo toujours centré, menu mobile, SEO */
@font-face{font-family:"Cormorant";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/cormorant-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/cormorant-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/cormorant-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:300;font-display:swap;src:url(fonts/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-weight:900;font-display:swap;src:url(fonts/inter-tight-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:600;font-display:swap;src:url(fonts/playfair-display-latin-600-normal.woff2) format("woff2")}

:root{
  --noir:#000000; --nacre:#EDEAE4; --pierre:#9E998F; --filet:#2A2A2A; --couronne:#FFF8EB;
  --serif:"Cormorant",Georgia,serif; --sans:"Jost",system-ui,sans-serif;
  --cnl-orange:#FF4F00; --hx-vert:#084030; --hx-or:#BF8E4E;
  --pad:clamp(20px,4.5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--noir);color:var(--nacre);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:hover{opacity:.75}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:1px solid var(--couronne);outline-offset:4px}
.k{margin:0;font:400 12px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--pierre)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--nacre);color:var(--noir);padding:8px 12px}
[id]{scroll-margin-top:24px}
footer svg,.nf svg{overflow:visible}

/* ---------- en-tête : 3 colonnes égales, logo toujours au centre ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:5;padding:28px var(--pad);padding-top:max(28px,env(safe-area-inset-top));
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.nav-d,.m-menu{grid-column:1;grid-row:1;justify-self:start}
.logo{grid-column:2;grid-row:1;justify-self:center}
.langs{grid-column:3;grid-row:1;justify-self:end}
.nav-d{display:flex;gap:32px;font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.nav-d a{padding:12px 0}
.logo{position:relative;z-index:3;display:inline-flex;flex-direction:column;align-items:center;gap:7px;line-height:1}
.wm{font:500 30px/1 var(--serif);letter-spacing:.46em;padding-left:.46em;white-space:nowrap}
.wm-sub{font:400 11px/1 var(--sans);letter-spacing:.52em;padding-left:.52em;color:var(--pierre);white-space:nowrap}
footer .wm-sub{font-size:13px}
.langs{display:flex;gap:18px;font-size:12px;letter-spacing:.16em}
.langs a,.m-langs a{opacity:.55;padding:12px 0}
.langs a[aria-current],.m-langs a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* menu mobile (sans JavaScript : <details>) */
.m-menu{display:none}
.m-menu summary{position:relative;z-index:4;list-style:none;cursor:pointer;width:44px;height:44px;margin-left:-10px;display:flex;align-items:center;justify-content:center;color:var(--nacre)}
.m-menu summary::-webkit-details-marker{display:none}
.m-menu line{stroke:currentColor;stroke-width:1.3;transform-origin:12px 7px;transition:transform .25s ease}
.m-menu[open] .l1{transform:rotate(45deg) translateY(4px)}
.m-menu[open] .l2{transform:rotate(-45deg) translateY(-4px)}
.m-panel{position:fixed;inset:0;z-index:2;background:rgba(0,0,0,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;padding:96px var(--pad) 48px}
.m-panel nav{display:flex;flex-direction:column;align-items:center;gap:6px}
.m-panel nav a{font:400 36px/1.2 var(--serif);padding:8px 0}
.m-langs{display:flex;gap:28px;font-size:13px;letter-spacing:.2em}

/* ---------- éclipse (vidéo générée en code) ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;max-height:980px;overflow:hidden}
.stars{position:absolute;inset:0}
.stars i{position:absolute;display:block;border-radius:50%;background:#fff;animation:tw var(--t) ease-in-out var(--d) infinite}
.scale{position:absolute;inset:0;transform-origin:50% 44%}
.sky{position:absolute;left:50%;top:44%;width:0;height:0;animation:zoom 24s ease-in-out infinite alternate}
.corona{position:absolute;left:-380px;top:-380px;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,250,240,.9) 22%,rgba(220,215,255,.35) 30%,rgba(140,120,220,.12) 42%,rgba(0,0,0,0) 62%);
  filter:blur(6px);animation:corona 10s ease-in-out infinite}
.streamers{position:absolute;left:-380px;top:-380px;width:760px;height:760px;opacity:.55;animation:spin 90s linear infinite}
.disc{position:absolute;left:-165px;top:-165px;width:330px;height:330px;border-radius:50%;background:#000;
  box-shadow:0 0 0 2px rgba(255,248,235,.9),0 0 40px 8px rgba(255,248,235,.5)}
.bead{position:absolute;left:110px;top:-150px;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.6) 30%,rgba(255,255,255,0) 70%);animation:ring 12s ease-in-out infinite}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 60%,rgba(0,0,0,.9) 100%)}
.hero .txt{position:absolute;left:var(--pad);right:var(--pad);bottom:120px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.hero h1{margin:0;font:400 clamp(44px,7vw,100px)/1.02 var(--serif);text-wrap:balance}
.hero h1 em{font-style:italic}
.ctrl{position:absolute;left:var(--pad);right:var(--pad);bottom:32px;bottom:max(32px,env(safe-area-inset-bottom));display:flex;justify-content:flex-end}
.ctrl button{min-height:44px;padding:0 18px;background:transparent;border:1px solid rgba(237,234,228,.4);color:var(--nacre);font:400 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.paused .stars i,.paused .sky,.paused .corona,.paused .streamers,.paused .bead,.paused .sat{animation-play-state:paused}
@keyframes corona{0%,100%{transform:scale(1) rotate(0);opacity:.85}50%{transform:scale(1.06) rotate(6deg);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ring{0%,70%,100%{opacity:0;transform:scale(.6)}80%{opacity:1;transform:scale(1)}90%{opacity:.2;transform:scale(1.2)}}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes orbit{from{transform:rotate(0) translateX(var(--r)) rotate(0)}to{transform:rotate(360deg) translateX(var(--r)) rotate(-360deg)}}

/* ---------- sections ---------- */
.manif{padding:130px var(--pad) 110px;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.manif .lead{margin:0;max-width:1000px;font:400 clamp(26px,3vw,42px)/1.3 var(--serif);text-wrap:balance}
.sec{padding:0 var(--pad) 130px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;border-bottom:1px solid var(--filet);padding-bottom:20px;margin-bottom:56px;flex-wrap:wrap}
.sec-h.plain{border-bottom:0;margin-bottom:32px}
.sec-h h2{margin:0;font:400 clamp(36px,4vw,56px)/1.05 var(--serif)}
.cos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.co{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.astre{--r:210px;position:relative;width:min(460px,80vw);aspect-ratio:1;border-radius:50%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.astre.cnl{background:radial-gradient(circle at 35% 30%,#1C1C1C 0%,#050505 70%);box-shadow:inset -30px -30px 80px rgba(0,0,0,.9),0 0 60px rgba(255,79,0,.25)}
.astre.hx{background:radial-gradient(circle at 35% 30%,#0E5A44 0%,#03201A 70%);box-shadow:inset -30px -30px 80px rgba(0,0,0,.85),0 0 60px rgba(191,142,78,.25)}
.sat{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:5px;animation:orbit 14s linear infinite}
.cnl .sat{background:var(--cnl-orange);box-shadow:0 0 14px var(--cnl-orange)}
.hx .sat{background:var(--hx-or);box-shadow:0 0 14px var(--hx-or);animation-duration:18s;animation-direction:reverse}
.co h3{margin:0;font:400 36px/1.1 var(--serif)}
.co p{margin:0;max-width:420px;color:#CFCAC0;font-weight:300}
.co .ent{font-size:13px;color:var(--pierre)}
.more{font-size:12px;letter-spacing:.26em;text-transform:uppercase;border-bottom:1px solid var(--nacre);padding-bottom:5px}

/* logo CyberNovaLabs.io — « logo D » du site cybernovalabs.io (24/09/2026) */
.cnl-wm{position:relative;display:inline-block;font:900 clamp(26px,3.2vw,36px)/1 "Inter Tight",system-ui,sans-serif;letter-spacing:-.035em;color:#fff;margin-right:.8em;white-space:nowrap}
.cnl-wm .tag-io{position:absolute;right:-1.75em;top:-.1em;font:600 .34em/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:0;color:#fff;background:var(--cnl-orange);padding:.28em .5em;border-radius:.12em;transform:rotate(8deg)}
.cnl-wm .tag-io::before{content:"";position:absolute;left:50%;top:-.9em;width:2px;height:.9em;background:#fff}
/* logo Hexuvium */
.hx-wm{font:600 clamp(40px,4.5vw,50px)/1 "Playfair Display",Georgia,serif;color:#fff}
.hx-base{font-size:10px;letter-spacing:.26em;color:var(--hx-or)}

.fig{margin:0 var(--pad) 130px;padding:70px 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:center}
.fig b{display:block;font:400 72px/1 var(--serif)}
.fig span{display:block;margin-top:10px}
.prin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.prin div{border-top:1px solid var(--nacre);padding-top:20px}
.prin h3{margin:10px 0 8px;font:400 30px/1.15 var(--serif)}
.prin p{margin:0;color:#CFCAC0;font-weight:300}
.contact{padding:110px var(--pad);border-top:1px solid var(--filet);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:end}
.contact h2{margin:10px 0 0;font:400 clamp(36px,4vw,56px)/1.05 var(--serif)}
.contact p{margin:0 0 22px;color:#CFCAC0;font-weight:300;max-width:520px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid var(--nacre);font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.btn:hover{background:var(--nacre);color:var(--noir);opacity:1}
.mail{display:block;margin-top:16px;color:var(--pierre);font-size:14px;letter-spacing:.04em;user-select:all}
footer{padding:56px var(--pad) 40px;padding-bottom:max(40px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;border-top:1px solid var(--filet)}
footer .wm{font-size:clamp(24px,3vw,40px)}
footer small{color:var(--pierre);font-size:12px;line-height:1.8}
.legal{max-width:760px;color:var(--pierre);font-size:13px;text-align:left}
.legal summary{cursor:pointer;text-align:center;letter-spacing:.18em;text-transform:uppercase;font-size:11px;padding:12px}
.legal p{margin:8px 0}

/* ---------- page 404 ---------- */
.nf main{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;padding:48px var(--pad);text-align:center}
.nf-langs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:1000px}
.nf h1{margin:0 0 8px;font:400 30px/1.15 var(--serif)}
.nf p{margin:0 0 20px;color:#CFCAC0;font-weight:300}

/* ---------- tablette & mobile ---------- */
@media (max-width:900px){
  .nav-d,.langs{display:none}
  .m-menu{display:block}
  .top{padding:18px var(--pad);padding-top:max(18px,env(safe-area-inset-top))}
  .wm{font-size:21px;letter-spacing:.34em;padding-left:.34em}
  .wm-sub{font-size:8.5px;letter-spacing:.42em;padding-left:.42em}
  .logo{gap:6px}
  footer .wm{font-size:24px}
  footer .wm-sub{font-size:10px}
  .scale{transform:scale(.55)}
  .hero{min-height:560px}
  .hero .txt{bottom:104px;gap:14px}
  .manif{padding:88px var(--pad) 80px;gap:20px}
  .manif .lead{font-size:clamp(24px,6.4vw,32px)}
  .sec{padding-bottom:90px}
  .sec-h{margin-bottom:40px}
  .cos,.prin,.contact,.nf-langs{grid-template-columns:1fr}
  .cos{gap:72px}
  .prin{gap:36px}
  .astre{--r:calc(min(460px,80vw)*.42)}
  .fig{grid-template-columns:1fr;gap:40px;margin-bottom:90px;padding:56px 0}
  .fig b{font-size:60px}
  .contact{padding:80px var(--pad);gap:28px}
  .contact .btn{width:100%}
  .mail{text-align:center}
}
@media (max-width:380px){
  .wm{font-size:18px;letter-spacing:.3em;padding-left:.3em}
  .wm-sub{font-size:7.5px}
  .scale{transform:scale(.48)}
  .hero h1{font-size:40px}
}
@media (max-height:620px) and (max-width:900px){.scale{transform:scale(.42)}.hero .txt{bottom:90px}}
@media (min-width:901px) and (max-height:1000px){.scale{transform:scale(.8);transform-origin:50% 40%}.sky{top:40%}.hero .txt{bottom:100px}.hero h1{font-size:clamp(44px,6vw,88px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.sat{display:none}}