/* Studio Galyos — finition « haut de gamme » commune à toutes les pages intérieures */
:root{--brass:#a8955c; --brass-l:#bba777; --brass-ll:#d6c9a4; --cream:#f3e9dd; --brown:#1b1210}

/* ── rideau d'entrée : deux volets crème / brun qui s'ouvrent ── */
html::before,html::after{content:""; position:fixed; left:0; right:0; z-index:99998; pointer-events:none; height:50.2%; will-change:transform}
html::before{top:0; background:var(--cream); animation:pcUp 1.15s cubic-bezier(.77,0,.18,1) .12s forwards}
html::after{bottom:0; background:var(--brown); animation:pcDown 1.15s cubic-bezier(.77,0,.18,1) .12s forwards}
@keyframes pcUp{to{transform:translateY(-101%)}} @keyframes pcDown{to{transform:translateY(101%)}}
html.pc-out::before{animation:pcUpIn .7s cubic-bezier(.77,0,.18,1) forwards; transform:translateY(-101%)}
html.pc-out::after{animation:pcDownIn .7s cubic-bezier(.77,0,.18,1) forwards; transform:translateY(101%)}
@keyframes pcUpIn{from{transform:translateY(-101%)} to{transform:none}} @keyframes pcDownIn{from{transform:translateY(101%)} to{transform:none}}
@media (prefers-reduced-motion:reduce){ html::before,html::after{display:none} }

/* ── très grands titres : crème, blanc et laiton, grain léger ── */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .66 0 0 0 0 .58 0 0 0 0 .36 0 0 0 .95 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
[data-zone="dark"] .h-title .wr-w,[data-zone="dark"] .statement .wr-w,.cta-title .wr-w,.hero-copy .h-title .wr-w{background:var(--grain),linear-gradient(100deg,#fffdf8 0%,#f3e9dd 35%,#d6c9a4 70%,#fff8ec 100%); background-attachment:fixed; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
[data-zone="dark"] .h-title em .wr-w,[data-zone="dark"] .statement em .wr-w,[data-zone="dark"] .statement .o .wr-w,.cta-title em .wr-w,.hero-copy .h-title em .wr-w,[data-zone="dark"] .h-title .o .wr-w{background:var(--grain),linear-gradient(100deg,#bba777 0%,#d6c9a4 45%,#a8955c 100%); background-attachment:fixed; -webkit-background-clip:text; background-clip:text}
[data-zone="light"] .h-title em .wr-w,[data-zone="light"] .statement .o .wr-w,[data-zone="light"] .h-sub em .wr-w{background:var(--grain),linear-gradient(100deg,#8f7d48,#a8955c 50%,#bba777); background-attachment:fixed; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}

/* ── apparition : volets qui glissent, comme un slider ── */
.fade{opacity:1 !important; transform:none !important; clip-path:inset(0 100% 0 0); transition:clip-path 1.3s cubic-bezier(.77,0,.18,1) !important}
.fade.in{clip-path:inset(0 0 0 0)}
.fade:nth-child(even){clip-path:inset(0 0 0 100%)}
.tile.fade{clip-path:inset(100% 0 0 0)} .tile.fade:nth-child(even){clip-path:inset(100% 0 0 0)}
.tile.fade.in,.fade:nth-child(even).in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){ .fade{clip-path:none !important} }

/* ── mosaïques : trame asymétrique, décalée, avec parallaxe interne ── */
.tiles{align-items:stretch; padding-bottom:clamp(40px,7vw,110px)}
.tiles--mos .tile:nth-child(even){margin-top:clamp(36px,7vw,110px); margin-bottom:calc(-1 * clamp(36px,7vw,110px))}
.tiles--tri .tile:nth-child(2){margin-top:clamp(36px,6vw,96px); margin-bottom:calc(-1 * clamp(36px,6vw,96px))}
.tile{--py:0px}
.tile>img{height:122%; top:-11%; inset:auto 0 auto 0; transform:translate3d(0,var(--py),0) scale(1.02); will-change:transform; transition:filter .8s}
.tile:hover>img{transform:translate3d(0,var(--py),0) scale(1.08)}
.tile .no{font-size:clamp(2.4rem,5vw,5rem) !important; color:rgba(255,246,234,.9) !important; text-shadow:none; mix-blend-mode:difference}
.tile::after{background:linear-gradient(0deg,rgba(24,14,11,.86) 0%,rgba(24,14,11,.2) 52%,transparent 80%)}
.tile::before{content:""; position:absolute; inset:clamp(10px,1.2vw,18px); z-index:3; border:1px solid rgba(214,201,164,.0); transition:border-color .6s, inset .8s cubic-bezier(.16,1,.3,1); pointer-events:none}
.tile:hover::before{border-color:rgba(214,201,164,.7); inset:clamp(16px,1.8vw,26px)}
.tile .cap b{font-size:clamp(1.5rem,2.8vw,2.7rem) !important; letter-spacing:.01em}

/* ── hero : indication de défilement, très discrète ── */
.scroll-hint{width:clamp(96px,8vw,120px) !important; height:clamp(36px,3.2vw,46px) !important; bottom:0 !important; border-radius:999px 999px 0 0 !important; border:1px solid rgba(255,246,234,.28) !important; border-bottom:0 !important; background:transparent !important;
  -webkit-backdrop-filter:none; backdrop-filter:none; transform-origin:50% 100%; transition:transform .8s cubic-bezier(.16,1,.3,1), border-color .6s !important; align-content:end; padding-bottom:8px; overflow:hidden; box-shadow:none !important; opacity:.85}
.scroll-hint svg{display:none}
.scroll-hint::after{content:"Découvrir"; font-family:'Aboreto',serif; font-size:.5rem; letter-spacing:.4em; padding-left:.4em; text-transform:uppercase; color:rgba(255,246,234,.75)}
.scroll-hint::before{content:none}
.scroll-hint:hover{transform:translateX(-50%) scale(1.1) !important; border-color:rgba(255,246,234,.6) !important; opacity:1}

/* ── hero : profondeur au scroll ── */
.hero-ph{will-change:transform}
.hero-copy{will-change:transform,opacity}

/* ── points de navigation ── */
.sec-dots{position:fixed; right:clamp(12px,1.8vw,26px); top:50%; transform:translateY(-50%); z-index:850; display:flex; flex-direction:column; gap:15px; mix-blend-mode:difference}
.sec-dots a{display:block; width:7px; height:7px; border-radius:50%; background:#fff; opacity:.38; transition:opacity .4s, transform .5s cubic-bezier(.16,1,.3,1)}
.sec-dots a.on{opacity:1; transform:scale(1.7)}
@media (max-width:900px){ .sec-dots{display:none} }

/* ── boutons : angles droits, filet laiton ── */
.btn{border-radius:0 !important; letter-spacing:.2em}