/* faridsaid.com v3 : feuille de style unique, reproduction de la reference (dom_spec.md).
Ordre des blocs : @font-face, :root, reset, transitions, backdrop/canvas, chrome (logo, switch, menu, showreel, son),
loader, solid-button, liste, curseur, a propos, lecteur, mouvement reduit. Le bloc loader precede le bloc solid-button (§5).
Unites : 1rem = 1px (rem trick, §1.1). Pas de scoping Vue : classes renommees selon §0.3. */
/* ---------- 1.2 police : lookalike auto-hebergee (Manrope variable, OFL) declaree sous le nom de la famille de reference.
Bascule Indivisible (kit Adobe Fonts de Farid) : supprimer les deux @font-face ci-dessous, ajouter dans avant css/main.css
, remplacer dans :root --main-font-name et --display-font-name
par "indivisible-variable", et etendre la CSP : style-src ... https://use.typekit.net https://p.typekit.net ; font-src 'self' https://use.typekit.net */
@font-face{font-display:swap;font-family:"Indivisible Variable";font-style:normal;font-weight:200 800;src:url(../fonts/manrope-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}
@font-face{font-display:swap;font-family:"Indivisible Variable";font-style:normal;font-weight:200 800;src:url(../fonts/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ---------- 1.3 racine et points de rupture (verbatim) */
:root{--vw:100vw;--vh:100vh;--ivh:100dvh;--rem:1px;--main-font-name:"Indivisible Variable";--display-font-name:"Indivisible Variable";--main-font:var(--main-font-name),"Helvetica Neue","Arial",sans-serif;--display-font:var(--display-font-name),"Helvetica Neue","Arial",sans-serif;--color-black:#0a0a0a;--color-white:#fafafa;--color-white20:#fafafa20;--color-bg-dark:#0a0a0a;--color-bg-dark20:#0a0a0a20;--color-bg-dark40:#0a0a0a40;--color-bg-dark60:#0a0a0a60;--color-bg-dark-transparent:#0a0a0a00;--color-bg-grey:#171717;--color-pop-green:#21ffc0;--color-grey:#e6e6e6;--grid-margin:30rem;--grid-gutter:16rem;--grid-column:calc(var(--vw)/12 - var(--grid-gutter)*11/12 - var(--grid-margin)*2/12);--gap-xs:10rem;--gap-s:15rem;--gap-m:30rem;--gap-l:60rem;--gap-xl:90rem;--gap-xxl:120rem;--gap-xxxl:180rem;--gap-20:20rem;--gap-45:45rem;--radius-xs:4rem;--radius-s:8rem;--radius-m:12rem;--radius-l:16rem;--radius-xl:20rem;--radius-full:9999px;--padding:10rem;--ease-spring:linear(0,.0014,.0055 1.03%,.0239,.053 3.44%,.0961 4.81%,.1957 7.39%,.4354 12.88%,.5484,.6494,.7362,.8083 23.88%,.8696,.9168 29.72%,.9368,.9536 32.81%,.9793 35.9%,.997 39.17%,1.0084 42.77%,1.0142 47.07%,1.0144 53.43%,1.0054 68.37%,1.0019 77.3%,.9998 99.98%);--ease-quad-in-out:cubic-bezier(.455,.03,.515,.955);--ease-expo-out:cubic-bezier(.19,1,.22,1)}
@media screen and (max-width:900px){:root{--padding:10rem;--width-reference:394;--button-height:38rem;--grid-margin:20rem;--grid-gutter:15rem;--grid-column:calc(var(--vw)/6 - var(--grid-gutter)*5/6 - var(--grid-margin)*2/6)}}
@media screen and (max-width:420px){:root{--padding:8rem;--grid-margin:15rem;--grid-gutter:10rem;--grid-column:calc(var(--vw)/6 - var(--grid-gutter)*5/6 - var(--grid-margin)*2/6)}}
:root{overscroll-behavior:none}
@supports not (animation-timing-function:linear(0,1)){:root{--ease-spring:cubic-bezier(.34,1.56,.64,1)}}
/* ---------- 1.4 html, body, reset (verbatim) */
body,html{background-color:var(--color-bg-dark);color:var(--color-white);font-family:var(--main-font);font-size:18rem;font-weight:400;letter-spacing:-.04em;line-height:1}
@media screen and (max-width:900px){body,html{font-size:19rem}}
body,html{height:auto;margin:0;scroll-behavior:auto;width:100%;-ms-overflow-style:none;scrollbar-width:none}
body::-webkit-scrollbar,html::-webkit-scrollbar{display:none}
body,html{overflow-x:hidden}
body{overflow:unset!important}
sup{line-height:0}
html{font-family:var(--main-font);font-size:var(--rem);height:100%;min-height:100%;overflow:visible;overscroll-behavior-x:none;position:relative}
html.no-desktop.no-scroll,html.no-desktop.no-scroll body{height:var(--vh);overflow:hidden;touch-action:none}
html.desktop.no-scroll body{height:var(--vh);overflow:hidden}
.scrolling-element{overflow:hidden scroll;overscroll-behavior-y:none}
.scrolling-element.safari.desktop{overscroll-behavior-y:auto}
body{background:var(--color-bg-dark);color:var(--color-white);display:flex;flex-direction:column;max-width:100%;min-height:100%;position:relative}
*{box-sizing:border-box;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);text-rendering:geometricprecision;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-touch-callout:none}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;letter-spacing:inherit;margin:0}
h1 br,h2 br,h3 br,h4 br,h5 br,h6 br{margin:0!important}
a,button{color:inherit;cursor:pointer;font-weight:inherit;letter-spacing:inherit;text-decoration:none}
button{margin-bottom:0;margin-top:0}
a:active,a:focus,button:active,button:focus,input:active,input:focus{outline:none}
[role=button]{cursor:pointer}
strong{font-weight:700}
nav,ul{margin:0;padding:0}
nav li,ul li{list-style-type:none}
img{display:block;-webkit-user-select:none;user-select:none}
button,input[type=submit]{border:none;color:inherit;cursor:pointer;display:block;padding:0}
button,input,input[type=submit],textarea{-webkit-appearance:none;appearance:none;background:transparent;font-size:inherit;letter-spacing:inherit;text-transform:inherit}
button,input,textarea{border-radius:0;font-family:inherit;font-weight:inherit;line-height:inherit;text-align:inherit}
.hidden{left:-100vh;pointer-events:none;position:fixed;visibility:hidden}
#app{display:flex;flex-direction:column;flex-grow:1;height:100%;min-height:inherit}
@media screen and (max-width:900px){html{--border-size:1rem!important;--vertical-padding:8rem!important}html.scroll-locked{overflow:clip}}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
/* plancher accessibilite (n'altere pas le look au pointeur) */
a:focus-visible,button:focus-visible{outline:2rem solid var(--color-white);outline-offset:3rem}
.menu-container a:focus-visible,.menu-button:focus-visible,.close-button:focus-visible,.solid-button:focus-visible{outline-color:var(--color-bg-dark)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* ---------- 1.6 transitions Vue traduites en classes (verbatim) */
.fade-enter-from,.fade-leave-to{opacity:0}
.fade-enter-active,.fade-leave-active{transition:opacity .35s ease}
.project-enter-from{opacity:0;transform:translateY(80px) scale(.96)}
.project-enter-to{opacity:1;transform:translateY(0) scale(1)}
.project-enter-active{transition:opacity .65s ease,transform .65s cubic-bezier(.16,1,.3,1);transition-delay:.2s}
.project-leave-from{opacity:1;transform:translateY(0) scale(1)}
.project-leave-to{opacity:0;transform:translateY(0) scale(.985)}
.project-leave-active{inset:0;position:absolute;transition:opacity .45s ease,transform .45s ease}
.project-fade-enter-from{opacity:0;transform:translateY(18rem) scale(.96)}
.project-fade-enter-active{transition:all .35s cubic-bezier(.22,1,.36,1)}
.project-fade-enter-to,.project-fade-leave-from{opacity:1;transform:translateY(0) scale(1)}
.project-fade-leave-active{transition:all .25s cubic-bezier(.22,1,.36,1)}
.project-fade-leave-to{opacity:0;transform:translateY(-12rem) scale(.96)}
.video-fade-enter-from,.video-fade-leave-to{border-top-left-radius:16rem;border-top-right-radius:16rem;opacity:0;transform:scaleY(.95) scaleX(.95)}
.video-fade-enter-active,.video-fade-leave-active{transform-origin:bottom center;transition:opacity .4s ease-in-out,transform .4s ease-in-out,border-radius .4s ease-in-out}
.video-fade-enter-active{transition-delay:.1s}
.iconfade-leave-from{filter:blur(0);opacity:1;transform:scale(1) rotate(0)}
.iconfade-leave-to{filter:blur(2px);opacity:0;transform:scale(.8) rotate(15deg)}
.iconfade-leave-active{transition:opacity .25s ease,transform .25s ease,filter .25s ease}
.iconfade-enter-from{filter:blur(2px);opacity:0;transform:scale(.8) rotate(-15deg)}
.iconfade-enter-to{filter:blur(0);opacity:1;transform:scale(1) rotate(0)}
.iconfade-enter-active{transition:opacity .25s ease,transform .25s ease,filter .25s ease}
/* navigation entre pages statiques (§1.5) : sortie .35s sur #app > main, arrivee au frame suivant */
#app>main.page-leave,#app>main.page-enter-from{opacity:0}
#app>main{transition:opacity .35s ease}
/* ---------- 2 et 3 : squelette, backdrop, canvas (verbatim) */
.home-overlay-wrapper{transition:opacity .5s ease-out}
.home-overlay-wrapper.hide{opacity:0}
main.home{display:flex;flex-direction:column;gap:var(--grid-margin);width:100%}
main.about{width:100%}
svg.backdrop{height:100%;left:0;object-fit:cover;opacity:.4;pointer-events:none;position:fixed;top:0;width:auto;z-index:0;transition:opacity .5s ease-out}
svg.backdrop.hide{opacity:0;pointer-events:none}
.webgl{display:block;height:100%;left:0;position:fixed;top:0;transition:opacity .5s ease-out;width:100%;z-index:0}
.webgl.hide{opacity:0;pointer-events:none}
/* ---------- 4.1 logo haut gauche + tag au survol */
.logo-wrapper{cursor:pointer;height:64rem;left:var(--grid-margin);position:fixed;top:var(--grid-margin);width:64rem;z-index:20}
.logo-wrapper .logo-tag-wrapper{opacity:0;transform:scale(.5) translate(-10%);transform-origin:left center;transition:opacity .2s ease-out,transform .5s var(--ease-spring)}
@media screen and (hover:hover)and (pointer:fine){.logo-wrapper:hover .logo-tag-wrapper{opacity:1;transform:scale(1) rotate(-5deg) translate(0) translateY(-12rem)}}
.logo-wrapper:active .logo-tag-wrapper{transform:scale(.95) rotate(-5deg) translate(0) translateY(-12rem)}
.logo{display:block;height:100%;transition:transform .2s ease-out;width:100%}
.logo:active{transform:scale(.9)}
.logo svg{display:block;width:100%;height:100%}
.logo-tag-wrapper{height:fit-content;left:calc(100% + 8rem);pointer-events:none;position:absolute;top:16rem;width:fit-content}
.logo-tag-wrapper .tag{height:auto;width:80rem}
.logo-tag-wrapper .star{height:auto;position:absolute;right:-12rem;top:-12rem;width:32rem;z-index:-1}
/* remplacant du Lottie : petit rebond au clic (le Lottie rejouait sa face) */
@keyframes logo-pop{0%{transform:scale(1)}30%{transform:scale(.88) rotate(-6deg)}70%{transform:scale(1.06) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
.logo.is-playing svg{animation:logo-pop .6s var(--ease-spring)}
/* sphere brillante (logo et marque du loader, memes degrades que img/logo-fs.svg) : le reflet speculaire derive lentement, comme
la sphere animee de la reference ; mouvement reduit : fige (§11) */
@keyframes fs-shine{0%,to{transform:translate(0,0);opacity:.85}50%{transform:translate(2.5px,1.5px);opacity:1}}
.fs-sphere{display:block;overflow:visible}
.fs-sphere .shine{animation:fs-shine 4.5s ease-in-out infinite;will-change:transform}
/* 4 "faces" du monogramme : face-1 nue, face-2 yeux, face-3 clin, face-4 sourire (JS bascule la classe sur .logo) */
.logo .expr{display:none}
.logo.face-2 .expr-2,.logo.face-3 .expr-3,.logo.face-4 .expr-4{display:block}
/* ---------- 4.2 switch spirale • liste (verbatim) */
.switch{align-items:center;display:flex;gap:20rem;left:50%;position:fixed;top:calc(var(--grid-margin) + 15rem);transform:translate(-50%);z-index:20}
.switch .button{border:none;color:var(--color-white);display:flex;font-size:18rem;font-weight:500;min-width:60rem;opacity:.4;transition:opacity .3s ease-out}
.switch .button:first-child{justify-content:flex-end}
.switch .button button{cursor:pointer;overflow:hidden;position:relative}
.switch .button button span{display:block;transition:transform .3s var(--ease-spring),opacity .3s ease;user-select:none}
.switch .button button span:nth-child(2){left:0;opacity:0;position:absolute;top:0;transform:translateY(-100%)}
.switch .button button:hover span:first-child{opacity:0;transform:translateY(100%)}
.switch .button button:hover span:nth-child(2){opacity:1;transform:translateY(0)}
.switch .button.active{opacity:1}
.switch .button.active button span:first-child{opacity:0;transform:translateY(100%)}
.switch .button.active button span:nth-child(2){opacity:1;transform:translateY(0)}
.switch .dot{background-color:var(--color-white);border-radius:50%;height:8rem;width:8rem}
/* ---------- 4.3 menu (verbatim, renomme) */
nav.menu{position:fixed;right:var(--grid-margin);top:var(--grid-margin);z-index:20}
.menu-button-wrapper{height:fit-content;width:fit-content}
.menu-button,.menu-button-wrapper{position:relative;z-index:30}
.menu-button{align-items:center;border:none;border-radius:100rem;color:var(--color-bg-dark);cursor:pointer;display:flex;font-size:18rem;font-weight:500;padding:15rem 28rem 15rem 15rem;pointer-events:all;user-select:none}
.menu-button .text{transform-origin:left center;transition:opacity .2s ease,transform .2s ease;transition-delay:.35s}
.menu-button.opened{cursor:default}
.menu-button.opened .text{opacity:0;transform:translate(5px);transition-delay:0s}
.menu-button .letter{display:inline-block;transition:none}
.close-button{align-items:center;background:var(--color-bg-dark);border-radius:24rem;display:flex;height:48rem;justify-content:center;margin-left:7rem;position:absolute;right:20rem;top:20rem;transform-origin:top right;transition:transform .8s var(--ease-spring),right .8s var(--ease-spring),top .8s var(--ease-spring);width:48rem;z-index:30}
.close-button svg{color:var(--color-white);transition:transform .5s ease,opacity .3s ease}
/* la reference ancre le libelle a left:-50rem, valeur calee sur "close" (41.6 px) ; "fermer" fait 52 px et chevaucherait le disque :
on ancre le bord droit du mot a la meme distance du disque (~8 px), quelle que soit la longueur du libelle */
.close-button .text{color:var(--color-bg-dark);font-size:18rem;font-weight:500;right:calc(100% + 8rem);position:absolute;transition:opacity .3s ease,transform .3s ease;transition-delay:.2s}
.close-button.closed{pointer-events:none;right:15rem;top:20rem;transform:scale(.125)}
.close-button.closed svg{opacity:0;transform:rotate(-45deg)}
.close-button.closed .text{opacity:0;transform:translate(20px);transition-delay:0s;transition:opacity .1s ease,transform .1s ease}
.close-button.opened{pointer-events:auto}
.menu-panel{height:48rem;overflow:hidden;pointer-events:none;position:fixed;right:var(--grid-margin);top:var(--grid-margin);transition:width .9s var(--ease-spring),height 1s var(--ease-spring);width:86.8rem;z-index:40}
.menu-panel.opened{height:calc(100dvh - var(--grid-margin)*2);width:calc(var(--grid-column)*4 + var(--grid-gutter)*4)}
@media(max-width:1400px){.menu-panel.opened{width:calc(var(--grid-column)*5 + var(--grid-gutter)*4)}}
@media(max-width:1024px){.menu-panel.opened{width:calc(var(--grid-column)*6 + var(--grid-gutter)*5)}}
.menu-container{color:var(--color-bg-dark);display:flex;flex-direction:column;height:calc(100dvh - var(--grid-margin)*2);justify-content:center;padding:var(--gap-20);padding-left:45rem;position:absolute;right:0;top:0;width:calc(var(--grid-column)*4 + var(--grid-gutter)*4)}
@media(max-width:1400px){.menu-container{width:calc(var(--grid-column)*5 + var(--grid-gutter)*4)}}
@media(max-width:1024px){.menu-container{width:calc(var(--grid-column)*6 + var(--grid-gutter)*5)}}
@media screen and (max-width:900px){.menu-container{padding-left:var(--gap-20)}}
.menu-surface{background-color:var(--color-white);border-radius:24rem;height:48rem;overflow:hidden;position:fixed;right:var(--grid-margin);top:var(--grid-margin);transition:width .9s var(--ease-spring),height 1s var(--ease-spring),border-radius .9s ease;width:86.8rem;z-index:15}
.menu-surface.opened{border-radius:16rem;height:calc(100dvh - var(--grid-margin)*2);width:calc(var(--grid-column)*4 + var(--grid-gutter)*4)}
@media(max-width:1400px){.menu-surface.opened{width:calc(var(--grid-column)*5 + var(--grid-gutter)*4)}}
@media(max-width:1024px){.menu-surface.opened{width:calc(var(--grid-column)*6 + var(--grid-gutter)*5)}}
.links{display:flex;flex-direction:column;gap:var(--gap-s);pointer-events:none}
.links.opened{pointer-events:auto}
.links .link{cursor:pointer;font-size:80rem;font-weight:500;letter-spacing:-.05em;line-height:100%;margin:0;transition:padding-left .5s var(--ease-spring);width:fit-content;position:relative}
.links .link:before{background-color:var(--color-bg-dark);border-radius:24rem;content:"";height:24rem;left:0;opacity:0;position:absolute;top:50%;transform:translateY(-50%) scale(0);transition:transform .5s var(--ease-spring),opacity .5s var(--ease-spring);width:24rem}
@media screen and (hover:hover)and (pointer:fine){.links .link:hover{padding-left:40rem}.links .link:hover:before{opacity:1;transform:translateY(-50%) scale(1)}}
.menu-footer{align-items:center;bottom:0;display:flex;flex-wrap:wrap;gap:20rem;justify-content:space-between;left:0;padding:var(--gap-20);padding-left:45rem;pointer-events:all;position:absolute;width:100%}
.menu-footer a{color:var(--color-bg-dark);font-size:16rem;font-weight:500;text-decoration:none;will-change:opacity,transform}
.menu-footer a.closed{opacity:0;transform:translateY(-10px) translate(10px);transition:opacity .3s ease,transform .3s ease;transition-delay:0}
.menu-footer a.opened{opacity:1;transform:translateY(0) translate(0);transition:opacity .5s ease,transform .5s ease;transition-delay:.3s}
@media screen and (max-width:900px){.menu-footer{padding-left:var(--gap-20)}}
.menu-social-links{display:flex;will-change:opacity,transform}
.menu-social-links.closed{opacity:0;transform:translateY(-10px) translate(10px);transition:opacity .3s ease,transform .3s ease;transition-delay:0}
.menu-social-links.opened{opacity:1;transform:translateY(0) translate(0);transition:opacity .5s ease,transform .5s ease;transition-delay:.4s}
.menu-social-links .social-link{display:block;padding:0 4rem}
.menu-social-links .social-link:last-child{padding-right:0}
.menu-social-links .social-link:first-child{padding-left:0}
.menu-social-links .social-link-inner{align-items:center;background-color:var(--color-bg-dark);border-radius:50%;color:var(--color-white);display:flex;height:48rem;justify-content:center;transition:transform .3s ease,background-color .3s ease,color .3s ease;width:48rem}
.menu-social-links:has(.social-link:hover) .social-link:not(:hover) .social-link-inner{background-color:var(--color-grey);color:var(--color-black);transform:scale(.9)}
.menu-overlay{-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background:#00000080;height:100dvh;left:0;position:fixed;top:0;width:100vw;z-index:10}
/* ---------- 4.4 carte "derniers ecrits" bas gauche et marquee (verbatim) */
@keyframes moveAlong{0%{offset-distance:-100%}to{offset-distance:0}}
.showreel-thumbnail{bottom:var(--grid-margin);left:var(--grid-margin);position:fixed;z-index:10}
.showreel-thumbnail .thumbnail-wrapper{aspect-ratio:16/9;box-shadow:0 4px 8px #0003;height:auto;left:-140rem;position:absolute;top:-40rem;transform:rotate(-15deg);transition:transform .3s var(--ease-spring);width:280rem}
.showreel-thumbnail .thumbnail-wrapper:hover{transform:rotate(-13deg) scale(1.05)}
.showreel-thumbnail .thumbnail-wrapper .marquee-container{height:100%;left:-12rem;pointer-events:none;position:absolute;top:-12rem;width:calc(100% + 200rem)}
.showreel-thumbnail .thumbnail-wrapper svg{display:none;height:100%;left:0;opacity:.2;position:absolute;top:0;width:100%}
.showreel-thumbnail .thumbnail-wrapper .marquee-text{animation:moveAlong 12s linear infinite;font-size:18rem;font-weight:500;left:0;offset-anchor:bottom;offset-path:path("M29.5684 182H274.432C290.14 182 304 169 304 152.286V29.7143C304 13 291.064 0 274.432 0H29.5684C12.9362 0 0 13 0 29.7143V152.286C0 169 13.8602 182 29.5684 182Z");offset-rotate:auto 180deg;position:absolute;top:0}
.showreel-thumbnail .thumbnail-wrapper .thumbnail-link{display:block;height:100%;width:100%}
.showreel-thumbnail .thumbnail-wrapper .thumbnail{border-radius:20rem;cursor:pointer;display:block;height:100%;object-fit:cover;object-position:center;width:100%}
@supports not (offset-path:path("M0 0H1")){.showreel-thumbnail .marquee-container{display:none}}
/* v3 : la vignette est la carte coloree du dernier ecrit dessinee par ui.js (cards.js) ; elle fond a l'apparition, le SVG statique
reste le repli (sans JS le