/* =====================================================================
   PRISE EN MAIN v5 — sur pierre claire.
   Les étapes sont un RAIL : une voie verticale, trois gares. Le palet (la touche lime de la page)
   descend la voie avec la lecture, le chiffre de chaque étape est un filet qui se remplit quand
   on l'atteint (skld-tutos-v5.js pose --p, --h et .is-la). Chaque étape montre son objet noir :
   l'avatar, la carte à remplir, les deux formats. Sans script, tout reste lisible (chiffres pleins).
   ===================================================================== */
.tu5-dalle{position:relative;padding:clamp(18px,2.6vw,40px) clamp(14px,2.6vw,40px) clamp(14px,2vw,28px);border-radius:36px 36px 36px 10px;color:#0a0a0a;
  background:linear-gradient(180deg,rgba(230,232,228,.94),rgba(215,217,214,.94));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 1.5px 0 rgba(255,255,255,.95),0 0 0 1px rgba(10,10,10,.1),0 0 0 6px rgba(10,10,10,.04),0 60px 80px -60px rgba(0,0,0,.55)}
.tu5-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 40px;padding-bottom:clamp(14px,1.8vw,24px);border-bottom:1.5px solid #0a0a0a}
body.v5 .tu5-eye{margin:0 0 8px;font-family:var(--f-mono);font-weight:600;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(10,10,10,.62)}
body.v5 .tu5-h2{margin:0;font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(28px,4.4vw,64px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;color:#0a0a0a;
  background:none;-webkit-text-fill-color:currentColor}
body.v5 .tu5-sub{margin:0;max-width:36ch;font-family:var(--f-ui);font-size:15px;line-height:1.55;color:rgba(10,10,10,.76)}

/* ------------------------------------------------------------ la voie et les gares */
.tu5-rail{position:relative;--x:clamp(14px,2vw,26px)}
.tu5-voie{position:absolute;z-index:1;left:var(--x);top:clamp(44px,5vw,70px);bottom:clamp(40px,6vw,90px);width:4px;margin-left:-2px;border-radius:2px;
  background:repeating-linear-gradient(180deg,rgba(10,10,10,.32) 0 6px,transparent 6px 12px)}
.tu5-voie__fait{position:absolute;inset:0;border-radius:2px;background:#0a0a0a;transform:scaleY(var(--p,0));transform-origin:50% 0;will-change:transform}
.tu5-voie__palet{position:absolute;left:50%;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--v5-lime);
  box-shadow:0 0 0 4px #0a0a0a,0 10px 16px -4px rgba(0,0,0,.6);transform:translate3d(0,calc(var(--p,0) * var(--h,0px)),0);will-change:transform}
.tu5-pas-l{list-style:none;margin:0;padding:0}
.tu5-pas{position:relative;display:grid;grid-template-columns:clamp(34px,5vw,70px) clamp(120px,15vw,214px) minmax(0,1fr) clamp(250px,29vw,390px);align-items:start;gap:0 clamp(14px,2.4vw,40px);
  padding:clamp(30px,4.4vw,64px) 0;border-bottom:1px solid rgba(10,10,10,.2)}
.tu5-pas:last-child{border-bottom:0;padding-bottom:clamp(14px,2vw,28px)}
.tu5-pas__gare{position:absolute;z-index:2;left:var(--x);top:clamp(44px,5vw,70px);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#dfe1dd;box-shadow:inset 0 0 0 3px #0a0a0a;
  transition:background 420ms var(--v5-masse),transform 520ms var(--v5-masse)}
.tu5-pas.is-la .tu5-pas__gare{background:#0a0a0a;transform:scale(1.2)}
.tu5-pas__n{grid-column:2;font-family:var(--f-chiffre);font-weight:800;font-size:clamp(110px,14.6vw,214px);line-height:.74;letter-spacing:-.01em;color:#0a0a0a;font-variant-numeric:tabular-nums;
  transition:color 620ms var(--v5-masse),-webkit-text-stroke-color 620ms var(--v5-masse)}
.v5js .tu5-pas:not(.is-la) .tu5-pas__n{color:transparent;-webkit-text-stroke:1.5px rgba(10,10,10,.5)}
.tu5-pas__c{grid-column:3;display:grid;justify-items:start;gap:12px;min-width:0;padding-top:4px}
body.v5 .tu5-pas__tag{margin:0;padding:5px 9px;border-radius:8px 8px 8px 3px;font-family:var(--f-mono);font-weight:700;font-size:10px;line-height:1;letter-spacing:.07em;text-transform:uppercase;color:#f1f1ec;background:#0a0a0a}
body.v5 .tu5-pas__t{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(24px,2.9vw,42px);line-height:.98;letter-spacing:-.03em;text-transform:uppercase;color:#0a0a0a}
body.v5 .tu5-pas__d{margin:0;max-width:44ch;font-family:var(--f-ui);font-size:15.5px;line-height:1.6;color:rgba(10,10,10,.78)}
body.v5 .tu5-pas__d b{font-weight:700;color:#0a0a0a}
.tu5-pas__lien{display:inline-flex;align-items:center;gap:12px;margin-top:6px;padding:6px 6px 6px 18px;border-radius:999px 999px 999px 10px;font-family:var(--f-ui);font-weight:600;font-size:14.5px;color:#0a0a0a;text-decoration:none;
  background:linear-gradient(180deg,#ffffff,#e7e8e4);box-shadow:inset 0 0 0 1px rgba(10,10,10,.12),0 10px 18px -12px rgba(0,0,0,.5);transition:transform 420ms var(--v5-masse)}
.tu5-pas__lien .v5-rond{width:36px;height:36px;color:#f1f1ec;background:#0a0a0a}
.tu5-pas__lien:hover{transform:translate3d(0,-2px,0)}
.tu5-pas__lien:hover .v5-rond,.tu5-pas__lien:focus-visible .v5-rond{color:#050505;background:var(--v5-lime)}
.tu5-pas__lien:focus-visible{outline:2px solid #0a0a0a;outline-offset:3px}

/* ------------------------------------------------------------ les objets */
.tu5-obj{grid-column:4;position:relative;min-width:0}
.tu5-obj--avatar,.tu5-carte,.tu5-mode{color:#f1f1ec;
  background:url("/static/players/roche.webp") center/420px,linear-gradient(180deg,#1c1c1c,#060606);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 5px rgba(10,10,10,.06),0 44px 56px -40px rgba(0,0,0,.8)}
/* 01 · l'avatar : la photo Discord devient l'identité */
.tu5-obj--avatar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;padding:18px;border-radius:30px 30px 30px 8px;transform:rotate(-2deg);
  transition:transform 700ms var(--v5-masse)}
.tu5-pas:hover .tu5-obj--avatar{transform:rotate(0deg) translate3d(0,-4px,0)}
.tu5-avatar{position:relative;display:block;width:clamp(96px,10vw,132px);aspect-ratio:1;border-radius:26px 26px 26px 6px;overflow:hidden;background:linear-gradient(180deg,#e9eae6,#bfc2bd)}
.tu5-avatar img{position:absolute;inset:6% -6% -30% -6%;width:112%;height:124%;object-fit:cover;object-position:50% 0;filter:grayscale(1) contrast(1.15)}
.tu5-avatar__cle{display:grid;gap:9px}
.tu5-avatar__cle i{display:block;height:10px;border-radius:3px;background:rgba(241,241,236,.2)}
.tu5-avatar__cle i:nth-child(1){width:86%;height:16px;background:#f1f1ec}
.tu5-avatar__cle i:nth-child(2){width:58%}
.tu5-avatar__cle i:nth-child(3){width:34%;background:repeating-linear-gradient(-55deg,rgba(241,241,236,.5) 0 1.5px,transparent 1.5px 6px)}
/* 02 · la carte à remplir : six champs, six emplacements */
.tu5-carte{list-style:none;margin:0;padding:54px 18px 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;border-radius:26px 26px 8px 26px;transform:rotate(2.4deg);
  transition:transform 700ms var(--v5-masse);position:relative}
.tu5-pas:hover .tu5-carte{transform:rotate(.4deg) translate3d(0,-4px,0)}
.tu5-carte::before{content:"";position:absolute;left:18px;top:18px;width:26px;height:20px;border-radius:5px;background:linear-gradient(135deg,#f4f5f2,#8f928e 52%,#e2e3df);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.tu5-carte::after{content:"";position:absolute;right:18px;top:22px;width:38%;height:12px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(241,241,236,.5) 0 2px,transparent 2px 5px)}
.tu5-carte li{display:grid;gap:7px;font-family:var(--f-mono);font-weight:700;font-size:10px;line-height:1.2;letter-spacing:.07em;text-transform:uppercase;color:rgba(241,241,236,.86)}
.tu5-carte li::after{content:"";display:block;height:22px;border-radius:6px 6px 6px 2px;background:repeating-linear-gradient(-55deg,rgba(241,241,236,.2) 0 1.5px,transparent 1.5px 7px);box-shadow:inset 0 0 0 1px rgba(241,241,236,.22)}
/* 03 · les deux formats */
.tu5-obj--modes{display:grid;gap:12px}
.tu5-mode{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:4px 16px;padding:16px 18px 16px 16px;border-radius:26px 26px 26px 8px}
.tu5-mode{margin-right:clamp(0px,2.2vw,30px)}
.tu5-mode + .tu5-mode{margin-left:clamp(0px,2.2vw,30px);margin-right:0;border-radius:26px 8px 26px 26px}
.tu5-mode__n{grid-row:1 / span 2;font-family:var(--f-chiffre);font-weight:800;font-size:clamp(84px,8.4vw,116px);line-height:.76;color:#f1f1ec}
.tu5-mode__k{align-self:end;font-family:var(--f-display);font-weight:700;font-size:15px;line-height:1.1;letter-spacing:-.015em;text-transform:uppercase;color:#f1f1ec}
body.v5 .tu5-mode p{margin:0;font-family:var(--f-ui);font-size:13px;line-height:1.5;color:rgba(241,241,236,.72)}

/* ------------------------------------------------------------ et après : les accès en lignes */
.tu5-apres{padding-top:0}
.tu5-dalle--liens{border-radius:36px 36px 10px 36px;padding-bottom:clamp(10px,1.4vw,18px)}
.tu5-dalle--liens .tu5-tete{border-bottom:0}
.tu5-liens{display:grid;border-bottom:1.5px solid #0a0a0a}
.tu5-ligne{position:relative;isolation:isolate;display:grid;grid-template-columns:clamp(40px,5vw,70px) minmax(0,1fr) auto;align-items:center;gap:clamp(10px,2vw,28px);padding:clamp(14px,1.7vw,22px) clamp(8px,1.2vw,18px);
  border-top:1.5px solid #0a0a0a;color:#0a0a0a;text-decoration:none;transition:color 300ms var(--v5-masse)}
.tu5-ligne::before{content:"";position:absolute;inset:0;z-index:-1;background:#0a0a0a;transform:scaleY(0);transform-origin:50% 100%;transition:transform 420ms var(--v5-masse)}
.tu5-ligne:hover,.tu5-ligne:focus-visible{color:#f1f1ec}
.tu5-ligne:hover::before,.tu5-ligne:focus-visible::before{transform:scaleY(1)}
.tu5-ligne__n{font-family:var(--f-chiffre);font-weight:800;font-size:26px;line-height:1;opacity:.6}
.tu5-ligne__t{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,3.4vw,50px);line-height:.98;letter-spacing:-.03em;text-transform:uppercase;overflow-wrap:anywhere}
.tu5-ligne .v5-rond{width:44px;height:44px;color:#f1f1ec;background:#0a0a0a}
.tu5-ligne:hover .v5-rond,.tu5-ligne:focus-visible .v5-rond{color:#050505;background:var(--v5-lime)}

/* ------------------------------------------------------------ la plaque de nuit */
.tu5-fin__in{position:relative;z-index:2;padding:clamp(24px,3.4vw,52px) clamp(20px,3.2vw,48px) clamp(24px,3vw,44px)}
.tu5-fin__mot{margin:clamp(12px,1.6vw,22px) 0 0;white-space:nowrap;font-size:7.4vw;line-height:.84;color:#f1f1ec}
.tu5-fin__mot > span{display:inline-block}
.tu5-fin__bas{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;margin-top:clamp(22px,3.4vw,54px)}
body.v5 .tu5-fin__d{margin:0;max-width:40ch;font-family:var(--f-display);font-weight:500;font-size:clamp(17px,1.7vw,23px);line-height:1.3;letter-spacing:-.015em;color:#f1f1ec}
.tu5-fin__roche{position:absolute;z-index:1;right:4%;top:-22%;width:clamp(170px,24vw,380px);height:auto;pointer-events:none;will-change:transform;filter:drop-shadow(0 30px 30px rgba(0,0,0,.6))}

/* Sur téléphone l'en-tête est haut : le film (en-tête partagé) descendait jusque sous le chapeau et
   le rendait illisible. Ici il s'arrête au-dessus du texte. (La règle ne vit que sur cette page.) */
@media (max-width:760px){
  body.v5 .e5--film .e5__film{-webkit-mask:repeating-linear-gradient(90deg,#000 0 2.5px,rgba(0,0,0,.16) 2.5px 5px),linear-gradient(180deg,#000 0,#000 22%,transparent 40%);-webkit-mask-composite:source-in;
    mask:repeating-linear-gradient(90deg,#000 0 2.5px,rgba(0,0,0,.16) 2.5px 5px),linear-gradient(180deg,#000 0,#000 22%,transparent 40%);mask-composite:intersect}
}
@media (max-width:1020px){
  .tu5-pas{grid-template-columns:clamp(34px,5vw,70px) clamp(96px,14vw,150px) minmax(0,1fr)}
  .tu5-obj{grid-column:2 / -1;margin-top:26px;max-width:460px}
}
@media (max-width:640px){
  .tu5-dalle{border-radius:28px 28px 28px 8px}
  .tu5-rail{--x:12px}
  .tu5-pas{grid-template-columns:30px minmax(0,1fr);padding-block:34px}
  .tu5-pas__n{font-size:104px}
  .tu5-pas__c{grid-column:2;margin-top:14px}
  .tu5-obj{grid-column:2;margin-top:24px}
  .tu5-voie,.tu5-pas__gare{top:36px}
  .tu5-mode{margin-right:14px}
  .tu5-mode + .tu5-mode{margin-left:14px;margin-right:0}
  .tu5-ligne .v5-rond{width:38px;height:38px}
  .tu5-fin__roche{top:-12%;right:-4%;width:150px}
  .tu5-fin__bas .btn{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .tu5-obj--avatar,.tu5-carte,.tu5-pas__n,.tu5-pas__gare,.tu5-ligne::before{transition:none}
  .tu5-voie__palet,.tu5-voie__fait{will-change:auto}
}