/* seasons.css : thèmes saisonniers (html[data-season="halloween" | "noel"]). Chargé seulement pendant une saison (inc/seasons.php). Le décor animé vient de seasons.js. */ /* ══ Palettes ════════════════════════════════════════════════════════ */ /* Halloween sombre : nuit violacée, accent citrouille */ html[data-season="halloween"]:not([data-theme="light"]) { --bg:#0d0a10; --card:#140f18; --ph:#1b1520; --ink:#f4eee4; --lime:#ff7b1c; --bg-rgb:13,10,16; --ink-rgb:244,238,228; --lime-rgb:255,123,28; --blend-ink:#f4eee4; --season-2:#a77bff; --season-2-rgb:167,123,255; } /* Halloween clair : parchemin, encre aubergine, orange brûlé (contraste 5:1) */ html[data-season="halloween"][data-theme="light"] { --bg:#f3ece1; --card:#fffaf1; --ph:#e9e0d0; --ink:#1b1320; --lime:#ad4500; --bg-rgb:243,236,225; --ink-rgb:27,19,32; --lime-rgb:173,69,0; --season-2:#6b3fc4; --season-2-rgb:107,63,196; } /* Noël sombre : vert sapin profond, accent rouge */ html[data-season="noel"]:not([data-theme="light"]) { --bg:#07110d; --card:#0c1712; --ph:#111f19; --ink:#f3f1ea; --lime:#ff4a5a; --bg-rgb:7,17,13; --ink-rgb:243,241,234; --lime-rgb:255,74,90; --blend-ink:#f3f1ea; --season-2:#f2c14e; --season-2-rgb:242,193,78; } /* Noël clair : neige, encre sapin, rouge houx */ html[data-season="noel"][data-theme="light"] { --bg:#f5f2ec; --card:#ffffff; --ph:#e8e4dc; --ink:#10201a; --lime:#b0122a; --bg-rgb:245,242,236; --ink-rgb:16,32,26; --lime-rgb:176,18,42; --season-2:#9a6b00; --season-2-rgb:154,107,0; } /* Palettes des autres fêtes : [clé, sombre(bg card ph ink accent second), clair(...)] générées ci-dessous */ html[data-season="nouvel-an"]:not([data-theme="light"]) { --bg:#0a0a12; --card:#10101b; --ph:#161624; --ink:#f5f1e6; --lime:#f2c14e; --bg-rgb:10,10,18; --ink-rgb:245,241,230; --lime-rgb:242,193,78; --blend-ink:#f5f1e6; --season-2:#d9dde8; --season-2-rgb:217,221,232; } html[data-season="nouvel-an"][data-theme="light"] { --bg:#f6f3ea; --card:#fffdf7; --ph:#e9e4d6; --ink:#16141c; --lime:#8a6400; --bg-rgb:246,243,234; --ink-rgb:22,20,28; --lime-rgb:138,100,0; --season-2:#55607a; --season-2-rgb:85,96,122; } html[data-season="st-patrick"]:not([data-theme="light"]) { --bg:#06120b; --card:#0b1a11; --ph:#102318; --ink:#eef4ec; --lime:#3ddc84; --bg-rgb:6,18,11; --ink-rgb:238,244,236; --lime-rgb:61,220,132; --blend-ink:#eef4ec; --season-2:#f2c14e; --season-2-rgb:242,193,78; } html[data-season="st-patrick"][data-theme="light"] { --bg:#f1f5ee; --card:#ffffff; --ph:#e1eadb; --ink:#0f2216; --lime:#13703a; --bg-rgb:241,245,238; --ink-rgb:15,34,22; --lime-rgb:19,112,58; --season-2:#8f6a00; --season-2-rgb:143,106,0; } html[data-season="paques"]:not([data-theme="light"]) { --bg:#100d15; --card:#17131d; --ph:#1e1926; --ink:#f7f1ea; --lime:#ff9fcb; --bg-rgb:16,13,21; --ink-rgb:247,241,234; --lime-rgb:255,159,203; --blend-ink:#f7f1ea; --season-2:#8ee6c2; --season-2-rgb:142,230,194; } html[data-season="paques"][data-theme="light"] { --bg:#fbf6ee; --card:#ffffff; --ph:#efe7da; --ink:#2a1f2e; --lime:#b02a72; --bg-rgb:251,246,238; --ink-rgb:42,31,46; --lime-rgb:176,42,114; --season-2:#23805a; --season-2-rgb:35,128,90; } html[data-season="poisson"]:not([data-theme="light"]) { --bg:#07121a; --card:#0c1922; --ph:#11212c; --ink:#eef6f8; --lime:#4fd1ff; --bg-rgb:7,18,26; --ink-rgb:238,246,248; --lime-rgb:79,209,255; --blend-ink:#eef6f8; --season-2:#ffb347; --season-2-rgb:255,179,71; } html[data-season="poisson"][data-theme="light"] { --bg:#f0f5f7; --card:#ffffff; --ph:#e0eaee; --ink:#0d2230; --lime:#006b94; --bg-rgb:240,245,247; --ink-rgb:13,34,48; --lime-rgb:0,107,148; --season-2:#b35c00; --season-2-rgb:179,92,0; } html[data-season="musique"]:not([data-theme="light"]) { --bg:#0c0a14; --card:#13101d; --ph:#1a1626; --ink:#f4f1fa; --lime:#ff5cc8; --bg-rgb:12,10,20; --ink-rgb:244,241,250; --lime-rgb:255,92,200; --blend-ink:#f4f1fa; --season-2:#5ce1ff; --season-2-rgb:92,225,255; } html[data-season="musique"][data-theme="light"] { --bg:#f6f3f8; --card:#ffffff; --ph:#e9e3ef; --ink:#1c1426; --lime:#a3127f; --bg-rgb:246,243,248; --ink-rgb:28,20,38; --lime-rgb:163,18,127; --season-2:#0a6f8a; --season-2-rgb:10,111,138; } html[data-season="juillet"]:not([data-theme="light"]) { --bg:#070b16; --card:#0c1220; --ph:#111a2c; --ink:#f4f3ee; --lime:#ff4a5a; --bg-rgb:7,11,22; --ink-rgb:244,243,238; --lime-rgb:255,74,90; --blend-ink:#f4f3ee; --season-2:#5b8bff; --season-2-rgb:91,139,255; } html[data-season="juillet"][data-theme="light"] { --bg:#f4f4f1; --card:#ffffff; --ph:#e5e6e2; --ink:#0e1630; --lime:#1f3fa8; --bg-rgb:244,244,241; --ink-rgb:14,22,48; --lime-rgb:31,63,168; --season-2:#c8102e; --season-2-rgb:200,16,46; } html[data-season="black-friday"]:not([data-theme="light"]) { --bg:#050505; --card:#0d0d0d; --ph:#151515; --ink:#f5f5f0; --lime:#ffd400; --bg-rgb:5,5,5; --ink-rgb:245,245,240; --lime-rgb:255,212,0; --blend-ink:#f5f5f0; --season-2:#ffffff; --season-2-rgb:255,255,255; } html[data-season="black-friday"][data-theme="light"] { --bg:#f4f3ee; --card:#ffffff; --ph:#e6e4dc; --ink:#0b0b0b; --lime:#8f6f00; --bg-rgb:244,243,238; --ink-rgb:11,11,11; --lime-rgb:143,111,0; --season-2:#111111; --season-2-rgb:17,17,17; } html[data-season="anniversaire"]:not([data-theme="light"]) { --bg:#0b0d16; --card:#111422; --ph:#171b2c; --ink:#f3f4fa; --lime:#2ee6c5; --bg-rgb:11,13,22; --ink-rgb:243,244,250; --lime-rgb:46,230,197; --blend-ink:#f3f4fa; --season-2:#ffcf4a; --season-2-rgb:255,207,74; } html[data-season="anniversaire"][data-theme="light"] { --bg:#f4f6f8; --card:#ffffff; --ph:#e3e8ec; --ink:#121827; --lime:#00806b; --bg-rgb:244,246,248; --ink-rgb:18,24,39; --lime-rgb:0,128,107; --season-2:#9a6b00; --season-2-rgb:154,107,0; } html[data-season="algerie"]:not([data-theme="light"]) { --bg:#05100a; --card:#0a1810; --ph:#0f2016; --ink:#f3f5f1; --lime:#2fbf71; --bg-rgb:5,16,10; --ink-rgb:243,245,241; --lime-rgb:47,191,113; --blend-ink:#f3f5f1; --season-2:#e63946; --season-2-rgb:230,57,70; } html[data-season="algerie"][data-theme="light"] { --bg:#f3f6f2; --card:#ffffff; --ph:#e2e9e1; --ink:#0c1f14; --lime:#006233; --bg-rgb:243,246,242; --ink-rgb:12,31,20; --lime-rgb:0,98,51; --season-2:#c8102e; --season-2-rgb:200,16,46; } html[data-season="japon"]:not([data-theme="light"]) { --bg:#0e0a0b; --card:#161012; --ph:#1d1618; --ink:#f5efe8; --lime:#ff5a3c; --bg-rgb:14,10,11; --ink-rgb:245,239,232; --lime-rgb:255,90,60; --blend-ink:#f5efe8; --season-2:#ffb7c5; --season-2-rgb:255,183,197; } html[data-season="japon"][data-theme="light"] { --bg:#f5f1e8; --card:#fffdf8; --ph:#ebe4d6; --ink:#1b1416; --lime:#b8321d; --bg-rgb:245,241,232; --ink-rgb:27,20,22; --lime-rgb:184,50,29; --season-2:#c4607a; --season-2-rgb:196,96,122; } html[data-season="hack"]:not([data-theme="light"]) { --bg:#020604; --card:#06100a; --ph:#0a1810; --ink:#d8ffe4; --lime:#00ff66; --bg-rgb:2,6,4; --ink-rgb:216,255,228; --lime-rgb:0,255,102; --blend-ink:#d8ffe4; --season-2:#00e5ff; --season-2-rgb:0,229,255; } html[data-season="hack"][data-theme="light"] { --bg:#eef3ef; --card:#ffffff; --ph:#dde8e0; --ink:#06180c; --lime:#007a33; --bg-rgb:238,243,239; --ink-rgb:6,24,12; --lime-rgb:0,122,51; --season-2:#00788a; --season-2-rgb:0,120,138; } /* Terminal et blocs de code (toujours sombres) : l'accent suit la saison */ html[data-season="halloween"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#ff7b1c; --lime-rgb:255,123,28; } html[data-season="noel"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#ff4a5a; --lime-rgb:255,74,90; } html[data-season="nouvel-an"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#f2c14e; --lime-rgb:242,193,78; } html[data-season="st-patrick"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#3ddc84; --lime-rgb:61,220,132; } html[data-season="paques"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#ff9fcb; --lime-rgb:255,159,203; } html[data-season="poisson"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#4fd1ff; --lime-rgb:79,209,255; } html[data-season="musique"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#ff5cc8; --lime-rgb:255,92,200; } html[data-season="juillet"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#ff4a5a; --lime-rgb:255,74,90; } html[data-season="anniversaire"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#2ee6c5; --lime-rgb:46,230,197; } html[data-season="algerie"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#2fbf71; --lime-rgb:47,191,113; } html[data-season="japon"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#ff5a3c; --lime-rgb:255,90,60; } html[data-season="hack"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#00ff66; --lime-rgb:0,255,102; } html[data-season="black-friday"] :is(.term, .prose pre, .prose :not(pre) > code) { --lime:#ffd400; --lime-rgb:255,212,0; } /* ══ Bouton de la barre (citrouille / flocon) ═══════════════════════ */ .season-toggle { position: relative; width: 36px; height: 36px; flex: none; padding: 0; cursor: pointer; border: 1px solid rgba(var(--lime-rgb), .55); border-radius: 50%; background: rgba(var(--lime-rgb), .08); color: var(--lime); transition: border-color .25s, background .25s, color .25s, transform .4s cubic-bezier(.2,.8,.2,1); } .season-toggle:hover { transform: rotate(-12deg) scale(1.06); background: rgba(var(--lime-rgb), .16); } .season-toggle svg { position: absolute; inset: 0; margin: auto; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .season-toggle .st-face { fill: currentColor; stroke: none; } html[data-season-off] .season-toggle { color: var(--mut50); border-color: rgba(var(--ink-rgb), .25); background: transparent; } html[data-season-off] .season-toggle::after { content: ''; position: absolute; left: 7px; right: 7px; top: 50%; height: 1.6px; background: currentColor; transform: rotate(-45deg); } html[data-season="halloween"] .season-toggle { animation: st-flicker 4s infinite; } @keyframes st-flicker { 0%,100% { box-shadow: 0 0 0 rgba(var(--lime-rgb),0); } 48% { box-shadow: 0 0 14px rgba(var(--lime-rgb),.45); } 52% { box-shadow: 0 0 6px rgba(var(--lime-rgb),.2); } } /* ══ Calques communs ════════════════════════════════════════════════ */ .season-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 45; pointer-events: none; } html:not([data-season]) .season-deco { display: none !important; } /* Chapeau posé sur le logo YB©2026 */ .site-nav__logo { position: relative; } .season-hat { position: absolute; left: -9px; top: -19px; width: 30px; height: 26px; pointer-events: none; transform: rotate(-14deg); transform-origin: 50% 100%; } .season-hat svg { width: 100%; height: 100%; overflow: visible; } .site-nav__logo:hover .season-hat { animation: hat-tip .7s cubic-bezier(.2,.8,.2,1); } @keyframes hat-tip { 40% { transform: rotate(-30deg) translateY(-6px); } } /* ══ Halloween ══════════════════════════════════════════════════════ */ /* Brume au ras du sol */ .season-fog { position: fixed; left: 0; right: 0; bottom: 0; height: 34vh; z-index: 44; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent); mask-image: linear-gradient(to top, #000 10%, transparent); } .season-fog i { position: absolute; bottom: -12vh; left: -50%; width: 200%; height: 44vh; opacity: .16; background: radial-gradient(closest-side, rgba(var(--ink-rgb), .9), transparent) 0 60% / 34% 70% repeat-x, radial-gradient(closest-side, rgba(var(--season-2-rgb), .8), transparent) 17% 100% / 26% 60% repeat-x; filter: blur(18px); animation: fog-drift 46s linear infinite; } .season-fog i + i { opacity: .1; bottom: -18vh; animation-duration: 70s; animation-direction: reverse; } html[data-theme="light"] .season-fog i { opacity: .05; } html[data-theme="light"] .season-fog i + i { opacity: .035; } @keyframes fog-drift { to { transform: translateX(25%); } } /* Araignée suspendue : descend avec le scroll, remonte quand on l'approche */ .season-spider { position: fixed; top: 0; right: 13vw; z-index: 46; width: 30px; pointer-events: none; transform: translateY(calc(var(--drop, 90px) - 100%)); transition: transform 1.1s cubic-bezier(.3,1.5,.5,1); } .season-spider.is-fleeing { transition-duration: .35s; transition-timing-function: cubic-bezier(.5,0,.8,.4); } .season-spider__thread { display: block; width: 1px; height: 100vh; margin: 0 auto; background: linear-gradient(rgba(var(--ink-rgb), 0), rgba(var(--ink-rgb), .45)); } .season-spider svg { display: block; width: 30px; height: 30px; margin-top: -2px; pointer-events: auto; cursor: pointer; animation: spider-sway 3.2s ease-in-out infinite; transform-origin: 50% -40px; } @keyframes spider-sway { 50% { transform: rotate(7deg); } } @media (max-width: 720px) { .season-spider { right: 22vw; } } /* Toile dans le coin du pied de page */ .season-web { position: absolute; left: 0; top: 0; width: 150px; height: 150px; pointer-events: none; opacity: .35; } .season-web--r { left: auto; right: 0; transform: scaleX(-1); width: 110px; height: 110px; } /* ══ Noël ═══════════════════════════════════════════════════════════ */ /* Guirlande lumineuse sous la barre de navigation */ .season-lights { position: absolute; left: 0; right: 0; top: 100%; height: 34px; pointer-events: none; } .season-lights svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .season-lights path { fill: none; stroke: rgba(var(--ink-rgb), .35); stroke-width: 1.2; } .season-bulb { position: absolute; width: 8px; height: 12px; margin: -1px 0 0 -4px; border-radius: 45% 45% 50% 50% / 35% 35% 65% 65%; background: var(--c); box-shadow: 0 0 12px 2px var(--c); transform: rotate(var(--r, 0deg)); transform-origin: 50% 0; animation: bulb-blink 2.4s infinite; animation-delay: var(--d, 0s); } .season-bulb::before { content: ''; position: absolute; left: 2px; top: -3px; width: 4px; height: 4px; border-radius: 1px; background: rgba(var(--ink-rgb), .55); } @keyframes bulb-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; box-shadow: 0 0 2px 0 var(--c); } } /* Neige accumulée sur le pied de page (mode sombre seulement : invisible sur fond clair) */ html[data-season="noel"]:not([data-theme="light"]) .site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 12px; pointer-events: none; background: radial-gradient(14px 9px at 14px 100%, #f3f1ea 98%, transparent) 0 0 / 28px 12px repeat-x, radial-gradient(22px 7px at 40px 100%, #f3f1ea 98%, transparent) 0 0 / 73px 12px repeat-x; opacity: .9; filter: drop-shadow(0 -2px 6px rgba(255,255,255,.15)); } /* ══ Autres fêtes ═══════════════════════════════════════════════════ */ /* Bandeau discret en bas d'écran (compte à rebours du Nouvel An, chasse aux œufs) */ .season-pill { position: fixed; left: 50%; bottom: 22px; z-index: 47; transform: translateX(-50%); font: 700 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--bg); background: var(--lime); padding: 8px 14px; border-radius: 99px; box-shadow: 0 8px 30px rgba(var(--lime-rgb), .35); transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s; } .season-pill.is-hidden { transform: translate(-50%, 140%); opacity: 0; } .season-pill b { font-variant-numeric: tabular-nums; } /* Pâques : œufs cachés dans les pages */ .season-egg { position: absolute; z-index: 30; width: 26px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(var(--r, 0deg)); transition: transform .3s cubic-bezier(.3,1.6,.5,1), opacity .4s; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); } .season-egg:hover { transform: rotate(var(--r, 0deg)) scale(1.25); } .season-egg svg { width: 100%; height: 100%; display: block; } .season-egg.is-found { transform: translateY(-60px) scale(.2) rotate(180deg); opacity: 0; pointer-events: none; } /* Poisson d'avril : poisson en papier collé au curseur et sur le premier titre */ .season-fish { position: fixed; left: 0; top: 0; z-index: 9998; width: 54px; pointer-events: none; transform-origin: 0 50%; } .season-fish--tape { position: absolute; z-index: 6; left: auto; top: auto; width: 70px; pointer-events: auto; cursor: pointer; transition: transform .5s cubic-bezier(.3,1.6,.5,1); } .season-fish--tape:hover { transform: rotate(-24deg) scale(1.1) !important; } .season-fish svg { width: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); } /* Fête de la musique : égaliseur au ras du bas d'écran */ .season-eq { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; height: 64px; display: flex; align-items: flex-end; gap: 3px; padding: 0 3px; pointer-events: none; opacity: .32; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); } .season-eq i { flex: 1; height: 100%; background: linear-gradient(to top, var(--lime), var(--season-2)); transform-origin: bottom; transform: scaleY(.1); border-radius: 2px 2px 0 0; } /* Black Friday : ruban de chantier en travers du coin */ .season-tape { position: fixed; z-index: 46; right: -120px; bottom: 70px; width: 520px; transform: rotate(-32deg); pointer-events: none; overflow: hidden; background: repeating-linear-gradient(-45deg, #ffd400 0 18px, #0b0b0b 18px 36px); padding: 6px 0; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .season-tape span { display: flex; width: max-content; font: 800 13px var(--mono); letter-spacing: .14em; color: #0b0b0b; background: #ffd400; padding: 5px 0; animation: tape-run 18s linear infinite; } .season-tape span em { font-style: normal; padding: 0 18px; } @keyframes tape-run { to { transform: translateX(-50%); } } @media (max-width: 720px) { .season-tape { width: 380px; right: -110px; bottom: 50px; } .season-tape span { font-size: 11px; } } /* Anniversaire : flamme de la bougie du logo */ .season-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flame 0.9s ease-in-out infinite alternate; } @keyframes flame { from { transform: scale(1, 1) rotate(-4deg); } to { transform: scale(.85, 1.15) rotate(4deg); } } /* Japon : frise de vagues seigaiha au ras du bas d'écran */ .season-waves { position:fixed; left:0; right:0; bottom:0; height:70px; z-index:44; pointer-events:none; opacity:.16; -webkit-mask-image:linear-gradient(to top, #000 20%, transparent); mask-image:linear-gradient(to top, #000 20%, transparent); background: radial-gradient(circle at 50% 100%, transparent 6px, var(--lime) 7px 8px, transparent 9px 12px, var(--lime) 13px 14px, transparent 15px 18px, var(--lime) 19px 20px, transparent 21px) 0 0 / 40px 20px repeat, radial-gradient(circle at 50% 100%, transparent 6px, var(--lime) 7px 8px, transparent 9px 12px, var(--lime) 13px 14px, transparent 15px 18px, var(--lime) 19px 20px, transparent 21px) 20px 10px / 40px 20px repeat; animation: waves-drift 18s linear infinite; } html[data-theme="light"] .season-waves { opacity:.12; } @keyframes waves-drift { to { background-position: 40px 0, 60px 10px; } } /* Hack : lignes de balayage d'écran CRT, curseur de terminal après le logo, glitch au clic */ .season-scan { position:fixed; inset:0; z-index:46; pointer-events:none; opacity:.35; background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px); } .season-scan::after { content:''; position:absolute; left:0; right:0; height:22vh; top:-22vh; background:linear-gradient(to bottom, transparent, rgba(var(--lime-rgb),.05), transparent); animation:scan-sweep 7s linear infinite; } html[data-theme="light"] .season-scan { opacity:.18; } @keyframes scan-sweep { to { transform:translateY(130vh); } } .season-caret { display:inline-block; width:.55em; height:1em; margin-left:3px; vertical-align:-2px; background:var(--lime); animation:caret-blink 1s steps(1) infinite; } @keyframes caret-blink { 50% { opacity:0; } } html.season-glitch #yb-root, html.season-glitch .site-nav { animation:glitch-shift .28s steps(2) 1; } @keyframes glitch-shift { 0% { transform:translate(0); filter:none; } 20% { transform:translate(-6px, 2px); filter:hue-rotate(90deg) saturate(2); clip-path:inset(12% 0 58% 0); } 40% { transform:translate(5px, -2px); filter:hue-rotate(-60deg); clip-path:inset(46% 0 22% 0); } 60% { transform:translate(-3px, 1px); clip-path:inset(70% 0 6% 0); } 100% { transform:translate(0); filter:none; clip-path:none; } } html[data-season="hack"] .hero__title .line-mask > span { text-shadow:0 0 18px rgba(var(--lime-rgb),.25); } /* Hack : intrusion au premier passage de la session (fenêtre de terminal centrée, site flouté derrière) */ .season-hack-intro { position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:20px; cursor:pointer; background:rgba(2,6,4,.55); backdrop-filter:blur(10px) saturate(.7); -webkit-backdrop-filter:blur(10px) saturate(.7); animation:intro-in .45s ease both; transition:opacity .7s ease, backdrop-filter .7s ease, -webkit-backdrop-filter .7s ease; } .season-hack-intro.is-out { opacity:0; backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); pointer-events:none; } @keyframes intro-in { from { opacity:0; backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); } } .season-term { position:relative; width:min(640px, 100%); background:#050b07; border:1px solid rgba(0,255,102,.28); border-radius:12px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4), 0 0 60px rgba(0,255,102,.12); animation:term-pop .5s .1s cubic-bezier(.2,.9,.25,1.2) both; transition:transform .6s cubic-bezier(.7,0,.3,1); } .season-hack-intro.is-out .season-term { transform:scale(.92) translateY(10px); } @keyframes term-pop { from { opacity:0; transform:scale(.9) translateY(14px); } } .season-term__bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:#0b1610; border-bottom:1px solid rgba(0,255,102,.14); } .season-term__bar i { width:11px; height:11px; border-radius:50%; background:#ff5f57; } .season-term__bar i:nth-child(2) { background:#febc2e; } .season-term__bar i:nth-child(3) { background:#28c840; } .season-term__bar span { flex:1; text-align:center; margin-right:40px; font:500 12px 'JetBrains Mono', monospace; color:rgba(216,255,228,.55); } .season-term__body { margin:0; padding:18px 20px 22px; min-height:190px; font:500 14px/1.65 'JetBrains Mono', monospace; color:#d8ffe4; white-space:pre-wrap; word-break:break-word; text-shadow:0 0 6px rgba(0,255,102,.25); background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.18) 2px 3px); } .season-term__body .t-prompt { color:#00ff66; font-weight:700; } .season-term__body .t-path { color:#00e5ff; } .season-term__body .t-dim { color:rgba(216,255,228,.5); } .season-term__body .t-ok { color:#00ff66; } .season-term__body .t-bar { color:#00ff66; } .season-term__body .season-caret { background:#00ff66; } .season-term__granted { position:absolute; inset:46px 0 0; display:grid; place-items:center; font:800 clamp(26px, 6vw, 46px) 'JetBrains Mono', monospace; letter-spacing:.12em; color:#00ff66; text-shadow:0 0 18px rgba(0,255,102,.75), 0 0 46px rgba(0,255,102,.4); background:rgba(5,11,7,.88); opacity:0; transform:scale(1.25); transition:opacity .3s, transform .45s cubic-bezier(.2,.9,.25,1.2); pointer-events:none; } .season-hack-intro.is-granted .season-term__granted { opacity:1; transform:none; animation:granted-flicker .9s steps(1) 1; } .season-hack-intro.is-granted .season-term { border-color:rgba(0,255,102,.7); box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 80px rgba(0,255,102,.35); } @keyframes granted-flicker { 10% { opacity:.3; } 20% { opacity:1; } 30% { opacity:.6; } 40%, 100% { opacity:1; } } @media (max-width:620px) { .season-term__body { font-size:12px; padding:14px 14px 18px; min-height:170px; } } /* ══ Roue de sélection ═══════════════════════════════════════════════ */ .season-toggle--latent { display: none; } html[data-sx] .season-toggle--latent { display: block; } .season-wheel { --rad: min(250px, 36vw, 36vh); --it: 70px; position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(var(--bg-rgb), 0); backdrop-filter: blur(0); transition: background .35s, backdrop-filter .35s; } .season-wheel.is-open { background: rgba(var(--bg-rgb), .72); backdrop-filter: blur(10px); } .season-wheel__ring { position: relative; width: calc(var(--rad) * 2 + var(--it)); aspect-ratio: 1; border-radius: 50%; } .season-wheel__ring::before { content: ''; position: absolute; inset: calc(var(--it) / 2); border-radius: 50%; border: 1px dashed rgba(var(--ink-rgb), .2); transform: scale(.6); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s; } .season-wheel.is-open .season-wheel__ring::before { transform: none; opacity: 1; } .season-wheel__item { position: absolute; left: 50%; top: 50%; width: var(--it); height: var(--it); margin: calc(var(--it) / -2) 0 0 calc(var(--it) / -2); display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: 50%; color: var(--ink); border: 1px solid rgba(var(--ink-rgb), .2); background: var(--card); transform: translate(0, 0) scale(.3); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 25ms), opacity .3s calc(var(--i) * 25ms), border-color .2s, background .2s, color .2s, box-shadow .2s; } .season-wheel.is-open .season-wheel__item { transform: translate(calc(var(--x) * var(--rad)), calc(var(--y) * var(--rad))); opacity: 1; } .season-wheel.is-open .season-wheel__item:is(:hover, :focus-visible) { transform: translate(calc(var(--x) * var(--rad)), calc(var(--y) * var(--rad))) scale(1.16); border-color: var(--lime); color: var(--lime); box-shadow: 0 0 0 2px var(--lime), 0 0 30px rgba(var(--lime-rgb), .35); outline: none; transition-delay: 0s; } .season-wheel__item.is-current { border-color: var(--lime); background: rgba(var(--lime-rgb), .14); color: var(--lime); } .season-wheel__item svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .season-wheel__item svg .st-face { fill: currentColor; stroke: none; } .season-wheel__item em { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 9.5px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--mut70); } .season-wheel__hub { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: calc(var(--rad) * 1.2); pointer-events: none; opacity: 0; transform: scale(.8); transition: opacity .35s .1s, transform .45s .1s cubic-bezier(.2,.8,.2,1); } .season-wheel.is-open .season-wheel__hub { opacity: 1; transform: none; } .season-wheel__hub small { font: 600 10px var(--mono); letter-spacing: .25em; color: var(--lime); } .season-wheel__hub strong { font: 800 clamp(20px, 3.4vw, 34px)/1.05 var(--sans); letter-spacing: -.01em; color: var(--ink); } .season-wheel__hub span { font: 500 11.5px var(--mono); color: var(--mut60); } @media (max-width: 720px) { .season-wheel { --rad: min(42vw, 170px); --it: 54px; } .season-wheel__item svg { width: 22px; height: 22px; } .season-wheel__item em { display: none; } } /* ══ Accessibilité ══════════════════════════════════════════════════ */ /* Pas de coupure « prefers-reduced-motion » : le portfolio reste animé (choix de l'utilisateur), seul ?ybstatic=1 fige tout. */ @media print { .season-deco, .season-fx { display: none !important; } } /* Black Friday : le label du curseur devient une étiquette de prix (pointe + trou) */ html[data-season="black-friday"] .yb-cursor__label { color: #0b0b0b; font-weight: 800; padding: 5px 10px 5px 19px; border-radius: 0 3px 3px 0; background: radial-gradient(circle at 10px 50%, transparent 2.3px, #ffd400 2.8px); clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); rotate: -6deg; }