/* skld-tokens.css */ /* SKLD — JETONS DU SYSTÈME DE DESIGN v2 (docs/DESIGN_SYSTEM.md). Chargé EN PREMIER. Direction fixée par le fondateur : sombre, texturé, tech-noir, objets brillants (chrome, verre) ; lime · sapin · chrome · crème ; ZÉRO orange, ZÉRO emoji ; pas de capsule sur les cartes. « Garder le moteur, refaire la peau. » Les anciens noms (--bg, --cream, --green, --disp…) restent définis dans skald.css : ils POINTENT désormais sur ces jetons, rien ne casse, tout se règle ici. */ :root{ /* fonds et surfaces, nommés par élévation */ --bg-0:#060806; --bg-1:#0a0d0a; --surface-0:#0e120d; --surface-1:#141a12; --surface-2:#1a2117; /* encre */ --ink:#eefbe6; --ink-2:#98a292; --ink-3:#5a6353; /* accent = information (état, action principale), jamais décoration */ --lime:#9dff3c; --lime-soft:#c6ff6e; --lime-ink:#08110a; --pine:#0f3a12; --pine-2:#16301a; /* chrome : objets (cartes joueur, trophées, cadres) et « attention » — jamais l'ambre */ --chrome-1:#f4f6f2; --chrome-2:#c9d0c4; --chrome-3:#7d857a; /* sémantique : forme + mot + couleur, jamais la couleur seule */ --ok:var(--lime); --attention:var(--chrome-2); --danger:#f0a8a8; --danger-strong:#ff5d5d; --live:#79d0ff; /* lignes */ --line:rgba(238,251,230,.07); --line-2:rgba(238,251,230,.14); --line-strong:rgba(238,251,230,.22); /* typographie (auto-hébergée, skld-fonts.css) */ --f-display:"Clash Display","Archivo",system-ui,sans-serif; --f-ui:"General Sans","Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --f-switch:"Tanker","Clash Display",system-ui,sans-serif; /* « SWITCH » et numéros d'escouade uniquement */ /* échelle : UI 1,2 · display 1,333 */ --fs-0:12px; --fs-1:13px; --fs-2:15px; --fs-3:18px; --fs-4:22px; --fd-1:clamp(26px,3.2vw,36px); --fd-2:clamp(34px,4.6vw,48px); --fd-3:clamp(44px,6.4vw,64px); --fd-4:clamp(56px,9vw,96px); /* espacement 4 px */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --section:clamp(64px,9vw,140px); /* rayons : 8 champs/badges · 14 cartes · 22 cartes premium (double bezel) · pill = boutons seulement */ --r-1:8px; --r-2:14px; --r-3:22px; --r-pill:999px; --bezel:6px; /* ombres : jamais de drop shadow dure */ --sh-1:inset 0 1px 0 rgba(255,255,255,.04); --sh-2:0 20px 60px rgba(0,0,0,.45); --sh-glow:0 0 24px rgba(157,255,60,.18); /* mouvement : une courbe pour les états, une pour les apparitions */ --ease:cubic-bezier(.32,.72,0,1); --ease-out:cubic-bezier(.16,1,.3,1); --t-1:120ms; --t-2:240ms; --t-3:600ms; --t-4:900ms; /* couches */ --z-nav:40; --z-overlay:60; --z-modal:80; --z-toast:90; /* grille */ --maxw:1180px; --gut:24px; } @media (prefers-reduced-motion:reduce){:root{--t-1:0ms;--t-2:0ms;--t-3:0ms;--t-4:0ms}} /* ICÔNES — sprite Lucide (ISC) /static/skld-icons.svg, trait 1,75, taille = 1em ou l'attribut */ .skic{display:inline-block;width:1em;height:1em;vertical-align:-.15em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none} .skic.lg{width:20px;height:20px} .skic.sm{width:14px;height:14px} /* skld-fonts.css */ /* SKLD — POLICES AUTO-HÉBERGÉES. Aucune requête vers Google ni Fontshare : les fichiers sont servis depuis /static/fonts (voir docs/TYPOGRAPHY_STUDY.md, recommandation A). Clash Display, General Sans, Tanker : Indian Type Foundry, ITF Free Font License v2.0 (auto-hébergement explicitement permis, §01 ; texte : static/fonts/LICENSE-ITF-FFL.txt). JetBrains Mono : SIL Open Font License 1.1 (police variable, sous-ensembles latin). */ @font-face{font-family:"Clash Display";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/clash-display-400.woff2) format("woff2")} @font-face{font-family:"Clash Display";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/clash-display-500.woff2) format("woff2")} @font-face{font-family:"Clash Display";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/clash-display-600.woff2) format("woff2")} @font-face{font-family:"Clash Display";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/clash-display-700.woff2) format("woff2")} @font-face{font-family:"General Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/general-sans-400.woff2) format("woff2")} @font-face{font-family:"General Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/general-sans-500.woff2) format("woff2")} @font-face{font-family:"General Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/general-sans-600.woff2) format("woff2")} @font-face{font-family:"General Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/general-sans-700.woff2) format("woff2")} @font-face{font-family:"Tanker";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/tanker-400.woff2) format("woff2")} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/static/fonts/jetbrains-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/static/fonts/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* skald.css */ /* ═══════════════════════════ [hidden] DOIT CACHER ═══════════════════════════ Le navigateur applique `display:none` à [hidden] depuis sa FEUILLE PAR DÉFAUT — la plus faible qui soit. Toute règle d'auteur qui pose un `display` sur la même classe gagne et neutralise silencieusement l'attribut. Ce projet compte 180 classes qui posent un display : le piège s'est déjà refermé deux fois (le dialogue de signalement s'affichait en permanence à l'arrivée sur le salon ; « aucun message pour l'instant » restait au-dessus de la conversation). Cette règle le referme définitivement. C'est l'un des rares `!important` justifiés : `hidden` est une intention explicite du gabarit, elle doit l'emporter sur toute mise en forme. Un élément qui a besoin d'être visible ne doit pas porter l'attribut, tout simplement. */ [hidden]{ display:none !important; } :root{ --bg:#060806; --bg2:#0a0d0a; --panel:#0e120d; --panel2:#141a12; --raise:#1a2117; --cream:#eefbe6; --muted:#828b7b; --dim:#4a5142; --green:#9dff3c; --lime:#c6ff6e; --green-ink:#08110a; --line:rgba(238,251,230,.07); --line2:rgba(238,251,230,.14); --pending:#79d0ff; --valid:#57d15a; --hot:#ff4d4d; --info:#7cc6ff; /* TYPOGRAPHIE v2 (docs/TYPOGRAPHY_STUDY.md, recommandation A) : les anciens noms pointent sur les jetons de skld-tokens.css — tout le site change de peau d'un coup. */ --disp:var(--f-display); /* héros/titres — Clash Display */ --head:var(--f-display); /* sous-titres/headings */ --body:var(--f-ui); /* texte — General Sans */ --mono:var(--f-mono); /* JetBrains Mono */ --switch:var(--f-switch); /* « SWITCH », numéros d'escouade — Tanker */ --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1); --gut:clamp(18px,4vw,60px); --maxw:1320px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--cream);font-family:var(--body);line-height:1.55;font-weight:400; -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden} /* fond : mesh-gradient vivant (orbes qui dérivent) + grain fixe */ .bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .bgfx .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;mix-blend-mode:screen;will-change:transform} .bgfx .o1{width:820px;height:820px;right:-10%;top:-18%;background:radial-gradient(circle,rgba(157,255,60,.4),transparent 62%);animation:drift1 24s var(--ease) infinite alternate} .bgfx .o2{width:620px;height:620px;left:-8%;top:44%;background:radial-gradient(circle,rgba(90,210,120,.3),transparent 62%);animation:drift2 30s var(--ease) infinite alternate} /* PERF (mesuré, cause n°1 des ralentissements du site) : ces keyframes contenaient un scale(). Redimensionner un calque composité de 878x878 force le GPU à le RE-RASTÉRISER à chaque frame. Mesure sur /tournois : 2 fps avec, 41 fps en figeant l'animation, 60 fps sans les orbes. C'est aussi ce qui faisait TREMBLER l'affichage sur les GPU plus faibles (Windows) au lieu de simplement ralentir. Translation seule = le calque est juste déplacé, coût quasi nul, rendu identique. */ @keyframes drift1{to{transform:translate3d(-90px,70px,0)}} @keyframes drift2{to{transform:translate3d(80px,-60px,0)}} body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)} .mono{font-family:var(--mono)} .num{font-family:var(--head);font-weight:800;font-variant-numeric:tabular-nums lining-nums} h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.9;text-wrap:balance} h2,h3,h4{font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.96;text-wrap:balance} a{color:inherit;text-decoration:none} .eye{display:inline-flex;align-items:center;gap:.7em;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--green)} .eye::before{content:"";width:1.7em;height:2px;background:linear-gradient(90deg,var(--green),transparent);box-shadow:0 0 8px rgba(157,255,60,.5)} .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} main{position:relative;z-index:2;min-height:60vh} header{position:sticky;top:0;z-index:40;backdrop-filter:blur(16px) saturate(1.3); background:linear-gradient(180deg,rgba(6,8,6,.92),rgba(6,8,6,.45));border-bottom:1px solid var(--line)} .bar{display:flex;align-items:center;gap:24px;height:66px} .brand{display:flex;align-items:center;gap:11px} .brand svg{width:26px;height:26px;color:var(--green);filter:drop-shadow(0 0 10px rgba(157,255,60,.45))} .brand .t{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.14em;text-transform:uppercase} nav.main{display:flex;gap:2px;margin-left:8px} nav.main a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); padding:9px 13px;border-radius:9px;transition:color .2s var(--ease),background .2s var(--ease)} nav.main a:hover{color:var(--cream);background:rgba(238,251,230,.04)} nav.main a.on{color:var(--green)} .sp{flex:1} /* Burger + menu mobile (masqués sur desktop) */ .burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center; margin-left:6px;border:1px solid var(--line2);border-radius:11px;background:rgba(238,251,230,.03);cursor:pointer} .burger span{display:block;width:19px;height:2px;border-radius:2px;background:var(--cream); transition:transform .34s var(--ease),opacity .2s var(--ease)} .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.x span:nth-child(2){opacity:0} .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mnav{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 34px; overflow-x:hidden;overflow-y:auto; background:rgba(6,8,7,.86);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px); opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s} .mnav.open{opacity:1;visibility:visible;transform:none} .mnav a{font-family:var(--head);font-size:clamp(20px,6.2vw,30px);font-weight:600;letter-spacing:-.02em;color:var(--cream); max-width:100%; padding:12px 0;border-bottom:1px solid var(--line);text-transform:uppercase; opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s} .mnav.open a{opacity:1;transform:none} .mnav.open a:nth-child(1){transition-delay:.06s}.mnav.open a:nth-child(2){transition-delay:.1s} .mnav.open a:nth-child(3){transition-delay:.14s}.mnav.open a:nth-child(4){transition-delay:.18s} .mnav.open a:nth-child(5){transition-delay:.22s}.mnav.open a:nth-child(6){transition-delay:.26s} .mnav a:active{color:var(--green)} .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.07em; text-transform:uppercase;padding:11px 20px;border:1px solid var(--line2);color:var(--cream);background:rgba(238,251,230,.02); cursor:pointer;border-radius:12px;transition:transform .18s var(--ease),border-color .2s,color .2s,box-shadow .25s} .btn:hover{border-color:rgba(157,255,60,.5);color:var(--green);transform:translateY(-1px)} .btn:active{transform:translateY(0) scale(.98)} .btn.pri{background:linear-gradient(135deg,var(--lime),var(--green));color:var(--green-ink);border-color:transparent;font-weight:700} .btn.pri:hover{color:var(--green-ink);box-shadow:0 10px 34px rgba(157,255,60,.32)} .btn.sm{padding:8px 14px;font-size:11px;border-radius:10px;min-height:40px} /* AU DOIGT, 35 PX NE SUFFISENT PAS. Mesuré sur toutes les routes à 375 et 414 px : le bouton compact tombait à 35 px de haut, et une quarantaine de liens d'action (« Tout voir », « Voir la page », « Resynchroniser ») entre 14 et 28 px. Sur un écran tactile on remonte tout le monde à 40 px sans toucher au dessin : le texte et les bordures ne bougent pas, seule la surface touchable grandit. Réservé aux pointeurs grossiers : à la souris, rien ne change. */ @media (pointer: coarse){ .btn, .btn.sm{ min-height:40px; } select, input[type=text], input[type=number], input[type=date], input[type=time], input[type=email], input[type=search], input[type=url]{ min-height:40px; } a.lbl, a.go, a.swc-hint, a.str-card__voir, a.esp-cover-edit, a.pod-name, a.fil-cm__n, a.pc-card__name, button.fil-suivre{ min-height:40px; display:inline-flex; align-items:center; } /* Onglets et boutons « Copier » de la régie : ce sont de VRAIES commandes, pas du texte. */ .sk-tab, .rg-obs__l button, .rg-zone button, .rg-obs button{ min-height:40px; } /* Le nom d'une équipe dans le classement est un lien qu'on touche vraiment. */ a.sqd-link, a.rg-plan__dl, .rg-scenes button, .rg-panel button.on, .rg-seg button, .rg-row button, .rg-addcam, .rg-nav__fl, .swp-liens a, .rg-nav__ret, .rg-nav__e, .rg-cadre__z{ min-height:40px; } } .btn:disabled{opacity:.4;cursor:not-allowed} .avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--line2)} .live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block; box-shadow:0 0 0 0 rgba(157,255,60,.6);animation:pulse 1.8s infinite} @keyframes pulse{70%{box-shadow:0 0 0 8px rgba(157,255,60,0)}100%{box-shadow:0 0 0 0 rgba(157,255,60,0)}} .sec{padding:64px 0} /* L'en-tête de section passe à la ligne sur les petits écrans : sans ça, le dernier bouton (Finances, Régie…) sortait du cadre et devenait impossible à toucher. */ .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px; border-bottom:1px solid var(--line);padding-bottom:18px;flex-wrap:wrap} .sec-head>*{min-width:0} .sec-head h2{font-size:clamp(28px,4vw,42px)} .sec-head .idx{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.16em} .hero{position:relative;padding:96px 0 68px;border-bottom:1px solid var(--line);overflow:hidden} .hero::before{content:"";position:absolute;inset:0;opacity:.7; background:radial-gradient(52vw 42vh at 80% -6%,rgba(157,255,60,.16),transparent 62%)} .hero .wrap{position:relative;z-index:2} .status-row{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap} .chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 13px; background:rgba(238,251,230,.02)} .chip.g{color:var(--green);border-color:rgba(157,255,60,.4);background:rgba(157,255,60,.06)} .hero h1{font-size:clamp(48px,7.5vw,92px);margin:8px 0;letter-spacing:-.03em} .hero h1 .o{background:linear-gradient(120deg,var(--lime),var(--green));-webkit-background-clip:text;background-clip:text; color:transparent;display:block;text-shadow:0 0 60px rgba(157,255,60,.25)} .hero p{color:var(--muted);max-width:50ch;margin:20px 0 30px;font-size:16.5px;line-height:1.6} .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .grid{display:grid;gap:18px} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g2{grid-template-columns:repeat(2,1fr)} /* cartes : coque + noyau (double-bezel), ombre diffuse, hover spring */ .card{border:1px solid var(--line);background:rgba(238,251,230,.02);transition:transform .3s var(--ease),border-color .25s,box-shadow .3s; position:relative;overflow:hidden;display:block;border-radius:18px;padding:5px} .card:hover{border-color:rgba(157,255,60,.22);transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.5)} .tcard{padding:5px} .tcard .top{height:132px;position:relative;display:flex;align-items:flex-end;padding:16px;border-radius:14px; background:linear-gradient(135deg,var(--panel2),#080b08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)} .tcard .top::after{content:"";position:absolute;inset:0;border-radius:14px; background:radial-gradient(90% 120% at 100% 0,rgba(157,255,60,.14),transparent 55%)} .tcard .top .fmt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;z-index:1; color:var(--green-ink);background:linear-gradient(135deg,var(--lime),var(--green));padding:4px 9px;border-radius:6px;position:absolute;top:14px;left:14px;font-weight:700} .tcard .top .st{position:absolute;top:14px;right:14px;z-index:1;font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;padding:4px 9px;border:1px solid var(--line2);border-radius:6px;background:rgba(6,8,6,.5)} .tcard .top .st.registration_open,.tcard .top .st.open{color:var(--green);border-color:rgba(157,255,60,.4)} .tcard .top .st.running,.tcard .top .st.live{color:var(--hot);border-color:rgba(255,106,61,.45)} .tcard .top .bigd{font-family:var(--disp);font-weight:700;font-size:44px;color:rgba(238,251,230,.12);line-height:.8;z-index:1} .tcard .body{padding:18px 16px 16px} .tcard h3{font-size:22px;margin-bottom:5px;letter-spacing:-.01em} .tcard .meta{font-family:var(--mono);font-size:11px;color:var(--muted)} .tcard .foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .tcard .foot .p{font-family:var(--mono);font-size:12px} .tcard .foot .p b{color:var(--green)} .slots{height:5px;background:var(--raise);margin-top:14px;position:relative;overflow:hidden;border-radius:99px} .slots i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--green),var(--lime));border-radius:99px} .panelcard{border:1px solid var(--line);background:linear-gradient(180deg,rgba(20,26,18,.5),rgba(9,12,8,.6)); padding:24px;position:relative;border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)} .kv{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--line)} .kv:last-child{border:0} .kv .k{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase} .kv .v{font-family:var(--disp);font-weight:700;font-size:20px;font-variant-numeric:tabular-nums} .kv .v.g{color:var(--green)} /* LES ONGLETS DÉFILENT, LA PAGE NON. Sur téléphone, « Participants » et « Règles » sortaient de l'écran et emportaient toute la page dans un défilement latéral. La barre défile sur elle-même ; la barre de défilement reste invisible. */ .subnav{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:26px; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none; scroll-snap-type:x proximity;overscroll-behavior-x:contain} .subnav::-webkit-scrollbar{display:none} .subnav a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); padding:13px 17px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s var(--ease); flex:none;white-space:nowrap;scroll-snap-align:start} .subnav a:hover{color:var(--cream)} .subnav a.on{color:var(--green);border-bottom-color:var(--green)} .board{border:1px solid var(--line);background:rgba(14,18,13,.6);overflow:hidden;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.4)} .board .bh{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line);background:rgba(10,13,10,.6)} .board .bh .t{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;gap:9px;align-items:center} table{width:100%;border-collapse:collapse} thead th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim); text-align:right;padding:12px 15px;font-weight:400;border-bottom:1px solid var(--line)} thead th.l{text-align:left} tbody td{padding:13px 15px;border-bottom:1px solid rgba(238,251,230,.05);text-align:right;font-family:var(--mono); font-variant-numeric:tabular-nums;font-size:13.5px} tbody td.l{text-align:left;font-family:var(--body)} tbody tr{transition:background .2s var(--ease)} tbody tr:hover{background:rgba(157,255,60,.04)} tr.lead{background:linear-gradient(90deg,rgba(157,255,60,.07),transparent 60%)} .rk{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--muted)} tr.lead .rk{color:var(--green)} .team{display:flex;align-items:center;gap:12px} .crest{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;font-family:var(--disp); font-weight:700;font-size:12px;color:var(--green-ink);background:linear-gradient(135deg,var(--lime),var(--green))} .team .nm{font-weight:600;font-size:14px} .team .pl{font-family:var(--mono);font-size:10px;color:var(--dim)} .tot{color:var(--green);font-family:var(--disp);font-weight:700;font-size:16px} .st-b{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em; text-transform:uppercase;padding:4px 9px;border:1px solid var(--line);border-radius:7px} .st-b.live{color:var(--green);border-color:rgba(157,255,60,.3)} .st-b.pending{color:var(--pending);border-color:rgba(201,208,196,.3)} .st-b.valid{color:var(--valid);border-color:rgba(87,209,90,.3)} .st-b .d{width:5px;height:5px;border-radius:50%;background:currentColor} .form{display:flex;flex-direction:column;gap:16px} .fld{display:flex;flex-direction:column;gap:7px;min-width:0} .fld input,.fld select,.fld textarea{max-width:100%} .fld label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .fld input,.fld select,.fld textarea{background:rgba(6,8,6,.6);border:1px solid var(--line2);color:var(--cream); padding:12px 14px;font-family:var(--mono);font-size:13px;outline:none;border-radius:11px;transition:border-color .2s,box-shadow .2s} .fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(157,255,60,.12)} /* Aide sous un champ : discrète, jamais concurrente du libellé. */ .fld .hint{font-size:11.5px;line-height:1.5;color:var(--muted);margin-top:-1px} .r2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} .r2>*,.r3>*{min-width:0} /* sans ça, un champ large pousse la page hors de l'écran */ .flash{border:1px solid var(--line2);background:rgba(20,26,18,.6);padding:13px 17px;margin-bottom:18px;font-family:var(--mono);font-size:12.5px;border-radius:12px} .flash.ok{border-color:rgba(87,209,90,.4);color:var(--valid)} .flash.err{border-color:rgba(255,106,61,.4);color:var(--hot)} .flash.warn{border-color:rgba(157,255,60,.35);color:var(--cream,#e8eee4)} .player-strip{display:flex;align-items:center;gap:15px;border:1px solid var(--line);background:rgba(14,18,13,.6);padding:16px 20px;border-radius:16px} .player-strip img{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--green)} .player-strip .n{font-family:var(--disp);font-weight:700;font-size:23px;text-transform:uppercase} .player-strip .m{font-family:var(--mono);font-size:11px;color:var(--muted)} footer{border-top:1px solid var(--line);padding:40px 0;margin-top:48px;position:relative;z-index:2} .foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .foot .mono{color:var(--dim);font-size:11.5px} .note{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:16px} /* --- classement live : chip de mouvement + bandeau objectif Match Point --- */ td .rk{position:relative} .mv{display:inline-block;width:1em;margin-left:6px;font-size:10px;line-height:1;opacity:0; transform:translateY(3px);transition:opacity .4s var(--ease),transform .4s var(--ease)} .mv.up{color:var(--valid);opacity:1;transform:none} .mv.down{color:var(--pending);opacity:1;transform:none} .mp-obj{margin-bottom:14px;padding:14px 18px;border:1px solid var(--line2);border-radius:16px; background:linear-gradient(120deg,rgba(157,255,60,.06),rgba(6,8,6,.4))} .mp-obj .obj-line{font-family:var(--head);font-size:15.5px;color:var(--cream);margin-top:6px} .mp-obj b{color:var(--green)} .mp-obj b.hot{color:#fff;text-shadow:0 0 14px rgba(157,255,60,.55)} .obj-bar{margin-top:10px;height:6px;border-radius:6px;background:rgba(238,251,230,.07);overflow:hidden} .obj-bar span{display:block;height:100%;width:4%;border-radius:6px; background:linear-gradient(90deg,var(--green),#e8ff8a);transition:width .7s cubic-bezier(.22,1,.36,1)} /* --- panneau « Ton prochain match » (joueur inscrit, en direct) --- */ .nextmatch{margin-bottom:22px;padding:18px 20px;border-radius:18px; border:1px solid rgba(157,255,60,.28);background:linear-gradient(135deg,rgba(157,255,60,.08),rgba(6,8,6,.5)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05);animation:fadeUp .6s var(--ease) both} .nm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .nm-team{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--cream)} .nm-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .nm-msg{color:var(--muted);font-size:13.5px;max-width:52ch} .nm-chip{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--cream)} .nm-chip .d{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.4s infinite} .nm-chip.warn .d{background:var(--pending);box-shadow:0 0 10px var(--pending)} .nm-chip.ok .d{background:var(--valid);box-shadow:0 0 10px var(--valid)} .nm-lobby{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .lobby-code{display:inline-flex;align-items:center;gap:14px;margin-top:8px;cursor:pointer; background:rgba(6,8,6,.7);border:1px solid var(--line2);border-radius:12px;padding:12px 16px; transition:border-color .2s var(--ease),transform .12s var(--spring)} .lobby-code:hover{border-color:var(--green)} .lobby-code:active{transform:scale(.98)} .lobby-code .code{font-family:var(--mono);font-weight:700;font-size:26px;letter-spacing:.14em;color:var(--green)} .lobby-code .cp{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .lobby-code.copied .cp{color:var(--valid)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} /* --- animations d'entrée --- */ @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes heroIn{from{opacity:0;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}} .hero .eye{animation:heroIn .7s var(--ease) both;animation-delay:.04s} .hero h1{animation:heroIn .9s var(--ease) both;animation-delay:.1s} .hero p{animation:heroIn .7s var(--ease) both;animation-delay:.2s} .hero-cta{animation:heroIn .7s var(--ease) both;animation-delay:.28s} .grid>*{animation:fadeUp .6s var(--ease) both} .grid>*:nth-child(2){animation-delay:.06s}.grid>*:nth-child(3){animation-delay:.12s} .grid>*:nth-child(4){animation-delay:.18s}.grid>*:nth-child(5){animation-delay:.24s} .grid>*:nth-child(6){animation-delay:.3s}.grid>*:nth-child(7){animation-delay:.36s} .grid>*:nth-child(8){animation-delay:.42s} /* révélation au scroll (IntersectionObserver dans base.html) */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .crest,.avatar{transition:transform .25s var(--spring)} .card:hover .crest{transform:scale(1.08) rotate(-3deg)} @media(max-width:980px){nav.main{display:none} .burger{display:flex} .g3,.g4{grid-template-columns:1fr 1fr} .g2{grid-template-columns:1fr} .hero{padding:64px 0 48px} .hero h1{font-size:54px}} @media(max-width:620px){.g3,.g4{grid-template-columns:1fr} .r2,.r3{grid-template-columns:1fr} .sec{padding:44px 0}} /* Reduced-motion : on NE coupe PLUS tout (c'était la cause du « zéro animation » sur certaines machines/PC de bureau où « réduire les animations » est activé). On garde les fondus/transitions doux, on désarme seulement le mouvement CONTINU/lourd. */ @media(prefers-reduced-motion:reduce){ .bgfx .orb,.sk-gradtext,[data-gradtext],.sk-shiny,[data-shiny],.foil-marquee{animation:none!important} .reveal{transform:none} /* fondu seulement, pas de glissement (doux + respectueux) */ html{scroll-behavior:auto} } /* RETOUR FONDATEUR — plus AUCUN balayage ni disparition de texte. Les titres .sk-gradtext / .sk-shiny (qui balayaient à gauche / grisaient le texte, et pouvaient devenir INVISIBLES sous une carte en mix-blend) rendent désormais en SOLIDE net et stable. */ .sk-gradtext,[data-gradtext],.sk-shiny,[data-shiny]{ background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important; color:var(--cream)!important;-webkit-text-fill-color:var(--cream)!important;animation:none!important} /* skld-fx.css */ /* ============================================================================ SKLD Broadcast · skld-fx.css — effets « ReactBits portés » (reskin XEROX CHROME) Palette : noir OLED / sapin / cream #eefbe6 / LIME #9dff3c (≤2%). ZÉRO orange. Piloté par skld-fx.js (vars --sx/--bg/--beam/--halo) ; tout GEL sous body.skb-static (état final) et body.skb-fxoff / prefers-reduced-motion (boucles). ========================================================================= */ @property --fx-a { syntax: ""; inherits: false; initial-value: 0deg; } /* ---------- ShinyText : sweep spéculaire CHROME sur un texte (bord dur, pas de glow) cream dominant + un seul liseré lime à 50% (<2%). Se fige proprement. --------- */ .xc-shine { color: #eefbe6; background: linear-gradient(110deg, #46564a 0%, #cfe0c6 40%, #eefbe6 48%, #9dff3c 50%, #eefbe6 52%, #cfe0c6 60%, #46564a 100%); background-size: 240% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: xcShine 3.4s linear infinite; } @keyframes xcShine { to { background-position: -240% center; } } /* ---------- micro-boucles permanentes (respiration / specular / scan) : data-loop ---------- */ [data-loop="spec"] { background: linear-gradient(100deg, #7c828a 0 40%, #eef2f6 47% 50%, #7c828a 57% 100%) 0 0/300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: xcSpec 3.5s linear infinite; } @keyframes xcSpec { to { background-position: -200% 0; } } [data-loop="breathe"] { animation: xcBreathe 6s ease-in-out infinite; } @keyframes xcBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012); } } /* ============================================================================ PRIMITIVES DE CARTE (double-bezel + border-glow + foil + border-beam + spotlight) Composables :
…
========================================================================= */ /* coque externe « usinée » : rayons concentriques + relief inset + ombre flottante */ .fx-bezel { position: relative; border-radius: 30px; padding: 1.5px; isolation: isolate; background: linear-gradient(160deg, rgba(238,251,230,.14), rgba(238,251,230,.02) 30%, transparent 60%), linear-gradient(180deg, #0e1a14, #05080a); box-shadow: inset 0 1px 0 rgba(238,251,230,.06), inset 0 -1px 1px rgba(0,0,0,.6), 0 22px 48px -20px rgba(0,0,0,.7); } /* cœur interne : halo lime haut-droite (signature .tcard), relief propre */ .fx-core { position: relative; border-radius: 22px; overflow: hidden; background: radial-gradient(130% 90% at 100% 0%, rgba(157,255,60, calc(var(--halo,.6) * .18)), transparent 42%), linear-gradient(180deg, #0a1410, #06090c); box-shadow: inset 0 1px 0 rgba(238,251,230,.05), inset 0 0 0 1px rgba(238,251,230,.04); } /* border-GLOW (Magic Bento) : halo qui n'illumine QUE le liseré (mask XOR), balayé par --sx */ .fx-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none; background: radial-gradient(120px circle at var(--sx,50%) 50%, rgba(157,255,60,.9), rgba(157,255,60,0) 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; mix-blend-mode: screen; z-index: 3; } /* FOIL (Glare) : bande chrome/lime qui glisse en color-dodge (reflet holographique reskin) */ .fx-foil::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; background: linear-gradient(115deg, transparent 30%, rgba(157,255,60,.26) 45%, rgba(238,251,230,.5) 50%, rgba(157,255,60,.26) 55%, transparent 70%), repeating-linear-gradient(115deg, transparent 0 8px, rgba(201,211,204,.05) 8px 9px); background-size: 250% 100%, 100% 100%; background-position: var(--bg,0%) 0, 0 0; mix-blend-mode: color-dodge; opacity: .7; } /* border-BEAM : une comète parcourt le liseré (offset-path), pilotée par --beam */ .fx-beam { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; border: 1.5px solid transparent; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .fx-beam::before { content: ""; position: absolute; width: 54px; aspect-ratio: 1; offset-path: rect(0 auto auto 0 round 30px); offset-distance: var(--beam,0%); background: linear-gradient(to left, rgba(157,255,60,1), rgba(238,251,230,.6), transparent); filter: blur(2px); } /* SPOTLIGHT doux (projecteur haut de carte), balayé par --sx */ .fx-spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; background: radial-gradient(260px circle at var(--sx,50%) 0%, rgba(238,251,230,.10), transparent 70%); mix-blend-mode: screen; } /* barre de progression lime (signature .tcard) */ .fx-prog { height: 5px; border-radius: 99px; background: rgba(238,251,230,.08); overflow: hidden; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); } .fx-prog > i { display: block; height: 100%; width: var(--v,64%); border-radius: 99px; background: linear-gradient(90deg, #3c8f2e, #9dff3c); box-shadow: 0 0 10px rgba(157,255,60,.5), inset 0 1px 0 rgba(238,251,230,.5); } /* ============================================================================ GEL OBS — deux niveaux. skb-static : tout figé sur l'état final lisible. skb-fxoff / reduced-motion : coupe seulement les boucles permanentes. ========================================================================= */ body.skb-static .xc-shine, body.skb-fxoff .xc-shine, body.skb-static [data-loop], body.skb-fxoff [data-loop] { animation: none !important; } @media (prefers-reduced-motion: reduce) { .xc-shine, [data-loop] { animation: none !important; } } /* figé : le sweep spéculaire du texte se pose sur une position nette */ body.skb-static .xc-shine, body.skb-fxoff .xc-shine { background-position: 42% center; } /* skld-bento.css */ /* ============================================================================ SKLD BENTO — grille bento premium + micro-interactions (styles). Réimplémentation ORIGINALE de la TECHNIQUE "MagicBento" (spotlight global, border-glow, tilt magnétique, particules, ripple) — 100% maison, zéro lib. DA SKLD : fond OLED #050705, accent lime 157,255,60, ambre 157,255,60, texte crème 232,255,224. Polices Space Grotesk / JetBrains Mono. Zéro emoji. Piloté par skld-bento.js (variables --glow-x/--glow-y/--glow-intensity posées en JS). Se dégrade proprement en reduced-motion et sur pointeur coarse. ========================================================================== */ [data-bento] { /* jeton de couleur local (surchargable via data-accent en JS) */ --sk-accent: 157, 255, 60; /* lime dominant */ --sk-amber: 157, 255, 60; /* ambre secondaire */ --sk-cream: 232, 255, 224; /* crème texte clair */ --sk-ink: #050705; /* fond OLED */ --sk-gap: 14px; --sk-ease: cubic-bezier(.16, 1, .3, 1); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: minmax(150px, auto); gap: var(--sk-gap); position: relative; isolation: isolate; } /* ---- utilitaires d'occupation (bento) ------------------------------------ */ .sk-bento-card.is-wide { grid-column: span 2; } .sk-bento-card.is-tall { grid-row: span 2; } .sk-bento-card.is-xl { grid-column: span 2; grid-row: span 2; } /* ---- la carte ------------------------------------------------------------ */ .sk-bento-card { --glow-x: 50%; --glow-y: 50%; --glow-intensity: 0; --glow-radius: 260px; position: relative; overflow: hidden; border-radius: 18px; padding: 22px; color: rgb(var(--sk-cream)); background: radial-gradient(120% 120% at 0% 0%, rgba(var(--sk-accent), .05) 0%, transparent 46%), linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(0, 0, 0, .18)), var(--sk-ink); border: 1px solid rgba(var(--sk-cream), .09); box-shadow: inset 0 1px 0 rgba(var(--sk-cream), .04); transform-style: preserve-3d; transform: perspective(900px); transition: transform .55s var(--sk-ease), box-shadow .4s ease, border-color .4s ease; will-change: transform; } /* survol : liseré lime discret + élévation (jamais criard) */ .sk-bento-card:hover { border-color: rgba(var(--sk-accent), .30); box-shadow: inset 0 1px 0 rgba(var(--sk-cream), .06), 0 22px 60px -30px rgba(var(--sk-accent), .40), 0 0 0 1px rgba(var(--sk-accent), .04); } /* ---- (2) BORDER-GLOW : radial lime masqué en anneau (bord seulement) ------ mask XOR entre la boîte pleine et la zone content-box (padding 2px) => seul le liseré de 2px reçoit le dégradé. Intensité pilotée en JS. */ .sk-bento-card::after { content: ""; position: absolute; inset: 0; z-index: 3; padding: 2px; border-radius: inherit; pointer-events: none; background: radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y), rgba(var(--sk-accent), calc(var(--glow-intensity) * .8)) 0%, transparent 60%); -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, linear-gradient(#000 0 0); mask-composite: exclude; transition: background .12s linear; } /* variante ambre (par carte) */ .sk-bento-card.is-amber { --sk-accent: var(--sk-amber); } /* ---- typographie interne (sobre, AAA) ------------------------------------ */ .sk-bento-card > * { position: relative; z-index: 2; } .sk-bento-eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--sk-accent)); } .sk-bento-title { font-family: var(--disp, "Space Grotesk", system-ui, sans-serif); font-weight: 700; font-size: clamp(19px, 2.4vw, 27px); line-height: .98; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; margin-top: 10px; color: rgb(var(--sk-cream)); } .sk-bento-text { font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: 12px; line-height: 1.6; color: rgba(var(--sk-cream), .62); margin-top: 10px; } .sk-bento-metric { font-family: var(--disp, "Space Grotesk", system-ui, sans-serif); font-weight: 700; font-size: clamp(30px, 5vw, 52px); line-height: .85; font-variant-numeric: tabular-nums lining-nums; color: rgb(var(--sk-accent)); } /* ---- (4) PARTICULES : petits points lime qui dérivent au survol ---------- */ .sk-bento-particles { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; pointer-events: none; } .sk-bento-particle { position: absolute; top: 0; left: 0; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--sk-accent)); box-shadow: 0 0 8px 1px rgba(var(--sk-accent), .85); opacity: 0; will-change: transform, opacity; } /* ---- (5) RIPPLE : cercle lime qui s'étend au clic ------------------------ */ .sk-bento-ripple { position: absolute; z-index: 4; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, rgba(var(--sk-accent), .34) 0%, rgba(var(--sk-accent), .12) 42%, transparent 70%); animation: sk-bento-ripple .62s var(--sk-ease) forwards; } @keyframes sk-bento-ripple { from { transform: translate(-50%, -50%) scale(0); opacity: .6; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } } /* ---- (1) SPOTLIGHT GLOBAL : halo lime fixe qui suit le curseur ----------- */ .sk-bento-spotlight { position: fixed; left: 0; top: 0; z-index: 6; width: var(--sk-spot-size, 520px); height: var(--sk-spot-size, 520px); border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transform: translate3d(-50%, -50%, 0); transition: opacity .4s ease; will-change: transform, opacity; background: radial-gradient(circle, rgba(157, 255, 60, .15) 0%, rgba(157, 255, 60, .06) 30%, transparent 70%); } .sk-bento-spotlight.on { opacity: 1; } /* ========================================================================== DÉGRADÉS D'ACCESSIBILITÉ ========================================================================== */ /* Pointeur coarse / tactile : aucun effet souris, cartes statiques stylées. */ @media (hover: none), (pointer: coarse) { .sk-bento-spotlight, .sk-bento-particles { display: none !important; } .sk-bento-card { transform: none !important; } .sk-bento-card::after { background: radial-gradient(var(--glow-radius) circle at 50% -10%, rgba(var(--sk-accent), .16) 0%, transparent 62%); } } /* Reduced-motion : on coupe l'animé lourd mais on garde un border-glow statique léger (halo fixe en haut de carte, sans suivi du curseur). */ @media (prefers-reduced-motion: reduce) { .sk-bento-card { transition: border-color .2s ease; transform: none !important; } .sk-bento-spotlight, .sk-bento-particles { display: none !important; } .sk-bento-ripple { animation-duration: .01ms; } .sk-bento-card::after { background: radial-gradient(var(--glow-radius) circle at 50% -10%, rgba(var(--sk-accent), .18) 0%, transparent 60%); transition: none; } } /* skld-polish.css */ /* ========================================================================== SKLD POLISH — passe de SOBRIÉTÉ (Vague 1, verdict Fable 5). AUCUN nouvel effet. Chargé EN DERNIER dans : gagne les égalités de spécificité sur skald.css. Objectif : rendre le site premium par la RETENUE (respiration, hiérarchie, lisibilité, glow éteint au repos) avant d'ajouter quoi que ce soit. Les 5 règles Fable, appliquées globalement. ========================================================================== */ /* — R1 Respiration : espacements resserrés (retour fondateur : c'était BEAUCOUP trop) — */ .sec { padding-block: clamp(40px, 5.2vw, 72px); } .sec-head { margin-bottom: clamp(20px, 2.6vw, 32px); } @media (max-width: 620px) { .sec { padding-block: 36px; } } /* — HEADER : vrai header, nav visible + animée (soulignement lime qui glisse au survol). Logo agrandi + collé au texte. Retour fondateur : "faire un header, animation à mort". — */ .hbrand { gap: 8px !important; } .hnav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 27px); } .hnav a { position: relative; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); padding: 8px 1px; transition: color .25s ease; } .hnav a:hover { color: var(--cream); } .hnav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--lime)); box-shadow: 0 0 10px rgba(157, 255, 60, .55); transition: right .32s cubic-bezier(.16, 1, .3, 1); } .hnav a:hover::after { right: 0; } @media (max-width: 980px) { .hnav { display: none; } } /* — R2 Lecture : largeur de lecture bornée + corps lisible (contraste AA) — */ .sec p { max-width: 68ch; color: #dfe7d7; } .hero-xl p { color: #e2ecda; } /* — R3 Le glow s'éteint au repos : bordure calme neutre, la lueur lime (skfx-glow, déjà opacity:0 au repos) n'apparaît qu'au survol/focus. On retire tout liseré lime permanent. — */ .card { border-color: rgba(238, 251, 230, .08); } .sk-bento-card { border-color: rgba(238, 251, 230, .08); } /* — R4 Micro-interactions courtes (150–250ms) — */ .card { transition-duration: .2s; } /* — R5 Jamais de texte nu sur fond animé : scrim dégradé sous le texte du hero (posé sur LiquidEther). Ancré à gauche, laisse respirer le fluide à droite. — */ .hero-xl::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(5, 7, 5, .84) 0%, rgba(5, 7, 5, .44) 40%, rgba(5, 7, 5, 0) 66%); } .hero-xl .wrap { position: relative; z-index: 2; } /* ========================================================================== DA CORRIGÉE (fondateur) : AUCUN orange/ambre. Palette = noir OLED + lime + VERT SAPIN très foncé. Le lime est le seul accent vif ; le vert sapin est une teinte de surface/secondaire. On neutralise tout ambre résiduel. ========================================================================== */ :root { --fir: #0a1c10; --fir-2: #06120a; /* vert sapin très foncé */ /* Fondateur : SITE PLUS DARK. Fonds & panneaux nettement plus profonds (OLED). Le lime reste l'accent. */ --bg: #020301; --bg2: #050705; --panel: #070a06; --panel2: #0b0f09; --raise: #10150e; } body { background: var(--bg); } /* toute carte bento .is-amber redevient lime */ [data-bento] { --sk-amber: 157, 255, 60; } /* calque "ambre" du menu plein écran -> vert sapin */ .sk-sm-prelayer--amber { background: #0c2114; } /* Fond WebGL DIFFÉRENT par page (mouse-reactive) : couche fixe derrière tout le contenu (au-dessus de l'OLED, sous le contenu). Chaque page pose data-bg="colorbends|acid|topo". */ .sk-pagebg { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .34; } .sk-pagebg canvas { width: 100% !important; height: 100% !important; display: block; } /* ========================================================================== BOUTONS : animation chrome/liquide (balayage brillant au survol + lift). Retour fondateur : les boutons "méritent d'être animés, liquide ou chrome". ========================================================================== */ .btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .2s ease, box-shadow .3s ease, border-color .25s ease, background .25s ease; } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.22) 46%, rgba(198,255,110,.28) 54%, transparent 72%); transform: translateX(-130%); transition: transform .6s cubic-bezier(.16,1,.3,1); } .btn:hover::after { transform: translateX(130%); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.985); } .btn.pri:hover { box-shadow: 0 12px 34px -10px rgba(157,255,60,.55); } .btn:not(.pri):hover { border-color: rgba(157,255,60,.5); box-shadow: 0 10px 30px -14px rgba(157,255,60,.4); } @media (prefers-reduced-motion: reduce) { .btn::after { display: none; } .btn:hover { transform: none; } } /* ================================================================== */ /* DA v2 — PLUS DARK & PREMIUM (retour fondateur : moins olive/lime, */ /* header propre sans ombre, fonds beaucoup plus discrets) */ /* ================================================================== */ /* Neutres plus froids : le blanc cassé perd sa teinte verte, le gris devient plus neutre */ :root{ --cream:#eef2ef; /* blanc cassé froid (était verdâtre #eefbe6) */ --muted:#8b938c; /* gris froid (moins olive) */ --dim:#565e57; --line:rgba(230,238,232,.06); --line2:rgba(230,238,232,.11); } /* HEADER : barre nette, PAS de dégradé fondant (supprime l'ombre floue sur le hero) */ header{ background:rgba(3,5,3,.72) !important; border-bottom:1px solid rgba(157,255,60,.10) !important; box-shadow:0 1px 0 rgba(255,255,255,.03), 0 10px 30px -24px rgba(0,0,0,.9) !important; } /* Orbes d'ambiance : fir-green profond, très discrets (plus de halo lime « olive ») */ .bgfx .orb{ opacity:.26; filter:blur(120px); } .bgfx .o1{ background:radial-gradient(circle, rgba(26,74,40,.26), transparent 62%) !important; } .bgfx .o2{ background:radial-gradient(circle, rgba(14,44,26,.24), transparent 62%) !important; } /* Fond WebGL par page : nettement plus discret (il vit EN FOND, jamais en compétition) */ .sk-pagebg{ opacity:.16 !important; } /* Voile OLED global : un fondu radial très sombre pour asseoir la profondeur (dark premium) */ body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(130% 90% at 50% -10%, rgba(10,28,16,.30), transparent 60%), radial-gradient(100% 70% at 50% 120%, rgba(0,0,0,.55), transparent 55%); } /* ---- LANGAGE DE CARTES SKLD v2 (charbon/fir, hairline fine, ombre cohérente) ---- */ .card, .panelcard { background: linear-gradient(180deg, rgba(22,28,24,.55), rgba(8,11,9,.72)) !important; border: 1px solid rgba(230,238,232,.07) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -30px rgba(0,0,0,.85) !important; border-radius: 16px; transition: transform .45s cubic-bezier(.32,.72,0,1), border-color .3s ease, box-shadow .45s ease !important; } .card:hover, .panelcard:hover { border-color: rgba(157,255,60,.20) !important; transform: translateY(-4px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 28px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(157,255,60,.06) !important; } .card:active, .panelcard:active { transform: translateY(-2px) scale(.995) !important; } /* Bezel : hairline chrome/fir subtile (fini le glow lime « AI ») */ .bezel::before { background: linear-gradient(150deg, rgba(200,220,255,.14), rgba(157,255,60,.10) 40%, rgba(230,238,232,0) 70%) !important; } .bezel { box-shadow: inset 0 1px 1px rgba(255,255,255,.05), 0 22px 50px -32px rgba(0,0,0,.9) !important; } /* Statut live : plus d'orange (skald.css utilisait --hot orange) -> lime discret */ .tcard .top .st.running, .tcard .top .st.live { color: var(--green) !important; border-color: rgba(157,255,60,.4) !important; } /* skld-scrollfx.css */ /* SKLD ScrollFX — narration au scroll. L'état masqué n'existe que si le JS l'arme (.sk-stagger-armed), donc sans JS tout reste visible. */ .sk-stagger-armed > * { opacity: 0; transform: translateY(16px); will-change: opacity, transform; } .sk-stagger-armed.sk-rows-in > * { animation: sk-row-in .62s cubic-bezier(.32,.72,0,1) both; animation-delay: calc(var(--sk-i, 0) * 55ms); } @keyframes sk-row-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Ligne de classement : léger balayage lime au moment de l'apparition */ table.lb tbody.sk-stagger-armed.sk-rows-in > tr { animation-name: sk-rank-in; } @keyframes sk-rank-in { 0% { opacity: 0; transform: translateY(16px); box-shadow: inset 2px 0 0 rgba(157,255,60,0); } 55% { box-shadow: inset 3px 0 0 rgba(157,255,60,.9); } 100% { opacity: 1; transform: translateY(0); box-shadow: inset 0 0 0 rgba(157,255,60,0); } } @media (prefers-reduced-motion: reduce) { .sk-stagger-armed > *, .sk-stagger-armed.sk-rows-in > * { opacity: 1; transform: none; animation: none; } } /* skld-text-fx.css */ /* SKLD Text FX — pack d'animations de TEXTE, 100% VANILLA (zéro lib, zéro réseau, zéro emoji). ----------------------------------------------------------------------------------------- Quatre effets, DA SKLD (OLED + lime #9dff3c + chrome argent + crème, ZÉRO orange/ambre) : 1) GradientText [data-gradtext] / .sk-gradtext Dégradé animé lime -> chrome -> crème clippé au texte (background-clip:text) ; seule la background-position boucle (jamais width/height/top/left). 2) ShinyText [data-shiny] / .sk-shiny Reflet spéculaire clair (crème) qui traverse un texte chrome en boucle lente, via un dégradé clippé au texte dont on balaie la background-position. 3) Decrypt [data-decrypt] (piloté par skld-text-fx.js) À l'apparition, chaque caractère « se déchiffre » (char aléatoire -> char final), révélé de gauche à droite. Structure par caractère : un calque RÉEL (réserve la largeur, en flux, opacity) + un calque CHIFFRE (absolu, par-dessus) => AUCUN reflow. 4) ScrambleHover [data-scramble-hover] Même structure que Decrypt ; re-scramble bref au survol (souris uniquement). Coupures communes : - prefers-reduced-motion : plus aucune animation (dégradés posés statiques, texte net). - .sk-fx-off sur (posé par le JS sur ?fx=off) : idem, tout figé. - pointer:coarse : le survol n'existe pas -> ScrambleHover reste simplement statique. Variables surchargées possibles (sur l'élément) : --sk-grad-a / --sk-grad-b / --sk-grad-c arrêts du dégradé (lime / chrome / crème) --sk-grad-dur durée de boucle GradientText (défaut 8s) --sk-shiny-base couleur de base ShinyText (chrome) --sk-shiny-hi couleur du reflet ShinyText (crème) --sk-shiny-dur durée de boucle ShinyText (défaut 4.5s) --sk-dc-cipher couleur des caractères chiffrés (défaut lime) --sk-dc-real couleur du texte révélé (défaut: inherit) */ /* =============================================================== 1. GradientText */ [data-gradtext], .sk-gradtext { --sk-grad-a: #9dff3c; /* lime */ --sk-grad-b: #aab4ad; /* chrome argent médian */ --sk-grad-c: #e8ffe0; /* crème (parcimonie) */ --sk-grad-dur: 8s; background-image: linear-gradient( 100deg, var(--sk-grad-a) 0%, var(--sk-grad-b) 30%, var(--sk-grad-c) 50%, var(--sk-grad-b) 70%, var(--sk-grad-a) 100% ); background-size: 220% auto; background-position: 0% center; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; will-change: background-position; /* Force une couche de compositing propre : sinon -webkit-background-clip:text rend le texte INVISIBLE quand un ancêtre a mix-blend-mode / backdrop-filter (nos hero vidéo). translateZ(0) + isolation isolent le clip du blend parent. */ transform: translateZ(0); isolation: isolate; animation: sk-gradtext-move var(--sk-grad-dur, 8s) linear infinite; } @keyframes sk-gradtext-move { to { background-position: 220% center; } } /* Repli navigateurs sans background-clip:text : lime plein plutôt qu'un texte invisible. */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { [data-gradtext], .sk-gradtext { color: #9dff3c; -webkit-text-fill-color: #9dff3c; background: none; } } /* =============================================================== 2. ShinyText */ [data-shiny], .sk-shiny { --sk-shiny-base: #7f8a82; /* chrome sombre (le texte au repos) */ --sk-shiny-hi: #f2fff0; /* reflet clair, quasi crème */ --sk-shiny-dur: 4.5s; background-image: linear-gradient( 110deg, var(--sk-shiny-base) 0%, var(--sk-shiny-base) 40%, var(--sk-shiny-hi) 50%, var(--sk-shiny-base) 60%, var(--sk-shiny-base) 100% ); background-size: 220% 100%; background-position: 150% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; will-change: background-position; transform: translateZ(0); /* couche de compositing propre (clip:text vs mix-blend parent) */ isolation: isolate; /* Balayage puis léger temps mort (le reflet ne passe pas en continu). */ animation: sk-shiny-sweep var(--sk-shiny-dur, 4.5s) ease-in-out infinite; } @keyframes sk-shiny-sweep { 0% { background-position: 150% 0; } 55%, 100% { background-position: -50% 0; } } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { [data-shiny], .sk-shiny { color: #aab4ad; -webkit-text-fill-color: #aab4ad; background: none; } } /* =============================================================== 3/4. Decrypt + ScrambleHover */ /* Un mot = inline-block insécable (jamais de coupure en plein milieu d'un mot). */ .sk-dc-word { display: inline-block; white-space: pre; } /* Un caractère = repère relatif ; le calque RÉEL (en flux) fixe la largeur définitive. */ .sk-dc-char { position: relative; display: inline-block; } /* Calque révélé : reste EN FLUX (réserve la largeur => zéro reflow), fondu à l'apparition. */ .sk-dc-real { color: var(--sk-dc-real, inherit); opacity: 0; transition: opacity .2s cubic-bezier(.32, .72, 0, 1); } /* Calque chiffré : ABSOLU par-dessus (n'influence pas la mise en page), lime par défaut. */ .sk-dc-cipher { position: absolute; left: 0; top: 0; color: var(--sk-dc-cipher, #9dff3c); opacity: .9; pointer-events: none; transition: opacity .2s cubic-bezier(.32, .72, 0, 1); } /* Caractère résolu : on montre le réel, on efface le chiffré (fondu croisé sur place). */ .sk-dc-char.is-on > .sk-dc-real { opacity: 1; } .sk-dc-char.is-on > .sk-dc-cipher { opacity: 0; } /* =============================================================== Coupures d'accessibilité */ /* Reduced-motion OU kill-switch : dégradés figés, texte déchiffré posé net d'emblée. */ @media (prefers-reduced-motion: reduce) { [data-gradtext], .sk-gradtext, [data-shiny], .sk-shiny { animation: none !important; background-position: 0% center; } .sk-dc-real { opacity: 1 !important; transition: none !important; } .sk-dc-cipher { opacity: 0 !important; transition: none !important; } } .sk-fx-off [data-gradtext], .sk-fx-off .sk-gradtext, .sk-fx-off [data-shiny], .sk-fx-off .sk-shiny { animation: none !important; background-position: 0% center; } .sk-fx-off .sk-dc-real { opacity: 1 !important; transition: none !important; } .sk-fx-off .sk-dc-cipher { opacity: 0 !important; transition: none !important; } /* skld-spotlight.css */ /* SKLD Spotlight + Border Glow — halo lime DOUX qui suit le curseur DANS la carte, plus un bord en dégradé (anneau via mask exclude) qui s'intensifie près du pointeur. 100% vanilla, DA SKLD : OLED, accent lime #9dff3c (rgb 157,255,60), soupçon de chrome argent. S'active sur [data-spotlight] (.card / .panelcard). Auto-init par skld-spotlight.js. Zéro dépendance, zéro emoji. transform/opacity uniquement (jamais width/height/top/left). Idempotent, cartes indépendantes. Le JS ne pose que --mx/--my (px) et --sk-prox (0..1). Fallback (?fx=off / prefers-reduced-motion / pointer:coarse) : aucun suivi, léger halo statique en haut, discret. Les pseudo-éléments ne s'affichent qu'après [data-spot-ready]. */ [data-spotlight]{ /* pilotées par le JS : position curseur (px) + proximité du bord (0 centre .. 1 sur le bord) */ --mx: 50%; --my: -12%; --sk-prox: 0; /* réglages surchargeables (via JS/opts ou style inline) */ --sk-spot-color: 157, 255, 60; /* lime rgb */ --sk-spot-a: .14; /* intensité du halo */ --sk-spot-stop: 42%; /* fin du dégradé radial du halo */ --sk-glow-w: 1px; /* épaisseur du bord lumineux */ --sk-ease: cubic-bezier(.32, .72, 0, 1); /* contexte d'empilement propre : le halo (z-index:-1) passe DERRIÈRE le contenu de la carte */ isolation: isolate; } /* Halo radial doux : peint au-dessus du fond de la carte, sous son contenu. Fondu au survol. */ [data-spotlight][data-spot-ready]::before{ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .40s var(--sk-ease); background: radial-gradient(circle at var(--mx) var(--my), rgba(var(--sk-spot-color), var(--sk-spot-a)), transparent var(--sk-spot-stop)); } /* Bord en dégradé : anneau lime obtenu par mask exclude (padding-box), le plus vif au point le plus proche du curseur ; l'intensité globale monte avec --sk-prox (proximité d'un bord). */ [data-spotlight][data-spot-ready]::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--sk-glow-w); pointer-events: none; opacity: 0; transition: opacity .40s var(--sk-ease); background: radial-gradient(circle 180px at var(--mx) var(--my), rgba(var(--sk-spot-color), calc(.10 + .55 * var(--sk-prox))), rgba(var(--sk-spot-color), .06) 42%, rgba(233, 240, 234, .05) 66%, /* soupçon de chrome argent #e9f0ea */ transparent 82%); /* n'affiche le fond que dans la bande de padding => anneau qui suit les coins arrondis */ -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, linear-gradient(#000 0 0); mask-composite: exclude; } /* Révélation : souris fine uniquement (jamais en tactile). L'opacité reste 100% CSS. */ @media (hover: hover) and (pointer: fine){ [data-spotlight][data-spot-ready]:hover::before{ opacity: 1; } [data-spotlight][data-spot-ready]:hover::after{ opacity: 1; } } /* Mode statique (fallback) : halo discret figé en haut, pas d'anneau de proximité, pas de suivi. */ [data-spotlight][data-spot-static]::before{ opacity: 1; transition: none; background: radial-gradient(120% 62% at 50% -12%, rgba(var(--sk-spot-color), .08), transparent 60%); } [data-spotlight][data-spot-static]::after{ display: none; } /* Reduced-motion : le halo reste (statique côté JS), on coupe juste les transitions. */ @media (prefers-reduced-motion: reduce){ [data-spotlight][data-spot-ready]::before, [data-spotlight][data-spot-ready]::after{ transition: none; } } /* Si mask-composite non supporté, on retire l'anneau (sinon il remplirait toute la carte). */ @supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){ [data-spotlight][data-spot-ready]::after{ display: none; } } /* skld-textpressure.css */ /* SKLD TextPressure — titre « sous pression » : chaque lettre réagit à la souris (vanilla). --------------------------------------------------------------------------------------- Réimplémentation ORIGINALE de l'effet Text Pressure de ReactBits, SANS aucune lib (pas de React, pas de motion/framer, pas de police variable) : le JS découpe le mot en lettres , puis, selon la distance du curseur à chaque lettre, module son ÉCHELLE (transform scale), sa COULEUR (chrome muet -> lime) et snappe sa GRAISSE parmi 400/500/600/700 (Space Grotesk — 4 graisses réelles chargées, PAS de font-variation-settings). Loin = 400, chrome muet, échelle 1. Direction artistique SKLD : fond OLED, lime #9dff3c dominant, chrome argent en repos, Space Grotesk (var --disp). On n'anime QUE transform + color (jamais width/height/top/ left) ; la largeur de chaque lettre est réservée en JS pour que le changement de graisse ne provoque aucun reflow. Aucune police chargée ici, aucun réseau, zéro emoji. Variables (défauts ; surchargées par data-color / data-hot / data-scale côté JS) : --sk-tp-idle couleur au repos / loin (défaut chrome clair) --sk-tp-hot couleur au contact / près (défaut lime #9dff3c) --sk-tp-ease easing des transitions CSS d'appoint prefers-reduced-motion, pointeur grossier (tactile) et ?fx=off : le JS ne monte PAS le moteur ; les lettres restent au poids/échelle de base, lisibles (état ci-dessous). */ [data-textpressure], .sk-tp { --sk-tp-idle: #b9c6bd; /* chrome clair : lisible même statique */ --sk-tp-hot: #9dff3c; /* lime : lettre « sous pression » */ --sk-tp-ease: cubic-bezier(.32, .72, 0, 1); position: relative; /* repère offsetParent pour la mesure des lettres */ color: var(--sk-tp-idle); font-family: var(--disp, "Space Grotesk", system-ui, sans-serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Rangée porteuse des lettres (masquée à l'AT : le nom accessible est sur l'hôte). */ [data-textpressure] .sk-tp__row, .sk-tp .sk-tp__row { display: inline; } /* Mot : les lettres d'un même mot restent ensemble, la ligne ne casse qu'aux espaces. */ [data-textpressure] .sk-tp__w, .sk-tp .sk-tp__w { display: inline; white-space: nowrap; } /* Lettre : inline-block pour recevoir transform + largeur réservée ; base = 400, chrome. */ [data-textpressure] .sk-tp__l, .sk-tp .sk-tp__l { display: inline-block; color: var(--sk-tp-idle); font-weight: 400; transform: scale(1); transform-origin: 50% 52%; text-align: center; overflow: visible; /* la graisse 700 peut légèrement déborder sans clip */ white-space: pre; /* préserve un caractère isolé (espaces, ponctuation) */ backface-visibility: hidden; } /* Moteur actif : on promeut les lettres sur le GPU (posé/retiré par le JS). */ [data-textpressure].sk-tp--live .sk-tp__l, .sk-tp.sk-tp--live .sk-tp__l { will-change: transform, color; } /* Repli statique dur (accessibilité mouvement / tactile) : aucune promotion, base nette. Le JS ne monte de toute façon pas le moteur ; ceci sécurise si le CSS charge seul. */ @media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { [data-textpressure] .sk-tp__l, .sk-tp .sk-tp__l { will-change: auto; transform: none; color: var(--sk-tp-idle); font-weight: 400; } } /* skld-cardswap.css */ /* SKLD Card Swap — empilement 3D rotatif, 100% VANILLA (zéro dépendance, zéro réseau, zéro emoji). --------------------------------------------------------------------------------------------- Le conteneur [data-cardswap] pose la perspective ; ses enfants .sk-swapcard sont empilés en profondeur (translateZ) + décalés (translateX/Y) + légère rotation, formant un éventail. Le JS gère l'ordre, l'éjection périodique et le resize ; le CSS gère l'apparence + la transition (transform + opacity uniquement, jamais width/height/top/left). Palette : OLED #050705 / lime #9dff3c (rgb 157,255,60) / chrome / crème #e8ffe0. */ [data-cardswap]{ position: relative; width: var(--sk-swap-w, 320px); height: var(--sk-swap-h, 420px); perspective: var(--sk-swap-persp, 1100px); transform-style: preserve-3d; /* volontairement PAS d'overflow:hidden : les cartes doivent déborder en 3D */ } [data-cardswap] .sk-swapcard{ position: absolute; top: 50%; left: 50%; width: var(--sk-swap-w, 320px); height: var(--sk-swap-h, 420px); margin: 0; box-sizing: border-box; transform-origin: center center; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; /* pose de base ; le JS surcharge transform/opacity/z-index par emplacement */ transform: translate(-50%, -50%); transition: transform 700ms cubic-bezier(.32,.72,0,1), opacity 320ms cubic-bezier(.32,.72,0,1); /* peau OLED + liseré chrome/lime discret ; le contenu reste libre */ border-radius: 16px; background: linear-gradient(158deg, #070a06 0%, #050705 58%, #020301 100%); border: 1px solid rgba(157,255,60,.15); box-shadow: 0 34px 60px -26px rgba(0,0,0,.85), 0 8px 22px -14px rgba(0,0,0,.72), inset 0 1px 0 rgba(233,240,234,.06), inset 0 0 0 1px rgba(2,3,1,.55); overflow: hidden; color: #e8ffe0; -webkit-tap-highlight-color: transparent; } /* hairline lime en haut de carte (accent chrome/lime, très discret) */ [data-cardswap] .sk-swapcard::before{ content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(157,255,60,.55), transparent); opacity: .5; pointer-events: none; } /* léger halo chrome sur le bord bas-droit (profondeur métallique) */ [data-cardswap] .sk-swapcard::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at 15% 0%, rgba(233,240,234,.05), transparent 45%); } /* Pendant l'init et le resize : on fige les transitions pour éviter tout "vol" initial. */ [data-cardswap].sk-cardswap-init .sk-swapcard{ transition: none !important; } /* Reduced-motion : jamais d'animation (le JS a déjà désactivé l'auto-rotation). */ @media (prefers-reduced-motion: reduce){ [data-cardswap] .sk-swapcard{ transition: none; } } /* Mise à l'échelle douce sur petits écrans (transform uniquement). */ @media (max-width: 768px){ [data-cardswap]{ transform: scale(.8); } } @media (max-width: 480px){ [data-cardswap]{ transform: scale(.62); } } /* skld-specular.css */ /* ===================================================================== SKLD Specular Button — le bouton "spéculaire" reactbits en vanilla. S'applique à TOUS les .btn (+ [data-specular]) sans toucher au HTML. Surface verre sombre, bord spéculaire 1px qui suit le curseur, balayage chrome au hover, .btn.pri en fond lime. Palette stricte : OLED / lime 157,255,60 / sapin / chrome argent / crème. Charger APRÈS skald.css et skld-polish.css (cascade = ce fichier gagne). ===================================================================== */ :root{ --sk-chrome-hi:#e9f0ea; /* chrome clair */ --sk-chrome-mid:#aab4ad; /* chrome moyen */ --sk-chrome-lo:#6f7a72; /* chrome sombre */ --sk-lime:157,255,60; /* lime rgb */ --sk-cream:232,255,224; /* crème rgb */ } /* --- Surface commune : verre sombre OLED ---------------------------- */ .btn,[data-specular]{ position:relative; overflow:hidden; /* clippe le streak ; rim reste au bord */ isolation:isolate; /* contexte d'empilement propre */ --mx:.5; --my:.5; --prox:0; /* injectés par le JS (curseur) */ transition:transform .2s cubic-bezier(.32,.72,0,1), box-shadow .3s cubic-bezier(.32,.72,0,1), border-color .25s, background .25s; } /* Fond verre uniquement pour les boutons secondaires (pri garde le lime) */ .btn:not(.pri),[data-specular]:not(.pri){ background:linear-gradient(180deg,rgba(20,26,18,.55),rgba(5,7,5,.66)); -webkit-backdrop-filter:blur(9px) saturate(115%); backdrop-filter:blur(9px) saturate(115%); border:1px solid rgba(var(--sk-cream),.10); color:var(--cream,#eefbe6); box-shadow:inset 0 1px 0 rgba(var(--sk-cream),.05), 0 8px 22px -16px rgba(0,0,0,.85); } /* Bouton primaire : fond lime + encre sombre ------------------------- */ .btn.pri,[data-specular].pri{ background:linear-gradient(135deg,#b7ff64,rgb(var(--sk-lime)) 62%); color:var(--green-ink,#08110a); border:1px solid rgba(var(--sk-cream),.22); font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 28px -14px rgba(var(--sk-lime),.5); } /* --- Bord spéculaire (rim 1px) qui SUIT le curseur ------------------ */ /* Astuce bordure-dégradé : fond en padding-box, masqué pour ne garder que l'anneau de 1px. Le highlight radial est posé en (--mx,--my). */ .btn::before,[data-specular]::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; border-radius:inherit;padding:1px; background: radial-gradient(60% 90% at calc(var(--mx)*100%) calc(var(--my)*100%), rgba(var(--sk-cream),.95) 0%, rgba(var(--sk-lime),.55) 28%, rgba(170,180,173,.28) 50%, transparent 70%), linear-gradient(120deg, rgba(233,240,234,.30), rgba(var(--sk-lime),.14) 40%, rgba(111,122,114,.30) 72%, rgba(233,240,234,.22)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:calc(.30 + .70*var(--prox)); /* s'illumine à l'approche */ transition:opacity .3s cubic-bezier(.32,.72,0,1); } /* Rim chrome plus marqué sur le primaire */ .btn.pri::before,[data-specular].pri::before{ background: radial-gradient(60% 90% at calc(var(--mx)*100%) calc(var(--my)*100%), rgba(255,255,255,.98) 0%, rgba(233,240,234,.7) 26%, rgba(170,180,173,.35) 52%, transparent 72%), linear-gradient(120deg, rgba(233,240,234,.55), rgba(170,180,173,.30) 45%, rgba(111,122,114,.42) 75%, rgba(233,240,234,.5)); opacity:calc(.45 + .55*var(--prox)); } /* --- Balayage spéculaire (streak chrome clair) au hover ------------- */ /* Remplace/écrase l'ancien streak de skld-polish (::after, même sélecteur). */ .btn::after,[data-specular]::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; border-radius:inherit; background:linear-gradient(115deg, transparent 30%, rgba(233,240,234,.0) 42%, rgba(233,240,234,.58) 50%, rgba(var(--sk-lime),.34) 56%, transparent 72%); transform:translateX(-140%); transition:transform .8s cubic-bezier(.32,.72,0,1); } .btn:hover::after,[data-specular]:hover::after, .btn:focus-visible::after,[data-specular]:focus-visible::after{ transform:translateX(140%); } .btn.pri::after,[data-specular].pri::after{ background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.0) 42%, rgba(255,255,255,.75) 50%, rgba(233,240,234,.4) 56%, transparent 72%); } /* --- États : lift au hover, enfoncement à l'appui ------------------- */ .btn:hover,[data-specular]:hover{transform:translateY(-2px)} .btn:not(.pri):hover,[data-specular]:not(.pri):hover{ border-color:rgba(var(--sk-lime),.5); color:var(--green,#9dff3c); box-shadow:inset 0 1px 0 rgba(var(--sk-cream),.06), 0 12px 30px -14px rgba(var(--sk-lime),.42); } .btn.pri:hover,[data-specular].pri:hover{ color:var(--green-ink,#08110a); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 14px 36px -12px rgba(var(--sk-lime),.6); } .btn:active,[data-specular]:active{transform:translateY(0) scale(.97)} .btn:disabled,.btn[disabled],[data-specular][disabled]{ opacity:.4;cursor:not-allowed;transform:none; } .btn:disabled::after,.btn[disabled]::after{transform:translateX(-140%)} /* --- Cercle d'icône (flèche) qui se translate au hover -------------- */ .btn .btn-ico,[data-specular] .btn-ico{ display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;flex:0 0 auto;border-radius:50%; background:rgba(var(--sk-cream),.08); border:1px solid rgba(var(--sk-cream),.20); transition:transform .3s cubic-bezier(.32,.72,0,1), background .25s,border-color .25s; } .btn .btn-ico svg,[data-specular] .btn-ico svg{width:12px;height:12px;display:block} .btn:hover .btn-ico,[data-specular]:hover .btn-ico{ transform:translate(3px,-1px); background:rgba(var(--sk-lime),.16); border-color:rgba(var(--sk-lime),.4); } .btn.pri .btn-ico,[data-specular].pri .btn-ico{ background:rgba(8,17,10,.14);border-color:rgba(8,17,10,.28); } .btn.pri:hover .btn-ico{background:rgba(8,17,10,.22)} /* --- Bouton hero WebGL : le glow doit déborder du cadre ------------- */ .btn[data-specular-gl]{overflow:visible} .btn[data-specular-gl] canvas.sk-spec-gl{ position:absolute;inset:-20px;z-index:-2;pointer-events:none; border-radius:inherit; } /* --- Accessibilité : reduced-motion / pointeur grossier ------------- */ @media (prefers-reduced-motion:reduce){ .btn,[data-specular]{transition:none} .btn::after,[data-specular]::after{display:none} .btn:hover,[data-specular]:hover{transform:none} .btn .btn-ico,[data-specular] .btn-ico{transition:none} .btn:hover .btn-ico,[data-specular]:hover .btn-ico{transform:none} } @media (pointer:coarse){ /* Le rim reste discret et fixe (pas de suivi curseur au tactile). */ .btn::before,[data-specular]::before{opacity:.4} .btn.pri::before,[data-specular].pri::before{opacity:.55} } /* skld-pillnav.css */ /* SKLD Header — RAIL à indicateur glissant (variante A choisie par le fondateur). Barre fixe fine, capsule centrale avec UN indicateur qui glisse au survol et se cale sur la page active (point lime discret). Se compacte au scroll. Dark premium, lime en accent. transform+opacity only → aucun artefact au scroll. Le menu mobile réutilise le .mnav plein écran déjà présent dans base.html. */ :root{ --hdr-h:66px; --hdr-ease:cubic-bezier(.32,.72,0,1); } /* le contenu passe sous la barre fixe */ main{ padding-top: var(--hdr-h); } .hdr{ position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--hdr-h); display: flex; align-items: center; gap: 22px; padding: 0 clamp(16px, 4vw, 44px); background: linear-gradient(180deg, rgba(4,6,4,.60), rgba(4,6,4,.14)); border-bottom: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); transition: background .45s var(--hdr-ease), border-color .45s var(--hdr-ease), height .45s var(--hdr-ease); } .hdr.scrolled{ height: 56px; background: linear-gradient(180deg, rgba(3,5,3,.94), rgba(3,5,3,.8)); border-bottom-color: var(--line); } /* Marque */ .hdr .brand{ display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; } /* LE LOGO PORTE LA MARQUE : 40 px sur ordinateur, 32 sur mobile (le fondateur : « beaucoup plus gros »). */ .hdr .brand img{ height: 44px; width: auto; filter: drop-shadow(0 0 12px rgba(157,255,60,.28)); transition: transform var(--t-2, .24s) var(--ease); } .hdr .brand:hover img{ transform: scale(1.04); } .hdr.scrolled .brand img{ height: 36px; } @media (max-width:520px){ .hdr .brand img{ height: 32px; } } .hdr .brand .wm{ font-family: var(--disp); font-weight: 700; font-size: 20px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); } @media (max-width:520px){ .hdr .brand .wm{ display:none } } /* Rail central */ /* LA RAIL CÈDE AVANT LES COMMANDES, ET C'ÉTAIT UN VRAI BUG. Tout l'en-tête était incompressible : la marque, la rail et la zone de droite en `flex-shrink:0`, le pouls en `flex:none`. Mesuré à 1100 px de large, l'en-tête occupait 1212 px — le bouton du salon dépassait de 39 px et LE MENU DU COMPTE ÉTAIT ENTIÈREMENT HORS ÉCRAN. Un joueur sur un portable de 13 pouces perdait l'accès à son compte, à ses réglages et à sa déconnexion, sans rien pour le lui signaler. La rail est ce qui doit céder : ses destinations restent atteignables en la faisant défiler, alors que le menu du compte n'a aucun remplaçant. */ .rail{ /* PAS D'OVERFLOW ICI. J'avais rendu la rail défilante pour qu'elle cède avant le menu du compte : `overflow-y:hidden` DÉCOUPAIT alors les panneaux déroulants de « Tournois » et « Classement », qui pendent sous elle. Les menus ne s'ouvraient plus. Une barre de navigation ne peut pas être un conteneur à débordement tant qu'elle contient ses propres menus. La place se reprend autrement : les entrées secondaires s'effacent. */ position: relative; display: flex; align-items: center; gap: 2px; margin: 0 auto; min-width: 0; max-width: 100%; padding: 4px; list-style: none; border: 1px solid var(--line); border-radius: 999px; background: rgba(230,238,232,.016); } /* Les onglets ne rétrécissent pas : un libellé coupé en deux ne se lit plus. Ce sont des entrées entières qui s'effacent, dans un ordre choisi. */ .rail > a, .rail > .zone{ flex: none } /* LA PLACE SE REPREND PAR LA FIN. « Partenaires » puis « Structures » quittent la barre quand l'écran se resserre — elles restent atteignables depuis le tiroir mobile et le pied de page. Le menu du compte, lui, n'a aucun remplaçant : c'est lui qu'on protège. */ @media (max-width:1240px){ .rail .rail--dernier{ display:none } } @media (max-width:1120px){ .rail .rail--secondaire{ display:none } } .rail__ind{ position: absolute; top: 4px; bottom: 4px; left: 0; width: 100px; z-index: 0; border-radius: 999px; transform-origin: left center; opacity: 0; pointer-events: none; will-change: transform, opacity; background: linear-gradient(180deg, rgba(230,238,232,.10), rgba(230,238,232,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px -10px rgba(0,0,0,.9); transition: transform .52s var(--hdr-ease), opacity .35s var(--hdr-ease); } .rail a{ position: relative; z-index: 1; display: inline-flex; align-items: center; height: 34px; padding: 0 17px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color .35s var(--hdr-ease); } .rail a:hover{ color: var(--cream); } .rail a.is-active{ color: var(--cream); } .rail a.is-active::after{ content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); transform: translateX(-50%); box-shadow: 0 0 8px rgba(157,255,60,.7); } /* Bloc droit : profil / connexion + burger */ .hdr .right{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .hdr .right .hprofile{ display: flex; align-items: center; gap: 9px; } .hdr .right .avatar{ width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line2); object-fit: cover; } .hdr .right .mono{ font-size: 12px; color: var(--muted); } .hdr .right form{ margin: 0; } .hdr .burger{ display: none; width: 42px; height: 42px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(230,238,232,.03); cursor: pointer; } .hdr .burger span{ display:block; width: 18px; height: 2px; border-radius: 2px; background: var(--cream); transition: transform .34s var(--hdr-ease), opacity .2s var(--hdr-ease); } .hdr .burger.x span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .hdr .burger.x span:nth-child(2){ opacity: 0; } .hdr .burger.x span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } @media (max-width:900px){ .rail{ display:none; } .hdr .burger{ display:flex; } .hdr .right .hprofile .mono{ display:none; } .hdr .right form{ display:none; } /* la déconnexion vit dans le menu mobile */ } @media (hover:none),(pointer:coarse){ .rail a:hover{ color: var(--muted); } } @media (prefers-reduced-motion:reduce){ .rail__ind, .hdr, .rail a, .hdr .burger span{ transition-duration:.001ms !important; } } html.fx-off .rail__ind, html.fx-off .hdr, html.fx-off .rail a, html.fx-off .hdr .burger span{ transition:none !important; } /* ================================================================== */ /* RETOUR FONDATEUR — retirer les effets « cloud IA » (global, gagne */ /* la cascade car chargé en dernier). */ /* ================================================================== */ /* 1) La « tache de lumière » (halo/orbes) — retirée / quasi éteinte */ body::after{ display: none !important; } /* PERF (mesuré) : les orbes sont DÉJÀ des dégradés radiaux (transparent à 62%), donc le filter:blur() empilé par-dessus était redondant — mais il forçait le GPU à recalculer un flou de 150px sur des éléments de 820x820 et 620x620 À CHAQUE FRAME, sur toutes les pages. Coût mesuré : 40 fps au lieu de 61 au repos (-35%). C'est aussi ce qui faisait ramer/trembler les machines à GPU faible (Windows). Le flou et le blend sont retirés, l'opacité est relevée pour un rendu équivalent ; la dérive reste (transform seul = quasi gratuit). */ .bgfx .orb{ opacity:.11 !important; filter:none !important; mix-blend-mode:normal !important; } /* 2) Boutons : plus de trait blanc qui balaie et « saute » sur l'autre bouton */ .btn::after{ display: none !important; } /* 3) Eyebrows / petits labels : fini le vert mono criard « très Claude » -> label sobre premium */ .eye{ color: var(--muted) !important; font-weight: 500 !important; letter-spacing: .24em; } .eye::before{ background: linear-gradient(90deg, rgba(230,238,232,.42), transparent) !important; box-shadow: none !important; } /* 4) true-focus (au cas où) : aucun cadre/équerre qui balaie ; mots toujours nets */ [data-truefocus] .sk-tf__frame, [data-truefocus] .sk-tf__corner{ display: none !important; } [data-truefocus] .sk-tf__word{ opacity: 1 !important; filter: none !important; } /* ------------------------------------------------- QUAND LA BARRE NE TIENT PLUS La barre DÉFILE quand ses onglets dépassent — c'est le bon choix : écraser les libellés les rendrait illisibles. Mais l'ascenseur est masqué, donc rien n'indiquait qu'il restait des onglets à droite : sur un écran de 13 pouces, deux entrées disparaissaient purement et simplement du champ de vision. Deux réponses, dans cet ordre. D'abord on RESSERRE, pour que le cas ne se produise pas : sous 1200 px les onglets se rapprochent et tout rentre. Ensuite, si ça déborde quand même (police agrandie, langue plus verbeuse), un dégradé sur le bord dit qu'il y a une suite — l'œil comprend qu'il peut faire défiler. */ @media (max-width:1200px){ .rail a{ padding:0 11px; letter-spacing:.07em; } .rail{ gap:0; } } @media (max-width:1040px){ .rail a{ padding:0 9px; font-size:11.5px; } } /* Le dégradé n'apparaît que si du contenu est réellement caché (classe posée par skld-pillnav.js) : un estompage permanent ferait croire à un débordement permanent, et abîmerait la barre dans le cas courant où tout tient. */ .rail.has-suite-droite{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%); } .rail.has-suite-gauche{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 100%); mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 100%); } .rail.has-suite-gauche.has-suite-droite{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%); } /* skld-magnet.css */ /* SKLD Magnet — attraction magnétique douce vers le curseur (vanilla, DA SKLD). ----------------------------------------------------------------------------- Porté depuis reactbits.dev/animations/magnet, réécrit sans React : - [data-magnet] : l'élément est LÉGÈREMENT tiré vers le curseur quand il approche (translate spring, amplitude ~6–10px, jamais caricatural), retour élastique au leave. - Pression : scale(.96) au clic (feedback premium, court). À poser sur .btn et cartes / liens clés (Claude câble les attributs, ne touche pas les templates). Le JS (skld-magnet.js) pose transform + transition en inline (transform-only, GPU). Ce CSS ne fait qu'assurer l'origine, le lissage GPU et le nettoyage — AUCUN ajout visuel (pas de couleur, pas de fond) : l'effet reste DISCRET, il ne concurrence jamais le contenu. Débrayé (aucun transform posé) si : ?fx=off | prefers-reduced-motion | pointer: coarse (tactile). */ [data-magnet]{ /* origine centrée : l'attraction et le scale de pression partent du milieu de l'élément */ transform-origin: 50% 50%; } /* Marqueur posé par le JS uniquement pendant qu'un magnet est "vivant" (proche/pressé) : on n'active will-change que le temps de l'interaction pour ne pas garder une couche GPU inutile au repos (perf mobile). */ [data-magnet].sk-magnet-live{ will-change: transform; backface-visibility: hidden; } /* skld-chromagrid.css */ /* SKLD ChromaGrid — grille de cartes où un spot révèle la carte sous le curseur. * Technique (portée de reactbits ChromaGrid, 100% CSS, sans GSAP) : * - hors du spot, TOUTE la grille est légèrement désaturée + assombrie ; * - sous le curseur, un trou radial dans ce calque « rend » la carte à sa couleur * (vert sapin) et un halo lime/chrome LÉGER s'allume dans la carte survolée. * Le JS ne fait que : injecter les calques + poser --sk-x/--sk-y (centre du spot, px) * et --sk-mx/--sk-my (souris locale à la carte, px). Aucune couleur criarde. DARK & DISCRET. * * Usage : *
*
...
*
...
*
* * */ [data-chromagrid]{ position: relative; /* ancre les calques absolus (posé aussi par le JS) */ --sk-x: 50%; /* centre du spot (px, piloté par le JS) */ --sk-y: 50%; --sk-r: 240px; /* rayon du spot */ --sk-cg-lime: 157,255,60; /* #9dff3c — accent lime LÉGER */ --sk-cg-chrome: 210,224,230; /* blanc cassé froid / chrome */ } /* ------------------------------------------------------------------ */ /* Halo lime/chrome par carte (élément ) */ /* ------------------------------------------------------------------ */ [data-chromagrid] .sk-chip{ position: relative; } /* ancre le halo interne */ .sk-chroma-halo{ position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; opacity: 0; transition: opacity .45s cubic-bezier(.32,.72,0,1); /* halo doux : coeur lime -> chrome -> transparent, alpha volontairement bas */ background: radial-gradient(220px circle at var(--sk-mx,50%) var(--sk-my,50%), rgba(var(--sk-cg-lime), .12), rgba(var(--sk-cg-chrome), .05) 38%, transparent 66%); mix-blend-mode: screen; /* lumineux et discret sur fond sombre */ } @media (hover:hover) and (pointer:fine){ [data-chromagrid] .sk-chip:hover .sk-chroma-halo{ opacity: 1; } } /* Liseré lime très léger sur la carte survolée (additif, ne bouge pas le layout) */ [data-chromagrid] .sk-chip{ transition: box-shadow .3s ease; } @media (hover:hover) and (pointer:fine){ [data-chromagrid] .sk-chip:hover{ box-shadow: 0 0 0 1px rgba(var(--sk-cg-lime), .16), 0 18px 40px -22px rgba(0,0,0,.85); } } /* ------------------------------------------------------------------ */ /* Calques de révélation (désaturation + assombrissement masqués) */ /* ------------------------------------------------------------------ */ .sk-chroma-overlay, .sk-chroma-fade{ position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: rgba(0,0,0,.001); /* quasi-transparent : le filtre fait le travail */ -webkit-backdrop-filter: grayscale(.9) brightness(.82); backdrop-filter: grayscale(.9) brightness(.82); } /* Calque permanent : trou net au niveau du spot, désaturé sur les bords */ .sk-chroma-overlay{ z-index: 5; -webkit-mask-image: radial-gradient(circle var(--sk-r) at var(--sk-x) var(--sk-y), transparent 0%, transparent 16%, rgba(0,0,0,.12) 34%, rgba(0,0,0,.28) 52%, rgba(0,0,0,.46) 70%, rgba(0,0,0,.66) 86%, #000 100%); mask-image: radial-gradient(circle var(--sk-r) at var(--sk-x) var(--sk-y), transparent 0%, transparent 16%, rgba(0,0,0,.12) 34%, rgba(0,0,0,.28) 52%, rgba(0,0,0,.46) 70%, rgba(0,0,0,.66) 86%, #000 100%); } /* Calque « fondu » : masque inversé (plein au centre) dont on pilote l'opacité. Pointeur absent -> opacity 1 -> TOUTE la grille assombrie. Pointeur présent ([data-sk-active]) -> opacity 0 -> le spot révèle. */ .sk-chroma-fade{ z-index: 6; opacity: 1; transition: opacity .55s cubic-bezier(.32,.72,0,1); -webkit-mask-image: radial-gradient(circle var(--sk-r) at var(--sk-x) var(--sk-y), #000 0%, #000 16%, rgba(0,0,0,.88) 34%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.54) 70%, rgba(0,0,0,.34) 86%, transparent 100%); mask-image: radial-gradient(circle var(--sk-r) at var(--sk-x) var(--sk-y), #000 0%, #000 16%, rgba(0,0,0,.88) 34%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.54) 70%, rgba(0,0,0,.34) 86%, transparent 100%); } [data-chromagrid][data-sk-active] .sk-chroma-fade{ opacity: 0; transition: opacity .25s cubic-bezier(.32,.72,0,1); } /* Repli sans backdrop-filter (vieux navigateurs) : assombrir via une couleur charbon */ [data-chromagrid].sk-chroma--nobd .sk-chroma-overlay, [data-chromagrid].sk-chroma--nobd .sk-chroma-fade{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8,12,10,.60); /* charbon très sombre, légère teinte sapin */ } /* ------------------------------------------------------------------ */ /* Mode statique : fx=off / prefers-reduced-motion / tactile */ /* -> aucun calque, aucun halo, cartes pleines et lisibles. */ /* ------------------------------------------------------------------ */ [data-chromagrid][data-sk-static] .sk-chroma-overlay, [data-chromagrid][data-sk-static] .sk-chroma-fade, [data-chromagrid][data-sk-static] .sk-chroma-halo{ display: none; } @media (prefers-reduced-motion: reduce){ .sk-chroma-halo, .sk-chroma-fade{ transition: none; } } /* skld-scrollexpand.css */ /* SKLD Scroll Expand — storytelling au scroll, 100% VANILLA (zéro dépendance, zéro réseau, zéro emoji). ------------------------------------------------------------------------------------------------------ Un média (image ou vidéo) part d'un petit cadre arrondi centré et se DÉPLOIE jusqu'à remplir l'écran pendant que la section est épinglée (position: sticky). Le titre s'écarte puis s'efface, une narration se révèle ligne à ligne au fur et à mesure de l'expansion. Principe : le JS n'écrit QU'UNE variable par frame -> --sk-se-p (progression 0..1). Toutes les interpolations (échelle du média, arrondi, écartement du titre, reveal des lignes, voile) sont faites ICI en calc(var(...)) : recalcul de style sur un tout petit sous-arbre, GPU-friendly. Le mouvement lourd reste en transform + opacity ; l'arrondi (border-radius) est le seul autre tween, volontairement léger, indispensable au rendu « petite carte -> plein cadre ». Coupures : .sk-se-static (posé par le JS sur ?fx=off ou prefers-reduced-motion) fige tout, lisible, sans scroll-scrub ni hauteur géante. pointer:coarse -> l'effet RESTE actif (c'est un scroll-effect, pensé mobile). Rien ici ne touche skald.css / polish / base.html. DARK & DISCRET. */ .sk-se { /* réglages (surchargés par data-* ou opts JS) */ --sk-se-scroll: 1.1; /* longueur du scroll pendant le pin, en hauteurs d'écran */ --sk-se-min: .34; /* échelle de départ du média (0..1) */ --sk-se-spread: 8vw; /* écartement des mots du titre à pleine expansion */ --sk-se-round: 26px; /* arrondi du média replié */ --sk-se-p: 0; /* progression 0..1 — ÉCRITE par le JS */ position: relative; /* section plus haute que l'écran : la différence = distance de scroll épinglé */ height: calc((1 + var(--sk-se-scroll)) * 100vh); } @media (min-width: 721px) { .sk-se { --sk-se-spread: clamp(60px, 9vw, 190px); } } /* ---------------------------------------------------------------- scène épinglée */ .sk-se-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: grid; place-items: center; isolation: isolate; background: var(--bg, #060806); } /* ---------------------------------------------------------------- média qui se déploie */ .sk-se-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; transform-origin: 50% 50%; /* échelle : de --sk-se-min (petit) à 1 (plein cadre) — transform pur, sans distorsion */ transform: translateZ(0) scale(calc(var(--sk-se-min) + (1 - var(--sk-se-min)) * var(--sk-se-p))); border-radius: calc((1 - var(--sk-se-p)) * var(--sk-se-round)); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(238, 251, 230, .06); will-change: transform, border-radius; } .sk-se-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg2, #0a0d0a); } /* voile de lisibilité (dans le média -> se met à l'échelle avec lui) : centre transparent pour laisser voir l'image, bords et bas assombris pour le texte. */ .sk-se-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(125% 82% at 50% 42%, transparent 38%, rgba(6, 8, 6, .55) 100%), linear-gradient(180deg, rgba(6, 8, 6, .32) 0%, transparent 28%, transparent 60%, rgba(6, 8, 6, .74) 100%); opacity: calc(.5 + var(--sk-se-p) * .18); } /* ---------------------------------------------------------------- titre (s'écarte puis s'efface) */ .sk-se-lead { position: relative; z-index: 2; text-align: center; padding: 0 6vw; pointer-events: none; /* présent tôt, s'efface vers la fin de l'expansion (crossfade avec la narration) */ opacity: clamp(0, calc((.92 - var(--sk-se-p)) / .28), 1); } .sk-se-kicker { font: 600 clamp(11px, 1.4vw, 13px)/1 var(--mono, ui-monospace, monospace); letter-spacing: .42em; text-transform: uppercase; color: var(--green, #9dff3c); margin: 0 0 clamp(14px, 2vw, 22px); /* petite montée + fondu d'entrée au tout début */ opacity: clamp(0, calc(var(--sk-se-p) / .16), 1); transform: translateY(calc((1 - clamp(0, calc(var(--sk-se-p) / .16), 1)) * 14px)); } .sk-se-title { margin: 0; font: 800 clamp(48px, 13vw, 168px)/.92 var(--head, system-ui, sans-serif); letter-spacing: -.02em; color: var(--cream, #eefbe6); display: flex; gap: .28em; justify-content: center; flex-wrap: nowrap; text-shadow: 0 4px 40px rgba(0, 0, 0, .55); } .sk-se-w { display: inline-block; will-change: transform; } /* les deux mots s'éloignent du centre à mesure que le média grandit */ .sk-se-w[data-se-side="l"] { transform: translateX(calc(var(--sk-se-p) * var(--sk-se-spread) * -1)); } .sk-se-w[data-se-side="r"] { transform: translateX(calc(var(--sk-se-p) * var(--sk-se-spread))); } /* ---------------------------------------------------------------- narration révélée en bas */ .sk-se-copy { position: absolute; left: 0; right: 0; bottom: clamp(28px, 7vh, 88px); z-index: 2; padding: 0 8vw; text-align: center; pointer-events: none; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 16px); } /* chaque [data-se-reveal] apparaît quand la progression dépasse son seuil échelonné (--sk-se-i) */ .sk-se [data-se-reveal] { --lp: clamp(0, calc((var(--sk-se-p) - (.48 + var(--sk-se-i, 0) * .1)) / .24), 1); opacity: var(--lp); transform: translateY(calc((1 - var(--lp)) * 22px)); will-change: opacity, transform; } .sk-se-copy [data-se-reveal] { margin: 0; font: 500 clamp(14px, 2vw, 19px)/1.5 var(--body, system-ui, sans-serif); color: var(--cream, #eefbe6); text-shadow: 0 2px 20px rgba(0, 0, 0, .6); } .sk-se-copy [data-se-reveal] strong { color: var(--green, #9dff3c); font-weight: 700; } /* ---------------------------------------------------------------- indice de scroll (optionnel) */ .sk-se-hint { position: absolute; left: 50%; bottom: clamp(20px, 4.5vh, 50px); z-index: 3; width: 22px; height: 34px; margin-left: -11px; border: 1.5px solid rgba(238, 251, 230, .32); border-radius: 12px; pointer-events: none; /* disparaît dès qu'on commence à scroller */ opacity: clamp(0, calc((.06 - var(--sk-se-p)) / .06), 1); } .sk-se-hint::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--green, #9dff3c); animation: sk-se-bob 1.5s cubic-bezier(.32, .72, 0, 1) infinite; } @keyframes sk-se-bob { 0%, 100% { transform: translateY(0); opacity: .35; } 45% { transform: translateY(11px); opacity: 1; } } /* ---------------------------------------------------------------- mode statique (fx=off / reduced) */ .sk-se.sk-se-static { height: auto; } .sk-se.sk-se-static .sk-se-stage { position: static; height: auto; display: block; padding: clamp(40px, 8vh, 90px) var(--gut, 5vw); } .sk-se.sk-se-static .sk-se-media { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 8; transform: none; border-radius: 20px; margin: 0 0 clamp(22px, 4vh, 38px); } .sk-se.sk-se-static .sk-se-scrim { opacity: .42; } .sk-se.sk-se-static .sk-se-lead { position: static; opacity: 1; } .sk-se.sk-se-static .sk-se-kicker { opacity: 1; transform: none; } .sk-se.sk-se-static .sk-se-w { transform: none; } .sk-se.sk-se-static .sk-se-copy { position: static; margin-top: clamp(18px, 4vh, 32px); } .sk-se.sk-se-static [data-se-reveal] { opacity: 1; transform: none; } .sk-se.sk-se-static .sk-se-hint { display: none; } /* sécurité supplémentaire : aucune animation résiduelle en reduced-motion */ @media (prefers-reduced-motion: reduce) { .sk-se-hint::after { animation: none; } } /* skld-flowingmenu.css */ /* SKLD Flowing Menu — liste de liens « premium » où, au survol d'une ligne, une BANDE colorée coule depuis le bord le plus proche du curseur et un texte défile (marquee) en révélation. 100% VANILLA (zéro dépendance, zéro réseau, zéro emoji). --------------------------------------------------------------------------------------- Porté de reactbits.dev/components/flowing-menu, réécrit sans React ni GSAP : - Structure attendue : [data-flowingmenu] > .sk-flow-item (chaque item est/contient un lien). - Le JS (skld-flowingmenu.js) injecte dans chaque item une couche .sk-flow-marquee (bande) qui reste cachée sous/au-dessus de la ligne, révélée au survol depuis le bord le plus proche du curseur ; à l'intérieur un ruban défile en boucle (translateX). - Le CSS ne gère QUE l'apparence + les transitions (transform/opacity only, GPU) ; le JS ne fait que basculer les transforms de révélation et régler la durée du défilé. DA SKLD (DARK & DISCRET) : fond charbon/sapin DOMINANT, lime = accent LÉGER (liseré), chrome/crème pour le texte. La bande n'écrase jamais le contenu : elle reste sombre, juste rehaussée d'un filet lime. ZÉRO orange/ambre. Palette : reprend les tokens du site (--panel2 / --raise / --cream / --green / --line) avec repli autonome si le composant est utilisé hors page SKLD. Débrayé proprement (bande jamais construite, liens 100% naturels) si : ?fx=off | prefers-reduced-motion: reduce | pointer: coarse (tactile). */ [data-flowingmenu]{ /* Variables surchargeables par l'auteur (toutes avec repli). */ --skf-row-min: 3.6rem; /* hauteur mini d'une ligne */ --skf-band: var(--panel2, #141a12); /* fond de la bande (sapin sombre) */ --skf-band2: var(--bg2, #0a0d0a); /* bas de dégradé de la bande */ --skf-text: var(--cream, #eefbe6); /* texte du marquee (chrome/crème) */ --skf-link: var(--cream, #eefbe6); /* couleur du libellé au repos */ --skf-link-dim: var(--muted, #828b7b); /* libellé légèrement atténué */ --skf-accent: var(--green, #9dff3c); /* liseré lime (accent LÉGER) */ --skf-line: var(--line, rgba(238,251,230,.07)); /* séparateurs entre lignes */ --skf-dur: .55s; /* durée de la révélation */ --skf-ease: cubic-bezier(.32,.72,0,1); /* courbe (net, premium) */ display: flex; flex-direction: column; margin: 0; padding: 0; border: 1px solid var(--skf-line); border-radius: 16px; overflow: hidden; /* clippe les bandes aux coins arrondis */ background: transparent; list-style: none; } /* ---- Ligne / item -------------------------------------------------------------------- */ [data-flowingmenu] .sk-flow-item{ position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--skf-row-min); padding: .5rem 1.25rem; overflow: hidden; /* la bande ne déborde jamais de la ligne */ text-align: center; isolation: isolate; /* contexte d'empilement propre à la ligne */ } [data-flowingmenu] .sk-flow-item + .sk-flow-item, [data-flowingmenu] .sk-flow-item:not(:first-child){ border-top: 1px solid var(--skf-line); } /* Libellé visible (l'item lui-même s'il est un , ou un /.sk-flow-link à l'intérieur). */ [data-flowingmenu] .sk-flow-item, [data-flowingmenu] .sk-flow-link{ font-family: var(--head, "Bricolage Grotesque", system-ui, sans-serif); font-weight: 600; font-size: clamp(1rem, 2.2vw, 1.55rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; color: var(--skf-link); text-decoration: none; } /* Un éventuel lien interne hérite du style de la ligne. */ [data-flowingmenu] .sk-flow-item > a, [data-flowingmenu] .sk-flow-link{ position: relative; z-index: 0; color: inherit; text-decoration: none; transition: color .35s var(--skf-ease); } /* Repli d'accessibilité (marche AUSSI en mode statique / tactile / reduced-motion) : un simple passage en lime au survol, discret, sans dépendre du JS. */ [data-flowingmenu] .sk-flow-item:hover, [data-flowingmenu] .sk-flow-item:hover > a, [data-flowingmenu] .sk-flow-item:focus-within > a{ color: var(--skf-accent); } /* Focus clavier lisible (liseré lime discret). */ [data-flowingmenu] .sk-flow-item > a:focus-visible, [data-flowingmenu] .sk-flow-link:focus-visible{ outline: 2px solid var(--skf-accent); outline-offset: -4px; border-radius: 6px; } /* ---- Bande (marquee) injectée par le JS ---------------------------------------------- */ [data-flowingmenu] .sk-flow-marquee{ position: absolute; inset: 0; z-index: 1; /* au-dessus du libellé une fois révélée */ overflow: hidden; pointer-events: none; /* n'intercepte jamais le clic du lien */ transform: translateY(101%); /* caché sous la ligne au repos */ transition: transform var(--skf-dur) var(--skf-ease); will-change: transform; /* fond sapin sombre + liseré lime en tête de bande (accent LÉGER) */ background: linear-gradient(180deg, var(--skf-band) 0%, var(--skf-band2) 100%); box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--skf-accent) 55%, transparent); } /* Repli si color-mix indisponible : filet lime discret via bordure. */ @supports not (background: color-mix(in srgb, red, blue)){ [data-flowingmenu] .sk-flow-marquee{ box-shadow: inset 0 1px 0 0 rgba(157,255,60,.4); } } /* Contre-mouvement vertical (l'intérieur entre par le bord opposé → effet « coulée »). */ [data-flowingmenu] .sk-flow-inner{ position: relative; height: 100%; width: 100%; overflow: hidden; transition: transform var(--skf-dur) var(--skf-ease); will-change: transform; } /* Ruban horizontal en défilement continu (transform translateX, GPU). */ [data-flowingmenu] .sk-flow-scroll{ display: flex; align-items: center; height: 100%; width: max-content; will-change: transform; animation: sk-flow-scroll-x 18s linear infinite; /* durée réelle réglée en inline par le JS */ } [data-flowingmenu] .sk-flow-scroll--rev{ animation-direction: reverse; } /* Un motif répété = libellé (+ pastille image optionnelle). */ [data-flowingmenu] .sk-flow-part{ display: inline-flex; align-items: center; flex: 0 0 auto; } [data-flowingmenu] .sk-flow-word{ display: inline-block; padding: 0 1.1rem; white-space: nowrap; text-transform: uppercase; letter-spacing: .06em; font-family: var(--head, "Bricolage Grotesque", system-ui, sans-serif); font-weight: 600; font-size: clamp(1rem, 2.2vw, 1.55rem); line-height: 1; color: var(--skf-text); } /* Pastille image optionnelle (data-flow-img) : petite vignette liserée lime, DISCRÈTE. */ [data-flowingmenu] .sk-flow-chip{ flex: 0 0 auto; width: 3.4rem; height: 2rem; margin: 0 1rem; border-radius: 999px; background-size: cover; background-position: 50% 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--skf-accent) 45%, transparent); } @supports not (background: color-mix(in srgb, red, blue)){ [data-flowingmenu] .sk-flow-chip{ box-shadow: 0 0 0 1px rgba(157,255,60,.35); } } @keyframes sk-flow-scroll-x{ from{ transform: translateX(0); } to { transform: translateX(-50%); } /* -50% = un jeu complet → boucle sans couture */ } /* Ceinture + bretelles : si le JS n'a pas débrayé, le CSS coupe quand même le défilé. */ @media (prefers-reduced-motion: reduce){ [data-flowingmenu] .sk-flow-scroll{ animation: none; } [data-flowingmenu] .sk-flow-marquee, [data-flowingmenu] .sk-flow-inner{ transition: none; } } /* skld-decaycard.css */ /* SKLD DecayCard — carte-image héros avec distorsion « decay » au survol (portage VANILLA de reactbits.dev/components/decay-card). DA SKLD : OLED / vert sapin profond DOMINANT, accent lime #9dff3c TRÈS discret, sheen chrome froid, blanc cassé. ZÉRO orange/ambre, ZÉRO emoji. Effet subtil et premium — surtout PAS un glitch violent. Le rendu est piloté par skld-decaycard.js, qui : - injecte un filtre SVG (feTurbulence + feDisplacementMap) et anime SON attribut `scale` (la seule anim non-transform : c'est l'effet lui-même, la « décomposition » des pixels) ; - pose EN INLINE sur l'image la transform de parallaxe (translate + rotateZ + scale de recouvrement des bords) via un ressort, et le filtre `filter:url(#...)`. Ici on ne gère que les COUCHES : cadre, débordement, contexte d'empilement, will-change. S'active sur [data-decaycard] contenant une (ou [data-decaycard-img] explicite). Idempotent, cartes indépendantes. Fallback (?fx=off / prefers-reduced-motion / pointer:coarse) : image 100% pristine, aucun filtre, aucun listener. transform + opacity uniquement (hors l'attribut `scale` du displacement map, cœur de l'effet). */ [data-decaycard]{ /* --- réglages surchargeables (JS/opts, data-* ou style inline) --- */ --sk-decay-radius: 18px; /* arrondi du cadre (héros) */ --sk-decay-ease: cubic-bezier(.32, .72, 0, 1); position: relative; overflow: hidden; /* clippe l'image distordue/parallaxée */ isolation: isolate; /* contexte d'empilement propre */ border-radius: var(--sk-decay-radius); -webkit-transform: translateZ(0); /* couche de compositing stable (clip net) */ transform: translateZ(0); } /* -- L'image cible : c'est le JS qui pose transform + filter EN INLINE au survol. --------- */ /* Cible explicite [data-decaycard-img], sinon la 1re directe. object-fit:cover idéal. */ [data-decaycard] > img, [data-decaycard] [data-decaycard-img]{ display: block; transform-origin: 50% 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* Aucune transition CSS : l'anim est intégrée en rAF (ressort). Pas de filter au repos. */ } /* Au repos on garantit une image intacte (le JS retire filtre+transform après retour). */ [data-decaycard]:not(.sk-decay-live) > img, [data-decaycard]:not(.sk-decay-live) [data-decaycard-img]{ -webkit-filter: none; filter: none; transform: none; } /* Pendant l'effet : on autorise la couche GPU (retirée au repos par le JS). */ [data-decaycard].sk-decay-live > img, [data-decaycard].sk-decay-live [data-decaycard-img]{ will-change: transform, filter; } /* Voile de profondeur TRÈS discret (vignette sapin froide) qui se révèle au survol. Purement décoratif, sous les éventuels overlays de texte de la carte (z bas, sans clic). */ [data-decaycard]::after{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(2, 8, 5, .28) 100%); opacity: 0; transition: opacity .5s var(--sk-decay-ease); } [data-decaycard].sk-decay-live::after{ opacity: 1; } /* Le SVG technique (défs de filtres) est masqué hors flux : aucune emprise visuelle. */ #skld-decay-defs{ position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* Sécurité : si l'utilisateur coupe les FX ou en tactile / reduced-motion, on force l'image pristine même si une classe live traînait (le JS ne l'ajoute pas dans ces cas). */ @media (prefers-reduced-motion: reduce), (pointer: coarse){ [data-decaycard] > img, [data-decaycard] [data-decaycard-img]{ -webkit-filter: none !important; filter: none !important; transform: none !important; will-change: auto; } [data-decaycard]::after{ opacity: 0 !important; } } /* skld-uiverse-buttons.css */ /* ============================================================================= SKLD UIVERSE BUTTONS — boutons premium minés sur uiverse.io, REPEINTS DA SKLD ----------------------------------------------------------------------------- Boutons portés en VANILLA pur (zéro dépendance), repeints à la palette SKLD : noir / charbon + vert SAPIN dominant, lime #9dff3c en accent LÉGER, chrome froid, blanc cassé froid. ZÉRO orange/ambre. ZÉRO emoji. 4 boutons retenus (sur les 28 URL fournies — voir "notes" du module pour le tri) : .sk-ubtn--forge ← dexter-st/young-newt-20 (dalle charbon embossée, halo lime, sparkle) .sk-ubtn--press ← whoisyourdeadie/wise-mule-50 (touche lime physique qui s'enfonce) .sk-ubtn--swap ← barisdogansutcu/big-moose-69 (icône qui zoome + libellé qui permute) .sk-ubtn--recoil ← elifnurdemir/sweet-bear-27 (thème Warzone : recul + flash lime au clic) Toutes les couleurs d'origine (bleu, jaune, rouge, orange, "among us"…) ont été remplacées par les tokens SKLD ci-dessous. Réutilisables : `class="sk-ubtn sk-ubtn--X"`. Anim : transform + opacity uniquement (GPU). Les boucles au repos (idle) sont coupées par prefers-reduced-motion ET par ?fx=off (classe .sk-ubtn-still posée par skld-uiverse-buttons.js). Les retours d'interaction (hover/active) restent toujours. Ne modifie AUCUN template / base.html / skald.css / polish : fichier purement additif. ========================================================================== */ /* ---- Base commune + variables (scopées aux boutons, préfixe --sk-ub-*) ------- On réutilise les polices globales de skald.css (var(--mono)/--disp) avec repli. */ .sk-ubtn{ /* encre & accents */ --sk-ub-ink:#eef7e8; /* blanc cassé froid */ --sk-ub-ink-dk:#08110a; /* encre sombre (texte sur lime) */ --sk-ub-lime:#9dff3c; /* accent lime SKLD */ --sk-ub-lime-2:#c6ff6e; /* lime clair */ --sk-ub-hue:92deg; /* teinte lime pour les halos hsl() */ /* charbon / sapin (dominant) */ --sk-ub-char:#0c110d; /* dalle charbon-sapin */ --sk-ub-char-2:#11170f; --sk-ub-fir-9:#081a10; --sk-ub-fir-8:#0c2416; --sk-ub-fir-7:#12331d; --sk-ub-fir-6:#1a3f27; --sk-ub-fir-5:#20492e; /* chrome froid (légèrement verdi pour ne jamais tirer vers le chaud) */ --sk-ub-chrome-hi:#eef3ee; --sk-ub-chrome:#c3ccc5; --sk-ub-chrome-md:#8c968f; --sk-ub-chrome-lo:#59635c; --sk-ub-line:rgba(238,251,230,.14); --sk-ub-line-soft:rgba(238,251,230,.07); --sk-ub-ease:cubic-bezier(.16,1,.3,1); --sk-ub-spring:cubic-bezier(.34,1.56,.64,1); /* reset commun */ -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; -webkit-font-smoothing:antialiased; font-family:var(--mono,"JetBrains Mono",ui-monospace,Menlo,monospace); cursor:pointer; } .sk-ubtn:disabled,.sk-ubtn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none} /* Accessibilité clavier : anneau de focus lime homogène sur tous les boutons */ .sk-ubtn:focus-visible{outline:2px solid rgba(157,255,60,.7);outline-offset:3px} /* ============================================================================= 1) .sk-ubtn--forge — d'après dexter-st/young-newt-20 Dalle charbon "matière plastique premium" : embossage (inset), cadre biseauté, halo lime qui monte du haut au survol, sparkle chrome qui vire lime. Repeint : #101010 -> charbon-sapin ; teinte de halo bleu 210deg -> lime 92deg. Markup : ========================================================================== */ .sk-ubtn--forge{ --fg-r:24px; /* rayon */ --fg-pad:4px; /* épaisseur du cadre externe */ --fg-t:.4s; position:relative;display:inline-flex;align-items:center;gap:.6em; padding:.62em 1.2em .62em 1em; font-size:1em;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--sk-ub-ink); background-color:var(--sk-ub-char); border:solid 1px var(--sk-ub-line); border-radius:var(--fg-r); /* embossage : lumière chaude en haut (blanc alpha), ombre douce en bas */ box-shadow: inset 0 1px 1px rgba(255,255,255,.16), inset 0 2px 2px rgba(255,255,255,.10), inset 0 4px 4px rgba(255,255,255,.06), inset 0 8px 8px rgba(255,255,255,.04), 0 -2px 2px rgba(0,0,0,.04), 0 -8px 10px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.45); transition:box-shadow var(--fg-t),border-color var(--fg-t),background-color var(--fg-t); } /* cadre externe biseauté (donne l'épaisseur "usinée") */ .sk-ubtn--forge::before{ content:"";position:absolute;pointer-events:none;z-index:-1; top:calc(0px - var(--fg-pad));left:calc(0px - var(--fg-pad)); width:calc(100% + var(--fg-pad)*2);height:calc(100% + var(--fg-pad)*2); border-radius:calc(var(--fg-r) + var(--fg-pad)); background-image:linear-gradient(0deg,#0004,#000a); box-shadow:1px 1px 1px #fff2,2px 2px 2px #fff1,-1px -1px 1px #0002,-2px -2px 2px #0001; transition:box-shadow var(--fg-t); } /* halo lime : monte du haut, invisible au repos, révélé au survol/appui */ .sk-ubtn--forge::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background-image:linear-gradient(0deg, hsl(var(--sk-ub-hue),100%,72%), hsla(var(--sk-ub-hue),100%,62%,.5), 8%, transparent); opacity:0;transition:opacity var(--fg-t),filter var(--fg-t); } .sk-ubtn--forge .sk-ubtn__label{position:relative;z-index:1} .sk-ubtn--forge .sk-ubtn__ico{ position:relative;z-index:1;width:1.15em;height:1.15em;flex:none; fill:var(--sk-ub-chrome);filter:drop-shadow(0 0 2px rgba(255,255,255,.5)); transition:fill var(--fg-t),filter var(--fg-t),transform var(--fg-t); } /* idle : léger scintillement du sparkle (opacity only) — coupé si reduced-motion / fx=off */ @media (prefers-reduced-motion:no-preference){ .sk-ubtn--forge .sk-ubtn__ico{animation:sk-ub-flicker 2.4s ease-in-out infinite} } .sk-ubtn-still .sk-ubtn--forge .sk-ubtn__ico{animation:none!important} @keyframes sk-ub-flicker{50%{opacity:.4}} .sk-ubtn--forge:hover{border-color:hsla(var(--sk-ub-hue),100%,80%,.45)} .sk-ubtn--forge:hover::before{box-shadow:0 -8px 8px -6px #fffa inset,0 -16px 16px -8px hsla(var(--sk-ub-hue),100%,70%,.30) inset,1px 1px 1px #fff2,-1px -1px 1px #0002} .sk-ubtn--forge:hover::after{opacity:1;mask-image:linear-gradient(0deg,#fff,transparent)} .sk-ubtn--forge:hover .sk-ubtn__ico{fill:var(--sk-ub-lime);filter:drop-shadow(0 0 3px var(--sk-ub-lime)) drop-shadow(0 -3px 6px #0009);animation:none} .sk-ubtn--forge:active{border-color:hsla(var(--sk-ub-hue),100%,82%,.7);background-color:hsla(var(--sk-ub-hue),50%,18%,.5)} .sk-ubtn--forge:active::before{box-shadow:0 -8px 12px -6px #fffa inset,0 -16px 16px -8px hsla(var(--sk-ub-hue),100%,70%,.8) inset,1px 1px 1px #fff4,-1px -1px 1px #0002} .sk-ubtn--forge:active::after{opacity:1;filter:brightness(1.6)} /* ============================================================================= 2) .sk-ubtn--press — d'après whoisyourdeadie/wise-mule-50 Touche lime "physique" : une face qui s'enfonce dans un socle. Au survol la face descend, à l'appui elle s'écrase (paroi latérale qui disparaît). CTA lime phare. Repeint : dégradés jaune/vert -> lime SKLD ; parois -> lime sombre / sapin. Markup : ========================================================================== */ .sk-ubtn--press{ position:relative;display:inline-block;padding:0;border:0;background:none; border-radius:999px; /* socle : ombre portée basse = la touche est "au-dessus" du plateau */ filter:drop-shadow(0 10px 14px rgba(0,0,0,.45)); } .sk-ubtn--press .sk-ubtn__face{ --pr-wall:#4f7a1c; /* paroi latérale (lime sombre) */ position:relative;display:flex;align-items:center;justify-content:center; min-width:8em;height:3.1em;padding:0 1.6em; border-radius:999px; font-size:1em;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--sk-ub-ink-dk); background:linear-gradient(to bottom,var(--sk-ub-lime-2),var(--sk-ub-lime)); /* paroi (0 6px 0) + hautes lumières internes = volume de la touche */ box-shadow: 0 6px 0 var(--pr-wall), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(79,122,28,.55), 0 8px 10px rgba(0,0,0,.28); text-shadow:0 1px 0 rgba(255,255,255,.35); transition:transform .13s var(--sk-ub-ease),box-shadow .13s var(--sk-ub-ease),background .13s var(--sk-ub-ease); will-change:transform; } .sk-ubtn--press:hover .sk-ubtn__face{ transform:translateY(3px); box-shadow:0 3px 0 var(--pr-wall),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 6px rgba(79,122,28,.5),0 6px 8px rgba(0,0,0,.26); } .sk-ubtn--press:active .sk-ubtn__face{ transform:translateY(6px); box-shadow:0 0 0 var(--pr-wall),inset 0 2px 0 rgba(255,255,255,.5),inset 0 10px 14px rgba(79,122,28,.55),0 2px 4px rgba(0,0,0,.3); background:linear-gradient(to bottom,var(--sk-ub-lime),var(--sk-ub-lime-2)); } /* variante sapin (accent lime plus léger) : ajouter .sk-ubtn--press.is-fir */ .sk-ubtn--press.is-fir .sk-ubtn__face{ --pr-wall:#06110a; color:var(--sk-ub-lime); background:linear-gradient(to bottom,var(--sk-ub-fir-6),var(--sk-ub-fir-8)); box-shadow:0 6px 0 var(--pr-wall),inset 0 1px 0 rgba(157,255,60,.25),inset 0 -3px 8px rgba(0,0,0,.5),0 8px 10px rgba(0,0,0,.4); text-shadow:none; } .sk-ubtn--press.is-fir:hover .sk-ubtn__face{transform:translateY(3px);box-shadow:0 3px 0 var(--pr-wall),inset 0 1px 0 rgba(157,255,60,.4),inset 0 -3px 8px rgba(0,0,0,.5),0 6px 8px rgba(0,0,0,.38)} .sk-ubtn--press.is-fir:active .sk-ubtn__face{transform:translateY(6px);box-shadow:0 0 0 var(--pr-wall),inset 0 1px 0 rgba(157,255,60,.5),inset 0 10px 14px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.4)} /* ============================================================================= 3) .sk-ubtn--swap — d'après barisdogansutcu/big-moose-69 Pilule sapin : au survol l'icône zoome et file à droite pendant que le libellé A sort et que le libellé B (court) entre par la gauche. Icône "among us" remplacée par un chevron chrome->lime. Repeint : jaune -> sapin/lime. Markup : ========================================================================== */ .sk-ubtn--swap{ --sw-t:.5s; position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em; overflow:hidden; min-width:8.5em;height:3em;padding:0 1.15em; font-size:1em;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--sk-ub-lime); background:linear-gradient(180deg,var(--sk-ub-fir-6),var(--sk-ub-fir-8)); border:1px solid rgba(157,255,60,.32); border-radius:999px; box-shadow:inset 0 1px 0 rgba(157,255,60,.18),0 8px 22px rgba(0,0,0,.4); transition:border-color var(--sw-t),box-shadow var(--sw-t),background var(--sw-t); } .sk-ubtn--swap .sk-ubtn__ico{ width:1.2em;height:1.2em;flex:none;z-index:2; fill:var(--sk-ub-chrome); transition:transform var(--sw-t) var(--sk-ub-ease),fill var(--sw-t); } .sk-ubtn--swap .sk-ubtn__a{z-index:2;white-space:nowrap;transition:transform var(--sw-t) var(--sk-ub-ease) .3s,opacity var(--sw-t) .3s} .sk-ubtn--swap .sk-ubtn__b{ position:absolute;left:0;right:0;z-index:2;text-align:center;white-space:nowrap; transform:translateX(-120%);opacity:0; transition:transform var(--sw-t) var(--sk-ub-ease) .3s,opacity var(--sw-t) .3s; } .sk-ubtn--swap:hover{border-color:rgba(157,255,60,.6);box-shadow:inset 0 1px 0 rgba(157,255,60,.3),0 10px 30px rgba(157,255,60,.18)} .sk-ubtn--swap:hover .sk-ubtn__ico{transform:scale(2.6) translateX(60%);fill:var(--sk-ub-lime)} .sk-ubtn--swap:hover .sk-ubtn__a{transform:translateX(220%);opacity:0} .sk-ubtn--swap:hover .sk-ubtn__b{transform:translateX(12px);opacity:1} .sk-ubtn--swap:active{transform:scale(.97)} /* ============================================================================= 4) .sk-ubtn--recoil — d'après elifnurdemir/sweet-bear-27 (thème Warzone) CTA sombre avec glyphe d'arme chrome : à l'appui, léger RECUL + flash de bouche lime + traçante qui part. Clin d'oeil COD, tenu sobre (accent lime léger). Repeint : arme noire + bouton clair -> châssis sapin/charbon + arme chrome + flash lime. Markup : ========================================================================== */ .sk-ubtn--recoil{ position:relative;display:inline-flex;align-items:center;gap:.7em; padding:.6em 1.15em;overflow:hidden; font-size:1em;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--sk-ub-ink); background:linear-gradient(180deg,var(--sk-ub-char-2),var(--sk-ub-fir-9)); border:1px solid var(--sk-ub-line); border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.4); transition:border-color .25s,box-shadow .25s,transform .12s var(--sk-ub-ease); } .sk-ubtn--recoil .sk-ubtn__label{position:relative;z-index:2} .sk-ubtn--recoil .sk-ubtn__gun{ position:relative;z-index:2;width:2.1em;height:1.05em;flex:none; fill:var(--sk-ub-chrome); transform-origin:right center; transition:transform .18s var(--sk-ub-ease),fill .25s; } /* flash de bouche (lime) — devant le canon, invisible au repos */ .sk-ubtn--recoil .sk-ubtn__flash{ position:absolute;z-index:1;left:.9em;top:50%; width:.8em;height:.8em;border-radius:50%; background:radial-gradient(circle,var(--sk-ub-lime-2),var(--sk-ub-lime) 40%,transparent 70%); transform:translateY(-50%) scale(0);opacity:0;pointer-events:none; } /* traçante lime qui file vers la gauche */ .sk-ubtn--recoil .sk-ubtn__tracer{ position:absolute;z-index:1;left:1.1em;top:50%; width:1.4em;height:.16em;border-radius:2px; background:linear-gradient(90deg,transparent,var(--sk-ub-lime)); transform:translate(0,-50%) scaleX(.2);opacity:0;pointer-events:none; } .sk-ubtn--recoil:hover{border-color:rgba(157,255,60,.4);box-shadow:inset 0 1px 0 rgba(157,255,60,.12),0 10px 26px rgba(157,255,60,.14)} .sk-ubtn--recoil:hover .sk-ubtn__gun{fill:var(--sk-ub-lime)} /* appui : recul de l'arme + tir (transform + opacity only) */ .sk-ubtn--recoil:active{transform:translateY(1px)} .sk-ubtn--recoil:active .sk-ubtn__gun{animation:sk-ub-recoil .22s ease-out} .sk-ubtn--recoil:active .sk-ubtn__flash{animation:sk-ub-flash .22s ease-out} .sk-ubtn--recoil:active .sk-ubtn__tracer{animation:sk-ub-tracer .28s ease-out} @keyframes sk-ub-recoil{40%{transform:translateX(4px) scaleX(.94) rotate(-3deg)}100%{transform:none}} @keyframes sk-ub-flash{0%{transform:translateY(-50%) scale(0);opacity:0}35%{transform:translateY(-50%) scale(1.15);opacity:1}100%{transform:translateY(-50%) scale(.2);opacity:0}} @keyframes sk-ub-tracer{0%{transform:translate(0,-50%) scaleX(.2);opacity:0}20%{opacity:1}100%{transform:translate(-140%,-50%) scaleX(1);opacity:0}} /* si reduced-motion / fx=off : pas de tir animé, on garde un flash statique bref via opacity */ .sk-ubtn-still .sk-ubtn--recoil:active .sk-ubtn__gun, .sk-ubtn-still .sk-ubtn--recoil:active .sk-ubtn__flash, .sk-ubtn-still .sk-ubtn--recoil:active .sk-ubtn__tracer{animation:none!important} @media (prefers-reduced-motion:reduce){ .sk-ubtn--recoil:active .sk-ubtn__gun, .sk-ubtn--recoil:active .sk-ubtn__flash, .sk-ubtn--recoil:active .sk-ubtn__tracer{animation:none!important} } /* ---- Confort mobile : cibles tactiles >= 44px, pas de survol collant --------- Sur pointeur grossier on neutralise les états :hover persistants (l'appui suffit). */ @media (hover:none){ .sk-ubtn--forge:hover::after{opacity:0} .sk-ubtn--swap:hover .sk-ubtn__ico{transform:none} .sk-ubtn--swap:hover .sk-ubtn__a{transform:none;opacity:1} .sk-ubtn--swap:hover .sk-ubtn__b{opacity:0} } /* skld-uiverse-cards.css */ /* ===================================================================== SKLD Cup — UIVERSE PORTS (cartes + loaders premium, DARK) Vanilla pur, zero dependance. Portage + REPEINTURE palette SKLD. Sources uiverse.io (portees, repeintes, renommees, namespacees) : .sk-ucard--liger <- Smit-Prajapati/smart-liger-5 (carte verre 3D) .sk-ucard--dingo <- SelfMadeSystem/giant-dingo-10 (carte telemetrie 3D) .sk-ucard--insect <- Smit-Prajapati/massive-insect-5 (carte "boites" reveal) .sk-uload--ape <- Nawsome/breezy-ape-20 (loader anneau isometrique) .sk-uload--hound <- Praashoo7/lucky-hound-44 (loader billes radiales) Palette : noir/charbon + vert sapin DOMINANT, lime #9dff3c accent LEGER, chrome + blanc casse froid. ZERO orange/ambre. ZERO emoji. Contraintes : mobile, transform+opacity privilegies, ?fx=off + reduced-motion, idempotent (aucune dependance JS obligatoire). Toutes les classes internes sont prefixees (sk-l-/sk-d-/sk-i-/sk-a-/sk-h-) pour n'entrer en collision avec AUCUNE classe de skald.css / polish. Ne modifie aucun template / base.html / skald.css / skld-polish. ===================================================================== */ /* --- Jetons de couleur partages (repeinture SKLD) -------------------- */ /* On herite des tokens skald.css quand ils existent, avec repli en dur. */ .sk-ucard--liger, .sk-ucard--dingo, .sk-ucard--insect, .sk-uload--ape, .sk-uload--hound{ --u-ink:var(--bg,#060806); --u-ink2:var(--bg2,#0a0d0a); --u-panel:var(--panel,#0e120d); --u-panel2:var(--panel2,#141a12); --u-raise:var(--raise,#1a2117); --u-cream:var(--cream,#eefbe6); --u-muted:var(--muted,#828b7b); --u-dim:var(--dim,#4a5142); --u-lime:var(--green,#9dff3c); /* accent LEGER seulement */ --u-lime2:var(--lime,#c6ff6e); --u-ink-on:var(--green-ink,#08110a); /* vert sapin = couleur DOMINANTE (non presente telle quelle dans skald.css) */ --u-sapin-lo:#08251b; --u-sapin:#0c3b2a; --u-sapin2:#12583b; --u-sapin3:#1c7a50; /* chrome froid */ --u-chrome-hi:#eef2f6; --u-chrome:#c2cbd2; --u-chrome-mid:#8b95a1; --u-chrome-lo:#565f69; --u-line:rgba(238,251,230,.08); --u-line2:rgba(238,251,230,.16); box-sizing:border-box; } .sk-ucard--liger *, .sk-ucard--dingo *, .sk-ucard--insect *, .sk-uload--ape *, .sk-uload--hound *{box-sizing:border-box;margin:0;padding:0} /* ===================================================================== 1) .sk-ucard--liger — carte verre depoli 3D (hover : bascule + parallaxe) ===================================================================== */ .sk-ucard--liger{ width:290px;height:300px;perspective:1000px; font-family:var(--body,system-ui,sans-serif); } .sk-ucard--liger .sk-l-plate{ position:relative;height:100%;border-radius:50px; background:linear-gradient(135deg,var(--u-sapin2) 0%,var(--u-sapin-lo) 100%); transition:transform .5s ease-in-out,box-shadow .5s ease-in-out; transform-style:preserve-3d;will-change:transform; box-shadow:rgba(6,20,12,0) 40px 50px 25px -40px,rgba(6,20,12,.5) 0 25px 25px -5px; } .sk-ucard--liger .sk-l-glass{ position:absolute;inset:8px;border-radius:55px;border-top-right-radius:100%; transform-style:preserve-3d;transform:translate3d(0,0,25px); background:linear-gradient(0deg,rgba(238,251,230,.10) 0%,rgba(238,251,230,.30) 100%); border-left:1px solid rgba(238,251,230,.6);border-bottom:1px solid rgba(238,251,230,.6); transition:transform .5s ease-in-out; } .sk-ucard--liger .sk-l-content{padding:100px 60px 0 30px;transform:translate3d(0,0,26px)} .sk-ucard--liger .sk-l-title{display:block;color:var(--u-lime);font-weight:900;font-size:20px;letter-spacing:.04em;text-transform:uppercase} .sk-ucard--liger .sk-l-text{display:block;color:rgba(238,251,230,.72);font-size:14px;margin-top:20px;line-height:1.4} .sk-ucard--liger .sk-l-bottom{ position:absolute;bottom:20px;left:20px;right:20px;padding:10px 12px; display:flex;align-items:center;justify-content:space-between; transform-style:preserve-3d;transform:translate3d(0,0,26px); } .sk-ucard--liger .sk-l-view{display:flex;align-items:center;width:40%;justify-content:flex-end;transition:transform .2s ease-in-out} .sk-ucard--liger .sk-l-view:hover{transform:translate3d(0,0,10px)} .sk-ucard--liger .sk-l-view-btn{background:none;border:none;color:var(--u-lime);font-weight:800;font-size:12px;cursor:pointer;font-family:inherit;text-transform:uppercase;letter-spacing:.06em} .sk-ucard--liger .sk-l-view .sk-l-svg{fill:none;stroke:var(--u-lime);stroke-width:3px;max-height:15px} .sk-ucard--liger .sk-l-social{display:flex;gap:10px;transform-style:preserve-3d} .sk-ucard--liger .sk-l-btn{ width:30px;aspect-ratio:1;padding:5px;border:none;border-radius:50%;cursor:pointer; display:grid;place-content:center; background:linear-gradient(135deg,var(--u-chrome-hi),var(--u-chrome)); box-shadow:rgba(6,20,12,.5) 0 7px 5px -5px; } .sk-ucard--liger .sk-l-btn:nth-child(1){transition:transform .2s ease-in-out .4s,box-shadow .2s ease-in-out .4s} .sk-ucard--liger .sk-l-btn:nth-child(2){transition:transform .2s ease-in-out .6s,box-shadow .2s ease-in-out .6s} .sk-ucard--liger .sk-l-btn:nth-child(3){transition:transform .2s ease-in-out .8s,box-shadow .2s ease-in-out .8s} .sk-ucard--liger .sk-l-btn .sk-l-svg{width:15px;fill:var(--u-sapin2);transition:fill .2s ease} .sk-ucard--liger .sk-l-btn:hover{background:var(--u-ink)} .sk-ucard--liger .sk-l-btn:hover .sk-l-svg{fill:var(--u-cream)} .sk-ucard--liger .sk-l-btn:active{background:var(--u-lime)} .sk-ucard--liger .sk-l-btn:active .sk-l-svg{fill:var(--u-ink-on)} .sk-ucard--liger .sk-l-logo{position:absolute;right:0;top:0;transform-style:preserve-3d} .sk-ucard--liger .sk-l-circle{ display:block;position:absolute;top:0;right:0;aspect-ratio:1;border-radius:50%; background:rgba(28,122,80,.20); box-shadow:rgba(8,17,10,.4) -10px 10px 20px 0; backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px); transition:transform .5s ease-in-out; } .sk-ucard--liger .sk-l-c1{width:170px;top:8px;right:8px;transform:translate3d(0,0,20px)} .sk-ucard--liger .sk-l-c2{width:140px;top:10px;right:10px;transform:translate3d(0,0,40px);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);transition-delay:.4s} .sk-ucard--liger .sk-l-c3{width:110px;top:17px;right:17px;transform:translate3d(0,0,60px);transition-delay:.8s} .sk-ucard--liger .sk-l-c4{width:80px;top:23px;right:23px;transform:translate3d(0,0,80px);transition-delay:1.2s} .sk-ucard--liger .sk-l-c5{width:50px;top:30px;right:30px;transform:translate3d(0,0,100px);display:grid;place-content:center;transition-delay:1.6s} .sk-ucard--liger .sk-l-c5 .sk-l-svg{width:20px;fill:var(--u-cream)} /* etats hover (+ .is-active pour le tactile, pilote par le JS) */ .sk-ucard--liger:hover .sk-l-plate, .sk-ucard--liger.is-active .sk-l-plate{ transform:rotate3d(1,1,0,30deg); box-shadow:rgba(6,20,12,.3) 30px 50px 25px -40px,rgba(6,20,12,.1) 0 25px 30px 0; } .sk-ucard--liger:hover .sk-l-social .sk-l-btn, .sk-ucard--liger.is-active .sk-l-social .sk-l-btn{transform:translate3d(0,0,50px);box-shadow:rgba(6,20,12,.2) -5px 20px 10px 0} .sk-ucard--liger:hover .sk-l-c2,.sk-ucard--liger.is-active .sk-l-c2{transform:translate3d(0,0,60px)} .sk-ucard--liger:hover .sk-l-c3,.sk-ucard--liger.is-active .sk-l-c3{transform:translate3d(0,0,80px)} .sk-ucard--liger:hover .sk-l-c4,.sk-ucard--liger.is-active .sk-l-c4{transform:translate3d(0,0,100px)} .sk-ucard--liger:hover .sk-l-c5,.sk-ucard--liger.is-active .sk-l-c5{transform:translate3d(0,0,120px)} /* ===================================================================== 2) .sk-ucard--dingo — carte telemetrie 3D (parallaxe multi-couches) 9 zones de survol -> bascule directionnelle. Deja sombre a l'origine. (Nesting CSS d'origine aplati ; regles mortes ".disabled-*" supprimees.) ===================================================================== */ .sk-ucard--dingo{ position:relative;width:240px;height:240px;perspective:3000px; font-family:var(--mono,ui-monospace,monospace); } .sk-ucard--dingo .sk-d-a{position:absolute;width:100px;height:100px;transform:translateZ(600px);z-index:5} .sk-ucard--dingo .sk-d-a.tl{top:-30px;left:-30px} .sk-ucard--dingo .sk-d-a.t{top:-30px;left:70px} .sk-ucard--dingo .sk-d-a.tr{top:-30px;left:170px} .sk-ucard--dingo .sk-d-a.l{top:70px;left:-30px} .sk-ucard--dingo .sk-d-a.c{top:70px;left:70px} .sk-ucard--dingo .sk-d-a.r{top:70px;left:170px} .sk-ucard--dingo .sk-d-a.bl{top:170px;left:-30px} .sk-ucard--dingo .sk-d-a.b{top:170px;left:70px} .sk-ucard--dingo .sk-d-a.br{top:170px;left:170px} .sk-ucard--dingo .sk-d-card{position:relative;width:240px;height:240px;transform-style:preserve-3d;transition:transform .7s;will-change:transform} /* bascule globale + par zone */ .sk-ucard--dingo .sk-d-card:hover, .sk-ucard--dingo.is-active .sk-d-card{transform:rotateX(5deg) rotateY(10deg)} .sk-ucard--dingo .sk-d-a.tl:hover ~ .sk-d-card{transform:rotateX(-20deg) rotateY(20deg)} .sk-ucard--dingo .sk-d-a.t:hover ~ .sk-d-card{transform:rotateX(-20deg)} .sk-ucard--dingo .sk-d-a.tr:hover ~ .sk-d-card{transform:rotateX(-20deg) rotateY(-20deg)} .sk-ucard--dingo .sk-d-a.l:hover ~ .sk-d-card{transform:rotateY(20deg)} .sk-ucard--dingo .sk-d-a.r:hover ~ .sk-d-card{transform:rotateY(-20deg)} .sk-ucard--dingo .sk-d-a.bl:hover ~ .sk-d-card{transform:rotateX(20deg) rotateY(20deg)} .sk-ucard--dingo .sk-d-a.b:hover ~ .sk-d-card{transform:rotateX(20deg)} .sk-ucard--dingo .sk-d-a.br:hover ~ .sk-d-card{transform:rotateX(20deg) rotateY(-20deg)} /* anneaux SVG (chrome froid a la place du blanc pur) */ .sk-ucard--dingo .sk-d-outer{position:absolute;top:calc(50% - 150px);left:calc(50% - 150px);overflow:visible;transition:transform 1s;transform:scale(1.05) translateZ(-50px);transform-origin:170px;pointer-events:none} .sk-ucard--dingo .sk-d-outer.bb{transform:scale(1.0535) translateZ(-55px)} .sk-ucard--dingo .sk-d-outer.bb1{transform:scale(1.0535) translateZ(calc(-55px + 5px * var(--z)))} .sk-ucard--dingo .sk-d-outer.bb1 path{stroke-width:calc(6px - 3px * var(--z) * var(--z))} .sk-ucard--dingo .sk-d-outer path{stroke:var(--u-chrome);fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:0 0 280 999;transition:stroke-dasharray 1s,stroke-dashoffset 1s} .sk-ucard--dingo .sk-d-outer path.blur{filter:blur(8px);opacity:.4} .sk-ucard--dingo .sk-d-outer path.bak{stroke:rgba(238,251,230,.05);stroke-dasharray:0 0 360 0} .sk-ucard--dingo .sk-d-outer path.bak20{stroke:rgba(238,251,230,.05);stroke-dasharray:20 50;stroke-dashoffset:0;animation:sk-d-stronk 40s linear infinite} @keyframes sk-d-stronk{from{stroke-dashoffset:360}} .sk-ucard--dingo .sk-d-card:hover .sk-d-outer path.patt, .sk-ucard--dingo .sk-d-a:hover ~ .sk-d-card .sk-d-outer path.patt, .sk-ucard--dingo.is-active .sk-d-card .sk-d-outer path.patt{stroke-dasharray:0 90 280 999;stroke-dashoffset:10} /* coeur sombre + halo vert tournant (lime/sapin, opacite faible) */ .sk-ucard--dingo .sk-d-inner{position:absolute;inset:1px;border-radius:29px;background:var(--u-panel);overflow:hidden;transform-style:preserve-3d;perspective:100px} .sk-ucard--dingo .sk-d-inner-bg{ position:absolute;inset:-1000%;filter:blur(40px);opacity:.32;transform:translateZ(-10px); background:conic-gradient(from 45deg, var(--u-lime) 5%,transparent 10% 40%, var(--u-lime2) 45% 55%,transparent 60% 90%,var(--u-lime) 95%); animation:sk-d-speen 24s cubic-bezier(.36,.2,.64,.8) infinite; } @keyframes sk-d-speen{50%{rotate:180deg}to{rotate:360deg}} .sk-ucard--dingo .sk-d-border{ position:absolute;inset:0;border:double 2px transparent; background-image:linear-gradient(-45deg,rgba(86,95,105,.15),rgba(238,251,230,.14),rgba(86,95,105,.15)); background-origin:border-box;transform:translateZ(calc(var(--z) * 1px));pointer-events:none; clip-path:path("M30 0H210A30 30 0 01240 30V210A30 30 0 01210 240H30A30 30 0 010 210V30A30 30 0 0130 0V2A28 28 0 002 30V210A28 28 0 0030 238H210A28 28 0 00238 210V30A28 28 0 00210 2H30"); } .sk-ucard--dingo .sk-d-percent{position:absolute;top:24px;left:34px;font-size:42px;color:var(--u-cream);transition:transform .4s;transform:translate3d(0,0,calc(40px + var(--z) * 1.5px));cursor:default;pointer-events:none;font-weight:700} .sk-ucard--dingo .sk-d-percent.top{pointer-events:all;color:transparent} .sk-ucard--dingo .sk-d-percent.bak{color:var(--u-lime);transform:translate3d(0,0,1px);filter:blur(8px);opacity:.8} .sk-ucard--dingo .sk-d-percent.top:hover ~ .sk-d-percent{text-shadow:0 0 6px rgba(157,255,60,.35);transform:translate3d(0,0,calc(60px + var(--z) * 1.5px))} .sk-ucard--dingo .sk-d-txt{position:absolute;display:flex;gap:4px;align-items:center;fill:var(--u-muted);color:var(--u-muted);font-size:14px;font-weight:500;transition:transform .4s,color .2s,fill .2s;transform:translate3d(0,0,20px)} .sk-ucard--dingo .sk-d-txt:hover{transform:translate3d(0,0,40px);color:var(--u-cream);fill:var(--u-cream)} .sk-ucard--dingo .sk-d-txt svg{width:18px;transition:.5s} .sk-ucard--dingo .sk-d-txt.charging{top:104px;left:28px} .sk-ucard--dingo .sk-d-txt.charging svg{stroke-width:1.5px;stroke:var(--u-lime);stroke-dasharray:10 10;stroke-dashoffset:10} .sk-ucard--dingo .sk-d-txt.charging:hover svg{stroke-dashoffset:0} .sk-ucard--dingo .sk-d-txt.health{top:140px;left:28px} .sk-ucard--dingo .sk-d-txt.health svg .fd{opacity:0;transition:.4s} .sk-ucard--dingo .sk-d-txt.health:hover svg .fd{opacity:1} .sk-ucard--dingo .sk-d-txt.cycles{top:164px;left:28px} .sk-ucard--dingo .sk-d-txt.cycles:hover svg{rotate:180deg;fill:var(--u-sapin3)} .sk-ucard--dingo .sk-d-bar-hb{position:absolute;width:190px;height:14px;top:205px;left:25px;transform:translate3d(0,0,10px)} .sk-ucard--dingo .sk-d-bar{ position:absolute;width:180px;height:4px;top:210px;left:30px;border-radius:2px;pointer-events:none; background:linear-gradient(90deg,transparent 128px,rgba(238,251,230,.02) 0); transform:translate3d(0,0,calc(10px + var(--z) * 1.5px));transition:transform .4s; clip-path:path("M2 0a1 1 0 000 4h22a1 1 0 000-4Zm30 0a1 1 0 000 4h22a1 1 0 000-4Zm30 0a1 1 0 000 4h22a1 1 0 000-4Zm30 0a1 1 0 000 4h22a1 1 0 000-4Zm30 0a1 1 0 000 4h22a1 1 0 000-4Zm30 0a1 1 0 000 4h22a1 1 0 000-4Z"); } .sk-ucard--dingo .sk-d-bar-slider{ width:128px;height:4px;border-radius:inherit;background-size:200%;transition:background-color .3s; background:linear-gradient(90deg,rgba(157,255,60,0),rgba(157,255,60,.44),rgba(157,255,60,0)), linear-gradient(90deg,rgba(157,255,60,0),rgba(157,255,60,.6),rgba(157,255,60,0)); animation:sk-d-bg 4s linear infinite; } .sk-ucard--dingo .sk-d-bar.bak{transform:translate3d(0,0,1px);filter:blur(6px);opacity:.1;clip-path:none} .sk-ucard--dingo .sk-d-bar.bak .sk-d-bar-slider{width:124px;background:var(--u-sapin3)} .sk-ucard--dingo .sk-d-card:hover .sk-d-bar.bak, .sk-ucard--dingo.is-active .sk-d-card .sk-d-bar.bak{opacity:.7} .sk-ucard--dingo .sk-d-a:hover ~ .sk-d-card .sk-d-bar.bak{opacity:1} .sk-ucard--dingo .sk-d-bar-hb:hover ~ .sk-d-bar:not(.bak){transform:translate3d(0,0,calc(30px + var(--z) * 2px))} .sk-ucard--dingo .sk-d-bar-hb:hover ~ .sk-d-bar:not(.bak) .sk-d-bar-slider{background-color:rgba(157,255,60,.42)} @keyframes sk-d-bg{from{background-position:200%,0%}} /* ===================================================================== 3) .sk-ucard--insect — carte "boites" reveal (coins qui remplissent) Fond arc-en-ciel d'origine -> mesh SAPIN ; icones -> blanc casse/lime. ===================================================================== */ .sk-ucard--insect{ position:relative;width:200px;height:200px;border-radius:30px;overflow:hidden; background:var(--u-panel);box-shadow:rgba(8,17,10,.4) 0 7px 29px 0; transition:transform 1s ease-in-out;font-family:var(--body,system-ui,sans-serif); } .sk-ucard--insect .sk-i-bg{ position:absolute;inset:0; background: radial-gradient(circle at 18% 12%,rgba(157,255,60,.18),transparent 42%), radial-gradient(circle at 100% 107%,var(--u-sapin3) 0%,var(--u-sapin2) 30%,var(--u-sapin) 60%,var(--u-sapin-lo) 100%); } .sk-ucard--insect .sk-i-logo{position:absolute;right:50%;bottom:50%;transform:translate(50%,50%);transition:transform .6s ease-in-out,bottom .6s ease-in-out,right .6s ease-in-out} .sk-ucard--insect .sk-i-logo-svg{width:30px;height:30px;fill:var(--u-cream)} .sk-ucard--insect .sk-i-icon{display:inline-block;width:20px;height:20px} .sk-ucard--insect .sk-i-icon .sk-i-svg{width:100%;fill:rgba(238,251,230,.8);transition:fill .5s ease-in-out,filter .5s ease-in-out} .sk-ucard--insect .sk-i-box{ position:absolute;padding:10px;text-align:right;transform-origin:bottom left; background:rgba(238,251,230,.10); border-top:2px solid rgba(238,251,230,.9);border-right:1px solid rgba(238,251,230,.7); border-radius:10% 13% 42% 0%/10% 12% 75% 0%; box-shadow:rgba(8,17,10,.36) -7px 7px 29px 0; transition:bottom 1s ease-in-out,left 1s ease-in-out; } .sk-ucard--insect .sk-i-box::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .5s ease-in-out} .sk-ucard--insect .sk-i-box:hover .sk-i-svg{fill:var(--u-cream)} .sk-ucard--insect .sk-i-box1{width:70%;height:70%;bottom:-70%;left:-70%} .sk-ucard--insect .sk-i-box1::before{background:radial-gradient(circle at 30% 107%,var(--u-lime2) 0%,var(--u-lime) 40%,var(--u-sapin2) 90%)} .sk-ucard--insect .sk-i-box1:hover::before{opacity:1} .sk-ucard--insect .sk-i-box1:hover .sk-i-icon .sk-i-svg{filter:drop-shadow(0 0 5px rgba(157,255,60,.8))} .sk-ucard--insect .sk-i-box2{width:50%;height:50%;bottom:-50%;left:-50%;transition-delay:.2s} .sk-ucard--insect .sk-i-box2::before{background:radial-gradient(circle at 30% 107%,var(--u-sapin3) 0%,var(--u-sapin2) 90%)} .sk-ucard--insect .sk-i-box2:hover::before{opacity:1} .sk-ucard--insect .sk-i-box2:hover .sk-i-icon .sk-i-svg{filter:drop-shadow(0 0 5px rgba(238,251,230,.7))} .sk-ucard--insect .sk-i-box3{width:30%;height:30%;bottom:-30%;left:-30%;transition-delay:.4s} .sk-ucard--insect .sk-i-box3::before{background:radial-gradient(circle at 30% 107%,var(--u-chrome) 0%,var(--u-chrome-mid) 90%)} .sk-ucard--insect .sk-i-box3:hover::before{opacity:1} .sk-ucard--insect .sk-i-box3:hover .sk-i-icon .sk-i-svg{filter:drop-shadow(0 0 5px rgba(238,251,230,.7))} .sk-ucard--insect .sk-i-box4{width:10%;height:10%;bottom:-10%;left:-10%;transition-delay:.6s} .sk-ucard--insect:hover,.sk-ucard--insect.is-active{transform:scale(1.1)} .sk-ucard--insect:hover .sk-i-box,.sk-ucard--insect.is-active .sk-i-box{bottom:-1px;left:-1px} .sk-ucard--insect:hover .sk-i-logo,.sk-ucard--insect.is-active .sk-i-logo{transform:translate(0,0);bottom:20px;right:20px} /* ===================================================================== 4) .sk-uload--ape — loader anneau isometrique (12 pistons) Utilise des variables locales (bg/sapin/lime) au lieu de couleurs vives. ===================================================================== */ .sk-uload--ape{ --u-a-bg:var(--u-panel);--u-a-p1:var(--u-sapin2);--u-a-p2:var(--u-lime);--u-a-fg:var(--u-cream); position:relative;display:flex;justify-content:center;align-items:center; width:14em;height:14em;border-radius:50%; font-size:clamp(9px,3.4vw,12px); letter-spacing:.1em;text-transform:uppercase;color:var(--u-a-fg); transform:rotateX(30deg) rotateZ(45deg); box-shadow:2em 0 2em rgba(0,0,0,.35) inset,-2em 0 2em rgba(238,251,230,.06) inset; font-family:var(--mono,ui-monospace,monospace); } .sk-uload--ape .sk-a-dot{ position:absolute;width:1.5em;height:1.5em;border-radius:50%; top:calc(50% - .75em);left:calc(50% - .75em); box-shadow:.1em .1em 0 .1em var(--u-ink),.3em 0 .3em rgba(0,0,0,.5); animation:sk-a-shadow 2s infinite; } .sk-uload--ape .sk-a-dot::before, .sk-uload--ape .sk-a-dot::after{content:"";display:block;position:absolute;left:0;width:inherit;animation-duration:2s;animation-iteration-count:infinite;transition:background-color .3s} .sk-uload--ape .sk-a-dot::before{animation-name:sk-a-push1;background-color:var(--u-a-bg);border-radius:inherit;box-shadow:.05em 0 .1em rgba(238,251,230,.2) inset;height:inherit;z-index:1} .sk-uload--ape .sk-a-dot::after{ animation-name:sk-a-push2;background-color:var(--u-a-p1);border-radius:.75em;bottom:0;height:3em; box-shadow:.1em .3em .2em rgba(238,251,230,.35) inset,0 -.4em .2em var(--u-sapin-lo) inset,0 -1em .25em rgba(0,0,0,.3) inset; clip-path:polygon(0 75%,100% 75%,100% 100%,0 100%); transform:rotate(-45deg);transform-origin:50% 2.25em; } .sk-uload--ape .sk-a-dot:nth-child(1){transform:rotate(0deg) translateX(5em) rotate(0deg);z-index:5} .sk-uload--ape .sk-a-dot:nth-child(1),.sk-uload--ape .sk-a-dot:nth-child(1)::before,.sk-uload--ape .sk-a-dot:nth-child(1)::after{animation-delay:0s} .sk-uload--ape .sk-a-dot:nth-child(2){transform:rotate(-30deg) translateX(5em) rotate(30deg);z-index:4} .sk-uload--ape .sk-a-dot:nth-child(2),.sk-uload--ape .sk-a-dot:nth-child(2)::before,.sk-uload--ape .sk-a-dot:nth-child(2)::after{animation-delay:-.1666666667s} .sk-uload--ape .sk-a-dot:nth-child(3){transform:rotate(-60deg) translateX(5em) rotate(60deg);z-index:3} .sk-uload--ape .sk-a-dot:nth-child(3),.sk-uload--ape .sk-a-dot:nth-child(3)::before,.sk-uload--ape .sk-a-dot:nth-child(3)::after{animation-delay:-.3333333333s} .sk-uload--ape .sk-a-dot:nth-child(4){transform:rotate(-90deg) translateX(5em) rotate(90deg);z-index:2} .sk-uload--ape .sk-a-dot:nth-child(4),.sk-uload--ape .sk-a-dot:nth-child(4)::before,.sk-uload--ape .sk-a-dot:nth-child(4)::after{animation-delay:-.5s} .sk-uload--ape .sk-a-dot:nth-child(5){transform:rotate(-120deg) translateX(5em) rotate(120deg);z-index:1} .sk-uload--ape .sk-a-dot:nth-child(5),.sk-uload--ape .sk-a-dot:nth-child(5)::before,.sk-uload--ape .sk-a-dot:nth-child(5)::after{animation-delay:-.6666666667s} .sk-uload--ape .sk-a-dot:nth-child(6){transform:rotate(-150deg) translateX(5em) rotate(150deg);z-index:1} .sk-uload--ape .sk-a-dot:nth-child(6),.sk-uload--ape .sk-a-dot:nth-child(6)::before,.sk-uload--ape .sk-a-dot:nth-child(6)::after{animation-delay:-.8333333333s} .sk-uload--ape .sk-a-dot:nth-child(7){transform:rotate(-180deg) translateX(5em) rotate(180deg);z-index:2} .sk-uload--ape .sk-a-dot:nth-child(7),.sk-uload--ape .sk-a-dot:nth-child(7)::before,.sk-uload--ape .sk-a-dot:nth-child(7)::after{animation-delay:-1s} .sk-uload--ape .sk-a-dot:nth-child(8){transform:rotate(-210deg) translateX(5em) rotate(210deg);z-index:3} .sk-uload--ape .sk-a-dot:nth-child(8),.sk-uload--ape .sk-a-dot:nth-child(8)::before,.sk-uload--ape .sk-a-dot:nth-child(8)::after{animation-delay:-1.1666666667s} .sk-uload--ape .sk-a-dot:nth-child(9){transform:rotate(-240deg) translateX(5em) rotate(240deg);z-index:4} .sk-uload--ape .sk-a-dot:nth-child(9),.sk-uload--ape .sk-a-dot:nth-child(9)::before,.sk-uload--ape .sk-a-dot:nth-child(9)::after{animation-delay:-1.3333333333s} .sk-uload--ape .sk-a-dot:nth-child(10){transform:rotate(-270deg) translateX(5em) rotate(270deg);z-index:5} .sk-uload--ape .sk-a-dot:nth-child(10),.sk-uload--ape .sk-a-dot:nth-child(10)::before,.sk-uload--ape .sk-a-dot:nth-child(10)::after{animation-delay:-1.5s} .sk-uload--ape .sk-a-dot:nth-child(11){transform:rotate(-300deg) translateX(5em) rotate(300deg);z-index:6} .sk-uload--ape .sk-a-dot:nth-child(11),.sk-uload--ape .sk-a-dot:nth-child(11)::before,.sk-uload--ape .sk-a-dot:nth-child(11)::after{animation-delay:-1.6666666667s} .sk-uload--ape .sk-a-dot:nth-child(12){transform:rotate(-330deg) translateX(5em) rotate(330deg);z-index:6} .sk-uload--ape .sk-a-dot:nth-child(12),.sk-uload--ape .sk-a-dot:nth-child(12)::before,.sk-uload--ape .sk-a-dot:nth-child(12)::after{animation-delay:-1.8333333333s} .sk-uload--ape .sk-a-text{font-size:.75em;max-width:5rem;position:relative;transform:rotateZ(-45deg);text-shadow:0 0 .1em rgba(238,251,230,.5);color:var(--u-a-fg)} @keyframes sk-a-shadow{ from{animation-timing-function:ease-in;box-shadow:.1em .1em 0 .1em var(--u-ink),.3em 0 .3em rgba(0,0,0,.3)} 25%{animation-timing-function:ease-out;box-shadow:.1em .1em 0 .1em var(--u-ink),.8em 0 .8em rgba(0,0,0,.5)} 50%,to{box-shadow:.1em .1em 0 .1em var(--u-ink),.3em 0 .3em rgba(0,0,0,.3)} } @keyframes sk-a-push1{ from{animation-timing-function:ease-in;background-color:var(--u-a-bg);transform:translate(0,0)} 25%{animation-timing-function:ease-out;background-color:var(--u-a-p2);transform:translate(-71%,-71%)} 50%,to{background-color:var(--u-a-bg);transform:translate(0,0)} } @keyframes sk-a-push2{ from{animation-timing-function:ease-in;background-color:var(--u-a-bg);clip-path:polygon(0 75%,100% 75%,100% 100%,0 100%)} 25%{animation-timing-function:ease-out;background-color:var(--u-a-p1);clip-path:polygon(0 25%,100% 25%,100% 100%,0 100%)} 50%,to{background-color:var(--u-a-bg);clip-path:polygon(0 75%,100% 75%,100% 100%,0 100%)} } /* ===================================================================== 5) .sk-uload--hound — loader billes radiales (transform-only) Neumorphisme clair d'origine -> pistes charbon + billes chrome (glint lime). ===================================================================== */ .sk-uload--hound{display:flex;align-items:center;justify-content:center;font-size:clamp(8px,3vw,11px)} .sk-uload--hound .sk-h-tracks, .sk-uload--hound .sk-h-slots{display:flex;align-items:center;justify-content:center} .sk-uload--hound .sk-h-track{position:absolute;width:1.15em;height:13em;border-radius:50px;background:var(--u-panel2)} .sk-uload--hound .sk-h-track::after{ content:"";position:absolute;left:0;top:0;width:1.15em;height:5em;border-radius:50px; background:var(--u-panel2);border:1px solid var(--u-line); box-shadow:inset 5px 5px 15px rgba(0,0,0,.55),inset -5px -5px 15px rgba(238,251,230,.04); -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%); mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%); } .sk-uload--hound .sk-h-track::before{ content:"";position:absolute;right:0;bottom:0;width:1.15em;height:4.5em;border-radius:50px; background:var(--u-panel2);border:1px solid var(--u-line); box-shadow:inset 5px 5px 15px rgba(0,0,0,.55),inset -5px -5px 15px rgba(238,251,230,.04); -webkit-mask-image:linear-gradient(to top,#000 calc(100% - 48px),transparent 100%); mask-image:linear-gradient(to top,#000 calc(100% - 48px),transparent 100%); } .sk-uload--hound .sk-h-slot{position:absolute;width:1.15em;height:13em;border-radius:50px;background:transparent} .sk-uload--hound .sk-h-ball{ width:1.15em;height:1.15em;border-radius:50%; background:radial-gradient(circle at 50% 34%,var(--u-chrome-hi),var(--u-chrome) 46%,var(--u-chrome-mid) 100%); box-shadow: rgba(0,0,0,.4) 0 -10px 10px 0 inset, rgba(0,0,0,.32) 0 -15px 15px 0 inset, rgba(0,0,0,.22) 0 -34px 20px 0 inset, rgba(157,255,60,.28) 0 5px 6px -3px inset, rgba(0,0,0,.5) 0 2px 1px, rgba(0,0,0,.4) 0 8px 4px, rgba(0,0,0,.35) 0 16px 8px; transition:transform 800ms cubic-bezier(1,-.4,0,1.4); animation:sk-h-move 3.63s ease-in-out infinite; } .sk-uload--hound .sk-h-track:nth-child(2){transform:rotate(20deg)} .sk-uload--hound .sk-h-track:nth-child(3){transform:rotate(40deg)} .sk-uload--hound .sk-h-track:nth-child(4){transform:rotate(60deg)} .sk-uload--hound .sk-h-track:nth-child(5){transform:rotate(80deg)} .sk-uload--hound .sk-h-track:nth-child(6){transform:rotate(100deg)} .sk-uload--hound .sk-h-track:nth-child(7){transform:rotate(120deg)} .sk-uload--hound .sk-h-track:nth-child(8){transform:rotate(140deg)} .sk-uload--hound .sk-h-track:nth-child(9){transform:rotate(160deg)} .sk-uload--hound .sk-h-slot:nth-child(2){transform:rotate(20deg)} .sk-uload--hound .sk-h-slot:nth-child(3){transform:rotate(40deg)} .sk-uload--hound .sk-h-slot:nth-child(4){transform:rotate(60deg)} .sk-uload--hound .sk-h-slot:nth-child(5){transform:rotate(80deg)} .sk-uload--hound .sk-h-slot:nth-child(6){transform:rotate(100deg)} .sk-uload--hound .sk-h-slot:nth-child(7){transform:rotate(120deg)} .sk-uload--hound .sk-h-slot:nth-child(8){transform:rotate(140deg)} .sk-uload--hound .sk-h-slot:nth-child(9){transform:rotate(160deg)} .sk-uload--hound .sk-h-slot:nth-child(2) .sk-h-ball{animation-delay:.2s} .sk-uload--hound .sk-h-slot:nth-child(3) .sk-h-ball{animation-delay:.4s} .sk-uload--hound .sk-h-slot:nth-child(4) .sk-h-ball{animation-delay:.6s} .sk-uload--hound .sk-h-slot:nth-child(5) .sk-h-ball{animation-delay:.8s} .sk-uload--hound .sk-h-slot:nth-child(6) .sk-h-ball{animation-delay:1s} .sk-uload--hound .sk-h-slot:nth-child(7) .sk-h-ball{animation-delay:1.2s} .sk-uload--hound .sk-h-slot:nth-child(8) .sk-h-ball{animation-delay:1.4s} .sk-uload--hound .sk-h-slot:nth-child(9) .sk-h-ball{animation-delay:1.6s} @keyframes sk-h-move{0%{transform:translateY(0)}50%{transform:translateY(12em)}100%{transform:translateY(0)}} /* ===================================================================== ACCESSIBILITE — ?fx=off (via JS -> data-sk-uc-fx="off") + reduced-motion Gele les animations continues ; les loaders gardent un pouls d'opacite. ===================================================================== */ @keyframes sk-uc-pulse{0%,100%{opacity:.5}50%{opacity:1}} @media (prefers-reduced-motion:reduce){ .sk-uload--ape .sk-a-dot, .sk-uload--ape .sk-a-dot::before, .sk-uload--ape .sk-a-dot::after, .sk-uload--hound .sk-h-ball, .sk-ucard--dingo .sk-d-inner-bg, .sk-ucard--dingo .sk-d-outer path.bak20, .sk-ucard--dingo .sk-d-bar-slider{animation:none!important} .sk-uload--ape,.sk-uload--hound{animation:sk-uc-pulse 1.6s ease-in-out infinite} .sk-ucard--liger .sk-l-plate, .sk-ucard--dingo .sk-d-card, .sk-ucard--insect{transition-duration:.001ms!important} } :root[data-sk-uc-fx="off"] .sk-uload--ape .sk-a-dot, :root[data-sk-uc-fx="off"] .sk-uload--ape .sk-a-dot::before, :root[data-sk-uc-fx="off"] .sk-uload--ape .sk-a-dot::after, :root[data-sk-uc-fx="off"] .sk-uload--hound .sk-h-ball, :root[data-sk-uc-fx="off"] .sk-ucard--dingo .sk-d-inner-bg, :root[data-sk-uc-fx="off"] .sk-ucard--dingo .sk-d-outer path.bak20, :root[data-sk-uc-fx="off"] .sk-ucard--dingo .sk-d-bar-slider{animation:none!important} :root[data-sk-uc-fx="off"] .sk-uload--ape, :root[data-sk-uc-fx="off"] .sk-uload--hound{animation:sk-uc-pulse 1.6s ease-in-out infinite} :root[data-sk-uc-fx="off"] .sk-ucard--liger .sk-l-plate, :root[data-sk-uc-fx="off"] .sk-ucard--dingo .sk-d-card, :root[data-sk-uc-fx="off"] .sk-ucard--insect{transition-duration:.001ms!important} /* --- Mobile : rien ne deborde, on reduit legerement les plus grandes --- */ @media (max-width:360px){ .sk-ucard--liger{transform:scale(.86);transform-origin:top center} .sk-ucard--dingo{transform:scale(.9);transform-origin:top center} } /* skld-trailimage.css */ /* SKLD Trailing Image — traînée d'images qui suit le curseur (vanilla, DA SKLD). ----------------------------------------------------------------------------- Porté depuis animata.design/docs/image/trailing-image, réécrit sans React : - [data-trailimage] : quand le curseur balaie la zone (idéal pour un hero), des images du jeu `data-images` apparaissent successivement dans le sillage du curseur, montent puis s'effacent. Le cycle défile les URLs en boucle. Le JS (skld-trailimage.js) crée un calque `.sk-trail-stage` (position absolue, pointer-events:none) et y injecte des vignettes `.sk-trail-img` positionnées par transform (translate3d + scale + rotate). Ce CSS ne fait que la mise en scène et le REPEINT SKLD (cadre chrome froid, halo sapin, filet lime discret, unification colorimétrique des photos). Anim : transform + opacity uniquement (GPU). REPEINT : les photos d'origine (couleurs quelconques) sont ramenées dans la DA sombre — désat/contraste léger + teinte sapin en surcouche + liseré chrome + un filet lime ténu. Sapin DOMINANT, lime en ACCENT léger. Zéro orange/ambre. Débrayé (aucune traînée) si : ?fx=off | prefers-reduced-motion | pointer:coarse (tactile — l'effet est piloté par le curseur). Discret et premium. */ [data-trailimage]{ /* Palette locale fir/chrome (aucun token "sapin" dans skald.css → on le définit ici, lime reprise du thème). */ --sk-trail-deep:#071a12; --sk-trail-sapin:#0e3325; --sk-trail-sapin-hi:#16553a; --sk-trail-chrome:#dfe8e2; --sk-trail-chrome-dim:#8ea095; --sk-trail-lime:var(--green,#9dff3c); /* Taille de vignette (largeur ; hauteur = ratio naturel). Réglable par data-trailimage-size via une variable inline posée par le JS. */ --sk-trail-w:clamp(120px,15vw,210px); /* z-index du calque : par défaut au premier plan discret (pointer-events:none, ne bloque jamais). data-trailimage-layer="back" le repasse derrière le contenu. */ --sk-trail-z:1; position:relative; /* ancre le calque absolu (idempotent, sans casse) */ } /* Calque de scène : couvre la zone, clippe la traînée, ne capte aucun pointeur. */ .sk-trail-stage{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:var(--sk-trail-z); /* isole le blending du repeint pour ne pas déteindre sur le reste du hero */ isolation:isolate; } /* Vignette individuelle. Position + échelle + rotation portées par le transform ; x/y/rotation figés via --x/--y/--r (posés inline par le JS), seule l'échelle change entre les états → mouvement 100% transform. */ .sk-trail-img{ position:absolute; left:0; top:0; width:var(--sk-trail-w); height:auto; will-change:transform,opacity; opacity:0; transform: translate3d(var(--x,0),var(--y,0),0) translate(-50%,-50%) rotate(var(--r,0deg)) scale(.55); transition: transform .46s cubic-bezier(.2,.7,.2,1), opacity .40s ease-out; } /* Entrée : plein cadre. */ .sk-trail-img.is-in{ opacity:1; transform: translate3d(var(--x,0),var(--y,0),0) translate(-50%,-50%) rotate(var(--r,0deg)) scale(1); } /* Sortie : léger grossissement + fondu (sortie un peu plus lente pour le velours). */ .sk-trail-img.is-out{ opacity:0; transform: translate3d(var(--x,0),var(--y,0),0) translate(-50%,-50%) rotate(var(--r,0deg)) scale(1.06); transition: transform .60s cubic-bezier(.2,.7,.2,1), opacity .55s ease-in; } /* Cadre chrome froid + halo sapin. Le repeint colorimétrique est sur l'image. */ .sk-trail-img{ border-radius:12px; padding:0; background:var(--sk-trail-deep); box-shadow: 0 0 0 1px rgba(223,232,226,.16), /* liseré chrome fin */ 0 18px 42px -18px rgba(0,0,0,.72), /* ombre portée profonde */ 0 0 34px -10px rgba(22,85,58,.55); /* halo sapin diffus */ } /* L'image elle-même : ramenée dans la DA (désat/contraste léger, ombres refroidies). */ .sk-trail-img > img{ display:block; width:100%; height:auto; border-radius:11px; filter:saturate(.82) contrast(1.06) brightness(.94); } /* Surcouche sapin (teinte l'image vers le vert profond) + filet lime en tête. pointer-events none, opacités faibles → REPEINT discret, jamais criard. */ .sk-trail-img::after{ content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none; background: linear-gradient(180deg, rgba(157,255,60,.10) 0%, /* accent lime ténu en haut */ rgba(157,255,60,0) 14%), linear-gradient(155deg, rgba(14,51,37,.42) 0%, /* teinte sapin dominante */ rgba(7,26,18,.28) 60%, rgba(7,26,18,.52) 100%); mix-blend-mode:multiply; } /* Reflet chrome en biais (très léger) pour le fini premium. */ .sk-trail-img::before{ content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none; background:linear-gradient(120deg, rgba(223,232,226,.14) 0%, rgba(223,232,226,0) 34%); mix-blend-mode:screen; } /* Garde-fou : si le JS n'a pas la main (débrayé), rien n'est injecté → aucun coût. On neutralise aussi toute anim résiduelle sous reduced-motion. */ @media (prefers-reduced-motion: reduce){ .sk-trail-img{ transition:none !important; } } /* skld-shapeshifter.css */ /* SKLD Shape Shifter — forme organique morphante pour hero (vanilla, DA SKLD). --------------------------------------------------------------------------- Porté depuis animata.design/docs/hero/shape-shifter, réécrit sans React et en transform+opacity STRICT (perf mobile). Le "morphing" naît de la SUPERPOSITION de plusieurs blobs (border-radius asymétriques) qui tournent à des vitesses/directions différentes : la silhouette de l'UNION se déforme en continu, alors que chaque couche reste rigide → fluide, sans recalcul de path, 100% composité GPU. Structure injectée par le JS dans [data-shapeshifter] : .sk-ss-layer (positionnement d'une couche) .sk-ss-orbit (rotation) > .sk-ss-blob (forme + gradient + pulsation d'échelle) .sk-ss-sheen (reflet chrome radial, opacité pulsée) La rotation et la pulsation sont sur des éléments IMBRIQUÉS distincts → pas de conflit de transform (chaque couche anime son propre transform). REPEINT : sapin DOMINANT (dégradés vert profond), lime en ACCENT LÉGER (une seule couche, faible opacité), chrome pour le reflet. Zéro orange/ambre. Discret et premium. Débrayé → figé sur une belle forme au repos si : ?fx=off | prefers-reduced-motion (classe .is-static posée par le JS ; ce media query coupe aussi les anims en secours). pointer-events:none : ne bloque jamais l'UI. */ [data-shapeshifter]{ /* Palette locale fir/chrome (pas de token "sapin" dans skald.css ; lime reprise du thème). */ --sk-ss-deep:#061a12; --sk-ss-sapin:#0e3325; --sk-ss-sapin-hi:#175a3c; --sk-ss-sapin-lo:#0a281c; --sk-ss-chrome:#dfe8e2; --sk-ss-lime:var(--green,#9dff3c); /* Taille du champ carré (posée éventuellement par le JS via data-shapeshifter-size). */ --sk-ss-size:clamp(240px,38vw,560px); /* Multiplicateur de vitesse (1 = base ; >1 accélère). */ --sk-ss-speed:1; position:relative; width:var(--sk-ss-size); height:var(--sk-ss-size); pointer-events:none; /* décoratif : ne capte aucun clic */ isolation:isolate; /* confine le blending des couches */ } /* Une couche occupe tout le champ et centre son orbite. */ .sk-ss-layer{ position:absolute; inset:0; display:grid; place-items:center; } /* Orbite : porte UNIQUEMENT la rotation. */ .sk-ss-orbit{ width:78%; height:78%; transform:rotate(0deg); will-change:transform; } /* Blob : forme organique + dégradé sapin + pulsation d'échelle + léger flou pour la fusion. */ .sk-ss-blob{ width:100%; height:100%; border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; filter:blur(2px); will-change:transform; transform:scale(1); } /* --- Couche A : masse sapin principale (dominante) ------------------------------ */ .sk-ss-layer.a .sk-ss-orbit{ animation:sk-ss-spin calc(26s / var(--sk-ss-speed)) linear infinite; } .sk-ss-layer.a .sk-ss-blob{ background: radial-gradient(130% 130% at 32% 26%, var(--sk-ss-sapin-hi) 0%, var(--sk-ss-sapin) 46%, var(--sk-ss-sapin-lo) 100%); box-shadow:0 24px 70px -26px rgba(6,26,18,.9); opacity:.96; animation:sk-ss-pulse calc(9s / var(--sk-ss-speed)) ease-in-out infinite; } /* --- Couche B : contre-masse plus sombre, rotation inverse plus lente ----------- */ .sk-ss-layer.b .sk-ss-orbit{ width:88%; height:88%; animation:sk-ss-spin-rev calc(34s / var(--sk-ss-speed)) linear infinite; } .sk-ss-layer.b .sk-ss-blob{ border-radius:57% 43% 38% 62% / 55% 52% 48% 45%; background: radial-gradient(120% 120% at 68% 72%, var(--sk-ss-sapin) 0%, var(--sk-ss-deep) 62%, rgba(6,26,18,0) 100%); opacity:.78; mix-blend-mode:screen; /* fusionne la silhouette avec la couche A */ animation:sk-ss-pulse-2 calc(12s / var(--sk-ss-speed)) ease-in-out infinite; } /* --- Couche C : accent LIME ténu, fin liseré tournant très lentement ------------ */ .sk-ss-layer.c .sk-ss-orbit{ width:66%; height:66%; animation:sk-ss-spin calc(48s / var(--sk-ss-speed)) linear infinite; } .sk-ss-layer.c .sk-ss-blob{ border-radius:48% 52% 55% 45% / 52% 46% 54% 48%; background:transparent; filter:blur(.5px); /* liseré lime interne, très discret (accent léger, jamais dominant) */ box-shadow: inset 0 0 0 1.5px rgba(157,255,60,.30), inset 0 0 26px -6px rgba(157,255,60,.22); opacity:.55; animation:sk-ss-pulse calc(7.5s / var(--sk-ss-speed)) ease-in-out infinite; } /* Reflet chrome : point spéculaire froid qui respire (opacité + léger scale). */ .sk-ss-sheen{ position:absolute; inset:8%; border-radius:50%; pointer-events:none; background:radial-gradient(38% 32% at 38% 30%, rgba(223,232,226,.30) 0%, rgba(223,232,226,.06) 40%, rgba(223,232,226,0) 70%); mix-blend-mode:screen; will-change:transform,opacity; animation:sk-ss-sheen calc(11s / var(--sk-ss-speed)) ease-in-out infinite; } /* ---- Keyframes (transform + opacity uniquement) -------------------------------- */ @keyframes sk-ss-spin { to { transform:rotate(360deg); } } @keyframes sk-ss-spin-rev { to { transform:rotate(-360deg); } } @keyframes sk-ss-pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } } @keyframes sk-ss-pulse-2 { 0%,100%{ transform:scale(1.05); } 50%{ transform:scale(.94); } } @keyframes sk-ss-sheen{ 0%,100%{ opacity:.5; transform:translate3d(0,0,0) scale(1); } 50% { opacity:.9; transform:translate3d(4%,3%,0) scale(1.06); } } /* Débrayé : formes figées sur un état harmonieux (aucune animation). */ [data-shapeshifter].is-static .sk-ss-orbit, [data-shapeshifter].is-static .sk-ss-blob, [data-shapeshifter].is-static .sk-ss-sheen{ animation:none !important; } [data-shapeshifter].is-static .sk-ss-layer.b .sk-ss-orbit{ transform:rotate(-18deg); } [data-shapeshifter].is-static .sk-ss-layer.c .sk-ss-orbit{ transform:rotate(12deg); } /* Secours reduced-motion même si le JS n'a pas posé la classe. */ @media (prefers-reduced-motion: reduce){ .sk-ss-orbit,.sk-ss-blob,.sk-ss-sheen{ animation:none !important; } } /* skld-stacked.css */ /* SKLD Stacked Sections — sections/cartes qui s'empilent au scroll, 100% VANILLA (zéro dépendance, zéro réseau, zéro emoji). Portage de animata.design « Stacked Sections », REPEINT à la palette SKLD (noir/charbon + sapin dominant, lime #9dff3c en accent léger). --------------------------------------------------------------------------------------------- Principe : chaque carte est `position: sticky` et se cale sous la précédente en laissant dépasser une fine bande d'en-tête (le « peek »). En scrollant, la carte suivante remonte et se pose PAR-DESSUS ; la carte recouverte RECULE (léger scale down + remontée + assombrissement) pour donner la profondeur d'un jeu de cartes qui se pose. Effet scroll-storytelling premium. Perf : l'empilement lui-même est en CSS pur (position: sticky) -> AUCUN JS requis pour stacker, donc dégradation propre sans JS. Le JS n'écrit QU'UNE variable par carte et par frame (--sk-stk-p : progression de recul 0..1) ; toutes les interpolations (scale, translate, voile) sont faites ICI en calc(var(...)). Mouvement lourd = transform + opacity uniquement (le border-radius reste statique). GPU-friendly. Coupures : .sk-stk-static (posé par le JS sur ?fx=off ou prefers-reduced-motion) -> les cartes redeviennent une simple liste verticale lisible, sans pin, sans scale, sans hauteur géante. Mobile : peek/hauteurs réduits. Rien ici ne touche skald.css / polish / base.html. Marquage attendu :
...
...
*/ /* ---------------------------------------------------------------- conteneur (pile) */ [data-stacked] { /* réglages surchargés par data-* (lus par le JS) ou en inline */ --sk-stk-top: clamp(16px, 6vh, 72px); /* décalage du haut de la pile */ --sk-stk-peek: clamp(38px, 5.4vh, 56px); /* bande d'en-tête laissée visible sous les suivantes */ --sk-stk-h: 92vh; /* hauteur de flux d'une section (course de scroll) */ --sk-stk-cardh: clamp(340px, 74vh, 760px);/* hauteur mini de la carte */ --sk-stk-w: min(1080px, 100%); /* largeur de la carte */ --sk-stk-min: .915; /* échelle mini d'une carte reculée */ --sk-stk-lift: 26px; /* remontée max d'une carte reculée (profondeur) */ --sk-stk-dim: .5; /* opacité max du voile sur une carte reculée */ position: relative; display: block; padding: 0 var(--gut, 5vw); /* isole les z-index des cartes empilées sans polluer la page */ isolation: isolate; } /* ---------------------------------------------------------------- section épinglée */ .sk-stack-item { position: sticky; /* chaque section se cale un cran plus bas -> l'en-tête des précédentes reste visible */ top: calc(var(--sk-stk-top) + var(--sk-i, 0) * var(--sk-stk-peek)); min-height: var(--sk-stk-h); display: flex; align-items: flex-start; /* le haut de la carte est déterministe = point de calage */ justify-content: center; /* progression de recul (0 = au premier plan, 1 = complètement reculée). ÉCRITE par le JS. */ --sk-stk-p: 0; } /* ---------------------------------------------------------------- carte */ .sk-stack-card { position: relative; width: var(--sk-stk-w); min-height: var(--sk-stk-cardh); box-sizing: border-box; padding: clamp(22px, 3.4vw, 46px); border-radius: 22px; overflow: hidden; /* skin SKLD : panneau charbon, liseré froid, halo sapin très discret */ background: radial-gradient(140% 120% at 18% 0%, rgba(157, 255, 60, .05) 0%, transparent 46%), linear-gradient(180deg, var(--panel2, #141a12) 0%, var(--panel, #0e120d) 58%, var(--bg2, #0a0d0a) 100%); border: 1px solid var(--line2, rgba(238, 251, 230, .14)); box-shadow: 0 -1px 0 rgba(238, 251, 230, .05) inset, 0 40px 90px -46px rgba(0, 0, 0, .9), 0 2px 0 rgba(0, 0, 0, .4); color: var(--cream, #eefbe6); transform-origin: 50% 0%; /* recul : remontée + réduction d'échelle, pilotés par la progression. transform pur. */ transform: translate3d(0, calc(var(--sk-stk-p) * var(--sk-stk-lift) * -1), 0) scale(calc(1 - var(--sk-stk-p) * (1 - var(--sk-stk-min)))); will-change: transform; } /* liseré lime en haut de carte (accent LÉGER) — statique, purement décoratif */ .sk-stack-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--green, #9dff3c) 22%, var(--lime, #c6ff6e) 50%, var(--green, #9dff3c) 78%, transparent); opacity: .8; pointer-events: none; z-index: 6; } /* voile d'assombrissement : la carte reculée s'efface derrière les suivantes (opacity only) */ .sk-stack-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; background: linear-gradient(180deg, rgba(6, 8, 6, .35) 0%, rgba(6, 8, 6, .82) 100%); opacity: calc(var(--sk-stk-p) * var(--sk-stk-dim)); } /* ---------------------------------------------------------------- garniture optionnelle de carte (facultative — utilisable pour peupler le peek visible en haut de chaque carte) */ .sk-stack-head { position: relative; z-index: 4; display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(14px, 2vw, 22px); } .sk-stack-index { flex: 0 0 auto; font: 700 13px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; color: var(--green, #9dff3c); padding: 8px 11px; border: 1px solid rgba(157, 255, 60, .4); border-radius: 9px; background: rgba(157, 255, 60, .06); font-variant-numeric: tabular-nums; } .sk-stack-eye { font: 500 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .28em; text-transform: uppercase; color: var(--muted, #828b7b); } .sk-stack-title { position: relative; z-index: 4; margin: 0; font: 800 clamp(26px, 4.6vw, 56px)/1.02 var(--head, system-ui, sans-serif); letter-spacing: -.02em; color: var(--cream, #eefbe6); } .sk-stack-body { position: relative; z-index: 4; margin: clamp(12px, 1.6vw, 18px) 0 0; max-width: 62ch; font: 400 clamp(14px, 1.5vw, 17px)/1.62 var(--body, system-ui, sans-serif); color: var(--muted, #828b7b); } .sk-stack-body strong { color: var(--cream, #eefbe6); font-weight: 600; } .sk-stack-body b { color: var(--green, #9dff3c); font-weight: 700; } /* ---------------------------------------------------------------- mobile */ @media (max-width: 720px) { [data-stacked] { --sk-stk-top: clamp(12px, 3vh, 40px); --sk-stk-peek: clamp(30px, 6vh, 46px); --sk-stk-h: 90vh; --sk-stk-cardh: clamp(300px, 70vh, 640px); --sk-stk-lift: 18px; padding: 0 var(--gut, 18px); } .sk-stack-card { border-radius: 18px; } } /* ---------------------------------------------------------------- mode statique (fx=off / reduced) Les cartes redeviennent une liste verticale simple : lisible, aucune hauteur géante, aucun scrub. */ .sk-stk-static .sk-stack-item { position: static; min-height: 0; margin: 0 0 clamp(16px, 2.4vh, 28px); --sk-stk-p: 0; } .sk-stk-static .sk-stack-card { min-height: 0; transform: none; will-change: auto; } .sk-stk-static .sk-stack-card::after { opacity: 0; } /* filet de sécurité : aucune animation résiduelle en mouvement réduit */ @media (prefers-reduced-motion: reduce) { .sk-stack-card { transition: none; } } /* skld-onboarding.css */ /* SKLD — LA FENÊTRE DE BIENVENUE (direction v5 « pierre »). La page derrière devient un voile de pierre dépolie ; la fenêtre est un OBJET NOIR posé dessus, calé entre deux roches (l'une moussue, l'autre plate). Le mot en grand, plein puis en filet ; trois étapes en lignes réglées ; le bouton du socle. Lime : le palet du bouton et le point de l'étape faite, rien d'autre. transform / opacity / filter / clip-path seulement. */ .sk-ob{ position:fixed; inset:0; z-index:9990; display:grid; place-items:center; padding:clamp(14px,3vw,44px); overflow:auto; overscroll-behavior:contain; background:rgba(207,210,206,.78); -webkit-backdrop-filter:blur(18px) saturate(.8); backdrop-filter:blur(18px) saturate(.8); opacity:0; transition:opacity .36s var(--v5-masse,cubic-bezier(.32,.72,0,1)); } .sk-ob.is-on{ opacity:1; } .sk-ob__scene{ position:relative; isolation:isolate; width:min(1060px,100%); --px:0; --py:0; } /* ---- les roches : derrière la dalle, elles dépassent ; elles glissent avec le pointeur */ .sk-ob__roche{ position:absolute; z-index:-1; height:auto; pointer-events:none; user-select:none; filter:drop-shadow(0 34px 26px rgba(0,0,0,.34)); opacity:0; transition:opacity .7s ease .12s, transform 1.1s var(--v5-sortie,cubic-bezier(.16,1,.3,1)); will-change:transform; } .sk-ob__roche--a{ width:clamp(190px,25vw,340px); right:clamp(-128px,-8vw,-40px); top:clamp(-128px,-9vw,-66px); transform:translate3d(60px,-44px,0) rotate(9deg); } .sk-ob__roche--b{ width:clamp(220px,34vw,500px); left:clamp(-178px,-12.4vw,-50px); bottom:clamp(-92px,-6vw,-34px); transform:translate3d(-70px,36px,0) rotate(-6deg); } .sk-ob.is-on .sk-ob__roche{ opacity:1; } .sk-ob.is-on .sk-ob__roche--a{ transform:translate3d(calc(var(--px) * -26px),calc(var(--py) * -18px),0) rotate(0deg); } .sk-ob.is-on .sk-ob__roche--b{ transform:translate3d(calc(var(--px) * 34px),calc(var(--py) * 22px),0) rotate(0deg); } /* ---- la dalle */ .sk-ob__card{ position:relative; container-type:inline-size; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); column-gap:clamp(26px,4.4vw,72px); grid-template-areas:"kick kick" "titre titre" "tete etapes"; padding:clamp(28px,3.4vw,52px); padding-top:clamp(34px,3.6vw,54px); border-radius:30px 30px 30px 6px; color:#f1f1ec; outline:none; background:#060606 radial-gradient(90% 70% at 0% 0%,rgba(255,255,255,.06),rgba(255,255,255,0) 62%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.085), inset 0 1px 0 rgba(255,255,255,.12), 0 80px 90px -64px rgba(0,0,0,.9), 0 34px 60px -34px rgba(0,0,0,.5); opacity:0; transform:translate3d(0,30px,0) scale(.982); filter:blur(12px); transition:transform .66s var(--v5-masse,cubic-bezier(.32,.72,0,1)), opacity .4s ease, filter .5s ease; } .sk-ob.is-on .sk-ob__card{ opacity:1; transform:none; filter:none; } /* le grain de la pierre, très bas : la dalle reste noire */ .sk-ob__card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background-image:var(--v5-grain); opacity:.1; } /* repères d'angle : une équerre en haut à gauche, une en bas à droite */ .sk-ob__card::after{ content:""; position:absolute; inset:14px; pointer-events:none; --t:linear-gradient(rgba(241,241,236,.44),rgba(241,241,236,.44)); background:var(--t) left top/13px 1px no-repeat, var(--t) left top/1px 13px no-repeat, var(--t) right bottom/13px 1px no-repeat, var(--t) right bottom/1px 13px no-repeat; } .sk-ob__kick{ grid-area:kick; } .sk-ob__title{ grid-area:titre; } .sk-ob__tete{ grid-area:tete; } .sk-ob__steps{ grid-area:etapes; } .sk-ob__x{ position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:13px 13px 13px 4px; cursor:pointer; color:rgba(241,241,236,.72); background:linear-gradient(180deg,#1e1e1e,#101010); box-shadow:inset 0 0 0 1px rgba(255,255,255,.085), inset 0 1px 0 rgba(255,255,255,.11); transition:color .25s ease, transform .5s var(--v5-masse,cubic-bezier(.32,.72,0,1)); } .sk-ob__x svg{ transition:transform .5s var(--v5-masse,cubic-bezier(.32,.72,0,1)); } .sk-ob__x:hover{ color:#fff; } .sk-ob__x:hover svg{ transform:rotate(90deg); } .sk-ob__x:active{ transform:scale(.94); } .sk-ob__x:focus-visible,.sk-ob__later:focus-visible,.sk-ob__cta .btn:focus-visible{ outline:2px solid #f1f1ec; outline-offset:3px; } /* ---- la tête : le relevé, le mot, la phrase, les commandes */ .sk-ob__tete{ display:flex; flex-direction:column; min-width:0; } .sk-ob__kick{ display:flex; align-items:center; gap:10px; margin:0 0 clamp(14px,1.6vw,22px); font-family:var(--f-mono,"Archivo",sans-serif); font-weight:600; font-size:10.5px; line-height:1; letter-spacing:.08em; text-transform:uppercase; color:rgba(241,241,236,.6); } .sk-ob__kick::before{ content:""; flex:none; width:26px; height:1px; background:currentColor; } .sk-ob__title{ margin:0; font-family:var(--f-mega,"Archivo",sans-serif); font-weight:900; font-stretch:125%; font-size:clamp(30px,5.2vw,74px); font-size:clamp(30px,7.86cqi,84px); /* la 1re valeur : navigateurs sans unités de conteneur */ line-height:.9; letter-spacing:-.045em; text-transform:uppercase; color:#f1f1ec; white-space:nowrap; padding-bottom:clamp(20px,2.6vw,38px); margin-bottom:clamp(20px,2.6vw,36px); border-bottom:1px solid rgba(232,233,228,.16); } .sk-ob__title > span{ display:inline-block; vertical-align:top; overflow:hidden; padding:.06em .04em .04em 0; margin:-.06em -.04em -.04em 0; } .sk-ob__title i{ display:block; font-style:normal; white-space:nowrap; transform:translate3d(0,108%,0); transition:transform .8s var(--v5-sortie,cubic-bezier(.16,1,.3,1)) .14s; } .sk-ob__title > span + span i{ transition-delay:.24s; color:transparent; -webkit-text-stroke:1.4px rgba(241,241,236,.9); } .sk-ob.is-on .sk-ob__title i{ transform:none; } .sk-ob.is-on .sk-ob__title{ animation:sk-ob-parasite .46s steps(1,end) .62s 1 both; } @keyframes sk-ob-parasite{ 0%{ clip-path:inset(8% 0 64% 0); transform:translateX(-12px); } 22%{ clip-path:inset(54% 0 18% 0); transform:translateX(9px); } 44%{ clip-path:inset(30% 0 46% 0); transform:translateX(-6px); } 66%{ clip-path:inset(0 0 0 0); transform:translateX(3px); } 100%{ clip-path:inset(0 0 0 0); transform:none; } } .sk-ob__lead{ margin:0 0 clamp(22px,2.6vw,34px); max-width:19ch; font-family:var(--f-display,"Archivo",sans-serif); font-weight:500; font-size:clamp(19px,1.72vw,25px); line-height:1.16; letter-spacing:-.012em; color:#f1f1ec; text-wrap:balance; } .sk-ob__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; } .sk-ob__later{ color:rgba(241,241,236,.82); } /* la flèche du bouton principal passe toute seule, puis repasse au survol (règle du socle) */ .sk-ob.is-on .sk-ob__cta .btn.pri .btn-ico svg{ animation:sk-ob-fleche 3.4s cubic-bezier(.2,.8,.2,1) 1.5s infinite; } .sk-ob__cta .btn.pri:hover .btn-ico svg{ animation-duration:.55s; animation-delay:0s; animation-iteration-count:1; } @keyframes sk-ob-fleche{ 0%{transform:none} 8%{transform:translateX(150%)} 8.01%{transform:translateX(-150%)} 17%,100%{transform:none} } /* ---- les étapes : des lignes réglées, le chiffre en filet qui se remplit quand c'est fait */ .sk-ob__steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .sk-ob__step{ display:grid; grid-template-columns:clamp(64px,7.4vw,104px) minmax(0,1fr) auto; align-items:center; column-gap:clamp(12px,1.6vw,22px); padding:clamp(16px,1.8vw,24px) 0; border-top:1px solid rgba(232,233,228,.16); opacity:0; transform:translate3d(0,16px,0); transition:opacity .5s ease calc(.3s + var(--i,0) * .09s), transform .7s var(--v5-sortie,cubic-bezier(.16,1,.3,1)) calc(.3s + var(--i,0) * .09s); } .sk-ob__step:first-child{ border-top:0; padding-top:0; } .sk-ob.is-on .sk-ob__step{ opacity:1; transform:none; } .sk-ob__no{ position:relative; font-family:var(--f-mega,"Archivo",sans-serif); font-weight:900; font-stretch:125%; font-size:clamp(38px,4.5vw,62px); line-height:.82; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.2px rgba(241,241,236,.46); } .sk-ob__no::after{ content:attr(data-n); position:absolute; left:0; top:0; color:#f1f1ec; -webkit-text-stroke:0; clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--v5-masse,cubic-bezier(.32,.72,0,1)) .78s; } .sk-ob.is-on .sk-ob__step.is-done .sk-ob__no::after{ clip-path:inset(0 0 0 0); } .sk-ob__step.is-now .sk-ob__no{ -webkit-text-stroke-color:rgba(241,241,236,.9); } .sk-ob__txt{ display:flex; flex-direction:column; gap:6px; min-width:0; } .sk-ob__txt b{ font-family:var(--f-display,"Archivo",sans-serif); font-weight:740; font-size:clamp(15px,1.35vw,18px); line-height:1.08; letter-spacing:-.005em; text-transform:uppercase; color:#f1f1ec; text-wrap:balance; } .sk-ob__txt span{ font-family:var(--f-ui,system-ui,sans-serif); font-size:13.5px; line-height:1.5; color:rgba(241,241,236,.66); } .sk-ob__step:not(.is-done):not(.is-now) .sk-ob__txt b{ color:rgba(241,241,236,.78); } /* l'état se lit à la FORME : coche dans un palet plein (fait), flèche dans une touche (à faire), anneau vide (ensuite) */ .sk-ob__etat{ width:36px; height:36px; display:grid; place-items:center; border-radius:12px 12px 12px 4px; color:rgba(241,241,236,.5); box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.34); } .sk-ob__step.is-done .sk-ob__etat{ color:#060606; background:var(--v5-lime,#89f421); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.5); } .sk-ob__step.is-now .sk-ob__etat{ color:#060606; background:linear-gradient(180deg,#ffffff,#dedfd9); box-shadow:inset 0 -2px 0 rgba(0,0,0,.14); } .sk-ob__step:not(.is-done):not(.is-now) .sk-ob__etat{ border-radius:50%; width:30px; height:30px; margin:0 3px; } /* ---- téléphone : la dalle monte du bas, une colonne, l'action principale en premier sous le pouce */ @media (max-width:820px){ .sk-ob{ place-items:end center; padding:12px 12px max(12px,env(safe-area-inset-bottom)); } .sk-ob__card{ grid-template-columns:minmax(0,1fr); grid-template-areas:none; padding:36px 18px 18px; border-radius:26px 26px 26px 6px; } .sk-ob__kick,.sk-ob__title,.sk-ob__tete,.sk-ob__steps{ grid-area:auto; } .sk-ob__title{ font-size:clamp(30px,12.2vw,64px); font-size:clamp(30px,14.4cqi,64px); padding-bottom:0; margin-bottom:14px; border-bottom:0; } .sk-ob__title > span{ display:block; } .sk-ob__tete{ display:contents; } .sk-ob__lead{ order:2; margin:0 0 18px; max-width:none; font-size:17px; line-height:1.22; } .sk-ob__steps{ order:3; border-top:1px solid rgba(232,233,228,.16); } .sk-ob__cta{ order:4; flex-direction:column; margin-top:16px; } .sk-ob__cta .btn{ width:100%; justify-content:space-between; } .sk-ob__cta .sk-ob__later{ justify-content:center; } .sk-ob__step{ grid-template-columns:54px minmax(0,1fr) auto; padding:13px 0; column-gap:12px; } .sk-ob__step:first-child{ padding-top:13px; } .sk-ob__no{ font-size:34px; } .sk-ob__txt{ gap:4px; } .sk-ob__txt span{ font-size:13px; line-height:1.42; } .sk-ob__etat{ width:30px; height:30px; border-radius:10px 10px 10px 3px; } .sk-ob__step:not(.is-done):not(.is-now) .sk-ob__etat{ width:24px; height:24px; } .sk-ob__roche--a{ width:176px; right:-22px; top:-96px; } .sk-ob__roche--b{ display:none; } } @media (max-width:820px) and (max-height:700px){ .sk-ob__roche--a{ display:none; } .sk-ob{ place-items:start center; } } @media (prefers-reduced-motion:reduce){ .sk-ob__card,.sk-ob__roche,.sk-ob__step,.sk-ob__title i,.sk-ob__no::after{ transition:opacity .2s ease; transform:none; filter:none; } .sk-ob.is-on .sk-ob__roche--a,.sk-ob.is-on .sk-ob__roche--b{ transform:none; } .sk-ob__no::after{ transition:none; } .sk-ob.is-on .sk-ob__title,.sk-ob.is-on .sk-ob__cta .btn.pri .btn-ico svg{ animation:none; } } /* skld-rarity.css */ /* ============================================================================ SKLD NETWORK — SYSTÈME DE RARETÉ (cosmétiques de profil + stickers). Échelle NATIVE, palette-safe (ZÉRO orange/or/jaune) : commun -> chrome / gris rare -> sapin (vert profond) epique -> lime #9dff3c legendaire -> lime + FOIL holographique (bande de lumière qui balaie) mythique -> PRISME froid animé (lime -> cyan -> blanc -> sapin) Modifiers réutilisables (.rar-*) posables sur : tuiles casier, cadres d'avatar, bords de bannière, chips de sticker, texte de pseudo. transform/opacity only. ========================================================================== */ :root{ --rar-commun-1:#aab4c0; --rar-commun-2:#6b7580; --rar-rare-1:#3fae5a; --rar-rare-2:#123a1e; --rar-epic-1:#9dff3c; --rar-epic-2:#3f7a12; --rar-cyan:#4be3c8; --rar-pe:cubic-bezier(.32,.72,0,1); } /* ---------------------------------------------------------------- SOCLE tuile Une "surface de rareté" : bord + halo caractéristiques. Applique .rar + .rar-. */ .rar{ position:relative; border-radius:14px; border:1px solid transparent; background-clip:padding-box; transition:transform .3s var(--rar-pe), box-shadow .3s; } /* COMMUN — chrome sobre */ .rar-commun{ border-color:rgba(170,180,192,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } /* RARE — sapin */ .rar-rare{ border-color:rgba(63,174,90,.5); box-shadow:0 0 0 1px rgba(63,174,90,.14), 0 6px 20px rgba(18,58,30,.35), inset 0 1px 0 rgba(255,255,255,.05); } /* ÉPIQUE — lime */ .rar-epique{ border-color:rgba(157,255,60,.6); box-shadow:0 0 0 1px rgba(157,255,60,.16), 0 8px 26px rgba(157,255,60,.14), inset 0 1px 0 rgba(255,255,255,.06); } /* LÉGENDAIRE — lime + FOIL qui balaie */ .rar-legendaire{ border-color:rgba(157,255,60,.85); box-shadow:0 0 0 1px rgba(157,255,60,.28), 0 10px 34px rgba(157,255,60,.22), inset 0 1px 0 rgba(255,255,255,.08); } .rar-legendaire::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(115deg, transparent 30%, rgba(244,255,240,.5) 47%, rgba(157,255,60,.35) 53%, transparent 70%); background-size:250% 100%; mix-blend-mode:screen; opacity:.9; animation:rarFoil 3.4s var(--rar-pe) infinite; } @keyframes rarFoil{ 0%{ background-position:140% 0 } 55%,100%{ background-position:-60% 0 } } /* MYTHIQUE — cyan glacé + double liseré lime, balayage prismatique animé. (Le bord conic-masqué a été retiré : il rendait un cercle selon la taille.) */ .rar-mythique{ border-color:rgba(75,227,200,.6); box-shadow:0 0 0 1px rgba(75,227,200,.4), 0 0 0 2.5px rgba(157,255,60,.12), 0 12px 40px rgba(75,227,200,.22), inset 0 1px 0 rgba(255,255,255,.1); } .rar-mythique::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg, transparent 34%, rgba(75,227,200,.3) 48%, rgba(244,255,240,.22) 52%, transparent 66%); background-size:220% 100%; mix-blend-mode:screen; animation:rarFoil 4.2s var(--rar-pe) infinite; } /* Pastille de libellé de rareté (chip) */ .rar-tag{ font-family:var(--mono, ui-monospace, monospace); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; padding:2px 7px; border-radius:999px; white-space:nowrap; } .rar-tag.rar-commun{ color:#c3ccd6; background:rgba(170,180,192,.12); } .rar-tag.rar-rare{ color:#7fe39a; background:rgba(63,174,90,.14); } .rar-tag.rar-epique{ color:#c9ff8f; background:rgba(157,255,60,.14); } .rar-tag.rar-legendaire{ color:#eaffd6; background:rgba(157,255,60,.2); } .rar-tag.rar-mythique{ color:#c8fff2; background:rgba(75,227,200,.16); } /* ---------------------------------------------------------------- CADRE d'avatar Anneau autour de la photo, coloré par rareté. .pf-frame + .rar-. */ .pf-frame{ position:relative; display:inline-grid; place-items:center; border-radius:50%; padding:3px; } .pf-frame img, .pf-frame .pf-ini{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; } .pf-frame.rar-commun{ box-shadow:0 0 0 2px rgba(170,180,192,.55); } .pf-frame.rar-rare{ box-shadow:0 0 0 2px #3fae5a, 0 0 16px rgba(63,174,90,.4); } .pf-frame.rar-epique{ box-shadow:0 0 0 2px #9dff3c, 0 0 18px rgba(157,255,60,.45); } .pf-frame.rar-legendaire{ box-shadow:0 0 0 2px #9dff3c, 0 0 26px rgba(157,255,60,.6); } .pf-frame.rar-legendaire::after{ border-radius:50%; } .pf-frame.rar-mythique{ box-shadow:0 0 0 2px #4be3c8, 0 0 26px rgba(75,227,200,.5); } /* ---------------------------------------------------------------- BANNIÈRE (art) Fond d'en-tête de profil. .pf-banner[data-art]. Chaque art = pur CSS. */ .pf-banner{ position:relative; overflow:hidden; background:#080b10; } .pf-banner[data-art="oled"]{ background: radial-gradient(120% 140% at 20% 0%, rgba(157,255,60,.06), transparent 55%), #06080c; } .pf-banner[data-art="sapin"]{ background: radial-gradient(90% 120% at 80% 10%, rgba(63,174,90,.22), transparent 60%), linear-gradient(120deg, #08130c, #05080b); } .pf-banner[data-art="grid"]{ background: linear-gradient(rgba(157,255,60,.05) 1px, transparent 1px) 0 0/26px 26px, linear-gradient(90deg, rgba(157,255,60,.05) 1px, transparent 1px) 0 0/26px 26px, radial-gradient(100% 130% at 50% 0%, rgba(157,255,60,.08), transparent 60%), #06090d; } .pf-banner[data-art="carnage"]{ background: repeating-linear-gradient(115deg, rgba(157,255,60,.07) 0 2px, transparent 2px 16px), radial-gradient(90% 140% at 70% 0%, rgba(157,255,60,.12), transparent 60%), #070a0e; } .pf-banner[data-art="prism"]{ background: linear-gradient(115deg, rgba(157,255,60,.16), rgba(75,227,200,.14) 40%, rgba(244,255,240,.08) 60%, rgba(63,174,90,.14)), #06090d; background-size:200% 100%; animation:rarPrismShift 9s var(--rar-pe) infinite; } @keyframes rarPrismShift{ 0%,100%{ background-position:0 0 } 50%{ background-position:100% 0 } } /* ---------------------------------------------------------------- COULEUR de pseudo .pf-name + modifier. holo/prism = texte en dégradé animé (cool). */ .pf-name.c_lime{ color:var(--green, #9dff3c); } .pf-name.c_holo, .pf-name.c_prism{ -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; background-size:200% 100%; } .pf-name.c_holo{ background-image:linear-gradient(100deg, #9dff3c, #f4fff0 50%, #9dff3c); animation:rarPrismShift 5s var(--rar-pe) infinite; } .pf-name.c_prism{ background-image:linear-gradient(100deg, #9dff3c, #4be3c8 35%, #f4fff0 60%, #3fae5a); animation:rarPrismShift 6s var(--rar-pe) infinite; } /* ---------------------------------------------------------------- SANS MOTION */ @media (prefers-reduced-motion:reduce){ .rar-legendaire::after, .rar-mythique::after, .pf-banner[data-art="prism"], .pf-name.c_holo, .pf-name.c_prism{ animation:none; } } /* skld-fil.css */ /* SKLD — LE FIL DE PUBLICATIONS. Cette feuille est au SOCLE (voir _BUNDLE_CSS dans app.py) et non attachée à une page : le fil est servi par la page d'une structure ET par la fiche d'un joueur, qui ne chargent pas les mêmes feuilles. La rattacher à l'une des deux aurait laissé l'autre sans style — c'est exactement le genre de dépendance invisible qui casse au premier ajout de page. */ /* ========================================================================== LE FIL DE PUBLICATIONS Servi par la page d'une structure ET par la fiche d'un joueur — même gabarit, parce qu'une publication se lit pareil : seul l'en-tête de la page dit s'il s'agit d'une organisation ou d'une personne. Le lime ne sert qu'à CE QUE J'AI FAIT (mon j'aime), jamais au décor. ========================================================================== */ .fil{ margin-top:30px } .fil-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap } .fil-ab{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim) } .fil-ecrire{ border:1px solid var(--line); border-radius:16px; padding:14px 16px; background:rgba(6,8,6,.4); margin-bottom:16px } .fil-ecrire textarea{ width:100%; border:0; background:none; color:var(--cream); font-family:inherit; font-size:14.5px; line-height:1.6; resize:vertical; outline:none } .fil-ecrire__b{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding-top:11px; border-top:1px solid var(--line) } .fil-joindre{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding:6px 11px; border:1px solid var(--line2); border-radius:999px } .fil-joindre:hover{ color:var(--green); border-color:rgba(157,255,60,.35) } .fil-joindre input{ display:none } .fil-video{ flex:1 1 220px; min-width:0; background:rgba(4,6,4,.5); color:var(--cream); border:1px solid var(--line2); border-radius:999px; padding:7px 13px; font-family:inherit; font-size:12px } .fil-video:focus{ outline:none; border-color:rgba(157,255,60,.35) } .fil-refus{ font-size:11.5px; color:var(--dim); margin:0 0 16px } .fil-liste{ display:flex; flex-direction:column; gap:11px } .fil-p{ position:relative; border:1px solid var(--line); border-radius:16px; padding:16px 18px; background:rgba(230,238,232,.014) } .fil-p.is-epingle{ border-color:rgba(157,255,60,.28) } .fil-p.is-masque{ opacity:.55; border-style:dashed } .fil-p__pin{ display:inline-block; margin-bottom:9px; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--green) } .fil-p__pin.is-mod{ color:#e0384f } .fil-p__h{ display:flex; align-items:center; gap:10px; flex-wrap:wrap } .fil-p__av{ width:34px; height:34px; border-radius:9px; object-fit:cover; flex:none; border:1px solid var(--line2) } .fil-p__av--ini{ display:grid; place-items:center; font-family:var(--disp); font-size:15px; color:var(--cream); background:radial-gradient(circle at 32% 26%,#1c3f22,#0b1a0f) } .fil-p__n{ font-family:var(--disp); font-size:15.5px; text-transform:uppercase; color:var(--cream); text-decoration:none } .fil-p__n:hover{ color:var(--green) } .fil-p__t{ font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); border:1px solid var(--line2); border-radius:999px; padding:2px 8px } .fil-p__d{ margin-left:auto; font-size:9.5px; letter-spacing:.08em; color:var(--dim) } .fil-p__c{ margin:11px 0 0; font-size:14.5px; line-height:1.65; color:var(--cream); white-space:pre-wrap; word-break:break-word } /* L'IMAGE EST BORNÉE EN HAUTEUR. Sans plafond, une photo en portrait occupait plus de 600 px : une seule publication remplissait l'écran, et le fil ne se parcourait plus. On cadre au lieu de déformer — `object-fit:cover` coupe les bords, ce qui vaut mieux qu'un visage étiré. */ .fil-p__img{ display:block; width:100%; margin-top:12px; border-radius:12px; border:1px solid var(--line2); max-height:min(60vh, 460px); object-fit:cover; background:#06090c } .fil-p__v{ position:relative; margin-top:12px; padding-bottom:56.25%; border-radius:12px; overflow:hidden; border:1px solid var(--line2) } .fil-p__v iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 } .fil-p__lien{ display:inline-block; margin-top:10px; font-size:12.5px; color:var(--muted); word-break:break-all } .fil-p__tour{ display:inline-block; margin-top:10px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); text-decoration:none; border:1px solid rgba(157,255,60,.28); border-radius:999px; padding:4px 11px } /* Dans un partage, l'image de la publication d'origine est plus petite encore : c'est une citation, pas le contenu principal. */ .fil-souche .fil-p__img{ max-height:min(38vh, 280px) } .fil-souche{ margin-top:12px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:rgba(4,6,4,.4) } .fil-p__f{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:13px; padding-top:11px; border-top:1px solid var(--line) } .fil-p__f form{ margin:0 } .fil-a{ display:inline-flex; align-items:center; gap:6px; background:none; cursor:pointer; border:1px solid var(--line2); border-radius:999px; padding:5px 12px; font-family:var(--mono); font-size:10.5px; color:var(--dim); transition:color .25s cubic-bezier(.32,.72,0,1),border-color .25s cubic-bezier(.32,.72,0,1) } .fil-a:hover{ color:var(--cream); border-color:var(--line) } .fil-a.on{ color:var(--green); border-color:rgba(157,255,60,.4) } .fil-a.is-mort{ cursor:default; opacity:.6 } .fil-p__admin{ margin-left:auto; display:flex; align-items:center; gap:7px; flex-wrap:wrap } .fil-x{ background:none; border:0; cursor:pointer; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding:5px 4px } .fil-x:hover{ color:var(--green) } .fil-sig summary{ list-style:none; cursor:pointer; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding:5px 4px } .fil-sig summary::-webkit-details-marker{ display:none } .fil-sig summary:hover{ color:#e0384f } .fil-sig__l{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px } .fil-sig__l form{ margin:0 } .fil-sig__l button{ background:none; cursor:pointer; border:1px solid rgba(224,56,79,.32); border-radius:999px; padding:4px 10px; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#e0384f } .fil-sig__l button:hover{ background:rgba(224,56,79,.1) } .fil-vide{ color:var(--muted); font-size:13.5px } @media (max-width:620px){ .fil-p__d{ margin-left:0; width:100% } .fil-p__admin{ margin-left:0; width:100% } } /* ========================================================================== LE RECADRAGE (skld-recadrage.js) Un aperçu qu'on fait glisser, un curseur de zoom. Rien d'autre : le but est qu'un logo soit carré et une bannière large, pas d'ouvrir un éditeur photo. ========================================================================== */ .rec-vue{ margin-top:11px } .rec-apercu{ width:100%; border-radius:12px; border:1px solid var(--line2); background:#06090c center/cover no-repeat; cursor:grab; touch-action:none; } .rec-apercu:active{ cursor:grabbing } .rec-zoom{ width:100%; margin-top:9px; accent-color:var(--green) } .rec-aide{ margin:6px 0 0; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim) } /* ---------------- LES COMMENTAIRES ET LES MENTIONS ---------------- Repliés par défaut : un fil qui déroule tous les commentaires de toutes les publications ne se parcourt plus. Ouverts d'office quand il y en a un ou deux — les replier alors ne cache rien, ça ajoute juste un clic. */ .fil-cm{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px } .fil-cm summary{ list-style:none; cursor:pointer; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding:3px 0 } .fil-cm summary::-webkit-details-marker{ display:none } .fil-cm summary:hover{ color:var(--green) } .fil-cm__l{ display:flex; align-items:flex-start; gap:10px; margin-top:11px } .fil-cm__l.is-masque{ opacity:.5 } .fil-cm__av{ width:26px; height:26px; border-radius:8px; object-fit:cover; flex:none; border:1px solid var(--line2) } .fil-cm__av--ini{ display:grid; place-items:center; font-family:var(--disp); font-size:12px; color:var(--cream); background:radial-gradient(circle at 32% 26%,#1c3f22,#0b1a0f) } .fil-cm__b{ min-width:0; flex:1 1 auto } .fil-cm__n{ font-family:var(--disp); font-size:12.5px; text-transform:uppercase; color:var(--cream); text-decoration:none } .fil-cm__n:hover{ color:var(--green) } .fil-cm__t{ margin:2px 0 0; font-size:13.5px; line-height:1.55; color:var(--muted); white-space:pre-wrap; word-break:break-word } .fil-cm__x button{ background:none; border:0; cursor:pointer; flex:none; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:3px } .fil-cm__x button:hover{ color:#e0384f } .fil-cm__f{ display:flex; gap:8px; margin-top:12px } .fil-cm__f input{ flex:1 1 auto; min-width:0; padding:9px 13px; border-radius:999px; border:1px solid var(--line2); background:rgba(4,6,4,.5); color:var(--cream); font-family:inherit; font-size:13px } .fil-cm__f input:focus{ outline:none; border-color:rgba(157,255,60,.35) } /* La mention : un lien vers la page publique de la personne, rien de plus. Elle ne rend joignable personne. */ .fil-aro{ color:var(--green); text-decoration:none } .fil-aro:hover{ text-decoration:underline } /* ---------------- LE COMPOSEUR ---------------- Il doit donner envie d'écrire : l'avatar dit qui parle, la zone grandit avec le texte, et le média se voit avant d'être envoyé. */ .fil-ecrire.is-survol{ border-color:rgba(157,255,60,.5); background:rgba(157,255,60,.05) } .fil-ecrire__h{ display:flex; align-items:flex-start; gap:12px } .fil-ecrire__av{ width:38px; height:38px; border-radius:11px; object-fit:cover; flex:none; border:1px solid var(--line2) } .fil-ecrire__av--ini{ display:grid; place-items:center; font-family:var(--disp); font-size:16px; color:var(--cream); background:radial-gradient(circle at 32% 26%,#1c3f22,#0b1a0f) } .fil-ecrire__h textarea{ flex:1 1 auto; min-width:0; min-height:52px } .fil-apercu{ position:relative; margin-top:12px } .fil-apercu img{ display:block; width:100%; max-height:320px; object-fit:cover; border-radius:12px; border:1px solid var(--line2) } .fil-apercu__x{ position:absolute; top:10px; right:10px; cursor:pointer; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream); background:rgba(4,6,4,.8); border:1px solid var(--line2); border-radius:999px; padding:6px 12px; backdrop-filter:blur(6px) } .fil-apercu__x:hover{ color:#e0384f; border-color:rgba(224,56,79,.42) } /* Le compteur n'apparaît qu'à l'approche de la limite. */ .fil-compteur{ font-size:11px; letter-spacing:.06em; color:var(--dim); flex:none } .fil-compteur.is-court{ color:#e0384f } .fil-ecrire button[type="submit"][disabled]{ opacity:.4; cursor:not-allowed } /* ---------------- LE RELIEF DES CARTES ---------------- Emprunté au vocabulaire déjà en place sur le site (double liseré, halo au curseur). Rien de neuf à charger : `data-spotlight` et `data-stagger` sont servis par des modules du socle. */ .fil-p{ /* Double liseré : un trait extérieur froid, un reflet intérieur chaud. C'est ce qui donne l'impression d'une plaque posée, pas d'un rectangle dessiné. */ box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 1px 0 rgba(0,0,0,.5); transition: border-color .4s cubic-bezier(.32,.72,0,1), transform .4s cubic-bezier(.32,.72,0,1); } @media (hover:hover) and (pointer:fine){ .fil-p:hover{ border-color:rgba(157,255,60,.22); transform:translateY(-1px) } } /* Une publication épinglée porte un filet lime sur sa tranche gauche : on la repère en balayant la colonne, sans lire l'étiquette. */ .fil-p.is-epingle{ border-left:2px solid rgba(157,255,60,.55) } /* Le j'aime « bat » une fois quand on l'active — un retour physique, pas une couleur qui change en silence. */ @keyframes fil-bat{ 0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)} } .fil-a.on .ico{ animation:fil-bat .42s cubic-bezier(.32,.72,0,1) } @media (prefers-reduced-motion:reduce){ .fil-a.on .ico{ animation:none } } /* ========================================================================== LA CARTE — ARCHITECTURE À DOUBLE LISERÉ, ET UNE TRANCHE QUI PARLE Ce qui distingue cette carte d'un composant repris ailleurs : elle CONNAÎT nos objets. Sa tranche gauche dit ce qu'on regarde — épinglé, structure, tournoi — avant même qu'on lise. Un composant générique ne peut pas faire ça. Le relief vient d'un double liseré concentrique, pas d'une ombre portée : une ombre noire sur un fond noir ne produit rien. Un trait extérieur froid et un reflet intérieur chaud donnent l'impression d'une plaque usinée posée sur la page — c'est ce qui sépare une interface soignée d'un rectangle dessiné. ========================================================================== */ .fil-p{ --tranche: transparent; position: relative; padding-left: 22px; /* la place de la tranche */ border: 1px solid rgba(230,238,232,.07); background: linear-gradient(180deg, rgba(230,238,232,.028), rgba(230,238,232,.008)) padding-box, linear-gradient(180deg, rgba(230,238,232,.14), rgba(230,238,232,.03)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), /* le reflet intérieur, en haut */ inset 0 -1px 0 rgba(0,0,0,.35), /* l'assise, en bas */ 0 2px 14px rgba(0,0,0,.45); /* le détachement du fond */ transition: transform .5s cubic-bezier(.32,.72,0,1), box-shadow .5s cubic-bezier(.32,.72,0,1), border-color .5s cubic-bezier(.32,.72,0,1); } /* LA TRANCHE. Un filet de 3 px, arrondi comme la carte, qui prend la couleur de ce que la publication EST. Neutre par défaut : le lime reste une ponctuation. */ .fil-p__tranche{ position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tranche); transition: background .4s cubic-bezier(.32,.72,0,1); } .fil-p.est-structure{ --tranche: rgba(170,180,192,.45) } /* chrome : une page */ .fil-p.est-tournoi { --tranche: rgba(63,174,90,.6) } /* sapin : un tournoi */ .fil-p.is-epingle { --tranche: var(--green) } /* lime : mis en avant */ .fil-p.is-masque { --tranche: #e0384f } /* la seule alerte */ .fil-p.is-epingle{ border-color: rgba(157,255,60,.2) } @media (hover:hover) and (pointer:fine){ .fil-p:hover{ transform: translateY(-2px); border-color: rgba(157,255,60,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.55); } } /* LES ACTIONS S'ENFONCENT quand on les presse. Un bouton qui change seulement de couleur ne donne aucun retour physique ; 2 % d'échelle en moins, oui. */ .fil-a{ transition: color .3s cubic-bezier(.32,.72,0,1), border-color .3s cubic-bezier(.32,.72,0,1), transform .16s cubic-bezier(.32,.72,0,1), background .3s cubic-bezier(.32,.72,0,1); } .fil-a:active{ transform: scale(.94) } .fil-a.on{ background: rgba(157,255,60,.08) } @media (prefers-reduced-motion: reduce){ .fil-p, .fil-p__tranche, .fil-a{ transition: none } .fil-p:hover{ transform: none } } @media (max-width:620px){ .fil-p{ padding-left:18px } } /* ========================================================================== VERSION 2 — LA CARTE D'UN RÉSEAU SOCIAL, PAS D'UN FORUM. « il faut que ça fasse vraie page Facebook, Instagram, Twitter… avec un max d'indicateurs ». Ce qui change : l'auteur porte un anneau et un compteur d'abonnés, on peut le suivre depuis la carte, les trois compteurs sont toujours chiffrés, et le staff a ses pouvoirs sous la main. ========================================================================== */ .fil-p__h{ gap:12px } .fil-p__avl{ display:block; flex:none; border-radius:50%; padding:2px; position:relative } /* L'ANNEAU : chrome pour une page de structure, lime pour un joueur. On sait qui parle avant de lire — c'est l'anneau de « story » d'Instagram, mis au service d'une information et non d'une incitation. */ .fil-p__avl.est-structure{ background:conic-gradient(from 200deg,#c9d3cc,#5d6a63,#e9f0e5,#8a958e,#c9d3cc) } .fil-p__avl.est-joueur{ background:conic-gradient(from 200deg,rgba(157,255,60,.95),rgba(63,174,90,.6),rgba(157,255,60,.95)) } .fil-p__avl .fil-p__av{ width:42px; height:42px; border-radius:50%; border:2px solid #070a08; display:block } .fil-p__qui{ display:flex; flex-direction:column; gap:3px; min-width:0 } .fil-p__qui .fil-p__n{ font-size:15.5px; line-height:1.1 } .fil-p__qui .fil-p__t{ display:inline-block; margin-right:6px } .fil-p__ab{ font-size:10px; letter-spacing:.06em; color:var(--muted) } .fil-p__qui > span{ display:inline } .fil-p__suivre{ margin:0 0 0 auto } .fil-suivre{ cursor:pointer; background:var(--green); color:#04120a; border:0; border-radius:999px; padding:6px 13px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; transition:transform .16s cubic-bezier(.32,.72,0,1), background .25s, color .25s } .fil-suivre:hover{ transform:translateY(-1px) } .fil-suivre:active{ transform:scale(.95) } .fil-suivre.on{ background:transparent; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line2) } .fil-suivre.on:hover{ color:#e0384f; box-shadow:inset 0 0 0 1px rgba(224,56,79,.4) } .fil-p__suivre + .fil-p__d{ margin-left:0 } /* Le média : un objet à part entière, bord à bord dans la carte, qui s'anime au survol — c'est ce qui fait « feed » plutôt que « pièce jointe ». */ .fil-p__imgl{ display:block; margin-top:12px; border-radius:12px; overflow:hidden; border:1px solid var(--line2) } .fil-p__imgl .fil-p__img{ margin:0; border:0; border-radius:0; transition:transform .8s cubic-bezier(.32,.72,0,1) } @media (hover:hover){ .fil-p__imgl:hover .fil-p__img{ transform:scale(1.025) } } /* LES COMPTEURS, toujours chiffrés, et le chiffre en gras : c'est lui qu'on regarde. Le cœur bat quand on l'active, le nombre saute d'un cran. */ .fil-a b{ font-family:var(--mono); font-weight:700; font-size:11px; color:var(--cream); font-variant-numeric:tabular-nums; min-width:1ch; text-align:left } .fil-a{ text-decoration:none; padding:6px 13px } .fil-a.on b{ color:var(--green) } @keyframes fil-saute{ 0%{transform:translateY(0)} 40%{transform:translateY(-4px)} 100%{transform:translateY(0)} } .fil-a.on b{ animation:fil-saute .42s cubic-bezier(.32,.72,0,1) } /* LE MENU DU STAFF : un engrenage, une liste. Le geste grave — bannir — est marqué en rouge d'alerte, la seule teinte hors palette qu'on s'autorise, parce qu'une alerte doit se voir comme une alerte. */ .fil-mod summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; color:var(--dim); padding:5px 6px; border-radius:999px; border:1px solid transparent } .fil-mod summary::-webkit-details-marker{ display:none } .fil-mod summary:hover{ color:var(--green); border-color:var(--line2) } .fil-mod[open] summary{ color:var(--green) } .fil-mod__l{ position:absolute; right:0; z-index:5; margin-top:6px; min-width:190px; display:flex; flex-direction:column; gap:2px; padding:6px; background:rgba(6,8,6,.96); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.6); backdrop-filter:blur(10px) } .fil-mod__l form{ margin:0 } .fil-mod__l button{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:8px 10px; border-radius:8px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream) } .fil-mod__l button:hover{ background:rgba(157,255,60,.1); color:var(--green) } .fil-mod__l .is-grave button{ color:#e0384f } .fil-mod__l .is-grave button:hover{ background:rgba(224,56,79,.12); color:#ff6b7f } .fil-p__admin{ position:relative } .fil-sig summary{ display:inline-flex; align-items:center; gap:5px } @media (max-width:620px){ .fil-p__suivre{ order:5; width:100%; margin:6px 0 0 } .fil-suivre{ width:100% } } /* ---------------- LA FICHE DE TOURNOI SOUS UNE CARTE ---------------- Une annonce de tournoi porte ses faits — format, taille, mode, date, places — et son bouton d'inscription. C'est ce qui la distingue d'une phrase. */ .fil-tour{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:11px 13px; border:1px solid rgba(157,255,60,.26); border-radius:12px; text-decoration:none; color:inherit; background:linear-gradient(90deg,rgba(157,255,60,.07),rgba(157,255,60,.02)); transition:border-color .3s cubic-bezier(.32,.72,0,1), transform .3s cubic-bezier(.32,.72,0,1) } .fil-tour:hover{ border-color:rgba(157,255,60,.55); transform:translateY(-1px) } .fil-tour__ico{ flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--green); color:#04120a } .fil-tour__b{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:3px } .fil-tour__b b{ font-family:var(--disp); font-size:15px; text-transform:uppercase; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .fil-tour__b .mono{ font-size:10.5px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase } .fil-tour__cta{ flex:none; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--green) } .fil-tournoi{ flex:1 1 200px; min-width:0; background:rgba(4,6,4,.5); color:var(--cream); border:1px solid var(--line2); border-radius:999px; padding:7px 13px; font-family:inherit; font-size:12px } /* Le formulaire d'annonce d'une structure — replié, une ligne, tout derrière. */ .so-annonce{ margin:26px 0 0; border:1px solid rgba(157,255,60,.26); border-radius:14px; background:rgba(157,255,60,.04) } .so-annonce summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:14px 16px; color:var(--green) } .so-annonce summary::-webkit-details-marker{ display:none } .so-annonce summary b{ font-family:var(--disp); font-size:15px; text-transform:uppercase; color:var(--cream) } .so-annonce summary span{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--dim); text-transform:uppercase } .so-annonce__f{ display:flex; flex-wrap:wrap; gap:10px; padding:4px 16px 16px; align-items:flex-end } .so-annonce__f label{ display:flex; flex-direction:column; gap:5px; flex:0 1 160px; min-width:0 } .so-annonce__f label.grow{ flex:1 1 260px } .so-annonce__f label > span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim) } .so-annonce__f input, .so-annonce__f select{ background:rgba(4,6,4,.6); color:var(--cream); border:1px solid var(--line2); border-radius:10px; padding:9px 12px; font:inherit; font-size:13px } .so-annonce__f input:focus, .so-annonce__f select:focus{ outline:none; border-color:rgba(157,255,60,.4) } .so-annonce__f .btn{ flex:0 0 auto; gap:8px } /* ============================================================ Ses tournois (page structure) Là où les tournois d'une structure s'affichent. Palette inchangée. */ .so-tours{margin:26px 0 0} .so-tours__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px} .so-tours__head h2{margin:0;font-size:20px} .so-tours__head .mono{color:var(--muted);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase} .so-tours__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px} .so-tour{position:relative;padding:14px 16px;border:1px solid rgba(157,255,60,.18);border-radius:14px; background:linear-gradient(180deg,rgba(12,20,10,.7),rgba(6,10,6,.9)); transition:border-color .5s cubic-bezier(.32,.72,0,1),transform .5s cubic-bezier(.32,.72,0,1)} .so-tour:hover{border-color:rgba(157,255,60,.44);transform:translateY(-2px)} .so-tour.is-fini{opacity:.72} .so-tour.is-live{border-color:rgba(157,255,60,.6)} .so-tour__st{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:6px} .so-tour.is-fini .so-tour__st{color:var(--muted)} .so-tour h3{margin:0 0 4px;font-size:17px;line-height:1.15} .so-tour h3 a{color:#fff;text-decoration:none} .so-tour h3 a:hover{color:var(--green)} .so-tour__meta{margin:0 0 12px;font-size:11.5px;color:var(--muted)} .so-tour__cta .btn{width:100%;justify-content:center} .so-tour__n{font-size:12px;color:var(--muted)} @media (max-width:560px){.so-tours__grid{grid-template-columns:1fr}} /* skld-promo.css */ /* LE POP-UP PARTENAIRE — un OBJET, pas une bannière. Une plaque chrome usinée (fx-bezel, la primitive des cartes SKLD) qui S'INCLINE vers la souris ; un cœur noir texturé (grain, scanlines, une aurore lime qui dérive) ; le foil holographique et la comète du liseré pilotés par l'horloge FX (OBS-safe) ; un projecteur qui suit le curseur ; les calques glissent en parallaxe. Le logo est une PIÈCE chrome : rebord brossé qui tourne, reflet qui balaie, halo lime qui respire, reflet posé dessous ; à l'entrée, elle fait un tour sur elle-même. Le titre arrive mot à mot, dé-flouté. Le bouton est aimanté, son reflet suit la souris. Au téléphone : feuille en bas, sans 3D. */ @property --skp-a { syntax: ''; inherits: false; initial-value: 0deg; } .skp{position:fixed;right:22px;bottom:22px;z-index:70;width:min(404px,calc(100vw - 32px));perspective:1100px; opacity:0;transform:translateY(44px) scale(.94);filter:blur(14px); transition:opacity .85s cubic-bezier(.22,1.15,.36,1),transform .85s cubic-bezier(.22,1.15,.36,1),filter .85s cubic-bezier(.22,1.15,.36,1); pointer-events:none;touch-action:none} .skp.is-on{opacity:1;transform:none;filter:none;pointer-events:auto} .skp.is-drag{transition:none} .skp:focus{outline:none} /* la plaque : bezel du site + inclinaison 3D (--rx/--ry posés par le JS) */ .skp__tilt.fx-bezel{border-radius:30px;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform; box-shadow:inset 0 1px 0 rgba(238,251,230,.08),inset 0 -1px 1px rgba(0,0,0,.7), 0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.7),0 0 70px -20px rgba(157,255,60,.38)} .skp__core.fx-core{border-radius:28.5px;color:#e8eee4;background:linear-gradient(180deg,#0a110d,#04070a)} .skp__grain,.skp__scan,.skp__aurora{position:absolute;inset:0;border-radius:inherit;pointer-events:none} .skp__grain{z-index:1;opacity:.16;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,")} .skp__scan{z-index:0;opacity:.4;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,.3) 3px 4px)} .skp__aurora{z-index:0;overflow:hidden} .skp__aurora i{position:absolute;width:70%;aspect-ratio:1;border-radius:999px;filter:blur(38px);opacity:.55;mix-blend-mode:screen;will-change:transform} .skp__aurora i:first-child{left:-24%;bottom:-38%;background:radial-gradient(closest-side,rgba(157,255,60,.55),transparent 70%);animation:skpAur1 11s ease-in-out infinite alternate} .skp__aurora i:last-child{right:-30%;top:-42%;width:60%;background:radial-gradient(closest-side,rgba(64,140,90,.55),transparent 70%);animation:skpAur2 13s ease-in-out infinite alternate} @keyframes skpAur1{to{transform:translate(18%,-14%) scale(1.15)}} @keyframes skpAur2{to{transform:translate(-16%,18%) scale(1.1)}} /* la scène : projecteur (data-spotlight) + parallaxe des calques (--dx/--dy, px) */ .skp__scene{position:relative;border-radius:28.5px} .skp__z1{transform:translate3d(calc(var(--dx,0px) * .45),calc(var(--dy,0px) * .45),0)} .skp__z2{transform:translate3d(calc(var(--dx,0px) * .8),calc(var(--dy,0px) * .8),0)} /* le reflet de vitre au curseur */ .skp__glare{position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;opacity:var(--gl,0);mix-blend-mode:screen; background:radial-gradient(190px circle at var(--px,50%) var(--py,50%),rgba(238,251,230,.20),transparent 62%);transition:opacity .35s} .skp__hd{position:relative;display:flex;align-items:center;gap:10px;padding:14px 12px 0 18px;cursor:grab;user-select:none} .skp.is-drag .skp__hd{cursor:grabbing} .skp__eye{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--green,#9dff3c); display:inline-flex;align-items:center;gap:8px} .skp__eye::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--green,#9dff3c);box-shadow:0 0 10px var(--green,#9dff3c);animation:skpDot 2.4s ease-in-out infinite} @keyframes skpDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}} .skp__grip{margin-left:auto;display:grid;grid-template-columns:repeat(3,3px);gap:3px;opacity:.4} .skp__grip i{width:3px;height:3px;border-radius:999px;background:#c9d0c4;display:block} .skp__x{position:relative;z-index:6;flex:none;width:40px;height:40px;margin:-4px -6px 0 0;border:0;border-radius:999px;background:transparent; color:#c9d0c4;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .25s,color .25s,transform .5s cubic-bezier(.32,.72,0,1)} .skp__x:hover{background:rgba(255,255,255,.08);color:#fff;transform:rotate(90deg)} .skp__x:focus-visible{outline:2px solid var(--green,#9dff3c);outline-offset:2px} .skp__bd{position:relative;display:grid;grid-template-columns:120px 1fr;gap:14px;padding:8px 18px 12px;align-items:start} /* LA PIÈCE */ .skp__logo{position:relative;width:104px;height:104px;margin:8px 0 0 6px;perspective:700px; transform:translate3d(calc(var(--dx,0px) * 1.6),calc(var(--dy,0px) * 1.6),0)} .skp__halo{position:absolute;inset:-26%;border-radius:999px;pointer-events:none; background:radial-gradient(closest-side,rgba(157,255,60,.5),rgba(157,255,60,.12) 55%,transparent 72%); filter:blur(6px);animation:skpHalo 3.8s ease-in-out infinite} @keyframes skpHalo{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}} .skp__float{position:relative;width:100%;height:100%;animation:skpFloat 6.5s ease-in-out infinite} @keyframes skpFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(1.5deg)}} .skp__coin{position:relative;width:100%;height:100%;border-radius:999px;padding:3px;transform-style:preserve-3d; animation:skpCoin 1.35s cubic-bezier(.2,.85,.25,1) .22s both} @keyframes skpCoin{from{transform:rotateY(-540deg) scale(.5);opacity:0}40%{opacity:1}to{transform:rotateY(0) scale(1);opacity:1}} .skp__coin::before{content:"";position:absolute;inset:0;border-radius:999px; background:conic-gradient(from var(--skp-a),#f4f7f5,#6f7672 14%,#e6eae8 30%,#2c312f 46%,#9dff3c 52%,#f7f9f8 58%,#5b615e 74%,#eef1ef 88%,#f4f7f5); animation:skpRim 9s linear infinite;box-shadow:0 18px 34px -14px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.8),0 0 30px -8px rgba(157,255,60,.5)} @keyframes skpRim{to{--skp-a:360deg}} .skp__coin>span{position:relative;display:block;width:100%;height:100%;border-radius:999px;overflow:hidden;background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -14px 22px rgba(0,0,0,.75),inset 0 10px 18px rgba(255,255,255,.06)} .skp__coin img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.08) saturate(.85)} .skp__coin>span::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;mix-blend-mode:screen; background:linear-gradient(118deg,transparent 28%,rgba(255,255,255,.62) 44%,rgba(157,255,60,.18) 50%,rgba(255,255,255,.1) 55%,transparent 66%); background-size:260% 100%;background-position:130% 0;animation:skpSheen 5.2s cubic-bezier(.4,0,.2,1) 1.8s infinite} @keyframes skpSheen{0%{background-position:130% 0}40%{background-position:-70% 0}100%{background-position:-70% 0}} .skp__reflet{position:absolute;left:3px;right:3px;top:calc(100% + 6px);height:44px;border-radius:999px 999px 0 0;pointer-events:none; transform:scaleY(-1);opacity:.2;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent,#000 92%);mask-image:linear-gradient(180deg,transparent,#000 92%)} .skp__reflet img{width:100%;height:98px;object-fit:cover;display:block;filter:blur(1.5px) saturate(.6)} /* LE TITRE mot à mot, dé-flouté ; le texte et les boutons montent derrière */ .skp__t{font-family:var(--disp,inherit);font-size:20px;line-height:1.14;letter-spacing:-.012em;margin:6px 0 8px;text-wrap:balance;color:#f2f6f0} .skp__w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(10px)} .skp.is-on .skp__w{animation:skpWord .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.3s + var(--i,0) * .055s)} @keyframes skpWord{to{opacity:1;filter:blur(0);transform:none}} .skp__p{font-size:13px;line-height:1.55;color:#aeb6b0;margin:0;opacity:0;transform:translateY(10px); transition:opacity .7s ease .6s,transform .7s cubic-bezier(.22,1,.36,1) .6s} .skp.is-on .skp__p{opacity:1;transform:none} .skp__acts{position:relative;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 18px 18px;opacity:0; transition:opacity .7s ease .8s,transform .7s cubic-bezier(.22,1,.36,1) .8s; transform:translate3d(calc(var(--dx,0px) * .45),calc(12px + var(--dy,0px) * .45),0)} .skp.is-on .skp__acts{opacity:1} /* LE BOUTON : pilule lime, cercle chrome pour la flèche, reflet spéculaire qui suit le curseur (--px/--py posés par le JS), aimanté (skld-magnet tient sa transform) */ .skp__cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:6px 6px 6px 18px;border-radius:999px;border:0;cursor:pointer; font:700 12.5px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#050705; background:linear-gradient(180deg,#c4ff74,#8fe83a);box-shadow:0 14px 30px -12px rgba(157,255,60,.75),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(0,0,0,.12)} .skp__cta::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:var(--gl,0); background:radial-gradient(70px circle at var(--px,50%) var(--py,50%),rgba(255,255,255,.95),transparent 65%)} .skp__cta::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 100%; animation:skpCtaShine 4.4s cubic-bezier(.4,0,.2,1) 2.2s infinite} @keyframes skpCtaShine{0%{background-position:120% 0}45%{background-position:-80% 0}100%{background-position:-80% 0}} .skp__cta i{position:relative;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;font-style:normal;color:#eefbe6; background:conic-gradient(from 200deg,#f2f5f3,#6f7672 20%,#e6eae8 40%,#3a403d 60%,#f7f9f8 80%,#f2f5f3); box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 4px 10px -4px rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.32,.72,0,1)} .skp__cta i::before{content:"";position:absolute;inset:2px;border-radius:999px;background:#0a0f0c} .skp__cta svg{position:relative;width:14px;height:14px} .skp__cta:hover i{transform:translate(3px,-2px) rotate(8deg)} .skp__later{min-height:44px;padding:0 12px;border:0;background:transparent;color:#8f978f;font:500 12.5px var(--body,inherit);cursor:pointer;border-radius:12px} .skp__later:hover{color:#e8eee4;background:rgba(255,255,255,.05)} .skp__later:focus-visible,.skp__cta:focus-visible{outline:2px solid var(--green,#9dff3c);outline-offset:2px} @media (max-width:640px){ .skp{left:0;right:0;bottom:0;width:100%;perspective:none;transform:translateY(100%)} .skp__tilt.fx-bezel{border-radius:22px 22px 0 0;transform:none} .skp__core.fx-core{border-radius:21px 21px 0 0;padding-bottom:max(6px,env(safe-area-inset-bottom))} .skp__scene{border-radius:21px 21px 0 0} .skp__hd{cursor:default} .skp__bd{grid-template-columns:90px 1fr;padding:6px 16px 10px} .skp__logo{width:78px;height:78px;margin:8px 0 0 2px} .skp__reflet{display:none} .skp__t{font-size:17.5px} } @media (prefers-reduced-motion:reduce){ .skp{transition:opacity .3s;transform:none;filter:none} .skp__tilt.fx-bezel{transform:none!important} .skp__float,.skp__coin,.skp__coin::before,.skp__coin>span::after,.skp__aurora i,.skp__halo,.skp__eye::before,.skp__cta::after{animation:none} .skp__w,.skp.is-on .skp__w{animation:none;opacity:1;filter:none;transform:none} .skp__p,.skp__acts{opacity:1;transform:none;transition:none} .skp__x,.skp__cta i{transition:none} } /* skld-v5.css */ /* ============================================================================ SKLD · DIRECTION v5 « PIERRE » — ce qui s'AJOUTE au socle d'origine. Le site garde sa langue (Clash Display, General Sans, JetBrains Mono, cases arrondies en verre, vert rare). Cette feuille apporte ce qui lui manquait pour la matière et l'échelle : - une fonte LARGE et noire pour les mots géants (Archivo, axe de largeur) ; - deux sols neutres : la nuit (#050505) et l'os (gris pierre du bandeau) ; - le grain, la micro-typographie de relevé, les repères, la case à double bord. Le lime reste un ACCENT : une action, un état, une lumière. Jamais une surface de page. ========================================================================= */ @font-face{font-family:"Archivo Mega";src:url("/static/fonts/archivo-latin-standard-normal.woff2") format("woff2"); font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap} /* UNE FAMILLE, TROIS LARGEURS. Le même fichier variable (Archivo, OFL) est déclaré sous trois noms dont la largeur est FIXÉE par le descripteur font-stretch : le navigateur ramène la largeur demandée dans la plage déclarée, donc « SKLD Titre » sort toujours à 114 % et « SKLD Micro » à 122 %, sans rien demander à l'élément. Les jetons d'origine (--f-display, --f-ui, --f-mono) pointent dessus : tout le site change de voix d'un coup. */ @font-face{font-family:"SKLD Texte";src:url("/static/fonts/archivo-latin-standard-normal.woff2") format("woff2"); font-weight:100 900;font-stretch:100%;font-style:normal;font-display:swap} @font-face{font-family:"SKLD Titre";src:url("/static/fonts/archivo-latin-standard-normal.woff2") format("woff2"); font-weight:100 900;font-stretch:114%;font-style:normal;font-display:swap} @font-face{font-family:"SKLD Micro";src:url("/static/fonts/archivo-latin-standard-normal.woff2") format("woff2"); font-weight:100 900;font-stretch:122%;font-style:normal;font-display:swap} /* LES CHIFFRES : une condensée d'enseigne (Big Shoulders Display, OFL), haute et serrée, contre la largeur des mots. */ @font-face{font-family:"Big Shoulders Display";src:url("/static/fonts/big-shoulders-display-latin-wght-normal.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap} :root{ --v5-nuit:#050505; --v5-nuit-2:#0b0c0b; --v5-os:#e8e9e4; --v5-os-2:#d5d8d6; --v5-pierre:#8b8f8c; --v5-lime:#89f421; --v5-fil:rgba(232,233,228,.12); --v5-fil-2:rgba(232,233,228,.22); --f-mega:"Archivo Mega","Archivo","Clash Display",system-ui,sans-serif; --v5-sortie:cubic-bezier(.16,1,.3,1); --v5-masse:cubic-bezier(.32,.72,0,1); --v5-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------ le mot géant */ .v5-mega{font-family:var(--f-mega);font-weight:900;font-stretch:125%;text-transform:uppercase; letter-spacing:-.045em;line-height:.78;margin:0;font-kerning:normal} /* ------------------------------------------------------------ la micro-typographie de relevé */ .v5-rel{font-family:var(--f-mono);font-weight:600;font-size:10px;line-height:1.55;letter-spacing:.07em;text-transform:uppercase; color:rgba(232,233,228,.56);font-variant-numeric:tabular-nums} .v5-rel b{font-weight:700;color:var(--v5-os)} .v5-rel .on{color:var(--v5-lime)} /* un repère de visée : une croix fine aux intersections de la grille */ .v5-croix{position:absolute;width:13px;height:13px;pointer-events:none;opacity:.5} .v5-croix::before,.v5-croix::after{content:"";position:absolute;background:var(--v5-os)} .v5-croix::before{left:6px;top:0;width:1px;height:13px} .v5-croix::after{top:6px;left:0;height:1px;width:13px} /* ------------------------------------------------------------ la case à double bord Une coque (verre fumé, filet) qui porte un cœur (dégradé, reflet haut) : la case a une épaisseur. Le flou d'arrière-plan n'est posé que sur des éléments fixes ou de héros. */ .v5-coque{position:relative;display:block;padding:6px;border-radius:26px;color:inherit;text-decoration:none; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 30px 80px -40px rgba(0,0,0,.9)} .v5-coque--verre{-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15)} .v5-coeur{position:relative;border-radius:20px;overflow:hidden; background:linear-gradient(180deg,rgba(18,19,18,.82),rgba(8,9,8,.9)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.04)} .v5-coeur::after{content:"";position:absolute;inset:0;background:var(--v5-grain);opacity:.05;pointer-events:none;mix-blend-mode:overlay} /* ------------------------------------------------------------ la plaque claire Le sol « os » du bandeau, posé comme une dalle arrondie dans la page noire. Le texte y est noir ; le lime n'y est jamais du texte (il ne se lit pas sur le clair). */ .v5-plaque{position:relative;isolation:isolate;overflow:hidden;color:#0a0a0a;background:var(--v5-os-2); margin:clamp(24px,4vw,64px) clamp(10px,1.3vw,20px);border-radius:clamp(22px,2.6vw,36px)} .v5-plaque::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(70% 60% at 62% 26%,#eef0ee,transparent 70%),radial-gradient(60% 60% at 0 100%,#bfc4c3,transparent 66%)} .v5-plaque::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:var(--v5-grain);filter:invert(1);opacity:.2} .v5-plaque .v5-rel{color:rgba(10,10,10,.62)} .v5-plaque .v5-rel b{color:#0a0a0a} /* ------------------------------------------------------------ l'en-tête de page (.e5) Le parent pauvre du héros de l'accueil, pour toutes les pages : le mot géant est le

, la roche (image rendue, pas de WebGL ici) passe devant, le mot en filet repasse par-dessus. Empilement : 1 mot · 2 roche · 3 filet · 4 voile · 5 relevés et texte · 6 grain. */ .e5{--page:max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut)));position:relative;isolation:isolate;overflow:hidden;background:var(--v5-nuit);color:var(--v5-os); min-height:clamp(480px,66vh,660px);margin-top:calc(-1 * var(--hdr-h));border-bottom:1px solid var(--v5-fil)} .e5::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(60% 60% at 50% 40%,rgba(232,233,228,.055),transparent 70%)} .e5::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--v5-grain);opacity:.07;mix-blend-mode:overlay} /* sans chapeau ni action, l'en-tête se resserre autour du mot */ .e5--court{min-height:clamp(380px,52vh,520px)} .e5--court .e5__mot{top:54%} .e5--court .e5__roche--a{top:14%} .e5__mot{position:absolute;left:0;right:0;top:46%;z-index:1;margin:0;text-align:center;white-space:nowrap;font-size:20vw; color:var(--v5-os);transform:translate3d(calc(var(--mx,0) * -10px),calc(-50% + var(--my,0) * -6px),0);user-select:none;pointer-events:none} .e5__mot--fil{transform:translate3d(calc(var(--mx,0) * 6px),calc(-50% + var(--my,0) * 4px),0)} .e5__mot > span{display:inline-block} .e5__mot-net{-webkit-mask:linear-gradient(180deg,#000 0,#000 46%,transparent 92%);mask:linear-gradient(180deg,#000 0,#000 46%,transparent 92%)} .e5__mot-flou{position:absolute;left:50%;top:0;transform:translateX(-50%);filter:blur(.05em);opacity:.9; -webkit-mask:linear-gradient(180deg,transparent 20%,#000 82%);mask:linear-gradient(180deg,transparent 20%,#000 82%)} .e5__mot--fil{z-index:3;color:transparent;-webkit-text-stroke:1.5px rgba(232,233,228,.55); -webkit-mask:linear-gradient(180deg,#000 0,#000 42%,transparent 84%);mask:linear-gradient(180deg,#000 0,#000 42%,transparent 84%)} .e5__roche{position:absolute;z-index:2;height:auto;pointer-events:none;will-change:transform; transform:translate3d(calc(var(--mx,0) * var(--pm,22px)),calc(var(--fy,0px) + var(--my,0) * var(--pm,22px) * .6),0) rotate(calc(var(--rot,0deg) + var(--mx,0) * 3deg))} .e5__roche--b{--pm:-38px} .e5__roche--a{right:6%;top:9%;width:clamp(200px,25vw,400px);--rot:-12deg} .e5__roche--b{left:1%;top:44%;width:clamp(110px,12vw,200px);--rot:22deg;filter:blur(3px) brightness(.8)} .e5__voile{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:4;pointer-events:none; background:linear-gradient(180deg,transparent 0,rgba(5,5,5,.7) 46%,var(--v5-nuit) 100%)} .e5__hud{position:absolute;z-index:5;top:112px;left:var(--page);display:grid;gap:3px} .e5__croix{z-index:5;right:var(--page);top:116px} .e5__sceau{position:absolute;z-index:5;right:var(--page);top:104px} .e5:has(.e5__sceau) .e5__roche--a{right:11%;top:15%} .e5__bas{position:absolute;z-index:5;left:0;right:0;bottom:28px;padding-inline:var(--page); display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap} .e5:has(.e5__regle) .e5__bas{bottom:104px} .e5 .e5__lede{margin:0;max-width:46ch;font-family:var(--f-display);font-weight:500;font-size:clamp(18px,1.7vw,24px);line-height:1.22; letter-spacing:-.015em;color:var(--v5-os);text-wrap:balance} .e5 .e5__lede--dense{max-width:58ch;font-family:var(--f-ui);font-weight:400;font-size:15.5px;line-height:1.62;letter-spacing:0;color:rgba(232,233,228,.74)} .e5__actes{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .e5__actes > *{margin:0} .e5__regle{position:absolute;z-index:5;left:0;right:0;bottom:0;margin:0;height:76px;display:flex;padding-inline:var(--page);border-top:1px solid var(--v5-fil)} .e5__regle > div{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-inline:22px;border-left:1px solid var(--v5-fil)} .e5__regle > div:first-child{border-left:0;padding-left:0} .e5__regle > div:last-child{padding-right:0} .e5__regle dt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .e5__regle dd{margin:0;font-family:var(--f-chiffre);font-weight:800;font-size:40px;line-height:1;letter-spacing:.01em;color:var(--v5-os);white-space:nowrap} /* l'entrée : le mot sort du flou, la roche et le texte suivent */ .v5js .e5__mot{opacity:0;filter:blur(24px);transition:opacity 1000ms var(--v5-sortie),filter 1300ms var(--v5-sortie)} .v5js .e5__roche,.v5js .e5__bas > *,.v5js .e5__hud,.v5js .e5__regle > div{opacity:0;transition:opacity 900ms var(--v5-sortie) 350ms} .v5js .e5.is-la .e5__mot{opacity:1;filter:none} .v5js .e5.is-la .e5__roche,.v5js .e5.is-la .e5__bas > *,.v5js .e5.is-la .e5__hud,.v5js .e5.is-la .e5__regle > div{opacity:1} @media (max-width:900px){ .e5{min-height:0;margin-top:calc(-1 * var(--hdr-h));padding-top:300px} .e5__mot{top:196px} .e5__roche--a{right:-4%;top:104px;width:46vw} .e5__roche--b{display:none} .e5__voile{top:220px;height:auto} .e5__hud{top:84px} .e5__croix{display:none} .e5__sceau{top:78px;right:var(--gut)} .e5__sceau .v5-sceau__c{min-width:48px;height:48px;font-size:18px;border-radius:13px 13px 13px 4px} .e5__bas,.e5:has(.e5__regle) .e5__bas{position:relative;bottom:auto;padding-bottom:22px} .e5__regle{position:relative;height:auto;flex-wrap:wrap} .e5__regle{padding-inline:0} .e5__regle > div,.e5__regle > div:first-child,.e5__regle > div:last-child{flex:1 1 50%;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:12px var(--gut);border-top:1px solid var(--v5-fil)} .e5__regle dd{font-size:34px} .e5__regle > div:nth-child(-n+2){border-top:0} .e5__regle > div:nth-child(odd){border-left:0} } @media (prefers-reduced-motion:reduce){ .v5js .e5__mot{filter:none;transition:opacity 500ms linear} } /* ------------------------------------------------------------ l'affiche d'un tournoi (.a5) Coque + visuel + chiffres. Le visuel dort en noir et blanc ; au survol il prend sa couleur, quelques tranches de parasites passent, la carte monte, le palet s'allume. */ .a5{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:432px;padding:6px;color:var(--v5-os);text-decoration:none; border-radius:26px 26px 26px 8px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02)),#0b0b0b; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.1),0 30px 70px -46px #000; transition:transform 700ms var(--v5-masse),box-shadow 500ms var(--v5-masse)} .a5:hover,.a5:focus-visible{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.2),0 40px 80px -44px #000} .a5__media{position:relative;display:block;height:214px;border-radius:20px 20px 6px 6px;overflow:hidden;background:radial-gradient(90% 90% at 50% 20%,#1c1c1c,#090909)} .a5__media img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.7);transform:scale(1.02); transition:filter 600ms var(--v5-masse),transform 1400ms var(--v5-sortie)} .a5:hover .a5__media img,.a5:focus-visible .a5__media img{filter:none;transform:scale(1.07)} .a5__media img.a5__roche{object-fit:contain;padding:14px 14px 26px 40%;filter:none} .a5__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,5,.2) 0,rgba(5,5,5,0) 34%,rgba(5,5,5,.88) 100%)} .a5__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:var(--img,none) center/cover;mix-blend-mode:screen} .a5:hover .a5__media::before{animation:a5-parasite 460ms steps(1) 1} @keyframes a5-parasite{ 0%{opacity:.95;clip-path:inset(12% 0 70% 0);transform:translateX(-16px)} 20%{opacity:.95;clip-path:inset(58% 0 22% 0);transform:translateX(12px)} 40%{opacity:.95;clip-path:inset(34% 0 50% 0);transform:translateX(-8px)} 60%{opacity:.95;clip-path:inset(80% 0 6% 0);transform:translateX(14px)} 80%{opacity:.95;clip-path:inset(4% 0 86% 0);transform:translateX(-10px)} 100%{opacity:0}} .a5__tete{position:absolute;z-index:2;left:18px;right:18px;top:18px;display:flex;justify-content:space-between;align-items:center;gap:10px} .a5__etat,.a5__orig{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:8px;white-space:nowrap; font-family:var(--f-mono);font-weight:700;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase; color:var(--v5-os);background:rgba(8,8,8,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .a5__orig{color:rgba(232,233,228,.7);font-weight:600} .a5__etat i{width:6px;height:6px;border-radius:50%;background:rgba(232,233,228,.5)} .a5--registration_open .a5__etat i,.a5--check_in .a5__etat i{background:var(--v5-lime);box-shadow:0 0 0 3px rgba(137,244,33,.22)} .a5--running .a5__etat{color:#fff;background:#e5262b;box-shadow:none} .a5--running .a5__etat i{background:#fff;animation:a5-pouls 1.4s ease-in-out infinite} @keyframes a5-pouls{50%{opacity:.25}} .a5--cancelled .a5__etat,.a5--archived .a5__etat,.a5--completed .a5__etat{color:rgba(232,233,228,.62)} .a5__date{position:absolute;z-index:2;left:20px;top:136px;display:flex;align-items:baseline;font-family:var(--f-chiffre);font-weight:800;line-height:.8;color:var(--v5-os); pointer-events:none;transition:transform 700ms var(--v5-masse)} .a5:hover .a5__date{transform:translateY(-4px)} .a5__date b{font-size:104px;font-weight:800;letter-spacing:-.01em} .a5__date i{margin-left:3px;font-style:normal;font-size:42px;font-weight:700;color:rgba(232,233,228,.62)} .a5__corps{display:flex;flex-direction:column;flex:1;gap:8px;padding:18px 16px 14px} .a5__fmt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .a5__nom{font-family:var(--f-display);font-weight:760;font-size:22px;line-height:1.02;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .a5__pied{display:flex;align-items:flex-end;gap:14px;margin-top:auto;padding-top:14px;border-top:1px solid var(--v5-fil)} .a5__jauge{flex:1;min-width:0} .a5__jauge .v5-rel{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .a5__barre{display:block;height:3px;margin-top:9px;border-radius:2px;overflow:hidden;background:rgba(232,233,228,.12)} .a5__barre i{display:block;height:100%;border-radius:2px;background:var(--v5-os)} .a5__prix{font-family:var(--f-chiffre);font-weight:800;font-size:32px;line-height:.86;white-space:nowrap} .a5 .v5-rond{width:36px;height:36px;color:var(--v5-os);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); transition:transform 520ms var(--v5-masse),background 300ms var(--v5-masse),color 300ms var(--v5-masse)} .a5:hover .v5-rond,.a5:focus-visible .v5-rond{background:var(--v5-lime);color:#050505} .a5-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));gap:18px} /* ------------------------------------------------------------ le carrousel en arc ([data-arc]) Une rangée qui défile à l'horizontale ; skld-v5.js penche chaque carte selon sa distance au centre (--n de -1 à 1) : elles s'incurvent autour d'un trait de lumière. Sans script, c'est une rangée défilante ordinaire. */ .v5-arc{position:relative;isolation:isolate} .v5-arc__trait{position:absolute;z-index:-1;left:50%;top:-4%;bottom:-4%;width:2px;margin-left:-1px;pointer-events:none; background:linear-gradient(180deg,transparent,var(--v5-lime) 22%,#eaffd2 50%,var(--v5-lime) 78%,transparent); box-shadow:0 0 22px 3px rgba(137,244,33,.5),0 0 120px 34px rgba(137,244,33,.16)} .v5-arc__piste{display:flex;gap:18px;padding:34px max(var(--gut),calc(50% - 160px)) 46px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scrollbar-width:none;perspective:1500px;cursor:grab} .v5-arc__piste::-webkit-scrollbar{display:none} .v5-arc__piste.is-saisie{cursor:grabbing;scroll-snap-type:none} .v5-arc__piste > *{flex:0 0 320px;scroll-snap-align:center;transform-style:preserve-3d; transform:rotateY(calc(var(--n,0) * -24deg)) translateZ(calc(var(--d,0) * -150px)) scale(calc(1 - var(--d,0) * .05)); filter:brightness(calc(1 - var(--d,0) * .38));transition:filter 300ms linear} .v5-arc__piste > .a5:hover{transform:rotateY(calc(var(--n,0) * -24deg)) translateZ(calc(var(--d,0) * -150px + 20px)) scale(calc(1 - var(--d,0) * .05))} .v5-arc__cmd{display:flex;justify-content:center;gap:10px;margin-top:4px} .v5-arc__cmd button{display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:15px;color:var(--v5-os);cursor:pointer; background:linear-gradient(180deg,#1e1e1e,#101010);box-shadow:inset 0 0 0 1px rgba(255,255,255,.085),inset 0 1px 0 rgba(255,255,255,.11); transition:transform 420ms var(--v5-masse)} .v5-arc__cmd button:hover{transform:translateY(-2px)} .v5-arc__cmd svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2} @media (max-width:700px){ .v5-arc__piste{padding-inline:var(--gut);perspective:none} .v5-arc__piste > *{flex-basis:84vw;transform:none;filter:none} .v5-arc__trait{display:none} } /* le bouton rond qui porte la flèche (l'action dans l'action) */ .v5-rond{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none; background:var(--v5-lime);color:#050505;transition:transform 520ms var(--v5-masse)} .v5-rond svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2} a:hover > .v5-rond,a:hover .v5-rond,button:hover .v5-rond{transform:translate(3px,-1px) scale(1.06)} /* ------------------------------------------------------------ le viseur (posé par skld-v5.js, pointeur fin seulement) */ .v5-viseur{position:fixed;left:0;top:0;z-index:95;pointer-events:none;opacity:0;width:var(--vw,30px);height:var(--vh,30px); transform:translate3d(var(--vx,-100px),var(--vy,-100px),0);mix-blend-mode:difference; transition:width 280ms var(--v5-masse),height 280ms var(--v5-masse),opacity 200ms linear} .v5-viseur.is-on{opacity:.9} .v5-viseur i{position:absolute;width:8px;height:8px;border:1.5px solid #f1f1ec;transition:border-color 200ms linear} .v5-viseur i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0} .v5-viseur i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0} .v5-viseur i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0} .v5-viseur i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0} /* ------------------------------------------------------------ apparitions v5 (classe .js posée par skld-v5.js) */ .v5js [data-v5]{opacity:0;transform:translate3d(0,22px,0);filter:blur(6px); transition:opacity 800ms var(--v5-sortie),transform 900ms var(--v5-sortie),filter 800ms var(--v5-sortie); transition-delay:calc(var(--i,0)*70ms)} .v5js [data-v5].in{opacity:1;transform:none;filter:none} @media (prefers-reduced-motion:reduce){ .v5js [data-v5]{transform:none;filter:none;transition:opacity 420ms linear;transition-delay:calc(var(--i,0)*30ms)} } /* ============================================================================ SOL CLAIR — le monde du bandeau : pierre claire, objets noirs, lettrage en masse. Le fondateur (07/10) : « le noir plein, ce n'est pas beau », « plus blanc, ou plus vert, avec des touches de noir ». Les en-têtes de page sont donc des plaques CLAIRES : le mot géant y est noir et se dissout en fumée, le rocher noir passe devant. ========================================================================= */ .e5{background:#d7d9d6;color:#0a0a0a;border-bottom:0;border-radius:0 0 clamp(22px,2.6vw,38px) clamp(22px,2.6vw,38px)} .e5::before{background:radial-gradient(70% 60% at 62% 26%,#eff1ef,transparent 70%),radial-gradient(60% 60% at 0 100%,#bcc1c0,transparent 66%)} .e5::after{filter:invert(1);opacity:.2;mix-blend-mode:normal} .e5__mot{color:#0a0a0a} .e5__mot--fil,.e5__voile{display:none} .e5__roche--b{filter:blur(3px)} .e5 .v5-rel{color:rgba(10,10,10,.62)} .e5 .v5-rel b{color:#0a0a0a} .e5 .v5-croix::before,.e5 .v5-croix::after{background:#0a0a0a} .e5 .e5__lede{color:#0a0a0a} .e5 .e5__lede--dense{color:rgba(10,10,10,.74)} .e5__regle{border-top-color:rgba(10,10,10,.16)} .e5__regle > div{border-left-color:rgba(10,10,10,.16)} .e5__regle dd{color:#0a0a0a} @media (max-width:900px){ .e5__regle > div,.e5__regle > div:first-child,.e5__regle > div:last-child{border-top-color:rgba(10,10,10,.16)} } /* une bande de nuit dans une page claire : une dalle noire arrondie qui porte ce qui vit mieux dans le noir */ .v5-bande{position:relative;isolation:isolate;overflow:clip;margin:clamp(20px,3vw,44px) clamp(8px,1vw,16px);border-radius:clamp(22px,2.6vw,38px); background:#050505;color:var(--v5-os)} /* la plaque inversée : sur une page claire, le « moment » est noir */ .v5-plaque--nuit{background:#070707;color:var(--v5-os)} .v5-plaque--nuit::before{background:radial-gradient(70% 60% at 62% 26%,rgba(232,233,228,.08),transparent 70%)} .v5-plaque--nuit::after{filter:none;opacity:.07;mix-blend-mode:overlay} .v5-plaque--nuit .v5-rel{color:rgba(232,233,228,.56)} .v5-plaque--nuit .v5-rel b{color:var(--v5-os)} /* ============================================================================ LA COUCHE GRAPHIQUE — ce qui fait d'une page une affiche. Le prochain opus se passe en Corée : les signes coréens (hangul) servent de sigles, toujours à côté du mot français, jamais à sa place. ========================================================================= */ .v5-han{font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR","Nanum Gothic",sans-serif;font-weight:700;font-style:normal;letter-spacing:.04em} /* --- le sceau : un cachet noir à l'angle franc, le signe coréen dedans, le mot dessous */ .v5-sceau{display:inline-grid;justify-items:center;gap:6px} .v5-sceau__c{display:grid;place-items:center;min-width:64px;height:64px;padding:0 12px;border-radius:16px 16px 16px 4px;color:#f1f1ec;background:#0a0a0a; font-size:24px;line-height:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 14px 30px -16px rgba(0,0,0,.6)} .v5-sceau__l{font-family:var(--f-mono);font-weight:600;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,10,10,.6)} /* --- le ruban : une bande de chantier lime qui traverse la page en biais et défile. La zone qui l'entoure le rogne aux bords de la page (il dépasse exprès, incliné). */ .v5-ruban-zone{position:relative;z-index:4;overflow:clip;padding-block:34px;margin-block:-34px} .v5-ruban{position:relative;z-index:4;overflow:hidden;margin:-22px -4vw 0;transform:rotate(-2deg);color:#050505;background:var(--v5-lime); box-shadow:0 18px 40px -22px rgba(0,0,0,.55)} .v5-ruban--noir{color:var(--v5-os);background:#0a0a0a} .v5-ruban__piste{display:flex;align-items:center;gap:30px;width:max-content;padding:11px 0;white-space:nowrap;animation:v5-ruban 44s linear infinite} .v5-ruban__piste > *{display:inline-flex;align-items:center;gap:30px} .v5-ruban__piste > *::after{content:"";width:9px;height:9px;background:currentColor;transform:rotate(45deg)} .v5-ruban span{font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:21px;line-height:1;letter-spacing:-.03em;text-transform:uppercase} .v5-ruban i{font-size:19px;line-height:1} @keyframes v5-ruban{to{transform:translate3d(-50%,0,0)}} /* --- la trame : le bord d'une bande de nuit se défait en points (demi-teinte) au lieu de s'arrondir */ .v5-trame{display:block;height:46px;margin:clamp(20px,3vw,44px) clamp(8px,1vw,16px) -1px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='46'%3E%3Cg fill='%23050505'%3E%3Ccircle cx='7' cy='5' r='1.1'/%3E%3Ccircle cx='7' cy='15' r='2.3'/%3E%3Ccircle cx='7' cy='26' r='3.9'/%3E%3Ccircle cx='7' cy='38' r='5.9'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom/14px 46px} .v5-trame--bas{margin:-1px clamp(8px,1vw,16px) clamp(20px,3vw,44px);transform:scaleY(-1)} .v5-trame + .v5-bande{margin-top:0;border-top-left-radius:0;border-top-right-radius:0} .v5-bande:has(+ .v5-trame--bas){margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0} /* --- le film dans les lettres : la vidéo passe derrière un pochoir de pierre, le mot noir du pochoir devient une fenêtre (fusion « éclaircir ») */ .e5--film{background:#0a0a0a} .e5--film::before{display:none} .e5__film{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25) brightness(.78)} .e5__pochoir{position:absolute;inset:0;z-index:1;mix-blend-mode:lighten; background:radial-gradient(70% 60% at 62% 26%,#eff1ef,transparent 70%),radial-gradient(60% 60% at 0 100%,#bcc1c0,transparent 66%),#d7d9d6} .e5--film .e5__mot{color:#000} /* --- l'intro : deux volets noirs qui s'ouvrent, une fois par visite */ .v5-intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none;animation:v5-intro-secours 300ms linear 2700ms forwards} .v5-intro__volet{position:absolute;left:0;right:0;height:50.5%;background:#050505;transition:transform 800ms cubic-bezier(.76,0,.24,1)} .v5-intro__volet--h{top:0} .v5-intro__volet--b{bottom:0} .v5-intro.is-fin .v5-intro__volet--h{transform:translateY(-101%)} .v5-intro.is-fin .v5-intro__volet--b{transform:translateY(101%)} .v5-intro__c{position:relative;z-index:1;display:grid;justify-items:center;gap:12px;color:#f1f1ec;transition:opacity 220ms linear} .v5-intro.is-fin .v5-intro__c{opacity:0} .v5-intro__c img{border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .v5-intro__c b{font-size:17px;letter-spacing:.5em;padding-left:.5em} .v5-intro__c em{font-style:normal;font-family:var(--f-chiffre);font-weight:800;font-size:72px;line-height:.8} @keyframes v5-intro-secours{to{opacity:0;visibility:hidden}} @media (prefers-reduced-motion:reduce){ .v5-ruban__piste{animation:none} .v5-intro__volet{transition-duration:240ms} } /* --- l'en-tête « film » : la vidéo de la page devient une IMPRESSION sur la pierre claire. Elle est passée en négatif noir et blanc, fusionnée en « produit » (le fond noir de la vidéo disparaît, le sujet reste comme une encre) et découpée en fines lames verticales — la trame des affiches du fondateur. Le mot géant noir passe devant, la roche devant lui ; le grain vit. Ni télé ni écran de cinéma : refusés le 07/10 (« pas dans l'univers », « il faut que ce soit moderne »). */ .e5--film{background:#d7d9d6;color:#0a0a0a} .e5--film::before{display:block} .e5__film{filter:grayscale(1) invert(1) contrast(1.7) brightness(1.02);mix-blend-mode:multiply;opacity:.92;transform:scale(1.06); -webkit-mask:repeating-linear-gradient(90deg,#000 0 2.5px,rgba(0,0,0,.16) 2.5px 5px),linear-gradient(180deg,#000 0,#000 40%,transparent 72%); -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 40%,transparent 72%);mask-composite:intersect} .e5__pochoir{mix-blend-mode:normal;background:none} .e5--film .e5__mot{color:#0a0a0a;mix-blend-mode:multiply;opacity:.94} .e5--film::after{animation:v5-pellicule .5s steps(5) infinite;opacity:.26} @keyframes v5-pellicule{0%{background-position:0 0}20%{background-position:-64px 38px}40%{background-position:47px -71px}60%{background-position:-29px -52px}80%{background-position:83px 24px}100%{background-position:0 0}} /* --- l'en-tête « scène » : un PLAN DE LA VALLÉE derrière le mot (le fondateur, 08/10 : « des vraies scènes, comme un film qu'on a fait sur Blender », « ambiances grisâtres »). L'image est celle du film ; la boucle la remplace dès qu'elle est chargée (skld-v5.js, scenes()). Le mot géant est une LUMIÈRE dans la brume : blanc, fusionné en « incrustation », il éclaire la brume claire et reste éteint sur les roches sombres, comme s'il passait derrière elles ; son filet le redessine par-dessus. Le lime reste aux accents de l'image. Le bas se charge pour le texte. */ .e5.e5--scene{--v5-os:#eef0eb;--v5-fil:rgba(238,240,235,.18);background:#7f8582;color:#eef0eb;-webkit-backdrop-filter:none;backdrop-filter:none} .e5--scene::before{display:none} .e5--scene::after{filter:none;opacity:.1;mix-blend-mode:overlay} .e5__plan{position:absolute;left:0;top:-6%;z-index:0;width:100%;height:112%;object-fit:cover;object-position:50% var(--cadre,54%);pointer-events:none; transform:translate3d(calc(var(--mx,0) * -12px),calc(var(--fy,0px) + var(--my,0) * -7px),0) scale(1.03);will-change:transform} .e5__plan--film{opacity:0;transition:opacity 1.4s ease} .e5__plan--film.is-pret{opacity:1} .e5--scene .e5__mot{color:#fff;mix-blend-mode:overlay;opacity:.96} .e5--scene .e5__mot--fil{display:block;mix-blend-mode:normal;opacity:1;color:transparent;-webkit-text-stroke:1.5px rgba(238,240,235,.42)} .e5--scene .e5__voile{display:block;height:54%;background:linear-gradient(180deg,rgba(6,8,7,0) 0,rgba(6,8,7,.34) 44%,rgba(6,8,7,.74) 100%)} /* les plans sombres (vue d'en haut, crête) : l'image est éclaircie, et le mot devient une peinture claire posée dessus */ .e5--scene[data-scene="plongee"] .e5__plan,.e5--scene[data-scene="crete"] .e5__plan{filter:brightness(1.22) contrast(1.03)} .e5--scene[data-scene="plongee"] .e5__mot:not(.e5__mot--fil),.e5--scene[data-scene="crete"] .e5__mot:not(.e5__mot--fil){color:rgba(238,240,235,.3);mix-blend-mode:normal;opacity:1} /* ce que les pages posent dans le corps de leur en-tête (prochaine action, compte, recherche) passe en clair sur une scène */ .e5--scene .esp5-nba__t{color:#fff;text-shadow:0 2px 30px rgba(6,8,7,.5)} .e5--scene .esp5-nba__d,.e5--scene .jr5__compte{color:rgba(238,240,235,.9)} body.v5 .e5--scene .jr5__compte code{color:#fff;background:rgba(238,240,235,.16)} .e5--scene .ph-cherche__champ .v5-rel{color:rgba(238,240,235,.88)} .e5--scene .v5-rel{color:rgba(238,240,235,.82)} .e5--scene .v5-rel b{color:#fff} .e5--scene .e5__hud{text-shadow:0 1px 14px rgba(6,8,7,.55)} .e5--scene .v5-croix::before,.e5--scene .v5-croix::after{background:#eef0eb} .e5--scene .e5__lede{color:#f4f5f1;text-shadow:0 1px 24px rgba(6,8,7,.5)} .e5--scene .e5__lede--dense{color:rgba(238,240,235,.86)} .e5--scene .e5__regle{border-top-color:rgba(238,240,235,.2);background:rgba(6,8,7,.34);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .e5--scene .e5__regle > div{border-left-color:rgba(238,240,235,.16)} .e5--scene .e5__regle dd{color:#fff} body.v5 .e5--scene .e5__regle dt{color:rgba(238,240,235,.78)} /* les boutons sur une image : le principal devient une plaque claire, le second un verre */ body.v5 .e5--scene .btn.pri{color:#0a0a0a;background:linear-gradient(180deg,#ffffff,#dfe2dd)} body.v5 .e5--scene .btn.pri:hover{color:#0a0a0a} body.v5 .e5--scene .btn.pri .btn-ico{color:#0a0a0a} body.v5 .e5--scene .btn:not(.pri){color:#f4f5f1;background:rgba(6,8,7,.5);box-shadow:inset 0 0 0 1px rgba(238,240,235,.34);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} body.v5 .e5--scene .btn:not(.pri):hover{color:#fff;background:rgba(6,8,7,.66)} body.v5 .e5--scene .btn:not(.pri) .btn-ico{color:#f4f5f1;background:rgba(238,240,235,.14);box-shadow:none} body.v5 .e5--scene .btn:focus-visible{outline-color:#89f421} /* le relevé : le viseur se pose sur le sujet du plan (--vx / --vy), la fiche est reliée par un fil pointillé */ .e5__releve{position:absolute;z-index:4;left:var(--vx,52%);top:var(--vy,40%);width:0;height:0;pointer-events:none} .e5__vise{position:absolute;left:0;top:0;width:var(--vt,92px);height:var(--vt,92px);translate:-50% -50%; background: linear-gradient(#eef0eb,#eef0eb) 0 0/14px 1.5px,linear-gradient(#eef0eb,#eef0eb) 0 0/1.5px 14px, linear-gradient(#eef0eb,#eef0eb) 100% 0/14px 1.5px,linear-gradient(#eef0eb,#eef0eb) 100% 0/1.5px 14px, linear-gradient(#eef0eb,#eef0eb) 0 100%/14px 1.5px,linear-gradient(#eef0eb,#eef0eb) 0 100%/1.5px 14px, linear-gradient(#eef0eb,#eef0eb) 100% 100%/14px 1.5px,linear-gradient(#eef0eb,#eef0eb) 100% 100%/1.5px 14px; background-repeat:no-repeat;filter:drop-shadow(0 0 6px rgba(6,8,7,.5))} .e5__vise::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;background:#89f421} .e5__fiche{position:absolute;left:calc(var(--vt,92px) / 2 + 74px);top:calc(var(--vt,92px) / -2 - 34px);display:grid;gap:3px;min-width:150px;padding:9px 12px 10px; white-space:nowrap;color:rgba(238,240,235,.88);background:rgba(6,8,7,.58);box-shadow:inset 0 0 0 1px rgba(238,240,235,.2); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .e5--scene .e5__fiche > b{font-weight:inherit;color:#0a0a0a;background:#eef0eb;justify-self:start;padding:2px 6px;margin:-2px 0 2px -4px} .e5--scene .e5__fiche b[data-coord]{font-weight:inherit;color:#fff} .e5__fiche::before{content:"";position:absolute;right:100%;top:calc(34px + var(--vt,92px) / 2 - 9px);width:74px;height:1px;transform-origin:100% 50%;rotate:-24deg; background:repeating-linear-gradient(90deg,rgba(238,240,235,.8) 0 3px,transparent 3px 7px)} .e5--scene[data-scene="col"]{--vx:50.5%;--vy:40%;--vt:84px} .e5--scene[data-scene="monument"]{--vx:47%;--vy:40%;--vt:150px} .e5--scene[data-scene="plongee"]{--vx:50%;--vy:48%;--vt:170px} .e5--scene[data-scene="rive"]{--vx:60%;--vy:31%;--vt:120px} .e5--scene[data-scene="crete"]{--vx:40%;--vy:50%;--vt:110px} .e5--scene[data-scene="douilles"]{--vx:60%;--vy:52%;--vt:96px} .e5--scene[data-scene="levitation"]{--vx:52%;--vy:36%;--vt:140px} .e5--scene[data-scene="allee"]{--vx:49%;--vy:47%;--vt:150px} .e5--scene[data-scene="nuit"]{--vx:50%;--vy:62%;--vt:84px} .v5js .e5__releve{opacity:0;transition:opacity 700ms linear 900ms} .v5js .e5__vise{scale:1.5;transition:scale 900ms cubic-bezier(.2,.9,.2,1) 900ms} .v5js .e5.is-la .e5__releve,.v5js .e5--scene.in .e5__releve{opacity:1} .v5js .e5.is-la .e5__vise,.v5js .e5--scene.in .e5__vise{scale:1} @media (max-width:900px){ .e5__releve{display:none} } @media (prefers-reduced-motion:reduce){ .e5__plan{transform:scale(1.03)} .v5js .e5__vise{scale:1;transition:none} } @media (prefers-reduced-motion:reduce){ .e5--film::after{animation:none} } /* ============================================================================ LES AFFICHES VIVENT — effets portés de la famille React Bits (MIT + Commons Clause : l'usage dans un produit est permis), réécrits sans dépendance et dans notre matière : - bord électrique (ElectricBorder / StarBorder) : un trait de lumière fait le tour de la carte ; - reflet qui suit le pointeur (GlareHover) et inclinaison en perspective (TiltedCard) ; - étincelles au clic (ClickSpark) ; - lettres qui réagissent à la proximité du pointeur (VariableProximity), grâce aux axes de graisse et de largeur d'Archivo. ========================================================================= */ @property --a5-tour{syntax:"";inherits:false;initial-value:0deg} .a5::before{content:"";position:absolute;inset:-1px;z-index:-1;padding:1.5px;border-radius:inherit;opacity:0;pointer-events:none; background:conic-gradient(from var(--a5-tour),transparent 0 60%,var(--v5-lime) 78%,#f1ffe0 85%,transparent 93%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity 300ms linear} .a5:hover::before,.a5:focus-visible::before{opacity:1;animation:a5-tour 2.2s linear infinite} @keyframes a5-tour{to{--a5-tour:360deg}} .a5::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 300ms linear; background:radial-gradient(440px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.17),transparent 62%)} .a5:hover::after{opacity:1} :is(.a5-grille,.trn-grid) .a5{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)); transition:transform 220ms cubic-bezier(.2,.7,.2,1),box-shadow 500ms var(--v5-masse)} :is(.a5-grille,.trn-grid) .a5:hover,:is(.a5-grille,.trn-grid) .a5:focus-visible{--ty:-6px;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))} /* des silhouettes différentes : l'angle franc tourne d'une carte à l'autre */ :is(.a5-grille,.trn-grid) > .a5:nth-child(3n+2){border-radius:8px 26px 26px 26px} :is(.a5-grille,.trn-grid) > .a5:nth-child(3n+2) .a5__media{border-radius:4px 20px 6px 6px} :is(.a5-grille,.trn-grid) > .a5:nth-child(3n){border-radius:26px 8px 26px 26px} :is(.a5-grille,.trn-grid) > .a5:nth-child(3n) .a5__media{border-radius:20px 4px 6px 6px} @media (min-width:760px){ /* la première affiche est la « une » : deux colonnes, visuel et chiffres plus grands */ :is(.a5-grille,.trn-grid) > .a5:first-child{grid-column:span 2} :is(.a5-grille,.trn-grid) > .a5:first-child .a5__media{height:268px} :is(.a5-grille,.trn-grid) > .a5:first-child .a5__date{top:176px} :is(.a5-grille,.trn-grid) > .a5:first-child .a5__date b{font-size:136px} :is(.a5-grille,.trn-grid) > .a5:first-child .a5__date i{font-size:54px} :is(.a5-grille,.trn-grid) > .a5:first-child .a5__nom{font-size:clamp(26px,2.6vw,38px)} :is(.a5-grille,.trn-grid) > .a5:first-child .a5__prix{font-size:46px} } .v5-etincelle{position:fixed;z-index:120;width:13px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:#fff;mix-blend-mode:difference;pointer-events:none; transform:rotate(var(--rot,0deg));animation:v5-etincelle 460ms cubic-bezier(.16,1,.3,1) forwards} @keyframes v5-etincelle{to{transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0deg)) scaleX(.15);opacity:0}} .v5-l{display:inline-block;transition:font-variation-settings 260ms cubic-bezier(.2,.7,.2,1)} @media (prefers-reduced-motion:reduce){ .a5:hover::before{animation:none} .v5-l{transition:none} } /* le carrousel est posé sur une flaque de lumière (le trait laser a été retiré : refusé le 07/10) */ .v5-arc__sol{position:absolute;z-index:-1;left:50%;bottom:9%;width:min(78vw,1100px);height:210px;transform:translateX(-50%);pointer-events:none; background:radial-gradient(closest-side,rgba(241,241,236,.2),rgba(241,241,236,.05) 55%,transparent 72%);filter:blur(6px)} /* ------------------------------------------------------------ la pièce DEK DEV (.dk5) Troisième écriture (07/10) : la DA du site, « juste un peu plus chrome ». Une dalle en deux matières — pierre claire à gauche, roche noire à droite —, le mot DEK DEV en vraies lettres de chrome qui les traverse toutes les deux, l'objet du métier visé (chrome rendu en 3D) posé sur la jointure, et les quatre métiers en lignes réglées qui se retournent, comme sur la plaque « derniers résultats ». Refusés : le dégradé CSS qui imite le chrome, l'habillage sombre de l'application (Unbounded, vert). */ .dk5{padding:clamp(20px,3vw,44px) clamp(8px,1vw,16px)} .dk5__dalle{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);min-height:clamp(600px,50vw,740px); border-radius:clamp(22px,2.6vw,38px) clamp(22px,2.6vw,38px) clamp(22px,2.6vw,38px) 8px;overflow:hidden; box-shadow:0 44px 90px -54px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.5)} .dk5__pierre,.dk5__nuit{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,2.2vw,30px)} .dk5__pierre{color:#0a0a0a;background:radial-gradient(70% 60% at 30% 20%,rgba(255,255,255,.75),transparent 70%),linear-gradient(180deg,#e6e8e4,#cfd2ce)} .dk5__pierre::after,.dk5__nuit::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--v5-grain);mix-blend-mode:overlay} .dk5__pierre::after{filter:invert(1);opacity:.22} .dk5__nuit{color:#f1f1ec;background:url("/static/players/roche.webp") center/460px,linear-gradient(180deg,#151515,#050505)} .dk5__nuit::after{opacity:.1} .dk5__nuit::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.08))} .dk5__tete{position:relative;z-index:4;display:flex;align-items:center;gap:14px;color:rgba(10,10,10,.66)} .dk5__tete--nuit{justify-content:space-between;color:rgba(241,241,236,.6)} .dk5__logo{width:clamp(44px,4.2vw,62px);height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.3))} /* le mot : de vraies lettres de chrome, d'un bord à l'autre, sur la pierre puis sur le noir */ .dk5__mot{position:absolute;z-index:2;left:3%;top:clamp(74px,9.5vw,128px);width:94%;height:auto;pointer-events:none;filter:drop-shadow(0 22px 26px rgba(0,0,0,.34))} .v5js .dk5__dalle .dk5__mot{opacity:0;transform:translateY(18px);filter:blur(14px);transition:opacity .9s var(--v5-sortie),transform 1.1s var(--v5-sortie),filter 1s var(--v5-sortie)} .v5js .dk5__dalle.is-vue .dk5__mot{opacity:1;transform:none;filter:drop-shadow(0 22px 26px rgba(0,0,0,.34))} /* la couture : un jonc de métal */ .dk5__nuit::before{width:3px;left:-1px;background:linear-gradient(90deg,#2a2a2a,#f6f6f4 38%,#9a9a98 58%,#141414);box-shadow:0 0 14px rgba(255,255,255,.14)} .dk5__objets{position:absolute;z-index:3;left:30.5%;top:clamp(118px,14.5vw,196px);width:30%;aspect-ratio:1.12;pointer-events:none} .dk5__objet{position:absolute;inset:0;margin:auto;width:100%;height:auto;max-height:100%;object-fit:contain;opacity:0;transform:translateY(26px) scale(.93) rotate(-4deg);filter:blur(12px); transition:opacity .45s ease,transform .9s var(--v5-sortie),filter .6s ease} .dk5__objet.is-la{opacity:1;transform:none;filter:drop-shadow(0 34px 30px rgba(0,0,0,.42))} /* la boucle : cachée tant qu'elle n'est pas prête ; prête, elle prend la place de l'image (un rien plus grande : son cadre contient toute la course de l'objet, pas une seule pose) */ .dk5__film{visibility:hidden} .dk5__film.is-pret{visibility:visible;scale:1.09} .dk5__objets img.dk5__objet.a-film{visibility:hidden} .dk5__objet--carte{width:112%;max-width:none;left:-6%} .dk5__objet--casque{width:auto;height:112%;max-height:none;top:-6%} .dk5__objet--ecran{width:96%} /* la devise et la porte */ .dk5__sig{position:relative;z-index:4;display:grid;justify-items:start;gap:clamp(16px,2vw,24px);max-width:38ch} .dk5 .dk5__devise{margin:0;font-family:var(--f-display);font-weight:760;font-size:clamp(34px,4.5vw,70px);line-height:.9;letter-spacing:-.035em;text-transform:uppercase;color:#0a0a0a} /* les quatre métiers : des lignes réglées, strictement égales, qui se retournent */ .dk5__liste{position:relative;z-index:4;list-style:none;margin:0;padding:0} .dk5__ligne{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:5px 16px;width:100%;min-height:78px;padding:14px 14px 14px 6px; border:0;border-top:1px solid rgba(241,241,236,.16);background:none;color:#f1f1ec;text-align:left;cursor:pointer;overflow:hidden;transition:color .35s,padding .5s var(--v5-sortie)} .dk5__liste li:last-child .dk5__ligne{border-bottom:1px solid rgba(241,241,236,.16)} .dk5__ligne::before{content:"";position:absolute;inset:0;z-index:-1;background:#f1f1ec;transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--v5-sortie)} .dk5__ligne:hover,.dk5__ligne.is-la{color:#0a0a0a;padding-left:16px} .dk5__ligne:hover::before,.dk5__ligne.is-la::before{transform:none} .dk5__ligne:focus-visible{outline:2px solid #f1f1ec;outline-offset:-4px} .dk5__rang{grid-row:1 / 3;align-self:start;padding-top:4px;color:inherit;opacity:.6} .dk5__nom{font-family:var(--f-display);font-weight:720;font-size:clamp(15px,1.45vw,21px);line-height:1.05;letter-spacing:-.015em;text-transform:uppercase} .dk5__ou{grid-column:2;color:inherit;opacity:.62} .dk5__ligne .v5-rond{grid-column:3;grid-row:1 / 3;color:#f1f1ec;background:rgba(241,241,236,.09);box-shadow:inset 0 0 0 1px rgba(241,241,236,.16);transition:background .35s,color .35s,transform .5s var(--v5-sortie)} .dk5__ligne:hover .v5-rond,.dk5__ligne.is-la .v5-rond{background:var(--v5-lime);box-shadow:none;color:#050505;transform:rotate(45deg)} @media (max-width:980px){ .dk5__dalle{grid-template-columns:1fr;min-height:0} .dk5__pierre{padding:16px 16px 22px;min-height:136vw;justify-content:flex-start} .dk5__mot{top:64px;left:4%;width:92%} .dk5__objets{left:14%;top:calc(64px + 15vw);width:72%} .dk5__sig{margin-top:auto} .dk5 .dk5__devise{font-size:clamp(34px,11vw,56px)} .dk5__nuit{padding:16px} .dk5__nuit::before{display:none} .dk5__tete--nuit{margin-bottom:12px} } @media (prefers-reduced-motion:reduce){ .v5js .dk5__dalle .dk5__mot,.dk5__objet,.dk5__ligne,.dk5__ligne::before{transition-duration:.2s} } /* Téléphone : la roche ne mange plus le mot (elle mord le coin de la dernière lettre), le film s'arrête avant le texte de lecture. */ @media (max-width:900px){ .e5 .e5__roche--a,.e5:has(.e5__sceau) .e5__roche--a{right:-13%;top:182px;width:30vw} .e5__film{inset:0 0 auto 0;height:340px; -webkit-mask:repeating-linear-gradient(90deg,#000 0 2.5px,rgba(0,0,0,.16) 2.5px 5px),linear-gradient(180deg,#000 0,#000 52%,transparent 96%);-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 52%,transparent 96%);mask-composite:intersect} .e5__regle > div{min-width:0;box-sizing:border-box} .e5__regle dt{max-width:100%;letter-spacing:.04em} .e5__regle > div.e5__long{flex-basis:100%;border-left:0} .e5__regle > div.e5__long:not(:first-child),.e5__regle > div.e5__long ~ div{border-top:1px solid var(--v5-fil)} .e5__regle dd{max-width:100%;overflow:hidden;text-overflow:ellipsis} } /* ------------------------------------------------------------ les clips (.cl5) Les vidéos d'une page, en rayon. Une plaque noire, le mot géant, des tuiles 16:9 dessinées ICI (roche, nom de la plateforme en filet) : aucune image ne vient de la plateforme, le lecteur n'arrive qu'au clic. */ .cl5{padding:clamp(18px,2.2vw,30px) 0 clamp(22px,2.6vw,36px)} .cl5__tete{display:flex;justify-content:space-between;padding:0 clamp(18px,2.6vw,38px);color:rgba(241,241,236,.6)} .cl5 .cl5__mot{padding:clamp(10px,1.4vw,18px) clamp(14px,2.2vw,32px) 0;font-size:clamp(64px,13.5vw,204px);color:var(--v5-os); -webkit-mask:linear-gradient(180deg,#000 28%,transparent 108%);mask:linear-gradient(180deg,#000 28%,transparent 108%)} .cl5__rail{position:relative;z-index:1;list-style:none;margin:clamp(-64px,-4.4vw,-20px) 0 0;padding:6px clamp(18px,2.6vw,38px) 8px; display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,430px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-padding-left:clamp(18px,2.6vw,38px);scrollbar-width:none} .cl5__rail::-webkit-scrollbar{display:none} .cl5__rail > li{scroll-snap-align:start} .cl5__clip{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;border-radius:18px 18px 18px 6px;overflow:hidden; cursor:pointer;text-align:left;color:var(--v5-os);background:#0c0c0c url("/static/players/roche.webp") center/420px; box-shadow:inset 0 0 0 1px rgba(241,241,236,.14);transition:transform .6s var(--v5-masse),box-shadow .35s linear} .cl5__rail > li:nth-child(2n) .cl5__clip{background-position:30% 70%} .cl5__rail > li:nth-child(3n) .cl5__clip{background-position:80% 20%} .cl5__clip::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.05),rgba(5,5,5,.5) 55%,rgba(5,5,5,.92))} .cl5__clip::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--v5-grain);mix-blend-mode:overlay;opacity:.18} .cl5__clip:hover,.cl5__clip:focus-visible{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--v5-lime),0 22px 40px -18px rgba(137,244,33,.35)} .cl5__clip:focus-visible{outline:2px solid var(--v5-lime);outline-offset:3px} .cl5__img{position:absolute;inset:0;display:grid;place-items:center} .cl5__img b{font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(30px,4.6vw,58px);line-height:1;letter-spacing:-.045em;text-transform:uppercase; color:transparent;-webkit-text-stroke:1.4px rgba(241,241,236,.36);transform:rotate(-6deg);transition:transform .9s var(--v5-sortie),-webkit-text-stroke-color .35s linear} .cl5__clip:hover .cl5__img b,.cl5__clip:focus-visible .cl5__img b{transform:rotate(-6deg) scale(1.07);-webkit-text-stroke-color:rgba(137,244,33,.8)} .cl5__n,.cl5__pf{position:absolute;top:13px;z-index:1} .cl5__n{left:15px;color:rgba(241,241,236,.6)} .cl5__pf{right:15px;color:var(--v5-lime)} .cl5__txt{position:absolute;z-index:1;left:15px;right:74px;bottom:14px;font-family:var(--f-ui);font-size:14px;line-height:1.32; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cl5__lire{position:absolute;z-index:1;right:14px;bottom:14px;color:var(--v5-os);background:rgba(241,241,236,.1);box-shadow:inset 0 0 0 1px rgba(241,241,236,.2); transition:background .35s,color .35s,transform .5s var(--v5-sortie)} .cl5__lire svg path{fill:currentColor;stroke:none} .cl5__clip:hover .cl5__lire,.cl5__clip:focus-visible .cl5__lire{background:var(--v5-lime);box-shadow:none;color:#050505;transform:scale(1.14)} .cl5__salle{width:min(1100px,94vw);max-width:none;padding:0;border:0;border-radius:22px;background:#050505;color:var(--v5-os);overflow:visible} .cl5__salle::backdrop{background:rgba(5,5,5,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .cl5__ecran{aspect-ratio:16/9;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px rgba(241,241,236,.16),0 40px 90px -30px #000} .cl5__ecran iframe{display:block;width:100%;height:100%;border:0} .cl5__salle[data-forme="haut"]{width:min(400px,92vw)} .cl5__salle[data-forme="haut"] .cl5__ecran{aspect-ratio:9/16;max-height:84vh;margin:0 auto} .cl5__fermer{position:absolute;right:0;top:-48px;width:38px;height:38px;border:0;border-radius:50%;background:var(--v5-os);color:#050505;font-size:22px;line-height:1;cursor:pointer; transition:transform .4s var(--v5-masse),background .3s} .cl5__fermer:hover{transform:rotate(90deg);background:var(--v5-lime)} @media (prefers-reduced-motion:reduce){ .cl5__clip,.cl5__img b,.cl5__lire,.cl5__fermer{transition:none} } /* ------------------------------------------------------------ la vidéo d'une publication (.fil-p__lire) Une vignette et un bouton ; le lecteur est chargé au clic, dans la salle des clips. */ .fil-p__v .fil-p__lire{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;overflow:hidden;cursor:pointer;color:#f1f1ec; background:#0c0c0c url("/static/players/roche.webp") center/420px} .fil-p__lire img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--v5-sortie)} .fil-p__lire::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,5,5,.3),rgba(5,5,5,0) 38%,rgba(5,5,5,.6))} .fil-p__lire b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(40px,7vw,96px); letter-spacing:-.045em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(241,241,236,.36);transform:rotate(-6deg);transition:transform .9s var(--v5-sortie)} body.v5 .fil-p__v .fil-p__lire .fil-p__pf{position:absolute;z-index:2;left:12px;top:11px;padding:5px 9px;border-radius:7px;color:#f1f1ec; background:rgba(6,8,7,.78)} .fil-p__v .fil-p__jouer{position:absolute;z-index:2;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;color:#050505;background:var(--v5-lime); box-shadow:0 16px 34px -12px rgba(0,0,0,.75);transition:transform .5s var(--v5-sortie)} .fil-p__jouer svg{width:26px;height:26px} .fil-p__jouer svg path{fill:currentColor;stroke:none} .fil-p__lire:hover img,.fil-p__lire:focus-visible img{transform:scale(1.045)} .fil-p__lire:hover b,.fil-p__lire:focus-visible b{transform:rotate(-6deg) scale(1.06)} .fil-p__lire:hover .fil-p__jouer,.fil-p__lire:focus-visible .fil-p__jouer{transform:scale(1.13)} .fil-p__lire:focus-visible{outline:2px solid var(--v5-lime);outline-offset:-4px} @media (prefers-reduced-motion:reduce){ .fil-p__lire img,.fil-p__lire b,.fil-p__jouer{transition:none} } /* --- LA MASCOTTE DANS UNE SCÈNE (.masc5) — « sur le site, il faut qu'il soit assez central, c'est vraiment la mascotte ». Son illustration telle quelle (un buste), posée devant le plan de film d'une page d'entrée. Le bas du buste s'arrête toujours sur un bord franc (le bas de la scène, une règle, un cadre). Chaque page règle sa place : --masc-x, --masc-b, --masc-h. ELLE SE DOSE (« il ne faut pas que la mascotte soit partout ») : l'accueil — obligatoire, dans ses deux états, « c'est le plan principal » — et la porte de la connexion, pas ailleurs. Les autres pages prennent nos autres objets : les pierres, les douilles, la balise, et le logo 2D avec un effet (.sg5). Jamais le rendu chrome du logo en grand (« il est à bannir »). */ .masc5{position:absolute;z-index:2;left:var(--masc-x,50%);bottom:var(--masc-b,0px);height:var(--masc-h,min(70vh,660px));aspect-ratio:764/941; translate:-50% 0;pointer-events:none} .masc5::before{content:"";position:absolute;left:52%;top:30%;z-index:-1;width:150%;aspect-ratio:1;translate:-50% -50%; background:radial-gradient(closest-side,rgba(137,244,33,.18),rgba(137,244,33,.05) 50%,rgba(137,244,33,0) 72%)} .masc5 img{display:block;width:100%;height:100%;max-width:none;filter:drop-shadow(0 26px 34px rgba(4,6,5,.5)); transform:translate3d(calc(var(--mx,0) * 9px),calc(var(--my,0) * 4px),0);will-change:transform} .v5js .masc5{opacity:0;translate:-50% 34px;transition:opacity 900ms var(--v5-sortie) 250ms,translate 1300ms var(--v5-sortie) 250ms} .v5js .masc5.is-la{opacity:1;translate:-50% 0} .masc5.is-la img{animation:masc5-respire 7s ease-in-out 1.6s infinite} @keyframes masc5-respire{0%,100%{translate:0 0} 50%{translate:0 -7px}} @media (prefers-reduced-motion:reduce){ .masc5.is-la img{animation:none} .v5js .masc5{translate:-50% 0;transition:opacity 500ms linear} } /* ===================================================================== LE SIGLE À EFFETS (.sg5) — notre logo en 2D, avec un effet dessus (« un effet gradient, flou, pixel, glitch, une lueur… une banque d'effets »). Le tracé de skld-mark.svg sert de masque à trois couches ; chaque effet décide de ce qu'elles portent. Taille : --sg. Couleur de base : currentColor. Gabarit : sigle('lueur') dans _v5.html. .sg5--lueur blanc, un halo lime qui respire .sg5--flou net devant, son fantôme lime, flou, qui dérive derrière .sg5--glitch des tranches qui sautent par à-coups .sg5--pixel il se résout : gros pixels → pixels fins → net .sg5--decale deux tirages décalés, lime sous blanc Retirés par le fondateur le 08/10 (« j'aime pas ») : le dégradé, le reflet d'acier, la trame de lignes, les éclats. ===================================================================== */ .sg5{--sg:120px;--sg-m:url("/static/skld-mark.svg");position:relative;display:inline-block;flex:none;width:var(--sg);aspect-ratio:1; isolation:isolate;color:#f1f2ed;pointer-events:none} .sg5 i{position:absolute;inset:0} .sg5 i::before{content:"";position:absolute;inset:0;background:var(--c,currentColor); -webkit-mask:var(--sg-m) center/contain no-repeat;mask:var(--sg-m) center/contain no-repeat} .sg5 i:nth-child(n+2){display:none} .sg5--lueur{animation:sg5-respire 4.2s ease-in-out infinite; filter:drop-shadow(0 0 calc(var(--sg) * .04) rgba(137,244,33,.85)) drop-shadow(0 0 calc(var(--sg) * .14) rgba(137,244,33,.45))} @keyframes sg5-respire{ 0%,100%{filter:drop-shadow(0 0 calc(var(--sg) * .025) rgba(137,244,33,.7)) drop-shadow(0 0 calc(var(--sg) * .09) rgba(137,244,33,.28))} 50%{filter:drop-shadow(0 0 calc(var(--sg) * .055) rgba(137,244,33,1)) drop-shadow(0 0 calc(var(--sg) * .22) rgba(137,244,33,.6))} } .sg5--flou i:nth-child(2){display:block;z-index:-1;--c:#89f421;filter:blur(calc(var(--sg) * .06));opacity:.8;animation:sg5-derive 6s ease-in-out infinite} @keyframes sg5-derive{0%,100%{transform:translate(-7%,2%) scale(1.03)} 50%{transform:translate(8%,-3%) scale(1.12)}} .sg5--glitch i:nth-child(n+2){display:block;opacity:0} .sg5--glitch i:first-child{animation:sg5-tique 3.6s steps(1) infinite} .sg5--glitch i:nth-child(2){--c:#89f421;animation:sg5-saut-a 3.6s steps(1) infinite} .sg5--glitch i:nth-child(3){mix-blend-mode:difference;animation:sg5-saut-b 3.6s steps(1) infinite} @keyframes sg5-tique{0%,57%,70%,100%{transform:none} 60%{transform:translateX(2%) skewX(-6deg)} 64%{transform:translateX(-3%) skewX(4deg)} 67%{transform:translateX(1%)}} @keyframes sg5-saut-a{ 0%,57%,70%,100%{opacity:0} 58%{opacity:1;transform:translateX(-11%);clip-path:inset(16% 0 62% 0)} 61%{opacity:1;transform:translateX(14%);clip-path:inset(6% 0 82% 0)} 64%{opacity:1;transform:translateX(-6%);clip-path:inset(42% 0 40% 0)} 67%{opacity:1;transform:translateX(9%);clip-path:inset(70% 0 12% 0)} } @keyframes sg5-saut-b{ 0%,58%,69%,100%{opacity:0} 59%{opacity:1;transform:translateX(9%);clip-path:inset(56% 0 26% 0)} 62%{opacity:1;transform:translateX(-13%);clip-path:inset(74% 0 10% 0)} 65%{opacity:1;transform:translateX(5%);clip-path:inset(28% 0 58% 0)} } .sg5--pixel i:nth-child(n+2){display:block;opacity:0;--c:#89f421} .sg5--pixel i::before{image-rendering:pixelated} .sg5--pixel i:nth-child(2)::before{-webkit-mask-image:url("/static/skld-mark-px14.png");mask-image:url("/static/skld-mark-px14.png")} .sg5--pixel i:nth-child(3)::before{-webkit-mask-image:url("/static/skld-mark-px28.png");mask-image:url("/static/skld-mark-px28.png")} .sg5--pixel i:first-child{animation:sg5-res-c 5.4s steps(1) infinite} .sg5--pixel i:nth-child(2){animation:sg5-res-a 5.4s steps(1) infinite} .sg5--pixel i:nth-child(3){animation:sg5-res-b 5.4s steps(1) infinite} @keyframes sg5-res-a{0%{opacity:1} 9%{opacity:0} 11%{opacity:1} 15%,100%{opacity:0}} @keyframes sg5-res-b{0%{opacity:0} 15%{opacity:1} 24%{opacity:0} 26%{opacity:1} 31%,100%{opacity:0}} @keyframes sg5-res-c{0%{opacity:0} 31%,100%{opacity:1}} .sg5--decale i:nth-child(2){display:block;z-index:-1;--c:#89f421;animation:sg5-tirage 5s ease-in-out infinite} @keyframes sg5-tirage{0%,100%{transform:translate(-2.5%,2.5%)} 50%{transform:translate(-6%,6%)}} /* en mode calme : chaque effet s'arrête sur son image de repos (le logo entier, net) */ @media (prefers-reduced-motion:reduce){ .sg5,.sg5 i,.sg5 i::before{animation:none!important} .sg5--decale i:nth-child(2){transform:translate(-4%,4%)} } /* skld-prochaine-v5.css */ /* SKLD — LA PROCHAINE ACTION (direction v5 « pierre »). Gabarit : templates/_prochaine.html. Feuille du paquet du site (liée une fois, partout). TROIS NIVEAUX, lisibles à un MOT et à une FORME — jamais à la couleur seule : critique « Action requise » plaque PLEINE rouge, losange ; la dalle porte un rail rouge important « Maintenant » plaque NOIRE à filet, point lime plein info « Où tu en es » pas de plaque : un anneau vide et le mot TROIS FORMES de la carte : .nba une dalle noire posée sur la pierre, une roche sur son arête .nba.nba--ligne une bande d'une ligne (l'accueil, au-dessus de l'en-tête) .nba.nba--nue sans dalle, dans un objet déjà noir (le panneau « Toi » du Switch) .nba__niv est utilisable seul (l'espace joueur l'emploie dans son en-tête clair). */ /* ------------------------------------------------------------ la plaque de niveau */ .nba__niv{display:inline-flex;align-items:center;gap:8px;flex:none;height:24px;padding:0 10px 0 8px;border-radius:8px 8px 8px 2px; font-family:var(--f-mono,"Archivo",sans-serif);font-weight:700;font-size:10px;line-height:1;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap} .nba__niv i{flex:none;display:block;position:relative} .nba__niv--critique{color:#fff;background:#e5262b;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.2)} .nba__niv--critique i{width:8px;height:8px;margin:0 2px 0 3px;border-radius:1.5px;background:#fff;transform:rotate(45deg);animation:nba-alerte 1.5s steps(2,jump-none) infinite} .nba__niv--important{color:#f1f1ec;background:#0b0b0b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)} .nba__niv--important i{width:8px;height:8px;border-radius:50%;background:var(--v5-lime,#89f421)} .nba__niv--info{height:auto;padding:0;gap:9px;border-radius:0;color:inherit;background:none} .nba__niv--info i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor} @keyframes nba-alerte{from{opacity:1}to{opacity:.35}} /* ------------------------------------------------------------ la dalle */ body.v5 .nba{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(16px,2.4vw,40px); margin:0 0 clamp(20px,2.6vw,36px);padding:clamp(22px,2.6vw,36px) clamp(20px,2.8vw,40px);border:0;border-radius:28px 28px 28px 6px;color:#f1f1ec; background:url("/static/players/roche.webp") center/520px,linear-gradient(180deg,#171717,#060606);background-blend-mode:soft-light,normal; box-shadow:inset 0 0 0 1px rgba(255,255,255,.085),inset 0 1px 0 rgba(255,255,255,.13),0 0 0 5px rgba(10,10,10,.06),0 50px 70px -50px rgba(0,0,0,.82),0 22px 40px -28px rgba(0,0,0,.42)} /* le rail du niveau critique : une forme, pas un liseré de couleur */ body.v5 .nba.critique::before{content:"";position:absolute;left:0;top:clamp(22px,2.6vw,36px);bottom:clamp(22px,2.6vw,36px);width:5px;border-radius:0 4px 4px 0;background:#e5262b} /* une roche posée sur l'arête de la dalle (relief) */ body.v5 .nba::after{content:"";position:absolute;z-index:1;right:clamp(28px,22%,300px);top:-40px;width:122px;height:88px;pointer-events:none; background:url("/static/players/rendus/roche-6.webp") center/contain no-repeat;filter:drop-shadow(0 16px 12px rgba(0,0,0,.42)); transition:transform 900ms var(--v5-sortie,cubic-bezier(.16,1,.3,1))} body.v5 .nba:hover::after{transform:translate3d(-6px,-5px,0) rotate(-3deg)} body.v5 .nba .nba__txt{min-width:0} body.v5 .nba .k{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;color:rgba(241,241,236,.72)} body.v5 .nba .nba__ou{font-family:var(--f-mono,"Archivo",sans-serif);font-weight:600;font-size:10.5px;line-height:1.3;letter-spacing:.07em;text-transform:uppercase;color:rgba(241,241,236,.72)} body.v5 .nba .t{max-width:24ch;font-family:var(--f-mega,"Archivo",sans-serif);font-weight:900;font-stretch:125%;font-size:clamp(23px,3.1vw,46px);line-height:.93;letter-spacing:-.045em;text-transform:uppercase;text-wrap:balance;color:#f1f1ec} body.v5 .nba .d{margin-top:12px;max-width:62ch;font-family:var(--f-ui,system-ui,sans-serif);font-size:15px;line-height:1.55;color:rgba(241,241,236,.74)} body.v5 .nba .go{margin:0;position:relative;z-index:2} body.v5 .nba .go .btn{white-space:nowrap} /* ------------------------------------------------------------ la bande d'une ligne (accueil) */ body.v5 .nba.nba--ligne{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 18px;margin:0 0 18px;padding:9px 9px 9px 14px;border-radius:19px 19px 19px 5px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.085),inset 0 1px 0 rgba(255,255,255,.13),0 26px 34px -24px rgba(0,0,0,.7)} body.v5 .nba.nba--ligne::before,body.v5 .nba.nba--ligne::after{content:none} body.v5 .nba.nba--ligne .nba__txt{display:flex;align-items:center;gap:8px 16px;min-width:0} body.v5 .nba.nba--ligne .k{margin:0;flex:none} body.v5 .nba.nba--ligne .nba__ou{display:none} body.v5 .nba.nba--ligne .t{flex:none;max-width:none;font-family:var(--f-display,"Archivo",sans-serif);font-weight:740;font-stretch:normal;font-size:15.5px;line-height:1.1;letter-spacing:-.005em;text-wrap:nowrap} body.v5 .nba.nba--ligne .d{flex:1 1 0;min-width:0;margin:0;max-width:none;font-size:13.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(241,241,236,.66)} body.v5 .nba.nba--ligne .go .btn{min-height:42px;padding:0 6px 0 16px;font-size:13.5px;border-radius:13px} body.v5 .nba.nba--ligne .go .btn .btn-ico{width:30px;height:30px;border-radius:10px} /* ------------------------------------------------------------ sans dalle, dans un objet déjà noir */ body.v5 .nba.nba--nue,body.v5 .sw5-toi__prochaine .nba{align-items:center;margin:0;padding:6px 0 20px;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid rgba(232,233,228,.14)} body.v5 .nba.nba--nue::before,body.v5 .nba.nba--nue::after,body.v5 .sw5-toi__prochaine .nba::before,body.v5 .sw5-toi__prochaine .nba::after{content:none} body.v5 .nba.nba--nue .t,body.v5 .sw5-toi__prochaine .nba .t{max-width:34ch;font-family:var(--f-display,"Archivo",sans-serif);font-weight:740;font-stretch:normal;font-size:clamp(19px,2vw,28px);line-height:1.02;letter-spacing:-.012em} body.v5 .nba.nba--nue .d,body.v5 .sw5-toi__prochaine .nba .d{margin-top:8px;font-size:14.5px} body.v5 .nba.nba--nue .k,body.v5 .sw5-toi__prochaine .nba .k{margin-bottom:12px} /* ------------------------------------------------------------ téléphone */ @media (max-width:700px){ body.v5 .nba{grid-template-columns:minmax(0,1fr);align-items:stretch;padding:22px 18px 18px;border-radius:24px 24px 24px 6px} body.v5 .nba::after{right:16px;top:-30px;width:88px;height:64px} body.v5 .nba.critique::before{top:22px;bottom:auto;height:54px} body.v5 .nba .t{font-size:clamp(24px,7.6vw,34px)} body.v5 .nba .go .btn{width:100%;justify-content:space-between} body.v5 .nba.nba--ligne{grid-template-columns:minmax(0,1fr);padding:14px 12px 12px 14px;gap:12px} body.v5 .nba.nba--ligne .nba__txt{flex-wrap:wrap} body.v5 .nba.nba--ligne .t{flex:1 1 100%;font-size:16px;text-wrap:balance;white-space:normal} body.v5 .nba.nba--ligne .d{flex:1 1 100%;white-space:normal;font-size:13.5px;line-height:1.4} body.v5 .nba.nba--ligne .go .btn{min-height:46px;padding:0 8px 0 16px} body.v5 .nba.nba--nue,body.v5 .sw5-toi__prochaine .nba{padding:4px 0 18px} } @media (prefers-reduced-motion:reduce){ .nba__niv--critique i{animation:none} body.v5 .nba::after{transition:none} body.v5 .nba:hover::after{transform:none} } /* ------------------------------------------------------------ l'accueil : la bande sous l'île L'en-tête de l'accueil remonte sous l'île (marge négative) : une bande posée avant lui était recouverte. Elle passe donc AU-DESSUS, à cheval sur le bord de la plaque, et l'en-tête ne descend que de la hauteur qu'il faut pour que ses relevés restent lisibles. Sur téléphone, où elle prend trois lignes, elle reste dans le flux et l'en-tête suit. */ .v5-taligne{position:relative;z-index:6} @media (min-width:901px){ .v5-taligne{height:0} body.v5 .v5-taligne .nba.nba--ligne{margin:-34px 0 0} body.v5 .v5-taligne + .h5{margin-top:-16px} } @media (max-width:900px){ body.v5 .v5-taligne .nba.nba--ligne{margin:-30px 0 14px} body.v5 .v5-taligne + .h5{margin-top:0} }