/* Verre clair : reflets précis, contenu immobile, déformation réservée aux contrôles. */
:root{--liquid-return:cubic-bezier(.16,1.35,.36,1)}
body{background:#f7f7f6}.noise{opacity:.045}
.hero{background:radial-gradient(ellipse at 82% 42%,#e5e7e8 0,transparent 48%),#f8f8f7}
.hero::before{opacity:.28}.halo{opacity:.35;filter:blur(30px)}.scene-ground{opacity:.6}
.site-nav{background:linear-gradient(130deg,#ffffffb0,#ffffff38 48%,#ffffff9c);border:1px solid #fff;border-bottom-color:#00000012;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #ffffff60,0 10px 35px #14141408;backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
.glass-pane{background:linear-gradient(132deg,#ffffff9c 0%,#ffffff30 35%,#ffffff10 57%,#ffffff70 100%);border-color:#ffffffdb;border-bottom-color:#00000018;box-shadow:inset 1px 2px 0 #ffffffed,inset -1px -1px 0 #ffffff88,16px 28px 45px #14141414;backdrop-filter:blur(11px) saturate(1.4);-webkit-backdrop-filter:blur(11px) saturate(1.4)}
.glass-pane::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at var(--glass-light-x,30%) var(--glass-light-y,15%),#ffffffb5,transparent 48%),linear-gradient(115deg,#fff8,transparent 24%,transparent 76%,#fff4);opacity:.7}
.pane-top,.glass-items,.glass-main{position:relative}.pane-front{border-radius:30px}.pane-top{height:52px;border-bottom-color:#00000010}.glass-main{padding-top:27px}.glass-main h2{font-size:clamp(29px,3.15vw,44px);letter-spacing:-.055em;line-height:1.13;margin-bottom:16px;color:#292929}.glass-main h2 em{color:#616161}
.glass-mini-label{color:#626262;letter-spacing:.12em}.pane-link{border:0;border-radius:0;width:auto;height:auto;display:block;font-size:12px;color:#626262;letter-spacing:.08em}
.glass-item{background:#ffffff20;border-color:#ffffff60;border-radius:8px}.about-glass{background:linear-gradient(130deg,#ffffffb0,#ffffff20 65%,#ffffff80);box-shadow:inset 1px 1px 0 white,18px 28px 35px #00000012}.about-art{border-radius:20px}
.skill{background:transparent;border:0;border-top:1px solid #c8c8c8;border-radius:0;padding:22px 5px}.skill:hover{transform:none;background:transparent;box-shadow:none}.skill-icon{font-size:17px;opacity:.65}.skill-grid{gap:28px}
.story-ring{box-shadow:none}.story-graphic{opacity:.22}.project-card{border-radius:16px}.project-card::before{border-radius:16px}.contact-panel{background:linear-gradient(130deg,#e9ebec,#f2f3f3 64%,#e7e9ea);border-color:#ffffffb0;box-shadow:inset 0 1px 0 white}.contact-panel::before{opacity:.35}

/* Le bouton garde une boîte fixe ; seule sa peau de verre se déforme. */
.liquid-control{--liquid-x:0px;--liquid-y:0px;--liquid-sx:1;--liquid-sy:1;--liquid-skew:0deg;--liquid-px:50%;--liquid-py:20%;position:relative;isolation:isolate;background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;transform:none!important;transition:color .16s ease!important;overflow:visible;border-radius:15px;touch-action:manipulation}
.liquid-control::before,.liquid-control::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;transform:translate3d(var(--liquid-x),var(--liquid-y),0) scale(var(--liquid-sx),var(--liquid-sy)) skewX(var(--liquid-skew));transform-origin:50% 50%}
.liquid-control::before{background:linear-gradient(135deg,#ffffffc9,#ffffff38 46%,#ffffffa1);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #ffffff70,0 2px 5px #0000000a,0 0 0 1px #0000001a;backdrop-filter:blur(12px) saturate(1.45);-webkit-backdrop-filter:blur(12px) saturate(1.45)}
.liquid-control::after{background:radial-gradient(ellipse at var(--liquid-px) var(--liquid-py),#fffffffa 0%,#ffffff75 18%,transparent 64%);box-shadow:inset 0 1px 1px #fff;opacity:.4;transition:opacity .18s ease}
.liquid-control:hover::after,.liquid-control:focus-visible::after{opacity:.9}
.liquid-control:focus-visible{outline:3px solid #222;outline-offset:6px}
.liquid-control.liquid-engaged::before,.liquid-control.liquid-engaged::after{will-change:transform}
.btn-primary.liquid-control,.nav-cta.liquid-control{color:#fff}
.btn-primary.liquid-control::before,.nav-cta.liquid-control::before{background:linear-gradient(130deg,#303338e6,#15171be8 50%,#36393edf);border-color:#7479809e;box-shadow:inset 0 1px 0 #ffffff59,inset 0 -1px 0 #000000b0,0 5px 14px #00000014,0 0 0 1px #111111cd}
.btn-primary.liquid-control::after,.nav-cta.liquid-control::after{background:radial-gradient(ellipse at var(--liquid-px) var(--liquid-py),#ffffff44,transparent 63%);box-shadow:inset 0 1px 0 #ffffff70;opacity:.8}
.project-detail.liquid-control{padding:10px 16px;font-size:14px;border-radius:12px;text-decoration:none}.project-detail.liquid-control::before{background:linear-gradient(135deg,#ffffff90,#ffffff15 60%,#ffffff70);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #00000015}.project-detail.liquid-control:hover{border-color:transparent}
.motion-toggle.liquid-control{border-radius:11px}.menu-button.liquid-control{border-radius:12px}.dialog-close.liquid-control{border-radius:12px;padding:8px 16px}
.liquid-control.liquid-dragged{cursor:grabbing}
.motion-paused .liquid-control::before,.motion-paused .liquid-control::after{transform:none!important;transition:none!important}.motion-paused .liquid-control::after{opacity:.4}
@media(hover:none),(pointer:coarse){.liquid-control::before,.liquid-control::after{transition:transform .22s var(--liquid-return),opacity .15s ease}.liquid-control:active::before,.liquid-control:active::after{transform:scale(.965,.935)}.liquid-control:active::after{opacity:.95}}
@media(max-width:760px){.site-nav{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.hero-visual .scene-rig{transform:scale(.86)}.nav-links{background:#ffffffed}.skill-grid{gap:18px}.glass-main h2{font-size:34px}.project-card{border-radius:14px}}
@media(max-width:430px){.hero-visual .scene-rig{transform:scale(.72)}.motion-toggle.liquid-control{max-width:128px}.project-detail.liquid-control{padding:9px 14px}}
@media(prefers-reduced-motion:reduce){.liquid-control::before,.liquid-control::after{transform:none!important;transition:none!important}}

.motion-touched .hero-copy>*,.motion-touched .hero-visual{animation:none!important}

/* Captures authentiques : aucun recadrage de l’interface dans les cartes. */
.real-shot{display:block;width:100%;height:auto;aspect-ratio:16/9;padding:0;border:0;cursor:zoom-in;background:#edf0ee;position:relative}
.real-shot img{width:100%;height:100%;display:block;object-fit:contain;object-position:center;transition:opacity .2s ease}
.real-shot:focus-visible{outline:3px solid #222;outline-offset:-4px}.real-shot:hover img{opacity:.92}
.shot-action{position:absolute;right:12px;bottom:12px;padding:7px 11px;font-size:12px;color:#222;background:#ffffffed;border:1px solid #00000012;border-radius:9px;box-shadow:0 2px 8px #00000008;pointer-events:none}
.capture-note{display:block;font-size:12px;line-height:1.6;color:#626262;margin-top:10px}
.project-capture{margin:24px 0 28px}.project-capture[hidden]{display:none}.project-capture img{display:block;width:100%;height:auto;border:1px solid #00000012;border-radius:12px}.project-capture figcaption{font-size:12px;color:#626262;margin-top:10px}
#projectDialog.has-capture{width:min(1080px,calc(100vw - 32px));max-width:1080px}
@media(max-width:760px){.projects-grid{grid-template-columns:1fr}.real-shot{height:auto}.shot-action{right:8px;bottom:8px;font-size:11px;padding:5px 9px}.project-info{min-height:0}}

.project-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px}.project-actions a{display:inline-flex;align-items:center;text-decoration:none}
#projectWebsite{margin:0 14px 12px 0}#projectWebsite[hidden]{display:none}

/* Identité BR fournie par Ben : PNG transparent, proportions conservées. */
.logo{display:flex;align-items:center;flex:0 0 auto;letter-spacing:normal}
.brand-mark{display:block;width:48px;height:48px;object-fit:contain}
.about-logo{display:block;width:min(80%,250px);height:auto;object-fit:contain}
.footer-mark img{display:block;width:44px;height:44px;object-fit:contain}
@media(max-width:760px){.brand-mark{width:42px;height:42px}.about-logo{width:min(82%,220px)}}

/* Liens de la presentation : retour a la ligne sur petit ecran. */
.about-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* Language selector remains visible outside the mobile menu. */
.language-link{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid #d6d6d6;border-radius:12px;background:#ffffff70;color:#262626;font-size:12px;font-weight:650;letter-spacing:.02em}
.language-link:hover{background:#fff;border-color:#8d8d8d}
.language-link:focus-visible{outline:2px solid #222;outline-offset:3px}
@media(min-width:761px) and (max-width:1100px){.site-nav .nav-cta{display:none}.site-nav .nav-links{gap:22px}}


/* Compact navigation: the three actions form one group, with fixed gaps. */
.site-nav{justify-content:flex-start;gap:28px}
.site-nav .nav-links{flex:1 1 auto;justify-content:center;min-width:0}
.nav-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.nav-actions .nav-cta{height:44px;min-height:44px;padding:0 18px;font-size:13px;white-space:nowrap;border-radius:12px}
.nav-actions .language-link{height:44px;border-radius:12px}
.nav-actions .motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;min-height:44px;max-width:none;margin:0;padding:0 12px;font-size:12px;white-space:nowrap;border-radius:12px}
.motion-icon{display:block;width:16px;height:16px;flex:0 0 auto}
.motion-icon-play{display:none}
.motion-toggle[aria-pressed="false"] .motion-icon-pause{display:none}
.motion-toggle[aria-pressed="false"] .motion-icon-play{display:block}
@media(min-width:761px) and (max-width:1200px){.site-nav{gap:20px}.site-nav .nav-links{gap:20px}}
@media(max-width:760px){.site-nav{gap:12px;padding:8px 12px}.site-nav .nav-links{justify-content:flex-start}.nav-actions{gap:8px}.nav-actions .motion-toggle{padding:0 10px}.nav-actions .menu-button{width:44px;height:44px;flex:0 0 auto}}
@media(max-width:420px){.nav-actions .motion-toggle{width:44px;min-width:44px;max-width:44px;padding:0}.motion-label{display:none}}