/* ==========================================
   ABYSS — TECH (v7: hero + hub en haut, scroll anchors)
   ========================================== */

/* ---------- Variables ---------- */
:root{
  --bg:#191817;            /* fond général */
  --ink:#e9ecef;           /* texte clair */
  --muted:#a4a9b2;         /* texte secondaire */
  --line:rgba(255,255,255,.08);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; } /* défilement doux vers les sections */
body{
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.55 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ==========================================
   HERO plein écran (bg-tech) + hub au centre
   ========================================== */
.hero-tech{
  position:relative;
  min-height:100vh;
  background-color:var(--bg);
  background-image:url('assets/img/bg-tech.jpeg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

/* Voile */
.hero-overlay{
  position:absolute; inset:0;
  background:rgba(25,24,23,0.55);
  z-index:1;               /* sous pieuvre & menu */
  pointer-events:none;
}

/* Contenu (menu hub) — au-dessus de tout */
.hero-content{
  position:relative; z-index:3;   /* > pieuvre */
  min-height:100vh;
  display:grid; place-items:center;
  padding:24px;
}

/* ==========================================
   HUB (menu vertical minimal, au centre du hero)
   ========================================== */
.hub-menu{
  display:grid;
  gap:14px;
  text-align:center;
}
.hub-menu a{
  display:block;
  text-decoration:none;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
  font-size:clamp(14px, 2.2vw, 18px);
  opacity:.92;
}
.hub-menu a:hover,
.hub-menu a:focus{
  opacity:1;
  text-decoration:underline;
  outline:none;
}

/* ==========================================
   SECTIONS génériques (une seule page)
   ========================================== */
.section{
  position:relative; z-index:1;
  scroll-margin-top:12px;
  padding: clamp(40px, 6vw, 80px) 18px;
  border-top: 1px solid var(--line);
}
.section h2{
  margin:0 0 12px 0;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.section .lead{ color:var(--muted); }

/* ==========================================
   IDENTITY — image plein écran + texte haut/gauche
   ========================================== */
.identity{
  position:relative;
  width:100%; height:100vh; overflow:hidden;
  display:flex; align-items:flex-start; justify-content:flex-start;
  background:#191817;
}
.identity-bg{ position:absolute; inset:0; z-index:1; }
.identity-bg img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:brightness(0.95) contrast(1.08);
}
.identity-overlay{
  position:absolute; inset:0; z-index:2;
  background:rgba(25,24,23,0.35);
}
.identity-text{
  position:relative; z-index:3;
  text-align:left; color:#e9ecef;
  padding:clamp(40px, 6vw, 120px);
  max-width:580px;
}
.identity-text h2{
  font-size:clamp(24px, 3vw, 34px);
  font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  margin:0 0 18px 0;
}
.identity-text p{
  font-size:clamp(15px, 1.2vw, 18px);
  line-height:1.8;
  color:rgba(233,236,239,0.8);
}

/* ==========================================
   Contenu standard réutilisable
   ========================================== */
.container{ max-width:1100px; margin:0 auto; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .identity-inner{ grid-template-columns:1fr; }
  .identity-photo{ min-height:60vh; }
}

/* ==== PERFORMANCES (YouTube N&B + liens SoundCloud) ==== */
.container-wide{ max-width: 1440px; }

.perf-grid.perf-3col{
  display:grid; gap:24px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width:1200px){
  .perf-grid.perf-3col{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:760px){
  .perf-grid.perf-3col{ grid-template-columns: 1fr; }
}

/* Lecteur 16:9 */
.video-wrap{
  position:relative; aspect-ratio: 16 / 9;
  border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:#0e0e0e;
}
.video-wrap iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
/* N&B local */
.video-wrap.bw iframe{ filter: grayscale(1) contrast(1.06) brightness(0.98); }

/* Icônes */
.icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  text-decoration:none; color:#e9ecef;
  border:1px solid var(--line); opacity:.9;
  transition: opacity .2s, border-color .2s, color .2s;
}
.icon:hover{ opacity:1; border-color:rgba(255,255,255,0.25); color:#fff; }
.icon svg{ display:block; fill:currentColor; }
.perf-icons{ display:flex; align-items:center; gap:12px; }

/* ====== RELEASES — Teaser head ====== */
.releases-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:8px;
}
.releases-head h2{
  margin:0; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}

/* ====== container full width ====== */
.container-fluid{
  width:100%; max-width:none;
  padding-left:min(24px,4vw);
  padding-right:min(24px,4vw);
}

/* ====== Console bash-like (base) ====== */
.releases-console .terminal{
  background:#0e0e0e;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:inset 0 0 28px rgba(255,255,255,.04);
  padding:18px;
  color:#e9ecef;
  transition:max-height .5s ease, opacity .25s ease;
  overflow:hidden;
}
/* état replié/déplié */
.terminal.is-collapsed{ max-height:0; opacity:0; }
.terminal.is-open{ max-height:80vh; opacity:1; }

/* écran + input */
.term-screen{
  min-height:260px;
  max-height:60vh;
  overflow:auto;
  padding:8px 4px 14px 4px;
}
.line{ margin:2px 0; letter-spacing:.02em; white-space:pre-wrap; }
.line .time{ color:#8e939b; }
.line .title{ font-weight:700; color:#fff; }
.line .meta{ color:#a4a9b2; }
.line .links{ margin-left:8px; opacity:.9; }
.link-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  text-decoration:none; color:#e9ecef; font-size:.9em;
  margin-left:6px;
}
.link-chip:hover{ border-color:rgba(255,255,255,.3); }

.term-input{
  display:flex; align-items:center; gap:8px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:12px; margin-top:10px;
  position:relative;
}
.prompt{
  color:#cfd3da;
  letter-spacing:.06em;
  text-transform:lowercase;
  user-select:none;
}
#term-cmd{
  flex:1;
  background:transparent;
  border:none; outline:none;
  color:#e9ecef;
  font:600 15px/1.4 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.04em;
}
.caret{
  width:10px; height:16px; margin-left:2px;
  background:#e9ecef;
  animation:blink 1s steps(1,end) infinite;
}
@keyframes blink { 50% { opacity:0; } }

/* typewriter visuel générique (si besoin ailleurs) */
.type { display:inline-block; border-right:2px solid #e9ecef; white-space:pre; overflow:hidden; }

/* scrollbar discrète */
.term-screen::-webkit-scrollbar{ height:8px; width:8px; }
.term-screen::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px; }

/* ==========================================
   PATCHS DEMANDÉS
   ========================================== */

/* 1) Pieuvre : centrée horizontalement, EN HAUT, plus petite, sous le menu */
.pieuvre-tech{
  position:absolute;
  left:50%;
  top:clamp(20px, 9vh, 40px);     /* haut de l’écran */
  transform:translateX(-50%);      /* centre horizontal */
  width:min(28vmin, 180px);        /* plus petite */
  height:auto;
  z-index:2;                       /* sous le menu (menu = z-index:3) */
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.35));
}
/* On garde bien l’ordre des couches */
.hero-overlay{ z-index:1; }
.hero-content{ z-index:3; }        /* menu au-dessus */

/* 2) [ reveal ] — texte blanc clignotant, pas de pill (scopé console) */
.abyss-console .see-trigger{
  appearance:none; background:transparent; border:0; padding:0;
  color:#fff; font:700 14px/1 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.12em; text-transform:lowercase; cursor:pointer;
  animation:ac-reveal-blink 1.6s ease-in-out infinite;
}
@keyframes ac-reveal-blink { 0%,100%{opacity:.55} 50%{opacity:1} }
.abyss-console .see-trigger::before{ content:"[ "; }
.abyss-console .see-trigger::after { content:" ]"; }

/* 3) Console — micro-styles internes scopés pour éviter tout conflit */
.abyss-console .terminal.is-open{ animation:ac-termIn .35s ease both; }
@keyframes ac-termIn{
  0%{ opacity:0; transform:scale(.985) translateY(6px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
.abyss-console .history-line{
  opacity:.95;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
.abyss-console .history-line.cmd{ color:#93e5ae; }
.abyss-console .hint{ color:#8bdc9f; }
.abyss-console .tree{ color:#b8f7ff; }
.abyss-console .motd{ color:#a4a9b2; margin:6px 0 10px; }
.abyss-console .ac-octo{ color:#b9c7ff; filter:drop-shadow(0 6px 16px rgba(80,130,255,.15)); margin-bottom:8px; }
.abyss-console .ac-abyss{ color:#57e3ff; font-weight:800; letter-spacing:.12em; text-shadow:0 0 24px rgba(87,227,255,.25); }
.abyss-console .output{ margin:8px 0 16px; }
.abyss-console .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border:1px solid #2d2d2d; border-radius:999px;
  margin:4px 8px 0 0; cursor:pointer; user-select:none;
}
.abyss-console .chip:hover{ border-color:#434343; }
.abyss-console .chip .tag{
  background:rgba(255,255,255,.08);
  padding:1px 6px; border-radius:6px;
  color:#bbb; font-size:12px;
}
/* input lock pendant le boot */
.abyss-console .term-input.is-locked{ opacity:.35; pointer-events:none; }
/* caret taping pendant le boot */
.abyss-console .ac-type-caret::after{
  content:"▌"; margin-left:4px; animation:blink 1s steps(1,end) infinite;
}
/* ===== ABYSS Console — player banner (scoped) ===== */
.abyss-console .ac-player{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:#101010;
  box-shadow:inset 0 0 20px rgba(255,255,255,.04);
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  color:#e9ecef;
  transform-origin: top;
  transform: scaleY(0.98);
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity .25s ease, max-height .35s ease, transform .25s ease;
}
.abyss-console .ac-player.is-open{
  opacity:1; max-height:120px; transform: scaleY(1);
}


.abyss-console .acp-meta{ flex:1; min-width:0; }
.abyss-console .acp-title{
  font-weight:700; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.abyss-console .acp-time{ font-size:12px; color:#a4a9b2; margin-top:2px; }
.abyss-console .acp-bar{
  position:relative; height:6px; border-radius:999px;
  background:rgba(255,255,255,.12); overflow:hidden; margin-top:6px; cursor:pointer;
}
.abyss-console .acp-bar-fill{
  position:absolute; left:0; top:0; bottom:0; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:#57e3ff;
}

.abyss-console .acp-right{ display:flex; align-items:center; gap:10px; }
.abyss-console .acp-sc{
  display:inline-flex; width:34px; height:34px; border-radius:999px;
  align-items:center; justify-content:center;
  color:#e9ecef; border:1px solid rgba(255,255,255,.14); text-decoration:none;
}
.abyss-console .acp-sc:hover{ border-color:rgba(255,255,255,.28); }
.abyss-console .acp-sc svg path{ fill:currentColor; }

.abyss-console .acp-vol{ width:110px; accent-color:#57e3ff; }

/* === PLAYER BUTTON COLOR FIX (white play/pause) === */

/* Main button (play / pause) */
.abyss-console .acp-btn.acp-play {
  background:#fff;               /* white background */
  border:1px solid rgba(255,255,255,.4);
  color:#191817;                 /* dark icon color for contrast */
  width:42px;
  height:42px;
  border-radius:12px;
  transition:transform .15s ease, box-shadow .2s ease;
}
.abyss-console .acp-btn.acp-play:hover {
  transform:scale(1.05);
  box-shadow:0 0 12px rgba(255,255,255,.25);
}

/* SVG inside the play/pause button */
.abyss-console .acp-btn.acp-play svg path {
  fill:#191817 !important;       /* ensures icon is dark */
}

/* Optional: make the close (×) white too */
.abyss-console .acp-close {
  background:#fff;
  color:#191817;
  border:1px solid rgba(255,255,255,.4);
}
.abyss-console .acp-close:hover {
  transform:scale(1.1);
  box-shadow:0 0 12px rgba(255,255,255,.25);
}
/* === PLAYER CLOSE BUTTON (black background, white icon) === */
.abyss-console .acp-close {
  background:#000;                /* black square */
  color:#fff;                     /* white × symbol */
  border:1px solid rgba(255,255,255,.25);
  border-radius:8px;
  width:28px; height:28px;
  display:grid; place-items:center;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease;
}
.abyss-console .acp-close:hover {
  transform:scale(1.1);
  box-shadow:0 0 8px rgba(255,255,255,.25);
}
/* ===== [ back ] button (bottom left corner) ===== */

/* [ back ] ancré au HERO (ne suit pas le scroll) */
.hero-tech .back-btn{
  position:absolute;
  bottom:24px; left:28px;
  color:#fff;
  text-decoration:none;
  font:700 14px/1 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.12em;
  text-transform:lowercase;
  opacity:.8;
  cursor:pointer;
  z-index:4;                 /* > hero-content (3) et overlay (1) */
  animation:blinkSoft 1.6s ease-in-out infinite;
  transition:opacity .25s ease;
}
.hero-tech .back-btn:hover{ opacity:1; }
.hero-tech .back-btn::before{ content:"[ "; }
.hero-tech .back-btn::after { content:" ]"; }

/* si tu avais déjà .back-btn en position:fixed, supprime-le ou écrase-le : */
.back-btn{ position:static; }  /* (optionnel, seulement si nécessaire) */

/* Bottom fade on the Identity section (image → dark grey) */
.identity::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:140px;              /* ajuste si tu veux plus/moins long */
  pointer-events:none;
  /* Noir profond → gris très foncé */
  background:linear-gradient(
    to bottom,
    rgba(25,24,23,0) 0%,
    rgba(25,24,23,0.65) 55%,
    #141414 100%
  );
  z-index:2;                 /* au-dessus du bg, sous le texte */
}

/* Optionnel : petit fondu de raccord en haut de Performances */
#performances.section::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:40px;
  pointer-events:none;
  background:linear-gradient(to bottom, #141414 0%, rgba(20,20,20,0) 100%);
  z-index:0;
}
/* Même padding latéral que tes sections larges (container-wide) */
.releases-console .container{
  padding-left:min(24px,4vw);
  padding-right:min(24px,4vw);
}

/* Et on cale aussi la zone console full width sur le même inset */
.releases-console .container-fluid{
  padding-left:min(24px,4vw);
  padding-right:min(24px,4vw);
}
/* augmente le ‘respire’ avant la grille vidéos */
#performances .perf-grid{
  margin-top: clamp(28px, 4.5vw, 48px);  /* avant: ~24px ; maintenant plus aéré */
}

/* et un peu plus d’air en bas de la section avant ce qui suit (clip) */
#performances.section{
  padding-bottom: clamp(72px, 8vw, 120px);
}
/* === remove border line between Identity & Performances === */

/* enlève le trait supérieur de la section Performances uniquement */
#performances.section{
  border-top:none;
}

/* si jamais Identity avait un trait en bas, on le retire aussi */
.identity{
  border-bottom:none;
}

/* === Align RELEASES à gauche (comme Performances) + responsive === */

/* Par défaut : centrée sur petits écrans */
.releases-console .container,
.releases-console .container-fluid{
  padding-left:min(24px, 5vw);
  padding-right:min(24px, 5vw);
}

/* Sur écrans moyens et grands : aligné à gauche comme Performances */
@media (min-width:900px){
  .releases-console .container,
  .releases-console .container-fluid{
    max-width:none;
    margin-left:calc((100vw - 1440px)/2); /* aligne sur le même axe que tes grilles */
    padding-left:clamp(60px, 8vw, 120px);
    padding-right:clamp(30px, 6vw, 80px);
  }

  /* Optionnel : aligne aussi le titre et le bouton reveal en bloc gauche */
  .releases-head{
    justify-content:flex-start;
    gap:28px;
  }
}
/* === FIX: RELEASES left-aligned + [reveal] next to title === */

/* On cale la section Releases sur le même axe gauche que Performances */
.releases-console .container,
.releases-console .container-fluid{
  max-width:1440px;             /* comme .container-wide */
  margin:0 auto;                 /* centré dans la fenêtre */
  padding-left:min(24px,4vw);    /* même inset que tes sections */
  padding-right:min(24px,4vw);
}

/* Titre + reveal sur la même ligne, à gauche */
.releases-head{
  display:flex;
  align-items:center;
  justify-content:flex-start !important;  /* écrase space-between */
  gap:18px;                                /* espace entre H2 et [reveal] */
  flex-wrap:wrap;                          /* passe à la ligne si écran étroit */
}

/* Optionnel: micro-ajustement du h2 pour coller visuellement au reveal */
.releases-head h2{ margin:0 2px 0 0; }

/* Sur petits écrans, on garde le même comportement (pas besoin d’override) */

/* ===== LAB — cards minimalistes ===== */
.lab-wrap { max-width: 1100px; margin-inline: auto; }
.lab-notice { margin: 10px 0 16px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: #cfcfcf; }
.lab-list { display: grid; gap: 12px; }

.lab-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: #0a0a0a;
}

.lab-play {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent; color: #e8e8e8;
  cursor: pointer;
}

.lab-title { font-weight: 600; letter-spacing: .02em; }

.lab-meta-row { display: flex; gap: 10px; color: #a9a9a9; font-size: 12px; }
.lab-duration { opacity: .9; }
.lab-date { opacity: .9; }

/* =========================
   LAB — Style harmonisé (Tech mode)
   ========================= */

.lab-wrap {
  background: var(--lab-bg, #191817); /* même fond que le site */
  padding: 48px 24px;
  border-radius: 24px;
  box-shadow: 0 0 40px rgba(0,0,0,0.25);
}

.lab-wrap h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.lab-wrap .lead {
  color: #aaa;
  margin-bottom: 28px;
}

/* Liste principale */
.lab-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Carte d’un élément LAB */
.lab-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #1f1e1d; /* gris plus clair que le fond */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: background 0.25s ease;
}
.lab-card:hover {
  background: #222120;
}

/* Bouton lecture */
.lab-play {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.lab-play:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
}

/* Contenu texte */
.lab-title {
  font-weight: 600;
  color: #f0f0f0;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.lab-meta-row {
  font-size: 12px;
  color: #aaa;
  display: flex;
  gap: 12px;
}

/* Lien de téléchargement */
.lab-card a {
  text-decoration: none;
  color: #cfcfcf;
  font-size: 13px;
  opacity: 0.8;
}
.lab-card a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Message d’erreur / notice */
.lab-notice {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  font-size: 14px;
  color: #ccc;
}

/* TV: rendre le focus visible */
:focus { outline:2px solid #888; outline-offset:2px; }

/* TV: pas de contenus strictement au hover */
@media (hover: none) {
  .on-hover-only { display:none !important; }
  .always-visible { display:block !important; }
}

/* =========================================
   BOOKING & BACK BUTTON — Links in white
   ========================================= */

#booking a,
.back-btn,
footer a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

#booking a:hover,
.back-btn:hover,
footer a:hover {
  color: #bbb;
}

/* Back button appearance (optional, if not already styled) */
.back-btn {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: none;
  border: 1px solid #fff;
  padding: 6px 14px;
  border-radius: 8px;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}