:root{color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:#070709;color:#f6f6fa;font:15px/1.7 Arial,Helvetica,sans-serif;min-height:100vh}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 0%,#ffffff13,transparent 55%),radial-gradient(ellipse at 100% 100%,#ffffff08,transparent 45%)}
a{color:inherit;text-decoration:none}
.wrap{width:min(1140px,calc(100% - 36px));margin:auto}
nav{position:sticky;top:12px;z-index:30;margin:18px auto 0;width:min(1200px,calc(100% - 30px));padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;background:#151519eb;border:1px solid #ffffff24;border-radius:19px;backdrop-filter:blur(18px)}
.brand{font-weight:900;letter-spacing:2px;font-size:21px}
.brand span,em{color:#9b9baa;font-style:normal}
.navlinks{display:flex;flex-wrap:wrap;gap:3px}
.navlinks a{padding:9px 11px;border-radius:9px;color:#b4b4c0;font-size:12px;font-weight:700}
.navlinks a:hover,.navlinks a.active{background:#ffffff17;color:white}
.cover{margin-top:24px;min-height:174px;border-radius:25px;padding:22px;display:flex;justify-content:space-between;gap:20px;background:radial-gradient(circle at 45% 0%,#ffffff40,transparent 43%),repeating-linear-gradient(130deg,#ffffff04 0 2px,transparent 2px 36px),#18181e;border:1px solid #ffffff27;color:#bcbcc9;font-size:10px;letter-spacing:2px;font-weight:800}
.intro{text-align:center;margin-top:-66px;padding-bottom:46px}
.profile-picture{position:relative;width:130px;height:130px;display:grid;place-items:center;margin:0 auto 20px;background:#292932;border:4px solid white;border-radius:50%;box-shadow:0 0 50px #ffffff24;overflow:hidden}
.profile-picture span{font-weight:900;font-size:66px}
.profile-picture img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover}
.kicker{color:#b3b3c0;letter-spacing:2px;font-size:11px;font-weight:800}
h1,h2,h3{line-height:1.2;letter-spacing:-.04em}
h1{font-size:clamp(46px,8vw,86px);margin:15px 0}
h2{font-size:clamp(24px,4vw,34px)}
h3{font-size:20px;margin:0 0 12px}
.intro>p,.page-hero>p{max-width:710px;margin:16px auto 25px;color:#b8b8c4;line-height:1.8}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0}
.action{display:inline-flex;align-items:center;margin:8px 8px 8px 0;padding:11px 18px;border-radius:11px;background:#f5f5f7;color:#101014;font-weight:800;font-size:13px;transition:.25s}
.action:hover{transform:translateY(-3px);box-shadow:0 10px 30px #ffffff23}
.page-hero{text-align:center;padding:72px 0 38px}
.section{margin:38px 0 58px}
.section-title{font-size:11px;letter-spacing:2px;color:#b8b8c5;font-weight:800;margin-bottom:20px;display:flex;align-items:center;gap:15px}
.section-title:after{content:"";height:1px;flex:1;background:#ffffff29}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.panel{min-width:0;padding:25px;background:linear-gradient(145deg,#ffffff0d,#ffffff04);border:1px solid #ffffff25;border-radius:22px;transition:border-color .25s,transform .25s}
.panel:hover{border-color:#ffffff65}
.panel p,.about-aside p{color:#b3b3c2;font-size:14px;line-height:1.8}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center}
.media{height:230px;position:relative;border-radius:15px;border:1px solid #ffffff24;background:radial-gradient(circle,#51515d,#121216 70%);display:grid;place-items:center;overflow:hidden}
.media span{font-size:15px;letter-spacing:2px;font-weight:800;color:#d0d0d8;text-align:center}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media.cv{height:auto;min-height:250px;max-height:650px}
.media.cv img{position:relative;height:auto;max-height:630px;object-fit:contain}
.about-layout{display:grid;grid-template-columns:270px 1fr;gap:16px}
.about-aside{border:1px solid #ffffff25;border-radius:22px;background:#ffffff0b;text-align:center;padding:28px 16px}
.about-aside .profile-picture{width:115px;height:115px}
.chip{font-size:12px;padding:8px 12px;border-radius:10px;background:#ffffff12}
.note{font-size:12px;color:#9292a2}
.gallery-card{padding:13px}
.gallery-card .media{height:190px;margin-bottom:14px}
.gallery-card h3{margin:5px 10px 12px}
.social{display:block}
footer{padding:30px 0 45px;margin-top:40px;border-top:1px solid #ffffff20;color:#9d9daa;font-size:12px;display:flex;justify-content:space-between;gap:15px}
@media(max-width:850px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.feature,.about-layout{grid-template-columns:1fr}nav{align-items:flex-start}}
@media(max-width:550px){.cards{grid-template-columns:1fr}.cover{min-height:145px;font-size:8px}.panel{padding:20px}.page-hero{padding:46px 0 28px}nav .navlinks a{padding:7px;font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}


/* OCKSYNE COMMUNITY */
.ock-community{max-width:700px;margin:25px auto 58px;padding:24px;border:1px solid #ffffff29;border-radius:24px;background:linear-gradient(140deg,#ffffff13,#ffffff05);text-align:center}
.ock-community-title{font-size:11px;letter-spacing:2px;color:#bcbcc9;font-weight:800;margin-bottom:17px}
.ock-stats{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.ock-stat{border:1px solid #ffffff1c;background:#ffffff08;border-radius:16px;padding:20px 12px}
.ock-stat strong{display:block;font-size:35px;line-height:1.4}
.ock-stat span{font-size:12px;color:#b8b8c5}
.ock-community button{font:inherit;cursor:pointer;border:1px solid #ffffff40;border-radius:12px;padding:12px 18px}
.ock-community button:disabled{opacity:.5;cursor:not-allowed}
#ock-subscribe{width:100%;background:#f4f4f6;color:#101016;font-weight:800;margin-top:16px}
.ock-login{display:flex;gap:9px;margin-top:13px}
.ock-login input{min-width:0;flex:1;background:#111116;color:white;border:1px solid #ffffff36;border-radius:11px;padding:11px;font:inherit}
.ock-login button{background:#27272f;color:white;font-size:12px}
.ock-community-status{color:#aaaab8;font-size:12px;min-height:20px;margin-top:12px}
.ock-community .ock-logout{background:transparent;color:#aaaab8;font-size:11px;padding:7px 11px}
@media(max-width:520px){.ock-community{padding:15px}.ock-login{flex-direction:column}.ock-stat strong{font-size:28px}}

/* Abonnement anonyme Ocksyne */
#ock-turnstile{display:flex;justify-content:center;margin-top:12px}
#ock-subscribe[aria-pressed="true"]{background:#222229;color:#f4f4f6;border-color:#ffffff65}
#ock-subscribe:focus-visible{outline:2px solid white;outline-offset:3px}