/* ==========================================================================
   ÉCRANS : structure commune
   Chaque écran tient exactement dans la fenêtre, sans défilement :
   colonne flex (barre de navigation, titre, puis zone de contenu qui prend
   la place restante). Le bas est réservé au texte guide et aux commandes.
   Les écrans marqués .dyn (Projets, Fiche projet, Compétences, Profil) ont
   en plus la barre de navigation, l'intro, les rayures et les apparitions
   en cascade. L'écran Contact garde son apparence d'origine.
   ========================================================================== */

.screen{position:absolute;inset:0;z-index:5;overflow:hidden;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + clamp(12px,2.8vh,34px)) clamp(16px,5vw,84px) calc(env(safe-area-inset-bottom,0px) + clamp(74px,12vh,116px))}
.screen::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(100deg,var(--veil) 0 54%,var(--veil-soft) 54.2% 100%)}
.on-screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:20;pointer-events:none;
  background:linear-gradient(transparent,var(--abyss) 70%)}
.on-screen .hud,.on-screen .menu,.on-screen .bigname{visibility:hidden}

.screen-inner{flex:1;min-height:0;width:100%;max-width:1240px;display:flex;flex-direction:column;gap:clamp(10px,2.2vh,26px)}
.screen-body{flex:1;min-height:0}
.screen-top{display:flex;align-items:flex-end;gap:clamp(16px,3vw,52px)}

/* Mot géant incliné sur le bord droit, comme « SOCIAL LINK » dans le jeu */
.ghostword{position:fixed;z-index:-1;right:-.06em;top:50%;pointer-events:none;white-space:nowrap;
  font:italic 900 clamp(6rem,15vw,15rem)/.8 var(--f-display);letter-spacing:-.02em;text-transform:uppercase;color:var(--ghost);
  writing-mode:vertical-rl;transform:translateY(-50%) rotate(192deg);animation:ghostIn .6s var(--ease-out) both}
.dyn .ghostword{animation:ghostIn .6s var(--ease-out) both,ghostDrift 7s .6s ease-in-out infinite alternate}

/* Bandeau titre */
.screen-head{position:relative;flex:none;justify-self:start;align-self:flex-start;isolation:isolate;padding:.25em 2.4em .3em 0;animation:headIn .45s var(--ease-out) both}
.screen-head::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:0;left:-100vw;background:var(--ink);transform:skewX(-18deg);transform-origin:0 100%}
.screen-head::after{content:"";position:absolute;z-index:-2;left:-100vw;right:-1.4em;bottom:-.32em;height:.42em;background:var(--tide);transform:skewX(-18deg)}
.eyebrow{margin:0;font:italic 800 .8rem/1 var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:var(--foam)}
.screen-title{margin:.15em 0 0;font:italic 900 clamp(2.4rem,min(8vw,8.6vh),5.8rem)/.8 var(--f-display);letter-spacing:-.01em;text-transform:uppercase;color:var(--paper);
  transform:skewX(-6deg);transform-origin:0 100%}
.screen-title:focus{outline:none}

/* ---------- Barre de navigation des écrans ---------- */
.secnav{flex:none;display:flex;align-items:center;justify-content:space-between;gap:.6rem 1.4rem;flex-wrap:wrap;
  animation:navIn .4s var(--ease-out) both}
.secnav-back{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.55rem;padding:.48rem 1.1rem .48rem .8rem;
  border:0;background:none;cursor:pointer;color:var(--ink);font:italic 800 1rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;
  transition:transform .15s var(--ease-out)}
.secnav-back::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);transform:skewX(-14deg);transition:background .15s}
.secnav-back svg{width:.7em;height:.95em;overflow:visible}
.secnav-back path{fill:none;stroke:var(--blade);stroke-width:3.4}
.secnav-back:hover{transform:translateX(-4px)}
.secnav-back:hover::before{background:var(--foam)}
.secnav-back:focus-visible{outline:none}
.secnav-back:focus-visible::before{box-shadow:0 0 0 3px var(--foam)}
.secnav-tabs{list-style:none;margin:0;padding:.2rem .4rem;display:flex;gap:.2rem;overflow-x:auto;max-width:100%;scrollbar-width:none}
.secnav-tabs::-webkit-scrollbar{display:none}
.secnav-tabs button{position:relative;isolation:isolate;padding:.45rem .9rem;border:0;background:none;cursor:pointer;white-space:nowrap;
  color:var(--cyan);font:italic 800 .95rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;transition:color .12s}
.secnav-tabs button::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-14deg) scaleX(0);transform-origin:0 50%;
  background:var(--paper);transition:transform .2s var(--ease-out)}
.secnav-tabs button:hover{color:var(--paper)}
.secnav-tabs button:hover::before{transform:skewX(-14deg) scaleX(1);background:var(--deep)}
.secnav-tabs [aria-current="page"]{color:var(--ink);cursor:default}
.secnav-tabs [aria-current="page"]::before{transform:skewX(-14deg) scaleX(1);background:var(--paper);box-shadow:0 3px 0 var(--blade)}
.secnav-tabs [aria-current="page"]:hover{color:var(--ink)}
.secnav-tabs [aria-current="page"]:hover::before{background:var(--paper)}

/* ---------- Intro, étiquettes ---------- */
.screen-intro{margin:0 0 .35rem;max-width:46ch;display:flex;gap:.7rem;font:500 clamp(.95rem,1.3vw,1.08rem)/1.5 var(--f-body);color:var(--paper)}
.screen-intro::before{content:"";flex:none;width:3px;margin-block:.25em;background:var(--cyan);transform:skewX(-18deg)}
.blk-label{flex:none;display:flex;align-items:center;gap:.7rem;margin:0 0 clamp(.4rem,1vh,.75rem);font:italic 800 .82rem/1 var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:var(--foam)}
.blk-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.only-narrow{display:none}

/* ---------- Mouvement : rayures, éclair d'entrée, cascade ---------- */
.fx-stripes{position:fixed;z-index:-1;inset:-20% -30% -20% 30%;pointer-events:none;transform:skewX(-24deg);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
.fx-stripes::before{content:"";position:absolute;inset:0 -48px;
  background:repeating-linear-gradient(90deg,transparent 0 40px,var(--line-faint) 40px 43px);animation:stripes 1.6s linear infinite}
.fx-slash{position:fixed;z-index:30;top:-20%;bottom:-20%;left:-30vw;width:16vw;pointer-events:none;background:var(--paper);
  transform:skewX(-24deg) translateX(-20vw);opacity:0;animation:slash .55s .05s cubic-bezier(.7,0,.3,1) both}
.fx-slash::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:24%;background:var(--blade)}

.dyn .screen-head{animation:headSlam .55s cubic-bezier(.2,1.3,.35,1) both}
.dyn .screen-head::after{animation:stripeIn .45s .2s var(--ease-out) both;transform-origin:0 50%}
.dyn .screen-title{animation:titleShake .5s .15s ease-out both}
.reveal{animation:revealIn .55s cubic-bezier(.2,1.25,.4,1) backwards;animation-delay:calc(.22s + var(--d,0) * 90ms)}

/* Flèches LB / RB */
.lbrb{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .3rem;background:none;border:0;cursor:pointer;color:var(--paper);
  font:italic 900 1.5rem/1 var(--f-display);transition:transform .15s var(--ease-out)}
.lbrb svg{width:.75em;height:1em;overflow:visible}
.lbrb path{fill:none;stroke:var(--blade);stroke-width:3.2;stroke-linejoin:miter}
.lbrb .key{font-size:.7em}
.lbrb:hover path{stroke:var(--magenta)}
.lbrb:active{transform:scale(.9)}
.lbrb-txt{font:italic 800 .9rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.pd-count{font:italic 800 1.05rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-count b{font-size:1.5em;font-weight:900;color:var(--cyan)}

/* Puces et boutons */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0;padding:0}
.chips li{font:italic 700 .8rem/1 var(--f-display);letter-spacing:.09em;text-transform:uppercase;padding:.4rem .8rem;
  background:var(--ink);color:var(--paper);clip-path:polygon(9% 0,100% 0,91% 100%,0 100%)}
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.55rem;padding:.65rem 1.4rem;
  font:italic 800 1rem/1 var(--f-display);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  background:none;border:0;cursor:pointer}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);transform:skewX(-14deg);transition:background .15s,transform .15s}
.btn:hover::before{background:var(--foam);transform:skewX(-14deg) translateX(3px)}
.btn svg{width:.6em;height:.8em;overflow:visible;transition:transform .2s var(--ease-out)}
.btn path{fill:none;stroke:currentColor;stroke-width:3.4}
.btn:hover svg{transform:translateX(4px)}
.btn:focus-visible{outline:none}
.btn:focus-visible::before{box-shadow:0 0 0 3px var(--foam)}

@keyframes headIn{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes headSlam{from{opacity:0;transform:translateX(-110%) skewX(-14deg)}to{opacity:1;transform:none}}
@keyframes stripeIn{from{transform:skewX(-18deg) scaleX(0)}to{transform:skewX(-18deg) scaleX(1)}}
@keyframes titleShake{0%,100%{transform:skewX(-6deg)}30%{transform:skewX(-6deg) translateX(6px)}55%{transform:skewX(-6deg) translateX(-3px)}75%{transform:skewX(-6deg) translateX(1px)}}
@keyframes navIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes revealIn{from{opacity:0;transform:translateX(-46px) skewX(-8deg)}to{opacity:1;transform:none}}
@keyframes ghostIn{from{opacity:0;transform:translateY(-46%) rotate(192deg)}to{opacity:1;transform:translateY(-50%) rotate(192deg)}}
@keyframes ghostDrift{from{transform:translateY(-50%) rotate(192deg)}to{transform:translateY(-54%) rotate(190deg)}}
@keyframes stripes{to{transform:translateX(43px)}}
@keyframes slash{0%{opacity:1;transform:skewX(-24deg) translateX(-20vw)}100%{opacity:1;transform:skewX(-24deg) translateX(calc(170vw + 80vh))}}
@keyframes numSlam{from{opacity:0;transform:scale(1.9) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.85)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* L'intro saute quand la place manque */
@media (max-width:1000px),(max-height:740px){ .screen-intro{display:none} }
@media (max-width:860px){
  .only-wide{display:none}
  .only-narrow{display:inline}
}
@media (max-width:640px){
  .screen{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 62px)}
  .ghostword{font-size:7rem}
  .secnav{gap:.5rem}
  .secnav-tabs button{padding:.4rem .7rem;font-size:.88rem}
}