/* cookiecat.css — feuille de styles partagée du réseau cookiecat */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#06060c}
::selection{background:#38bdf8;color:#06060c}
img{max-width:100%}
a{color:inherit}
.scrollroot{--shot-overlay:.62;position:relative;height:100vh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;background:#06060c;color:#e8e8f2;font-family:'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;scrollbar-width:none;-ms-overflow-style:none}
.scrollroot::-webkit-scrollbar{display:none;width:0;height:0}
@keyframes yzfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes yzscan{0%{transform:translateY(-140%)}100%{transform:translateY(560%)}}
@keyframes yzbob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(8px);opacity:1}}
@keyframes yzpulse{0%,100%{opacity:.4}50%{opacity:1}}
.js [data-reveal]{opacity:0;transform:translateY(28px)}
.bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.nebula{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 50% at 80% 18%,rgba(167,139,250,.22),transparent 70%),radial-gradient(55% 48% at 14% 82%,rgba(56,189,248,.18),transparent 70%);transition:transform .25s ease-out}
.tint{position:fixed;inset:0;z-index:0;pointer-events:none;background-color:rgba(56,189,248,.05);transition:background-color .9s ease}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 120% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}
.dna-canvas{position:fixed;left:0;top:0;width:132px;height:100vh;z-index:6;pointer-events:none}
.dnafx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}
.dna-nav{position:fixed;left:0;top:0;width:110px;height:100vh;z-index:9;pointer-events:none}
.dna-label{position:fixed;left:0;right:0;bottom:100px;z-index:11;display:none;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#e8e8f2;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.progress-track{position:fixed;top:0;left:0;right:0;height:2px;z-index:20;background:rgba(255,255,255,.06)}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#38bdf8,#a78bfa);box-shadow:0 0 14px rgba(56,189,248,.65)}
.logo{position:fixed;top:24px;left:150px;z-index:20;font-family:'IBM Plex Mono',monospace;letter-spacing:.34em;font-size:13px;color:#e8e8f2;text-decoration:none}
.logo span{color:#38bdf8}
.hud{position:fixed;top:22px;right:40px;z-index:20;font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(232,232,242,.55);letter-spacing:.18em}
.hud b{color:#38bdf8;font-weight:400}
.section{position:relative;z-index:2;min-height:100vh;scroll-snap-align:start;scroll-snap-stop:always}
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 8vw}
.hero-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.45em;text-transform:uppercase;color:#38bdf8;margin-bottom:26px}
.hero-title{margin:0;font-size:clamp(72px,16vw,220px);font-weight:700;line-height:.9;letter-spacing:-.04em;background:linear-gradient(135deg,#fff 10%,#38bdf8 50%,#a78bfa 95%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 80px rgba(56,189,248,.25)}
.hero-sub{margin:30px 0 0;max-width:680px;font-size:clamp(18px,2.1vw,24px);line-height:1.5;color:rgba(232,232,242,.82);text-wrap:pretty}
.hero-sub .en{color:rgba(232,232,242,.5);font-size:.86em}
.hero-stats{display:flex;gap:clamp(28px,6vw,72px);margin-top:56px}
.stat{display:flex;flex-direction:column;align-items:center;gap:6px}
.stat-num{font-family:'IBM Plex Mono',monospace;font-size:clamp(36px,5vw,56px);font-weight:500;background:linear-gradient(135deg,#38bdf8,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,232,242,.5)}
.scroll-cue{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.3em;color:rgba(232,232,242,.55);display:flex;flex-direction:column;align-items:center;gap:8px;animation:yzbob 2.4s ease-in-out infinite}
.site-section{position:relative;z-index:2;min-height:100vh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;gap:clamp(32px,5vw,80px);padding:90px clamp(36px,8vw,120px);flex-wrap:wrap}
.site-text{flex:1 1 420px;max-width:520px}
.site-eyebrow-row{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.site-num{font-family:'IBM Plex Mono',monospace;font-size:clamp(44px,7vw,88px);font-weight:400;line-height:1;color:rgba(255,255,255,.07)}
.eyebrow{display:flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.eyebrow .dot{animation:yzpulse 2.6s ease-in-out infinite}
.site-name{margin:0;font-size:clamp(36px,5vw,60px);font-weight:600;line-height:1.02;letter-spacing:-.02em;color:#f5f5fb}
.site-domain{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.1em;color:rgba(232,232,242,.5);margin:12px 0 22px}
.site-desc{margin:0;font-size:clamp(16px,1.7vw,19px);line-height:1.6;color:rgba(232,232,242,.84);text-wrap:pretty}
.site-desc-en{margin:12px 0 0;font-size:clamp(14px,1.5vw,16px);line-height:1.55;font-style:italic;color:rgba(232,232,242,.46);text-wrap:pretty}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(232,232,242,.72);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 13px}
.site-foot{display:flex;align-items:flex-end;gap:32px;margin-top:34px;flex-wrap:wrap}
.metric-wrap{display:flex;align-items:baseline;gap:8px}
.metric{font-family:'IBM Plex Mono',monospace;font-size:clamp(34px,4.4vw,48px);font-weight:500;color:#fff;line-height:1}
.metric-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,232,242,.5);max-width:120px;line-height:1.3}
.visit-btn{text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#06060c;padding:13px 22px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;transition:transform .2s ease,box-shadow .2s ease}
.visit-btn:hover{transform:translateY(-3px)}
.preview-perspective{flex:0 1 auto;perspective:1400px}
.preview{position:relative;width:min(46vw,560px);height:min(58vh,440px);min-width:300px;min-height:280px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);transform-style:preserve-3d;transition:transform .25s ease-out}
.pv-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:34px 34px}
.pv-blob{position:absolute;width:230px;height:230px;border-radius:50%;filter:blur(46px);top:8%;right:10%;animation:yzfloat 7s ease-in-out infinite}
.pv-scan{position:absolute;left:0;right:0;height:130px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent);animation:yzscan 5.5s linear infinite}
.pv-card{position:absolute;inset:20px;border-radius:12px;background:rgba(8,8,16,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;padding:18px 20px}
.pv-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:13px}
.pv-dom{display:flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.95)}
.pv-live{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:#4ade80;display:flex;align-items:center;gap:6px}
.dot.live{width:6px;height:6px;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:yzpulse 2s ease-in-out infinite}
.pv-sep{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.4);margin:16px 0 12px}
.pv-rows{display:flex;flex-direction:column;gap:11px}
.pv-row{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.3;color:rgba(255,255,255,.9)}
.pv-arrow{font-family:'IBM Plex Mono',monospace}
.pv-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.1);padding-top:13px}
.pv-corner{position:absolute;width:22px;height:22px;opacity:.8}
.pv-corner.tl{top:12px;left:12px;border-top:2px solid;border-left:2px solid}
.pv-corner.br{bottom:12px;right:12px;border-bottom:2px solid;border-right:2px solid}
.pv-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0;border-radius:16px}
.pv-shot-ov{position:absolute;inset:0;z-index:0;background:rgba(6,6,12,var(--shot-overlay,.62))}
.has-shot .pv-blob{display:none}
.has-shot .pv-card{background:rgba(8,8,16,.30)}
.has-shot .pv-dom,.has-shot .pv-sep,.has-shot .pv-row,.has-shot .pv-foot,.has-shot .pv-live{text-shadow:0 1px 6px rgba(0,0,0,.78)}
.pv-visit{text-decoration:none;cursor:pointer}
.pv-visit:hover{text-decoration:underline}
.pv-shot-ov,.pv-card,.has-shot .pv-grid{transition:opacity .35s ease}
.pv-eye{position:absolute;right:32px;bottom:62px;z-index:6;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:rgba(8,8,16,.6);border:1px solid rgba(255,255,255,.22);border-radius:8px;color:#e8e8f2;cursor:pointer;padding:0;transition:background .2s ease,transform .2s ease}
.pv-eye:hover{background:rgba(8,8,16,.92);transform:translateY(-2px)}
.pv-eye span{display:inline-flex;align-items:center;justify-content:center}
.pv-eye svg{width:17px;height:17px;display:block}
.pv-eye .eye-off{display:none}
.preview.shot-revealed .pv-eye .eye-on{display:none}
.preview.shot-revealed .pv-eye .eye-off{display:inline-flex}
.preview.shot-revealed .pv-shot-ov{opacity:0}
.preview.shot-revealed .pv-card{opacity:0;pointer-events:none}
.preview.shot-revealed .pv-grid{opacity:0}
.mystery .preview{border:1px solid rgba(167,139,250,.3);box-shadow:0 36px 90px rgba(0,0,0,.6),0 0 60px rgba(167,139,250,.4);background:radial-gradient(130% 130% at 50% 0%,#1a0f2e,#08060e)}
.mystery .pv-grid{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
.mystery .pv-scan{background:linear-gradient(180deg,transparent,rgba(167,139,250,.16),transparent)}
.mystery .pv-card{background:rgba(8,8,16,.55);border:1px solid rgba(167,139,250,.22)}
.mystery-glyph{flex:1;display:flex;align-items:center;justify-content:center}
.mystery-glyph span{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,5vw,56px);letter-spacing:.18em;background:linear-gradient(135deg,#a78bfa,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(167,139,250,.3)}
.blackhole .preview{border:1px solid rgba(167,139,250,.25);box-shadow:0 36px 90px rgba(0,0,0,.78),0 0 70px rgba(124,58,237,.35);background:radial-gradient(circle at 50% 47%, #0b0a14 0%, #050409 55%, #000 100%)}
.bh-disk{position:absolute;left:50%;top:47%;width:260px;height:260px;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 0deg,#38bdf8,#a78bfa,#f59e0b,#a78bfa,#38bdf8);opacity:.55;filter:blur(10px);animation:bhspin 9s linear infinite;-webkit-mask:radial-gradient(circle,transparent 37%,#000 41%,#000 60%,transparent 64%);mask:radial-gradient(circle,transparent 37%,#000 41%,#000 60%,transparent 64%)}
.bh-core{position:absolute;left:50%;top:47%;width:128px;height:128px;transform:translate(-50%,-50%);border-radius:50%;background:#000;box-shadow:0 0 50px 14px rgba(0,0,0,.92),inset 0 0 26px rgba(124,58,237,.45)}
@keyframes bhspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.blackhole .pv-card{background:rgba(3,2,8,.34);border:1px solid rgba(167,139,250,.18)}
.bh-text{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,4.6vw,52px);letter-spacing:.16em;background:linear-gradient(135deg,#ffffff,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 42px rgba(167,139,250,.45)}
.mystery-term{border-top:1px solid rgba(255,255,255,.1);padding-top:13px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#38bdf8;display:flex;align-items:center}
.locked-btn{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,232,242,.6);background:transparent;border:1px solid rgba(167,139,250,.5);padding:13px 22px;border-radius:8px;display:inline-flex;align-items:center;gap:8px}
.outro{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 8vw 70px}
.outro-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.4em;text-transform:uppercase;color:#a78bfa;margin-bottom:24px}
.outro-title{margin:0;font-size:clamp(44px,8vw,100px);font-weight:700;line-height:.96;letter-spacing:-.03em;color:#f5f5fb}
.outro-title .grad{background:linear-gradient(135deg,#38bdf8,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.outro-sub{margin:28px 0 0;max-width:600px;font-size:clamp(16px,1.9vw,20px);line-height:1.6;color:rgba(232,232,242,.7);text-wrap:pretty}
.outro-sub .en{color:rgba(232,232,242,.45);font-size:.88em}
.outro-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:44px}
.btn-primary{text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#06060c;background:linear-gradient(135deg,#38bdf8,#a78bfa);padding:15px 30px;border-radius:9px;box-shadow:0 0 36px rgba(56,189,248,.4)}
.btn-ghost{text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#e8e8f2;border:1px solid rgba(255,255,255,.22);padding:15px 30px;border-radius:9px}
.outro-domains{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;max-width:900px;margin-top:64px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:rgba(232,232,242,.4)}
.outro-domains .here{color:#38bdf8}
.cookie-bar{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:9px;background:rgba(10,10,18,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:8px 10px;box-shadow:0 12px 34px rgba(0,0,0,.5);transition:opacity .45s ease,transform .45s ease}
.cookie-bar.hide{opacity:0;transform:translateY(14px);pointer-events:none}
.cookie-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;text-decoration:none;animation:ckglow 2.8s ease-in-out infinite}
@keyframes ckglow{0%,100%{box-shadow:0 0 7px 1px rgba(56,189,248,.30)}50%{box-shadow:0 0 16px 4px rgba(167,139,250,.62)}}
.cookie-ico svg{display:block}
.cookie-txt{font-family:\'IBM Plex Mono\',monospace;font-size:12px;letter-spacing:.03em;color:rgba(232,232,242,.92);white-space:nowrap}
.cookie-yes,.cookie-no{width:32px;height:32px;border-radius:9px;border:1px solid;background:transparent;cursor:pointer;font-size:15px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease,background .2s ease}
.cookie-yes{color:#4ade80;border-color:rgba(74,222,128,.5)}
.cookie-yes:hover{background:rgba(74,222,128,.16);transform:translateY(-2px)}
.cookie-no{color:#f87171;border-color:rgba(248,113,113,.5)}
.cookie-no:hover{background:rgba(248,113,113,.16);transform:translateY(-2px)}
@media (hover:hover) and (pointer:fine){
  .blackhole .site-text{position:relative;cursor:crosshair}
  .blackhole .site-text, .blackhole .site-text *{color:#0a0a12 !important;text-shadow:none !important}
  .blackhole .site-text .dot{box-shadow:none !important;opacity:.5}
  .blackhole .site-text a{cursor:pointer !important}
  .blackhole .site-text .bh-glow{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .3s ease;-webkit-mask-image:radial-gradient(circle 150px at var(--mx,-400px) var(--my,-400px),#000 0%,rgba(0,0,0,.55) 46%,transparent 72%);mask-image:radial-gradient(circle 150px at var(--mx,-400px) var(--my,-400px),#000 0%,rgba(0,0,0,.55) 46%,transparent 72%)}
  .blackhole .site-text:hover .bh-glow{opacity:1}
  .blackhole .site-text .bh-glow, .blackhole .site-text .bh-glow *{color:#ffffff !important;text-shadow:0 0 17px rgba(167,139,250,.7),0 0 7px rgba(56,189,248,.55) !important}
  .blackhole .site-text .bh-glow .dot{box-shadow:0 0 12px #a78bfa !important;opacity:1}
}
@media (max-width:820px){
  .dna-canvas{top:46px;bottom:auto;left:0;right:0;width:100%;height:78px;z-index:9;background:linear-gradient(to bottom,rgba(6,6,12,.95),rgba(6,6,12,.45) 58%,transparent)}
  .dna-nav{top:46px;bottom:auto;left:0;right:0;width:100%;height:78px;z-index:10}
  .dna-label{display:none}
  .logo{left:20px;top:18px}
  .hud{right:20px;top:16px}
  .site-section{padding:142px 22px 56px;gap:34px}
  .hero{padding:130px 22px 56px}
  .outro{padding:142px 22px 64px}
  .preview{width:min(90vw,520px);height:auto;min-height:300px}
  .hero-stats{gap:32px}
  .scroll-cue{bottom:30px}
  .cookie-bar{bottom:22px;right:14px}
  .sound-toggle{left:14px;bottom:18px;width:48px;height:48px}
}
/* Pastille play / stop — lecture de miaou.mp3 en boucle */
.sound-toggle{position:fixed;left:24px;bottom:24px;z-index:60;width:54px;height:54px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(10,10,18,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);color:#e8e8f2;cursor:pointer;padding:0;box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 14px rgba(56,189,248,.28);transition:transform .2s ease,box-shadow .25s ease,border-color .25s ease}
.sound-toggle:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(0,0,0,.55),0 0 22px rgba(167,139,250,.5)}
.sound-toggle:focus-visible{outline:2px solid #38bdf8;outline-offset:3px}
.sound-toggle .snd-ico{display:none;align-items:center;justify-content:center}
.sound-toggle .snd-ico svg{width:20px;height:20px;display:block}
.sound-toggle .snd-play{display:inline-flex;margin-left:2px}
.sound-toggle.playing .snd-play{display:none}
.sound-toggle.playing .snd-stop{display:inline-flex;margin-left:0}
.sound-toggle.playing{border-color:rgba(56,189,248,.6);box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 24px rgba(56,189,248,.6)}
.snd-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(56,189,248,.55);opacity:0;pointer-events:none}
.sound-toggle.playing .snd-ring{opacity:1;animation:sndpulse 1.8s ease-out infinite}
@keyframes sndpulse{0%{transform:scale(.9);opacity:.7}70%{opacity:0}100%{transform:scale(1.4);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
}