/* ==========================================================================
   COMPÉTENCES (comme dans la vidéo)
   Fond bleu clair, onglets numérotés « 01 FRONT », titre du domaine
   souligné d'un trait cyan, puis une ligne sombre par compétence avec une
   longue barre de niveau blanche segmentée qui se termine par un trait rouge.
   Les domaines défilent avec Q / E ; la liste glisse dans le sens choisi
   et les barres se remplissent.
   ========================================================================== */

#competences{
  --sk-bg:rgba(20,128,214,.74);
  --sk-row:rgba(6,14,40,.88);
  --sk-seg:#c8d6ee;
  --sk-empty:rgba(255,255,255,.07);
  --sk-edge:rgba(255,255,255,.5);
}
.dark-hour #competences{--sk-bg:rgba(30,120,70,.7);--sk-row:rgba(3,18,10,.9);--sk-seg:#cdeec0}
#competences::before{background:
  linear-gradient(90deg,var(--veil-soft) 0,transparent 65%),
  var(--sk-bg)}

.sk-body{display:flex;flex-direction:column;gap:clamp(10px,2vh,18px);max-width:58rem}

/* Onglets */
.sk-tabsbar{flex:none;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.sk-tabsbar .key{color:var(--paper)}
.skt{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.5rem;padding:.48rem 1rem .48rem .5rem;
  border:0;background:none;cursor:pointer;color:var(--paper);font:italic 800 .95rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;
  transition:transform .15s var(--ease-out)}
.skt::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sk-row);transform:skewX(-16deg);box-shadow:inset 0 0 0 1px var(--line)}
.skt-n{padding:.14rem .32rem;font:italic 800 .78rem/1 var(--f-display);color:var(--cyan)}
.skt:hover{transform:translateY(-3px)}
.skt[aria-selected="true"]::before{background:var(--tide);box-shadow:inset 0 0 0 2px var(--paper)}
.skt[aria-selected="true"] .skt-n{background:var(--paper);color:var(--ink)}
.skt:focus-visible{outline:none}
.skt:focus-visible::before{box-shadow:0 0 0 3px var(--foam)}

/* Titre du domaine */
.sk-head{flex:none;display:flex;align-items:center;gap:1rem}
.sk-title{margin:0;font:italic 900 clamp(1.3rem,2.4vw,1.75rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.05em;color:var(--paper);
  text-shadow:0 2px 0 var(--shadow);transform:skewX(-6deg)}
.sk-head::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);box-shadow:0 0 8px var(--cyan)}
.sk-body[data-dir] .sk-title{animation:titleSwap .35s var(--ease-out)}

/* Lignes */
.sk-panels{flex:1;min-height:0}
.sk-rows{list-style:none;margin:0;padding:0 1rem 0 0;display:grid;gap:clamp(6px,1.3vh,12px)}
.skr{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:1.6rem;
  padding:clamp(.6rem,1.6vh,.95rem) 1.6rem clamp(.6rem,1.6vh,.95rem) 1.5rem;transition:transform .16s var(--ease-out);
  animation:skNext .5s cubic-bezier(.2,1.25,.4,1) backwards;animation-delay:calc(var(--i) * 65ms)}
.sk-body[data-dir="prev"] .skr{animation-name:skPrev}
.skr::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sk-row);transform:skewX(-12deg)}
.skr::after{content:"";position:absolute;left:.35rem;top:14%;bottom:14%;width:3px;background:var(--cyan);transform:skewX(-14deg)}
.skr:hover{transform:translateX(8px)}
.skr:hover .skr-name{color:var(--cyan)}
.skr-name{min-width:0;font:italic 500 clamp(1rem,1.5vw,1.15rem)/1.3 var(--f-body);color:var(--paper);transition:color .12s}
.skr-bar{position:relative;height:13px;background:var(--sk-empty);box-shadow:inset 0 0 0 1px var(--sk-edge);transform:skewX(-22deg)}
.skr-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--lv) * 10%);transform-origin:0 50%;
  background:repeating-linear-gradient(90deg,var(--paper) 0 13px,var(--sk-seg) 13px 15px);
  animation:barFill .75s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(.18s + var(--i) * 70ms)}
.skr-bar i::after{content:"";position:absolute;right:-2px;top:-2px;bottom:-2px;width:4px;background:var(--blade)}

@keyframes skNext{from{opacity:0;transform:translateX(60px) skewX(-8deg)}to{opacity:1}}
@keyframes skPrev{from{opacity:0;transform:translateX(-60px) skewX(8deg)}to{opacity:1}}
@keyframes barFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes titleSwap{from{opacity:0;transform:translateY(10px) skewX(-6deg)}to{opacity:1;transform:skewX(-6deg)}}

@media (hover:none){ .sk-tabsbar .key{display:none} }
@media (max-width:640px){
  .skt{padding:.42rem .75rem .42rem .4rem;font-size:.86rem}
  .skr{grid-template-columns:minmax(0,1fr);gap:.45rem;padding:.6rem 1.2rem .7rem 1.3rem}
  .skr-bar{height:10px}
}