*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;transition:color .2s, background-color .2s}
html{scroll-behavior:smooth}
body{background:var(--bg-main);color:var(--main-color);font-family:'Share Tech Mono',monospace;min-height:100vh;overflow-x:hidden;position:relative;overflow-y:scroll}
a{text-decoration:none;color:inherit}
/* Supprimer le flash bleu natif au tap sur iOS/Android */
a,button{-webkit-tap-highlight-color:transparent}
::selection{background:var(--main-color)33;color:var(--main-color)}

/* Increased opacity for better visibility */
#matrix-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;opacity:.25;pointer-events:none}

/* THEME VARIABLES */
:root{--main-color:#00ffcc;--accent-color:#00ff41;--link-color:#00ffcc;--link-hover:#fff;--prompt-user:#ff00ff;--prompt-host:#00ffcc;--prompt-path:#5865f2;--prompt-symbol:#00ff41;--warn-color:#ffbd2e;--error-color:#ff5f57;--text-color:#bbb;--text-secondary:#888;--text-muted:#555;--bg-main:#0a0a0f;--bg-terminal:rgba(0,0,0,.65);--border-color:rgba(0,255,204,.12);--border-hover:rgba(0,255,204,.4);--border-accent:rgba(0,255,65,.15);--shadow-color:rgba(0,255,204,.1);--glitch-color:#00ffcc;--glitch-shadow1:#2ed1cb;--glitch-shadow2:#00ffcc}
[data-theme="ice"]{--main-color:#89ddff;--accent-color:#61dafb;--link-color:#89ddff;--link-hover:#fff;--prompt-user:#ff89b5;--prompt-host:#89ddff;--prompt-path:#82aaff;--prompt-symbol:#61dafb;--warn-color:#ffde89;--error-color:#ff8989;--text-color:#ccc;--text-secondary:#999;--text-muted:#666;--bg-main:#0f111a;--bg-terminal:rgba(0,0,0,.5);--border-color:rgba(137,221,255,.15);--border-hover:rgba(137,221,255,.4);--border-accent:rgba(97,218,251,.15);--shadow-color:rgba(137,221,255,.1);--glitch-color:#89ddff;--glitch-shadow1:#61dafb;--glitch-shadow2:#89ddff}

.scanlines{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 4px)}
/* .grid-overlay is replaced by #interactive-grid */
.vignette{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,var(--bg-main) 100%)}

/* Allow grid interaction behind the content */
.container{position:relative;z-index:2;max-width:620px;margin:0 auto;padding:48px 20px 64px;pointer-events:none;background:transparent}
.container > * {pointer-events:auto;background:transparent} /* Re-enable pointer events for direct children */

/* ====== CLEAN AVATAR - SIMPLE CIRCLE + NEON GLOW ====== */
.header{text-align:center;margin-bottom:44px}
.avatar-wrap{display:flex;justify-content:center;margin-bottom:24px}
.avatar-circle{
  width:110px;height:110px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid var(--main-color);
  box-shadow:0 0 20px var(--shadow-color),0 0 40px var(--shadow-color);
  transition:box-shadow .4s ease;
}
.avatar-circle:hover{
  box-shadow:0 0 25px var(--shadow-color),0 0 50px var(--shadow-color);
}
.avatar-circle img{
  display:block;width:100%;height:100%;
  object-fit:cover;border-radius:50%;
}

.glitch-wrap{position:relative;display:inline-block;margin-bottom:12px}
.glitch{font-family:'Orbitron',sans-serif;font-size:clamp(1.6rem,5vw,2.2rem);font-weight:900;color:var(--glitch-color);text-shadow:0 0 10px var(--shadow-color);position:relative;letter-spacing:2px}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}
.glitch::before{color:var(--glitch-color);animation:gs 3s infinite linear alternate-reverse;clip-path:inset(0 0 65% 0);text-shadow:2px 0 var(--glitch-shadow1)}
.glitch::after{color:var(--glitch-color);animation:gs 2s infinite linear alternate;clip-path:inset(65% 0 0 0);text-shadow:-2px 0 var(--glitch-shadow2)}
@keyframes gs{0%,90%,100%{transform:translate(0)}92%{transform:translate(-3px,1px)}94%{transform:translate(3px,-1px)}96%{transform:translate(-2px,2px)}98%{transform:translate(2px,-2px)}}

.subtitle{font-family:'Share Tech Mono',monospace;font-size:clamp(.75rem,2.5vw,.95rem);color:var(--main-color);letter-spacing:3px;text-transform:uppercase;opacity:.9;overflow:hidden;white-space:nowrap;border-right:2px solid var(--main-color);width:0;animation:tw 2.5s steps(32) 1s forwards,bc .7s step-end infinite;margin:0 auto}
@keyframes tw{to{width:100%}}
@keyframes bc{50%{border-color:transparent}}

.status-line{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:.72rem;color:#555;letter-spacing:1px}
.status-dot{width:7px;height:7px;border-radius:50%;background:#00ff41;box-shadow:0 0 6px #00ff41,0 0 12px #00ff4166;animation:pd 2s ease infinite}
@keyframes pd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

/* ====== LINK CARDS ====== */
.links{display:flex;flex-direction:column;gap:14px;}
.link-card{display:flex;align-items:center;gap:16px;padding:16px 20px;background:transparent;border:1px solid var(--border-color);border-radius:12px;position:relative;overflow:hidden;transition:all .3s ease;cursor:pointer;}
.link-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--main-color)0,transparent 50%);opacity:0;transition:opacity .3s;z-index:-1}
.link-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 4px 20px var(--shadow-color);background:rgba(0,0,0,.15)}
.link-card:hover::before{opacity:.05}
.link-card:hover .link-icon{color:var(--link-color);transform:scale(1.1)}
.link-card:hover .link-text{color:var(--link-hover)}
.link-card:hover .link-arrow{opacity:1;transform:translateX(0);color:var(--link-color)}
.link-card:active{transform:translateY(0)}

.link-card[data-accent="magenta"] .link-icon{color:#ff89b5}
.link-card[data-accent="magenta"]:hover{border-color:rgba(255,137,181,.4);box-shadow:0 4px 20px rgba(255,137,181,.1)}
.link-card[data-accent="magenta"]:hover::before{background:linear-gradient(135deg,#ff89b5 0,transparent 50%)}
.link-card[data-accent="blue"] .link-icon{color:#82aaff}
.link-card[data-accent="blue"]:hover{border-color:rgba(130,170,255,.4);box-shadow:0 4px 20px rgba(130,170,255,.1)}
.link-card[data-accent="blue"]:hover::before{background:linear-gradient(135deg,#82aaff 0,transparent 50%)}
.link-card[data-accent="sky"] .link-icon{color:#89ddff}
.link-card[data-accent="sky"]:hover{border-color:rgba(137,221,255,.4);box-shadow:0 4px 20px rgba(137,221,255,.1)}
.link-card[data-accent="sky"]:hover::before{background:linear-gradient(135deg,#89ddff 0,transparent 50%)}
.link-card[data-accent="orange"] .link-icon{color:#ffde89}
.link-card[data-accent="orange"]:hover{border-color:rgba(255,222,137,.4);box-shadow:0 4px 20px rgba(255,222,137,.1)}
.link-card[data-accent="orange"]:hover::before{background:linear-gradient(135deg,#ffde89 0,transparent 50%)}

.link-icon{width:28px;height:28px;flex-shrink:0;color:var(--text-secondary);transition:all .35s}
.link-icon svg{width:100%;height:100%}
.link-text{flex:1;font-size:.92rem;color:var(--text-color);letter-spacing:.5px;transition:color .35s}
.link-label{font-size:.62rem;color:var(--text-muted);margin-top:2px;letter-spacing:1px;text-transform:uppercase}
.link-arrow{opacity:0;transform:translateX(-8px);transition:all .35s;font-size:1.1rem;color:var(--text-secondary)}

.link-card{opacity:0;transform:translateY(20px);animation:ce .5s ease forwards}
.link-card:nth-child(1){animation-delay:.3s}
.link-card:nth-child(2){animation-delay:.42s}
.link-card:nth-child(3){animation-delay:.54s}
.link-card:nth-child(4){animation-delay:.66s}
.link-card:nth-child(5){animation-delay:.78s}
.link-card:nth-child(6){animation-delay:.9s}
.link-card:nth-child(7){animation-delay:1.02s}
.link-card:nth-child(8){animation-delay:1.14s}
.link-card:nth-child(9){animation-delay:1.26s}
@keyframes ce{to{opacity:1;transform:translateY(0)}}

/* ====== CLI TERMINAL ====== */
.terminal-section{margin-top:48px}
.terminal-label{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:3px;color:var(--accent-color);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.terminal-label::before,.terminal-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--accent-color)33,transparent)}
.terminal{background:rgba(0,0,0,.15);border:1px solid var(--border-accent);border-radius:12px;overflow:hidden;box-shadow:0 0 40px rgba(0,255,65,.04),inset 0 0 80px rgba(0,0,0,.3)}
.terminal-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:rgba(137,221,255,.04);border-bottom:1px solid var(--border-accent)}
.td{width:12px;height:12px;border-radius:50%}
.td.r{background:#ff5f57;box-shadow:0 0 4px #ff5f5744}
.td.y{background:#ffbd2e;box-shadow:0 0 4px #ffbd2e44}
.td.g{background:#28c840;box-shadow:0 0 4px #28c84044}
.tt{flex:1;text-align:center;font-size:.65rem;color:var(--accent-color)66;letter-spacing:2px}
.tb{padding:16px;min-height:220px;max-height:380px;overflow-y:auto;font-size:.82rem;line-height:1.7}
.tb::-webkit-scrollbar{width:4px}
.tb::-webkit-scrollbar-track{background:transparent}
.tb::-webkit-scrollbar-thumb{background:var(--accent-color)33;border-radius:2px}
.to{white-space:pre-wrap;word-break:break-word}
.to .cm{color:var(--accent-color)}
.to .pu{color:var(--prompt-user)}
.to .ph{color:var(--prompt-host)}
.to .pp{color:var(--prompt-path)}
.to .ps{color:var(--prompt-symbol)}
.to .rs{color:var(--text-color)}
.to .ac{color:var(--link-color)}
.to .wr{color:var(--warn-color)}
.to .lk{color:var(--link-color);cursor:pointer;text-decoration:underline;text-decoration-color:var(--link-color)44}
.to .lk:hover{color:var(--link-hover);text-decoration-color:var(--link-hover)}
.to .aa{color:var(--accent-color);font-size:.7rem;line-height:1.2}
.to .er{color:var(--error-color)}
.to .mg{color:var(--prompt-user)}
.to .banner-art {
  color: var(--accent-color);
  font-family: "Courier New", Courier, monospace; /* A more reliable font for ASCII */
  font-size: 10px; /* Use a fixed pixel size */
  line-height: 1;  /* Ensure lines are tight */
  letter-spacing: 0;
  animation: fadeIn .8s ease;
}
@keyframes fadeIn { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: blur(0); } }
.il{display:flex;align-items:center;gap:0;margin-top:4px}
.ip{color:var(--accent-color);white-space:nowrap;flex-shrink:0}
.ip .iu{color:var(--prompt-user)}
.ip .ih{color:var(--prompt-host)}
.ip .iw{color:var(--prompt-path)}
.ip .is{color:var(--prompt-symbol)}
.ti{background:transparent;border:none;outline:none;color:var(--accent-color);font-family:'Share Tech Mono',monospace;font-size:.82rem;flex:1;caret-color:var(--accent-color);padding:0;margin:0}
.ti::placeholder{color:var(--accent-color)33}
.to .cmd-row{display:flex;margin-left:1.5rem}
.to .cmd-name{color:var(--link-color);width:26ch;flex-shrink:0}
.to .cmd-desc{color:var(--text-color)}
.to .cmd-cat{color:var(--warn-color);margin-top:.5rem;margin-bottom:.2rem}
.to .links-row{display:flex;margin-left:1.5rem}
.to .links-name{color:var(--link-color);width:12ch;flex-shrink:0}

/* Command output enhancements */
.to .progress-bar{display:flex;align-items:center;gap:8px;font-size:.75rem}
.to .progress-bar-track{flex-grow:1;height:6px;background:var(--border-color);border-radius:3px;overflow:hidden}
.to .progress-bar-fill{height:100%;width:0;background:var(--accent-color);border-radius:3px;transition:width .2s ease-out}
.to .spinner{display:inline-block;width:.7em;height:.7em;border-radius:50%;border:2px solid var(--border-color);border-top-color:var(--accent-color);animation:spin .6s linear infinite;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.to .grid-cctv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:4px;margin:8px 0}
.to .cctv-feed{aspect-ratio:4/3;background:url(https://i.gifer.com/76cI.gif) center/cover;border:1px solid var(--border-color);position:relative;overflow:hidden;filter:grayscale(.8) contrast(1.5) brightness(.8)}

/* ====== FOOTER ====== */
.footer{text-align:center;margin-top:52px;font-size:.65rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase}
.footer .nl{width:60px;height:1px;margin:12px auto;background:linear-gradient(90deg,transparent,var(--main-color)44,transparent)}
.footer a{color:var(--main-color)55;transition:color .3s}
.footer a:hover{color:var(--main-color)}

.particle{position:fixed;width:4px;height:4px;border-radius:50%;pointer-events:none;z-index:999;animation:pf .6s ease-out forwards}
@keyframes pf{to{transform:translate(var(--tx),var(--ty));opacity:0}}

/* ── Tablette ── */
@media(max-width:768px){
  #snake-canvas{width:320px!important;height:320px!important}
}
@media(min-width:768px){.link-card:hover{transform:translateY(-3px) scale(1.02)}}

/* ── Mobile ── */
@media(max-width:480px){
  body{padding-top:28px!important}

  .container{padding:24px 14px 36px}

  /* Header */
  .avatar-circle{width:84px;height:84px}
  .glitch{font-size:clamp(1.3rem,6vw,1.8rem);letter-spacing:1px}
  .status-line{font-size:.65rem;gap:6px}

  /* Link cards — touch targets minimum 52px */
  .link-card{padding:13px 14px;gap:10px;min-height:52px}
  .link-icon{width:22px;height:22px}
  .link-text{font-size:.84rem}
  .link-label{font-size:.58rem}
  /* Feedback visuel au tap */
  .link-card:active{transform:translateY(0) scale(.97)!important;background:rgba(0,255,204,.04)!important}
  .link-arrow{opacity:1;transform:translateX(0)} /* toujours visible sur mobile */

  /* Terminal */
  .terminal-section{margin-top:32px}
  .tb{min-height:160px;max-height:55vw;font-size:.74rem}
  /* Empêche le zoom iOS sur focus input (doit être >= 16px) */
  .ti{font-size:16px!important}
  .terminal-label{font-size:.62rem}

  /* Ticker */
  #crypto-ticker{height:28px}
  #ticker-content{font-size:11px;animation-duration:40s}

  /* Snake */
  #snake-canvas{width:280px!important;height:280px!important}
  #snake-container{padding:14px}
  #snake-container h2{font-size:1.1rem;margin-bottom:10px}

  /* Footer */
  .footer{margin-top:36px;font-size:.6rem}
  .header{margin-bottom:30px}
}

/* ── Safe-area : encoche & Dynamic Island (iOS) ── */
@supports(padding: max(0px)){
  .container{
    padding-left:  max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  #crypto-ticker{
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  body{padding-bottom: env(safe-area-inset-bottom)}
}

/* ====== INTERACTIVE GRID ====== */
#interactive-grid{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-wrap:wrap;z-index:-1;pointer-events:none}
.tile{border:1px solid rgba(0,255,65,.05);pointer-events:none;} /* Tiles don't block clicks */
.tile-hovered{
  background-color:rgba(0,255,65,.08);
  border-color:rgba(0,255,65,.4);
  transition:background-color 5s ease,border-color 5s ease; /* For fade out */
}
.ripple {
  animation: ripple-effect .8s ease-out;
  transition: background-color .8s ease-out, border-color .8s ease-out !important;
}
#interactive-grid::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 25%,var(--bg-main) 85%);
  pointer-events:none
}
/* On mobile, the hover effect is not ideal, so we reduce the grid's visibility */
@media(hover:none){
  #interactive-grid{opacity:.5}
  .tile{transition:none}
  .tile-hovered{background:transparent;border-color:rgba(0,255,65,.05)}
  /* D-pad toujours visible sur écrans tactiles */
  #snake-controls{display:flex!important}
}
/* ============================ */

@keyframes ripple-effect {
  from { background-color: rgba(0,255,65,.2); border-color: rgba(0,255,65,.6); }
  to { background-color: rgba(0,255,65,.08); border-color: rgba(0,255,65,.4); }
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0s!important;transition-duration:0s!important}.subtitle{width:100%;border:none}}

/* SNAKE GAME MODAL STYLES */
#snake-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  font-family: 'Share Tech Mono', monospace;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
}
#snake-container {
  position: relative;
  background: var(--bg-main);
  border: 2px solid var(--main-color);
  box-shadow: 0 0 40px var(--shadow-color);
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  color: var(--main-color);
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}
#snake-container h2 {
  font-family: 'Orbitron', sans-serif; 
  margin: 0 0 15px 0; 
  letter-spacing: 2px;
}
#snake-canvas {
  background: #051005; 
  border: 1px solid var(--accent-color); 
  image-rendering: pixelated;
}
#snake-menu {
  margin-top: 15px;
}
#snake-menu p {
  font-size: 0.9rem; 
  color: var(--text-color); 
  margin-bottom: 15px;
}
#snake-start-btn {
  background: var(--accent-color); 
  color: var(--bg-main); 
  border: none; 
  padding: 10px 20px; 
  font-family: 'Orbitron', sans-serif; 
  cursor: pointer; 
  font-size: 1rem;
}
#snake-ui {
  display: none; 
  margin-top: 15px; 
  justify-content: space-between; 
  align-items: center; 
  font-size: 1.1rem;
}
#snake-close-btn {
  background: var(--error-color); 
  color: white; 
  border: none; 
  padding: 8px 12px; 
  font-family: 'Share Tech Mono', monospace; 
  cursor: pointer; 
  font-size: 0.8rem;
}
#snake-game-over {
  display: none; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  background: rgba(10, 10, 15, 0.9); 
  padding: 30px; 
  border-radius: 8px; 
  border: 1px solid var(--error-color);
}
#snake-game-over h3 {
  font-family: 'Orbitron', sans-serif; 
  color: var(--error-color); 
  margin: 0 0 15px 0;
}
#snake-restart-btn {
  background: var(--accent-color); 
  color: var(--bg-main); 
  border: none; 
  padding: 10px 20px; 
  font-family: 'Orbitron', sans-serif; 
  cursor: pointer; 
  font-size: 1rem;
}

/* SNAKE D-PAD STYLES */
#snake-controls{
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin:10px 0 4px;
}
.snake-dpad-row{display:flex;gap:4px;justify-content:center}
.snake-dpad{
  width:52px;height:52px;
  background:rgba(0,255,65,.08);
  border:1px solid var(--accent-color);
  color:var(--accent-color);
  font-size:1.1rem;
  border-radius:8px;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s;
}
.snake-dpad:active{background:rgba(0,255,65,.25)}

/* CRYPTO TICKER STYLES */
#crypto-ticker {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9999;
  background:rgba(0,0,0,0.9);
  border-bottom:1px solid var(--main-color)22;
  overflow:hidden;
  height:36px;
  display:flex;
  align-items:center;
}
#ticker-content {
  display:flex;
  white-space:nowrap;
  font-family:'Courier New',monospace;
  font-size:13px;
  color:#00ffd5;
  animation:tickerScroll 60s linear infinite; 
  will-change: transform;
}
@keyframes tickerScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.ticker-group{
  display:inline-flex;
  align-items:center; 
  padding-right: 40px; /* Add padding for seamless loop */
}
.ticker-item{
  padding:0 20px; 
  flex-shrink: 0;
}
.ticker-item::after{
  content:'│';
  color:#00ffd533;
  padding-left:20px;
}
.ticker-group .ticker-item:last-child::after{
  content:'';
}
body{
  padding-top:36px!important
}