/* Un seul arrondi pour tout le site : 6px (vignettes, portes, fiche, photos, carte). */
/* studiobega.be — mise en page de l'ancien site : une police (Jost), titres gras, phrases courtes
   en colonne centrée, images en grand, grilles d'images. Jaune : le logo et la clé. */
body{margin:0;background:#fff;color:#111;font-family:'Jost',Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid #111;outline-offset:4px}
.page{width:100%;box-sizing:border-box;padding:0 40px 48px}
.wrap{max-width:1200px;margin:0 auto}
.key{background:linear-gradient(transparent 60%,#FFD400 60%);padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6b6b66;font-weight:500}

/* en-tête : le logo à gauche, le menu à droite */
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 0;position:sticky;top:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav .links{display:flex;align-items:baseline;gap:28px;font-size:15px;letter-spacing:.05em;text-transform:uppercase}
.nav .links a.on{font-weight:600}
/* Contact se distingue des trois portes : même voix que la clé, en italique */
.nav .links a.ct{font-family:'Newsreader',Georgia,serif;font-style:italic;text-transform:none;letter-spacing:0;font-size:1.25em;line-height:1;margin-left:10px}
.nav .links a:hover{opacity:.6}
.logo{font-weight:700;font-size:26px;letter-spacing:.04em;line-height:1;display:inline-flex;align-items:flex-end;gap:5px}
.logo .dot{width:9px;height:9px;border-radius:50%;background:#FFD400;display:inline-block;margin-bottom:2px}

/* colonne de texte, comme l'ancien site */
.col{max-width:680px;margin:0 auto}
.col section{margin-top:128px}
.col section:first-child{margin-top:80px}
.h{margin:0 0 26px;font-size:38px;line-height:1.2;font-weight:700;letter-spacing:-.005em}
.col p{margin:0 0 10px;font-size:18px;line-height:1.6}
header.col{padding-top:72px;margin-bottom:72px}
header.col p{max-width:680px}
.col>img{display:block;width:100%;margin-top:128px}
.col img.band{width:100%;margin:96px 0 -24px}
.col img.ill{aspect-ratio:3/2;object-fit:cover;border-radius:6px}
.pills{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:48px}
.pill{display:inline-block;min-width:120px;text-align:center;background:#111;color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;padding:13px 26px;border-radius:999px}
.pill:hover{background:#333}

/* photo entière, plus large que la colonne */
.col>img.wide{width:100%;height:auto;border-radius:6px}

/* les trois portes en bas de l'accueil : une image chacune, côte à côte, plus large que la colonne */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:104px 0 0}
.door{display:flex;flex-direction:column;gap:6px}
.door .im{display:block;overflow:hidden;border-radius:6px;background:#e9e8e3;margin-bottom:10px}
.door .im img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.door .dn{font-size:17px;font-weight:600}
.door .ar{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.door .dt{font-size:13px;line-height:1.45;color:#6b6b66}
@media (hover:hover){.door:hover .im img{transform:scale(1.04)}.door:hover .ar{transform:translateX(6px)}.doors:hover .door:not(:hover) .im img{opacity:.75}.door .im img{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .4s}}
@media (max-width:640px){.doors{grid-template-columns:1fr;gap:32px;margin-top:72px}.door .im img{aspect-ratio:3/2}}

/* menu téléphone */
.burger{display:none}
.mnav{display:none}
@media (max-width:760px){
 .nav .links{display:none}
 .burger{all:unset;display:flex;flex-direction:column;justify-content:center;gap:6px;width:30px;height:30px;cursor:pointer}
 .burger span{display:block;height:2px;background:currentColor;border-radius:1px}
 .hero .burger{color:#fff}
 .mnav{display:flex;position:fixed;inset:0;z-index:40;background:#fff;align-items:flex-start;justify-content:center;padding-top:22vh;opacity:0;pointer-events:none;transition:opacity .3s}
 .mnav.on{opacity:1;pointer-events:auto}
 .mnav nav{display:flex;flex-direction:column;align-items:center;gap:30px}
 .mnav a{font-size:24px;letter-spacing:.04em;text-transform:uppercase;color:#111}
 .mnav a.on{font-weight:700}
 .mnav a.ct{font-family:'Newsreader',Georgia,serif;font-style:italic;text-transform:none;letter-spacing:0;font-size:28px}
 .mnav-x{all:unset;position:absolute;top:18px;right:20px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:300;line-height:1;cursor:pointer;color:#111}
}

.col .ex{display:block;margin:72px -48px 24px 48px;color:inherit;text-decoration:none}
.col .exk{display:block;font-style:italic;font-size:24px;line-height:1.35;font-weight:500}
.col .ex .cm{display:block;margin-top:12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a8a85}
/* pied */
.foot{margin-top:120px;padding-top:24px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;color:#444;text-align:center}
.foot .grp{display:flex;gap:20px;text-transform:uppercase;letter-spacing:.06em}
.foot a:hover{color:#111}

/* accueil : le rideau (la photo) se lève sur la page */
.hero{position:fixed;inset:0;z-index:20;overflow:hidden;background:#2a2a28;color:#fff;transition:transform .85s cubic-bezier(.76,0,.24,1);touch-action:none}
.hero.up{transform:translateY(-100%);pointer-events:none}
.hero.now{transition:none}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 40%;animation:bega-zoom 26s ease-out forwards}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,19,.40) 0%,rgba(20,20,19,.10) 28%,rgba(20,20,19,.10) 48%,rgba(20,20,19,.70) 100%)}
.hero .go{all:unset;position:absolute;inset:0;z-index:1;cursor:pointer}
.hero .nav{position:absolute;top:0;left:0;right:0;padding:26px 40px;z-index:3;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero .txt{position:absolute;z-index:2;pointer-events:none;left:0;right:0;bottom:0;padding:0 max(40px,7vw) max(64px,11vh);display:flex;flex-direction:column;gap:6px}
/* le rideau : BEGA et deux phrases, même voix, aucun titre */
.hero h1,.hero p{margin:0;font-size:38px;line-height:1.2;font-weight:700;letter-spacing:-.005em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 28px rgba(0,0,0,.45);animation:bega-rise 1.4s ease-out .5s both}
.hero p{animation-delay:1.1s}
.site.locked{height:100vh;overflow:hidden}
html:has(.site.locked){overflow:hidden}
#studio{scroll-margin-top:110px}
@keyframes bega-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes bega-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* portes : la grille d'images */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.card{display:block;position:relative}
.card .im{display:block;overflow:hidden;border-radius:6px;background:#e9e8e3}
.card .im img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card .cap{display:flex;flex-direction:column;gap:4px;padding-top:12px}
.card .nm{font-size:16px;line-height:1.35;font-weight:500}
.card .cm{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a8a85}
@media (hover:hover){.card:hover .im img{transform:scale(1.03)}.card:hover .nm{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}}


/* fiche : une fenêtre posée devant la page */
html.lock{overflow:hidden}
.modal{position:fixed;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;padding:5vh 5vw;background:rgba(250,250,248,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .4s ease}
.modal.on{opacity:1;pointer-events:auto}
.mbox{position:relative;cursor:pointer;width:min(960px,100%);max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #e6e5e0;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 64px rgba(0,0,0,.08);padding:48px 56px 56px;box-sizing:border-box;transform:translateY(10px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.modal.on .mbox{transform:none}
.fh{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.fh .nm{font-size:28px;line-height:1.2;font-weight:700;margin:0 0 8px}
.fh .meta{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8a8a85}
.fx-x{all:unset;cursor:pointer;flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:300;line-height:1;color:#111;opacity:.55}
.fx-x:hover{opacity:1}
/* contenu de la fiche : trois styles seulement — titre, texte, étiquette ; la clé est le seul accent */
.fcle{margin:40px 0 0;font-style:italic;font-size:24px;line-height:1.35;font-weight:500;max-width:720px}
.mbox .tx{margin-top:36px;max-width:720px}
.mbox dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}
.mbox dl>div{display:flex;flex-direction:column;gap:6px}
.mbox dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8a8a85;font-weight:500}
.mbox dd,.mbox .para{margin:0;font-size:16px;line-height:1.6;color:#222}
.mbox dd .ln{display:block}
.mbox .para{margin-top:28px}
.mbox .links{display:flex;flex-wrap:wrap;gap:20px;margin-top:20px;font-size:14px;color:#6b6b66}
.mbox .links a{border-bottom:1px solid #d9d9d4}
.mbox .pics{display:flex;flex-direction:column;gap:28px;margin-top:48px}
.mbox .pics img{width:100%;height:auto;display:block;border-radius:6px;background:#f2f1ed;cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:30;background:rgba(10,10,10,.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;cursor:zoom-out}
.lb.on{opacity:1;pointer-events:auto}
.lb img{max-width:86vw;max-height:86vh;object-fit:contain;cursor:pointer}
.lb-p,.lb-n{all:unset;position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;line-height:1;cursor:pointer;opacity:.75}
.lb-p:hover,.lb-n:hover{opacity:1}
.lb-p{left:2vw}.lb-n{right:2vw}
.lb.one .lb-p,.lb.one .lb-n{display:none}
.lb-c{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-size:13px;letter-spacing:.08em}

/* contact */
.map{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:6px}
.map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.pin{position:absolute;left:67.6%;top:74.7%;width:4.2%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#FFD400}
.addr{max-width:680px;margin:48px auto 0;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:24px 40px}
.addr div{display:flex;flex-direction:column;gap:6px}
.addr dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8a8a85;font-weight:500}
.addr dd{margin:0;font-size:18px;line-height:1.5;font-weight:500}
.addr a{border-bottom:1px solid #111}

@media (prefers-reduced-motion:reduce){.hero img.bg,.hero h1,.hero p{animation:none}.mbox{transition:none}.card .im img{transition:none}}

@media (max-width:900px){
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nav .links{gap:18px;font-size:15px}
}
@media (max-width:640px){
 .page{padding:0 20px 40px}
 .nav{padding:16px 0}
 .logo{font-size:21px}.logo .dot{width:8px;height:8px}
 .hero .nav{padding:16px 20px}
 .hero .txt{padding:0 28px 76px;gap:4px}
 .hero h1,.hero p{font-size:28px}
 .h{font-size:28px;margin-bottom:18px}
 .col section{margin-top:88px}.col section:first-child{margin-top:48px}
 .col p{font-size:17px}
 .col .ex{margin:48px 0 12px 20px}
 .col>img{margin-top:64px}
 header.col{padding-top:40px;margin-bottom:40px}
 .grid{grid-template-columns:1fr;gap:32px}
 .modal{padding:0;align-items:flex-end}
 .mbox{border-radius:6px 6px 0 0;border-bottom:0;max-height:94vh;padding:22px 20px 40px}
 .fh .nm{font-size:22px}
 .fcle{font-size:20px;margin-top:28px}
 .mbox dl{grid-template-columns:1fr;gap:18px}
 .mbox .pics{gap:16px;margin-top:32px}
 .addr{grid-template-columns:1fr;gap:20px}
 .foot{margin-top:80px}
}