/* ============================================================================
   SKLD · DIRECTION v5 « PIERRE » — /login : UNE PORTE.

   Le mot géant est au sol, derrière ; un monolithe noir en arche se tient devant
   et le coupe ; dedans : le logo chrome, une phrase, un bouton. Deux rochers au pied.
   Sol clair : rien sur la page que cette porte.
   ========================================================================= */
.lg5{position:relative;isolation:isolate;overflow:hidden;min-height:max(720px,100vh);margin-top:calc(-1 * var(--hdr-h));
  display:grid;place-items:center;padding:calc(var(--hdr-h) + 56px) var(--gut) 72px;color:#0a0a0a;
  border-radius:0 0 clamp(22px,2.6vw,38px) clamp(22px,2.6vw,38px);
  background:radial-gradient(60% 50% at 50% 38%,#eff1ef,transparent 70%),radial-gradient(60% 60% at 0 100%,#bcc1c0,transparent 66%),#d7d9d6}
.lg5::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--v5-grain);filter:invert(1);opacity:.2}
.lg5__mot{position:absolute;z-index:1;left:0;right:0;top:50%;margin:0;text-align:center;white-space:nowrap;font-size:16vw;color:#0a0a0a;transform:translateY(-50%);
  -webkit-mask:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.18) 100%);mask:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.18) 100%)}
.lg5__mot > span{display:inline-block}
.lg5__hud{position:absolute;z-index:5;left:max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut)));top:112px;display:grid;gap:3px}
.lg5 .v5-rel{color:rgba(10,10,10,.62)}
.lg5__croix{z-index:5;right:max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut)));top:116px}
.lg5 .v5-croix::before,.lg5 .v5-croix::after{background:#0a0a0a}
.lg5__roche{position:absolute;z-index:4;height:auto;pointer-events:none;transform:translate3d(0,var(--fy,0px),0) rotate(var(--rot,0deg));filter:drop-shadow(0 30px 26px rgba(0,0,0,.36))}
.lg5__roche--a{--rot:-10deg;left:calc(50% + 150px);bottom:9%;width:clamp(170px,19vw,300px)}
.lg5__roche--b{--rot:24deg;right:calc(50% + 190px);bottom:15%;width:clamp(90px,10vw,160px);filter:blur(2px) drop-shadow(0 20px 18px rgba(0,0,0,.3))}

/* la porte : un monolithe en arche, épais, qui porte une ombre longue */
.lg5__seuil{position:relative;z-index:3;width:min(430px,100%)}
.lg5__seuil::before{content:"";position:absolute;z-index:-1;left:8%;right:-46%;bottom:-18px;height:64px;pointer-events:none;
  background:radial-gradient(60% 100% at 34% 0,rgba(0,0,0,.42),transparent 72%);filter:blur(12px);transform:skewX(-28deg)}
.lg5__porte{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:46px 30px 26px;border-radius:215px 215px 26px 8px;color:#e8e9e4;
  background:url("/static/players/roche.webp") center/460px,linear-gradient(180deg,#1b1b1b,#070707);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 2px 0 rgba(255,255,255,.14),0 0 0 6px rgba(10,10,10,.07),
    0 1px 0 #2b2b2b,0 9px 0 #040404,0 10px 0 rgba(255,255,255,.06),0 60px 70px -38px rgba(0,0,0,.72)}
.lg5__porte::before{content:"";position:absolute;inset:10px;z-index:-1;border-radius:205px 205px 18px 4px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.lg5 .lg5__porte .v5-rel{color:rgba(232,233,228,.6)}
.lg5__logo{display:grid;place-items:center;width:clamp(150px,44%,190px);aspect-ratio:1;margin-bottom:22px;border-radius:50%;overflow:hidden;background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 8px rgba(255,255,255,.03),0 24px 40px -20px #000}
.lg5__logo img{width:134%;height:134%;max-width:none;object-fit:cover;mix-blend-mode:screen;transition:transform 1400ms var(--v5-sortie)}
.lg5__porte:hover .lg5__logo img{transform:scale(1.07) rotate(-4deg)}
.lg5__eye{display:flex;align-items:center;gap:10px}
.lg5__eye::before,.lg5__eye::after{content:"";width:18px;height:1px;background:currentColor;opacity:.6}
.lg5__dev{margin-top:14px;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.lg5__lead{margin:16px 0 0;max-width:34ch;font-size:15px;line-height:1.6;color:rgba(232,233,228,.74)}
.lg5__form{display:grid;gap:10px;width:100%;margin-top:22px;text-align:left}
.lg5__form label{font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:rgba(232,233,228,.6)}
body.v5 .lg5__form input{width:100%;min-height:54px;padding:0 16px;font-family:var(--f-ui);font-size:16px}
body.v5 .lg5 .lg5__cta{width:100%;min-height:62px;margin-top:22px;padding:0 10px 0 24px;justify-content:space-between;font-size:16.5px;border-radius:19px 19px 19px 6px}
body.v5 .lg5 .lg5__form .lg5__cta{margin-top:6px}
body.v5 .lg5 .lg5__cta .btn-ico{width:42px;height:42px;border-radius:13px}
.lg5__pied{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;padding-top:16px;width:100%;border-top:1px solid rgba(232,233,228,.1);text-align:left}
.lg5__pied i{flex:none;width:6px;height:6px;border-radius:50%;background:#89f421}

@media (max-width:900px){
  .lg5{min-height:0;padding:116px var(--gut) 56px;display:block}
  .lg5__mot{top:142px;transform:none}
  .lg5__hud{top:84px}
  .lg5__croix{display:none}
  .lg5__seuil{margin:70px auto 0}
  .lg5__logo{width:118px;margin-bottom:16px}
  .lg5__lead{margin-top:12px;font-size:14.5px}
  .lg5__form{margin-top:16px}
  .lg5__roche--a{z-index:2;left:auto;right:-9%;top:236px;bottom:auto;width:38vw}
  .lg5__roche--b{display:none}
  .lg5__porte{border-radius:44vw 44vw 24px 8px;padding:30px 22px 22px}
  .lg5__porte::before{border-radius:42vw 42vw 16px 4px}
}
@media (prefers-reduced-motion:reduce){
  .lg5__logo img{transition:none}
}

/* --- la porte devant le col : le plan de la vallée tient tout l'écran, le mot est une lumière dans la brume */
.lg5.lg5--scene{background:#7f8582}
.lg5--scene::after{filter:none;opacity:.1;mix-blend-mode:overlay}
.lg5__plan{position:absolute;left:0;top:-3%;z-index:0;width:100%;height:106%;object-fit:cover;object-position:50% 46%;pointer-events:none;
  transform:translate3d(0,var(--fy,0px),0) scale(1.03);will-change:transform}
.lg5__plan--film{opacity:0;transition:opacity 1.6s ease}
.lg5__plan--film.is-pret{opacity:1}
.lg5--scene .lg5__mot{color:#fff;mix-blend-mode:overlay;opacity:.96}
.lg5--scene .lg5__hud{color:rgba(238,240,235,.88);text-shadow:0 1px 14px rgba(6,8,7,.6)}
.lg5--scene .lg5__croix::before,.lg5--scene .lg5__croix::after{background:#eef0eb}
.lg5--scene .lg5__seuil::before{display:none}
@media (prefers-reduced-motion:reduce){ .lg5__plan{transform:scale(1.03)} }

/* --- LE CADRE DE VERRE (remplace l'arche noire quand la page a sa scène) -------------------------------------------
   Refusé le 08/10 : l'arche noire opaque (« le cadre, je le trouve pas très beau »). Ici : une plaque de verre sombre,
   rectangle arrondi à double lisière (un jonc de chrome dehors, un filet clair dedans), qui laisse passer la vallée et
   la balise, floues. Le sigle chrome est posé à cheval sur le bord haut ; quatre repères de visée tiennent le cadre. */
.lg5--scene .lg5__seuil{width:min(452px,100%);margin-top:clamp(40px,7vh,84px)}
.lg5--scene .lg5__seuil::after{content:"";position:absolute;inset:-18px;z-index:-1;pointer-events:none;
  background:
    linear-gradient(#eef0eb,#eef0eb) 0 0/18px 1.5px,linear-gradient(#eef0eb,#eef0eb) 0 0/1.5px 18px,
    linear-gradient(#eef0eb,#eef0eb) 100% 0/18px 1.5px,linear-gradient(#eef0eb,#eef0eb) 100% 0/1.5px 18px,
    linear-gradient(#eef0eb,#eef0eb) 0 100%/18px 1.5px,linear-gradient(#eef0eb,#eef0eb) 0 100%/1.5px 18px,
    linear-gradient(#eef0eb,#eef0eb) 100% 100%/18px 1.5px,linear-gradient(#eef0eb,#eef0eb) 100% 100%/1.5px 18px;
  background-repeat:no-repeat;opacity:.7}
.lg5--scene .lg5__porte{overflow:visible;padding:80px 34px 26px;border-radius:30px 30px 30px 8px;color:#eef0eb;
  background:linear-gradient(180deg,rgba(20,24,22,.5) 0,rgba(8,10,9,.72) 58%,rgba(5,6,5,.84) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 -22px 40px -26px rgba(137,244,33,.18),
    0 40px 70px -34px rgba(4,6,5,.8),0 12px 24px -14px rgba(4,6,5,.6)}
/* le jonc de chrome : un contour en dégradé, dessiné par masque (rien à l'intérieur) */
.lg5--scene .lg5__porte::before{inset:-5px;z-index:-1;border-radius:35px 35px 35px 13px;padding:2px;box-shadow:none;
  background:linear-gradient(142deg,#f6f8f4 0,#8d938f 16%,#2b2f2d 34%,#c9cec9 52%,#3a3f3c 70%,#eef1ec 88%,#7c827e 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lg5--scene .lg5__porte::after{content:"";position:absolute;left:34px;right:34px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.7) 30%,rgba(255,255,255,.7) 70%,rgba(255,255,255,0))}
.lg5--scene .lg5__logo{position:absolute;z-index:2;left:50%;top:0;display:grid;place-items:center;width:108px;aspect-ratio:1;margin:0;translate:-50% -50%;
  border-radius:50%;overflow:hidden;background:radial-gradient(120% 120% at 30% 18%,#2a2e2c,#070807 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 2.5px #0a0c0b,0 0 0 4px rgba(238,241,236,.8),
    0 20px 32px -12px rgba(4,6,5,.85)}
.lg5--scene .lg5__logo img{position:absolute;left:50%;top:50%;width:182px;height:182px;max-width:none;translate:-50% -50%;mix-blend-mode:normal;filter:none}
.lg5--scene .lg5__porte:hover .lg5__logo img{transform:scale(1.06) rotate(-3deg)}
.lg5--scene .lg5__eye{color:#fff}
.lg5.lg5--scene .lg5__porte .v5-rel{color:rgba(238,240,235,.82)}
.lg5--scene .lg5__lead{color:rgba(238,240,235,.9);margin-top:14px}
.lg5--scene .lg5__dev{background:rgba(238,240,235,.1);box-shadow:inset 0 0 0 1px rgba(238,240,235,.22)}
body.v5 .lg5--scene .lg5__form input{background:rgba(238,240,235,.08);border:1px solid rgba(238,240,235,.24);color:#fff;border-radius:16px 16px 16px 5px}
body.v5 .lg5--scene .lg5__form input::placeholder{color:rgba(238,240,235,.56)}
.lg5--scene .lg5__form label{color:rgba(238,240,235,.82)}
body.v5 .lg5.lg5--scene .lg5__cta{color:#0a0a0a;background:linear-gradient(180deg,#ffffff,#dfe2dd);border-radius:18px 18px 18px 6px}
.lg5--scene .lg5__pied{border-top-color:rgba(238,240,235,.18)}
@media (max-width:900px){
  .lg5--scene .lg5__seuil{margin:150px auto 0}
  .lg5--scene .lg5__seuil::after{inset:-10px}
  .lg5--scene .lg5__porte{border-radius:26px 26px 26px 8px;padding:72px 22px 22px}
  .lg5--scene .lg5__porte::before{border-radius:31px 31px 31px 13px}
  .lg5--scene .lg5__logo{width:96px}
  .lg5--scene .lg5__logo img{width:162px;height:162px}
  .lg5--scene .lg5__mot{top:118px}
}

/* --- LA MASCOTTE À LA PORTE : elle se tient à gauche du cadre, tournée vers lui ; le cadre glisse à droite et passe
   devant son épaule (le verre la floute). Au téléphone, elle dépasse derrière le bord haut du cadre. */
.lg5__masc{--masc-x:calc(50% - clamp(190px,14vw,230px));--masc-h:min(77vh,690px,52vw)}
.lg5--masc .lg5__seuil{translate:clamp(150px,15.6vw,250px) 0}
@media (max-width:900px){
  .lg5__masc{--masc-x:50%;--masc-h:268px;bottom:auto;top:112px}
  .lg5__masc::before{display:none}
  .lg5--masc .lg5__seuil{translate:none;margin-top:212px}
  .lg5--masc .lg5__mot{top:124px}
}

/* --- LE MÉDAILLON : le logo 2D, blanc, dans son halo lime (banque .sg5) — le rendu chrome du logo est banni. */
.lg5__logo .sg5{--sg:66px;position:absolute;left:50%;top:50%;translate:-50% -50%}
@media (max-width:900px){ .lg5__logo .sg5{--sg:58px} }