:root{
  --black:#03090a;
  --turquoise:#00e5d4;
  --turquoise2:#00bfc3;
  --turquoise3:#75fff5;
  --gold:#d1ad62;
  --white:#f8fbfa;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
.access{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;background:#020708 url('../images/famille.jpeg') center/cover no-repeat}
.access:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,10,12,.78),rgba(0,229,212,.18)),rgba(0,8,9,.25)}
.access-box{position:relative;z-index:2;width:min(500px,92vw);padding:52px 44px;text-align:center;background:rgba(1,14,16,.78);border:1px solid var(--turquoise);box-shadow:0 0 60px rgba(0,229,212,.20);backdrop-filter:blur(7px)}
.mini{font-size:10px;letter-spacing:.32em;color:var(--turquoise);font-weight:bold}
.access h1{font-family:Georgia,serif;font-weight:400;font-size:62px;line-height:.82;margin:18px 0 25px}
.access h1 i,.hero h2 i{color:var(--turquoise3);font-weight:400}
.access p{color:#d5e4e3;font-size:13px;margin-bottom:26px}
.code{display:flex;gap:8px}
.code input{flex:1;min-width:0;height:52px;background:rgba(0,0,0,.55);border:1px solid var(--turquoise);color:#fff;text-align:center;font-size:19px;letter-spacing:.45em;outline:none}
.code button{height:52px;padding:0 24px;border:1px solid var(--turquoise);background:var(--turquoise);color:#001313;font-weight:bold;letter-spacing:.15em;cursor:pointer}
#bad{visibility:hidden;color:#ffad9c;font-size:11px;margin-top:12px}
.site{display:none;background:var(--black)}
header{position:fixed;z-index:50;top:0;left:0;right:0;height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(0,8,9,.68);border-bottom:1px solid rgba(0,229,212,.45);backdrop-filter:blur(14px)}
.logo{display:flex;align-items:center;gap:11px}
.logo b{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--turquoise);color:var(--turquoise);font:24px Georgia,serif}
.logo span{font:18px Georgia,serif;line-height:.9}
.logo small{font:8px Arial,sans-serif;letter-spacing:.28em;color:var(--turquoise)}
nav{display:flex;gap:32px;text-transform:uppercase;font-size:10px;letter-spacing:.22em}
nav a{color:#fff} nav a:hover{color:var(--turquoise)}
.hero{height:100vh;min-height:650px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:0 8vw 11vh}
.hero-photo{
 position:absolute;inset:-9%;
 background:url('../images/famille.jpeg') center 38%/cover no-repeat;
 animation:cinematicPhoto 18s cubic-bezier(.42,0,.58,1) infinite alternate;
 transform-origin:center center;
 filter:saturate(1.08) contrast(1.04) brightness(.92);
 will-change:transform,filter;
}
.hero-photo:after{
 content:"";position:absolute;inset:0;
 background:radial-gradient(circle at 70% 38%,rgba(0,229,212,.24),transparent 34%),
            linear-gradient(115deg,rgba(0,229,212,.18),transparent 34%,rgba(209,173,98,.12) 76%,transparent);
 mix-blend-mode:screen;
 animation:lightSweep 11s ease-in-out infinite alternate;
}
.hero-overlay{
 position:absolute;inset:0;
 background:
   radial-gradient(circle at 72% 38%,rgba(0,229,212,.18),transparent 27%),
   linear-gradient(90deg,rgba(0,5,7,.72) 0%,rgba(0,35,37,.22) 48%,rgba(0,8,9,.03) 100%),
   linear-gradient(0deg,rgba(0,3,5,.88),transparent 55%);
}
.hero:after{
 content:"";position:absolute;inset:0;pointer-events:none;
 box-shadow:inset 0 0 150px rgba(0,0,0,.48);
 border:1px solid rgba(0,229,212,.16);
}
.hero-content{position:relative;z-index:2;max-width:650px}
.hero h2{font:500 clamp(72px,10vw,145px)/.76 Georgia,serif;margin:22px 0 30px;letter-spacing:-.05em}
.hero p{font-size:14px;line-height:1.8;max-width:470px}
.button{display:inline-block;margin-top:18px;padding:16px 23px;border:1px solid var(--turquoise);color:var(--turquoise3);font-size:10px;letter-spacing:.18em}
.button:hover{background:var(--turquoise);color:#001313}
.section{padding:110px 7vw}
.film{background:#041719;border-top:1px solid rgba(0,229,212,.15)}
.photos{background:#020708}
.section h3{font:500 clamp(46px,6vw,78px)/.9 Georgia,serif;margin:14px 0}
.intro{color:#b8c9c8}
.video{padding:7px;background:linear-gradient(135deg,var(--turquoise),var(--gold));margin-top:38px}
.video video{display:block;width:100%;background:#000}
.photo-large{max-width:1100px;margin-top:35px;border:1px solid rgba(0,229,212,.55);padding:5px;background:#001416}
.photo-large img{display:block;width:100%;height:auto}
footer{padding:28px 7vw;border-top:1px solid rgba(0,229,212,.3);font-size:9px;letter-spacing:.18em;color:var(--turquoise);text-align:center}
@keyframes cinematicPhoto{
 0%{transform:scale(1.03) translate3d(-1.2%,.4%,0);filter:saturate(1.02) contrast(1.02) brightness(.88)}
 50%{transform:scale(1.09) translate3d(0,-.8%,0);filter:saturate(1.14) contrast(1.06) brightness(.96)}
 100%{transform:scale(1.13) translate3d(1.2%,-1.4%,0);filter:saturate(1.08) contrast(1.08) brightness(.92)}
}
@keyframes lightSweep{
 0%{opacity:.25;transform:translateX(-3%) scale(1)}
 50%{opacity:.65}
 100%{opacity:.3;transform:translateX(3%) scale(1.04)}
}
@media(max-width:700px){
 header{height:70px;padding:0 18px}nav{gap:16px}
 .hero{padding:0 24px 70px;min-height:720px}
 .hero h2{font-size:74px}
 .section{padding:75px 22px}
 .access-box{padding:40px 22px}.access h1{font-size:48px}
 .code{flex-direction:column}.code button{width:100%}
}

.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.gallery-item{padding:0;border:1px solid rgba(0,229,212,.28);background:#061719;aspect-ratio:4/3;overflow:hidden;cursor:pointer;position:relative}
.gallery-item:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,229,212,.18),transparent 45%);opacity:0;transition:.35s}
.gallery-item:hover:after{opacity:1}
.gallery-item img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .7s ease,filter .5s ease}
.gallery-item:hover img{transform:scale(1.06);filter:saturate(1.12)}
.gallery-empty{margin-top:38px;padding:55px 30px;text-align:center;border:1px dashed rgba(0,229,212,.38);background:rgba(0,229,212,.035)}
.gallery-empty span{display:block;color:var(--turquoise);font-size:25px;margin-bottom:12px}
.gallery-empty strong{font:400 32px Georgia,serif}
.gallery-empty p{color:#9fb5b4;font-size:12px}
.gallery-empty code{color:var(--turquoise3)}
.lightbox{position:fixed;inset:0;z-index:10000;background:rgba(0,5,6,.94);display:none;align-items:center;justify-content:center;padding:40px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 0 80px rgba(0,229,212,.18);border:1px solid rgba(0,229,212,.45)}
#lightbox-close{position:absolute;right:25px;top:18px;background:none;border:0;color:var(--turquoise3);font-size:42px;line-height:1;cursor:pointer}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:9px}.lightbox{padding:18px}}