/* =====================================================================
   PARTENAIRES v5 — sous l'en-tête et le module DEK DEV : un mur de plaques.
   1. La plaque de l'équipementier : pierre noire rivetée, un mot gravé en fond, le logo en noir
      et blanc sur une pastille de pierre claire (ses couleurs d'origine ne sont pas celles de la
      maison), le code en touche blanche qu'on copie d'un clic (#sklcode, lu par le script).
   2. « Pourquoi SKLD » : trois lignes réglées sur dalle claire.
   3. La plaque libre : la masse lime de la page, texte noir, rivets — elle porte le contact.
   Les anciennes feuilles (logoloop, glass, page-sponsors) ne sont plus liées.
   ===================================================================== */
.sp5{padding-bottom:0}
.sp5-rivet{position:absolute;z-index:3;width:14px;height:14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,#fafbf8,#9a9d98 46%,#3b3d3a 78%);box-shadow:0 1px 0 rgba(255,255,255,.16),0 2px 3px rgba(0,0,0,.7)}
.sp5-rivet::after{content:"";position:absolute;left:3px;right:3px;top:6px;height:2px;border-radius:1px;background:rgba(0,0,0,.6);transform:rotate(-32deg)}
.sp5-rivet--a{left:16px;top:16px}.sp5-rivet--b{right:16px;top:16px}.sp5-rivet--c{left:16px;bottom:16px}.sp5-rivet--d{right:16px;bottom:16px}
.sp5-rivet--b::after{transform:rotate(48deg)}.sp5-rivet--c::after{transform:rotate(12deg)}.sp5-rivet--d::after{transform:rotate(-70deg)}
body.v5 .sp5-eye{margin:0 0 10px;font-family:var(--f-mono);font-weight:600;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(10,10,10,.62)}

/* ------------------------------------------------------------ la plaque de l'équipementier */
.sp5-plaque{position:relative;isolation:isolate;padding:clamp(44px,4.6vw,70px) clamp(22px,3.6vw,56px) clamp(40px,4.4vw,64px);border-radius:38px 38px 38px 10px;color:#f1f1ec;
  background:url("/static/players/roche.webp") center/520px,linear-gradient(180deg,#1b1b1b,#050505);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1.5px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.8),0 0 0 6px rgba(10,10,10,.07),0 70px 90px -60px rgba(0,0,0,.85)}
/* le mot gravé : ton sur ton, une arête claire en bas, une ombre en haut */
.sp5-plaque__grave{position:absolute;z-index:-1;left:clamp(18px,3vw,48px);right:0;bottom:clamp(-10px,-.6vw,-4px);overflow:hidden;white-space:nowrap;
  font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(64px,12.6vw,190px);line-height:.8;letter-spacing:-.045em;text-transform:uppercase;color:#0b0b0b;
  text-shadow:0 1.5px 0 rgba(255,255,255,.1),0 -1.5px 1px rgba(0,0,0,.95);-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 98%);mask-image:linear-gradient(90deg,#000 62%,transparent 98%)}
.sp5-plaque__balles{position:absolute;z-index:0;right:clamp(-26px,-1.4vw,-8px);bottom:clamp(-54px,-3.4vw,-20px);width:clamp(130px,19vw,280px);height:auto;pointer-events:none;will-change:transform;
  filter:drop-shadow(0 26px 22px rgba(0,0,0,.55))}
.sp5-plaque__tete{position:absolute;left:clamp(40px,4.6vw,64px);right:clamp(40px,4.6vw,64px);top:16px;display:flex;justify-content:space-between;gap:16px;
  font-family:var(--f-mono);font-weight:600;font-size:10px;line-height:14px;letter-spacing:.07em;text-transform:uppercase;color:rgba(241,241,236,.6)}
.sp5-plaque__tete span:last-child{white-space:nowrap}
.sp5-plaque__corps{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);align-items:start;gap:clamp(22px,4vw,64px)}
.sp5-plaque__id{display:grid;gap:14px}
.sp5-logo{display:grid;place-items:center;aspect-ratio:1;padding:9%;border-radius:30px 30px 30px 8px;background:radial-gradient(120% 120% at 30% 16%,#f3f4f1,#b9bcb7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -8px 16px rgba(0,0,0,.14),0 26px 34px -22px #000}
.sp5-logo img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.18)}
/* le code : une touche blanche, on appuie pour copier */
.sp5-offre{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:14px 14px 14px 16px;border-radius:22px 22px 22px 6px;background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.1)}
.sp5-offre__k{grid-column:1 / -1;font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:rgba(241,241,236,.66)}
.sp5-offre b{display:block;padding:10px 14px 8px;border-radius:14px 14px 14px 4px;font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(28px,3vw,40px);line-height:1;letter-spacing:-.04em;text-align:center;
  color:#0a0a0a;background:linear-gradient(180deg,#ffffff,#dfe0dc);box-shadow:inset 0 -3px 0 rgba(10,10,10,.16),0 12px 18px -10px #000;cursor:pointer;user-select:all;
  transition:transform 180ms var(--v5-masse),box-shadow 180ms var(--v5-masse),background 240ms var(--v5-masse)}
.sp5-offre b:hover{transform:translate3d(0,-2px,0)}
.sp5-offre b:active{transform:translate3d(0,2px,0);box-shadow:inset 0 -1px 0 rgba(10,10,10,.16),0 4px 8px -6px #000}
.sp5-offre b:focus-visible{outline:2px solid #f1f1ec;outline-offset:3px}
.sp5-offre b.is-copied{background:var(--v5-lime)}
.sp5-offre__cp{font-family:var(--f-mono);font-weight:700;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:rgba(241,241,236,.7)}
body.v5 .sp5-plaque .sp5-eye{color:rgba(241,241,236,.62)}
body.v5 .sp5-plaque__nom{margin:0;font-size:5vw;line-height:.86;white-space:nowrap;color:#f1f1ec;background:none;-webkit-text-fill-color:currentColor}
.sp5-plaque__nom > span{display:inline-block}
.sp5-plaque__txt{position:relative;z-index:1;min-width:0}
body.v5 .sp5-plaque__desc{margin:clamp(14px,1.6vw,22px) 0 0;max-width:46ch;font-family:var(--f-display);font-weight:500;font-size:clamp(16px,1.5vw,20px);line-height:1.36;letter-spacing:-.012em;color:rgba(241,241,236,.86)}
.sp5-faits{list-style:none;margin:clamp(20px,2.6vw,36px) 0 0;padding:0;max-width:640px;border-bottom:1px solid rgba(241,241,236,.16)}
.sp5-faits li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;gap:12px;padding:13px 0;border-top:1px solid rgba(241,241,236,.16)}
.sp5-faits li span{font-family:var(--f-chiffre);font-weight:800;font-size:24px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(241,241,236,.5)}
body.v5 .sp5-faits p{margin:0;max-width:none;font-family:var(--f-ui);font-size:15px;line-height:1.5;color:rgba(241,241,236,.74)}
body.v5 .sp5-faits strong{font-weight:700;color:#f1f1ec}

/* ------------------------------------------------------------ pourquoi SKLD : lignes réglées sur dalle claire */
.sp5-grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:clamp(16px,2.4vw,32px)}
.sp5-dalle{position:relative;min-width:0;padding:clamp(20px,2.6vw,38px) clamp(16px,2.6vw,38px) clamp(14px,1.8vw,24px);border-radius:36px 36px 10px 36px;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)}
.sp5-tete{padding-bottom:clamp(16px,2vw,26px)}
body.v5 .sp5-h2{margin:0;font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(26px,3.5vw,52px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;color:#0a0a0a;
  background:none;-webkit-text-fill-color:currentColor}
.sp5-lignes{list-style:none;margin:0;padding:0;border-bottom:1.5px solid #0a0a0a}
.sp5-ligne{display:grid;grid-template-columns:clamp(74px,9vw,128px) minmax(0,1fr);align-items:start;gap:4px clamp(12px,2vw,28px);padding:clamp(16px,2vw,26px) 0;border-top:1.5px solid #0a0a0a}
.sp5-ligne__n{grid-row:1 / span 2;font-family:var(--f-chiffre);font-weight:800;font-size:clamp(64px,7.4vw,108px);line-height:.76;color:transparent;-webkit-text-stroke:1.5px rgba(10,10,10,.55);
  transition:color 520ms var(--v5-masse),-webkit-text-stroke-color 520ms var(--v5-masse)}
.sp5-ligne:hover .sp5-ligne__n{color:#0a0a0a;-webkit-text-stroke-color:#0a0a0a}
body.v5 .sp5-ligne__t{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.3vw,32px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;color:#0a0a0a}
body.v5 .sp5-ligne__p{margin:6px 0 0;max-width:48ch;font-family:var(--f-ui);font-size:15px;line-height:1.55;color:rgba(10,10,10,.76)}

/* ------------------------------------------------------------ la plaque libre : la masse lime, le contact */
.sp5-libre{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:start;gap:14px;min-width:0;padding:clamp(44px,4.4vw,62px) clamp(22px,2.8vw,40px) clamp(40px,4vw,56px);
  border-radius:10px 38px 38px 38px;color:#0a0a0a;scroll-margin-top:96px;
  background:radial-gradient(90% 70% at 18% 0%,#b6fd66,rgba(182,253,102,0) 70%),linear-gradient(170deg,#98f634,#7de514 76%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(10,10,10,.22),0 0 0 6px rgba(10,10,10,.06),0 60px 80px -56px rgba(0,0,0,.7)}
.sp5-libre::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--v5-grain);filter:invert(1);opacity:.22}
body.v5 .sp5-libre__eye{margin:0;font-family:var(--f-mono);font-weight:700;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(10,10,10,.74)}
body.v5 .sp5-libre__t{margin:0;font-size:4vw;line-height:.86;white-space:nowrap;color:#0a0a0a;background:none;-webkit-text-fill-color:currentColor}
.sp5-libre__t > span{display:inline-block}
.sp5-libre__ligne{min-width:0}
/* l'emplacement vide : la place du prochain logo */
.sp5-libre__vide{display:block;height:clamp(74px,9vw,128px);margin:6px 0 4px;border-radius:20px 20px 20px 6px;
  background:repeating-linear-gradient(-55deg,rgba(10,10,10,.34) 0 1.5px,transparent 1.5px 10px);box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.7)}
body.v5 .sp5-libre__p{margin:0;max-width:44ch;font-family:var(--f-ui);font-weight:500;font-size:15px;line-height:1.55;color:rgba(10,10,10,.86)}
.sp5-libre__cta{margin-top:6px}
body.v5 .sp5-libre .btn.pri{color:#f1f1ec;background:linear-gradient(180deg,#1d1d1d,#050505);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 14px 22px -12px rgba(0,0,0,.7)}
body.v5 .sp5-libre .btn.pri .btn-ico{color:#0a0a0a;background:#f1f1ec}
.sp5-libre .sp5-rivet{background:radial-gradient(circle at 34% 30%,#3a3c39,#0c0c0c 70%);box-shadow:0 1px 0 rgba(255,255,255,.4)}
.sp5-libre .sp5-rivet::after{background:rgba(255,255,255,.3)}

@media (max-width:980px){
  .sp5-grille{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sp5-plaque{border-radius:30px 30px 30px 8px;padding-top:70px}
  .sp5-plaque__corps{grid-template-columns:1fr}
  .sp5-plaque__id{grid-template-columns:118px minmax(0,1fr);align-items:stretch}
  .sp5-logo{border-radius:22px 22px 22px 6px}
  .sp5-offre{align-content:center}
  .sp5-offre__cp{display:none}
  .sp5-offre b{grid-column:1 / -1}
  .sp5-plaque__tete span:last-child{display:none}
  .sp5-plaque__grave{font-size:20vw}
  .sp5-dalle{border-radius:28px 28px 8px 28px}
  .sp5-libre{border-radius:8px 30px 30px 30px}
}
@media (prefers-reduced-motion:reduce){
  .sp5-offre b,.sp5-ligne__n{transition:none}
}

/* « Nous écrire » : le courriel toujours, le Discord en plus quand son invitation est réglée ; l'adresse se lit
   en clair sous les boutons (fondateur, 08/10/2026 : « contact.warzup@gmail.com pour nous contacter aussi »). */
.sp5-libre__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.sp5-libre__mail{flex-basis:100%;font-family:var(--f-mono);font-weight:600;font-size:12px;letter-spacing:.02em;color:inherit;opacity:.72;text-decoration:none}
.sp5-libre__mail:hover,.sp5-libre__mail:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:4px}