/* ===== Ensō — page d'accueil pilotée au scroll ===== */
html{scroll-behavior:auto}
body{--gold:#c8a25a}
[data-theme=dark] body,body{background-color:var(--paper)}
.enso-stage{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity .2s linear}
.enso-stage svg,.enso-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.enso-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 42% 50%,transparent 35%,rgba(0,0,0,.35) 100%);mix-blend-mode:multiply}
[data-theme=light] .enso-stage::after{background:radial-gradient(ellipse at 42% 50%,transparent 40%,rgba(80,60,30,.18) 100%)}
.nav{z-index:20}
main,.foot{position:relative;z-index:1}
#projets,#astuces,#contact{position:relative;z-index:1}

.story{position:relative;height:700vh}
.story .anchor{position:absolute;left:0;width:1px;height:1px}
.story-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.slot{position:absolute;opacity:0;visibility:hidden;will-change:opacity,transform}
.slot.on{visibility:visible}

/* Hero */
.s-hero{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 5vw}
.hero-name{font-family:var(--serif);font-weight:500;font-size:clamp(3.2rem,10.5vw,10.5rem);line-height:.92;letter-spacing:-.02em;color:var(--ink)}
.hero-name span{display:inline-block;opacity:0;transform:translateY(.25em);filter:blur(10px);transition:opacity 1.6s cubic-bezier(.2,.7,.1,1),transform 1.6s cubic-bezier(.2,.7,.1,1),filter 1.6s}
.hero-name span+span{transition-delay:.18s}
.hero-sub{margin-top:2rem;font-size:clamp(.82rem,1.15vw,1rem);letter-spacing:.24em;text-transform:uppercase;color:var(--mut);opacity:0;transition:opacity 1.4s .7s}
.cue{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.8rem;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);text-decoration:none;opacity:0;transition:opacity 1s 1.4s}
.cue i{width:1px;height:46px;background:linear-gradient(var(--ink),transparent);transform-origin:top;animation:cue 2.4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.ready .hero-name span{opacity:1;transform:none;filter:none}
.ready .hero-sub,.ready .cue{opacity:1}

/* Intention + cartes : colonne droite (desktop) */
.s-intent,.svc-card{left:64vw;width:min(30vw,440px);top:50%;transform:translateY(-50%)}
.s-intent h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,3.6vw,3.6rem);line-height:1.05;margin:.6rem 0 1.4rem}
.s-intent h2 em,.c-left h2 em{font-style:normal;color:var(--red)}
.card-n{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}
.card-n span{color:var(--ink)}
.svc-card h3{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,3.4vw,3.4rem);line-height:1;margin:.9rem 0 .7rem}
.card-hook{font-size:1.05rem;color:var(--ink);margin-bottom:1rem}
.card-d{color:var(--mut);font-size:.95rem;max-width:36ch}
.svc-card .svc-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.3rem 0 1.6rem;list-style:none}
.svc-card .svc-tags li{font-size:.72rem;letter-spacing:.06em;padding:.3rem .7rem;border:1px solid var(--line2);border-radius:99px;color:var(--mut)}
.card-a{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:.35rem;transition:border-color .3s,color .3s}
.card-a svg{width:16px;height:16px;transition:transform .3s}
.card-a:hover,.card-a:focus-visible{color:var(--red);border-color:var(--red)}
.card-a:hover svg{transform:translate(2px,-2px)}

/* Preuve / contact au-dessus du cercle */
#projets .pf,#astuces .post{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(6px)}
#contact{min-height:100vh;display:flex;align-items:center}
#contact .contact{width:100%;margin-left:auto;max-width:min(560px,42vw);display:block;background:none;border:0;box-shadow:none}
#contact .c-left{margin-bottom:2rem}
#contact .c-left h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.08}
#contact form{background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(6px)}

/* Mobile : cercle tiers supérieur, cartes dessous */
@media (max-width:820px){
 .s-intent,.svc-card{left:6vw;right:6vw;width:auto;top:auto;bottom:4vh;bottom:calc(4svh + env(safe-area-inset-bottom));transform:none;max-height:52svh}
 .s-intent h2,.svc-card h3{font-size:clamp(1.9rem,8.5vw,2.6rem);margin:.5rem 0 .6rem}
 .card-hook{font-size:.98rem;margin-bottom:.5rem}
 .card-d{font-size:.88rem;line-height:1.55}
 .svc-card .svc-tags{margin:.9rem 0 1rem}
 .s-hero{justify-content:flex-end;padding-bottom:22svh}
 .hero-name{font-size:clamp(3rem,15vw,5rem)}
 .hero-name span{display:block}
 .hero-sub{letter-spacing:.14em;margin-top:1.3rem;font-size:.74rem;line-height:1.8}
 #contact{align-items:flex-end;padding-top:62svh}
 #contact .contact{max-width:none}
}
@media (prefers-reduced-motion:reduce){
 .story{height:auto}
 .story-pin{position:relative;height:auto;overflow:visible;padding:0 0 10vh}
 .slot{position:relative;opacity:1!important;visibility:visible;transform:none!important;inset:auto;left:auto;top:auto;bottom:auto;width:auto;max-width:640px;margin:0 auto 14vh;padding:0 6vw}
 .s-hero{min-height:100vh;justify-content:center;padding-bottom:0}
 .hero-name span,.hero-sub,.cue{opacity:1;transform:none;filter:none;transition:none}
 .cue i{animation:none}
 .enso-stage{opacity:.25!important}
}
@media (min-width:821px){
 .s-hero{justify-content:flex-end;padding-bottom:20vh}
 #contact.section{max-width:none;margin:0;padding:8rem 6vw 6rem 62vw}
 #contact .contact{max-width:520px;margin:0;padding:0}
}
/* Hero : vrai logo révélé par la tache d'encre */
html.lock,html.lock body{overflow:hidden}
.hero-logo-svg{position:absolute;inset:0;width:100%;height:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.s-hero{justify-content:flex-start!important;padding:0!important}
.s-hero .hero-sub{position:absolute;left:0;right:0;margin:0;font-family:var(--serif);text-transform:none;letter-spacing:.02em;font-size:clamp(1.05rem,1.7vw,1.5rem);color:var(--ink);transform:translateY(10px);transition:opacity 1.2s,transform 1.2s cubic-bezier(.2,.7,.1,1)}
.ready .s-hero .hero-sub{transform:none}

@media (prefers-reduced-motion:reduce){.s-hero{min-height:100vh}.s-hero .hero-sub{transform:none}}
/* ===== v2 : intro vidéo, papier réel, scènes ===== */
.enso-stage{background:#2a221c}
.enso-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.enso-stage::after{display:none}
.hero-media{position:absolute;inset:0;overflow:hidden;background:#2a221c}
.hero-media>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-logo-end{opacity:0}
.hero-media.code .hero-logo-end{-webkit-mask-image:radial-gradient(circle at 50% 40%,#000 calc(var(--r,0%) - 9%),transparent var(--r,0%));mask-image:radial-gradient(circle at 50% 40%,#000 calc(var(--r,0%) - 9%),transparent var(--r,0%))}
.hero-drop{left:50%!important;top:40%!important;width:16vw!important;height:16vw!important;right:auto!important;bottom:auto!important;border-radius:50%;background:radial-gradient(circle,#0b0806 0 45%,rgba(11,8,6,.75) 58%,transparent 72%);filter:blur(1.5px);opacity:0;transform:translate(-50%,-50%)}
.hero-media:not(.code) .hero-drop{display:none}
.s-hero .hero-sub{top:auto!important;bottom:21vh;color:#f6efe3;font-weight:500;font-size:clamp(1.15rem,1.9vw,1.65rem);text-shadow:0 1px 14px rgba(10,7,5,.85),0 0 2px rgba(10,7,5,.7)}
.s-hero .hero-sub::before{content:"";position:absolute;left:50%;top:50%;width:min(720px,92vw);height:5.5em;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,240,215,.16),rgba(20,14,10,.38) 45%,transparent 72%);z-index:-1;filter:blur(8px)}
.s-hero .cue{color:#f1e9dc}
.s-hero .cue i{background:linear-gradient(#f1e9dc,transparent)}
.story{color:#efe7da}
.story .card-d,.story .card-n{color:#cfc4b4}
.card-poster{display:none}
@media (max-width:820px){
 .s-hero .hero-sub{bottom:24svh;padding:0 8vw;font-size:1.05rem}
 .hero-drop{width:30vw!important;height:30vw!important}
 .s-intent,.svc-card{top:50%;bottom:auto;transform:translateY(-50%);max-height:none}
}
@media (prefers-reduced-motion:reduce){
 .hero-media{position:absolute}
 .card-poster{display:block;width:min(320px,70vw);height:auto;border-radius:50%;margin:0 0 1.5rem}
 .enso-stage{opacity:.35!important}
}
.s-hero .hero-sub{z-index:2}
/* Portrait plus étroit que 9:16 (ex. 390×844) : la vidéo tient en largeur pour ne pas rogner le logotype ; fondu haut/bas sur le papier */
@media (max-aspect-ratio:9/16){
 .hero-media .hero-video,.hero-media .hero-logo-end{object-fit:contain;-webkit-mask-image:linear-gradient(transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 18%,#000 82%,transparent 100%)}
 .hero-media .hero-paper{filter:blur(2px) brightness(.97)}
}
/* v4 */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.s-hero .cue{opacity:0!important;transition:opacity .8s}
.s-hero .cue.hint{opacity:.75!important}
.cue-m{display:none}
@media (hover:none),(max-width:820px){.cue-d{display:none}.cue-m{display:inline}}
@media (min-width:821px){
 .s-intent,.svc-card{left:var(--card-left,64vw);width:var(--card-w,min(30vw,440px))}
 #contact.section{padding-left:var(--card-left,62vw)}
 #contact .contact{max-width:min(520px,var(--card-w,520px))}
}
/* ===== v5 : intro scrubbée + restyle premium (lignes fines, cercles, angles) ===== */
.story{height:850vh}
:root{--gold:#c8a25a;--hair:rgba(200,162,90,.45)}
/* Boutons : pilule fine, contour or 1px, se remplit d'encre au survol */
.btn,.btn-sm,.card-a,.pf-link,.flt{border-radius:999px!important;background:transparent!important;border:1px solid var(--gold)!important;color:var(--ink)!important;font:500 .72rem var(--sans)!important;letter-spacing:.26em!important;text-transform:uppercase;padding:.85rem 1.7rem!important;display:inline-flex;align-items:center;gap:.6rem;position:relative;overflow:hidden;z-index:0;isolation:isolate;transition:color .45s cubic-bezier(.7,0,.2,1)!important;text-decoration:none;cursor:pointer}
.btn-sm,.flt,.pf-link,.card-a{padding:.6rem 1.25rem!important;font-size:.66rem!important}
.btn::before,.card-a::before,.pf-link::before,.flt::before{content:"";position:absolute;inset:0;background:var(--ink)!important;border-radius:inherit;transform:translateX(-101%)!important;transition:transform .55s cubic-bezier(.7,0,.2,1)!important;z-index:-1}
.btn:hover::before,.btn:focus-visible::before,.card-a:hover::before,.pf-link:hover::before,.flt:hover::before,.flt.is-on::before{transform:none!important}
.btn:hover,.btn:focus-visible,.card-a:hover,.pf-link:hover,.flt:hover,.flt.is-on{color:var(--paper)!important;border-color:var(--gold)!important}
.btn::after{display:none}
.pf-link svg,.card-a svg{width:14px;height:14px}
.card-a{border-bottom:1px solid var(--gold)!important}
.filters{gap:.6rem}
/* Réalisations : galerie, sans cartes */
#projets .pf,#astuces .post{background:none!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important}
.pf-grid{grid-template-columns:repeat(2,1fr)!important;gap:7rem 5vw!important;margin-top:4rem}
.pf:nth-child(even){margin-top:9rem}
.pf:hover{transform:none!important}
.pf-media{aspect-ratio:4/3!important;border:0!important;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 72px,100% 100%,0 100%);background-size:cover;background-position:center top;position:relative;overflow:hidden}
.pf-media::after{content:"";position:absolute;inset:-2px;pointer-events:none;background:linear-gradient(100deg,rgba(9,7,5,.62) 0 70%,rgba(9,7,5,.25) 82%,transparent 100%);background-size:160% 100%;background-position:0 0;transition:background-position 1.1s cubic-bezier(.7,0,.2,1),opacity 1.1s;-webkit-mask-image:radial-gradient(140% 120% at 0 50%,#000 60%,transparent 100%);mask-image:radial-gradient(140% 120% at 0 50%,#000 60%,transparent 100%)}
.pf:hover .pf-media::after,.pf:focus-within .pf-media::after{background-position:160% 0;opacity:0}
.pf-media::before{content:"";position:absolute;right:0;top:0;width:102px;height:1px;background:var(--gold);transform-origin:right top;transform:rotate(45deg) translate(0,0);transform:translate(-1px,0) rotate(45deg);transform-origin:0 0;left:calc(100% - 72px);z-index:2;opacity:.8}
.ts-cover{gap:0!important;border:0!important}
.ts-count{background:transparent!important;border:1px solid var(--gold)!important;border-radius:999px;color:var(--ink)!important;backdrop-filter:blur(4px)}
.diagram{background:radial-gradient(circle at 50% 50%,rgba(200,162,90,.12),transparent 62%),transparent!important;border:1px solid var(--hair)!important}
.pf-body{padding:1.6rem 0 0!important;gap:.6rem!important;position:relative}
.pf-body::before{content:"";display:block;width:56px;height:1px;background:var(--gold);margin-bottom:.6rem}
.pf h3{font-family:var(--serif)!important;font-weight:500!important;font-size:clamp(1.4rem,2vw,1.9rem)!important;letter-spacing:.01em!important}
.pf-cat{color:var(--gold)!important;font-weight:500!important;font-size:.64rem!important;letter-spacing:.32em!important}
.pf-body>p:not(.pf-cat){font-size:.9rem!important;font-weight:300;max-width:52ch}
.pf-body .pf-link{align-self:flex-start;margin-top:.8rem!important}
/* Astuces IA : légères, en filet */
.blog-grid{gap:3rem 4vw!important}
.post{border-top:1px solid var(--hair)!important}
.post::before{background:var(--gold)!important;height:1px!important}
.post-a{padding:1.8rem 0 0!important}
.post-n{color:var(--gold)!important;font-size:1.4rem!important}
.post h3{font-family:var(--serif);font-weight:500!important;font-size:1.3rem!important}
.post:hover{transform:none!important}
.post .pf-link{margin-top:1rem!important}
/* Contact : centré sous le cercle ouvert, formulaire minimal */
@media (min-width:821px){#contact.section{padding:10rem 6vw 7rem!important}}
#contact{justify-content:center;text-align:center;align-items:flex-start!important}
#contact .contact{max-width:620px!important;margin:0 auto!important;padding:0!important;text-align:center}
#contact .c-left h2{font-size:clamp(2.4rem,5vw,4.6rem)!important;line-height:1.04!important}
#contact .c-left .sub{max-width:44ch;margin:1.2rem auto 0;color:var(--mut)}
#contact .c-left .eyebrow{color:var(--gold);letter-spacing:.32em}
#contact form{background:none!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important;padding:0!important;display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.4rem;text-align:left;margin-top:3rem}
#contact form label{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);display:flex;flex-direction:column;gap:.4rem}
#contact form .full{grid-column:1/-1}
#contact input,#contact select,#contact textarea{background:transparent!important;border:0!important;border-bottom:1px solid var(--hair)!important;border-radius:0!important;padding:.7rem 0!important;color:var(--ink);font:300 1rem var(--sans);box-shadow:none!important;outline:0;transition:border-color .3s}
#contact select option{background:#1b1612}
#contact input:focus,#contact select:focus,#contact textarea:focus{border-bottom-color:var(--gold)!important}
#contact textarea{resize:vertical;min-height:5.5rem}
#contact form .btn{justify-self:center;width:auto!important;margin-top:1rem}
#contact .status{text-align:center}
@media (max-width:820px){
 .pf-grid{grid-template-columns:1fr!important;gap:4.5rem!important}
 .pf:nth-child(even){margin-top:0}
 .pf-media{clip-path:polygon(0 0,calc(100% - 44px) 0,100% 44px,100% 100%,0 100%)}
 .pf-media::before{width:62px;left:calc(100% - 44px)}
 #contact{padding:60svh 1.4rem 4rem!important}
 #contact form{grid-template-columns:1fr;gap:1.6rem}
 .nav .btn-sm{padding:.5rem 1rem!important}
}

.story{height:1020vh}

/* v6 : projets en rectangles nets, filet fin */
.pf-media{clip-path:none!important;border:1px solid var(--hair)!important;border-radius:0!important}
.pf-media::before{display:none!important}

/* v8 : hauteur stable (barre d'adresse mobile) */
.story-pin{height:var(--sh,100lvh)!important}
.enso-stage{bottom:auto!important;height:var(--sh,100lvh)!important}
.hero-media{height:var(--sh,100lvh)!important;bottom:auto!important}
.story{height:calc(var(--sh,100lvh) * 10.2)!important}
@media (prefers-reduced-motion:reduce){.story{height:auto!important}.story-pin{height:auto!important}}
/* v9 : carrousel Réalisations */
html,body{overflow-anchor:none}
.pf-marquee{display:block!important;overflow:hidden;margin:4rem calc(50% - 50vw) 0!important;width:100vw;padding:0 0 1rem;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:0}
.pf-marquee.dragging{cursor:grabbing}
.pf-track{display:flex;gap:clamp(1.5rem,3vw,3rem);width:max-content;will-change:transform;padding-left:6vw}
.pf-marquee .pf{flex:0 0 clamp(300px,32vw,500px);margin:0!important}
.pf-marquee .pf:nth-child(even){margin-top:0!important}
.pf-marquee .pf-media{aspect-ratio:16/10!important}
.pf-marquee img{-webkit-user-drag:none;pointer-events:none}
.pf-marquee .ts-cover img{pointer-events:none}
@media (max-width:820px){.pf-marquee .pf{flex-basis:80vw}.pf-track{padding-left:6vw}}
/* intro mobile : scène fixe plein cadre */
.hero-media.fixed{position:fixed!important;top:0!important;left:0;right:0;bottom:auto!important;height:var(--sh)!important;z-index:2;pointer-events:none}
.story-pin{z-index:3}
/* v10 : document fixe, défilement dans #scroller -> la barre d'adresse mobile ne se replie plus, hauteur stable */
html,body{height:100%;overflow:hidden!important}
#scroller{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;overflow-anchor:none}
/* carrousel : une seule rangée horizontale, quelle que soit la largeur */
.pf-grid[data-marquee]{display:block!important;grid-template-columns:none!important;columns:auto!important}
.pf-marquee .pf-track{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;width:max-content!important}
.pf-marquee .pf{flex:0 0 420px!important;width:420px!important;max-width:none!important}
@media (max-width:820px){.pf-marquee .pf{flex-basis:78vw!important;width:78vw!important}}