/* Elo Making — styles communs aux pages À propos, Portfolio et Contact */
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
input,select,textarea{font:inherit;color:inherit}
img,svg,canvas{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.no-gsap .cursor,.no-gsap .cursor-dot{display:none}
.status i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 2s infinite;flex:none}
.h-sec{font-size:clamp(44px,8vw,140px);font-weight:700;letter-spacing:-.06em;line-height:.88}
.h-sec em{color:var(--accent);letter-spacing:-.02em}
.lead{font-size:clamp(18px,1.6vw,24px);line-height:1.35;max-width:34ch}
.muted{color:var(--muted)}
.phero{position:relative;min-height:88svh;display:flex;flex-direction:column;justify-content:flex-end;padding:130px var(--gutter) 40px;overflow:hidden}
.phero canvas{position:absolute;inset:0;width:100%;height:100%;filter:blur(70px) saturate(1.2);opacity:.7;z-index:0;pointer-events:none}
.phero > *:not(canvas){position:relative;z-index:1}
.phero__eyebrow{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:3vw;font-size:14px;color:var(--muted)}
.phero__eyebrow b{color:var(--fg);font-weight:500}
.phero__title{font-size:clamp(60px,14vw,240px);font-weight:700;line-height:.84;letter-spacing:-.065em}
.phero__title .line{display:block;overflow:hidden;padding-bottom:.05em}
.phero__title .line > span{display:inline-block}
.phero__title em{font-weight:400;letter-spacing:-.02em;color:var(--accent)}
.char{display:inline-block;will-change:transform}
.phero__bottom{display:grid;grid-template-columns:1.2fr 1fr auto;gap:32px;align-items:end;margin-top:4vw;border-top:1px solid var(--line);padding-top:24px}
.phero__meta{font-size:14px;color:var(--muted);line-height:1.7}
@media (max-width:820px){.phero__bottom{grid-template-columns:1fr}.scroll-hint{display:none}.phero__eyebrow{flex-direction:column;align-items:flex-start}}
.art-6{background:radial-gradient(60% 50% at 70% 25%,#ffffff 0,transparent 70%),radial-gradient(55% 55% at 20% 85%,#a9a49c 0,transparent 70%),linear-gradient(170deg,#e6e1d8,#9c968c)}
.art-7{background:radial-gradient(50% 45% at 65% 35%,#c9ccd8 0,transparent 70%),radial-gradient(70% 60% at 20% 80%,#343e6e 0,transparent 70%),linear-gradient(200deg,#1b2038,#0b0b0c)}
.art-8{background:radial-gradient(60% 60% at 30% 30%,#d6d4d0 0,transparent 70%),radial-gradient(50% 50% at 80% 80%,#444448 0,transparent 70%),linear-gradient(160deg,#8a8a8a,#1d1d1f)}
.quote blockquote .w{opacity:.14;display:inline-block;margin-right:.22em}
.quote cite i{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-deep));flex:none}
.cta__title .line{display:block;overflow:hidden;padding-bottom:.04em}
.magnet{display:inline-grid;place-items:center;margin-top:56px;width:clamp(160px,14vw,220px);aspect-ratio:1;border-radius:50%;background:var(--fg);color:var(--bg);font-weight:600;font-size:18px;position:relative;overflow:hidden;text-align:center}
.magnet:hover::before,.magnet:focus-visible::before{transform:translateY(0)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:99px;padding:16px 26px;font-weight:600;font-size:15px;position:relative;overflow:hidden;background:var(--fg);color:var(--bg);isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1;border-radius:inherit}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn--ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn--ghost:hover{color:var(--bg)}
.btn[disabled]{opacity:.35;pointer-events:none}
[data-words] .w{opacity:.14;display:inline-block;margin-right:.22em}
@keyframes spin{to{transform:rotate(360deg)}}