/* ============================================================
   À PROPOS // BOOT SEQUENCE + TERMINAL PROFILE THEME
   Portée : uniquement la page À propos. Vanilla CSS, pas de dépendance.
   ============================================================ */

:root{
  --geek-cyan:#37f5ff;
  --geek-magenta:#ff36ba;
  --geek-green:#b6ff49;
  --geek-bg:#03050a;
  --geek-mono:'Space Mono', 'SF Mono', Consolas, monospace;
}

/* ---------- BOOT OVERLAY ---------- */
/* Le menu du site reste toujours visible et cliquable par-dessus l'intro :
   personne ne doit se sentir "coincé" sans navigation pendant les quelques secondes du boot. */
.site-header{ z-index:1000; }

.about-boot{
  position:fixed; inset:0; z-index:999; background:var(--geek-bg);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; transition:opacity .8s ease, visibility .8s ease;
}
.about-boot.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
#boot-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.boot-scanline{
  position:absolute; left:0; right:0; height:2px; top:0;
  background:linear-gradient(90deg, transparent, var(--geek-cyan), transparent);
  opacity:.55; box-shadow:0 0 12px var(--geek-cyan);
  animation:bootScan 3.4s linear infinite;
}
@keyframes bootScan{ from{ top:-2px; } to{ top:100%; } }
.boot-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 35%, #000 105%);
}
.boot-grid{
  position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease;
  background-image:
    linear-gradient(to right, rgba(55,245,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(55,245,255,.08) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at center, black 0%, transparent 72%);
}
.about-boot.phase-grid .boot-grid{ opacity:1; }

.boot-hud{ position:absolute; inset:22px; pointer-events:none; opacity:0; transition:opacity .6s ease; font:700 .68rem/1 var(--geek-mono); letter-spacing:.1em; color:var(--geek-cyan); }
.about-boot.phase-hud .boot-hud{ opacity:.8; }
.boot-hud span{ position:absolute; }
.boot-hud-tl{ top:0; left:0; }
.boot-hud-tr{ top:0; right:0; color:var(--geek-green); }
.boot-hud-bl{ bottom:0; left:0; color:var(--geek-magenta); }
.boot-hud-br{ bottom:0; right:0; opacity:.6; }

.boot-stage{ position:relative; z-index:2; width:min(640px, 88vw); text-align:center; }
.boot-terminal{
  text-align:left; margin:0 auto 1.5rem; padding:1rem 1.25rem;
  background:rgba(4,7,15,.82); border:1px solid rgba(55,245,255,.28); border-radius:10px;
  font:700 .78rem/1.75 var(--geek-mono); color:#8ee9f2; min-height:120px;
  white-space:pre-wrap; opacity:0; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
  box-shadow:0 0 30px rgba(55,245,255,.08), inset 0 0 20px rgba(55,245,255,.05);
}
.about-boot.phase-terminal .boot-terminal{ opacity:1; transform:translateY(0); }
.boot-terminal .ok{ color:var(--geek-green); }
.boot-terminal .cur{ display:inline-block; width:.6em; background:var(--geek-cyan); animation:bootCaret 1s step-end infinite; }
@keyframes bootCaret{ 50%{ opacity:0; } }

.boot-reveal{ opacity:0; transform:scale(.94); transition:opacity .7s ease, transform .7s ease; }
.about-boot.phase-reveal .boot-reveal{ opacity:1; transform:scale(1); }
.boot-eyebrow{ margin:0 0 .5rem; font:700 .72rem var(--geek-mono); letter-spacing:.25em; color:var(--geek-magenta); }
.boot-title{
  margin:0; font-family:'Montserrat', sans-serif; font-weight:800;
  font-size:clamp(2.6rem, 9vw, 5rem); letter-spacing:.02em; line-height:1;
  color:#eafcff; text-shadow:0 0 18px rgba(55,245,255,.55), 0 0 46px rgba(55,245,255,.25);
  position:relative;
}
.about-boot.phase-glitch .boot-title{ animation:bootGlitch .34s steps(2) 2; }
.boot-title::before, .boot-title::after{
  content:attr(data-text); position:absolute; inset:0; opacity:0;
}
.about-boot.phase-glitch .boot-title::before{
  opacity:.75; color:var(--geek-magenta); animation:bootGlitchLayer .34s steps(2) 2; clip-path:polygon(0 10%,100% 10%,100% 45%,0 45%);
}
.about-boot.phase-glitch .boot-title::after{
  opacity:.75; color:var(--geek-cyan); animation:bootGlitchLayer2 .34s steps(2) 2; clip-path:polygon(0 60%,100% 60%,100% 90%,0 90%);
}
@keyframes bootGlitch{ 0%,100%{ transform:translate(0); } 50%{ transform:translate(-1px,1px); } }
@keyframes bootGlitchLayer{ 0%,100%{ transform:translate(0); } 50%{ transform:translate(3px,-2px); } }
@keyframes bootGlitchLayer2{ 0%,100%{ transform:translate(0); } 50%{ transform:translate(-3px,2px); } }
.boot-subtitle{ margin:.85rem 0 0; font:700 .78rem var(--geek-mono); letter-spacing:.22em; color:#7fb8c4; }

.boot-skip{
  position:absolute; right:22px; bottom:22px; z-index:3;
  background:transparent; border:1px solid rgba(55,245,255,.4); color:var(--geek-cyan);
  font:700 .72rem var(--geek-mono); letter-spacing:.08em; padding:.55rem 1rem; border-radius:999px;
  cursor:pointer; opacity:0; transition:opacity .5s ease, background .2s ease;
}
.about-boot.phase-hud .boot-skip{ opacity:.85; }
.boot-skip:hover, .boot-skip:focus-visible{ background:rgba(55,245,255,.12); }

@media (max-width:640px){
  .boot-hud{ inset:14px; font-size:.6rem; }
  .boot-terminal{ font-size:.68rem; padding:.85rem 1rem; }
  .boot-skip{ right:14px; bottom:14px; }
}

/* Utilisateurs préférant moins d'animation : on saute directement à l'état final, sans mouvement */
@media (prefers-reduced-motion: reduce){
  .about-boot{ transition:none; }
  .boot-scanline, .boot-grid, .boot-hud, .boot-terminal, .boot-reveal, .boot-skip{ transition:none; animation:none; }
}

/* ============================================================
   SECTION PROFIL (contenu existant, habillage renforcé)
   ============================================================ */
.about-inner{ position:relative; isolation:isolate; }
.about-inner::before{
  content:"ABOUT_PAGE // PLAYER_PROFILE"; position:absolute; right:0; top:16px;
  font:700 .68rem/1 var(--geek-mono); color:rgba(55,245,255,.55); letter-spacing:.12em;
  animation:aboutBlink 2.4s infinite;
}
@keyframes aboutBlink{ 50%{ opacity:.35; } }

.author-box{
  position:relative; overflow:hidden; isolation:isolate;
  display:block;
  width:min(100%, 980px);
  margin:0 auto;
  background:linear-gradient(135deg,#0c1526f2,#05070ff2 70%);
  border:1px solid rgba(55,245,255,.22);
  border-radius:22px; padding:48px 56px;
  box-shadow:0 25px 80px rgba(0,0,0,.55), inset 0 0 45px rgba(55,245,255,.05);
  clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  opacity:0; transform:translateY(24px);
}
.author-box.is-in{ animation:authorRise .8s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes authorRise{ to{ opacity:1; transform:translateY(0); } }

.author-box::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(55,245,255,.07) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(255,54,186,.05) 50%, transparent 50.2%);
  background-size:42px 42px; mask-image:linear-gradient(to bottom, black, transparent 75%);
  animation:aboutGrid 12s linear infinite;
}
@keyframes aboutGrid{ to{ background-position:42px 42px; } }
.author-box::after{
  content:"SYSTEM ONLINE"; position:absolute; right:26px; bottom:18px;
  font:700 .62rem var(--geek-mono); color:var(--geek-green); letter-spacing:.12em;
  animation:aboutBlink 1.8s infinite;
}

.author-avatar-img{
  position:relative; z-index:1; width:220px; height:220px; object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(55,245,255,.4));
  animation:lekaFloat 4s ease-in-out infinite;
}
@keyframes lekaFloat{ 50%{ transform:translateY(-9px) rotate(2deg); } }

.author-copy{ position:relative; z-index:1; }
.author-copy::before{
  content:"// QUEST_LOG: ORIGIN_STORY"; display:block; color:var(--geek-cyan);
  font:700 .7rem var(--geek-mono); letter-spacing:.12em; margin-bottom:14px;
}
.author-copy h1{ font-family:'Montserrat', sans-serif; letter-spacing:-.03em; }
.author-copy h2{
  font-family:var(--geek-mono); font-size:1rem; letter-spacing:.04em; color:var(--geek-cyan);
  margin-top:2.2rem; padding-top:1.4rem; border-top:1px dashed rgba(55,245,255,.25);
}
.author-copy h2::before{ content:"$ "; color:var(--geek-green); }
.author-copy p{ max-width:720px; }
.author-copy em{ color:var(--geek-magenta); font-style:normal; }

.author-links{ margin-top:22px; }
.author-link{ display:inline-flex; align-items:center; gap:8px; color:var(--geek-cyan) !important; font-weight:800; transition:.2s; }
.author-link:hover{ color:var(--geek-green) !important; text-shadow:0 0 14px var(--geek-cyan); }
.bmc-btn{
  display:inline-flex !important; align-items:center; gap:9px; margin-top:17px;
  background:linear-gradient(100deg,#ffe000,#ffb800) !important; color:#101522 !important;
  border:1px solid rgba(255,255,255,.06) !important; box-shadow:0 0 22px rgba(255,207,0,.22);
  transition:.25s !important; border-radius:999px; padding:.7rem 1.3rem; text-decoration:none; font-weight:700;
}
.bmc-btn:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 0 35px rgba(255,207,0,.55) !important; }
.bmc-note{ margin-top:.6rem; font-size:.85rem; color:var(--text-muted); }

.about-inner .breadcrumb{ font-family:var(--geek-mono); font-size:.75rem; }
.about-inner .breadcrumb::before{ content:'[ '; color:var(--geek-cyan); }
.about-inner .breadcrumb::after{ content:' ]'; color:var(--geek-cyan); }
.about-inner .breadcrumb a{ color:var(--geek-cyan); }

.about-terminal{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.about-terminal > div{
  border:1px solid rgba(39,59,95,.8); background:#040711; padding:18px;
  font:700 .72rem/1.8 var(--geek-mono); color:#8390ad; border-radius:8px;
}
.about-terminal b{ color:var(--geek-green); }
.about-terminal strong{ color:var(--geek-magenta); }

@media (max-width:760px){
  .about-inner::before{ position:static; display:block; margin-bottom:18px; }
  .author-box{ grid-template-columns:1fr; padding:28px; text-align:left; }
  .author-avatar-img{ width:170px; height:170px; margin:auto; }
  .about-terminal{ grid-template-columns:1fr; }
}

/* V142 : recentrage de la page À propos.
   Le layout historique prévoyait une colonne avatar qui n'existe plus,
   ce qui laissait toute la moitié droite vide. */
.about-inner{
  width:min(100% - 32px, 1100px);
  margin-inline:auto;
}
.about-inner .breadcrumb{
  width:min(100%, 980px);
  margin-left:auto;
  margin-right:auto;
}
.author-copy{
  width:min(100%, 820px);
  margin:0 auto;
}
.author-copy h1{
  max-width:760px;
}
.author-copy p{
  max-width:820px;
}
@media (max-width:760px){
  .author-box{
    width:100%;
    padding:28px 24px;
  }
  .author-copy{
    width:100%;
  }
}