Mode clair / sombre et thèmes de saison
This commit is contained in:
parent
da05adede1
commit
17cf2c8380
19 changed files with 3563 additions and 0 deletions
132
assets/css/effects.css
Normal file
132
assets/css/effects.css
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
/* effects.css : thème yb2026 (base : handoff/theme-assets/effects.css, design v3) */
|
||||||
|
:root {
|
||||||
|
--bg:#0a0a0a; --card:#101010; --ph:#141414; --ink:#f5f5f0; --lime:#d3fd50;
|
||||||
|
--bg-rgb:10,10,10; --ink-rgb:245,245,240; --lime-rgb:211,253,80;
|
||||||
|
--blend-ink:#f5f5f0; /* titre en mix-blend-mode: difference */
|
||||||
|
--gut:44px; color-scheme:dark;
|
||||||
|
}
|
||||||
|
/* Mode clair : papier, encre presque noire, accent chartreuse profond (contraste 5:1) */
|
||||||
|
html[data-theme="light"] {
|
||||||
|
--bg:#f3f2ed; --card:#ffffff; --ph:#e7e6e0; --ink:#111111; --lime:#4a7300;
|
||||||
|
--bg-rgb:243,242,237; --ink-rgb:17,17,17; --lime-rgb:74,115,0;
|
||||||
|
--blend-ink:#ffffff; --cursor-blend:normal; color-scheme:light;
|
||||||
|
}
|
||||||
|
@media (max-width:1024px) { :root { --gut:30px; } }
|
||||||
|
@media (max-width:720px) { :root { --gut:20px; } }
|
||||||
|
::selection { background:var(--lime); color:var(--bg); }
|
||||||
|
.has-custom-cursor, .has-custom-cursor * { cursor:none !important; }
|
||||||
|
body.no-scroll { overflow:hidden; }
|
||||||
|
html { background-color:var(--bg); }
|
||||||
|
|
||||||
|
/* Grain filmique */
|
||||||
|
body::after { content:''; position:fixed; inset:0; z-index:96; pointer-events:none; opacity:.05;
|
||||||
|
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
|
||||||
|
|
||||||
|
/* Barre de progression + nav */
|
||||||
|
/* Barre dessinée en ombre interne (pas en fond) : Safari iOS teinte ses barres avec le fond des éléments fixés en haut */
|
||||||
|
.scroll-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:60; box-shadow:inset 0 2px 0 var(--lime); transform:scaleX(0); transform-origin:left; pointer-events:none; }
|
||||||
|
.site-nav { position:fixed; top:0; left:0; right:0; z-index:50; transition:transform .5s cubic-bezier(.2,.8,.2,1);
|
||||||
|
background:rgba(var(--bg-rgb), .55); backdrop-filter:blur(14px); border-bottom:1px solid rgba(var(--ink-rgb), .07); }
|
||||||
|
|
||||||
|
/* Rail */
|
||||||
|
.section-rail [data-rail-target] { color:rgba(var(--ink-rgb), .35); transition:color .3s; }
|
||||||
|
.section-rail [data-rail-target]::after { content:''; display:inline-block; width:5px; height:5px; margin-left:9px; border-radius:50%; background:rgba(var(--ink-rgb), .25); transition:background .3s, box-shadow .3s; }
|
||||||
|
.section-rail .is-active { color:var(--lime); }
|
||||||
|
.section-rail .is-active::after { background:var(--lime); box-shadow:0 0 10px rgba(var(--lime-rgb), .8); }
|
||||||
|
|
||||||
|
/* Reveals */
|
||||||
|
[data-reveal] { opacity:0; transform:translateY(48px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
|
||||||
|
[data-reveal].is-in { opacity:1; transform:none; }
|
||||||
|
|
||||||
|
/* Hero : titre révélé ligne par ligne (chaque ligne dans un wrapper overflow:hidden) */
|
||||||
|
@keyframes yb-line-up { from { transform:translateY(115%); } to { transform:none; } }
|
||||||
|
.line-mask { overflow:hidden; }
|
||||||
|
.line-mask > * { animation:yb-line-up 1.05s cubic-bezier(.2,.8,.2,1) backwards; }
|
||||||
|
.line-mask:nth-child(2) > * { animation-delay:.14s; }
|
||||||
|
.line-mask:nth-child(3) > * { animation-delay:.28s; }
|
||||||
|
@keyframes yb-arrow { 0%,100% { transform:none; } 50% { transform:translateX(9px); } }
|
||||||
|
.scroll-hint__arrow { display:inline-block; animation:yb-arrow 1.6s ease-in-out infinite; }
|
||||||
|
|
||||||
|
/* Wipe */
|
||||||
|
/* Rideau masqué (visibility) au repos : sinon Safari iOS garde sa couleur pour ses barres haut et bas */
|
||||||
|
.yb-wipe { position:fixed; inset:0; z-index:9990; background:var(--lime); display:flex; align-items:center; justify-content:center;
|
||||||
|
transform:translateY(100%); visibility:hidden; transition:transform .45s cubic-bezier(.7,0,.3,1), visibility 0s .45s; pointer-events:none; }
|
||||||
|
.yb-wipe.is-covering { transform:none; visibility:visible; transition:transform .45s cubic-bezier(.7,0,.3,1), visibility 0s; }
|
||||||
|
html.is-entering .yb-wipe { transform:none; visibility:visible; transition:none; }
|
||||||
|
html:not(.is-entering) .yb-wipe:not(.is-covering) { transform:translateY(-100%); visibility:hidden; transition:transform .55s cubic-bezier(.7,0,.3,1), visibility 0s .55s; }
|
||||||
|
.yb-wipe__label { font:700 16px 'JetBrains Mono',monospace; color:var(--bg); letter-spacing:.3em; }
|
||||||
|
|
||||||
|
/* Marquee */
|
||||||
|
@keyframes yb-mq { to { transform:translateX(-50%); } }
|
||||||
|
.marquee { overflow:hidden; }
|
||||||
|
.marquee-track { display:flex; width:max-content; white-space:nowrap; animation:yb-mq 16s linear infinite; }
|
||||||
|
.marquee-track--reverse { animation-direction:reverse; }
|
||||||
|
|
||||||
|
/* Divers */
|
||||||
|
@keyframes yb-spin { to { transform:rotate(360deg); } }
|
||||||
|
.spin-circle { width:52px; height:52px; border:1px dashed var(--lime); border-radius:50%; animation:yb-spin 12s linear infinite; }
|
||||||
|
@keyframes yb-pulse { 50% { opacity:.35; } }
|
||||||
|
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--lime); animation:yb-pulse 2s infinite; }
|
||||||
|
.card-img img { filter:grayscale(.35) contrast(1.05); transition:filter .4s, transform .5s; }
|
||||||
|
.card:hover .card-img img { filter:none; transform:scale(1.04); }
|
||||||
|
.outline-lime { color:transparent; -webkit-text-stroke:2px var(--lime); }
|
||||||
|
|
||||||
|
/* Menu mobile */
|
||||||
|
[data-menu] { position:fixed; inset:0; z-index:48; background:rgba(var(--bg-rgb), .96); backdrop-filter:blur(18px);
|
||||||
|
display:flex; flex-direction:column; justify-content:center; padding:90px 24px 40px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
|
||||||
|
[data-menu].is-open { opacity:1; visibility:visible; }
|
||||||
|
[data-menu-toggle] { display:none; }
|
||||||
|
|
||||||
|
/* ---------- Responsive ---------- */
|
||||||
|
@media (max-width:1100px) {
|
||||||
|
.site-nav__links { display:none; }
|
||||||
|
[data-menu-toggle] { display:flex; white-space:nowrap; }
|
||||||
|
.hero__vertical-label, .hero__aside { display:none; }
|
||||||
|
}
|
||||||
|
@media (max-width:720px) {
|
||||||
|
.section-rail { display:none; }
|
||||||
|
.hero__title { font-size:min(16.5vw,145px); }
|
||||||
|
.hero__content { left:var(--gut); right:var(--gut); bottom:84px; }
|
||||||
|
/* Travaux : plus de section sticky, piste en scroll-snap natif = fluide au doigt */
|
||||||
|
#travaux { height:auto !important; }
|
||||||
|
#travaux .works-sticky { position:static; height:auto; padding:110px 0 60px; }
|
||||||
|
.works-track { overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; width:auto !important; gap:20px; padding:0 var(--gut); scrollbar-width:none; }
|
||||||
|
.works-track::-webkit-scrollbar { display:none; }
|
||||||
|
.works-track .card { width:84vw; scroll-snap-align:center; }
|
||||||
|
.works-track .card-img { height:52vw; }
|
||||||
|
.grid-auto { grid-template-columns:1fr !important; }
|
||||||
|
.article__meta { position:static; width:100%; }
|
||||||
|
}
|
||||||
|
@media (pointer:coarse) { .card-img img { filter:none; } }
|
||||||
|
/* Animations inconditionnelles (choix de Yasser : son système active « réduire les animations »
|
||||||
|
et il veut voir le site animé). Seul ?ybstatic=1 → html.yb-static fige tout, pour les captures. */
|
||||||
|
html.yb-static *, html.yb-static *::before, html.yb-static *::after { animation:none !important; transition:none !important; }
|
||||||
|
html.yb-static [data-reveal] { opacity:1; transform:none; }
|
||||||
|
html.yb-static .yb-wipe { display:none; }
|
||||||
|
|
||||||
|
/* Curseur custom (cursor.js) : point accent qui s'étire en index, puis la main apparaît autour du doigt */
|
||||||
|
.yb-cursor { position:fixed; left:0; top:0; z-index:9999; pointer-events:none; }
|
||||||
|
.yb-cursor__dot { position:absolute; left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:6px; background:var(--lime);
|
||||||
|
mix-blend-mode:var(--cursor-blend,difference);
|
||||||
|
transition:width .22s cubic-bezier(.2,.8,.2,1), height .22s cubic-bezier(.2,.8,.2,1), margin .22s cubic-bezier(.2,.8,.2,1), border-radius .22s, opacity .18s .1s; }
|
||||||
|
.yb-cursor__hand { position:absolute; left:-12.5px; top:-2px; width:34px; height:38px; opacity:0;
|
||||||
|
transform-origin:12.5px 2px; transform:scale(.3) rotate(10deg);
|
||||||
|
filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
|
||||||
|
transition:opacity .16s, transform .3s cubic-bezier(.2,.8,.2,1); }
|
||||||
|
.yb-cursor__hand svg { display:block; overflow:visible; }
|
||||||
|
.yb-cursor.is-hand .yb-cursor__dot { width:7px; height:17px; margin:-1px 0 0 -3.5px; border-radius:3.5px; opacity:0; }
|
||||||
|
.yb-cursor.is-hand .yb-cursor__hand { opacity:1; transform:scale(1) rotate(-8deg); transition:opacity .18s .08s, transform .34s .04s cubic-bezier(.3,1.4,.5,1); }
|
||||||
|
.yb-cursor__label { position:absolute; left:16px; top:-11px; font:700 11px 'JetBrains Mono',monospace; color:var(--bg); background:var(--lime);
|
||||||
|
padding:4px 9px; border-radius:3px; white-space:nowrap; opacity:0; transform:scale(.6); transform-origin:left center; transition:opacity .18s, transform .18s, left .25s; }
|
||||||
|
.yb-cursor.is-hand .yb-cursor__label { left:30px; }
|
||||||
|
.yb-hand-spark { transform-box:fill-box; transform-origin:center; animation:yb-spark 1.2s ease-in-out infinite; }
|
||||||
|
@keyframes yb-spark { 50% { transform:scale(.4) rotate(45deg); opacity:.5; } }
|
||||||
|
|
||||||
|
/* Roue des projets et articles : le point s'ouvre en loupe, centre de la lentille sur la souris */
|
||||||
|
.yb-cursor__loupe { position:absolute; left:-14px; top:-14px; width:34px; height:34px; opacity:0;
|
||||||
|
transform-origin:14px 14px; transform:scale(.35) rotate(-40deg); filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
|
||||||
|
transition:opacity .16s, transform .3s cubic-bezier(.2,.8,.2,1); }
|
||||||
|
.yb-cursor__loupe svg { display:block; overflow:visible; }
|
||||||
|
.yb-cursor.is-loupe .yb-cursor__dot { width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:10px; opacity:0; }
|
||||||
|
.yb-cursor.is-loupe .yb-cursor__loupe { opacity:1; transform:none; transition:opacity .18s .06s, transform .36s .03s cubic-bezier(.3,1.4,.5,1); }
|
||||||
|
.yb-cursor.is-loupe .yb-cursor__label { left:32px; }
|
||||||
375
assets/css/seasons.css
Normal file
375
assets/css/seasons.css
Normal file
|
|
@ -0,0 +1,375 @@
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
804
assets/css/style.css
Normal file
804
assets/css/style.css
Normal file
|
|
@ -0,0 +1,804 @@
|
||||||
|
/*
|
||||||
|
Theme Name: yb2026
|
||||||
|
Theme URI: https://yasser.boulayoune.com
|
||||||
|
Author: Yasser Boulayoune
|
||||||
|
Description: Portfolio v3 « sombre & premium » : Archivo/JetBrains Mono, accent lime, orbe persistante, transitions wipe. Porté depuis le prototype Claude Design (handoff v3). Effets dans effects.css.
|
||||||
|
Version: 3.0
|
||||||
|
Requires PHP: 8.0
|
||||||
|
Text Domain: yb2026
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ══ Tokens (design-spec.md ; --bg/--card/--ink/--lime/--gut viennent d'effects.css) ══ */
|
||||||
|
:root {
|
||||||
|
--term: #0d0f0c;
|
||||||
|
--b1: rgba(var(--ink-rgb), .08);
|
||||||
|
--b2: rgba(var(--ink-rgb), .14);
|
||||||
|
--mut40: rgba(var(--ink-rgb), .4);
|
||||||
|
--mut45: rgba(var(--ink-rgb), .45);
|
||||||
|
--mut50: rgba(var(--ink-rgb), .5);
|
||||||
|
--mut60: rgba(var(--ink-rgb), .6);
|
||||||
|
--mut65: rgba(var(--ink-rgb), .65);
|
||||||
|
--mut70: rgba(var(--ink-rgb), .7);
|
||||||
|
--mut75: rgba(var(--ink-rgb), .75);
|
||||||
|
--sans: 'Archivo', sans-serif;
|
||||||
|
--mono: 'JetBrains Mono', monospace;
|
||||||
|
--ease: cubic-bezier(.2, .8, .2, 1);
|
||||||
|
--nav-h: 68px;
|
||||||
|
--admin: 0px;
|
||||||
|
}
|
||||||
|
body.admin-bar { --admin: 32px; }
|
||||||
|
/* Zones toujours sombres (terminal, blocs de code), quel que soit le thème :
|
||||||
|
on redéclare toute la palette, y compris les gris dérivés calculés sur :root */
|
||||||
|
.term, .prose pre, .prose :not(pre) > code {
|
||||||
|
--bg: #0a0a0a; --card: #101010; --ph: #141414; --ink: #f5f5f0; --lime: #d3fd50;
|
||||||
|
--bg-rgb: 10,10,10; --ink-rgb: 245,245,240; --lime-rgb: 211,253,80;
|
||||||
|
--b1: rgba(245,245,240,.08); --b2: rgba(245,245,240,.14);
|
||||||
|
--mut40: rgba(245,245,240,.4); --mut45: rgba(245,245,240,.45); --mut50: rgba(245,245,240,.5);
|
||||||
|
--mut60: rgba(245,245,240,.6); --mut65: rgba(245,245,240,.65); --mut70: rgba(245,245,240,.7); --mut75: rgba(245,245,240,.75);
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 782px) { body.admin-bar { --admin: 46px; } }
|
||||||
|
|
||||||
|
/* ══ Base ════════════════════════════════════════════════════════════ */
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: auto; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--ink);
|
||||||
|
font: 400 16px/1.6 var(--sans);
|
||||||
|
overflow-x: clip;
|
||||||
|
}
|
||||||
|
a { color: var(--lime); text-decoration: none; }
|
||||||
|
a:hover { color: var(--ink); }
|
||||||
|
img { max-width: 100%; height: auto; }
|
||||||
|
h1, h2, h3 { margin: 0; font-weight: inherit; }
|
||||||
|
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
|
||||||
|
.lime { color: var(--lime); }
|
||||||
|
.mono { font-family: var(--mono); }
|
||||||
|
|
||||||
|
@keyframes riseIn { from { transform: translateY(50px); opacity: 0; } to { transform: none; opacity: 1; } }
|
||||||
|
@keyframes imgIn { from { transform: scale(1.12); } to { transform: none; } }
|
||||||
|
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
|
||||||
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||||
|
@keyframes lineUp { from { transform: translateY(115%); } to { transform: none; } }
|
||||||
|
|
||||||
|
/* ══ Nav ═════════════════════════════════════════════════════════════ */
|
||||||
|
.site-nav {
|
||||||
|
top: var(--admin);
|
||||||
|
display: flex; align-items: center; justify-content: space-between; gap: 20px;
|
||||||
|
padding: 20px var(--gut);
|
||||||
|
}
|
||||||
|
.site-nav__logo { font: 700 15px var(--mono); letter-spacing: .05em; color: var(--ink); white-space: nowrap; }
|
||||||
|
.site-nav__logo:hover { color: var(--ink); }
|
||||||
|
.site-nav__links { display: flex; gap: 30px; font: 500 12.5px var(--mono); }
|
||||||
|
.site-nav__links a { color: var(--mut75); transition: color .2s; }
|
||||||
|
.site-nav__links a:hover, .site-nav__links a.is-active { color: var(--lime); }
|
||||||
|
.site-nav__right { display: flex; align-items: center; gap: 12px; }
|
||||||
|
.site-nav__badge {
|
||||||
|
display: flex; align-items: center; gap: 8px; white-space: nowrap;
|
||||||
|
font: 500 11.5px var(--mono); color: var(--lime);
|
||||||
|
border: 1px solid rgba(var(--lime-rgb), .35); border-radius: 99px; padding: 6px 13px;
|
||||||
|
}
|
||||||
|
.site-nav__burger {
|
||||||
|
align-items: center; gap: 8px; background: none; cursor: pointer;
|
||||||
|
font: 700 12px var(--mono); color: var(--ink);
|
||||||
|
border: 1px solid rgba(var(--ink-rgb), .3); border-radius: 99px; padding: 8px 16px;
|
||||||
|
}
|
||||||
|
.scroll-progress { top: var(--admin); }
|
||||||
|
|
||||||
|
/* Menu mobile plein écran */
|
||||||
|
.mobile-menu { top: var(--admin); }
|
||||||
|
.mobile-menu__links { display: flex; flex-direction: column; gap: 8px; }
|
||||||
|
.mobile-menu__link { overflow: hidden; border-bottom: 1px solid var(--b1); padding-bottom: 8px; color: var(--ink); }
|
||||||
|
.mobile-menu__link:last-child { border-bottom: 0; }
|
||||||
|
.mobile-menu__link.is-active, .mobile-menu__link:hover { color: var(--lime); }
|
||||||
|
.mobile-menu__txt {
|
||||||
|
display: flex; justify-content: space-between; align-items: center;
|
||||||
|
font: 900 min(10vw, 58px) var(--sans); letter-spacing: -.03em; line-height: 1.05;
|
||||||
|
}
|
||||||
|
.mobile-menu__arrow { font: 700 20px var(--mono); color: var(--lime); }
|
||||||
|
.mobile-menu.is-open .mobile-menu__txt { animation: lineUp .55s var(--ease) backwards; animation-delay: calc(.04s + var(--i) * .06s); }
|
||||||
|
.mobile-menu__contact { margin-top: 44px; display: flex; flex-direction: column; gap: 12px; font: 500 13px var(--mono); }
|
||||||
|
.mobile-menu.is-open .mobile-menu__contact { animation: fadeIn .6s .4s ease-out backwards; }
|
||||||
|
.mobile-menu__loc { color: var(--mut45); }
|
||||||
|
|
||||||
|
/* ══ Patterns partagés ═══════════════════════════════════════════════ */
|
||||||
|
.kicker { font: 500 13px var(--mono); color: var(--lime); letter-spacing: .15em; margin-bottom: 16px; }
|
||||||
|
.page-wrap { padding: calc(150px + var(--admin)) var(--gut) 80px; min-height: 100vh; }
|
||||||
|
.page-wrap--narrow { max-width: 980px; }
|
||||||
|
.page-wrap--tight { padding-bottom: 0; min-height: 0; }
|
||||||
|
.page-title { font: 900 min(9vw, 120px) var(--sans); line-height: .88; letter-spacing: -.035em; margin-bottom: 60px; }
|
||||||
|
.page-title--small { font-size: min(7vw, 76px); }
|
||||||
|
.page-lead { max-width: 560px; font: 400 16px/1.6 var(--sans); color: var(--mut60); margin: -36px 0 56px; }
|
||||||
|
.page-foot-note { margin-top: 44px; font: 500 13px var(--mono); color: var(--mut45); }
|
||||||
|
.section-label { font: 700 14px var(--mono); color: var(--lime); letter-spacing: .12em; margin-bottom: 24px; }
|
||||||
|
.link-underline { font: 700 14px var(--mono); color: var(--lime); border-bottom: 1px solid var(--lime); padding-bottom: 4px; }
|
||||||
|
.note-l { border-left: 2px solid var(--lime); padding: 6px 0 6px 22px; font: 500 14px/1.6 var(--mono); color: var(--mut60); }
|
||||||
|
.pill-btn {
|
||||||
|
display: block; text-align: center; font: 700 13px var(--mono); color: var(--lime);
|
||||||
|
border: 1px solid rgba(var(--lime-rgb), .4); border-radius: 99px; padding: 12px 20px; transition: all .25s;
|
||||||
|
}
|
||||||
|
.pill-btn:hover { background: var(--lime); color: var(--bg); }
|
||||||
|
|
||||||
|
/* ══ Accueil ═════════════════════════════════════════════════════════ */
|
||||||
|
.orb-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; animation: fadeIn 1.6s ease-out; }
|
||||||
|
.home #yb-root > section { position: relative; z-index: 1; }
|
||||||
|
/* À propos : pas de contexte d'empilement, sinon le titre en mix-blend-mode: difference
|
||||||
|
ne « voit » pas le fond de la page (titre blanc invisible en mode clair) */
|
||||||
|
.home #yb-root > section#apropos { z-index: auto; }
|
||||||
|
|
||||||
|
/* Rail vertical */
|
||||||
|
.section-rail {
|
||||||
|
position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 40;
|
||||||
|
display: flex; flex-direction: column; gap: 16px; align-items: flex-end;
|
||||||
|
font: 600 9.5px var(--mono); letter-spacing: .22em;
|
||||||
|
}
|
||||||
|
.section-rail a:hover { color: var(--ink); }
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero { height: 100vh; min-height: 640px; overflow: hidden; }
|
||||||
|
.hero__vertical-label {
|
||||||
|
position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%); z-index: 5;
|
||||||
|
font: 500 11px var(--mono); color: var(--mut40); writing-mode: vertical-rl; letter-spacing: .3em;
|
||||||
|
}
|
||||||
|
.hero__content { position: absolute; left: var(--gut); bottom: 110px; z-index: 5; will-change: transform; }
|
||||||
|
.hero__kicker { font: 500 13px var(--mono); color: var(--lime); letter-spacing: .15em; margin-bottom: 16px; }
|
||||||
|
.hero__title { display: block; font: 900 min(10.5vw, 145px) var(--sans); line-height: .92; letter-spacing: -.035em; }
|
||||||
|
.hero__title .line-mask { display: block; }
|
||||||
|
.hero__title .line-mask > span { display: block; }
|
||||||
|
.hero__sub { font: 500 11px var(--mono); color: var(--mut45); letter-spacing: .28em; }
|
||||||
|
.hero__sub-mask { margin-top: 18px; }
|
||||||
|
/* Révélation ligne par ligne : kicker → YASSER → BOULAYOUNE → sous-titre */
|
||||||
|
.hero__content .hero__kicker-mask > * { animation-duration: .9s; animation-delay: .15s; }
|
||||||
|
.hero__title .line-mask:nth-child(1) > * { animation-delay: .3s; }
|
||||||
|
.hero__title .line-mask:nth-child(2) > * { animation-delay: .44s; }
|
||||||
|
.hero__content .hero__sub-mask > * { animation-duration: .9s; animation-delay: .6s; }
|
||||||
|
.hero__aside {
|
||||||
|
position: absolute; right: var(--gut); bottom: 130px; z-index: 5; text-align: right; max-width: 250px;
|
||||||
|
animation: fadeIn 1.1s .75s ease-out backwards;
|
||||||
|
}
|
||||||
|
.hero__aside p { font: 400 14px/1.5 var(--sans); color: var(--mut60); margin: 0; }
|
||||||
|
.scroll-hint {
|
||||||
|
display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px;
|
||||||
|
font: 500 11px var(--mono); color: var(--lime); letter-spacing: .2em;
|
||||||
|
}
|
||||||
|
.hero__marquee {
|
||||||
|
position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
|
||||||
|
border-top: 1px solid rgba(var(--ink-rgb), .12); background: rgba(var(--bg-rgb), .55); padding: 12px 0;
|
||||||
|
font: 800 26px var(--sans); letter-spacing: -.01em;
|
||||||
|
}
|
||||||
|
.marquee-track > span { padding-right: 24px; }
|
||||||
|
|
||||||
|
/* Travaux (scroll horizontal) */
|
||||||
|
.works { height: 560vh; }
|
||||||
|
.works-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
|
||||||
|
.works-head {
|
||||||
|
position: absolute; top: 100px; left: var(--gut); right: var(--gut);
|
||||||
|
display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
|
||||||
|
}
|
||||||
|
.works-title { font: 900 min(7vw, 92px) var(--sans); line-height: 1; letter-spacing: -.03em; }
|
||||||
|
.works-sub { font: 500 10.5px var(--mono); color: var(--mut40); letter-spacing: .26em; margin-top: 10px; }
|
||||||
|
.works-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
|
||||||
|
.works-hint { font: 500 12px var(--mono); color: var(--mut50); }
|
||||||
|
.works-count { font: 700 13px var(--mono); color: var(--lime); }
|
||||||
|
.works-track { display: flex; gap: var(--gut); padding: 0 var(--gut); width: max-content; will-change: transform; margin-top: 120px; }
|
||||||
|
.works-end { width: 520px; flex: none; display: flex; align-items: center; justify-content: center; }
|
||||||
|
.works-end span {
|
||||||
|
font: 900 64px var(--sans); line-height: 1; text-align: center;
|
||||||
|
color: transparent; -webkit-text-stroke: 1.5px rgba(var(--lime-rgb), .6); transition: -webkit-text-stroke-color .3s;
|
||||||
|
}
|
||||||
|
.works-end:hover span { -webkit-text-stroke-color: var(--lime); }
|
||||||
|
|
||||||
|
/* Cartes projet */
|
||||||
|
.card {
|
||||||
|
display: block; color: var(--ink); background: var(--card);
|
||||||
|
border: 1px solid var(--b2); border-radius: 12px; overflow: hidden; transition: border-color .3s;
|
||||||
|
}
|
||||||
|
.card:hover { border-color: var(--lime); color: var(--ink); }
|
||||||
|
.card--home { width: 620px; flex: none; }
|
||||||
|
.card-img { display: block; height: 230px; position: relative; overflow: hidden; background: var(--ph); }
|
||||||
|
.card--home .card-img { height: 340px; }
|
||||||
|
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||||
|
.card-num, .card-year {
|
||||||
|
position: absolute; top: 14px; padding: 4px 8px; border-radius: 4px; background: rgba(var(--bg-rgb), .7);
|
||||||
|
}
|
||||||
|
.card-num { left: 16px; font: 700 12px var(--mono); color: var(--lime); }
|
||||||
|
.card-year { right: 16px; font: 500 11px var(--mono); color: var(--mut75); }
|
||||||
|
.card--home .card-num, .card--home .card-year { top: 18px; }
|
||||||
|
.card--home .card-num { left: 20px; font-size: 13px; }
|
||||||
|
.card--home .card-year { right: 20px; }
|
||||||
|
.card-body { display: flex; flex-direction: column; gap: 9px; padding: 22px 24px 26px; }
|
||||||
|
.card--home .card-body { gap: 12px; padding: 26px 28px 30px; }
|
||||||
|
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
|
||||||
|
.card-name { font: 800 22px var(--sans); letter-spacing: -.02em; }
|
||||||
|
.card--home .card-name { font-size: 30px; }
|
||||||
|
.card-arrow { font: 700 17px var(--mono); color: var(--lime); }
|
||||||
|
.card--home .card-arrow { font-size: 20px; }
|
||||||
|
.card-tag { font: 500 11.5px var(--mono); color: var(--lime); letter-spacing: .08em; }
|
||||||
|
.card--home .card-tag { font-size: 12px; }
|
||||||
|
.card-short { font: 400 13.5px/1.55 var(--sans); color: var(--mut60); }
|
||||||
|
.card--home .card-short { font-size: 14px; }
|
||||||
|
|
||||||
|
/* À propos */
|
||||||
|
.about { min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 120px 0; }
|
||||||
|
.about-blob {
|
||||||
|
position: absolute; left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px;
|
||||||
|
border-radius: 50%; background: radial-gradient(circle, var(--lime) 0%, rgba(var(--lime-rgb), .35) 45%, transparent 70%);
|
||||||
|
pointer-events: none; filter: blur(8px); opacity: 0;
|
||||||
|
}
|
||||||
|
.about__title-wrap { position: relative; z-index: 2; mix-blend-mode: difference; padding: 0 var(--gut); }
|
||||||
|
.about__title { font: 900 min(12vw, 165px) var(--sans); line-height: .85; letter-spacing: -.04em; color: var(--blend-ink); }
|
||||||
|
.about__cols { position: relative; z-index: 2; display: flex; gap: 60px; padding: 70px var(--gut) 0; flex-wrap: wrap; }
|
||||||
|
.about__text { max-width: 480px; margin: 0; font: 400 17px/1.65 var(--sans); color: var(--mut70); }
|
||||||
|
.about__list { display: flex; flex-direction: column; gap: 14px; font: 500 13px var(--mono); color: var(--mut60); }
|
||||||
|
.about__more { position: relative; z-index: 2; padding: 60px var(--gut) 0; }
|
||||||
|
|
||||||
|
/* Marquees compétences */
|
||||||
|
.skills-mq {
|
||||||
|
padding: 40px 0; border-top: 1px solid rgba(var(--ink-rgb), .1); border-bottom: 1px solid rgba(var(--ink-rgb), .1);
|
||||||
|
overflow: hidden; display: flex; flex-direction: column; gap: 18px;
|
||||||
|
}
|
||||||
|
.skills-mq__track { animation-duration: 22s; font: 800 44px var(--sans); letter-spacing: -.02em; color: rgba(var(--ink-rgb), .9); }
|
||||||
|
.skills-mq__track > span { padding-right: 28px; }
|
||||||
|
.skills-mq__track--outline { color: transparent; -webkit-text-stroke: 1.2px rgba(var(--lime-rgb), .7); }
|
||||||
|
|
||||||
|
/* CTA */
|
||||||
|
.cta { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding: 100px var(--gut) 60px; }
|
||||||
|
.cta .kicker, .contact .kicker { margin-bottom: 20px; }
|
||||||
|
.cta__title { display: block; font: 900 min(11vw, 150px) var(--sans); line-height: .88; letter-spacing: -.04em; color: var(--ink); }
|
||||||
|
.cta__title:hover { color: var(--ink); }
|
||||||
|
.cta__title:hover .outline-lime { -webkit-text-stroke-color: var(--ink); }
|
||||||
|
|
||||||
|
/* ══ Qui suis-je ═════════════════════════════════════════════════════ */
|
||||||
|
.qsn-grid { display: flex; gap: 60px; flex-wrap: wrap; align-items: flex-start; }
|
||||||
|
.qsn-side { flex: none; width: 340px; }
|
||||||
|
.qsn-card { border: 1px solid var(--b2); border-radius: 12px; overflow: hidden; background: var(--card); }
|
||||||
|
.qsn-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: grayscale(.25); }
|
||||||
|
.qsn-fiche { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; font: 500 12.5px var(--mono); color: var(--mut70); }
|
||||||
|
.qsn-main { flex: 1; min-width: min(400px, 100%); display: flex; flex-direction: column; gap: 56px; }
|
||||||
|
.qsn-intro { max-width: 640px; margin: 0; font: 400 19px/1.65 var(--sans); color: var(--mut75); }
|
||||||
|
.skills { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
|
||||||
|
.skill { display: flex; flex-direction: column; gap: 7px; }
|
||||||
|
.skill__head { display: flex; justify-content: space-between; gap: 12px; font: 500 13px var(--mono); }
|
||||||
|
.skill__level { color: var(--mut45); }
|
||||||
|
.skill__bar { height: 4px; background: rgba(var(--ink-rgb), .1); border-radius: 2px; overflow: hidden; }
|
||||||
|
.skill__fill { height: 100%; background: var(--lime); border-radius: 2px; transform-origin: left; transform: scaleX(0); }
|
||||||
|
.skill__fill.is-in { animation: barGrow 1.1s var(--ease) forwards; }
|
||||||
|
html.yb-static .skill__fill { transform: none; }
|
||||||
|
.timeline { display: flex; flex-direction: column; max-width: 640px; }
|
||||||
|
.tl-item { display: flex; gap: 24px; padding: 22px 0; border-top: 1px solid rgba(var(--ink-rgb), .1); }
|
||||||
|
.tl-date { flex: none; width: 170px; font: 500 12px var(--mono); color: var(--lime); }
|
||||||
|
.tl-body { display: flex; flex-direction: column; gap: 5px; }
|
||||||
|
.tl-title { font: 700 18px var(--sans); }
|
||||||
|
.tl-place { font: 500 12px var(--mono); color: var(--mut50); }
|
||||||
|
.tl-desc { font: 400 14px/1.55 var(--sans); color: var(--mut65); }
|
||||||
|
|
||||||
|
/* ══ Compétences ═════════════════════════════════════════════════════ */
|
||||||
|
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; margin-bottom: 80px; }
|
||||||
|
.svc-card {
|
||||||
|
border: 1px solid var(--b2); border-radius: 12px; background: var(--card); transition: border-color .3s;
|
||||||
|
padding: 36px 32px; display: flex; flex-direction: column; gap: 16px;
|
||||||
|
}
|
||||||
|
.svc-card:hover { border-color: var(--lime); }
|
||||||
|
.svc-num { font: 700 15px var(--mono); color: var(--lime); }
|
||||||
|
.svc-title { font: 800 26px var(--sans); letter-spacing: -.02em; }
|
||||||
|
.svc-desc { font: 400 15px/1.6 var(--sans); color: var(--mut65); }
|
||||||
|
.infra-title { font: 900 min(6vw, 72px) var(--sans); line-height: .9; letter-spacing: -.03em; margin-bottom: 20px; }
|
||||||
|
.infra-lead { max-width: 640px; font: 400 16px/1.6 var(--sans); color: var(--mut65); margin: 0 0 40px; }
|
||||||
|
.infra-cols { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 60px; }
|
||||||
|
.term { flex: 1; min-width: min(380px, 100%); border: 1px solid var(--b2); border-radius: 12px; background: var(--term); overflow: hidden; }
|
||||||
|
.term-bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid rgba(var(--ink-rgb), .1); background: var(--card); }
|
||||||
|
.term-dot { width: 10px; height: 10px; border-radius: 50%; }
|
||||||
|
.term-dot--r { background: #ff5f57; }
|
||||||
|
.term-dot--y { background: #febc2e; }
|
||||||
|
.term-dot--g { background: #28c840; }
|
||||||
|
.term-title { font: 500 12px var(--mono); color: var(--mut50); margin-left: 8px; }
|
||||||
|
.term-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; font: 500 12.5px var(--mono); }
|
||||||
|
.term-muted { color: var(--mut40); }
|
||||||
|
.term-foot { margin-top: 8px; }
|
||||||
|
.term-row { display: flex; justify-content: space-between; gap: 16px; }
|
||||||
|
.infra-points { flex: 1; min-width: min(320px, 100%); display: flex; flex-direction: column; gap: 20px; }
|
||||||
|
.ipoint { border-left: 2px solid var(--lime); padding: 4px 0 4px 20px; }
|
||||||
|
.ipoint-title { font: 700 17px var(--sans); margin-bottom: 6px; }
|
||||||
|
.ipoint-desc { font: 400 14px/1.55 var(--sans); color: var(--mut65); }
|
||||||
|
.infra-strip { font: 500 12px var(--mono); color: var(--mut45); }
|
||||||
|
|
||||||
|
/* ══ Réalisations ════════════════════════════════════════════════════ */
|
||||||
|
.real-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 28px; }
|
||||||
|
|
||||||
|
/* ══ Blog ════════════════════════════════════════════════════════════ */
|
||||||
|
.blog-list { display: flex; flex-direction: column; max-width: 1100px; }
|
||||||
|
.blog-row {
|
||||||
|
display: flex; align-items: baseline; gap: 28px; padding: 30px 8px; color: var(--ink);
|
||||||
|
border-top: 1px solid rgba(var(--ink-rgb), .12); transition: padding-left .3s, background .3s;
|
||||||
|
}
|
||||||
|
.blog-row:hover { padding-left: 24px; background: rgba(var(--lime-rgb), .04); color: var(--ink); }
|
||||||
|
.blog-num { flex: none; font: 700 13px var(--mono); color: var(--lime); }
|
||||||
|
.blog-title { flex: 1; font: 800 clamp(17px, 3.4vw, 32px) var(--sans); letter-spacing: -.02em; line-height: 1.15; }
|
||||||
|
.blog-tag { flex: none; font: 500 12px var(--mono); color: var(--mut45); }
|
||||||
|
.blog-arrow { flex: none; font: 700 18px var(--mono); color: var(--lime); }
|
||||||
|
|
||||||
|
/* ══ Contact ═════════════════════════════════════════════════════════ */
|
||||||
|
.contact { display: flex; flex-direction: column; justify-content: center; padding-bottom: 60px; }
|
||||||
|
.contact-cols { display: flex; gap: 60px; margin-top: 70px; flex-wrap: wrap; }
|
||||||
|
.contact-col { display: flex; flex-direction: column; gap: 16px; font: 500 14px var(--mono); }
|
||||||
|
.contact-k { color: var(--mut40); font-size: 12px; }
|
||||||
|
.contact-muted { color: var(--mut65); }
|
||||||
|
|
||||||
|
/* ══ Étude de cas / article ══════════════════════════════════════════ */
|
||||||
|
.case-hero { height: 56vh; min-height: 320px; overflow: hidden; position: relative; }
|
||||||
|
.case-hero-img, .case-hero img { width: 100%; height: 100%; object-fit: cover; display: block; animation: imgIn 1.1s var(--ease); }
|
||||||
|
.case-hero-fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg), transparent 60%); }
|
||||||
|
.case-hero-text { position: absolute; left: var(--gut); bottom: 36px; right: var(--gut); }
|
||||||
|
.case-hero-text .kicker { letter-spacing: .12em; margin-bottom: 12px; }
|
||||||
|
.case-title { font: 900 min(8vw, 100px) var(--sans); line-height: .88; letter-spacing: -.035em; }
|
||||||
|
.case-title--post { font-size: min(5.5vw, 64px); line-height: 1; }
|
||||||
|
.rise { animation: riseIn .7s var(--ease) backwards; }
|
||||||
|
.rise-1 { animation-delay: .1s; }
|
||||||
|
.rise-2 { animation-delay: .2s; }
|
||||||
|
.rise-3 { animation-delay: .3s; }
|
||||||
|
.case-cols { display: flex; gap: 70px; padding: 60px var(--gut) 30px; flex-wrap: wrap; }
|
||||||
|
.case-meta {
|
||||||
|
flex: none; width: 260px; display: flex; flex-direction: column; gap: 22px;
|
||||||
|
font: 500 13px var(--mono); position: sticky; top: 110px; align-self: flex-start;
|
||||||
|
}
|
||||||
|
.case-meta-k { color: var(--mut40); margin-bottom: 5px; }
|
||||||
|
.case-body { flex: 1; min-width: min(400px, 100%); max-width: 760px; display: flex; flex-direction: column; gap: 44px; }
|
||||||
|
.case-lead { font: 400 21px/1.6 var(--sans); color: rgba(var(--ink-rgb), .85); }
|
||||||
|
.case-sec { display: flex; flex-direction: column; gap: 16px; }
|
||||||
|
.case-sec-h { font: 800 30px var(--sans); letter-spacing: -.02em; }
|
||||||
|
.case-sec-p { font: 400 16.5px/1.7 var(--sans); color: var(--mut70); margin: 0; }
|
||||||
|
.case-next {
|
||||||
|
padding: 70px var(--gut) 90px; border-top: 1px solid var(--b1); margin-top: 40px; color: var(--ink);
|
||||||
|
display: flex; justify-content: space-between; align-items: center; gap: 24px;
|
||||||
|
}
|
||||||
|
.case-next:hover { color: var(--ink); }
|
||||||
|
.case-next-k { font: 500 12px var(--mono); color: var(--mut45); margin-bottom: 10px; }
|
||||||
|
.case-next-name { font: 900 min(6vw, 72px) var(--sans); line-height: .9; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.8px var(--lime); }
|
||||||
|
.case-next:hover .case-next-name { color: var(--lime); }
|
||||||
|
.case-next-arrow { font: 700 44px var(--mono); color: var(--lime); }
|
||||||
|
|
||||||
|
/* ══ Prose (contenu WP) ══════════════════════════════════════════════ */
|
||||||
|
.prose { font: 400 16.5px/1.7 var(--sans); color: var(--mut70); max-width: 760px; }
|
||||||
|
.prose h2, .prose h3 { font: 800 30px var(--sans); letter-spacing: -.02em; color: var(--ink); margin: 1.6em 0 .6em; }
|
||||||
|
.prose h3 { font-size: 23px; }
|
||||||
|
.prose h2::before, .prose h3::before { content: '/ '; color: var(--lime); }
|
||||||
|
.prose a { border-bottom: 1px solid rgba(var(--lime-rgb), .4); }
|
||||||
|
.prose img { border-radius: 12px; border: 1px solid var(--b2); }
|
||||||
|
.prose blockquote { margin: 1.5em 0; border-left: 2px solid var(--lime); padding: 6px 0 6px 22px; font: 500 14px/1.6 var(--mono); color: var(--mut60); }
|
||||||
|
.prose pre, .prose code { font-family: var(--mono); background: var(--term); border-radius: 6px; }
|
||||||
|
.prose code { padding: 2px 6px; font-size: .85em; color: var(--lime); }
|
||||||
|
.prose pre { padding: 18px 22px; overflow-x: auto; border: 1px solid var(--b1); }
|
||||||
|
.prose pre code { padding: 0; background: none; }
|
||||||
|
.prose ul li::marker { color: var(--lime); }
|
||||||
|
.prose figure { margin: 1.5em 0; }
|
||||||
|
.prose figcaption { font: 500 12px var(--mono); color: var(--mut45); margin-top: 8px; }
|
||||||
|
|
||||||
|
/* ══ Footer ══════════════════════════════════════════════════════════ */
|
||||||
|
.site-footer {
|
||||||
|
position: relative; z-index: 1;
|
||||||
|
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
|
||||||
|
padding: 28px var(--gut); border-top: 1px solid var(--b1);
|
||||||
|
}
|
||||||
|
.site-footer__logo { font: 700 14px var(--mono); }
|
||||||
|
.spin-circle { flex: none; }
|
||||||
|
.site-footer__copy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 500 11.5px var(--mono); color: var(--mut40); text-align: right; }
|
||||||
|
.site-footer__copy a { color: var(--mut40); }
|
||||||
|
.site-footer__copy a:hover { color: var(--lime); }
|
||||||
|
|
||||||
|
/* ══ 404 ═════════════════════════════════════════════════════════════ */
|
||||||
|
.page-404 { display: flex; flex-direction: column; justify-content: center; min-height: 80vh; }
|
||||||
|
.page-404 .page-lead { margin-top: 0; }
|
||||||
|
.page-404 .link-underline { align-self: flex-start; }
|
||||||
|
|
||||||
|
/* ══ Responsive (les bascules principales sont dans effects.css) ═════ */
|
||||||
|
@media (min-width: 1101px) {
|
||||||
|
.site-nav__burger { display: none; }
|
||||||
|
}
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
/* Bascules d'effects.css que nos règles de base (chargées après) masqueraient */
|
||||||
|
.site-nav__links { display: none; }
|
||||||
|
.works-hint { display: none; }
|
||||||
|
}
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.site-nav { padding: 14px var(--gut); }
|
||||||
|
.page-wrap { padding-top: calc(110px + var(--admin)); }
|
||||||
|
.qsn-side { width: 100%; max-width: 380px; }
|
||||||
|
.case-meta { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 28px; }
|
||||||
|
.case-cols { gap: 40px; padding-top: 40px; }
|
||||||
|
.case-next { padding: 50px var(--gut) 60px; }
|
||||||
|
.blog-row { gap: 14px; flex-wrap: wrap; padding: 22px 4px; }
|
||||||
|
.blog-title { flex: 1 1 100%; order: 3; font-size: 22px; }
|
||||||
|
.tl-item { flex-direction: column; gap: 8px; }
|
||||||
|
.tl-date { width: auto; }
|
||||||
|
.contact-cols { gap: 32px; }
|
||||||
|
.site-footer { flex-direction: column; text-align: center; }
|
||||||
|
.site-footer__copy { align-items: center; text-align: center; }
|
||||||
|
}
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.site-nav__badge, .section-rail { display: none; }
|
||||||
|
.hero__content { left: var(--gut); right: var(--gut); bottom: 84px; }
|
||||||
|
/* 16.5vw du prototype : « BOULAYOUNE » déborde à 390px avec Archivo 900 */
|
||||||
|
.hero__title { font-size: min(12vw, 145px); }
|
||||||
|
.card--home .card-img { height: 52vw; }
|
||||||
|
.works-head { position: static; padding: 0 var(--gut); margin-bottom: 28px; }
|
||||||
|
.works-track { margin-top: 0; }
|
||||||
|
.works-sticky { display: block; overflow: visible; }
|
||||||
|
.card--home .card-name { font-size: 24px; }
|
||||||
|
.works-end { width: 70vw; scroll-snap-align: center; }
|
||||||
|
.works-end span { font-size: 40px; }
|
||||||
|
.about { min-height: 0; padding: 90px 0; }
|
||||||
|
.about__cols { gap: 36px; padding-top: 44px; }
|
||||||
|
.cta { min-height: 60vh; padding-top: 60px; }
|
||||||
|
.qsn-main { min-width: 0; }
|
||||||
|
.case-body { min-width: 0; }
|
||||||
|
}
|
||||||
|
/* Mode capture ?ybstatic=1 : piste des travaux à plat */
|
||||||
|
html.yb-static .works { height: auto; }
|
||||||
|
html.yb-static .works-sticky { position: static; height: auto; overflow: visible; display: block; padding: 110px 0 60px; }
|
||||||
|
html.yb-static .works-head { position: static; padding: 0 var(--gut); margin-bottom: 28px; }
|
||||||
|
html.yb-static .works-track { margin-top: 0; width: auto; overflow-x: auto; }
|
||||||
|
|
||||||
|
/* Captures dans une étude de cas : jamais plus hautes que l'écran (captures mobiles) */
|
||||||
|
.case-figs { display: flex; flex-direction: column; gap: 32px; }
|
||||||
|
.case-figs figure { margin: 0; text-align: center; }
|
||||||
|
.case-figs img { width: auto; max-width: 100%; max-height: 78vh; margin: 0 auto; display: block; }
|
||||||
|
|
||||||
|
/* ══ Page Compétences (/competences/) ════════════════════════════════
|
||||||
|
Pas de cartes ni de tableaux : typo géante, rideaux, bandeaux, scroll. */
|
||||||
|
.cp .page-wrap { min-height: 0; padding-top: 0; padding-bottom: 0; }
|
||||||
|
.cp-open.page-wrap { padding-top: calc(150px + var(--admin)); padding-bottom: 110px; }
|
||||||
|
.cp-title { font: 900 min(11.2vw, 172px) var(--sans); line-height: .84; letter-spacing: -.045em; margin-bottom: 70px; }
|
||||||
|
.cp-manifest {
|
||||||
|
max-width: 1280px; margin: 0;
|
||||||
|
font: 800 min(5vw, 68px)/1.08 var(--sans); letter-spacing: -.03em; color: var(--ink);
|
||||||
|
}
|
||||||
|
.cp-num {
|
||||||
|
display: inline-block; min-width: 1ch; font-size: 1.32em; line-height: .8; vertical-align: -.06em;
|
||||||
|
color: transparent; -webkit-text-stroke: 2px var(--lime); font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.cp-h { font: 900 min(9vw, 128px) var(--sans); line-height: .86; letter-spacing: -.04em; margin: 0 0 44px; }
|
||||||
|
.cp-head { margin-bottom: 10px; }
|
||||||
|
|
||||||
|
/* Services : lignes éditoriales, rideau lime au survol */
|
||||||
|
.cp-svc { border-bottom: 1px solid var(--b2); margin-bottom: 150px; }
|
||||||
|
.cp-svc__row {
|
||||||
|
position: relative; overflow: hidden; isolation: isolate;
|
||||||
|
display: grid; grid-template-columns: minmax(150px, 1fr) 3fr minmax(220px, 2fr); align-items: center; gap: 36px;
|
||||||
|
padding: 40px var(--gut); border-top: 1px solid var(--b2); cursor: default;
|
||||||
|
}
|
||||||
|
.cp-svc__row::before {
|
||||||
|
content: ''; position: absolute; inset: 0; z-index: -1; background: var(--lime);
|
||||||
|
transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.7, 0, .3, 1);
|
||||||
|
}
|
||||||
|
.cp-svc__row:hover::before { transform: scaleX(1); }
|
||||||
|
.cp-svc__n { font: 900 min(13vw, 180px) var(--sans); line-height: .78; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--lime); transition: -webkit-text-stroke-color .4s .15s; }
|
||||||
|
.cp-svc__t { font: 900 min(5.4vw, 84px) var(--sans); line-height: .92; letter-spacing: -.035em; transition: color .4s .15s; }
|
||||||
|
.cp-svc__d { margin: 0; font: 400 16px/1.6 var(--sans); color: var(--mut65); transition: color .4s .15s; }
|
||||||
|
.cp-svc__row:hover .cp-svc__n { -webkit-text-stroke-color: var(--bg); }
|
||||||
|
.cp-svc__row:hover .cp-svc__t, .cp-svc__row:hover .cp-svc__d { color: var(--bg); }
|
||||||
|
|
||||||
|
/* Boîte à outils : bandeaux défilants géants */
|
||||||
|
.cp-tools { margin-bottom: 150px; }
|
||||||
|
.cp-tools__row { border-top: 1px solid var(--b1); padding: 22px 0 18px; }
|
||||||
|
.cp-tools__row:last-child { border-bottom: 1px solid var(--b1); }
|
||||||
|
.cp-tools__label { padding: 0 var(--gut) 10px; font: 500 12px var(--mono); letter-spacing: .2em; color: var(--mut50); }
|
||||||
|
.cp-tools__mq .marquee-track { animation-duration: var(--dur, 30s); font: 900 min(8vw, 112px) var(--sans); letter-spacing: -.03em; line-height: 1; }
|
||||||
|
.cp-tools__mq b { font-weight: 900; color: var(--ink); transition: color .35s, -webkit-text-stroke-color .35s; }
|
||||||
|
.cp-tools__mq b.is-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(var(--ink-rgb), .55); }
|
||||||
|
.cp-tools__mq i { font-style: normal; font-size: .42em; margin: 0 .55em; vertical-align: .55em; }
|
||||||
|
.cp-tools__row:hover .marquee-track { animation-play-state: paused; }
|
||||||
|
.cp-tools__row:hover b { color: var(--lime); }
|
||||||
|
.cp-tools__row:hover b.is-outline { color: transparent; -webkit-text-stroke-color: var(--lime); }
|
||||||
|
.cp-tools__row:hover .cp-tools__label { color: var(--lime); }
|
||||||
|
|
||||||
|
/* Méthode : grand numéro fixé à gauche, étapes qui défilent */
|
||||||
|
.cp-method { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; margin-bottom: 120px; }
|
||||||
|
.cp-method__aside {
|
||||||
|
position: sticky; top: calc(96px + var(--admin)); align-self: start;
|
||||||
|
/* Jamais plus haut que l'écran : tout est dimensionné aussi sur la hauteur (vh) */
|
||||||
|
max-height: calc(100vh - 120px - var(--admin)); display: flex; flex-direction: column;
|
||||||
|
}
|
||||||
|
.cp-method__aside .cp-h { font-size: min(7vw, 11vh, 110px); margin-bottom: 2vh; }
|
||||||
|
.cp-method__big { position: relative; flex: 1 1 auto; min-height: 0; height: min(24vw, 36vh, 340px); }
|
||||||
|
.cp-method__num {
|
||||||
|
position: absolute; left: -.04em; bottom: 0;
|
||||||
|
font: 900 min(28vw, 42vh, 400px) var(--sans); line-height: .78; letter-spacing: -.06em;
|
||||||
|
color: transparent; -webkit-text-stroke: 2.5px var(--lime);
|
||||||
|
opacity: 0; transform: translateY(40%); transition: opacity .5s, transform .7s cubic-bezier(.2, .8, .2, 1);
|
||||||
|
}
|
||||||
|
.cp-method__num.is-on { opacity: 1; transform: none; }
|
||||||
|
.cp-method__steps { list-style: none; margin: 0; padding: 0; }
|
||||||
|
.cp-method__step {
|
||||||
|
min-height: min(62vh, 620px); display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 4vh 0;
|
||||||
|
border-top: 1px solid var(--b1); opacity: .22; transition: opacity .5s;
|
||||||
|
}
|
||||||
|
.cp-method__step.is-on { opacity: 1; }
|
||||||
|
.cp-method__k { font: 700 13px var(--mono); color: var(--lime); letter-spacing: .1em; }
|
||||||
|
.cp-method__t { font: 900 min(7vw, 12vh, 104px) var(--sans); line-height: .9; letter-spacing: -.04em; }
|
||||||
|
.cp-method__d { max-width: 460px; font: 400 18px/1.6 var(--sans); color: var(--mut70); }
|
||||||
|
|
||||||
|
.cp-infra { margin-bottom: 150px; }
|
||||||
|
|
||||||
|
/* Preuves : liste géante + vignette qui suit la souris */
|
||||||
|
.cp-proofs { margin-bottom: 40px; }
|
||||||
|
.cp-proofs__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--b1); }
|
||||||
|
.cp-proof {
|
||||||
|
/* Liens toujours sous le nom de la compétence (plus de bascule à droite / dessous) */
|
||||||
|
display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
|
||||||
|
padding: 22px var(--gut); border-top: 1px solid var(--b1); transition: padding-left .4s cubic-bezier(.2, .8, .2, 1);
|
||||||
|
}
|
||||||
|
.cp-proof__skill {
|
||||||
|
font: 900 min(6.4vw, 92px) var(--sans); line-height: .95; letter-spacing: -.035em;
|
||||||
|
color: transparent; -webkit-text-stroke: 1.5px rgba(var(--ink-rgb), .6); transition: color .35s, -webkit-text-stroke-color .35s;
|
||||||
|
}
|
||||||
|
.cp-proof:hover { padding-left: calc(var(--gut) + 28px); }
|
||||||
|
.cp-proof:hover .cp-proof__skill { color: var(--lime); -webkit-text-stroke-color: var(--lime); }
|
||||||
|
.cp-proof__links { display: flex; flex-wrap: wrap; gap: 22px; font: 700 14px var(--mono); }
|
||||||
|
.cp-proof__links a { color: var(--ink); border-bottom: 1px solid rgba(var(--lime-rgb), .4); padding-bottom: 3px; }
|
||||||
|
.cp-proof__links a:hover { color: var(--lime); border-color: var(--lime); }
|
||||||
|
.cp-preview {
|
||||||
|
position: fixed; left: 0; top: 0; z-index: 70; width: 340px; aspect-ratio: 16 / 10; pointer-events: none;
|
||||||
|
opacity: 0; transform: translate(-50%, -50%) scale(.8) rotate(var(--tilt, 0deg));
|
||||||
|
transition: opacity .25s, transform .35s cubic-bezier(.2, .8, .2, 1);
|
||||||
|
}
|
||||||
|
.cp-preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--tilt, 0deg)); }
|
||||||
|
/* Paquet : la carte de devant (k=0) est au-dessus, les autres décalées vers le haut-droite, un coin visible */
|
||||||
|
.cp-deck__card {
|
||||||
|
position: absolute; inset: 0; border-radius: 12px; overflow: hidden; background: var(--card);
|
||||||
|
border: 1px solid rgba(var(--ink-rgb), .18); box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
|
||||||
|
transform: translate(calc(var(--k) * 16px), calc(var(--k) * -14px)) rotate(calc(var(--k) * 5deg));
|
||||||
|
transition: transform .4s cubic-bezier(.2, .8, .2, 1);
|
||||||
|
}
|
||||||
|
.cp-deck__card[style*="--k:0"] { border-color: var(--lime); }
|
||||||
|
.cp-preview:not(.is-stack) .cp-deck__card { transform: none; }
|
||||||
|
.cp-preview.is-stack.is-on .cp-deck__card { transform: translate(calc(var(--k) * 22px), calc(var(--k) * -18px)) rotate(calc(var(--k) * 6deg)); }
|
||||||
|
.cp-deck__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||||
|
.cp-deck__name { position: absolute; left: 12px; bottom: 10px; z-index: 5; font: 700 12px var(--mono); color: var(--bg); background: var(--lime); padding: 4px 8px; border-radius: 4px; }
|
||||||
|
.cp-deck__count { position: absolute; right: -10px; top: -12px; z-index: 5; font: 700 12px var(--mono); color: var(--bg); background: var(--ink); padding: 4px 8px; border-radius: 99px; }
|
||||||
|
/* Roue ouverte : le paquet se fige et s'efface au centre */
|
||||||
|
.cp-preview.is-pinned { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(0deg); transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1); }
|
||||||
|
@media (pointer: coarse) { .cp-preview { display: none; } }
|
||||||
|
|
||||||
|
/* Roue de sélection façon « menu d'armes » */
|
||||||
|
.cp-wheel { position: fixed; inset: 0; z-index: 90; background: rgba(var(--bg-rgb), 0); transition: background .3s; cursor: crosshair; }
|
||||||
|
.cp-wheel.is-open { background: rgba(var(--bg-rgb), .72); }
|
||||||
|
.cp-wheel__svg {
|
||||||
|
position: absolute; transform: translate(-50%, -50%) scale(.6); border-radius: 50%;
|
||||||
|
border: 1.5px dashed rgba(var(--lime-rgb), .35); opacity: 0; transition: opacity .3s, transform .5s cubic-bezier(.2, .8, .2, 1);
|
||||||
|
}
|
||||||
|
.cp-wheel.is-open .cp-wheel__svg { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||||
|
/* Cartes du menu : elles partent du paquet (centre) et rejoignent leur place sur le cercle */
|
||||||
|
.cp-wheel__card {
|
||||||
|
position: absolute; border-radius: 12px; overflow: hidden; background: var(--card);
|
||||||
|
border: 1px solid rgba(var(--ink-rgb), .2); box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
|
||||||
|
opacity: 0; transform: translate(-50%, -50%) scale(.45);
|
||||||
|
transition: transform .55s cubic-bezier(.2, .8, .2, 1) var(--d), opacity .3s var(--d), filter .3s, border-color .3s, box-shadow .3s;
|
||||||
|
}
|
||||||
|
.cp-wheel.is-open .cp-wheel__card { opacity: 1; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); }
|
||||||
|
.cp-wheel.is-open .cp-wheel__card.is-hot {
|
||||||
|
z-index: 3; border-color: var(--lime); box-shadow: 0 0 0 2px var(--lime), 0 0 40px rgba(var(--lime-rgb), .35), 0 20px 50px rgba(0, 0, 0, .7);
|
||||||
|
transform: translate(calc(-50% + var(--tx) * 1.08), calc(-50% + var(--ty) * 1.08)) scale(1.12); transition-delay: 0s;
|
||||||
|
}
|
||||||
|
.cp-wheel.has-hot .cp-wheel__card:not(.is-hot) { filter: brightness(.45) saturate(.6); }
|
||||||
|
.cp-wheel__card img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
|
||||||
|
.cp-wheel__label { position: absolute; left: 10px; bottom: 9px; font: 700 11px var(--mono); color: var(--bg); background: var(--lime); padding: 3px 7px; border-radius: 4px; }
|
||||||
|
.cp-wheel.is-go .cp-wheel__card.is-hot { transform: translate(calc(-50% + var(--tx) * 1.08), calc(-50% + var(--ty) * 1.08)) scale(1.3); opacity: 0; transition: transform .3s, opacity .3s .05s; }
|
||||||
|
.cp-wheel__center {
|
||||||
|
position: absolute; z-index: 2; transform: translate(-50%, -50%); border-radius: 50%; width: 150px; height: 150px;
|
||||||
|
border: 1.5px dashed rgba(var(--lime-rgb), .5); background: rgba(var(--bg-rgb), .88);
|
||||||
|
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 0 14px;
|
||||||
|
opacity: 0; transition: opacity .3s .15s; pointer-events: none;
|
||||||
|
}
|
||||||
|
.cp-wheel.is-open .cp-wheel__center { opacity: 1; }
|
||||||
|
.cp-wheel__skill { font: 500 9.5px var(--mono); letter-spacing: .14em; color: var(--mut50); text-transform: uppercase; }
|
||||||
|
.cp-wheel__name { font: 900 21px var(--sans); line-height: 1; letter-spacing: -.02em; color: var(--lime); }
|
||||||
|
.cp-wheel__hint { font: 500 9.5px var(--mono); letter-spacing: .06em; color: var(--mut65); }
|
||||||
|
@media (max-width: 720px) { .cp-wheel__center { width: 100px; height: 100px; } .cp-wheel__name { font-size: 15px; } .cp-wheel__skill, .cp-wheel__hint { font-size: 8.5px; } }
|
||||||
|
html.has-custom-cursor .cp-wheel { cursor: none; }
|
||||||
|
.cp-proof { cursor: pointer; }
|
||||||
|
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.cp-svc__row { grid-template-columns: auto 1fr; gap: 10px 22px; padding: 30px var(--gut); }
|
||||||
|
.cp-svc__d { grid-column: 1 / -1; }
|
||||||
|
.cp-method { grid-template-columns: 1fr; gap: 10px; }
|
||||||
|
.cp-method__aside { position: static; }
|
||||||
|
.cp-method__big { display: none; }
|
||||||
|
.cp-method__step { min-height: 0; padding: 34px 0; opacity: 1; }
|
||||||
|
.cp-svc, .cp-tools, .cp-infra { margin-bottom: 100px; }
|
||||||
|
}
|
||||||
|
html.yb-static .cp-method__step { opacity: 1; }
|
||||||
|
@media (max-height: 560px) and (min-width: 861px) {
|
||||||
|
.cp-method__aside { position: static; max-height: none; }
|
||||||
|
.cp-method__big { display: none; }
|
||||||
|
.cp-method__step { min-height: 0; padding: 30px 0; opacity: 1; }
|
||||||
|
}
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.cp-manifest { font-size: 27px; line-height: 1.12; }
|
||||||
|
.cp-proof__skill { color: var(--ink); -webkit-text-stroke: 0; font-size: 30px; }
|
||||||
|
.cp-proof:hover { padding-left: var(--gut); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Preuves : étiquette « ARTICLE » pour les liens vers le blog */
|
||||||
|
.cp-proof__kind { font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--bg); background: rgba(var(--ink-rgb), .75); padding: 2px 5px; border-radius: 3px; vertical-align: 2px; }
|
||||||
|
.cp-proof__links a.is-article { border-bottom-style: dashed; }
|
||||||
|
.cp-wheel__label.is-article { background: var(--ink); }
|
||||||
|
|
||||||
|
/* ══ Bascule clair / sombre ══════════════════════════════════════════ */
|
||||||
|
.theme-toggle {
|
||||||
|
position: relative; width: 36px; height: 36px; flex: none; padding: 0; cursor: pointer;
|
||||||
|
border: 1px solid rgba(var(--ink-rgb), .3); border-radius: 50%; background: transparent; color: var(--ink);
|
||||||
|
transition: border-color .25s, background .25s, color .25s;
|
||||||
|
}
|
||||||
|
.theme-toggle:hover { border-color: var(--lime); color: var(--lime); }
|
||||||
|
.theme-toggle svg {
|
||||||
|
position: absolute; inset: 0; margin: auto; width: 17px; height: 17px;
|
||||||
|
fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
|
||||||
|
transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .3s;
|
||||||
|
}
|
||||||
|
.theme-toggle__moon { fill: currentColor; stroke: none; }
|
||||||
|
/* En sombre : on montre le soleil (« passer en clair ») ; en clair : la lune */
|
||||||
|
.theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
|
||||||
|
html[data-theme="light"] .theme-toggle__sun { opacity: 0; transform: rotate(90deg) scale(.4); }
|
||||||
|
html[data-theme="light"] .theme-toggle__moon { opacity: 1; transform: none; }
|
||||||
|
|
||||||
|
/* Bascule animée : cercle qui s'étend depuis le bouton (View Transitions) */
|
||||||
|
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
|
||||||
|
::view-transition-new(root) { z-index: 9999; }
|
||||||
|
/* Navigateurs sans View Transitions : fondu des couleurs le temps de la bascule */
|
||||||
|
html.theme-fade, html.theme-fade * { transition: background-color .45s, color .45s, border-color .45s, fill .45s, stroke .45s !important; }
|
||||||
|
|
||||||
|
/* ══ Page Qui suis-je (refonte) ══════════════════════════════════════ */
|
||||||
|
.qs .page-wrap { min-height: 0; padding-top: 0; padding-bottom: 0; }
|
||||||
|
.qs-hero.page-wrap {
|
||||||
|
padding-top: calc(150px + var(--admin)); padding-bottom: 110px;
|
||||||
|
display: grid; grid-template-columns: 1.3fr minmax(280px, 1fr); gap: 70px; align-items: end;
|
||||||
|
}
|
||||||
|
.qs-title { font: 900 min(7.6vw, 124px) var(--sans); line-height: .84; letter-spacing: -.045em; margin: 0 0 54px; }
|
||||||
|
.qs-lead { margin: 0 0 26px; max-width: 900px; font: 800 min(3.3vw, 44px)/1.12 var(--sans); letter-spacing: -.02em; color: var(--ink); }
|
||||||
|
.qs-sub { margin: 0; max-width: 620px; font: 400 17px/1.7 var(--sans); color: var(--mut70); }
|
||||||
|
|
||||||
|
/* Portrait : cadre lime décalé, gris → couleur et inclinaison au survol */
|
||||||
|
.qs-portrait { position: relative; margin: 0 18px 18px 0; }
|
||||||
|
.qs-portrait::before {
|
||||||
|
content: ''; position: absolute; inset: 0; transform: translate(18px, 18px);
|
||||||
|
border: 2px solid var(--lime); border-radius: 16px; transition: transform .5s cubic-bezier(.2, .8, .2, 1);
|
||||||
|
}
|
||||||
|
.qs-portrait:hover::before { transform: translate(26px, 26px); }
|
||||||
|
.qs-portrait__frame {
|
||||||
|
position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--ph);
|
||||||
|
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out;
|
||||||
|
}
|
||||||
|
.qs-portrait__frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.06); transform: scale(1.04); transition: filter .6s, transform .8s cubic-bezier(.2, .8, .2, 1); }
|
||||||
|
.qs-portrait:hover .qs-portrait__frame img { filter: none; transform: scale(1); }
|
||||||
|
.qs-portrait__cap { margin-top: 44px; font: 500 11px var(--mono); letter-spacing: .2em; color: var(--mut50); }
|
||||||
|
|
||||||
|
/* Fiche en terminal tapé */
|
||||||
|
.qs-who { margin-bottom: 150px; }
|
||||||
|
.qs-term { max-width: 820px; }
|
||||||
|
.qs-term__body { font-size: 14px; gap: 10px; }
|
||||||
|
.qs-term__row { display: grid; grid-template-columns: 150px 1fr; gap: 18px; }
|
||||||
|
.qs-term__k { color: var(--mut45); }
|
||||||
|
.qs-term__k::after { content: ' :'; }
|
||||||
|
.qs-term__v { color: var(--ink); }
|
||||||
|
.qs-term__caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--lime); animation: yb-pulse 1s steps(1) infinite; }
|
||||||
|
.qs-term [data-type-row] { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
|
||||||
|
.qs-term [data-type-row].is-typed { opacity: 1; transform: none; }
|
||||||
|
html.yb-static .qs-term [data-type-row] { opacity: 1; transform: none; }
|
||||||
|
|
||||||
|
/* Compétences : nom géant en contour qui se remplit de lime jusqu'au pourcentage */
|
||||||
|
.qs-skills { margin-bottom: 150px; }
|
||||||
|
.qs-gauges { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--b1); }
|
||||||
|
.qs-gauge {
|
||||||
|
display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
|
||||||
|
padding: 22px var(--gut) 20px; border-top: 1px solid var(--b1);
|
||||||
|
}
|
||||||
|
.qs-gauge__name {
|
||||||
|
position: relative; display: inline-block;
|
||||||
|
font: 900 min(6.6vw, 96px) var(--sans); line-height: .95; letter-spacing: -.035em;
|
||||||
|
color: transparent; -webkit-text-stroke: 1.5px rgba(var(--ink-rgb), .35);
|
||||||
|
}
|
||||||
|
.qs-gauge__name::after {
|
||||||
|
content: attr(data-text); position: absolute; inset: 0; color: var(--lime); -webkit-text-stroke: 0;
|
||||||
|
clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.2, .8, .2, 1);
|
||||||
|
}
|
||||||
|
.qs-gauge.is-in .qs-gauge__name::after { clip-path: inset(0 calc(100% - var(--pct)) 0 0); }
|
||||||
|
html.yb-static .qs-gauge__name::after { clip-path: inset(0 calc(100% - var(--pct)) 0 0); transition: none; }
|
||||||
|
.qs-gauge__meta { display: flex; align-items: baseline; gap: 16px; font: 500 12px var(--mono); letter-spacing: .12em; color: var(--mut50); text-transform: uppercase; }
|
||||||
|
.qs-gauge__meta b { font: 900 min(4vw, 48px) var(--sans); letter-spacing: -.03em; color: var(--lime); }
|
||||||
|
|
||||||
|
/* Parcours : frise, ligne lime tracée au scroll */
|
||||||
|
.qs-path { margin-bottom: 140px; }
|
||||||
|
.qs-tl { position: relative; padding-left: 44px; }
|
||||||
|
.qs-tl__line { position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: var(--b2); }
|
||||||
|
.qs-tl__fill { position: absolute; left: 0; top: 0; width: 100%; height: var(--p, 0%); background: var(--lime); }
|
||||||
|
html.yb-static .qs-tl__fill { height: 100%; }
|
||||||
|
.qs-tl__list { list-style: none; margin: 0; padding: 0; }
|
||||||
|
.qs-tl__item { position: relative; display: grid; grid-template-columns: minmax(170px, 260px) 1fr; gap: 40px; padding: 34px 0; border-top: 1px solid var(--b1); }
|
||||||
|
.qs-tl__dot { position: absolute; left: -44px; top: 46px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--lime); }
|
||||||
|
.qs-tl__item.is-now .qs-tl__dot { background: var(--lime); box-shadow: 0 0 0 6px rgba(var(--lime-rgb), .2); animation: yb-pulse 2s infinite; }
|
||||||
|
.qs-tl__year { font: 900 min(8vw, 116px) var(--sans); line-height: .82; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--lime); }
|
||||||
|
.qs-tl__item.is-now .qs-tl__year { color: var(--lime); -webkit-text-stroke: 0; }
|
||||||
|
.qs-tl__year small { display: block; margin-top: 10px; font: 700 13px var(--mono); letter-spacing: .1em; color: var(--mut50); -webkit-text-stroke: 0; }
|
||||||
|
.qs-tl__date { font: 500 12px var(--mono); letter-spacing: .1em; color: var(--lime); margin-bottom: 10px; }
|
||||||
|
.qs-tl__now { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 4px; background: var(--lime); color: var(--bg); font-weight: 700; letter-spacing: .14em; }
|
||||||
|
.qs-tl__title { font: 900 min(3.4vw, 46px) var(--sans); line-height: 1; letter-spacing: -.025em; margin-bottom: 10px; }
|
||||||
|
.qs-tl__place { font: 500 12px var(--mono); letter-spacing: .1em; color: var(--mut50); margin-bottom: 14px; }
|
||||||
|
.qs-tl__desc { margin: 0; max-width: 640px; font: 400 16px/1.65 var(--sans); color: var(--mut70); }
|
||||||
|
.qs-mq { margin-bottom: 0; }
|
||||||
|
.qs-mq .skills-mq__track { font-size: min(5vw, 64px); }
|
||||||
|
.qs-mq i { font-style: normal; font-size: .5em; vertical-align: .4em; }
|
||||||
|
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
.qs-hero.page-wrap { grid-template-columns: 1fr; gap: 50px; padding-bottom: 80px; }
|
||||||
|
.qs-portrait { max-width: 420px; }
|
||||||
|
.qs-lead { font-size: 26px; }
|
||||||
|
}
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.qs-term__row { grid-template-columns: 1fr; gap: 2px; }
|
||||||
|
.qs-term__body { font-size: 12.5px; }
|
||||||
|
.qs-gauge__name { font-size: 30px; }
|
||||||
|
.qs-tl { padding-left: 30px; }
|
||||||
|
.qs-tl__dot { left: -30px; }
|
||||||
|
.qs-tl__item { grid-template-columns: 1fr; gap: 14px; }
|
||||||
|
.qs-tl__title { font-size: 26px; }
|
||||||
|
.qs-who, .qs-skills, .qs-path { margin-bottom: 100px; }
|
||||||
|
}
|
||||||
|
.qs-title .outline-lime { white-space: nowrap; }
|
||||||
|
@media (max-width: 960px) { .qs-title { font-size: min(15vw, 124px); } }
|
||||||
|
|
||||||
|
/* ══ Page Contact (refonte) ══════════════════════════════════════════ */
|
||||||
|
.ct .page-wrap { min-height: 0; padding-bottom: 0; }
|
||||||
|
.ct-open.page-wrap { padding-top: calc(150px + var(--admin)); padding-bottom: 80px; }
|
||||||
|
.ct-title { font-size: min(11.4vw, 168px); }
|
||||||
|
.ct-meta { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 48px; font: 500 12px var(--mono); letter-spacing: .14em; color: var(--mut50); }
|
||||||
|
.ct-meta b { font-weight: 700; }
|
||||||
|
.ct-list { list-style: none; margin: 0 0 110px; padding: 0; border-bottom: 1px solid var(--b2); }
|
||||||
|
.ct-row {
|
||||||
|
position: relative; isolation: isolate; overflow: hidden;
|
||||||
|
display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; align-items: center; gap: 28px;
|
||||||
|
padding: 30px var(--gut); border-top: 1px solid var(--b2);
|
||||||
|
}
|
||||||
|
.ct-row::before {
|
||||||
|
content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(var(--lime-rgb), .07);
|
||||||
|
transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.2, .8, .2, 1);
|
||||||
|
}
|
||||||
|
.ct-row:hover::before { transform: scaleY(1); }
|
||||||
|
.ct-row__k { font: 500 12px var(--mono); letter-spacing: .18em; color: var(--mut50); }
|
||||||
|
.ct-row__big {
|
||||||
|
font: 900 min(4.3vw, 64px) var(--sans); line-height: 1; letter-spacing: -.035em; white-space: nowrap; min-width: 0;
|
||||||
|
color: transparent; -webkit-text-stroke: 1.5px rgba(var(--ink-rgb), .55); transition: color .35s, -webkit-text-stroke-color .35s;
|
||||||
|
}
|
||||||
|
.ct-row:hover .ct-row__big { color: var(--lime); -webkit-text-stroke-color: var(--lime); }
|
||||||
|
.ct-row__acts { display: flex; gap: 10px; align-items: center; }
|
||||||
|
.ct-copy, .ct-row__act {
|
||||||
|
font: 700 12px var(--mono); letter-spacing: .08em; padding: 10px 16px; border-radius: 99px; white-space: nowrap; cursor: pointer;
|
||||||
|
border: 1px solid rgba(var(--ink-rgb), .3); background: transparent; color: var(--ink); transition: background .25s, color .25s, border-color .25s;
|
||||||
|
}
|
||||||
|
.ct-row__act { border-color: rgba(var(--lime-rgb), .5); color: var(--lime); }
|
||||||
|
.ct-copy:hover { border-color: var(--ink); }
|
||||||
|
.ct-row__act:hover { background: var(--lime); color: var(--bg); }
|
||||||
|
.ct-preview {
|
||||||
|
position: fixed; left: 0; top: 0; z-index: 70; width: 230px; aspect-ratio: 210 / 297; pointer-events: none;
|
||||||
|
border-radius: 8px; overflow: hidden; border: 1px solid var(--lime); box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
|
||||||
|
opacity: 0; transform: translate(-50%, -50%) rotate(-5deg) scale(.85); transition: opacity .25s, transform .4s cubic-bezier(.2, .8, .2, 1);
|
||||||
|
}
|
||||||
|
.ct-preview.is-on { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
|
||||||
|
.ct-preview img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
|
||||||
|
.ct-toast {
|
||||||
|
position: fixed; left: 50%; bottom: 32px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
|
||||||
|
font: 700 12px var(--mono); letter-spacing: .06em; color: var(--bg); background: var(--lime); padding: 10px 16px; border-radius: 99px;
|
||||||
|
transition: opacity .25s, transform .35s cubic-bezier(.2, .8, .2, 1);
|
||||||
|
}
|
||||||
|
.ct-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
|
||||||
|
@media (pointer: coarse) { .ct-preview { display: none; } }
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.ct-row { grid-template-columns: 1fr; gap: 12px; padding: 26px var(--gut); }
|
||||||
|
.ct-row__big { font-size: min(6.6vw, 44px); color: var(--ink); -webkit-text-stroke: 0; }
|
||||||
|
.ct-list { margin-bottom: 80px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Coordonnées protégées : « •••••••• » tant qu'elles ne sont pas décodées */
|
||||||
|
.yb-pv { letter-spacing: .08em; }
|
||||||
BIN
assets/fonts/Archivo-100-900-latin-ext.woff2
Normal file
BIN
assets/fonts/Archivo-100-900-latin-ext.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/Archivo-100-900-latin.woff2
Normal file
BIN
assets/fonts/Archivo-100-900-latin.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/JetBrainsMono-400-latin-ext.woff2
Normal file
BIN
assets/fonts/JetBrainsMono-400-latin-ext.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/JetBrainsMono-400-latin.woff2
Normal file
BIN
assets/fonts/JetBrainsMono-400-latin.woff2
Normal file
Binary file not shown.
75
assets/fonts/fonts.css
Normal file
75
assets/fonts/fonts.css
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
/* Polices auto-hébergées (licence SIL OFL 1.1) : Archivo, JetBrains Mono. Sous-ensembles latin + latin-ext. */
|
||||||
|
/* latin-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Archivo';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-stretch: 62% 125%;
|
||||||
|
font-display: swap;
|
||||||
|
src: url(Archivo-100-900-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Archivo';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-stretch: 62% 125%;
|
||||||
|
font-display: swap;
|
||||||
|
src: url(Archivo-100-900-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;
|
||||||
|
}
|
||||||
|
/* latin-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'JetBrains Mono';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: url(JetBrainsMono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'JetBrains Mono';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: url(JetBrainsMono-400-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;
|
||||||
|
}
|
||||||
|
/* latin-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'JetBrains Mono';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-display: swap;
|
||||||
|
src: url(JetBrainsMono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'JetBrains Mono';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-display: swap;
|
||||||
|
src: url(JetBrainsMono-400-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;
|
||||||
|
}
|
||||||
|
/* latin-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'JetBrains Mono';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-display: swap;
|
||||||
|
src: url(JetBrainsMono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'JetBrains Mono';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-display: swap;
|
||||||
|
src: url(JetBrainsMono-400-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;
|
||||||
|
}
|
||||||
57
assets/js/about.js
Normal file
57
assets/js/about.js
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
/* about.js : interactions propres à la page « Qui suis-je »
|
||||||
|
- terminal : la commande se tape lettre par lettre, puis les lignes de la fiche apparaissent
|
||||||
|
- portrait : légère inclinaison 3D qui suit la souris
|
||||||
|
- parcours : la ligne de la frise se remplit selon le scroll
|
||||||
|
Mode capture ?ybstatic=1 : tout est affiché d'emblée. */
|
||||||
|
(function () {
|
||||||
|
const STATIC = document.documentElement.classList.contains('yb-static');
|
||||||
|
const TOUCH = matchMedia('(pointer: coarse)').matches;
|
||||||
|
|
||||||
|
/* Terminal tapé */
|
||||||
|
const term = document.querySelector('[data-type]');
|
||||||
|
if (term) {
|
||||||
|
const cmd = term.querySelector('[data-type-cmd]'), rows = [...term.querySelectorAll('[data-type-row]')];
|
||||||
|
const full = cmd ? cmd.textContent : '';
|
||||||
|
if (STATIC) rows.forEach(r => r.classList.add('is-typed'));
|
||||||
|
else {
|
||||||
|
if (cmd) cmd.textContent = '';
|
||||||
|
const io = new IntersectionObserver(es => es.forEach(en => {
|
||||||
|
if (!en.isIntersecting) return;
|
||||||
|
io.disconnect();
|
||||||
|
let i = 0;
|
||||||
|
const type = () => {
|
||||||
|
if (cmd && i <= full.length) { cmd.textContent = full.slice(0, i++); return setTimeout(type, 45 + Math.random() * 40); }
|
||||||
|
rows.forEach((r, k) => setTimeout(() => r.classList.add('is-typed'), 180 + k * 160));
|
||||||
|
};
|
||||||
|
setTimeout(type, 300);
|
||||||
|
}), { threshold: 0.45 });
|
||||||
|
io.observe(term);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Portrait incliné à la souris */
|
||||||
|
const frame = document.querySelector('[data-tilt]');
|
||||||
|
if (frame && !STATIC && !TOUCH) {
|
||||||
|
const fig = frame.parentElement;
|
||||||
|
fig.addEventListener('mousemove', e => {
|
||||||
|
const r = frame.getBoundingClientRect();
|
||||||
|
const x = (e.clientX - r.left) / r.width - 0.5, y = (e.clientY - r.top) / r.height - 0.5;
|
||||||
|
frame.style.setProperty('--ry', (x * 10).toFixed(2) + 'deg');
|
||||||
|
frame.style.setProperty('--rx', (-y * 10).toFixed(2) + 'deg');
|
||||||
|
});
|
||||||
|
fig.addEventListener('mouseleave', () => { frame.style.setProperty('--ry', '0deg'); frame.style.setProperty('--rx', '0deg'); });
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Frise du parcours */
|
||||||
|
const tl = document.querySelector('[data-timeline]');
|
||||||
|
if (tl && !STATIC) {
|
||||||
|
const fill = tl.querySelector('.qs-tl__fill');
|
||||||
|
const tick = () => {
|
||||||
|
const r = tl.getBoundingClientRect();
|
||||||
|
const p = Math.max(0, Math.min(1, (innerHeight * 0.6 - r.top) / r.height));
|
||||||
|
fill.style.height = (p * 100).toFixed(1) + '%';
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
};
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
}
|
||||||
|
})();
|
||||||
193
assets/js/competences.js
Normal file
193
assets/js/competences.js
Normal file
|
|
@ -0,0 +1,193 @@
|
||||||
|
/* competences.js : interactions propres à la page /competences/
|
||||||
|
- chiffres du manifeste qui défilent jusqu'à leur valeur à l'entrée dans l'écran
|
||||||
|
- méthode : l'étape au centre de l'écran s'allume, le grand numéro suit
|
||||||
|
- preuves : la vignette du projet suit la souris (lerp, comme le curseur)
|
||||||
|
Mode capture ?ybstatic=1 (html.yb-static) : tout reste figé dans son état final. */
|
||||||
|
(function () {
|
||||||
|
const STATIC = document.documentElement.classList.contains('yb-static');
|
||||||
|
|
||||||
|
/* Compteurs */
|
||||||
|
const nums = document.querySelectorAll('.cp-num[data-count]');
|
||||||
|
const show = (el, v) => {
|
||||||
|
const pad = +el.dataset.pad || 0, suf = el.dataset.suffix || '';
|
||||||
|
el.textContent = String(Math.round(v)).padStart(pad, '0') + suf;
|
||||||
|
};
|
||||||
|
if (!STATIC && nums.length) {
|
||||||
|
nums.forEach(el => show(el, 0));
|
||||||
|
const io = new IntersectionObserver(es => es.forEach(en => {
|
||||||
|
if (!en.isIntersecting) return;
|
||||||
|
io.unobserve(en.target);
|
||||||
|
const el = en.target, to = +el.dataset.count, t0 = performance.now(), dur = 1400;
|
||||||
|
const step = now => {
|
||||||
|
const k = Math.min(1, (now - t0) / dur), e = 1 - Math.pow(1 - k, 3);
|
||||||
|
show(el, to * e);
|
||||||
|
if (k < 1) requestAnimationFrame(step);
|
||||||
|
};
|
||||||
|
requestAnimationFrame(step);
|
||||||
|
}), { threshold: 0.6 });
|
||||||
|
nums.forEach(el => io.observe(el));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Méthode */
|
||||||
|
const steps = [...document.querySelectorAll('.cp-method__step')];
|
||||||
|
const bigs = [...document.querySelectorAll('.cp-method__num')];
|
||||||
|
if (steps.length && !STATIC) {
|
||||||
|
const set = i => {
|
||||||
|
steps.forEach((s, k) => s.classList.toggle('is-on', k === i));
|
||||||
|
bigs.forEach((b, k) => b.classList.toggle('is-on', k === i));
|
||||||
|
};
|
||||||
|
const io = new IntersectionObserver(es => es.forEach(en => { if (en.isIntersecting) set(+en.target.dataset.step); }),
|
||||||
|
{ rootMargin: '-45% 0px -45% 0px' });
|
||||||
|
steps.forEach(s => io.observe(s));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Preuves : paquet de cartes qui suit la souris + roue de sélection ──
|
||||||
|
- plusieurs projets : paquet (le premier devant, les autres derrière, un coin visible)
|
||||||
|
- près du bord droit, l'aperçu passe à gauche du curseur en glissant
|
||||||
|
- clic sur une compétence à plusieurs projets : le paquet se fige et une roue
|
||||||
|
façon « menu d'armes » s'ouvre autour ; la direction de la souris choisit le projet */
|
||||||
|
const prev = document.querySelector('.cp-preview');
|
||||||
|
const wheel = document.querySelector('.cp-wheel');
|
||||||
|
const rows = [...document.querySelectorAll('.cp-proof')];
|
||||||
|
if (!prev || !rows.length) return;
|
||||||
|
const TOUCH = matchMedia('(pointer: coarse)').matches;
|
||||||
|
const esc = t => String(t).replace(/[&<>"]/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[c]));
|
||||||
|
const itemsOf = li => [...li.querySelectorAll('a[data-thumb]')].map(a => ({ a, name: a.dataset.name, thumb: a.dataset.thumb, tag: a.dataset.tag || '', kind: a.dataset.kind || 'projet' }));
|
||||||
|
const label = it => (it.kind === 'article' ? 'ARTICLE · ' : '') + it.name;
|
||||||
|
|
||||||
|
/* Paquet de cartes */
|
||||||
|
const buildDeck = (items, frontIdx = 0) => {
|
||||||
|
const order = [items[frontIdx], ...items.filter((_, k) => k !== frontIdx)].slice(0, 3);
|
||||||
|
prev.innerHTML = order.map((it, k) => `<div class="cp-deck__card" style="--k:${k}"><img src="${esc(it.thumb)}" alt=""></div>`).reverse().join('')
|
||||||
|
+ `<span class="cp-deck__name">${esc(label(order[0]))}</span>`
|
||||||
|
+ (items.length > 1 ? `<span class="cp-deck__count">+${items.length - 1}</span>` : '');
|
||||||
|
prev.classList.toggle('is-stack', items.length > 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
/* Suivi de la souris avec bascule gauche/droite fluide */
|
||||||
|
const W = () => prev.offsetWidth || 360, GAP = 40;
|
||||||
|
const m = { x: innerWidth / 2, y: innerHeight / 2, cx: innerWidth / 2, cy: innerHeight / 2, off: 1 };
|
||||||
|
let hovering = false, pinned = false, curRow = null;
|
||||||
|
if (!STATIC && !TOUCH) {
|
||||||
|
addEventListener('mousemove', e => { m.x = e.clientX; m.y = e.clientY; }, { passive: true });
|
||||||
|
rows.forEach(li => {
|
||||||
|
li.addEventListener('mouseenter', () => { if (pinned) return; curRow = li; buildDeck(itemsOf(li)); prev.classList.add('is-on'); hovering = true; });
|
||||||
|
li.addEventListener('mouseleave', () => { if (pinned) return; prev.classList.remove('is-on'); hovering = false; });
|
||||||
|
itemsOf(li).forEach((it, k) => it.a.addEventListener('mouseenter', () => { if (!pinned) buildDeck(itemsOf(li), k); }));
|
||||||
|
});
|
||||||
|
(function loop() {
|
||||||
|
if (!pinned) {
|
||||||
|
const w = W();
|
||||||
|
/* Côté voulu : à droite du curseur, sauf si l'aperçu sortirait de l'écran */
|
||||||
|
const want = (m.x + GAP + w + 24 > innerWidth) ? -1 : 1;
|
||||||
|
m.off += (want - m.off) * 0.12; // glisse d'un côté à l'autre
|
||||||
|
const tx = m.x + m.off * (GAP + w / 2);
|
||||||
|
const ty = Math.max(w * 0.32 + 16, Math.min(innerHeight - w * 0.32 - 16, m.y));
|
||||||
|
m.cx += (tx - m.cx) * 0.16; m.cy += (ty - m.cy) * 0.16;
|
||||||
|
prev.style.left = m.cx + 'px'; prev.style.top = m.cy + 'px';
|
||||||
|
prev.style.setProperty('--tilt', Math.max(-7, Math.min(7, (tx - m.cx) * 0.03)) + 'deg');
|
||||||
|
}
|
||||||
|
requestAnimationFrame(loop);
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Menu circulaire : les cartes du paquet s'écartent en cercle autour du clic ──
|
||||||
|
2 cartes : gauche / droite ; 3 et plus : réparties en partant du haut.
|
||||||
|
La direction de la souris (ou du doigt) choisit la carte, comme une roue de jeu. */
|
||||||
|
if (!wheel) return;
|
||||||
|
const ring = wheel.querySelector('.cp-wheel__svg');
|
||||||
|
const cSkill = wheel.querySelector('.cp-wheel__skill'), cName = wheel.querySelector('.cp-wheel__name'), cHint = wheel.querySelector('.cp-wheel__hint');
|
||||||
|
let wItems = [], cards = [], angles = [], hot = -1, wc = { x: 0, y: 0 }, rad = 230;
|
||||||
|
const setHot = i => {
|
||||||
|
if (i === hot) return;
|
||||||
|
hot = i;
|
||||||
|
cards.forEach((c, k) => c.classList.toggle('is-hot', k === i));
|
||||||
|
wheel.classList.toggle('has-hot', i >= 0);
|
||||||
|
const it = wItems[i];
|
||||||
|
cName.textContent = it ? it.name : '';
|
||||||
|
cHint.textContent = it ? (it.kind === 'article' ? it.tag : (it.tag ? it.tag.split(' · ').slice(0, 2).join(' · ') : 'VOIR LE PROJET')) : '';
|
||||||
|
};
|
||||||
|
function openWheel(li, x, y) {
|
||||||
|
wItems = itemsOf(li);
|
||||||
|
if (wItems.length < 2) { wItems[0] && wItems[0].a.click(); return; }
|
||||||
|
pinned = true; hot = -1;
|
||||||
|
const N = wItems.length, small = innerWidth < 720;
|
||||||
|
const cw = small ? Math.min(132, innerWidth * 0.34) : 250, ch = cw / 1.6;
|
||||||
|
const start = N === 2 ? Math.PI : -Math.PI / 2, step = (Math.PI * 2) / N;
|
||||||
|
const base = wItems.map((_, k) => start + k * step);
|
||||||
|
const maxCos = Math.max(...base.map(a => Math.abs(Math.cos(a)))) || 0.01;
|
||||||
|
const maxSin = Math.max(...base.map(a => Math.abs(Math.sin(a)))) || 0.01;
|
||||||
|
/* Écartement voulu, puis réduit si la carte la plus excentrée sortirait de l'écran.
|
||||||
|
Sur téléphone le cercle devient un ovale : étroit en largeur, plus haut. */
|
||||||
|
const want = small ? cw * 0.95 + 24 : (N === 2 ? cw * 0.82 + 40 : cw * 0.95 + 20);
|
||||||
|
/* La carte visée grossit (×1.12) et s'écarte (×1.08) : on réserve cette place */
|
||||||
|
const HX = 1.08, HW = 0.56;
|
||||||
|
const rx = Math.min(want, (innerWidth / 2 - cw * HW - 10) / (maxCos * HX));
|
||||||
|
const ry = Math.min(small ? Math.max(want, rx * 1.35, ch + 70) : want, (innerHeight / 2 - ch * HW - 10) / (maxSin * HX));
|
||||||
|
rad = Math.max(rx, ry);
|
||||||
|
const ex = maxCos * rx * HX + cw * HW + 10, ey = maxSin * ry * HX + ch * HW + 10;
|
||||||
|
wc.x = Math.max(ex, Math.min(innerWidth - ex, x));
|
||||||
|
wc.y = Math.max(ey, Math.min(innerHeight - ey, y));
|
||||||
|
/* Angles réels des cartes (ovale) : servent à la visée par direction */
|
||||||
|
angles = base.map(a => Math.atan2(Math.sin(a) * ry, Math.cos(a) * rx));
|
||||||
|
const pos = base.map(a => [Math.cos(a) * rx, Math.sin(a) * ry]);
|
||||||
|
ring.innerHTML = '';
|
||||||
|
wheel.querySelectorAll('.cp-wheel__card').forEach(c => c.remove());
|
||||||
|
cards = wItems.map((it, k) => {
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'cp-wheel__card';
|
||||||
|
el.style.cssText = `width:${cw}px;height:${ch}px;left:${wc.x}px;top:${wc.y}px;--d:${k * 45}ms;--tx:${pos[k][0]}px;--ty:${pos[k][1]}px`;
|
||||||
|
el.innerHTML = `<img src="${esc(it.thumb)}" alt=""><span class="cp-wheel__label${it.kind === 'article' ? ' is-article' : ''}">${esc(label(it))}</span>`;
|
||||||
|
el.addEventListener('pointerenter', () => setHot(k));
|
||||||
|
wheel.appendChild(el);
|
||||||
|
return el;
|
||||||
|
});
|
||||||
|
ring.style.cssText = `left:${wc.x}px;top:${wc.y}px;width:${rx * 2}px;height:${ry * 2}px`;
|
||||||
|
const c = wheel.querySelector('.cp-wheel__center');
|
||||||
|
c.style.left = wc.x + 'px'; c.style.top = wc.y + 'px';
|
||||||
|
cSkill.textContent = li.querySelector('.cp-proof__skill').textContent;
|
||||||
|
wheel.hidden = false;
|
||||||
|
requestAnimationFrame(() => requestAnimationFrame(() => wheel.classList.add('is-open')));
|
||||||
|
prev.classList.add('is-pinned');
|
||||||
|
document.body.classList.add('no-scroll');
|
||||||
|
setHot(0);
|
||||||
|
}
|
||||||
|
function closeWheel() {
|
||||||
|
if (wheel.hidden) return;
|
||||||
|
wheel.classList.remove('is-open', 'has-hot'); prev.classList.remove('is-pinned');
|
||||||
|
document.body.classList.remove('no-scroll');
|
||||||
|
setTimeout(() => { wheel.hidden = true; pinned = false; if (!hovering) prev.classList.remove('is-on'); }, 380);
|
||||||
|
}
|
||||||
|
rows.forEach(li => li.addEventListener('click', e => {
|
||||||
|
if (e.target.closest('a')) return; // les liens texte restent des liens
|
||||||
|
const rect = prev.getBoundingClientRect();
|
||||||
|
const onDeck = prev.classList.contains('is-on') && !TOUCH;
|
||||||
|
openWheel(li, onDeck ? rect.left + rect.width / 2 : (TOUCH ? innerWidth / 2 : e.clientX), onDeck ? rect.top + rect.height / 2 : (TOUCH ? innerHeight / 2 : e.clientY));
|
||||||
|
}));
|
||||||
|
/* Carte la plus proche de la direction visée */
|
||||||
|
const aim = (x, y) => {
|
||||||
|
const dx = x - wc.x, dy = y - wc.y;
|
||||||
|
if (Math.hypot(dx, dy) < 40) return;
|
||||||
|
const a = Math.atan2(dy, dx);
|
||||||
|
let best = 0, bd = 9;
|
||||||
|
angles.forEach((b, k) => { const d = Math.abs(Math.atan2(Math.sin(a - b), Math.cos(a - b))); if (d < bd) { bd = d; best = k; } });
|
||||||
|
setHot(best);
|
||||||
|
};
|
||||||
|
wheel.addEventListener('pointermove', e => aim(e.clientX, e.clientY));
|
||||||
|
wheel.addEventListener('click', e => {
|
||||||
|
const d = Math.hypot(e.clientX - wc.x, e.clientY - wc.y);
|
||||||
|
const onCard = e.target.closest('.cp-wheel__card');
|
||||||
|
if (!onCard && (d > rad * 1.9 || d < 40)) return closeWheel(); // clic au centre ou loin dehors
|
||||||
|
if (!onCard) aim(e.clientX, e.clientY);
|
||||||
|
const it = wItems[hot];
|
||||||
|
if (it) { wheel.classList.add('is-go'); setTimeout(() => it.a.click(), 180); }
|
||||||
|
});
|
||||||
|
addEventListener('keydown', e => {
|
||||||
|
if (wheel.hidden) return;
|
||||||
|
if (e.key === 'Escape') closeWheel();
|
||||||
|
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); setHot((hot + 1) % wItems.length); }
|
||||||
|
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); setHot((hot - 1 + wItems.length) % wItems.length); }
|
||||||
|
if (e.key === 'Enter' && wItems[hot]) wItems[hot].a.click();
|
||||||
|
});
|
||||||
|
addEventListener('pageshow', () => { wheel.classList.remove('is-open', 'is-go', 'has-hot'); wheel.hidden = true; pinned = false; document.body.classList.remove('no-scroll'); });
|
||||||
|
})();
|
||||||
106
assets/js/cursor.js
Normal file
106
assets/js/cursor.js
Normal file
|
|
@ -0,0 +1,106 @@
|
||||||
|
/* cursor.js : Curseur custom (desktop uniquement)
|
||||||
|
YBCursor.init();
|
||||||
|
Au repos : point accent. Sur un lien / bouton : le point s'étire en index et la main apparaît autour
|
||||||
|
(le bout du doigt reste sur la position de la souris). data-cursor-label="VOIR LE PROJET" = label contextuel.
|
||||||
|
La main change selon la fête quand c'est cohérent (html[data-season]), relue à chaque événement yb:theme.
|
||||||
|
Dans la roue des projets et articles (.cp-wheel) : le point devient une loupe, elle aussi accordée à la fête. */
|
||||||
|
window.YBCursor = (function () {
|
||||||
|
let wrap, dot, hand, loupe, lbl, curSeason = null, override = null;
|
||||||
|
const m = { x: -100, y: -100, cx: -100, cy: -100 };
|
||||||
|
|
||||||
|
/* Silhouette commune : main qui pointe, bout de l'index en (11.5, 1) */
|
||||||
|
const SHAPE = 'M11.5 1C13.2 1 14.5 2.3 14.5 4v9.2c.5-.7 1.4-1.1 2.4-1.1 1.3 0 2.4.8 2.7 1.9.5-.5 1.3-.8 2.2-.8 1.5 0 2.7 1.1 2.8 2.5.5-.4 1.2-.6 1.9-.6 1.5 0 2.7 1.2 2.7 2.7V25c0 5.5-4 9.5-9.5 9.5h-2.3c-3.4 0-5.8-1.3-7.8-3.9l-5.4-7.1c-.9-1.2-.7-2.9.5-3.8 1.2-.9 2.8-.7 3.7.4l.1.1V4c0-1.7 1.3-3 3-3z';
|
||||||
|
const CREASES = 'M14.5 13.2V19M19.6 14v5.5M24.6 15.7V20';
|
||||||
|
const base = (fill, stroke, extra, crease) =>
|
||||||
|
'<path d="' + SHAPE + '" fill="' + fill + '" stroke="' + stroke + '" stroke-width="1.4" stroke-linejoin="round"/>' +
|
||||||
|
'<path d="' + CREASES + '" fill="none" stroke="' + (crease || stroke) + '" stroke-width="1.2" stroke-linecap="round"/>' + (extra || '');
|
||||||
|
const HANDS = {
|
||||||
|
'': () => base('var(--lime)', 'var(--bg)'),
|
||||||
|
// gant squelette : os blancs sur gant noir
|
||||||
|
halloween: () => base('#15101a', 'var(--lime)',
|
||||||
|
'<g fill="none" stroke="#efe6d2" stroke-width="1.6" stroke-linecap="round"><path d="M11.5 3.6v3.4M11.5 9.2v3.8M11.5 15.2v4"/><path d="M17 15.6v2.6M22 16.6v2.4M27 18.4v2.2"/><path d="M12.6 23.8l2.8 5.6M17 22.6l1 6.6M21.4 22.6l-.6 6.6M25.6 23.6l-2.4 5.8"/><circle cx="18.6" cy="31.2" r="1.2" fill="#efe6d2"/></g>', '#efe6d2'),
|
||||||
|
// gant rouge et revers en fourrure blanche
|
||||||
|
noel: () => base('#d61f35', '#5a0b16',
|
||||||
|
'<rect x="9.2" y="29.6" width="20.6" height="6.2" rx="3.1" fill="#fdfbf6" stroke="#5a0b16" stroke-width="1.1"/>', '#8e1222'),
|
||||||
|
// gant vert, trèfle doré sur le dos de la main
|
||||||
|
'st-patrick': () => base('#1b8f4c', '#0b3d21',
|
||||||
|
'<g fill="#f2c14e" transform="translate(21 25)"><circle cx="-1.5" cy="-1.6" r="1.7"/><circle cx="1.5" cy="-1.6" r="1.7"/><circle cx="0" cy="1" r="1.7"/></g>'),
|
||||||
|
// gant blanc de cérémonie, revers doré, étincelle au bout du doigt
|
||||||
|
'nouvel-an': () => base('#ffffff', '#16141c',
|
||||||
|
'<rect x="9.4" y="30" width="20.2" height="5.4" rx="2.7" fill="#f2c14e" stroke="#16141c" stroke-width="1.1"/><path class="yb-hand-spark" d="M4 2l.9 2.1L7 5l-2.1.9L4 8l-.9-2.1L1 5l2.1-.9z" fill="#f2c14e"/>', '#9aa0b0'),
|
||||||
|
// gant de fête : turquoise, petite bague dorée
|
||||||
|
anniversaire: () => base('var(--lime)', 'var(--bg)',
|
||||||
|
'<path d="M8.6 15.4h5.8" stroke="#ffcf4a" stroke-width="2" stroke-linecap="round"/>')
|
||||||
|
};
|
||||||
|
|
||||||
|
/* Loupe : centre de la lentille en (14, 14) = position de la souris ; manche dessiné à plat puis tourné à 45° */
|
||||||
|
const lens = (ring, glass, handle, extra, inside) =>
|
||||||
|
'<g transform="rotate(45 14 14)"><rect x="24" y="11.6" width="14" height="4.8" rx="2.4" fill="' + handle + '" stroke="var(--bg)" stroke-width="1"/>' + (extra || '') + '</g>' +
|
||||||
|
'<circle cx="14" cy="14" r="10" fill="' + glass + '"/>' + (inside || '') +
|
||||||
|
'<circle cx="14" cy="14" r="10" fill="none" stroke="' + ring + '" stroke-width="3"/>' +
|
||||||
|
'<path d="M8.6 11.2a6 6 0 0 1 4-3.6" fill="none" stroke="#fff" stroke-opacity=".7" stroke-width="1.6" stroke-linecap="round"/>';
|
||||||
|
const stripes = (cols, w) => cols.map((c, i) => '<rect x="' + (24 + i * w) + '" y="11.6" width="' + w + '" height="4.8" fill="' + c + '"/>').join('');
|
||||||
|
const LOUPES = {
|
||||||
|
'': () => lens('var(--lime)', 'rgba(255,255,255,.08)', 'var(--ink)'),
|
||||||
|
// toile d'araignée dans le verre, manche en bois sombre
|
||||||
|
halloween: () => lens('var(--lime)', 'rgba(255,123,28,.1)', '#9a6a3a', '',
|
||||||
|
'<path d="M14 4.5v19M4.5 14h19M7.3 7.3l13.4 13.4M20.7 7.3 7.3 20.7M9.5 14a4.5 4.5 0 0 1 9 0 4.5 4.5 0 0 1-9 0M6.8 14a7.2 7.2 0 0 1 14.4 0 7.2 7.2 0 0 1-14.4 0" fill="none" stroke="#efe6d2" stroke-opacity=".35" stroke-width=".6"/>'),
|
||||||
|
// manche en sucre d'orge, cerclage doré
|
||||||
|
noel: () => lens('#f2c14e', 'rgba(255,255,255,.1)', '#fdfbf6', stripes(['#d61f35', 'transparent', '#d61f35', 'transparent', '#d61f35', 'transparent', '#d61f35'], 2)),
|
||||||
|
'st-patrick': () => lens('#f2c14e', 'rgba(61,220,132,.12)', '#1b8f4c', '', '<g fill="#3ddc84" fill-opacity=".55" transform="translate(17.5 17.5) scale(.8)"><circle cx="-1.5" cy="-1.6" r="1.7"/><circle cx="1.5" cy="-1.6" r="1.7"/><circle cx="0" cy="1" r="1.7"/></g>'),
|
||||||
|
'nouvel-an': () => lens('#f2c14e', 'rgba(242,193,78,.1)', '#d9dde8', stripes(['#f2c14e', '#f2c14e'], 2), '<path class="yb-hand-spark" d="M18 7l.7 1.6 1.6.7-1.6.7-.7 1.6-.7-1.6-1.6-.7 1.6-.7z" fill="#fff"/>'),
|
||||||
|
juillet: () => lens('#ffffff', 'rgba(255,255,255,.08)', '#ffffff', stripes(['#1f3fa8', '#1f3fa8', '#ffffff', '#ffffff', '#c8102e', '#c8102e', '#c8102e'], 2)),
|
||||||
|
'black-friday': () => lens('#ffd400', 'rgba(255,212,0,.1)', '#0b0b0b', stripes(['#ffd400', '#0b0b0b', '#ffd400', '#0b0b0b', '#ffd400', '#0b0b0b', '#ffd400'], 2)),
|
||||||
|
anniversaire: () => lens('var(--lime)', 'rgba(46,230,197,.1)', '#ffffff', stripes(['#2ee6c5', '#ffffff', '#ff6b81', '#ffffff', '#ffcf4a', '#ffffff', '#2ee6c5'], 2)),
|
||||||
|
poisson: () => lens('#4fd1ff', 'rgba(79,209,255,.12)', '#ffb347', '', '<circle cx="11" cy="17" r="1.6" fill="none" stroke="#fff" stroke-opacity=".5" stroke-width=".7"/><circle cx="16.5" cy="10.5" r="1" fill="none" stroke="#fff" stroke-opacity=".5" stroke-width=".7"/>')
|
||||||
|
};
|
||||||
|
|
||||||
|
function paint() {
|
||||||
|
const s = override !== null ? override : document.documentElement.getAttribute('data-season') || '';
|
||||||
|
const k = HANDS[s] ? s : '';
|
||||||
|
// aperçu (roue des thèmes) : la main prend aussi l'accent de la fête survolée
|
||||||
|
const acc = override !== null && override ? (((window.YB_SEASONS || {}).list || {})[override] || {}).accent || '' : '';
|
||||||
|
[hand, loupe].forEach(e => acc ? e.style.setProperty('--lime', acc) : e.style.removeProperty('--lime'));
|
||||||
|
const key = s + '|' + k;
|
||||||
|
if (key === curSeason) return;
|
||||||
|
curSeason = key;
|
||||||
|
hand.innerHTML = '<svg viewBox="-1 -1 34 38" width="34" height="38">' + HANDS[k]() + '</svg>';
|
||||||
|
loupe.innerHTML = '<svg viewBox="0 0 34 34" width="34" height="34">' + (LOUPES[s] || LOUPES[''])() + '</svg>';
|
||||||
|
}
|
||||||
|
function setState(label, link, inWheel) {
|
||||||
|
lbl.textContent = label || '';
|
||||||
|
lbl.style.opacity = label ? '1' : '0';
|
||||||
|
lbl.style.transform = label ? 'scale(1)' : 'scale(.6)';
|
||||||
|
wrap.classList.toggle('is-loupe', !!inWheel);
|
||||||
|
wrap.classList.toggle('is-hand', !!link && !inWheel);
|
||||||
|
}
|
||||||
|
function loop() {
|
||||||
|
m.cx += (m.x - m.cx) * 0.25; m.cy += (m.y - m.cy) * 0.25;
|
||||||
|
wrap.style.transform = 'translate(' + m.cx + 'px,' + m.cy + 'px)';
|
||||||
|
requestAnimationFrame(loop);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
/* Montre la main d'une fête sans l'activer ('' = main normale, null = revenir à la fête affichée) */
|
||||||
|
preview(key) { if (!hand) return; override = key; curSeason = null; paint(); },
|
||||||
|
init() {
|
||||||
|
// Animations inconditionnelles : seul ?ybstatic=1 (html.yb-static) coupe le curseur
|
||||||
|
if (matchMedia('(pointer: coarse)').matches || document.documentElement.classList.contains('yb-static')) return;
|
||||||
|
document.documentElement.classList.add('has-custom-cursor'); // CSS : .has-custom-cursor, .has-custom-cursor * { cursor:none }
|
||||||
|
wrap = document.createElement('div'); wrap.className = 'yb-cursor';
|
||||||
|
dot = document.createElement('div'); dot.className = 'yb-cursor__dot';
|
||||||
|
hand = document.createElement('div'); hand.className = 'yb-cursor__hand';
|
||||||
|
loupe = document.createElement('div'); loupe.className = 'yb-cursor__loupe';
|
||||||
|
lbl = document.createElement('div'); lbl.className = 'yb-cursor__label';
|
||||||
|
wrap.append(dot, hand, loupe, lbl); document.body.appendChild(wrap);
|
||||||
|
paint(); addEventListener('yb:theme', paint);
|
||||||
|
addEventListener('mousemove', e => { m.x = e.clientX; m.y = e.clientY; });
|
||||||
|
document.addEventListener('mouseover', e => {
|
||||||
|
const w = e.target.closest('.cp-wheel');
|
||||||
|
const t = e.target.closest('[data-cursor-label], a, button, [data-cursor]');
|
||||||
|
if (!t) return setState('', false, w);
|
||||||
|
setState(t.getAttribute('data-cursor-label') || '', true, w);
|
||||||
|
});
|
||||||
|
requestAnimationFrame(loop);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})();
|
||||||
258
assets/js/effects.js
vendored
Normal file
258
assets/js/effects.js
vendored
Normal file
|
|
@ -0,0 +1,258 @@
|
||||||
|
/* effects.js : Scroll inertiel, nav auto-masquée, progression, rail, reveals,
|
||||||
|
scroll horizontal + skew, blob, wipe de page, menu mobile. Vanilla JS.
|
||||||
|
Base : handoff/theme-assets/effects.js (design v3), adapté au site :
|
||||||
|
- animations inconditionnelles (choix de Yasser) : seul ?ybstatic=1
|
||||||
|
(html.yb-static, posé dans header.php) les coupe, pour les captures ;
|
||||||
|
- le wipe couvre tous les liens internes, pas seulement [data-wipe] ;
|
||||||
|
- barres de compétences [data-bar], compteur des travaux = nb réel de cartes. */
|
||||||
|
const YB_STATIC = document.documentElement.classList.contains('yb-static');
|
||||||
|
const YB_TOUCH = matchMedia('(pointer: coarse)').matches;
|
||||||
|
|
||||||
|
/* Scroll inertiel (façon Lenis) : desktop uniquement ; sur mobile on garde le scroll natif. */
|
||||||
|
window.YBSmooth = { v: 0, init() {
|
||||||
|
if (YB_STATIC || YB_TOUCH) return;
|
||||||
|
let cur = scrollY, tgt = scrollY, wt = 0;
|
||||||
|
addEventListener('wheel', e => {
|
||||||
|
if (e.ctrlKey || document.body.classList.contains('no-scroll')) return;
|
||||||
|
e.preventDefault();
|
||||||
|
const max = document.documentElement.scrollHeight - innerHeight;
|
||||||
|
tgt = Math.max(0, Math.min(max, tgt + e.deltaY)); wt = performance.now();
|
||||||
|
}, { passive: false });
|
||||||
|
const tick = () => {
|
||||||
|
if (performance.now() - wt < 1600) { cur += (tgt - cur) * 0.095; scrollTo(0, cur); }
|
||||||
|
else { cur = tgt = scrollY; }
|
||||||
|
this.v += ((tgt - cur) - this.v) * 0.12; // vélocité, utilisée pour le skew
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
};
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
}};
|
||||||
|
|
||||||
|
/* Nav qui se masque en descendant + barre de progression lime en haut */
|
||||||
|
window.YBNav = { init(navSel, progSel) {
|
||||||
|
const nav = document.querySelector(navSel), prog = document.querySelector(progSel);
|
||||||
|
let last = scrollY;
|
||||||
|
const tick = () => {
|
||||||
|
const y = scrollY, max = Math.max(1, document.documentElement.scrollHeight - innerHeight);
|
||||||
|
if (prog) prog.style.transform = 'scaleX(' + Math.min(1, y / max) + ')';
|
||||||
|
if (nav && !document.body.classList.contains('no-scroll')) {
|
||||||
|
if (y - last > 1.5 && y > 180) nav.style.transform = 'translateY(-104%)';
|
||||||
|
else if (y - last < -1.5 || y <= 180) nav.style.transform = 'translateY(0)';
|
||||||
|
}
|
||||||
|
last = y; requestAnimationFrame(tick);
|
||||||
|
};
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
}};
|
||||||
|
|
||||||
|
/* Rail vertical : chaque item [data-rail-target="#section"] s'allume quand sa section passe à mi-écran */
|
||||||
|
window.YBRail = { init(railSel) {
|
||||||
|
const rail = document.querySelector(railSel); if (!rail) return;
|
||||||
|
const items = [...rail.querySelectorAll('[data-rail-target]')];
|
||||||
|
const tick = () => {
|
||||||
|
let act = 0;
|
||||||
|
items.forEach((it, i) => { const s = document.querySelector(it.dataset.railTarget); if (s && s.getBoundingClientRect().top <= innerHeight * 0.5) act = i; });
|
||||||
|
items.forEach((it, i) => it.classList.toggle('is-active', i === act));
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
};
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
}};
|
||||||
|
|
||||||
|
/* Reveals au scroll : [data-reveal] ; les barres [data-bar] se remplissent à leur entrée */
|
||||||
|
window.YBReveals = { init() {
|
||||||
|
const all = document.querySelectorAll('[data-reveal], [data-bar]');
|
||||||
|
if (YB_STATIC) { all.forEach(el => el.classList.add('is-in')); return; }
|
||||||
|
const io = new IntersectionObserver(es => es.forEach(en => {
|
||||||
|
if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); }
|
||||||
|
}), { threshold: 0.12 });
|
||||||
|
all.forEach(el => io.observe(el));
|
||||||
|
}};
|
||||||
|
|
||||||
|
/* Scroll horizontal des travaux (desktop/tablette) + skew selon la vélocité + compteur 01/06.
|
||||||
|
Mobile (<720px) : CSS bascule la piste en scroll-snap horizontal natif (voir effects.css). */
|
||||||
|
window.YBHScroll = { init(secSel, trackSel, countSel) {
|
||||||
|
const sec = document.querySelector(secSel), track = document.querySelector(trackSel), count = document.querySelector(countSel);
|
||||||
|
if (!sec || !track || YB_STATIC) return;
|
||||||
|
const total = Math.max(1, track.querySelectorAll('.card').length);
|
||||||
|
const pad = n => String(n).padStart(2, '0');
|
||||||
|
const tick = () => {
|
||||||
|
if (innerWidth >= 720) {
|
||||||
|
const r = sec.getBoundingClientRect();
|
||||||
|
const prog = Math.max(0, Math.min(1, -r.top / (r.height - innerHeight)));
|
||||||
|
const dist = Math.max(0, track.scrollWidth - innerWidth);
|
||||||
|
const skew = Math.max(-4.5, Math.min(4.5, (YBSmooth.v || 0) * 0.011));
|
||||||
|
track.style.transform = 'translateX(' + (-prog * dist) + 'px) skewX(' + (-skew) + 'deg)';
|
||||||
|
if (count) count.textContent = pad(Math.min(total, 1 + Math.floor(prog * total))) + ' / ' + pad(total);
|
||||||
|
} else track.style.transform = '';
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
};
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
}};
|
||||||
|
|
||||||
|
/* Blob lumineux : suit la souris dans la zone, fondu + rétrécit quand elle sort */
|
||||||
|
window.YBBlob = { init(zoneSel, blobSel) {
|
||||||
|
const zone = document.querySelector(zoneSel), blob = document.querySelector(blobSel);
|
||||||
|
if (!zone || !blob || YB_TOUCH || YB_STATIC) { if (blob) blob.style.display = 'none'; return; }
|
||||||
|
const m = { x: 0, y: 0, bx: 0, by: 0, bo: 0 };
|
||||||
|
addEventListener('mousemove', e => { m.x = e.clientX; m.y = e.clientY; });
|
||||||
|
const tick = () => {
|
||||||
|
const r = zone.getBoundingClientRect();
|
||||||
|
m.bx += (m.x - r.left - m.bx) * 0.06; m.by += (m.y - r.top - m.by) * 0.06;
|
||||||
|
const inside = m.x >= r.left && m.x <= r.right && m.y >= r.top - 60 && m.y <= r.bottom + 60;
|
||||||
|
m.bo += ((inside ? 1 : 0) - m.bo) * 0.08;
|
||||||
|
blob.style.transform = 'translate(' + m.bx + 'px,' + m.by + 'px) scale(' + (0.6 + m.bo * 0.4) + ')';
|
||||||
|
blob.style.opacity = m.bo.toFixed(3);
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
};
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
}};
|
||||||
|
|
||||||
|
/* Hero : légère parallaxe du bloc titre à la souris (desktop) */
|
||||||
|
window.YBHeroParallax = { init(sel) {
|
||||||
|
const el = document.querySelector(sel);
|
||||||
|
if (!el || YB_TOUCH || YB_STATIC) return;
|
||||||
|
const m = { x: innerWidth / 2, y: innerHeight / 2, cx: innerWidth / 2, cy: innerHeight / 2 };
|
||||||
|
addEventListener('mousemove', e => { m.x = e.clientX; m.y = e.clientY; });
|
||||||
|
const tick = () => {
|
||||||
|
m.cx += (m.x - m.cx) * 0.25; m.cy += (m.y - m.cy) * 0.25;
|
||||||
|
if (el.getBoundingClientRect().bottom > 0) el.style.transform = 'translate(' + (m.cx - innerWidth / 2) * -0.012 + 'px,' + (m.cy - innerHeight / 2) * -0.008 + 'px)';
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
};
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
}};
|
||||||
|
|
||||||
|
/* Wipe de page : rideau lime. Le rideau (.yb-wipe) est rendu par header.php et
|
||||||
|
couvre l'écran dès le premier paint (html.is-entering) ; il remonte une fois la page prête.
|
||||||
|
Toute navigation interne le fait redescendre ; le libellé vient de data-wipe et
|
||||||
|
survit au changement de page via sessionStorage (clé ybWipe). */
|
||||||
|
/* Couleur des barres du navigateur (meta theme-color) : fond du thème, accent pendant le rideau */
|
||||||
|
window.YBBar = (function () {
|
||||||
|
let meta, wiping = false;
|
||||||
|
const css = v => getComputedStyle(document.documentElement).getPropertyValue(v).trim();
|
||||||
|
const set = c => { if (meta && c && meta.content !== c) meta.content = c; };
|
||||||
|
return {
|
||||||
|
accent() { wiping = true; set(css('--lime')); },
|
||||||
|
base() { wiping = false; set(css('--bg')); },
|
||||||
|
init() {
|
||||||
|
meta = document.querySelector('meta[name="theme-color"]');
|
||||||
|
if (!meta) { meta = document.createElement('meta'); meta.name = 'theme-color'; document.head.appendChild(meta); }
|
||||||
|
addEventListener('yb:theme', () => setTimeout(() => wiping ? this.accent() : this.base(), 0));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
window.YBWipe = { init() {
|
||||||
|
let w = document.querySelector('.yb-wipe');
|
||||||
|
if (!w) {
|
||||||
|
w = document.createElement('div');
|
||||||
|
w.className = 'yb-wipe';
|
||||||
|
w.innerHTML = '<span class="yb-wipe__label"></span>';
|
||||||
|
document.body.appendChild(w);
|
||||||
|
}
|
||||||
|
const label = w.querySelector('.yb-wipe__label');
|
||||||
|
try { sessionStorage.removeItem('ybWipe'); } catch (e) {}
|
||||||
|
if (!YB_STATIC) { YBBar.accent(); setTimeout(() => YBBar.base(), 520); } else YBBar.base();
|
||||||
|
requestAnimationFrame(() => requestAnimationFrame(() => document.documentElement.classList.remove('is-entering')));
|
||||||
|
if (YB_STATIC) return;
|
||||||
|
document.addEventListener('click', e => {
|
||||||
|
const a = e.target.closest('a[href]');
|
||||||
|
if (!a || a.target === '_blank' || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
|
||||||
|
const href = a.getAttribute('href');
|
||||||
|
if (!href || href.charAt(0) === '#' || /^(mailto:|tel:|javascript:)/i.test(href)) return;
|
||||||
|
if (a.host !== location.host) return;
|
||||||
|
if (/\/wp-(admin|login)/.test(a.pathname) || /\.(pdf|zip|png|jpe?g|webp|svg|gif)$/i.test(a.pathname)) return;
|
||||||
|
if (a.pathname === location.pathname && a.hash) return;
|
||||||
|
e.preventDefault();
|
||||||
|
const txt = a.dataset.wipe || '';
|
||||||
|
try { sessionStorage.setItem('ybWipe', txt); } catch (err) {}
|
||||||
|
label.textContent = txt;
|
||||||
|
w.classList.add('is-covering'); YBBar.accent();
|
||||||
|
setTimeout(() => { location.href = a.href; }, 480);
|
||||||
|
});
|
||||||
|
/* Retour arrière depuis le cache (bfcache) : ne pas rester bloqué sous le rideau */
|
||||||
|
addEventListener('pageshow', e => { if (e.persisted) { w.classList.remove('is-covering'); YBBar.base(); } });
|
||||||
|
}};
|
||||||
|
|
||||||
|
/* Coordonnées protégées contre la collecte automatique : [data-pv] (texte), [data-pv-href] (lien),
|
||||||
|
[data-pv-copy] (bouton copier). Encodage côté PHP : ROT13 → inversion → base64.
|
||||||
|
Décodage au premier geste humain (souris, toucher, clavier, focus, scroll). */
|
||||||
|
window.YBProtect = (function () {
|
||||||
|
let done = false;
|
||||||
|
const rot13 = t => t.replace(/[a-z]/gi, c => { const b = c <= 'Z' ? 65 : 97; return String.fromCharCode((c.charCodeAt(0) - b + 13) % 26 + b); });
|
||||||
|
const dec = v => { try { return rot13(decodeURIComponent(escape(atob(v))).split('').reverse().join('')); } catch (e) { return ''; } };
|
||||||
|
function reveal() {
|
||||||
|
if (done) return; done = true;
|
||||||
|
document.querySelectorAll('[data-pv]').forEach(el => { el.textContent = dec(el.dataset.pv); el.removeAttribute('data-pv'); });
|
||||||
|
document.querySelectorAll('[data-pv-href]').forEach(el => { el.setAttribute('href', dec(el.dataset.pvHref)); el.removeAttribute('data-pv-href'); });
|
||||||
|
document.querySelectorAll('[data-pv-copy]').forEach(el => { el.dataset.copy = dec(el.dataset.pvCopy); el.removeAttribute('data-pv-copy'); });
|
||||||
|
EVENTS.forEach(ev => removeEventListener(ev, reveal, true));
|
||||||
|
}
|
||||||
|
const EVENTS = ['pointermove', 'pointerdown', 'touchstart', 'keydown', 'focusin', 'wheel', 'scroll'];
|
||||||
|
return { reveal, init() {
|
||||||
|
if (!document.querySelector('[data-pv],[data-pv-href],[data-pv-copy]')) return;
|
||||||
|
if (YB_STATIC) return reveal();
|
||||||
|
EVENTS.forEach(ev => addEventListener(ev, reveal, { capture: true, passive: true }));
|
||||||
|
/* Un clic sur un lien protégé avant décodage : on décode puis on relance le clic */
|
||||||
|
document.addEventListener('click', e => {
|
||||||
|
const a = e.target.closest('[data-pv-href]');
|
||||||
|
if (!a) return;
|
||||||
|
e.preventDefault(); reveal(); a.click();
|
||||||
|
}, true);
|
||||||
|
} };
|
||||||
|
})();
|
||||||
|
|
||||||
|
/* Thème clair / sombre : bouton [data-theme-toggle], choix mémorisé (localStorage yb-theme).
|
||||||
|
Bascule animée : un cercle s'étend depuis le bouton (View Transitions), fondu sinon. */
|
||||||
|
window.YBTheme = { init() {
|
||||||
|
const btn = document.querySelector('[data-theme-toggle]'); if (!btn) return;
|
||||||
|
const root = document.documentElement;
|
||||||
|
const cur = () => root.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
|
||||||
|
const label = () => btn.setAttribute('aria-label', cur() === 'light' ? 'Passer en mode sombre' : 'Passer en mode clair');
|
||||||
|
const apply = t => {
|
||||||
|
root.setAttribute('data-theme', t);
|
||||||
|
try { localStorage.setItem('yb-theme', t); } catch (e) {}
|
||||||
|
label();
|
||||||
|
dispatchEvent(new CustomEvent('yb:theme', { detail: t }));
|
||||||
|
};
|
||||||
|
label();
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const next = cur() === 'light' ? 'dark' : 'light';
|
||||||
|
const r = btn.getBoundingClientRect(), x = r.left + r.width / 2, y = r.top + r.height / 2;
|
||||||
|
if (!document.startViewTransition || YB_STATIC) {
|
||||||
|
root.classList.add('theme-fade'); apply(next);
|
||||||
|
setTimeout(() => root.classList.remove('theme-fade'), 500);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const end = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
|
||||||
|
const vt = document.startViewTransition(() => apply(next));
|
||||||
|
vt.ready.then(() => root.animate(
|
||||||
|
{ clipPath: ['circle(0px at ' + x + 'px ' + y + 'px)', 'circle(' + end + 'px at ' + x + 'px ' + y + 'px)'] },
|
||||||
|
{ duration: 750, easing: 'cubic-bezier(.7,0,.3,1)', pseudoElement: '::view-transition-new(root)' }
|
||||||
|
));
|
||||||
|
});
|
||||||
|
}};
|
||||||
|
|
||||||
|
/* Menu mobile plein écran : bouton [data-menu-toggle], panneau [data-menu] */
|
||||||
|
window.YBMenu = { init() {
|
||||||
|
const btn = document.querySelector('[data-menu-toggle]'), panel = document.querySelector('[data-menu]');
|
||||||
|
if (!btn || !panel) return;
|
||||||
|
const set = open => {
|
||||||
|
panel.classList.toggle('is-open', open);
|
||||||
|
document.body.classList.toggle('no-scroll', open);
|
||||||
|
btn.textContent = open ? 'FERMER ✕' : 'MENU';
|
||||||
|
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||||
|
panel.setAttribute('aria-hidden', open ? 'false' : 'true');
|
||||||
|
};
|
||||||
|
btn.addEventListener('click', () => set(!panel.classList.contains('is-open')));
|
||||||
|
panel.querySelectorAll('a').forEach(a => a.addEventListener('click', () => set(false)));
|
||||||
|
addEventListener('keydown', e => { if (e.key === 'Escape' && panel.classList.contains('is-open')) set(false); });
|
||||||
|
}};
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
YBBar.init(); YBProtect.init(); YBTheme.init(); YBSmooth.init(); YBReveals.init(); YBWipe.init(); YBMenu.init();
|
||||||
|
YBNav.init('.site-nav', '.scroll-progress');
|
||||||
|
YBRail.init('.section-rail');
|
||||||
|
YBHScroll.init('#travaux', '.works-track', '.works-count');
|
||||||
|
YBBlob.init('#apropos', '.about-blob');
|
||||||
|
YBHeroParallax.init('.hero__content');
|
||||||
|
if (window.YBCursor) YBCursor.init();
|
||||||
|
if (window.YBOrb) YBOrb.init('#orb-canvas', { sections: { works: '#travaux', about: '#apropos', cta: '#cta' } });
|
||||||
|
});
|
||||||
322
assets/js/orb.js
Normal file
322
assets/js/orb.js
Normal file
|
|
@ -0,0 +1,322 @@
|
||||||
|
/* orb.js : Orbe de particules persistante (vanilla JS)
|
||||||
|
<canvas id="orb-canvas"></canvas> en position:fixed; inset:0; z-index:0; pointer-events:none
|
||||||
|
YBOrb.init('#orb-canvas', { sections: { works:'#travaux', about:'#apropos', cta:'#cta' } });
|
||||||
|
Sur les pages internes (sans sections), l'orbe reste dans son état "hero". */
|
||||||
|
window.YBOrb = (function () {
|
||||||
|
let cv, ctx, cw, ch, run = false, secs = {};
|
||||||
|
const m = { x: -9999, y: -9999 };
|
||||||
|
const pts = [], rx = [], ry = [];
|
||||||
|
const N = 550;
|
||||||
|
for (let i = 0; i < N; i++) {
|
||||||
|
const y = 1 - (i / (N - 1)) * 2, r = Math.sqrt(1 - y * y), th = i * 2.39996323;
|
||||||
|
pts.push([Math.cos(th) * r, y, Math.sin(th) * r]);
|
||||||
|
rx.push(Math.sin(i * 12.9898) * 0.9 + Math.sin(i * 0.7) * 0.4);
|
||||||
|
ry.push(Math.cos(i * 78.233) * 0.9 + Math.cos(i * 1.3) * 0.4);
|
||||||
|
}
|
||||||
|
// États [cx, cy, R, éclatement, alpha] (fractions du viewport)
|
||||||
|
const A = [0.72, 0.42, 0.34, 0, 1]; // hero : grande, à droite
|
||||||
|
const B = [0.11, 0.24, 0.16, 0, 0.55]; // travaux : petite lune en haut à gauche
|
||||||
|
const C = [0.5, 0.48, 0.46, 1, 0.4]; // à propos : éclatée en champ d'étoiles
|
||||||
|
const D = [0.76, 0.52, 0.3, 0, 0.95]; // CTA : reformée
|
||||||
|
const c01 = v => Math.max(0, Math.min(1, v));
|
||||||
|
const ease = k => k * k * (3 - 2 * k);
|
||||||
|
const mix = (a, b, k) => a.map((v, i) => v + (b[i] - v) * k);
|
||||||
|
const top = el => el ? el.getBoundingClientRect().top : null;
|
||||||
|
/* Couleurs lues dans le thème (--lime-rgb / --ink-rgb), relues à chaque bascule clair/sombre */
|
||||||
|
let LIME = '211,253,80', INK = '245,245,240', GOLD = '242,193,78';
|
||||||
|
function readColors() {
|
||||||
|
const cs = getComputedStyle(document.documentElement);
|
||||||
|
LIME = cs.getPropertyValue('--lime-rgb').trim() || LIME;
|
||||||
|
INK = cs.getPropertyValue('--ink-rgb').trim() || INK;
|
||||||
|
GOLD = cs.getPropertyValue('--season-2-rgb').trim() || GOLD;
|
||||||
|
}
|
||||||
|
/* Halloween : visage de citrouille (repère de la sphère, y vers le bas, rayon 1) */
|
||||||
|
const inTri = (x, y, a, b, c) => {
|
||||||
|
const d = (p, q, r) => (p[0] - r[0]) * (q[1] - r[1]) - (q[0] - r[0]) * (p[1] - r[1]);
|
||||||
|
const P = [x, y], d1 = d(P, a, b), d2 = d(P, b, c), d3 = d(P, c, a);
|
||||||
|
return !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));
|
||||||
|
};
|
||||||
|
const EYE_L = [[-0.55, -0.06], [-0.17, -0.06], [-0.36, -0.42]], EYE_R = [[0.17, -0.06], [0.55, -0.06], [0.36, -0.42]];
|
||||||
|
const NOSE = [[-0.08, 0.13], [0.08, 0.13], [0, 0.01]];
|
||||||
|
const smile = x => { const k = 1 - (x / 0.64) * (x / 0.64); return [0.2 + 0.13 * k, 0.27 + 0.3 * k]; };
|
||||||
|
function inFace(x, y) {
|
||||||
|
if (inTri(x, y, ...EYE_L) || inTri(x, y, ...EYE_R) || inTri(x, y, ...NOSE)) return true;
|
||||||
|
if (Math.abs(x) > 0.64) return false;
|
||||||
|
const [t, b] = smile(x);
|
||||||
|
if (y < t || y > b) return false;
|
||||||
|
if (Math.abs(Math.abs(x) - 0.22) < 0.07 && y < t + 0.09) return false; // dents du haut
|
||||||
|
if (Math.abs(x) < 0.08 && y > b - 0.09) return false; // dent du bas
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
/* Autres fêtes : forme de l'orbe [kx, ky], pulsation, couleur des points, décor dessous / dessus.
|
||||||
|
point() renvoie [rgb, alpha, taille] ou rien (couleur par défaut). C = { LIME, INK, GOLD } */
|
||||||
|
const tag = (c, x, y, w, h, txt, C, a) => { // étiquette de prix suspendue
|
||||||
|
c.save(); c.translate(x, y); c.rotate(0.12);
|
||||||
|
c.fillStyle = 'rgba(' + C.LIME + ',' + a + ')';
|
||||||
|
c.beginPath(); c.moveTo(0, 0); c.lineTo(w, 0); c.lineTo(w, h); c.lineTo(0, h); c.lineTo(-h * 0.45, h / 2); c.closePath(); c.fill();
|
||||||
|
c.fillStyle = 'rgba(0,0,0,' + a + ')'; c.font = '800 ' + Math.round(h * 0.46) + 'px "JetBrains Mono", monospace';
|
||||||
|
c.textBaseline = 'middle'; c.fillText(txt, h * 0.12, h / 2 + 1);
|
||||||
|
c.beginPath(); c.arc(-h * 0.12, h / 2, h * 0.09, 0, 6.283); c.fill(); c.restore();
|
||||||
|
};
|
||||||
|
const PASTEL = ['255,159,203', '142,230,194', '255,222,120', '190,160,255', '140,200,255'];
|
||||||
|
const SEASON = {
|
||||||
|
'nouvel-an': {
|
||||||
|
point: (i, p, x, y, z, lime, a, t) => { const tw = Math.sin(t * 4 + i * 1.7); return tw > 0.75 ? ['255,255,255', Math.min(1, a + 0.5), 1.5] : [i % 2 ? GOLD_() : LIME, a * 1.1, 1]; },
|
||||||
|
over: (c, cx, cy, R, t, k, C) => { // boule à facettes suspendue
|
||||||
|
c.strokeStyle = 'rgba(' + C.INK + ',' + 0.3 * k + ')'; c.lineWidth = 1;
|
||||||
|
c.beginPath(); c.moveTo(cx, 0); c.lineTo(cx, cy - R * 1.02); c.stroke();
|
||||||
|
for (let j = 0; j < 4; j++) { const ang = t * 0.6 + j * 1.57, rr = R * 1.12; // reflets qui tournent
|
||||||
|
c.fillStyle = 'rgba(255,255,255,' + 0.5 * k * (0.5 + 0.5 * Math.sin(t * 3 + j)) + ')';
|
||||||
|
c.beginPath(); c.arc(cx + Math.cos(ang) * rr, cy + Math.sin(ang) * rr * 0.35, 2.2, 0, 6.283); c.fill(); }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'juillet': {
|
||||||
|
point: (i, p, x, y, z, lime, a) => [x < -0.33 ? '40,90,255' : x > 0.33 ? '255,60,80' : INK, a * 1.15, 1]
|
||||||
|
},
|
||||||
|
'st-patrick': {
|
||||||
|
point: (i, p, x, y, z, lime, a, t) => i % 9 === 0 ? [GOLD, Math.min(1, a + 0.3 * (0.5 + 0.5 * Math.sin(t * 3 + i))), 1.3] : [i % 3 ? LIME : INK, a, 1],
|
||||||
|
under: (c, cx, cy, R, t, k) => { // arc-en-ciel derrière l'orbe
|
||||||
|
['255,80,80', '255,160,60', '255,225,80', '80,210,120', '80,150,255', '160,100,255'].forEach((col, j) => {
|
||||||
|
c.strokeStyle = 'rgba(' + col + ',' + 0.16 * k + ')'; c.lineWidth = R * 0.035;
|
||||||
|
c.beginPath(); c.arc(cx, cy, R * (1.42 - j * 0.04), Math.PI * 1.12, Math.PI * 1.88); c.stroke();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'paques': {
|
||||||
|
shape: [0.84, 1.1],
|
||||||
|
point: (i, p, x, y, z, lime, a) => { const band = Math.floor((p[1] + 1) * 4.5); return [band % 2 ? PASTEL[band % PASTEL.length] : INK, a * (band % 2 ? 1.25 : 0.8), band % 2 ? 1.2 : 1]; }
|
||||||
|
},
|
||||||
|
'poisson': {
|
||||||
|
shape: [1.14, 0.8],
|
||||||
|
point: (i, p, x, y, z, lime, a) => [(Math.round(x * 6) + Math.round(y * 6)) % 2 ? LIME : GOLD, a * 1.05, 1],
|
||||||
|
over: (c, cx, cy, R, t, k, C) => {
|
||||||
|
const w = Math.sin(t * 5) * R * 0.08;
|
||||||
|
c.fillStyle = 'rgba(' + C.LIME + ',' + 0.55 * k + ')';
|
||||||
|
c.beginPath(); c.moveTo(cx + R * 1.02, cy); c.lineTo(cx + R * 1.5, cy - R * 0.42 + w); c.lineTo(cx + R * 1.38, cy + w * 0.3); c.lineTo(cx + R * 1.5, cy + R * 0.42 + w); c.closePath(); c.fill(); // queue
|
||||||
|
c.beginPath(); c.moveTo(cx - R * 0.2, cy - R * 0.74); c.quadraticCurveTo(cx + R * 0.2, cy - R * 1.12, cx + R * 0.5, cy - R * 0.66); c.closePath(); c.fill(); // nageoire
|
||||||
|
c.fillStyle = 'rgba(' + C.INK + ',' + k + ')'; c.beginPath(); c.arc(cx - R * 0.62, cy - R * 0.12, R * 0.09, 0, 6.283); c.fill(); // œil
|
||||||
|
c.fillStyle = 'rgba(' + C.LIME + ',' + k + ')'; c.beginPath(); c.arc(cx - R * 0.6, cy - R * 0.14, R * 0.035, 0, 6.283); c.fill();
|
||||||
|
for (let j = 0; j < 3; j++) { const ph = (t * 0.5 + j / 3) % 1; // bulles
|
||||||
|
c.strokeStyle = 'rgba(' + C.INK + ',' + 0.45 * k * (1 - ph) + ')'; c.lineWidth = 1.2;
|
||||||
|
c.beginPath(); c.arc(cx - R * 1.1 - Math.sin(ph * 9) * 6, cy - R * 0.2 - ph * R * 0.9, 3 + j * 2, 0, 6.283); c.stroke(); }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'musique': {
|
||||||
|
pulse: t => { const b = (t * 2) % 1; return 1 + 0.035 * Math.exp(-b * 6); }, // 120 BPM
|
||||||
|
point: (i, p, x, y, z, lime, a, t) => [i % 4 === 0 ? GOLD : lime ? LIME : INK, a, 1],
|
||||||
|
under: (c, cx, cy, R, t, k, C) => { // vinyle : sillons + macaron
|
||||||
|
c.save(); c.translate(cx, cy); c.rotate(t * 1.4);
|
||||||
|
for (let r = 0.3; r < 0.98; r += 0.06) { c.strokeStyle = 'rgba(' + C.INK + ',' + 0.07 * k + ')'; c.lineWidth = 1; c.beginPath(); c.arc(0, 0, R * r, 0, 6.283); c.stroke(); }
|
||||||
|
for (let j = 0; j < 2; j++) { c.strokeStyle = 'rgba(255,255,255,' + 0.1 * k + ')'; c.lineWidth = R * 0.012; c.beginPath(); c.arc(0, 0, R * (0.5 + j * 0.2), -0.3 + j * 3.14, 0.3 + j * 3.14); c.stroke(); }
|
||||||
|
c.fillStyle = 'rgba(' + C.LIME + ',' + 0.7 * k + ')'; c.beginPath(); c.arc(0, 0, R * 0.22, 0, 6.283); c.fill();
|
||||||
|
c.fillStyle = 'rgba(' + C.GOLD + ',' + 0.8 * k + ')'; c.fillRect(-R * 0.12, -R * 0.03, R * 0.24, R * 0.06);
|
||||||
|
c.fillStyle = 'rgba(0,0,0,' + 0.8 * k + ')'; c.beginPath(); c.arc(0, 0, R * 0.025, 0, 6.283); c.fill();
|
||||||
|
c.restore();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'anniversaire': {
|
||||||
|
shape: [0.9, 1.06],
|
||||||
|
point: (i, p, x, y, z, lime, a) => [i % 5 === 0 ? GOLD : i % 5 === 1 ? '255,107,129' : lime || i % 2 ? LIME : INK, a * 1.1, 1],
|
||||||
|
over: (c, cx, cy, R, t, k, C) => { // ballon : nœud + ficelle qui ondule
|
||||||
|
const by = cy + R * 1.06;
|
||||||
|
c.fillStyle = 'rgba(' + C.LIME + ',' + 0.8 * k + ')';
|
||||||
|
c.beginPath(); c.moveTo(cx, by - R * 0.02); c.lineTo(cx - R * 0.07, by + R * 0.1); c.lineTo(cx + R * 0.07, by + R * 0.1); c.closePath(); c.fill();
|
||||||
|
c.strokeStyle = 'rgba(' + C.INK + ',' + 0.4 * k + ')'; c.lineWidth = 1.2;
|
||||||
|
c.beginPath(); c.moveTo(cx, by + R * 0.1);
|
||||||
|
for (let j = 1; j <= 12; j++) c.lineTo(cx + Math.sin(t * 2 + j * 0.8) * R * 0.05 * (j / 12), by + R * 0.1 + j * R * 0.07);
|
||||||
|
c.stroke();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'algerie': {
|
||||||
|
// drapeau : moitié verte / moitié blanche, croissant et étoile rouges au centre
|
||||||
|
point: (i, p, x, y, z, lime, a) => [x < 0 ? '0,150,75' : INK, a * 1.2, 1],
|
||||||
|
over: (c, cx, cy, R, t, k) => {
|
||||||
|
c.save(); c.fillStyle = 'rgba(210,16,52,' + 0.92 * k + ')'; c.shadowColor = 'rgba(210,16,52,' + 0.6 * k + ')'; c.shadowBlur = 18;
|
||||||
|
// croissant : arc extérieur (r1) puis arc intérieur (r2) entre leurs deux points d'intersection
|
||||||
|
const x1 = cx + R * 0.02, r1 = R * 0.36, x2 = cx + R * 0.11, r2 = R * 0.29, d = x2 - x1;
|
||||||
|
const ix = (d * d + r1 * r1 - r2 * r2) / (2 * d), iy = Math.sqrt(Math.max(0, r1 * r1 - ix * ix));
|
||||||
|
const a1 = Math.atan2(iy, ix), a2 = Math.atan2(iy, ix - d);
|
||||||
|
c.beginPath(); c.arc(x1, cy, r1, a1, 2 * Math.PI - a1, false); c.arc(x2, cy, r2, 2 * Math.PI - a2, a2, true); c.closePath(); c.fill();
|
||||||
|
const sx = cx + R * 0.2, sr = R * 0.12; c.beginPath();
|
||||||
|
for (let j = 0; j < 10; j++) { const ang = -Math.PI / 2 + j * Math.PI / 5, rr = j % 2 ? sr * 0.42 : sr; c.lineTo(sx + Math.cos(ang) * rr, cy + Math.sin(ang) * rr); }
|
||||||
|
c.closePath(); c.fill(); c.restore();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'japon': {
|
||||||
|
// soleil levant derrière l'orbe, points rose sakura et encre
|
||||||
|
point: (i, p, x, y, z, lime, a) => [i % 3 === 0 ? '255,183,197' : (lime ? LIME : INK), a * (i % 3 === 0 ? 1.3 : 1), i % 3 === 0 ? 1.2 : 1],
|
||||||
|
under: (c, cx, cy, R, t, k) => {
|
||||||
|
const g = c.createRadialGradient(cx, cy, R * 0.1, cx, cy, R * 0.62);
|
||||||
|
g.addColorStop(0, 'rgba(220,40,40,' + 0.55 * k + ')'); g.addColorStop(0.85, 'rgba(200,30,30,' + 0.42 * k + ')'); g.addColorStop(1, 'rgba(200,30,30,0)');
|
||||||
|
c.fillStyle = g; c.beginPath(); c.arc(cx, cy, R * 0.62, 0, 6.283); c.fill();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'hack': {
|
||||||
|
// radar : un balayage tourne, les points s'allument à son passage puis s'éteignent
|
||||||
|
point: (i, p, x, y, z, lime, a, t) => {
|
||||||
|
const sweep = (t * 1.4) % 6.283, ang = (Math.atan2(y, x) + 6.283) % 6.283;
|
||||||
|
const d = (sweep - ang + 6.283) % 6.283, hit = d < 0.9 ? 1 - d / 0.9 : 0;
|
||||||
|
return hit > 0 ? ['220,255,230', Math.min(1, a + hit * 0.8), 1 + hit * 0.9] : [LIME, a * 0.55, 1];
|
||||||
|
},
|
||||||
|
over: (c, cx, cy, R, t, k, C) => {
|
||||||
|
const sweep = (t * 1.4) % 6.283;
|
||||||
|
c.save();
|
||||||
|
c.strokeStyle = 'rgba(' + C.LIME + ',' + 0.18 * k + ')'; c.lineWidth = 1;
|
||||||
|
[0.35, 0.7, 1.02].forEach(r => { c.beginPath(); c.arc(cx, cy, R * r, 0, 6.283); c.stroke(); });
|
||||||
|
c.beginPath(); c.moveTo(cx - R * 1.1, cy); c.lineTo(cx + R * 1.1, cy); c.moveTo(cx, cy - R * 1.1); c.lineTo(cx, cy + R * 1.1); c.stroke();
|
||||||
|
const g = c.createConicGradient ? c.createConicGradient(sweep - 0.9, cx, cy) : null;
|
||||||
|
if (g) {
|
||||||
|
g.addColorStop(0, 'rgba(' + C.LIME + ',0)'); g.addColorStop(0.143, 'rgba(' + C.LIME + ',' + 0.22 * k + ')'); g.addColorStop(0.1431, 'rgba(' + C.LIME + ',0)'); g.addColorStop(1, 'rgba(' + C.LIME + ',0)');
|
||||||
|
c.fillStyle = g; c.beginPath(); c.arc(cx, cy, R * 1.02, 0, 6.283); c.fill();
|
||||||
|
}
|
||||||
|
c.strokeStyle = 'rgba(' + C.LIME + ',' + 0.8 * k + ')'; c.lineWidth = 1.5;
|
||||||
|
c.beginPath(); c.moveTo(cx, cy); c.lineTo(cx + Math.cos(sweep) * R * 1.02, cy + Math.sin(sweep) * R * 1.02); c.stroke();
|
||||||
|
c.restore();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'black-friday': {
|
||||||
|
point: (i, p, x, y, z, lime, a) => [lime || i % 3 === 0 ? LIME : INK, a * 1.1, 1],
|
||||||
|
over: (c, cx, cy, R, t, k, C) => {
|
||||||
|
const ax = cx + R * 0.62, ay = cy - R * 0.8, sw = Math.sin(t * 1.6) * 0.08;
|
||||||
|
c.strokeStyle = 'rgba(' + C.INK + ',' + 0.6 * k + ')'; c.lineWidth = 1.2;
|
||||||
|
c.beginPath(); c.moveTo(ax, ay); c.lineTo(ax + R * 0.18, ay + R * 0.3); c.stroke();
|
||||||
|
c.save(); c.translate(ax + R * 0.18, ay + R * 0.3); c.rotate(sw); tag(c, 0, 0, R * 0.62, R * 0.24, '-100 %', C, k); c.restore();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const GOLD_ = () => GOLD;
|
||||||
|
function facePath(cx, cy, R) {
|
||||||
|
const P = (x, y) => [cx + x * R, cy + y * R];
|
||||||
|
ctx.beginPath();
|
||||||
|
[EYE_L, EYE_R, NOSE].forEach(tri => { tri.forEach((v, i) => ctx[i ? 'lineTo' : 'moveTo'](...P(v[0], v[1]))); ctx.closePath(); });
|
||||||
|
const top = [], bot = [];
|
||||||
|
for (let k = 0; k <= 24; k++) { const x = -0.64 + k * 0.64 * 2 / 24, [t, b] = smile(x); top.push([x, t]); bot.push([x, b]); }
|
||||||
|
// contour de la bouche avec deux dents en haut et une en bas
|
||||||
|
ctx.moveTo(...P(top[0][0], top[0][1]));
|
||||||
|
top.forEach(([x, t]) => {
|
||||||
|
const tooth = Math.abs(Math.abs(x) - 0.22) < 0.07;
|
||||||
|
ctx.lineTo(...P(x, tooth ? t + 0.09 : t));
|
||||||
|
});
|
||||||
|
bot.reverse().forEach(([x, b]) => ctx.lineTo(...P(x, Math.abs(x) < 0.08 ? b - 0.09 : b)));
|
||||||
|
ctx.closePath();
|
||||||
|
}
|
||||||
|
|
||||||
|
function size() {
|
||||||
|
const dpr = Math.min(devicePixelRatio || 1, 2);
|
||||||
|
cw = innerWidth; ch = innerHeight;
|
||||||
|
cv.width = cw * dpr; cv.height = ch * dpr;
|
||||||
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||||
|
}
|
||||||
|
function state() {
|
||||||
|
const vh = innerHeight; let s = A, t;
|
||||||
|
if ((t = top(secs.works)) !== null) s = mix(s, B, ease(c01(1 - t / vh)));
|
||||||
|
if ((t = top(secs.about)) !== null) s = mix(s, C, ease(c01((vh - t) / (vh * 0.9))));
|
||||||
|
if ((t = top(secs.cta)) !== null) s = mix(s, D, ease(c01((vh - t) / (vh * 0.9))));
|
||||||
|
// Mobile : orbe recentrée et un peu plus petite
|
||||||
|
if (cw < 720) s = [s[0] * 0.5 + 0.25, s[1] * 0.8, s[2] * 0.85, s[3], s[4] * 0.8];
|
||||||
|
return s;
|
||||||
|
}
|
||||||
|
function draw(t) {
|
||||||
|
ctx.clearRect(0, 0, cw, ch);
|
||||||
|
const S = document.documentElement.getAttribute('data-season') || '';
|
||||||
|
const [fx, fy, fr, spread, ga] = state();
|
||||||
|
let cx = cw * fx, cy = ch * fy, R = Math.min(cw, ch) * fr;
|
||||||
|
if (S) { R *= 0.88; cy += R * 0.17; } // saison : orbe un peu plus basse pour que l'attache de la boule de Noël sorte de sous la barre
|
||||||
|
const H = SEASON[S], C = { LIME, INK, GOLD }, sol = ga * Math.max(0, 1 - spread * 2.2);
|
||||||
|
if (H && H.pulse) R *= H.pulse(t);
|
||||||
|
const kx = H && H.shape ? H.shape[0] : 1, ky = H && H.shape ? H.shape[1] : 1;
|
||||||
|
// Orientation neutre tant que la souris/le doigt n'a pas bougé (chargement, mobile)
|
||||||
|
const has = m.x > -9000, sx = has ? (m.x - cx) / cw : 0, sy = has ? (m.y - cy) / ch : 0;
|
||||||
|
const rY = t * 0.35 + sx * 1.2, rX = 0.35 + sy * 0.8;
|
||||||
|
const cY = Math.cos(rY), sY = Math.sin(rY), cX = Math.cos(rX), sX = Math.sin(rX);
|
||||||
|
const g = ctx.createRadialGradient(cx, cy, R * 0.2, cx, cy, R * 1.6);
|
||||||
|
g.addColorStop(0, 'rgba(' + LIME + ',' + 0.08 * ga * (1 - spread * 0.8) + ')');
|
||||||
|
g.addColorStop(1, 'rgba(' + LIME + ',0)');
|
||||||
|
ctx.fillStyle = g; ctx.fillRect(cx - R * 2, cy - R * 2, R * 4, R * 4);
|
||||||
|
if (H && H.under && sol > 0.01) H.under(ctx, cx, cy, R, t, sol, C);
|
||||||
|
for (let i = 0; i < N; i++) {
|
||||||
|
const p = pts[i];
|
||||||
|
let x = p[0] * cY + p[2] * sY, z = -p[0] * sY + p[2] * cY;
|
||||||
|
const y = p[1] * cX - z * sX; z = p[1] * sX + z * cX;
|
||||||
|
const f = 2.4 / (2.4 + z);
|
||||||
|
let px = cx + x * kx * R * f + rx[i] * spread * cw * 0.42;
|
||||||
|
let py = cy + y * ky * R * f + ry[i] * spread * ch * 0.42;
|
||||||
|
let boost = 0;
|
||||||
|
const dx = px - m.x, dy = py - m.y, d2 = dx * dx + dy * dy;
|
||||||
|
if (d2 < 32400) { // répulsion souris, rayon 180px
|
||||||
|
const d = Math.sqrt(d2) || 1, k = (1 - d / 180) * 46;
|
||||||
|
px += dx / d * k; py += dy / d * k; boost = 1 - d / 180;
|
||||||
|
}
|
||||||
|
const s = Math.max(0.4, (1 - z) * 1.5) + boost * 2.4;
|
||||||
|
const a = Math.max(0.05, (1 - z) * 0.5) * ga + boost * 0.55;
|
||||||
|
const lime = boost > 0.15 || p[1] > 0.72 || x > 0.85;
|
||||||
|
if (H && H.point) {
|
||||||
|
const r = H.point(i, p, x, y, z, lime, a, t);
|
||||||
|
if (r) { ctx.fillStyle = 'rgba(' + r[0] + ',' + Math.min(r[1], 1) + ')'; ctx.beginPath(); ctx.arc(px, py, s * (r[2] || 1), 0, 6.283); ctx.fill(); continue; }
|
||||||
|
}
|
||||||
|
if (S === 'halloween') {
|
||||||
|
// citrouille : points orangés, le visage reste vide (la lueur est dessinée après)
|
||||||
|
if (z < 0.1 && spread < 0.5 && inFace((px - cx) / R, (py - cy) / R)) continue;
|
||||||
|
ctx.fillStyle = 'rgba(' + (lime ? LIME : (i % 3 ? LIME : INK)) + ',' + Math.min(a * (lime ? 1.3 : 0.85), 1) + ')';
|
||||||
|
ctx.beginPath(); ctx.arc(px, py, s, 0, 6.283); ctx.fill();
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (S === 'noel' && Math.abs(Math.abs(p[1]) - 0.3) < 0.075) {
|
||||||
|
// boule de Noël : deux bandes dorées qui scintillent
|
||||||
|
const tw = 0.6 + 0.4 * Math.sin(t * 3 + i);
|
||||||
|
ctx.fillStyle = 'rgba(' + GOLD + ',' + Math.min((a + 0.3 * ga) * tw, 1) + ')';
|
||||||
|
ctx.beginPath(); ctx.arc(px, py, s * 1.15, 0, 6.283); ctx.fill();
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
ctx.fillStyle = lime ? 'rgba(' + LIME + ',' + Math.min(a + 0.25 * ga, 1) + ')' : 'rgba(' + INK + ',' + a + ')';
|
||||||
|
ctx.beginPath(); ctx.arc(px, py, s, 0, 6.283); ctx.fill();
|
||||||
|
}
|
||||||
|
const solid = sol; // décor visible tant que l'orbe n'est pas éclatée
|
||||||
|
if (H && H.over && solid > 0.01) H.over(ctx, cx, cy, R, t, solid, C);
|
||||||
|
if (S === 'halloween' && solid > 0.01) {
|
||||||
|
// lueur de bougie qui vacille
|
||||||
|
const fl = 0.78 + 0.14 * Math.sin(t * 9) + 0.08 * Math.sin(t * 23 + 1.3);
|
||||||
|
ctx.save();
|
||||||
|
facePath(cx, cy, R);
|
||||||
|
const fg = ctx.createRadialGradient(cx, cy + R * 0.1, R * 0.05, cx, cy + R * 0.1, R * 0.8);
|
||||||
|
fg.addColorStop(0, 'rgba(255,236,150,' + solid * fl + ')');
|
||||||
|
fg.addColorStop(1, 'rgba(' + LIME + ',' + solid * fl * 0.9 + ')');
|
||||||
|
ctx.shadowColor = 'rgba(' + LIME + ',' + solid + ')'; ctx.shadowBlur = 28 * fl;
|
||||||
|
ctx.fillStyle = fg; ctx.fill();
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
if (S === 'noel' && solid > 0.01) {
|
||||||
|
// attache dorée et fil qui pend depuis le haut de l'écran
|
||||||
|
const w = R * 0.3, h = R * 0.15, top = cy - R * 1.02;
|
||||||
|
ctx.strokeStyle = 'rgba(' + INK + ',' + 0.3 * solid + ')'; ctx.lineWidth = 1;
|
||||||
|
ctx.beginPath(); ctx.moveTo(cx, 0); ctx.lineTo(cx, top - h - R * 0.08); ctx.stroke();
|
||||||
|
ctx.strokeStyle = 'rgba(' + GOLD + ',' + solid + ')'; ctx.lineWidth = Math.max(1.5, R * 0.02);
|
||||||
|
ctx.beginPath(); ctx.ellipse(cx, top - h - R * 0.04, R * 0.05, R * 0.06, 0, 0, 6.283); ctx.stroke();
|
||||||
|
const cg = ctx.createLinearGradient(cx - w / 2, 0, cx + w / 2, 0);
|
||||||
|
cg.addColorStop(0, 'rgba(' + GOLD + ',' + 0.55 * solid + ')'); cg.addColorStop(0.45, 'rgba(255,240,200,' + solid + ')'); cg.addColorStop(1, 'rgba(' + GOLD + ',' + 0.5 * solid + ')');
|
||||||
|
ctx.fillStyle = cg; ctx.fillRect(cx - w / 2, top - h, w, h);
|
||||||
|
}
|
||||||
|
if (spread < 0.6) {
|
||||||
|
ctx.strokeStyle = 'rgba(' + LIME + ',' + 0.22 * ga * (1 - spread) + ')';
|
||||||
|
ctx.lineWidth = 1; ctx.beginPath();
|
||||||
|
ctx.ellipse(cx, cy, R * 1.3, R * 0.4, -0.3 + sx * 0.3, 0, 6.283); ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function loop(ms) { if (!run) return; try { draw(ms / 1000); } catch (e) {} requestAnimationFrame(loop); }
|
||||||
|
return {
|
||||||
|
init(sel, opts) {
|
||||||
|
cv = document.querySelector(sel); if (!cv) return;
|
||||||
|
ctx = cv.getContext('2d');
|
||||||
|
const o = (opts && opts.sections) || {};
|
||||||
|
secs = { works: document.querySelector(o.works), about: document.querySelector(o.about), cta: document.querySelector(o.cta) };
|
||||||
|
readColors(); addEventListener('yb:theme', () => { readColors(); if (!run) draw(0); });
|
||||||
|
size(); addEventListener('resize', size);
|
||||||
|
addEventListener('mousemove', e => { m.x = e.clientX; m.y = e.clientY; });
|
||||||
|
addEventListener('touchmove', e => { const t = e.touches[0]; m.x = t.clientX; m.y = t.clientY; }, { passive: true });
|
||||||
|
addEventListener('touchend', () => { m.x = m.y = -9999; });
|
||||||
|
if (document.documentElement.classList.contains('yb-static')) { draw(0); return; } // ?ybstatic=1 : image fixe
|
||||||
|
run = true; requestAnimationFrame(loop);
|
||||||
|
},
|
||||||
|
destroy() { run = false; }
|
||||||
|
};
|
||||||
|
})();
|
||||||
813
assets/js/seasons.js
Normal file
813
assets/js/seasons.js
Normal file
|
|
@ -0,0 +1,813 @@
|
||||||
|
/* seasons.js : décor animé des thèmes saisonniers (html[data-season]).
|
||||||
|
Halloween : chauves-souris, braises, brume, araignée suspendue, toiles, chapeau de sorcière.
|
||||||
|
Noël : neige qui fuit la souris, guirlande lumineuse sous la barre, bonnet sur le logo.
|
||||||
|
Bouton [data-season-toggle] : coupe / remet le décor (localStorage yb-season=off). */
|
||||||
|
window.YBSeason = (function () {
|
||||||
|
const root = document.documentElement;
|
||||||
|
const NS = 'http://www.w3.org/2000/svg';
|
||||||
|
/* Comme le reste du portfolio (choix « toujours animé ») : seul ?ybstatic=1 fige le décor.
|
||||||
|
Le réglage système « réduire les animations » coupe seulement le glitch au clic (flash). */
|
||||||
|
const CALM = typeof YB_STATIC !== 'undefined' && YB_STATIC;
|
||||||
|
const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||||
|
let season = '', built = false, run = false, cv, ctx, cw = 0, ch = 0, raf = 0;
|
||||||
|
let gen = 0, timers = [], clickFx = null, resizeFx = null; // remis à zéro à chaque changement de fête
|
||||||
|
const m = { x: -9999, y: -9999, vx: 0 };
|
||||||
|
let INK = '245,245,240', LIME = '255,123,28', S2 = '242,193,78', BG = '10,10,10', LIGHT = false;
|
||||||
|
|
||||||
|
/* Quantité réglée dans l'admin (Profil → Saisons), en % par fête : multiplie les nombres, divise les délais */
|
||||||
|
const D = () => { const d = ((window.YB_SEASONS || {}).density || {})[season]; return d === undefined ? 1 : Math.max(0, d) / 100; };
|
||||||
|
const iv = ms => D() > 0 ? ms / D() : Infinity;
|
||||||
|
const el = (tag, cls, html) => { const e = document.createElement(tag); if (cls) e.className = cls; if (html) e.innerHTML = html; return e; };
|
||||||
|
const rnd = (a, b) => a + Math.random() * (b - a);
|
||||||
|
function colors() {
|
||||||
|
const cs = getComputedStyle(root);
|
||||||
|
INK = cs.getPropertyValue('--ink-rgb').trim() || INK;
|
||||||
|
LIME = cs.getPropertyValue('--lime-rgb').trim() || LIME;
|
||||||
|
S2 = cs.getPropertyValue('--season-2-rgb').trim() || S2;
|
||||||
|
BG = cs.getPropertyValue('--bg-rgb').trim() || BG;
|
||||||
|
LIGHT = root.getAttribute('data-theme') === 'light';
|
||||||
|
}
|
||||||
|
function size() {
|
||||||
|
const dpr = Math.min(devicePixelRatio || 1, 2);
|
||||||
|
cw = innerWidth; ch = innerHeight;
|
||||||
|
cv.width = cw * dpr; cv.height = ch * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Halloween ─────────────────────────────────────────────────── */
|
||||||
|
const HAT_WITCH = '<svg viewBox="0 0 30 26"><path d="M2 22.5c6 2.4 20 2.4 26 0-3.6-1.7-6.5-2.1-7.4-2.2L17.3 6.6c-.4-1.5.6-3.2 3.4-4.4-3.8-.6-7.4 1.4-8.3 5.6L9.5 20.3C7.6 20.6 4.6 21.1 2 22.5z" fill="#221829" stroke="rgb(var(--lime-rgb))" stroke-width=".9" stroke-linejoin="round"/><path d="M9.8 18.6c3.4-.6 7.2-.6 10.4 0l.4 1.8c-3.6-.5-7.4-.5-11.2 0z" fill="rgb(var(--lime-rgb))"/></svg>';
|
||||||
|
const SPIDER = '<svg viewBox="0 0 30 30"><g fill="none" stroke="rgb(var(--ink-rgb))" stroke-width="1.3" stroke-linecap="round"><path d="M11 13 4 8 2 3M11 15 3 14 1 10M11 17 3 21 1 25M12 18 6 25 5 29M19 13l7-5 2-5M19 15l8-1 2-4M19 17l8 4 2 4M18 18l6 7 1 4"/></g><ellipse cx="15" cy="16" rx="4.6" ry="5.6" fill="rgb(var(--ink-rgb))"/><circle cx="15" cy="9.6" r="3" fill="rgb(var(--ink-rgb))"/><circle cx="13.9" cy="9.4" r=".8" fill="rgb(var(--lime-rgb))"/><circle cx="16.1" cy="9.4" r=".8" fill="rgb(var(--lime-rgb))"/></svg>';
|
||||||
|
/* Toile : rayons depuis le coin + fils qui s'affaissent entre deux rayons */
|
||||||
|
const WEB = (() => {
|
||||||
|
const rays = [0, 0.3, 0.62, 0.95, 1.26, Math.PI / 2], L = 150;
|
||||||
|
let d = rays.map(a => 'M0 0L' + (Math.cos(a) * L).toFixed(1) + ' ' + (Math.sin(a) * L).toFixed(1)).join('');
|
||||||
|
for (let r = 22; r < 140; r += 20 + r * 0.12) for (let i = 0; i < rays.length - 1; i++) {
|
||||||
|
const a1 = rays[i], a2 = rays[i + 1], am = (a1 + a2) / 2, rm = r * 0.86;
|
||||||
|
d += 'M' + (Math.cos(a1) * r).toFixed(1) + ' ' + (Math.sin(a1) * r).toFixed(1) + 'Q' + (Math.cos(am) * rm).toFixed(1) + ' ' + (Math.sin(am) * rm).toFixed(1) + ' ' + (Math.cos(a2) * r).toFixed(1) + ' ' + (Math.sin(a2) * r).toFixed(1);
|
||||||
|
}
|
||||||
|
return '<svg viewBox="0 0 150 150"><path d="' + d + '" fill="none" stroke="rgb(var(--ink-rgb))" stroke-width=".8"/></svg>';
|
||||||
|
})();
|
||||||
|
let bats = [], embers = [], spider, nextBats = 0;
|
||||||
|
|
||||||
|
function spawnBats(n, x0, y0) {
|
||||||
|
const fromLeft = x0 === undefined ? Math.random() < 0.5 : x0 < cw / 2;
|
||||||
|
for (let i = 0; i < n; i++) bats.push({
|
||||||
|
x: x0 !== undefined ? x0 + rnd(-20, 20) : (fromLeft ? -40 - i * 50 : cw + 40 + i * 50),
|
||||||
|
y: y0 !== undefined ? y0 + rnd(-20, 20) : rnd(ch * 0.12, ch * 0.55) + rnd(-30, 30),
|
||||||
|
vx: (fromLeft ? 1 : -1) * rnd(2.2, 3.6), vy: x0 !== undefined ? rnd(-3, -1.2) : 0,
|
||||||
|
s: rnd(9, 17), ph: rnd(0, 6.28), f: rnd(0.24, 0.34), wob: rnd(0, 6.28)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function drawBat(b) {
|
||||||
|
const fl = Math.sin(b.ph), s = b.s, wy = fl * s * 0.9;
|
||||||
|
ctx.save(); ctx.translate(b.x, b.y); if (b.vx < 0) ctx.scale(-1, 1);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, 0);
|
||||||
|
ctx.quadraticCurveTo(-s * 0.6, -wy - s * 0.2, -s * 1.6, -wy);
|
||||||
|
ctx.quadraticCurveTo(-s * 1.2, -wy * 0.3 + s * 0.15, -s * 1.1, s * 0.25 - wy * 0.2);
|
||||||
|
ctx.quadraticCurveTo(-s * 0.7, s * 0.05, -s * 0.5, s * 0.35);
|
||||||
|
ctx.quadraticCurveTo(-s * 0.3, s * 0.15, 0, s * 0.4);
|
||||||
|
ctx.quadraticCurveTo(s * 0.3, s * 0.15, s * 0.5, s * 0.35);
|
||||||
|
ctx.quadraticCurveTo(s * 0.7, s * 0.05, s * 1.1, s * 0.25 - wy * 0.2);
|
||||||
|
ctx.quadraticCurveTo(s * 1.2, -wy * 0.3 + s * 0.15, s * 1.6, -wy);
|
||||||
|
ctx.quadraticCurveTo(s * 0.6, -wy - s * 0.2, 0, 0);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.beginPath(); ctx.ellipse(0, s * 0.12, s * 0.22, s * 0.32, 0, 0, 6.283); ctx.fill(); // corps
|
||||||
|
ctx.beginPath(); ctx.moveTo(-s * 0.16, -s * 0.12); ctx.lineTo(-s * 0.1, -s * 0.34); ctx.lineTo(-s * 0.02, -s * 0.14);
|
||||||
|
ctx.moveTo(s * 0.16, -s * 0.12); ctx.lineTo(s * 0.1, -s * 0.34); ctx.lineTo(s * 0.02, -s * 0.14); ctx.fill(); // oreilles
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
function halloweenFrame(now) {
|
||||||
|
ctx.clearRect(0, 0, cw, ch);
|
||||||
|
// braises qui montent de la brume
|
||||||
|
for (const e of embers) {
|
||||||
|
e.y -= e.v; e.x += Math.sin(now / 900 + e.ph) * 0.35;
|
||||||
|
if (e.y < ch * 0.35) { e.y = ch + 10; e.x = rnd(0, cw); }
|
||||||
|
const life = Math.min(1, (ch - e.y) / 80) * Math.min(1, (e.y - ch * 0.35) / (ch * 0.25));
|
||||||
|
ctx.fillStyle = 'rgba(' + LIME + ',' + (0.55 * life * (0.6 + 0.4 * Math.sin(now / 200 + e.ph))) + ')';
|
||||||
|
ctx.beginPath(); ctx.arc(e.x, e.y, e.r, 0, 6.283); ctx.fill();
|
||||||
|
}
|
||||||
|
// vols de chauves-souris, qui s'écartent de la souris
|
||||||
|
if (now > nextBats) { spawnBats(Math.round(rnd(2, 5))); nextBats = now + iv(rnd(9000, 16000)); }
|
||||||
|
ctx.fillStyle = 'rgba(' + INK + ',' + (LIGHT ? 0.82 : 0.6) + ')';
|
||||||
|
bats = bats.filter(b => b.x > -200 && b.x < cw + 200 && b.y > -200);
|
||||||
|
for (const b of bats) {
|
||||||
|
const dx = b.x - m.x, dy = b.y - m.y, d = Math.hypot(dx, dy);
|
||||||
|
if (d < 140) { b.vy += dy / d * 0.5; b.vx += dx / d * 0.25; }
|
||||||
|
b.vy = b.vy * 0.96 + Math.sin(b.wob += 0.05) * 0.06;
|
||||||
|
b.x += b.vx; b.y += b.vy; b.ph += b.f * 1.5;
|
||||||
|
drawBat(b);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function buildHalloween() {
|
||||||
|
const logo = document.querySelector('.site-nav__logo');
|
||||||
|
if (logo) logo.prepend(el('span', 'season-hat season-deco', HAT_WITCH));
|
||||||
|
const fog = el('div', 'season-fog season-deco', '<i></i><i></i>'); fog.setAttribute('aria-hidden', 'true');
|
||||||
|
document.body.appendChild(fog);
|
||||||
|
spider = el('div', 'season-spider season-deco', '<span class="season-spider__thread"></span>' + SPIDER);
|
||||||
|
spider.setAttribute('aria-hidden', 'true'); document.body.appendChild(spider);
|
||||||
|
const flee = () => {
|
||||||
|
if (spider.classList.contains('is-fleeing')) return;
|
||||||
|
spider.classList.add('is-fleeing'); spider.style.setProperty('--drop', '0px');
|
||||||
|
setTimeout(() => { spider.classList.remove('is-fleeing'); dropSpider(); }, 2600);
|
||||||
|
};
|
||||||
|
spider.querySelector('svg').addEventListener('pointerenter', flee);
|
||||||
|
spider.querySelector('svg').addEventListener('click', flee);
|
||||||
|
dropSpider();
|
||||||
|
const foot = document.querySelector('.site-footer');
|
||||||
|
if (foot) { foot.prepend(el('span', 'season-web season-deco', WEB)); foot.prepend(el('span', 'season-web season-web--r season-deco', WEB)); }
|
||||||
|
for (let i = 0; i < Math.round(Math.min(34, innerWidth / 45) * D()); i++) embers.push({ x: rnd(0, innerWidth), y: rnd(innerHeight * 0.4, innerHeight), v: rnd(0.25, 0.7), r: rnd(0.8, 2.1), ph: rnd(0, 6.28) });
|
||||||
|
nextBats = performance.now() + 1500;
|
||||||
|
clickFx = (x, y) => spawnBats(3, x, y); // clic dans le vide : une petite nuée s'envole du curseur
|
||||||
|
}
|
||||||
|
function dropSpider() {
|
||||||
|
if (!spider || spider.classList.contains('is-fleeing')) return;
|
||||||
|
const nav = (document.querySelector('.site-nav') || {}).offsetHeight || 70;
|
||||||
|
const k = Math.min(1, scrollY / 900);
|
||||||
|
spider.style.setProperty('--drop', Math.round(nav + 40 + k * innerHeight * 0.32) + 'px');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Noël ──────────────────────────────────────────────────────── */
|
||||||
|
const HAT_SANTA = '<svg viewBox="0 0 30 26"><path d="M4 20.5C5.5 11 11 3.5 19 3.2c4.4-.2 7 2.6 7.6 7.6-1.8-2.4-4-3.3-6-2.9 2 3.2 3 7.4 3.1 12.4z" fill="rgb(var(--lime-rgb))"/><rect x="2.4" y="19" width="23.6" height="5.2" rx="2.6" fill="#fdfbf6" stroke="rgba(var(--ink-rgb),.25)" stroke-width=".6"/><circle cx="26.6" cy="11.4" r="2.7" fill="#fdfbf6" stroke="rgba(var(--ink-rgb),.25)" stroke-width=".6"/></svg>';
|
||||||
|
const BULBS = ['var(--lime)', 'var(--season-2)', '#3ddc84', '#7cc8ff', '#fff3c4'];
|
||||||
|
let flakes = [];
|
||||||
|
function buildLights() {
|
||||||
|
const nav = document.querySelector('.site-nav'); if (!nav) return;
|
||||||
|
let box = nav.querySelector('.season-lights');
|
||||||
|
if (!box) { box = el('div', 'season-lights season-deco'); box.setAttribute('aria-hidden', 'true'); nav.appendChild(box); }
|
||||||
|
box.innerHTML = '';
|
||||||
|
const W = nav.clientWidth, span = W < 720 ? 110 : 150, n = Math.max(2, Math.round(W / span)), sw = W / n, sag = 16;
|
||||||
|
const svg = document.createElementNS(NS, 'svg'), path = document.createElementNS(NS, 'path');
|
||||||
|
let d = 'M0 2';
|
||||||
|
for (let i = 0; i < n; i++) d += ' Q' + (i * sw + sw / 2) + ' ' + (2 + sag * 2) + ' ' + ((i + 1) * sw) + ' 2';
|
||||||
|
path.setAttribute('d', d); svg.appendChild(path); box.appendChild(svg);
|
||||||
|
let k = 0;
|
||||||
|
for (let i = 0; i < n; i++) for (let j = 1; j <= 3; j++) {
|
||||||
|
const u = j / 4, x = i * sw + sw * u, y = 2 + 2 * u * (1 - u) * sag * 2; // point sur la courbe
|
||||||
|
const b = el('span', 'season-bulb');
|
||||||
|
b.style.cssText = 'left:' + x + 'px;top:' + y + 'px;--c:' + BULBS[k % BULBS.length] + ';--d:' + (-(k % 7) * 0.35) + 's;--r:' + ((u - 0.5) * -40) + 'deg';
|
||||||
|
box.appendChild(b); k++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function makeFlakes() {
|
||||||
|
const n = Math.round(Math.min(170, cw * ch / 9000) * D());
|
||||||
|
flakes = Array.from({ length: n }, () => newFlake(true));
|
||||||
|
}
|
||||||
|
function newFlake(any) {
|
||||||
|
const r = Math.random() < 0.1 ? rnd(3.5, 6) : rnd(0.8, 2.6);
|
||||||
|
return { x: rnd(0, cw), y: any ? rnd(-ch, ch) : rnd(-60, -10), r, v: 0.35 + r * 0.22, ph: rnd(0, 6.28), sw: rnd(0.3, 1.1), dx: 0, rot: rnd(0, 6.28) };
|
||||||
|
}
|
||||||
|
function crystal(f) {
|
||||||
|
ctx.save(); ctx.translate(f.x, f.y); ctx.rotate(f.rot); ctx.beginPath();
|
||||||
|
for (let a = 0; a < 6; a++) {
|
||||||
|
ctx.moveTo(0, 0); ctx.lineTo(0, f.r * 1.6);
|
||||||
|
ctx.moveTo(-f.r * 0.45, f.r); ctx.lineTo(0, f.r * 1.25); ctx.lineTo(f.r * 0.45, f.r);
|
||||||
|
ctx.rotate(Math.PI / 3);
|
||||||
|
}
|
||||||
|
ctx.stroke(); ctx.restore();
|
||||||
|
}
|
||||||
|
function noelFrame(now) {
|
||||||
|
ctx.clearRect(0, 0, cw, ch);
|
||||||
|
const col = LIGHT ? '120,140,165' : '255,255,255';
|
||||||
|
m.vx *= 0.94;
|
||||||
|
ctx.lineWidth = 1; ctx.lineCap = 'round';
|
||||||
|
for (let i = 0; i < flakes.length; i++) {
|
||||||
|
const f = flakes[i];
|
||||||
|
const dx = f.x - m.x, dy = f.y - m.y, d2 = dx * dx + dy * dy;
|
||||||
|
if (d2 < 14400) { const d = Math.sqrt(d2) || 1, k = (1 - d / 120) * 2.2; f.dx += dx / d * k; f.y += dy / d * k * 0.5; }
|
||||||
|
f.dx = f.dx * 0.95 + m.vx * 0.012 * f.r;
|
||||||
|
f.y += f.v; f.x += Math.sin(now / 1400 + f.ph) * f.sw + f.dx * 0.15; f.rot += 0.004;
|
||||||
|
if (f.y > ch + 10 || f.x < -30 || f.x > cw + 30) { flakes[i] = newFlake(false); continue; }
|
||||||
|
const a = (f.r > 3 ? 0.7 : 0.35 + f.r * 0.18) * (LIGHT ? 0.9 : 1);
|
||||||
|
if (f.r > 3) { ctx.strokeStyle = 'rgba(' + col + ',' + a + ')'; crystal(f); }
|
||||||
|
else { ctx.fillStyle = 'rgba(' + col + ',' + a + ')'; ctx.beginPath(); ctx.arc(f.x, f.y, f.r, 0, 6.283); ctx.fill(); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function buildNoel() {
|
||||||
|
const logo = document.querySelector('.site-nav__logo');
|
||||||
|
if (logo) logo.prepend(el('span', 'season-hat season-deco', HAT_SANTA));
|
||||||
|
buildLights();
|
||||||
|
resizeFx = () => { buildLights(); makeFlakes(); };
|
||||||
|
makeFlakes();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Moteurs partagés ──────────────────────────────────────────── */
|
||||||
|
/* Feux d'artifice : fusées depuis le bas, gerbes avec gravité ; clic dans le vide = gerbe au curseur */
|
||||||
|
let rockets = [], sparks = [], nextRocket = 0, fwPal = () => ['255,255,255'];
|
||||||
|
function burst(x, y, pal) {
|
||||||
|
const n = Math.round(rnd(50, 80)), col = pal[Math.floor(Math.random() * pal.length)], ring = Math.random() < 0.3;
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
const ang = (i / n) * 6.283 + rnd(-0.05, 0.05), sp = ring ? 3.4 : rnd(0.8, 4.2);
|
||||||
|
sparks.push({ x, y, vx: Math.cos(ang) * sp, vy: Math.sin(ang) * sp, life: 1, dec: rnd(0.011, 0.02), c: Math.random() < 0.2 ? pal[Math.floor(Math.random() * pal.length)] : col });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function fireworksFrame(now, rate) {
|
||||||
|
if (now > nextRocket) {
|
||||||
|
const x = rnd(cw * 0.1, cw * 0.9);
|
||||||
|
rockets.push({ x, y: ch + 5, vx: rnd(-0.6, 0.6), vy: -Math.sqrt(2 * 0.12 * rnd(ch * 0.45, ch * 0.8)) });
|
||||||
|
nextRocket = now + iv(rnd(rate * 0.5, rate * 1.4));
|
||||||
|
}
|
||||||
|
ctx.globalCompositeOperation = LIGHT ? 'source-over' : 'lighter';
|
||||||
|
rockets = rockets.filter(r => {
|
||||||
|
r.x += r.vx; r.y += r.vy; r.vy += 0.12;
|
||||||
|
ctx.strokeStyle = 'rgba(' + INK + ',.6)'; ctx.lineWidth = 1.6;
|
||||||
|
ctx.beginPath(); ctx.moveTo(r.x, r.y); ctx.lineTo(r.x - r.vx * 4, r.y - r.vy * 4); ctx.stroke();
|
||||||
|
if (r.vy >= -0.4) { burst(r.x, r.y, fwPal()); return false; }
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
ctx.lineWidth = 1.8; ctx.lineCap = 'round';
|
||||||
|
sparks = sparks.filter(p => {
|
||||||
|
p.vx *= 0.985; p.vy = p.vy * 0.985 + 0.045; p.x += p.vx; p.y += p.vy; p.life -= p.dec;
|
||||||
|
if (p.life <= 0) return false;
|
||||||
|
ctx.strokeStyle = 'rgba(' + p.c + ',' + p.life + ')';
|
||||||
|
ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p.x - p.vx * 3, p.y - p.vy * 3); ctx.stroke();
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
ctx.globalCompositeOperation = 'source-over';
|
||||||
|
}
|
||||||
|
/* Objets qui tombent (ou montent si dir = -1) en tournoyant, écartés par la souris */
|
||||||
|
let drift = [];
|
||||||
|
function driftFill(n, make) { drift = Array.from({ length: Math.round(n * D()) }, () => Object.assign(make(), { y: rnd(-ch, ch) })); }
|
||||||
|
function driftFrame(now, make, draw) {
|
||||||
|
for (let i = 0; i < drift.length; i++) {
|
||||||
|
const f = drift[i];
|
||||||
|
const dx = f.x - m.x, dy = f.y - m.y, d2 = dx * dx + dy * dy;
|
||||||
|
if (d2 < 14400) { const d = Math.sqrt(d2) || 1, k = (1 - d / 120) * 2.2; f.x += dx / d * k; f.y += dy / d * k * 0.5; }
|
||||||
|
f.y += f.v * (f.dir || 1); f.x += Math.sin(now / 1400 + f.ph) * f.sw; f.rot += f.vr;
|
||||||
|
if (f.y > ch + 40 || f.y < -60 || f.x < -60 || f.x > cw + 60) { drift[i] = make(); continue; }
|
||||||
|
ctx.save(); ctx.translate(f.x, f.y); ctx.rotate(f.rot); draw(f); ctx.restore();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const fall = (o) => Object.assign({ x: rnd(0, cw), y: rnd(-60, -20), v: rnd(0.5, 1.2), ph: rnd(0, 6.28), sw: rnd(0.2, 0.8), rot: rnd(0, 6.28), vr: rnd(-0.02, 0.02) }, o);
|
||||||
|
const rise = (o) => Object.assign(fall(o), { y: ch + rnd(10, 40), dir: -1 });
|
||||||
|
function pill(html) {
|
||||||
|
let p = document.querySelector('.season-pill');
|
||||||
|
if (!p) { p = el('div', 'season-pill season-deco'); p.setAttribute('aria-live', 'polite'); document.body.appendChild(p); }
|
||||||
|
p.innerHTML = html; return p;
|
||||||
|
}
|
||||||
|
const onEmptyClick = fn => { clickFx = fn; };
|
||||||
|
function hat(svg) { const logo = document.querySelector('.site-nav__logo'); if (logo) logo.prepend(el('span', 'season-hat season-deco', svg)); }
|
||||||
|
|
||||||
|
/* ── Nouvel An : feux d'artifice or et argent, compte à rebours ─── */
|
||||||
|
const HAT_PARTY = '<svg viewBox="0 0 30 26"><path d="M8 23 15.5 3 23 23z" fill="rgb(var(--lime-rgb))"/><path d="M10.3 17h10.4M12.4 11.4h6.2" stroke="rgb(var(--season-2-rgb))" stroke-width="2"/><circle cx="15.5" cy="3" r="2.6" fill="rgb(var(--season-2-rgb))"/></svg>';
|
||||||
|
function buildNouvelAn() {
|
||||||
|
hat(HAT_PARTY);
|
||||||
|
fwPal = () => LIGHT ? ['138,100,0', '85,96,122', '176,18,42'] : ['242,193,78', '255,240,200', '217,221,232', '255,255,255'];
|
||||||
|
const p = pill(''), pad = n => String(n).padStart(2, '0');
|
||||||
|
let wasCount = false;
|
||||||
|
const tick = () => {
|
||||||
|
const now = new Date(), y = now.getFullYear();
|
||||||
|
if (now.getMonth() === 0) {
|
||||||
|
p.innerHTML = 'BONNE ANNÉE <b>' + y + '</b> ✦';
|
||||||
|
if (wasCount) for (let i = 0; i < 6; i++) setTimeout(() => burst(rnd(cw * 0.2, cw * 0.8), rnd(ch * 0.15, ch * 0.5), fwPal()), i * 250); // minuit !
|
||||||
|
wasCount = false;
|
||||||
|
} else {
|
||||||
|
const s = Math.floor((new Date(y + 1, 0, 1) - now) / 1000), d = Math.floor(s / 86400);
|
||||||
|
p.innerHTML = '<b>' + (y + 1) + '</b> DANS ' + (d ? d + ' J ' : '') + '<b>' + pad(Math.floor(s / 3600) % 24) + ':' + pad(Math.floor(s / 60) % 60) + ':' + pad(s % 60) + '</b>';
|
||||||
|
wasCount = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
tick(); timers.push(setInterval(tick, 1000));
|
||||||
|
onEmptyClick((x, y) => burst(x, y, fwPal()));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 14 juillet : feux d'artifice tricolores, cocarde ─────────── */
|
||||||
|
const HAT_COCKADE = '<svg viewBox="0 0 30 26"><circle cx="15" cy="12" r="10" fill="#c8102e"/><circle cx="15" cy="12" r="6.8" fill="#fff"/><circle cx="15" cy="12" r="3.6" fill="#1f3fa8"/><path d="M10 20l-2.5 6 4-1.6L13 26l.8-5M20 20l2.5 6-4-1.6L17 26l-.8-5" fill="#c8102e"/></svg>';
|
||||||
|
function buildJuillet() {
|
||||||
|
hat(HAT_COCKADE);
|
||||||
|
fwPal = () => LIGHT ? ['31,63,168', '200,16,46', '120,130,150'] : ['60,110,255', '255,255,255', '255,60,80'];
|
||||||
|
onEmptyClick((x, y) => burst(x, y, fwPal()));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Saint-Patrick : trèfles qui tombent, chapeau de lutin ─────── */
|
||||||
|
const HAT_LEPRE = '<svg viewBox="0 0 30 26"><ellipse cx="15" cy="22" rx="13" ry="3.4" fill="#13703a"/><path d="M8 21.5 9.5 5h11L22 21.5z" fill="#1b8f4c"/><rect x="8.6" y="15" width="12.8" height="3.4" fill="#111"/><rect x="13" y="14.4" width="4" height="4.6" fill="none" stroke="#f2c14e" stroke-width="1.2"/></svg>';
|
||||||
|
function clover(f) {
|
||||||
|
const r = f.r, col = f.gold ? 'rgba(242,193,78,.9)' : 'rgba(' + LIME + ',' + f.a + ')';
|
||||||
|
ctx.fillStyle = col;
|
||||||
|
for (let k = 0; k < (f.gold ? 4 : 3); k++) {
|
||||||
|
ctx.rotate(6.283 / (f.gold ? 4 : 3));
|
||||||
|
ctx.beginPath(); ctx.arc(-r * 0.32, -r * 0.62, r * 0.42, 0, 6.283); ctx.arc(r * 0.32, -r * 0.62, r * 0.42, 0, 6.283); ctx.fill();
|
||||||
|
}
|
||||||
|
ctx.strokeStyle = col; ctx.lineWidth = Math.max(1, r * 0.14); ctx.beginPath(); ctx.moveTo(0, 0); ctx.quadraticCurveTo(r * 0.3, r * 0.8, r * 0.1, r * 1.3); ctx.stroke();
|
||||||
|
}
|
||||||
|
const makeClover = () => fall({ r: rnd(5, 11), a: rnd(0.35, 0.75), gold: Math.random() < 0.05 });
|
||||||
|
function buildStPatrick() { hat(HAT_LEPRE); driftFill(Math.min(46, Math.round(cw / 32)), makeClover); }
|
||||||
|
|
||||||
|
/* ── Pâques : pétales, oreilles de lapin, chasse aux œufs ──────── */
|
||||||
|
const HAT_BUNNY = '<svg viewBox="0 0 30 26"><path d="M9 24C5.5 16 5 5 8.6 3.6 12 2.4 12.8 14 12.4 24zM17.6 24c-.4-10 .4-21.6 3.8-20.4C25 5 24.5 16 21 24z" fill="#fdfbf6" stroke="rgba(var(--ink-rgb),.3)" stroke-width=".7"/><path d="M9.3 21c-1.6-5-1.8-12.6-.2-14.4 1.4-.4 2 8 1.8 14.4zM19.4 21c.1-6.4.6-14.8 2-14.4 1.6 1.8 1.4 9.4-.2 14.4z" fill="rgb(var(--lime-rgb))"/></svg>';
|
||||||
|
const EGG_COLS = [['#ff9fcb', '#fff1a8'], ['#8ee6c2', '#ff9fcb'], ['#bfa2ff', '#fff1a8'], ['#ffd36e', '#8ec9ff'], ['#8ec9ff', '#ffffff']];
|
||||||
|
const eggSvg = c => '<svg viewBox="0 0 26 34"><path d="M13 1C19.6 1 25 11 25 20.4 25 28 19.7 33 13 33S1 28 1 20.4C1 11 6.4 1 13 1z" fill="' + c[0] + '" stroke="rgba(0,0,0,.2)"/><path d="M1.6 17l4 3 3.8-3 3.6 3 3.6-3 3.8 3 4-3" fill="none" stroke="' + c[1] + '" stroke-width="2.4"/><circle cx="9" cy="10" r="1.6" fill="' + c[1] + '"/><circle cx="17" cy="26" r="1.6" fill="' + c[1] + '"/></svg>';
|
||||||
|
function petal(f) { ctx.fillStyle = 'rgba(' + f.c + ',' + f.a + ')'; ctx.beginPath(); ctx.ellipse(0, 0, f.r, f.r * 0.55, 0, 0, 6.283); ctx.fill(); }
|
||||||
|
const makePetal = () => fall({ r: rnd(3, 6.5), a: rnd(0.35, 0.7), c: ['255,159,203', '255,210,230', '190,160,255', '142,230,194'][Math.floor(Math.random() * 4)], vr: rnd(-0.04, 0.04) });
|
||||||
|
function buildPaques() {
|
||||||
|
hat(HAT_BUNNY);
|
||||||
|
driftFill(Math.min(36, Math.round(cw / 40)), makePetal);
|
||||||
|
const total = 3, H = document.documentElement.scrollHeight; let found = 0;
|
||||||
|
const say = () => pill(found < total ? '<b>' + (total - found) + '</b> ŒUF' + (total - found > 1 ? 'S' : '') + ' CACHÉ' + (total - found > 1 ? 'S' : '') + ' SUR CETTE PAGE' : 'BRAVO, TOUS TROUVÉS ✦');
|
||||||
|
say();
|
||||||
|
for (let i = 0; i < total; i++) {
|
||||||
|
const b = el('button', 'season-egg season-deco', eggSvg(EGG_COLS[i % EGG_COLS.length]));
|
||||||
|
b.type = 'button'; b.setAttribute('aria-label', 'Œuf de Pâques caché');
|
||||||
|
b.style.cssText = 'left:' + rnd(4, 92) + '%;top:' + Math.round(rnd(0.12 + i * 0.28, 0.36 + i * 0.28) * (H - 120)) + 'px;--r:' + rnd(-30, 30) + 'deg';
|
||||||
|
b.addEventListener('click', () => {
|
||||||
|
if (b.classList.contains('is-found')) return;
|
||||||
|
b.classList.add('is-found'); found++; say();
|
||||||
|
const r = b.getBoundingClientRect(); burst(r.left + 13, r.top + 17, PASTELS);
|
||||||
|
if (found === total) for (let k = 0; k < 5; k++) setTimeout(() => burst(rnd(cw * 0.2, cw * 0.8), rnd(ch * 0.2, ch * 0.6), PASTELS), k * 220);
|
||||||
|
});
|
||||||
|
document.body.appendChild(b);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const PASTELS = ['255,159,203', '142,230,194', '255,222,120', '190,160,255', '140,200,255'];
|
||||||
|
function paquesFrame(now) { driftFrame(now, makePetal, petal); fireworksFrame(now, 1e12); }
|
||||||
|
|
||||||
|
/* ── Poisson d'avril : bancs de poissons, bulles, poisson collé ── */
|
||||||
|
const FISH = (c1, c2) => '<svg viewBox="0 0 60 30"><path d="M2 15C10 4 26 1 38 6c4 2 7 5 9 9-2 4-5 7-9 9-12 5-28 2-36-9z" fill="' + c1 + '" stroke="rgba(0,0,0,.25)" stroke-width="1"/><path d="M46 15l12-10v20z" fill="' + c1 + '" stroke="rgba(0,0,0,.25)" stroke-width="1"/><path d="M20 8c3 4 3 10 0 14M28 7c3 5 3 11 0 16" fill="none" stroke="' + c2 + '" stroke-width="1.6"/><circle cx="11" cy="13" r="2.4" fill="#111"/><circle cx="11.6" cy="12.4" r=".8" fill="#fff"/></svg>';
|
||||||
|
const HAT_FISH = '<svg viewBox="0 0 30 26"><g transform="translate(1 6) scale(.48)">' + FISH('rgb(var(--lime-rgb))', 'rgb(var(--season-2-rgb))').replace(/<\/?svg[^>]*>/g, '') + '</g></svg>';
|
||||||
|
let fishes = [], nextFish = 0;
|
||||||
|
function drawFish(f) {
|
||||||
|
const s = f.s, w = Math.sin(f.ph) * s * 0.25;
|
||||||
|
ctx.save(); ctx.translate(f.x, f.y); if (f.vx < 0) ctx.scale(-1, 1);
|
||||||
|
ctx.fillStyle = 'rgba(' + f.c + ',' + f.a + ')';
|
||||||
|
ctx.beginPath(); ctx.ellipse(0, 0, s, s * 0.45, 0, 0, 6.283); ctx.fill();
|
||||||
|
ctx.beginPath(); ctx.moveTo(-s * 0.85, 0); ctx.lineTo(-s * 1.5, -s * 0.45 + w); ctx.lineTo(-s * 1.5, s * 0.45 + w); ctx.closePath(); ctx.fill();
|
||||||
|
ctx.fillStyle = 'rgba(' + BG + ',' + f.a + ')'; ctx.beginPath(); ctx.arc(s * 0.55, -s * 0.08, s * 0.1, 0, 6.283); ctx.fill();
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
function poissonFrame(now) {
|
||||||
|
if (now > nextFish) {
|
||||||
|
const left = Math.random() < 0.5, y = rnd(ch * 0.15, ch * 0.85), n = Math.round(rnd(3, 7)), c = Math.random() < 0.5 ? LIME : S2;
|
||||||
|
for (let i = 0; i < n; i++) fishes.push({ x: left ? -40 - i * rnd(25, 45) : cw + 40 + i * rnd(25, 45), y: y + rnd(-40, 40), vx: (left ? 1 : -1) * rnd(1.4, 2.2), s: rnd(7, 12), ph: rnd(0, 6), c, a: rnd(0.35, 0.6) });
|
||||||
|
nextFish = now + iv(rnd(4000, 9000));
|
||||||
|
}
|
||||||
|
fishes = fishes.filter(f => f.x > -300 && f.x < cw + 300);
|
||||||
|
for (const f of fishes) {
|
||||||
|
const dx = f.x - m.x, dy = f.y - m.y, d = Math.hypot(dx, dy);
|
||||||
|
if (d < 120) { f.y += dy / d * 2.4; f.vx += Math.sign(dx) * 0.05; }
|
||||||
|
f.x += f.vx; f.y += Math.sin(f.ph * 0.3) * 0.3; f.ph += 0.25; drawFish(f);
|
||||||
|
}
|
||||||
|
driftFrame(now, makeBubble, bubble);
|
||||||
|
}
|
||||||
|
function bubble(f) { ctx.strokeStyle = 'rgba(' + INK + ',' + f.a + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(0, 0, f.r, 0, 6.283); ctx.stroke(); }
|
||||||
|
const makeBubble = () => rise({ r: rnd(2, 6), a: rnd(0.15, 0.35), v: rnd(0.4, 1), vr: 0 });
|
||||||
|
function buildPoisson() {
|
||||||
|
hat(HAT_FISH);
|
||||||
|
driftFill(Math.min(26, Math.round(cw / 55)), makeBubble);
|
||||||
|
nextFish = performance.now() + 800;
|
||||||
|
const paper = () => FISH(LIGHT ? '#ffd0a1' : '#ffb347', '#e56b00');
|
||||||
|
// poisson collé au premier grand titre ; un clic le décolle
|
||||||
|
const h = document.querySelector('main h1, #yb-root h1, .hero__title');
|
||||||
|
if (h) {
|
||||||
|
const r = h.getBoundingClientRect(), t = el('div', 'season-fish season-fish--tape season-deco', paper());
|
||||||
|
t.style.left = Math.min(r.right + scrollX - 50, document.documentElement.clientWidth - 90) + 'px'; t.style.top = (r.top + scrollY + r.height * 0.15) + 'px'; t.style.transform = 'rotate(-12deg)';
|
||||||
|
t.title = 'Poisson d\'avril !';
|
||||||
|
t.addEventListener('click', () => { t.style.transition = 'transform 1s cubic-bezier(.5,0,.8,.4), opacity 1s'; t.style.transform = 'translateY(70vh) rotate(160deg)'; t.style.opacity = '0'; pill('POISSON D\'AVRIL ! 🐟').classList.remove('is-hidden'); setTimeout(() => document.querySelector('.season-pill').classList.add('is-hidden'), 2600); });
|
||||||
|
document.body.appendChild(t);
|
||||||
|
}
|
||||||
|
// et un autre accroché au curseur, comme dans le dos de quelqu'un (souris uniquement)
|
||||||
|
if (!matchMedia('(pointer: coarse)').matches && !CALM) {
|
||||||
|
const c = el('div', 'season-fish season-deco', paper()); document.body.appendChild(c);
|
||||||
|
let fx = -200, fy = -200, ang = 0; const g = gen;
|
||||||
|
const follow = () => {
|
||||||
|
if (g !== gen) return;
|
||||||
|
if (m.x > -9000) { const tx = m.x + 14, ty = m.y + 18; ang = ang * 0.9 + Math.max(-0.6, Math.min(0.6, (tx - fx) * 0.02)) * 0.1; fx += (tx - fx) * 0.18; fy += (ty - fy) * 0.18; }
|
||||||
|
c.style.transform = 'translate(' + fx + 'px,' + fy + 'px) rotate(' + (0.4 + ang) + 'rad)';
|
||||||
|
requestAnimationFrame(follow);
|
||||||
|
};
|
||||||
|
follow();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Fête de la musique : notes, égaliseur, clic = une note jouée ─ */
|
||||||
|
const HAT_PHONES = '<svg viewBox="0 0 30 26"><path d="M5 19v-5a10 10 0 0 1 20 0v5" fill="none" stroke="rgb(var(--ink-rgb))" stroke-width="2.2"/><rect x="2.5" y="15" width="6" height="9" rx="2.5" fill="rgb(var(--lime-rgb))"/><rect x="21.5" y="15" width="6" height="9" rx="2.5" fill="rgb(var(--lime-rgb))"/></svg>';
|
||||||
|
function note(f) {
|
||||||
|
const r = f.r; ctx.fillStyle = ctx.strokeStyle = 'rgba(' + f.c + ',' + f.a + ')'; ctx.lineWidth = Math.max(1.2, r * 0.22);
|
||||||
|
ctx.beginPath(); ctx.ellipse(0, 0, r, r * 0.72, -0.4, 0, 6.283); ctx.fill();
|
||||||
|
ctx.beginPath(); ctx.moveTo(r * 0.85, -r * 0.2); ctx.lineTo(r * 0.85, -r * 3.2);
|
||||||
|
if (f.dbl) { ctx.lineTo(r * 3.6, -r * 3.7); ctx.lineTo(r * 3.6, -r * 0.7); ctx.stroke(); ctx.beginPath(); ctx.ellipse(r * 2.75, -r * 0.5, r, r * 0.72, -0.4, 0, 6.283); ctx.fill(); }
|
||||||
|
else { ctx.quadraticCurveTo(r * 2.2, -r * 2.4, r * 2, -r * 1.2); ctx.stroke(); }
|
||||||
|
}
|
||||||
|
const makeNote = () => rise({ r: rnd(3.5, 6.5), a: rnd(0.3, 0.65), c: Math.random() < 0.5 ? LIME : S2, dbl: Math.random() < 0.35, v: rnd(0.5, 1.1), vr: rnd(-0.01, 0.01), rot: rnd(-0.3, 0.3) });
|
||||||
|
let audio, eqBars = [];
|
||||||
|
function play(x) {
|
||||||
|
try {
|
||||||
|
audio = audio || new (window.AudioContext || window.webkitAudioContext)();
|
||||||
|
const scale = [261.6, 293.7, 329.6, 392, 440, 523.3, 587.3, 659.3, 784];
|
||||||
|
const o = audio.createOscillator(), g = audio.createGain(), t = audio.currentTime;
|
||||||
|
o.type = 'triangle'; o.frequency.value = scale[Math.min(scale.length - 1, Math.floor(x / cw * scale.length))];
|
||||||
|
g.gain.setValueAtTime(0.0001, t); g.gain.exponentialRampToValueAtTime(0.12, t + 0.02); g.gain.exponentialRampToValueAtTime(0.0001, t + 0.9);
|
||||||
|
o.connect(g).connect(audio.destination); o.start(t); o.stop(t + 1);
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
function buildMusique() {
|
||||||
|
hat(HAT_PHONES);
|
||||||
|
driftFill(Math.min(30, Math.round(cw / 48)), makeNote);
|
||||||
|
const eq = el('div', 'season-eq season-deco'); eq.setAttribute('aria-hidden', 'true');
|
||||||
|
const n = Math.min(64, Math.round(innerWidth / 22));
|
||||||
|
for (let i = 0; i < n; i++) eqBars.push(eq.appendChild(el('i')));
|
||||||
|
document.body.appendChild(eq);
|
||||||
|
onEmptyClick((x, y) => { play(x); for (let i = 0; i < 4; i++) drift.push(Object.assign(makeNote(), { x: x + rnd(-20, 20), y: y + rnd(-10, 10), v: rnd(1, 2) })); });
|
||||||
|
}
|
||||||
|
function musiqueFrame(now) {
|
||||||
|
driftFrame(now, makeNote, note);
|
||||||
|
if (drift.length > 60) drift.length = 60;
|
||||||
|
const t = now / 1000, beat = Math.exp(-((t * 2) % 1) * 5);
|
||||||
|
eqBars.forEach((b, i) => {
|
||||||
|
const k = i / eqBars.length, v = 0.18 + 0.32 * beat * (1 - k) + 0.25 * Math.abs(Math.sin(t * 3.1 + i * 0.7)) * Math.abs(Math.sin(t * 1.3 + i * 0.23)) + 0.12 * Math.sin(t * 7 + i);
|
||||||
|
b.style.transform = 'scaleY(' + Math.max(0.06, Math.min(1, v)).toFixed(3) + ')';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Black Friday : ruban jaune et noir, étiquettes qui tombent ── */
|
||||||
|
const HAT_TAG = '<svg viewBox="0 0 30 26"><path d="M14 2.5 10 9" stroke="rgb(var(--ink-rgb))" stroke-width="1"/><g transform="rotate(14 15 15)"><path d="M6 10h20v10H6l-4-5z" fill="#ffd400"/><circle cx="5.4" cy="15" r="1" fill="#0b0b0b"/><text x="8" y="17.6" font-family="monospace" font-weight="800" font-size="7" fill="#0b0b0b">-100%</text></g></svg>';
|
||||||
|
const PRICES = ['-30 %', '-50 %', '-70 %', '-100 %', 'OFFERT'];
|
||||||
|
function priceTag(f) {
|
||||||
|
const w = f.r * 5.2, h = f.r * 2.1;
|
||||||
|
ctx.fillStyle = 'rgba(255,212,0,' + f.a + ')';
|
||||||
|
ctx.beginPath(); ctx.moveTo(-w / 2, -h / 2); ctx.lineTo(w / 2, -h / 2); ctx.lineTo(w / 2, h / 2); ctx.lineTo(-w / 2, h / 2); ctx.lineTo(-w / 2 - h * 0.45, 0); ctx.closePath(); ctx.fill();
|
||||||
|
ctx.fillStyle = 'rgba(11,11,11,' + f.a + ')'; ctx.font = '800 ' + Math.round(h * 0.5) + 'px "JetBrains Mono", monospace';
|
||||||
|
ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(f.t, 0, 1);
|
||||||
|
}
|
||||||
|
const makeTag = () => fall({ r: rnd(4, 7), a: rnd(0.45, 0.85), t: PRICES[Math.floor(Math.random() * PRICES.length)], vr: rnd(-0.015, 0.015) });
|
||||||
|
function buildBlackFriday() {
|
||||||
|
hat(HAT_TAG);
|
||||||
|
driftFill(Math.min(7, Math.round(cw / 220)), makeTag);
|
||||||
|
const txt = '<em>BLACK FRIDAY</em><em>CV À -100 %</em><em>CONTACT GRATUIT</em><em>STOCK LIMITÉ : 1 YASSER</em>';
|
||||||
|
const tape = el('div', 'season-tape season-deco', '<span>' + txt + txt + txt + txt + '</span>'); tape.setAttribute('aria-hidden', 'true');
|
||||||
|
document.body.appendChild(tape);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Anniversaire : ballons à éclater, confettis, bougie ──────── */
|
||||||
|
const HAT_CANDLE = '<svg viewBox="0 0 30 26"><rect x="12.5" y="10" width="5" height="14" rx="1.2" fill="rgb(var(--lime-rgb))"/><path d="M12.5 13.5l5-2M12.5 18l5-2M12.5 22.5l5-2" stroke="#fff" stroke-width="1.1"/><path d="M15 9.6V7.6" stroke="rgb(var(--ink-rgb))" stroke-width=".9"/><path class="season-flame" d="M15 1.2c1.9 2.1 2.4 3.6 1.7 4.9-.7 1.2-2.7 1.2-3.4 0-.7-1.3-.2-2.8 1.7-4.9z" fill="#ffb238"/></svg>';
|
||||||
|
const PARTY = ['46,230,197', '255,207,74', '255,107,129', '120,150,255', '190,120,255', '255,150,60'];
|
||||||
|
let balloons = [], nextBalloon = 0;
|
||||||
|
function confetti(f) { ctx.fillStyle = 'rgba(' + f.c + ',' + f.a + ')'; ctx.fillRect(-f.r, -f.r * 0.45, f.r * 2, f.r * 0.9); }
|
||||||
|
const makeConfetti = () => fall({ r: rnd(2.5, 5), a: rnd(0.5, 0.85), c: PARTY[Math.floor(Math.random() * PARTY.length)], v: rnd(0.8, 1.6), vr: rnd(-0.12, 0.12) });
|
||||||
|
function newBalloon(any) {
|
||||||
|
const r = rnd(16, 26);
|
||||||
|
return { x: rnd(r, cw - r), y: any ? rnd(ch * 0.3, ch * 1.3) : ch + r * 3, r, v: rnd(0.45, 0.9), ph: rnd(0, 6.28), c: PARTY[Math.floor(Math.random() * PARTY.length)] };
|
||||||
|
}
|
||||||
|
function drawBalloon(b, now) {
|
||||||
|
const x = b.x + Math.sin(now / 1300 + b.ph) * 6, y = b.y, r = b.r;
|
||||||
|
ctx.strokeStyle = 'rgba(' + INK + ',.3)'; ctx.lineWidth = 1;
|
||||||
|
ctx.beginPath(); ctx.moveTo(x, y + r * 1.15);
|
||||||
|
for (let k = 1; k <= 6; k++) ctx.lineTo(x + Math.sin(now / 500 + b.ph + k) * 3, y + r * 1.15 + k * r * 0.35);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.fillStyle = 'rgba(' + b.c + ',.82)';
|
||||||
|
ctx.beginPath(); ctx.ellipse(x, y, r * 0.86, r, 0, 0, 6.283); ctx.fill();
|
||||||
|
ctx.beginPath(); ctx.moveTo(x, y + r * 0.95); ctx.lineTo(x - r * 0.14, y + r * 1.17); ctx.lineTo(x + r * 0.14, y + r * 1.17); ctx.closePath(); ctx.fill();
|
||||||
|
ctx.fillStyle = 'rgba(255,255,255,.35)'; ctx.beginPath(); ctx.ellipse(x - r * 0.32, y - r * 0.38, r * 0.16, r * 0.28, -0.5, 0, 6.283); ctx.fill();
|
||||||
|
b.sx = x;
|
||||||
|
}
|
||||||
|
function anniversaireFrame(now) {
|
||||||
|
driftFrame(now, makeConfetti, confetti);
|
||||||
|
if (now > nextBalloon && balloons.length < 9 * D()) { balloons.push(newBalloon(false)); nextBalloon = now + iv(rnd(1800, 4200)); }
|
||||||
|
balloons = balloons.filter(b => b.y > -b.r * 4);
|
||||||
|
for (const b of balloons) {
|
||||||
|
const dx = (b.sx || b.x) - m.x, dy = b.y - m.y, d = Math.hypot(dx, dy);
|
||||||
|
if (d < 90) b.x += dx / d * 1.2;
|
||||||
|
b.y -= b.v; drawBalloon(b, now);
|
||||||
|
}
|
||||||
|
fireworksFrame(now, 1e12);
|
||||||
|
}
|
||||||
|
function buildAnniversaire() {
|
||||||
|
hat(HAT_CANDLE);
|
||||||
|
driftFill(Math.min(40, Math.round(cw / 36)), makeConfetti);
|
||||||
|
balloons = Array.from({ length: Math.round(Math.min(6, cw / 220) * D()) }, () => newBalloon(true));
|
||||||
|
nextBalloon = performance.now() + 1500;
|
||||||
|
const p = pill('14 MAI · C\'EST MON ANNIVERSAIRE ✦');
|
||||||
|
timers.push(setTimeout(() => p.classList.add('is-hidden'), 6000));
|
||||||
|
// clic sur un ballon : il éclate ; ailleurs : poignée de confettis
|
||||||
|
clickFx = (x, y) => {
|
||||||
|
const i = balloons.findIndex(b => Math.hypot((b.sx || b.x) - x, (b.y - y) * 0.86) < b.r * 1.1);
|
||||||
|
if (i > -1) { const b = balloons.splice(i, 1)[0]; burst(b.sx || b.x, b.y, [b.c, '255,255,255']); }
|
||||||
|
else burst(x, y, PARTY);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Indépendance de l'Algérie : drapeau, feux d'artifice et confettis vert / blanc / rouge ── */
|
||||||
|
const HAT_DZ = '<svg viewBox="0 0 30 26"><path d="M5 2v23" stroke="rgb(var(--ink-rgb))" stroke-width="1.2" stroke-linecap="round"/><path d="M5.6 3h10v12h-10z" fill="#006233"/><path d="M15.6 3h10v12h-10z" fill="#ffffff"/><path d="M5.6 3h20v12h-20z" fill="none" stroke="rgba(var(--ink-rgb),.25)" stroke-width=".5"/><path d="M17.3 5.4a3.8 3.8 0 1 0 0 7.2 3.05 3.05 0 1 1 0-7.2z" fill="#d21034"/><path d="M18.9 7.5l.42 1 1.08.04-.85.66.3 1.04-.95-.6-.9.62.28-1.05-.86-.64 1.08-.05z" fill="#d21034"/></svg>';
|
||||||
|
const DZ = ['0,98,51', '255,255,255', '210,16,52', '47,191,113'];
|
||||||
|
const makeConfettiDZ = () => fall({ r: rnd(2.5, 5), a: rnd(0.5, 0.85), c: DZ[Math.floor(Math.random() * DZ.length)], v: rnd(0.8, 1.6), vr: rnd(-0.12, 0.12) });
|
||||||
|
function buildAlgerie() {
|
||||||
|
hat(HAT_DZ);
|
||||||
|
fwPal = () => LIGHT ? ['0,98,51', '200,16,46', '90,110,100'] : ['47,191,113', '255,255,255', '230,57,70'];
|
||||||
|
driftFill(Math.min(34, Math.round(cw / 42)), makeConfettiDZ);
|
||||||
|
const p = pill('5 JUILLET · INDÉPENDANCE DE L\'ALGÉRIE ✦');
|
||||||
|
timers.push(setTimeout(() => p.classList.add('is-hidden'), 6000));
|
||||||
|
clickFx = (x, y) => burst(x, y, fwPal());
|
||||||
|
}
|
||||||
|
function algerieFrame(now) { driftFrame(now, makeConfettiDZ, confetti); fireworksFrame(now, 1700); }
|
||||||
|
|
||||||
|
/* ── Japon : torii, pétales de sakura, vagues seigaiha ─────────── */
|
||||||
|
const HAT_TORII = '<svg viewBox="0 0 30 26"><path d="M2 5.2c5 1.6 21 1.6 26 0l-.6 2.6c-5 1.2-19.8 1.2-24.8 0z" fill="#e8452c"/><path d="M5.5 10.2h19v2.2h-19z" fill="#e8452c"/><path d="M8 7.4h2.6V25H8zM19.4 7.4H22V25h-2.6z" fill="#e8452c"/><path d="M13.7 8.2h2.6v2h-2.6z" fill="#e8452c"/><path d="M2 5.2c5 1.6 21 1.6 26 0" fill="none" stroke="#1b1416" stroke-width="1.1"/></svg>';
|
||||||
|
function sakura(f) {
|
||||||
|
ctx.fillStyle = 'rgba(' + f.c + ',' + f.a + ')';
|
||||||
|
ctx.beginPath(); // pétale : goutte avec une petite encoche au bout
|
||||||
|
ctx.moveTo(0, -f.r); ctx.quadraticCurveTo(f.r * 0.9, -f.r * 0.2, 0, f.r);
|
||||||
|
ctx.quadraticCurveTo(-f.r * 0.9, -f.r * 0.2, 0, -f.r); ctx.fill();
|
||||||
|
ctx.fillStyle = 'rgba(' + BG + ',' + f.a + ')';
|
||||||
|
ctx.beginPath(); ctx.moveTo(-f.r * 0.18, -f.r * 0.98); ctx.lineTo(0, -f.r * 0.7); ctx.lineTo(f.r * 0.18, -f.r * 0.98); ctx.fill();
|
||||||
|
}
|
||||||
|
const SAKURA = ['255,183,197', '255,205,215', '250,160,180', '255,226,232'];
|
||||||
|
const makeSakura = () => fall({ r: rnd(3.5, 7), a: rnd(0.45, 0.85), c: SAKURA[Math.floor(Math.random() * SAKURA.length)], v: rnd(0.4, 0.95), sw: rnd(0.5, 1.4), vr: rnd(-0.03, 0.03) });
|
||||||
|
function buildJapon() {
|
||||||
|
hat(HAT_TORII);
|
||||||
|
driftFill(Math.min(40, Math.round(cw / 38)), makeSakura);
|
||||||
|
const w = el('div', 'season-waves season-deco'); w.setAttribute('aria-hidden', 'true'); document.body.appendChild(w);
|
||||||
|
clickFx = (x, y) => { for (let i = 0; i < 8; i++) drift.push(Object.assign(makeSakura(), { x: x + rnd(-30, 30), y: y + rnd(-20, 10) })); if (drift.length > 90) drift.splice(0, drift.length - 90); };
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Hack (30 novembre, journée de la sécurité informatique) : pluie de code, intrusion tapée, glitch ── */
|
||||||
|
const GLYPHS = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン0123456789ABCDEF<>/{}[]$#';
|
||||||
|
const glyph = () => GLYPHS[Math.floor(Math.random() * GLYPHS.length)];
|
||||||
|
let rain = [];
|
||||||
|
const STEP = 18;
|
||||||
|
function newDrop(x, any) {
|
||||||
|
const len = Math.round(rnd(6, 22));
|
||||||
|
return { x, y: any ? rnd(-ch, ch) : rnd(-ch * 0.6, -20), v: rnd(1.6, 4.2), len, ch: Array.from({ length: len }, glyph), boost: 0 };
|
||||||
|
}
|
||||||
|
function buildRain() {
|
||||||
|
const cols = Math.floor(cw / STEP), n = Math.round(cols * 0.32 * D());
|
||||||
|
const xs = Array.from({ length: cols }, (_, i) => i * STEP + 4).sort(() => Math.random() - 0.5).slice(0, n);
|
||||||
|
rain = xs.map(x => newDrop(x, true));
|
||||||
|
}
|
||||||
|
function hackFrame() {
|
||||||
|
ctx.font = '600 14px "JetBrains Mono", ui-monospace, monospace';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
const head = LIGHT ? '6,24,12' : '220,255,230';
|
||||||
|
for (let i = 0; i < rain.length; i++) {
|
||||||
|
const d = rain[i];
|
||||||
|
d.y += d.v * (d.boost ? 1.8 : 1);
|
||||||
|
if (Math.random() < 0.06) d.ch[Math.floor(Math.random() * d.len)] = glyph();
|
||||||
|
for (let k = 0; k < d.len; k++) {
|
||||||
|
const y = d.y - k * STEP;
|
||||||
|
if (y < -STEP || y > ch + STEP) continue;
|
||||||
|
const a = k === 0 ? 0.95 : (1 - k / d.len) * (LIGHT ? 0.45 : 0.55) * (d.boost ? 1.6 : 1);
|
||||||
|
ctx.fillStyle = 'rgba(' + (k === 0 ? head : LIME) + ',' + Math.min(a, 1) + ')';
|
||||||
|
ctx.fillText(d.ch[k], d.x, y);
|
||||||
|
}
|
||||||
|
if (d.y - d.len * STEP > ch) rain[i] = d.boost ? null : newDrop(d.x, false);
|
||||||
|
}
|
||||||
|
rain = rain.filter(Boolean);
|
||||||
|
}
|
||||||
|
/* Intrusion : fenêtre de terminal au centre, site flouté derrière, une fois par session de navigation
|
||||||
|
(sessionStorage : F5 / Ctrl+R ne la rejouent pas, fermer l'onglet et revenir oui, quelle que soit la page). */
|
||||||
|
function hackIntro() {
|
||||||
|
try { if (sessionStorage.getItem('yb-hack-intro')) return; sessionStorage.setItem('yb-hack-intro', '1'); } catch (e) {}
|
||||||
|
if (CALM) return;
|
||||||
|
const ov = el('div', 'season-hack-intro season-deco',
|
||||||
|
'<div class="season-term" role="dialog" aria-label="Animation d\'intrusion (Échap pour passer)">' +
|
||||||
|
'<div class="season-term__bar"><i></i><i></i><i></i><span>yass@servyass: ~</span></div>' +
|
||||||
|
'<pre class="season-term__body" aria-live="polite"></pre>' +
|
||||||
|
'<div class="season-term__granted">ACCESS GRANTED</div></div>');
|
||||||
|
document.body.appendChild(ov);
|
||||||
|
const body = ov.querySelector('.season-term__body'), g = gen;
|
||||||
|
const add = html => { body.insertAdjacentHTML('beforeend', html); };
|
||||||
|
const caret = '<span class="season-caret"></span>';
|
||||||
|
let finished = false;
|
||||||
|
const finish = () => {
|
||||||
|
if (finished) return; finished = true;
|
||||||
|
ov.classList.add('is-granted');
|
||||||
|
timers.push(setTimeout(() => ov.classList.add('is-out'), 1100));
|
||||||
|
timers.push(setTimeout(() => ov.remove(), 1900));
|
||||||
|
};
|
||||||
|
const skip = () => { if (!finished) { finished = true; ov.classList.add('is-out'); timers.push(setTimeout(() => ov.remove(), 700)); } };
|
||||||
|
ov.addEventListener('click', skip);
|
||||||
|
addEventListener('keydown', function k(e) { if (e.key === 'Escape') { skip(); removeEventListener('keydown', k); } });
|
||||||
|
// étapes : [type, texte, pause après]
|
||||||
|
const steps = [
|
||||||
|
['cmd', 'ssh servyass', 250],
|
||||||
|
['out', '<span class="t-dim">Connexion établie · clé ed25519 · chiffrement chacha20-poly1305</span>', 350],
|
||||||
|
['cmd', 'sudo ./portfolio --unlock', 220],
|
||||||
|
['out', '[sudo] mot de passe pour yass : <span class="t-dim">••••••••••</span>', 320],
|
||||||
|
['bar', '', 250],
|
||||||
|
['out', '<span class="t-ok">✓</span> 13 modules déchiffrés · 0 alerte', 550]
|
||||||
|
];
|
||||||
|
let si = 0;
|
||||||
|
const next = () => {
|
||||||
|
if (g !== gen || finished) return;
|
||||||
|
if (si >= steps.length) return finish();
|
||||||
|
const [type, txt, pause] = steps[si++];
|
||||||
|
if (type === 'out') { add(txt + '\n'); return timers.push(setTimeout(next, pause)); }
|
||||||
|
if (type === 'bar') {
|
||||||
|
add('<span class="t-bar"></span>\n');
|
||||||
|
const bar = [...body.querySelectorAll('.t-bar')].pop(); let n = 0;
|
||||||
|
const fill = () => {
|
||||||
|
if (g !== gen || finished) return;
|
||||||
|
n++; bar.textContent = '[' + '█'.repeat(n) + '░'.repeat(24 - n) + '] ' + Math.round(n / 24 * 100) + ' %';
|
||||||
|
timers.push(setTimeout(n < 24 ? fill : next, n < 24 ? 32 : pause));
|
||||||
|
};
|
||||||
|
return fill();
|
||||||
|
}
|
||||||
|
// commande tapée lettre par lettre derrière un prompt
|
||||||
|
add('<span class="t-prompt">yass@servyass</span>:<span class="t-path">~</span>$ <span class="t-cmd"></span>' + caret);
|
||||||
|
const cmd = [...body.querySelectorAll('.t-cmd')].pop(); let ci = 0;
|
||||||
|
const type1 = () => {
|
||||||
|
if (g !== gen || finished) return;
|
||||||
|
cmd.textContent = txt.slice(0, ++ci);
|
||||||
|
if (ci < txt.length) return timers.push(setTimeout(type1, 26 + Math.random() * 30));
|
||||||
|
body.querySelectorAll('.season-caret').forEach(c => c.remove()); add('\n');
|
||||||
|
timers.push(setTimeout(next, pause));
|
||||||
|
};
|
||||||
|
timers.push(setTimeout(type1, 200));
|
||||||
|
};
|
||||||
|
timers.push(setTimeout(next, 650)); // laisse le rideau de page se lever
|
||||||
|
}
|
||||||
|
const esc = t => t.replace(/[&<>]/g, c => ({ '&': '&', '<': '<', '>': '>' }[c]));
|
||||||
|
function buildHack() {
|
||||||
|
const logo = document.querySelector('.site-nav__logo');
|
||||||
|
if (logo) logo.appendChild(el('span', 'season-caret season-deco'));
|
||||||
|
const scan = el('div', 'season-scan season-deco'); scan.setAttribute('aria-hidden', 'true'); document.body.appendChild(scan);
|
||||||
|
buildRain(); resizeFx = buildRain;
|
||||||
|
hackIntro();
|
||||||
|
clickFx = x => {
|
||||||
|
for (let k = -1; k <= 1; k++) rain.push(Object.assign(newDrop(Math.round(x / STEP) * STEP + 4 + k * STEP, false), { y: rnd(-60, 0), v: rnd(5, 8), boost: 1 }));
|
||||||
|
if (CALM || REDUCED) return;
|
||||||
|
root.classList.remove('season-glitch'); void root.offsetWidth; root.classList.add('season-glitch');
|
||||||
|
timers.push(setTimeout(() => root.classList.remove('season-glitch'), 320));
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Boucle commune ────────────────────────────────────────────── */
|
||||||
|
const BUILDS = { halloween: buildHalloween, noel: buildNoel, 'nouvel-an': buildNouvelAn, juillet: buildJuillet, 'st-patrick': buildStPatrick, paques: buildPaques, poisson: buildPoisson, musique: buildMusique, 'black-friday': buildBlackFriday, anniversaire: buildAnniversaire, algerie: buildAlgerie, japon: buildJapon, hack: buildHack };
|
||||||
|
const FRAMES = {
|
||||||
|
halloween: halloweenFrame, noel: noelFrame,
|
||||||
|
'nouvel-an': now => fireworksFrame(now, 1400), juillet: now => fireworksFrame(now, 900),
|
||||||
|
'st-patrick': now => driftFrame(now, makeClover, clover), paques: paquesFrame, poisson: poissonFrame,
|
||||||
|
musique: musiqueFrame, anniversaire: anniversaireFrame, algerie: algerieFrame, japon: now => driftFrame(now, makeSakura, sakura), hack: hackFrame, 'black-friday': now => driftFrame(now, makeTag, priceTag)
|
||||||
|
};
|
||||||
|
function frame(now) {
|
||||||
|
if (!run) return;
|
||||||
|
try { ctx.clearRect(0, 0, cw, ch); (FRAMES[season] || (() => {}))(now); } catch (e) {}
|
||||||
|
raf = requestAnimationFrame(frame);
|
||||||
|
}
|
||||||
|
function start() {
|
||||||
|
if (run) return;
|
||||||
|
if (CALM) { // mouvement réduit : une seule image fixe
|
||||||
|
ctx.clearRect(0, 0, cw, ch);
|
||||||
|
if (season === 'halloween') embers.forEach(e => { ctx.fillStyle = 'rgba(' + LIME + ',.4)'; ctx.beginPath(); ctx.arc(e.x, e.y, e.r, 0, 6.283); ctx.fill(); });
|
||||||
|
else if (FRAMES[season]) FRAMES[season](0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
run = true; raf = requestAnimationFrame(frame);
|
||||||
|
}
|
||||||
|
function stop() { run = false; cancelAnimationFrame(raf); if (ctx) ctx.clearRect(0, 0, cw, ch); }
|
||||||
|
|
||||||
|
/* Calque commun + écouteurs, une seule fois ; chaque fête branche clickFx / resizeFx */
|
||||||
|
function setup() {
|
||||||
|
if (built) return; built = true;
|
||||||
|
cv = el('canvas', 'season-fx'); cv.setAttribute('aria-hidden', 'true');
|
||||||
|
document.body.appendChild(cv); ctx = cv.getContext('2d');
|
||||||
|
size(); colors();
|
||||||
|
let rt;
|
||||||
|
addEventListener('resize', () => { size(); clearTimeout(rt); rt = setTimeout(() => resizeFx && resizeFx(), 200); });
|
||||||
|
addEventListener('scroll', dropSpider, { passive: true });
|
||||||
|
addEventListener('pointermove', e => { m.vx += (e.clientX - (m.x > -9000 ? m.x : e.clientX)) * 0.3; m.x = e.clientX; m.y = e.clientY; }, { passive: true });
|
||||||
|
addEventListener('touchend', () => { m.x = m.y = -9999; });
|
||||||
|
addEventListener('pointerdown', e => {
|
||||||
|
if (!run || !clickFx || e.target.closest('a, button, input, textarea, select, label, [data-cursor-label], .season-wheel')) return;
|
||||||
|
clickFx(e.clientX, e.clientY);
|
||||||
|
});
|
||||||
|
addEventListener('yb:theme', colors);
|
||||||
|
}
|
||||||
|
/* Retire tout le décor de la fête en cours */
|
||||||
|
function teardown() {
|
||||||
|
gen++; stop();
|
||||||
|
document.querySelectorAll('.season-deco').forEach(e => e.remove());
|
||||||
|
timers.forEach(t => { clearInterval(t); clearTimeout(t); }); timers = [];
|
||||||
|
clickFx = resizeFx = null; spider = null;
|
||||||
|
bats = []; embers = []; balloons = []; rain = [];
|
||||||
|
root.classList.remove('season-glitch'); flakes = []; rockets = []; sparks = []; drift = []; fishes = []; eqBars = [];
|
||||||
|
}
|
||||||
|
/* Monte le décor d'une fête ('' = aucune) */
|
||||||
|
function mount(key) {
|
||||||
|
teardown();
|
||||||
|
if (key) { root.setAttribute('data-season', key); root.removeAttribute('data-season-off'); }
|
||||||
|
else { root.removeAttribute('data-season'); if (season) root.setAttribute('data-season-off', season); }
|
||||||
|
if (key) season = key;
|
||||||
|
setup(); colors();
|
||||||
|
if (key) { (BUILDS[key] || (() => {}))(); start(); }
|
||||||
|
syncCV(); syncButton();
|
||||||
|
dispatchEvent(new CustomEvent('yb:theme', { detail: root.getAttribute('data-theme') || 'dark' })); // l'orbe relit ses couleurs
|
||||||
|
}
|
||||||
|
/* Bascule animée comme le mode clair / sombre : cercle qui s'étend depuis le bouton */
|
||||||
|
function swap(key, from) {
|
||||||
|
if (!document.startViewTransition || CALM) {
|
||||||
|
root.classList.add('theme-fade'); mount(key);
|
||||||
|
return setTimeout(() => root.classList.remove('theme-fade'), 500);
|
||||||
|
}
|
||||||
|
const r = (from || btn || document.body).getBoundingClientRect(), x = r.left + r.width / 2, y = r.top + r.height / 2;
|
||||||
|
const end = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
|
||||||
|
const vt = document.startViewTransition(() => mount(key));
|
||||||
|
vt.ready.then(() => root.animate(
|
||||||
|
{ clipPath: ['circle(0px at ' + x + 'px ' + y + 'px)', 'circle(' + end + 'px at ' + x + 'px ' + y + 'px)'] },
|
||||||
|
{ duration: 750, easing: 'cubic-bezier(.7,0,.3,1)', pseudoElement: '::view-transition-new(root)' }
|
||||||
|
)).catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CV assorti : liens et aperçus [data-cv] pointent vers la version de la fête active, sinon la version par défaut */
|
||||||
|
function syncCV() {
|
||||||
|
const on = root.getAttribute('data-season'), list = (window.YB_SEASONS || {}).cv || [];
|
||||||
|
document.querySelectorAll('[data-cv]').forEach(e => {
|
||||||
|
const attr = e.tagName === 'IMG' ? 'src' : e.hasAttribute('data-preview') && e.tagName !== 'A' ? 'data-preview' : 'href';
|
||||||
|
if (!e.dataset.cvBase) e.dataset.cvBase = e.getAttribute(e.dataset.cv || attr) || '';
|
||||||
|
const base = e.dataset.cvBase, k = on && list.indexOf(on) > -1 ? on : '';
|
||||||
|
e.setAttribute(e.dataset.cv || attr, k ? base.replace('/uploads/cv/', '/uploads/cv/saisons/' + k + '/') : base);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Roue de sélection ─────────────────────────────────────────── */
|
||||||
|
let btn, wheel;
|
||||||
|
const DATA = () => window.YB_SEASONS || { list: {} };
|
||||||
|
function syncButton() {
|
||||||
|
if (!btn) return;
|
||||||
|
const on = root.getAttribute('data-season'), d = DATA().list[on || season];
|
||||||
|
if (d && btn.dataset.icon !== (on || season)) { btn.innerHTML = d.icon; btn.dataset.icon = on || season; }
|
||||||
|
btn.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||||||
|
btn.setAttribute('aria-label', PICK() ? 'Choisir un thème' : on ? btn.dataset.labelOff : btn.dataset.labelOn);
|
||||||
|
}
|
||||||
|
const PICK = () => root.hasAttribute('data-sx');
|
||||||
|
function toast(t) {
|
||||||
|
const e = el('div', 'season-pill'); e.textContent = t; e.classList.add('is-hidden'); document.body.appendChild(e);
|
||||||
|
requestAnimationFrame(() => requestAnimationFrame(() => e.classList.remove('is-hidden')));
|
||||||
|
setTimeout(() => { e.classList.add('is-hidden'); setTimeout(() => e.remove(), 500); }, 2200);
|
||||||
|
}
|
||||||
|
function flip() {
|
||||||
|
const on = !PICK();
|
||||||
|
try { on ? localStorage.setItem('yb-sx', '1') : (localStorage.removeItem('yb-sx'), localStorage.removeItem('yb-sp')); } catch (e) {}
|
||||||
|
on ? root.setAttribute('data-sx', '') : root.removeAttribute('data-sx');
|
||||||
|
syncButton(); toast(on ? '✦ ✦ ✦' : '✕');
|
||||||
|
if (on) return setTimeout(openWheel, 300);
|
||||||
|
closeWheel();
|
||||||
|
const a = DATA().auto || '';
|
||||||
|
if (a !== (root.getAttribute('data-season') || '')) swap(a);
|
||||||
|
}
|
||||||
|
function listen() {
|
||||||
|
const q = "&&((%'%'BA"; let n = 0;
|
||||||
|
const step = c => { n = c === q.charCodeAt(n) ? n + 1 : c === q.charCodeAt(0) ? Math.min(n, 2) || 1 : 0; if (n === q.length) { n = 0; flip(); } };
|
||||||
|
addEventListener('keydown', e => { if (!e.target.closest('input, textarea, select, [contenteditable]')) step(e.keyCode); });
|
||||||
|
let t0 = null;
|
||||||
|
addEventListener('touchstart', e => { const t = e.touches[0]; t0 = [t.clientX, t.clientY]; }, { passive: true });
|
||||||
|
addEventListener('touchend', e => {
|
||||||
|
if (!t0) return; const t = e.changedTouches[0], dx = t.clientX - t0[0], dy = t.clientY - t0[1]; t0 = null;
|
||||||
|
if (Math.max(Math.abs(dx), Math.abs(dy)) < 40) return step(n > 7 ? q.charCodeAt(n) : 0);
|
||||||
|
step(Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? 39 : 37) : (dy > 0 ? 40 : 38));
|
||||||
|
}, { passive: true });
|
||||||
|
}
|
||||||
|
function openWheel() {
|
||||||
|
if (wheel) return closeWheel();
|
||||||
|
const L = DATA().list, keys = Object.keys(L), cur = root.getAttribute('data-season') || '';
|
||||||
|
const items = keys.map(k => ({ k, label: L[k].label, when: L[k].when, icon: L[k].icon }))
|
||||||
|
.concat([{ k: '', label: 'Sans décor', when: 'le site normal', icon: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M6.5 17.5l11-11"/></svg>' },
|
||||||
|
{ k: 'auto', label: 'Automatique', when: 'la fête du moment' + (DATA().auto ? ' : ' + L[DATA().auto].label : ' (aucune)'), icon: '<svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9"/><path d="M12 7v5l3 2M21 3v6h-6"/></svg>' }]);
|
||||||
|
const picked = (() => { try { return localStorage.getItem('yb-sp'); } catch (e) { return null; } })();
|
||||||
|
wheel = el('div', 'season-wheel');
|
||||||
|
wheel.setAttribute('role', 'dialog'); wheel.setAttribute('aria-label', 'Choisir le thème de fête');
|
||||||
|
wheel.innerHTML = '<div class="season-wheel__ring"></div><div class="season-wheel__hub"><small>THÈME</small><strong></strong><span></span></div>';
|
||||||
|
const ring = wheel.firstChild, hub = wheel.querySelector('.season-wheel__hub'), n = items.length;
|
||||||
|
const show = it => { hub.querySelector('strong').textContent = it.label; hub.querySelector('span').textContent = it.when; };
|
||||||
|
items.forEach((it, i) => {
|
||||||
|
const a = -Math.PI / 2 + i * 2 * Math.PI / n, b = el('button', 'season-wheel__item');
|
||||||
|
b.type = 'button'; b.innerHTML = it.icon + '<em>' + it.label + '</em>';
|
||||||
|
b.style.setProperty('--x', Math.cos(a).toFixed(4)); b.style.setProperty('--y', Math.sin(a).toFixed(4)); b.style.setProperty('--i', i);
|
||||||
|
const active = it.k === 'auto' ? picked === null : (picked !== null && it.k === cur);
|
||||||
|
if (active) b.classList.add('is-current');
|
||||||
|
const prev = () => window.YBCursor && YBCursor.preview(it.k === 'auto' ? (DATA().auto || '') : it.k);
|
||||||
|
b.addEventListener('pointerenter', () => { show(it); prev(); }); b.addEventListener('focus', () => show(it));
|
||||||
|
b.addEventListener('pointerleave', () => window.YBCursor && YBCursor.preview(null));
|
||||||
|
b.addEventListener('click', () => {
|
||||||
|
try { it.k === 'auto' ? localStorage.removeItem('yb-sp') : localStorage.setItem('yb-sp', it.k || 'none'); } catch (e) {}
|
||||||
|
const target = it.k === 'auto' ? (DATA().auto || '') : it.k;
|
||||||
|
closeWheel(); if (target !== (root.getAttribute('data-season') || '')) swap(target, b);
|
||||||
|
});
|
||||||
|
ring.appendChild(b);
|
||||||
|
});
|
||||||
|
show(items.find(it => it.k === cur) || items[n - 1]);
|
||||||
|
wheel.addEventListener('click', e => { if (e.target === wheel) closeWheel(); });
|
||||||
|
document.body.appendChild(wheel);
|
||||||
|
requestAnimationFrame(() => wheel.classList.add('is-open'));
|
||||||
|
(ring.querySelector('.is-current') || ring.firstChild).focus({ preventScroll: true });
|
||||||
|
}
|
||||||
|
function closeWheel() {
|
||||||
|
if (!wheel) return; const w = wheel; wheel = null;
|
||||||
|
if (window.YBCursor) YBCursor.preview(null);
|
||||||
|
w.classList.remove('is-open'); setTimeout(() => w.remove(), 350); if (btn) btn.focus({ preventScroll: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
return { init() {
|
||||||
|
season = root.getAttribute('data-season') || root.getAttribute('data-season-off') || '';
|
||||||
|
btn = document.querySelector('[data-season-toggle]');
|
||||||
|
if (btn) btn.addEventListener('click', () => {
|
||||||
|
if (PICK()) return openWheel();
|
||||||
|
const on = root.hasAttribute('data-season');
|
||||||
|
try { localStorage.setItem('yb-season', on ? 'off' : 'on'); } catch (e) {}
|
||||||
|
swap(on ? '' : season);
|
||||||
|
});
|
||||||
|
addEventListener('keydown', e => { if (e.key === 'Escape') closeWheel(); });
|
||||||
|
listen();
|
||||||
|
syncButton(); syncCV();
|
||||||
|
if (root.hasAttribute('data-season')) { setup(); (BUILDS[season] || (() => {}))(); start(); }
|
||||||
|
document.addEventListener('visibilitychange', () => { if (document.hidden) stop(); else if (root.hasAttribute('data-season') && built) start(); });
|
||||||
|
} };
|
||||||
|
})();
|
||||||
|
document.addEventListener('DOMContentLoaded', () => YBSeason.init());
|
||||||
291
functions.php
Normal file
291
functions.php
Normal file
|
|
@ -0,0 +1,291 @@
|
||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* yb2026 : thème portfolio « sombre & premium »
|
||||||
|
* v3 : porté depuis handoff/reference/portfolio-site-v3.html (+ theme-assets/)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ── Assets ─────────────────────────────────────────────────────────── */
|
||||||
|
function yb2026_assets()
|
||||||
|
{
|
||||||
|
$v = '3.0';
|
||||||
|
$uri = get_template_directory_uri();
|
||||||
|
/* Polices hébergées sur le serveur (plus d'appel à Google Fonts : pas de transfert d'IP des visiteurs) */
|
||||||
|
wp_enqueue_style('yb-fonts', $uri . '/assets/fonts/fonts.css', array(), '1');
|
||||||
|
wp_enqueue_style('yb-effects', $uri . '/assets/css/effects.css', array(), $v);
|
||||||
|
wp_enqueue_style('yb-style', $uri . '/assets/css/style.css', array('yb-effects'), $v);
|
||||||
|
/* Ordre : cursor + orb définissent YBCursor/YBOrb, effects.js les initialise */
|
||||||
|
wp_enqueue_script('yb-cursor', $uri . '/assets/js/cursor.js', array(), $v, true);
|
||||||
|
if (is_front_page()) {
|
||||||
|
wp_enqueue_script('yb-orb', $uri . '/assets/js/orb.js', array(), $v, true);
|
||||||
|
}
|
||||||
|
wp_enqueue_script('yb-effects', $uri . '/assets/js/effects.js', array('yb-cursor'), $v, true);
|
||||||
|
if (is_page('qui-suis-je')) {
|
||||||
|
wp_enqueue_script('yb-about', $uri . '/assets/js/about.js', array('yb-effects'), $v . '.1', true);
|
||||||
|
}
|
||||||
|
if (is_page('competences')) {
|
||||||
|
wp_enqueue_script('yb-competences', $uri . '/assets/js/competences.js', array('yb-effects'), $v . '.1', true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
add_action('wp_enqueue_scripts', 'yb2026_assets');
|
||||||
|
|
||||||
|
require_once get_template_directory() . '/inc/profile.php';
|
||||||
|
require_once get_template_directory() . '/inc/proofs.php';
|
||||||
|
require_once get_template_directory() . '/inc/seasons.php';
|
||||||
|
require_once get_template_directory() . '/inc/errors.php';
|
||||||
|
|
||||||
|
add_theme_support('title-tag');
|
||||||
|
add_theme_support('post-thumbnails');
|
||||||
|
add_theme_support('html5', array('style', 'script'));
|
||||||
|
|
||||||
|
/* ── Custom Post Types (repris du thème précédent, mêmes rewrites) ──── */
|
||||||
|
function yb2026_post_types()
|
||||||
|
{
|
||||||
|
register_post_type('realisation', array(
|
||||||
|
'labels' => array(
|
||||||
|
'name' => 'Réalisations',
|
||||||
|
'singular_name' => 'Réalisation',
|
||||||
|
'add_new_item' => 'Ajouter une réalisation',
|
||||||
|
'edit_item' => 'Modifier la réalisation',
|
||||||
|
),
|
||||||
|
'public' => true,
|
||||||
|
'has_archive' => false,
|
||||||
|
'supports' => array('title', 'editor', 'thumbnail', 'excerpt'),
|
||||||
|
'menu_icon' => 'dashicons-portfolio',
|
||||||
|
'show_in_rest' => true,
|
||||||
|
'rewrite' => array('slug' => 'realisations'),
|
||||||
|
));
|
||||||
|
|
||||||
|
register_post_type('service', array(
|
||||||
|
'labels' => array(
|
||||||
|
'name' => 'Services',
|
||||||
|
'singular_name' => 'Service',
|
||||||
|
'add_new_item' => 'Ajouter un service',
|
||||||
|
'edit_item' => 'Modifier le service',
|
||||||
|
),
|
||||||
|
'public' => true,
|
||||||
|
'has_archive' => false,
|
||||||
|
'supports' => array('title', 'editor', 'thumbnail', 'excerpt'),
|
||||||
|
'menu_icon' => 'dashicons-portfolio',
|
||||||
|
'show_in_rest' => true,
|
||||||
|
'rewrite' => array('slug' => 'services'),
|
||||||
|
));
|
||||||
|
}
|
||||||
|
add_action('init', 'yb2026_post_types');
|
||||||
|
|
||||||
|
function yb2026_flush()
|
||||||
|
{
|
||||||
|
yb2026_post_types();
|
||||||
|
flush_rewrite_rules();
|
||||||
|
}
|
||||||
|
add_action('after_switch_theme', 'yb2026_flush');
|
||||||
|
|
||||||
|
/* ── Meta-box réalisation : champs de l'étude de cas ────────────────── */
|
||||||
|
function yb2026_add_metaboxes()
|
||||||
|
{
|
||||||
|
add_meta_box('yb_real_meta', 'Étude de cas (design v2)', 'yb2026_render_real_metabox', 'realisation', 'normal', 'high');
|
||||||
|
}
|
||||||
|
add_action('add_meta_boxes', 'yb2026_add_metaboxes');
|
||||||
|
|
||||||
|
function yb2026_render_real_metabox($post)
|
||||||
|
{
|
||||||
|
wp_nonce_field('yb_real_nonce_action', 'yb_real_nonce');
|
||||||
|
$f = function ($k) use ($post) { return esc_attr(get_post_meta($post->ID, $k, true)); };
|
||||||
|
$sections = get_post_meta($post->ID, '_yb_sections', true);
|
||||||
|
$sections_txt = '';
|
||||||
|
if ($sections) {
|
||||||
|
$arr = json_decode($sections, true);
|
||||||
|
if (is_array($arr)) {
|
||||||
|
foreach ($arr as $s) {
|
||||||
|
$sections_txt .= '/ ' . $s['h'] . "\n" . $s['p'] . "\n\n";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<style>.yb-mb label{font-weight:600;display:block;margin:12px 0 4px}.yb-mb input,.yb-mb textarea{width:100%}</style>
|
||||||
|
<div class="yb-mb">
|
||||||
|
<label for="yb_order">Ordre (01–09, utilisé pour la numérotation et le tri)</label>
|
||||||
|
<input type="number" id="yb_order" name="yb_order" value="<?php echo $f('_yb_order'); ?>" min="1" max="99">
|
||||||
|
<label for="yb_tag">Stack / tag (affiché en mono lime, ex. « DEBIAN 12 · DOCKER · WIREGUARD »)</label>
|
||||||
|
<input type="text" id="yb_tag" name="yb_tag" value="<?php echo $f('_yb_tag'); ?>">
|
||||||
|
<label for="yb_year">Année (ex. « 2024–2026 »)</label>
|
||||||
|
<input type="text" id="yb_year" name="yb_year" value="<?php echo $f('_yb_year'); ?>">
|
||||||
|
<label for="yb_role">Rôle (ex. « Admin Sys & Réseaux »)</label>
|
||||||
|
<input type="text" id="yb_role" name="yb_role" value="<?php echo $f('_yb_role'); ?>">
|
||||||
|
<label for="yb_short">Description courte (cartes)</label>
|
||||||
|
<input type="text" id="yb_short" name="yb_short" value="<?php echo $f('_yb_short'); ?>">
|
||||||
|
<label for="yb_desc">Description longue (intro de l'étude de cas)</label>
|
||||||
|
<textarea id="yb_desc" name="yb_desc" rows="3"><?php echo esc_textarea(get_post_meta($post->ID, '_yb_desc', true)); ?></textarea>
|
||||||
|
<label for="yb_note">Note terminal (bordure lime, ex. « $ uptime · en production depuis 2 ans »)</label>
|
||||||
|
<input type="text" id="yb_note" name="yb_note" value="<?php echo $f('_yb_note'); ?>">
|
||||||
|
<label for="yb_sections">Sections de l'étude de cas : format : ligne « / Titre » puis paragraphe, sections séparées par une ligne vide. Laisser vide pour afficher le contenu de l'éditeur à la place.</label>
|
||||||
|
<textarea id="yb_sections" name="yb_sections" rows="12" placeholder="/ Le point de départ Texte du paragraphe… / L'architecture Texte…"><?php echo esc_textarea($sections_txt); ?></textarea>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
|
||||||
|
function yb2026_save_metaboxes($post_id)
|
||||||
|
{
|
||||||
|
if (
|
||||||
|
!isset($_POST['yb_real_nonce']) ||
|
||||||
|
!wp_verify_nonce($_POST['yb_real_nonce'], 'yb_real_nonce_action') ||
|
||||||
|
!current_user_can('edit_post', $post_id)
|
||||||
|
) return;
|
||||||
|
|
||||||
|
foreach (array('yb_order' => '_yb_order', 'yb_tag' => '_yb_tag', 'yb_year' => '_yb_year', 'yb_role' => '_yb_role', 'yb_short' => '_yb_short', 'yb_note' => '_yb_note') as $field => $key) {
|
||||||
|
if (isset($_POST[$field])) {
|
||||||
|
update_post_meta($post_id, $key, sanitize_text_field($_POST[$field]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (isset($_POST['yb_desc'])) {
|
||||||
|
update_post_meta($post_id, '_yb_desc', sanitize_textarea_field($_POST['yb_desc']));
|
||||||
|
}
|
||||||
|
if (isset($_POST['yb_sections'])) {
|
||||||
|
$raw = str_replace("\r\n", "\n", (string) $_POST['yb_sections']);
|
||||||
|
$out = array();
|
||||||
|
foreach (preg_split('/\n\s*\n/', trim($raw)) as $block) {
|
||||||
|
$lines = explode("\n", trim($block));
|
||||||
|
if (count($lines) < 2 || strpos($lines[0], '/') !== 0) continue;
|
||||||
|
$out[] = array(
|
||||||
|
'h' => sanitize_text_field(ltrim(substr($lines[0], 1))),
|
||||||
|
'p' => sanitize_textarea_field(implode(' ', array_slice($lines, 1))),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
update_post_meta($post_id, '_yb_sections', $out ? wp_json_encode($out, JSON_UNESCAPED_UNICODE) : '');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
add_action('save_post_realisation', 'yb2026_save_metaboxes');
|
||||||
|
|
||||||
|
/* ── Helpers ─────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
/** Toutes les réalisations triées par _yb_order (fallback date). */
|
||||||
|
function yb2026_get_projects($limit = -1)
|
||||||
|
{
|
||||||
|
$q = new WP_Query(array(
|
||||||
|
'post_type' => 'realisation',
|
||||||
|
'posts_per_page' => $limit,
|
||||||
|
'meta_key' => '_yb_order',
|
||||||
|
'orderby' => array('meta_value_num' => 'ASC', 'date' => 'DESC'),
|
||||||
|
'no_found_rows' => true,
|
||||||
|
));
|
||||||
|
return $q->posts;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Numéro « 01 » d'une réalisation. */
|
||||||
|
function yb2026_num($post_id)
|
||||||
|
{
|
||||||
|
$o = (int) get_post_meta($post_id, '_yb_order', true);
|
||||||
|
return str_pad($o ? $o : 1, 2, '0', STR_PAD_LEFT);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Nom court d'un projet : partie avant le « : » du titre WP (ancien séparateur « : » toléré). */
|
||||||
|
function yb2026_short_title($p)
|
||||||
|
{
|
||||||
|
$t = get_the_title($p);
|
||||||
|
$parts = preg_split('/\s+[:\x{2014}]\s+/u', $t, 2);
|
||||||
|
return $parts[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Carte projet (piste des travaux sur l'accueil + grille réalisations).
|
||||||
|
Classes .card / .card-img attendues par effects.css et effects.js (compteur, hover N&B). */
|
||||||
|
function yb2026_project_card($p, $home = false)
|
||||||
|
{
|
||||||
|
$tag = get_post_meta($p->ID, '_yb_tag', true);
|
||||||
|
if (!$tag) $tag = strtoupper((string) get_post_meta($p->ID, '_real_technologies', true));
|
||||||
|
$short = get_post_meta($p->ID, '_yb_short', true);
|
||||||
|
if (!$short) $short = get_the_excerpt($p);
|
||||||
|
$year = get_post_meta($p->ID, '_yb_year', true);
|
||||||
|
$name = yb2026_short_title($p);
|
||||||
|
?>
|
||||||
|
<a class="card<?php echo $home ? ' card--home' : ''; ?>" href="<?php echo esc_url(get_permalink($p)); ?>" data-cursor-label="VOIR LE PROJET" data-wipe="<?php echo esc_attr(mb_strtoupper($name)); ?>"<?php echo $home ? '' : ' data-reveal'; ?>>
|
||||||
|
<span class="card-img">
|
||||||
|
<?php echo get_the_post_thumbnail($p, 'large', array('loading' => 'lazy', 'alt' => esc_attr($name))); ?>
|
||||||
|
<span class="card-num"><?php echo esc_html(yb2026_num($p->ID)); ?></span>
|
||||||
|
<?php if ($home && $year) : ?><span class="card-year"><?php echo esc_html($year); ?></span><?php endif; ?>
|
||||||
|
</span>
|
||||||
|
<span class="card-body">
|
||||||
|
<span class="card-head"><span class="card-name"><?php echo esc_html($name); ?></span><span class="card-arrow">→</span></span>
|
||||||
|
<span class="card-tag"><?php echo esc_html($tag); ?></span>
|
||||||
|
<span class="card-short"><?php echo esc_html($short); ?></span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Noindex partout sauf l'accueil (demande du 06/10/2026) ──────────
|
||||||
|
Seule la page d'accueil reste indexable ; pages, réalisations, articles,
|
||||||
|
archives, recherche, 404… sont en noindex. */
|
||||||
|
add_filter('wp_robots', function ($robots) {
|
||||||
|
if (is_front_page()) {
|
||||||
|
return $robots;
|
||||||
|
}
|
||||||
|
unset($robots['max-image-preview']);
|
||||||
|
$robots['noindex'] = true;
|
||||||
|
$robots['nofollow'] = true;
|
||||||
|
return $robots;
|
||||||
|
}, 99);
|
||||||
|
|
||||||
|
/* Même consigne pour les réponses non-HTML générées par WordPress (flux RSS, REST…) */
|
||||||
|
add_action('send_headers', function () {
|
||||||
|
if (!is_admin() && !is_front_page()) {
|
||||||
|
header('X-Robots-Tag: noindex, nofollow', true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ── Anti-doublon : retire du contenu l'image déjà en mise-en-avant ──── */
|
||||||
|
add_filter('the_content', function ($content) {
|
||||||
|
if (!is_singular('realisation') || !has_post_thumbnail()) {
|
||||||
|
return $content;
|
||||||
|
}
|
||||||
|
$thumb_url = wp_get_attachment_image_url(get_post_thumbnail_id(), 'full');
|
||||||
|
if (!$thumb_url) return $content;
|
||||||
|
|
||||||
|
$basename = pathinfo(parse_url($thumb_url, PHP_URL_PATH), PATHINFO_FILENAME);
|
||||||
|
$basename = preg_quote($basename, '#');
|
||||||
|
|
||||||
|
$content = preg_replace('#<figure\b[^>]*>(?:(?!</figure>).)*?' . $basename . '(?:(?!</figure>).)*?</figure>#is', '', $content);
|
||||||
|
$content = preg_replace('#<img\b[^>]*?' . $basename . '[^>]*?/?>#i', '', $content);
|
||||||
|
$content = preg_replace('#<p>\s*</p>#i', '', $content);
|
||||||
|
return $content;
|
||||||
|
}, 20);
|
||||||
|
|
||||||
|
/* ── Options pages ACF (shim) ────────────────────────────────────────── */
|
||||||
|
add_action('acf/init', function () {
|
||||||
|
if (function_exists('acf_add_options_page')) {
|
||||||
|
acf_add_options_page(array(
|
||||||
|
'page_title' => 'Theme General Settings',
|
||||||
|
'menu_title' => 'Theme Settings',
|
||||||
|
'menu_slug' => 'theme-general-settings',
|
||||||
|
'capability' => 'edit_posts',
|
||||||
|
'redirect' => false,
|
||||||
|
));
|
||||||
|
acf_add_options_sub_page(array('page_title' => 'Theme Header Settings', 'menu_title' => 'Header', 'parent_slug' => 'theme-general-settings'));
|
||||||
|
acf_add_options_sub_page(array('page_title' => 'Theme Social Settings', 'menu_title' => 'Social', 'parent_slug' => 'theme-general-settings'));
|
||||||
|
acf_add_options_sub_page(array('page_title' => 'Theme Coordonnée Settings', 'menu_title' => 'Coordonnée', 'parent_slug' => 'theme-general-settings'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Autoptimize : ne pas agréger le script inline anti-flash du wipe
|
||||||
|
(il doit s'exécuter immédiatement après l'élément #yb-wipe, avant le paint). */
|
||||||
|
add_filter('autoptimize_filter_js_exclude', function ($exclude) {
|
||||||
|
return $exclude . ', ybWipe, ybTheme';
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Shortcode hérité (présent dans d'anciens contenus) */
|
||||||
|
add_shortcode('tavu', function () {
|
||||||
|
return "<h1>T'a vue ?</h1>";
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Ancienne adresse de la page Compétences : /services/ → /competences/ (301).
|
||||||
|
Les contenus du CPT « service » gardent leurs adresses /services/<slug>/. */
|
||||||
|
add_action('template_redirect', function () {
|
||||||
|
$path = trim((string) parse_url($_SERVER['REQUEST_URI'] ?? '', PHP_URL_PATH), '/');
|
||||||
|
if ($path === 'services') {
|
||||||
|
wp_redirect(home_url('/competences/'), 301);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
}, 1);
|
||||||
|
|
||||||
|
/* ── Ressources tierces : rien n'est chargé depuis un CDN externe côté visiteur ── */
|
||||||
|
add_action('wp_enqueue_scripts', function () {
|
||||||
|
wp_dequeue_style('acf-shim-fontawesome'); // icônes Font Awesome de l'admin ACF, inutiles sur le site
|
||||||
|
}, 100);
|
||||||
25
index.php
Normal file
25
index.php
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<?php
|
||||||
|
/* Fallback générique */
|
||||||
|
get_header();
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div class="page-wrap">
|
||||||
|
<?php if (have_posts()) : ?>
|
||||||
|
<h1 class="page-title" data-reveal><?php echo is_search() ? 'RECHERCHE' : 'ARCHIVES'; ?></h1>
|
||||||
|
<div class="blog-list">
|
||||||
|
<?php $i = 0; while (have_posts()) : the_post(); $i++; ?>
|
||||||
|
<a class="blog-row" href="<?php the_permalink(); ?>" data-cursor-label="LIRE ↗" data-wipe="LECTURE">
|
||||||
|
<span class="blog-num mono"><?php echo str_pad($i, 2, '0', STR_PAD_LEFT); ?></span>
|
||||||
|
<span class="blog-title"><?php the_title(); ?></span>
|
||||||
|
<span class="blog-tag mono"><?php echo esc_html(strtoupper(get_the_date('M Y'))); ?></span>
|
||||||
|
<span class="blog-arrow mono">→</span>
|
||||||
|
</a>
|
||||||
|
<?php endwhile; ?>
|
||||||
|
</div>
|
||||||
|
<?php else : ?>
|
||||||
|
<h1 class="page-title" data-reveal>RIEN <span class="outline-lime">ICI</span></h1>
|
||||||
|
<p class="page-lead">Aucun contenu trouvé.</p>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php get_footer(); ?>
|
||||||
90
page-contact.php
Normal file
90
page-contact.php
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
<?php
|
||||||
|
/* Page Contact : 4 actions utiles (email, téléphone, LinkedIn, CV) en grandes lignes interactives.
|
||||||
|
Liens de réseaux : seuls les vrais profils (LinkedIn, GitHub) sont gardés depuis les options. */
|
||||||
|
get_header();
|
||||||
|
$email = yb2026_id('email');
|
||||||
|
$tel = yb2026_id('telephone');
|
||||||
|
$cv = home_url('/wp-content/uploads/cv/CV_Yasser_Boulayoune.pdf');
|
||||||
|
$cv_v = @filemtime(ABSPATH . 'wp-content/uploads/cv/CV_Yasser_Boulayoune.pdf');
|
||||||
|
|
||||||
|
$linkedin = '';
|
||||||
|
if (function_exists('have_rows') && have_rows('reseaux', 'option')) {
|
||||||
|
while (have_rows('reseaux', 'option')) {
|
||||||
|
the_row();
|
||||||
|
$lien = get_sub_field('reseaux_lien');
|
||||||
|
$url = is_array($lien) ? ($lien['url'] ?? '') : $lien;
|
||||||
|
if (preg_match('#linkedin\.com/in/#i', (string) $url)) $linkedin = $url;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$actions = array(
|
||||||
|
/* Email et téléphone : protégés (jamais en clair dans le HTML, voir yb2026_pv) */
|
||||||
|
array('k' => 'EMAIL', 'big' => $email, 'href' => 'mailto:' . $email, 'act' => 'ÉCRIRE ↗', 'copy' => $email, 'cursor' => "M'ÉCRIRE", 'protect' => true),
|
||||||
|
array('k' => 'TÉLÉPHONE', 'big' => $tel, 'href' => yb2026_tel_href($tel), 'act' => 'APPELER ↗', 'copy' => $tel, 'cursor' => 'APPELER', 'protect' => true),
|
||||||
|
);
|
||||||
|
if ($linkedin) $actions[] = array('k' => 'LINKEDIN', 'big' => 'Yasser Boulayoune', 'href' => $linkedin, 'act' => 'VOIR LE PROFIL ↗', 'blank' => true, 'cursor' => 'LINKEDIN');
|
||||||
|
$actions[] = array('k' => 'CV', 'big' => 'Télécharger mon CV', 'href' => $cv . ($cv_v ? '?v=' . $cv_v : ''), 'act' => 'PDF ↓', 'blank' => true, 'cursor' => 'TÉLÉCHARGER', 'preview' => home_url('/wp-content/uploads/cv/cv-apercu.png'));
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div class="ct">
|
||||||
|
<section class="ct-open page-wrap">
|
||||||
|
<div class="kicker" data-reveal><?php echo esc_html(mb_strtoupper(yb2026_id('accroche'))); ?></div>
|
||||||
|
<a class="cta__title ct-title" <?php echo yb2026_pv_href('mailto:' . $email); ?> data-cursor-label="M'ÉCRIRE" data-reveal>TRAVAILLONS<br><span class="outline-lime">ENSEMBLE →</span></a>
|
||||||
|
<div class="ct-meta" data-reveal>
|
||||||
|
<span><?php echo esc_html(mb_strtoupper(yb2026_location_long())); ?></span>
|
||||||
|
<span><?php echo esc_html(mb_strtoupper(yb2026_id('mobilite'))); ?></span>
|
||||||
|
<span>À LYON, IL EST <b class="lime" data-clock>--:--</b></span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<ul class="ct-list">
|
||||||
|
<?php foreach ($actions as $i => $a) : ?>
|
||||||
|
<li class="ct-row" data-reveal<?php echo !empty($a['preview']) ? ' data-preview="' . esc_url($a['preview']) . '" data-cv' : ''; ?>>
|
||||||
|
<span class="ct-row__k"><span class="lime"><?php echo esc_html(str_pad($i + 1, 2, '0', STR_PAD_LEFT)); ?></span> <?php echo esc_html($a['k']); ?></span>
|
||||||
|
<?php $p = !empty($a['protect']); $href = $p ? yb2026_pv_href($a['href']) : 'href="' . esc_url($a['href']) . '"'; ?>
|
||||||
|
<a class="ct-row__big" <?php echo $href; ?><?php echo !empty($a['blank']) ? ' target="_blank" rel="noopener"' : ''; ?><?php echo $a['k'] === 'CV' ? ' data-cv' : ''; ?> data-cursor-label="<?php echo esc_attr($a['cursor']); ?>"><?php echo $p ? yb2026_pv($a['big']) : esc_html($a['big']); ?></a>
|
||||||
|
<span class="ct-row__acts">
|
||||||
|
<?php if (!empty($a['copy'])) : ?><button type="button" class="ct-copy" data-pv-copy="<?php echo esc_attr(yb2026_obf($a['copy'])); ?>">COPIER</button><?php endif; ?>
|
||||||
|
<a class="ct-row__act" <?php echo $href; ?><?php echo !empty($a['blank']) ? ' target="_blank" rel="noopener"' : ''; ?><?php echo $a['k'] === 'CV' ? ' data-cv' : ''; ?>><?php echo esc_html($a['act']); ?></a>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</ul>
|
||||||
|
<div class="ct-preview" aria-hidden="true"><img alt=""></div>
|
||||||
|
<div class="ct-toast" role="status" aria-live="polite"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/* Heure locale à Lyon + copie au presse-papiers + aperçu du CV qui suit la souris */
|
||||||
|
(function () {
|
||||||
|
const clk = document.querySelector('[data-clock]');
|
||||||
|
const tick = () => { if (clk) clk.textContent = new Intl.DateTimeFormat('fr-FR', { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Paris' }).format(new Date()); };
|
||||||
|
tick(); setInterval(tick, 15000);
|
||||||
|
const toast = document.querySelector('.ct-toast');
|
||||||
|
document.querySelectorAll('.ct-copy').forEach(b => b.addEventListener('click', async () => {
|
||||||
|
if (!b.dataset.copy && window.YBProtect) YBProtect.reveal();
|
||||||
|
try { await navigator.clipboard.writeText(b.dataset.copy); toast.textContent = 'Copié : ' + b.dataset.copy; }
|
||||||
|
catch (e) { toast.textContent = b.dataset.copy; }
|
||||||
|
toast.classList.add('is-on'); clearTimeout(toast._t); toast._t = setTimeout(() => toast.classList.remove('is-on'), 1800);
|
||||||
|
}));
|
||||||
|
const prev = document.querySelector('.ct-preview');
|
||||||
|
if (!prev || matchMedia('(pointer: coarse)').matches || document.documentElement.classList.contains('yb-static')) return;
|
||||||
|
const img = prev.querySelector('img'), m = { x: 0, y: 0, cx: 0, cy: 0 };
|
||||||
|
let on = false;
|
||||||
|
addEventListener('mousemove', e => { m.x = e.clientX; m.y = e.clientY; }, { passive: true });
|
||||||
|
document.querySelectorAll('.ct-row[data-preview]').forEach(li => {
|
||||||
|
li.addEventListener('mouseenter', () => { if (img.getAttribute('src') !== li.dataset.preview) img.src = li.dataset.preview; prev.classList.add('is-on'); on = true; m.cx = m.x; m.cy = m.y; });
|
||||||
|
li.addEventListener('mouseleave', () => { prev.classList.remove('is-on'); on = false; });
|
||||||
|
});
|
||||||
|
(function loop() {
|
||||||
|
if (on) {
|
||||||
|
const w = prev.offsetWidth, side = (m.x + 40 + w + 20 > innerWidth) ? -1 : 1;
|
||||||
|
const tx = m.x + side * (40 + w / 2), ty = Math.min(innerHeight - prev.offsetHeight / 2 - 16, Math.max(prev.offsetHeight / 2 + 16, m.y));
|
||||||
|
m.cx += (tx - m.cx) * 0.15; m.cy += (ty - m.cy) * 0.15;
|
||||||
|
prev.style.left = m.cx + 'px'; prev.style.top = m.cy + 'px';
|
||||||
|
}
|
||||||
|
requestAnimationFrame(loop);
|
||||||
|
})();
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<?php get_footer(); ?>
|
||||||
13
page.php
Normal file
13
page.php
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<?php
|
||||||
|
/* Page générique (mentions légales, plan du site…) */
|
||||||
|
get_header();
|
||||||
|
the_post();
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div class="page-wrap page-wrap--narrow">
|
||||||
|
<div class="kicker"><?php echo esc_html(strtoupper(get_bloginfo('name'))); ?></div>
|
||||||
|
<h1 class="page-title page-title--small" data-reveal><?php the_title(); ?></h1>
|
||||||
|
<div class="prose"><?php the_content(); ?></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php get_footer(); ?>
|
||||||
9
style.css
Normal file
9
style.css
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
/*
|
||||||
|
Theme Name: yb2026
|
||||||
|
Theme URI: https://yasser.boulayoune.com
|
||||||
|
Author: Yasser Boulayoune
|
||||||
|
Description: Portfolio v3 « sombre & premium » : Archivo/JetBrains Mono, accent lime, orbe canvas, transitions wipe. Porté depuis le prototype Claude Design (handoff). Le CSS est dans assets/css/style.css.
|
||||||
|
Version: 3.0
|
||||||
|
Requires PHP: 8.0
|
||||||
|
Text Domain: yb2026
|
||||||
|
*/
|
||||||
Loading…
Add table
Add a link
Reference in a new issue