/* ============================================================ B&A Construction — Styles spécifiques : index.php Nécessite base.css (variables, reset, nav, boutons) ============================================================ */
/* ── PAGE VIEWS ── */
 .page{
     display:none 
}
 .page.active{
     display:block 
}
 section[id]{
     scroll-margin-top:80px 
}
 .nav-logo-img{
     width:46px;
     height:46px;
     border-radius:50%;
     object-fit:cover;
     background:var(--accent);
     display:flex;
     align-items:center;
     justify-content:center;
     font-family:'Playfair Display',serif;
     font-weight:900;
     color:#fff;
     font-size:1rem;
     flex-shrink:0 
}
/* Gallery back link */
 .nav-back{
     display:flex;
     align-items:center;
     gap:8px;
     text-decoration:none;
     color:var(--sand);
     font-size:.76rem;
     font-weight:500;
     letter-spacing:.12em;
     text-transform:uppercase;
     transition:color .25s;
     cursor:pointer;
     background:none;
     border:none;
}
 .nav-back:hover{
     color:var(--accent) 
}
 .nav-back svg{
     width:14px;
     height:14px;
     stroke:currentColor;
     fill:none;
     stroke-width:2;
     stroke-linecap:round;
     stroke-linejoin:round 
}
/* ── HERO ── */
 .hero{
     position:relative;
     height:100vh;
     min-height:600px;
     display:flex;
     align-items:center;
     justify-content:center;
     text-align:center;
     overflow:hidden 
}
 .hero-bg{
     position:absolute;
     inset:0;
     background-size:cover;
     background-position:center;
     animation:hZoom 16s ease-in-out infinite alternate;
     background-color:var(--dark-brown) 
}
 @keyframes hZoom{
     from{
         transform:scale(1.03) 
    }
     to{
         transform:scale(1.1) 
    }
}
 .hero-overlay{
     position:absolute;
     inset:0;
     background:linear-gradient(180deg,rgba(26,18,10,.5) 0%,rgba(26,18,10,.35) 40%,rgba(26,18,10,.78) 100%) 
}
 .hero-content{
     position:relative;
     z-index:2;
     display:flex;
     flex-direction:column;
     align-items:center;
     gap:18px;
     animation:fadeUp 1.2s ease both 
}
 @keyframes fadeUp{
     from{
         opacity:0;
         transform:translateY(34px) 
    }
     to{
         opacity:1;
         transform:none 
    }
}
 .hero-logo-circle{
     width:96px;
     height:96px;
     border-radius:50%;
     background:var(--accent);
     display:flex;
     align-items:center;
     justify-content:center;
     font-family:'Playfair Display',serif;
     font-weight:900;
     color:#fff;
     font-size:2rem;
     box-shadow:0 0 40px rgba(196,148,74,.45) 
}
 .hero-logo{
     width:96px;
     height:96px;
     border-radius:50%;
     border:none solid var(--accent);
     box-shadow:0 0 40px rgba(196,148,74,.45);
     object-fit:cover 
}
 .hero-eyebrow{
     font-size:.75rem;
     letter-spacing:.26em;
     text-transform:uppercase;
     color:var(--sand);
     font-weight:600 
}
 .hero h1{
     font-family:'Playfair Display',serif;
     font-size:clamp(2.8rem,6.5vw,5.5rem);
     font-weight:900;
     line-height:1.05;
     color:var(--sand);
     text-shadow:0 4px 30px rgba(0,0,0,.55) 
}
 .hero h1 em{
     font-style:normal;
     color:var(--accent) 
}
 .hero-sub{
     font-size:clamp(.9rem,1.8vw,1.1rem);
     color:var(--sand);
     font-weight:300;
     letter-spacing:.05em;
     max-width:520px 
}
 .hero-names{
     font-size:.75rem;
     letter-spacing:.2em;
     text-transform:uppercase;
     color:rgba(232,220,200,.65) 
}
 .hero-cta{
     margin-top:6px;
     display:flex;
     gap:14px;
     flex-wrap:wrap;
     justify-content:center 
}
 .btn-outline{
     padding:13px 36px;
     background:transparent;
     color:#fff;
     border:2px solid rgba(255,255,255,.5);
     cursor:pointer;
     font-family:'Raleway',sans-serif;
     font-size:.8rem;
     font-weight:600;
     letter-spacing:.14em;
     text-transform:uppercase;
     text-decoration:none;
     transition:border-color .25s,color .25s,transform .2s;
     display:inline-block 
}
 .btn-outline:hover{
     border-color:var(--accent);
     color:var(--accent);
     transform:translateY(-2px) 
}
 .scroll-hint{
     position:absolute;
     bottom:28px;
     left:50%;
     transform:translateX(-50%);
     z-index:2;
     display:flex;
     flex-direction:column;
     align-items:center;
     gap:6px;
     opacity:.6 
}
 .scroll-hint span{
     font-size:.62rem;
     letter-spacing:.2em;
     text-transform:uppercase;
     color:var(--sand) 
}
 .scroll-line{
     width:1px;
     height:44px;
     background:var(--accent);
     animation:sLine 2s ease-in-out infinite 
}
 @keyframes sLine{
     0%,100%{
         opacity:.3;
         transform:scaleY(.4) 
    }
     50%{
         opacity:1;
         transform:scaleY(1) 
    }
}
/* ── SECTIONS ── */
 section{
     padding:90px 5% 
}
/* ── SERVICES ── */
 #services{
     background:var(--dark-brown) 
}
 #services .section-title{
     color:var(--sand) 
}
 .services-intro{
     color:rgba(232,220,200,.65);
     font-size:.97rem;
     line-height:1.85;
     max-width:540px;
     margin-bottom:52px 
}
 .services-grid{
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
     gap:2px 
}
 .service-card{
     background:rgba(255,255,255,.04);
     border:1px solid rgba(196,148,74,.18);
     padding:38px 30px;
     transition:background .3s,transform .3s 
}
 .service-card:hover{
     background:rgba(196,148,74,.1);
     transform:translateY(-4px) 
}
 .service-icon{
     font-size:1.9rem;
     margin-bottom:16px 
}
 .service-card h3{
     font-family:'Playfair Display',serif;
     font-size:1.15rem;
     font-weight:700;
     color:var(--sand);
     margin-bottom:10px 
}
 .service-card p{
     font-size:.86rem;
     line-height:1.78;
     color:rgba(232,220,200,.7) 
}
 .service-card.is-link{
     cursor:pointer;
     position:relative 
}
/* Le libellé devient un vrai "bouton" qui apparaît */
 .service-card.is-link::after{
     content:"Voir les réalisations";
     display:inline-block;
     margin-top:16px;
     padding:8px 18px;
     border:1px solid var(--accent);
     font-size:.72rem;
     font-weight:700;
     letter-spacing:.12em;
     text-transform:uppercase;
     color:var(--accent);
     opacity:0;
     transform:translateY(8px);
     transition:opacity .3s ease,transform .3s ease,background .25s,color .25s;
}
 .service-card.is-link.is-hover::after, .service-card.is-link.is-revealed::after{
     opacity:1;
     transform:none;
     background:var(--accent);
     color:#fff;
    /* pastille pleine = appel à l'action */
}
/* Mise en évidence de la carte sélectionnée au 1er tap (mobile) */
 .service-card.is-link.is-revealed{
     background:rgba(196,148,74,.12);
     border-color:var(--accent);
     transform:translateY(-4px);
     animation:cardPulse .6s ease-out;
}
 @keyframes cardPulse{
     0% {
         box-shadow:0 0 0 0 rgba(196,148,74,.45) 
    }
     100%{
         box-shadow:0 0 0 16px rgba(196,148,74,0) 
    }
}
 @media(prefers-reduced-motion:reduce){
     .service-card.is-link.is-revealed{
         animation:none 
    }
     .service-card.is-link::after{
         transition:opacity .2s 
    }
}
/* ── HAUT DE GAMME (teaser accueil) ── */
 #hautdegamme{
     background:var(--cream) 
}
 .hdg-intro{
     color:var(--dark-brown);
     font-size:.97rem;
     line-height:1.85;
     max-width:540px;
     margin-bottom:48px 
}
 .hdg-grid{
     display:grid;
     grid-template-columns:repeat(3,1fr);
     gap:24px 
}
 .hdg-card{
     display:block;
     text-decoration:none;
     position:relative;
     aspect-ratio:3/4;
     overflow:hidden;
     border:1px solid rgba(196,148,74,.2) 
}
 .hdg-card img{
     width:100%;
     height:100%;
     object-fit:cover;
     display:block;
     filter:sepia(10%) contrast(1.05);
     transition:transform .55s cubic-bezier(.25,.46,.45,.94) 
}
 .hdg-card:hover img{
     transform:scale(1.08) 
}
 .hdg-overlay{
     position:absolute;
     inset:0;
     background:linear-gradient(180deg,rgba(26,18,10,0) 30%,rgba(26,18,10,.92) 100%);
     display:flex;
     flex-direction:column;
     justify-content:flex-end;
     padding:26px 22px 
}
 .hdg-card h3{
     font-family:'Playfair Display',serif;
     font-size:1.3rem;
     font-weight:700;
     color:var(--sand);
     margin-bottom:8px 
}
 .hdg-card p{
     font-size:.82rem;
     line-height:1.6;
     color:rgba(232,220,200,.7);
     margin-bottom:14px 
}
 .hdg-cta{
     font-size:.7rem;
     font-weight:700;
     letter-spacing:.14em;
     text-transform:uppercase;
     color:var(--accent);
     display:inline-flex;
     align-items:center;
     gap:8px 
}
 .hdg-card:hover .hdg-cta{
     color:#e0ac5f 
}
 @media(max-width:900px){
     .hdg-grid{
         grid-template-columns:1fr;
         gap:16px 
    }
     .hdg-card{
         aspect-ratio:16/10 
    }
}
/* ── GALLERY PREVIEW ── */
 #realisations{
     background:var(--sand) 
}
 .gallery-link-banner{
     display:flex;
     flex-direction:column;
     align-items:flex-start;
     gap:4px;
     margin-top:36px;
     margin-bottom:20px;
     padding:18px 28px;
     border:1px solid rgba(196,148,74,.4);
     background:var(--accent);
     text-decoration:none;
     transition:background .25s,border-color .25s,transform .2s;
     max-width:420px;
     cursor:pointer;
}
 .gallery-link-banner:hover{
     background:#a87836;
     border-color:var(--accent);
     transform:translateX(4px) 
}
 .gallery-preview .gallery-item{
     aspect-ratio:4/3 
}
 .gallery-item{
     overflow:hidden;
     position:relative;
     cursor:pointer 
}
 .gallery-caption em{
     font-style:normal;
     font-size:.65rem;
     letter-spacing:.08em;
     color:var(--accent);
     text-transform:uppercase 
}
/* ── VIGNETTE → GALERIE (overlay + bouton dédié) ── PC : le bouton apparaît au survol (CSS :hover). Mobile : le bouton apparaît au 1er tap (classe .is-revealed posée en JS). L'overlay reste pointer-events:none (purement visuel) ;
 seul le BOUTON est cliquable une fois visible → un tap "à côté" ne déclenche rien. */
 .gallery-preview .gallery-item{
     position:relative 
}
 .preview-overlay{
     position:absolute;
     inset:0;
     z-index:3;
     pointer-events:none;
     display:flex;
     align-items:center;
     justify-content:center;
     padding:16px;
     background:linear-gradient(180deg,rgba(26,18,10,.30) 0%,rgba(26,18,10,.62) 100%);
     opacity:0;
     transition:opacity .35s ease;
}
 .preview-cta{
     pointer-events:none;
     appearance:none;
     cursor:pointer;
     font-family:'Raleway',sans-serif;
     font-size:.78rem;
     font-weight:600;
     letter-spacing:.14em;
     text-transform:uppercase;
     display:inline-flex;
     align-items:center;
     gap:9px;
     padding:13px 28px;
     border:none;
     background:var(--accent);
     color:#fff;
     box-shadow:0 12px 32px rgba(0,0,0,.42);
     transform:translateY(12px);
     transition:transform .35s cubic-bezier(.16,.84,.44,1),background .25s;
}
 .preview-cta .arrow{
     transition:transform .25s cubic-bezier(.16,.84,.44,1) 
}
 .preview-cta:hover{
     background:#a87836 
}
 .preview-cta:hover .arrow{
     transform:translateX(4px) 
}
/* Révélation pilotée en JS pour être fiable partout : .is-hover → survol souris (pointerenter, hors tactile) .is-revealed → tap tactile (touchend) On n'utilise PAS le :hover CSS ici : sur mobile il déclenche le « 1er tap = survol » qui avale le clic. */
 .gallery-preview .gallery-item.is-hover .preview-overlay, .gallery-preview .gallery-item.is-revealed .preview-overlay{
     opacity:1 
}
 .gallery-preview .gallery-item.is-hover .preview-cta, .gallery-preview .gallery-item.is-revealed .preview-cta{
     transform:none;
     pointer-events:auto 
}
 .gallery-preview .gallery-item.is-hover img, .gallery-preview .gallery-item.is-revealed img{
     transform:scale(1.07) 
}
 .gallery-preview .gallery-item.is-hover .gallery-caption, .gallery-preview .gallery-item.is-revealed .gallery-caption{
     opacity:1 
}
 @media(prefers-reduced-motion:reduce){
     .preview-overlay,.preview-cta,.preview-cta .arrow{
         transition:none 
    }
     .preview-cta{
         transform:none 
    }
}
/* Photo placeholder (quand pas d'image réelle) */
 .photo-placeholder{
     width:100%;
     height:100%;
     background:linear-gradient(135deg,var(--dark-brown) 0%,var(--brown) 100%);
     display:flex;
     align-items:center;
     justify-content:center;
     flex-direction:column;
     gap:8px;
     color:rgba(232,220,200,.4);
     font-size:.7rem;
     letter-spacing:.12em;
     text-transform:uppercase 
}
 .photo-placeholder svg{
     width:36px;
     height:36px;
     opacity:.4;
     stroke:currentColor;
     fill:none;
     stroke-width:1.5 
}
/* ── PROCESS ── */
 #process{
     background:var(--dark-brown) 
}
 .process-steps{
     margin-top:52px;
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) 
}
 .process-step{
     padding:38px 28px;
     border-left:1px solid var(--brown);
     position:relative 
}
 #process .section-title{
     color:var(--sand) 
}
 .step-num{
     font-family:'Playfair Display',serif;
     font-size:3.8rem;
     font-weight:900;
     line-height:1;
     color:rgba(122,92,62,.5);
     position:absolute;
     top:22px;
     right:18px 
}
 .process-step h3{
     font-family:'Playfair Display',serif;
     font-size:1.1rem;
     font-weight:700;
     color:var(--sand);
     margin-bottom:10px 
}
 .process-step p{
     font-size:.85rem;
     line-height:1.78;
     color:var(--sand) 
}
/* ── ABOUT ── */
 #about{
     background:var(--cream);
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:80px;
     align-items:center 
}
 .about-img-wrap{
     position:relative 
}
 .about-img-wrap img{
     width:100%;
     display:block;
     filter:sepia(15%) contrast(1.05) 
}
 .about-img-placeholder{
     width:100%;
     aspect-ratio:4/3;
     background:linear-gradient(135deg,rgba(61,43,26,.8) 0%,rgba(122,92,62,.6) 100%);
     display:flex;
     align-items:center;
     justify-content:center;
     font-family:'Playfair Display',serif;
     font-size:1.2rem;
     color:rgba(232,220,200,.3);
     letter-spacing:.1em;
     border:1px solid rgba(196,148,74,.15) 
}
 .about-badge{
     position:absolute;
     bottom:-22px;
     right:-22px;
     width:108px;
     height:108px;
     background:var(--accent);
     border-radius:50%;
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     text-align:center 
}
 .about-badge strong{
     font-size:2rem;
     font-weight:900;
     color:#fff;
     line-height:1 
}
 .about-badge span{
     font-size:.58rem;
     letter-spacing:.1em;
     text-transform:uppercase;
     color:rgba(255,255,255,.82) 
}
 .about-names{
     margin-top:30px;
     display:flex;
     gap:28px 
}
 .about-name-card{
     border-left:3px solid var(--brown);
     padding-left:15px 
}
 .about-name-card strong{
     display:block;
     font-size:.98rem;
     color:var(--brown);
     font-family:'Playfair Display',serif 
}
 .about-name-card span{
     font-size:.76rem;
     color:var(--accent);
     letter-spacing:.1em 
}
/* ── STATS ── */
 #stats{
     background:var(--accent);
     padding:65px 5%;
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
     text-align:center 
}
 .stat{
     padding:18px;
     border-right:1px solid rgba(255,255,255,.25) 
}
 .stat:last-child{
     border-right:none 
}
 .stat-num{
     font-family:'Playfair Display',serif;
     font-size:3rem;
     font-weight:900;
     color:#fff;
     line-height:1 
}
 .stat-label{
     font-size:.72rem;
     letter-spacing:.18em;
     text-transform:uppercase;
     color:rgba(255,255,255,.82);
     margin-top:7px 
}
/* ── CONTACT ── */
 #contact{
     background:var(--cream) 
}
 .contact-wrap{
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:80px;
     align-items:start 
}
 .contact-info{
     display:flex;
     flex-direction:column;
     gap:26px;
     margin-top:38px 
}
 .contact-item{
     display:flex;
     gap:16px;
     align-items:flex-start 
}
 .contact-icon{
     font-size:1.3rem;
     margin-top:2px 
}
 .contact-item strong{
     display:block;
     font-size:.7rem;
     letter-spacing:.18em;
     text-transform:uppercase;
     color:var(--accent);
     margin-bottom:4px 
}
 .contact-item p{
     font-size:.93rem;
     color:var(--brown);
     line-height:1.65 
}
 .contact-form{
     display:flex;
     flex-direction:column;
     gap:14px;
     margin-top:38px 
}
 .form-row{
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:14px 
}
 .contact-form input,.contact-form textarea,.contact-form select{
     width:100%;
     padding:13px 17px;
     border:1px solid rgba(122,92,62,.28);
     background:#fff;
     font-family:'Raleway',sans-serif;
     font-size:.88rem;
     color:var(--text);
     outline:none;
     transition:border-color .25s;
     appearance:none 
}
 .form-message{
     padding:13px 17px;
     font-size:.88rem;
     line-height:1.5;
     border-radius:2px;
     display:none;
}
 .form-message.is-visible{
     display:block;
}
 .form-message.is-success{
     background:rgba(196,148,74,.12);
     border:1px solid var(--accent);
     color:var(--dark-brown);
}
 .form-message.is-error{
     background:rgba(179,69,46,.1);
     border:1px solid #b3452e;
     color:#b3452e;
}
 .contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
     border-color:var(--accent) 
}
 .contact-form textarea{
     resize:vertical;
     min-height:120px 
}
/* ── GALERIE PAGE ── */
 .page-header{
     padding:130px 5% 60px;
     background:var(--dark-brown);
     border-bottom:1px solid rgba(196,148,74,.2);
}
 .gallery-section{
     padding:60px 5% 90px 
}
 .gallery-filters{
     display:flex;
     gap:10px;
     flex-wrap:wrap;
     margin-bottom:36px;
     padding-bottom:28px;
     border-bottom:1px solid rgba(122,92,62,.18);
}
 .filter-btn{
     padding:10px 26px;
     background:transparent;
     color:var(--brown);
     border:1px solid rgba(122,92,62,.35);
     cursor:pointer;
     font-family:'Raleway',sans-serif;
     font-size:.74rem;
     font-weight:600;
     letter-spacing:.14em;
     text-transform:uppercase;
     transition:background .22s,color .22s,border-color .22s,transform .18s;
}
 .filter-btn:hover{
     border-color:var(--accent);
     color:var(--accent);
     transform:translateY(-1px) 
}
 .filter-btn.active{
     background:var(--accent);
     color:#fff;
     border-color:var(--accent) 
}
 .gallery-count{
     font-size:.74rem;
     letter-spacing:.12em;
     text-transform:uppercase;
     color:var(--brown);
     opacity:.6;
     margin-bottom:18px 
}
 .gallery-full-grid{
     display:grid;
     grid-template-columns:repeat(3,1fr);
     gap:8px 
}
 .gallery-full-grid .gallery-item{
     aspect-ratio:4/3;
     transition:opacity .35s 
}
 .gallery-full-grid .gallery-item.hidden{
     display:none 
}
 .gallery-empty{
     display:none;
     grid-column:1/-1;
     padding:60px 0;
     text-align:center;
     color:var(--brown);
     font-size:.92rem;
     opacity:.6 
}
/* ── LIGHTBOX MODAL ── */
 #lightbox{
     position:fixed;
     inset:0;
     z-index:999;
     background:rgba(10,6,3,.92);
     backdrop-filter:blur(10px);
     display:flex;
     align-items:center;
     justify-content:center;
     opacity:0;
     pointer-events:none;
     transition:opacity .3s ease;
}
 #lightbox.open{
     opacity:1;
     pointer-events:all 
}
 .lb-stage{
     position:relative;
     width:100%;
     height:100%;
     display:flex;
     align-items:center;
     justify-content:center;
     overflow:hidden;
     cursor:zoom-in;
     touch-action:none;
}
 .lb-stage.zoomed{
     cursor:grab 
}
 .lb-stage.zoomed:active{
     cursor:grabbing 
}
 .lb-img{
     max-width:90vw;
     max-height:85vh;
     object-fit:contain;
     transform-origin:center center;
     transform:scale(1) translate(0,0);
     transition:transform .35s cubic-bezier(.25,.46,.45,.94);
     user-select:none;
     border:1px solid rgba(196,148,74,.15);
     box-shadow:0 30px 80px rgba(0,0,0,.7);
     display:block;
}
 .lb-stage.zoomed .lb-img{
     transition:none 
}
 .lb-placeholder{
     width:min(80vw,700px);
     height:min(70vh,500px);
     background:linear-gradient(135deg,var(--dark-brown),var(--brown));
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     gap:14px;
     color:rgba(232,220,200,.35);
     font-size:.8rem;
     letter-spacing:.14em;
     text-transform:uppercase;
     border:1px solid rgba(196,148,74,.15);
     box-shadow:0 30px 80px rgba(0,0,0,.7);
}
 .lb-placeholder svg{
     width:52px;
     height:52px;
     opacity:.35;
     stroke:currentColor;
     fill:none;
     stroke-width:1.2 
}
 .lb-bar{
     position:fixed;
     bottom:0;
     left:0;
     right:0;
     padding:16px 5%;
     background:linear-gradient(0deg,rgba(10,6,3,.85) 0%,transparent 100%);
     display:flex;
     align-items:center;
     justify-content:space-between;
     z-index:1001;
     pointer-events:none;
     opacity:0;
     transition:opacity .3s;
}
 #lightbox.open .lb-bar{
     opacity:1;
     pointer-events:all 
}
 .lb-caption{
     display:flex;
     flex-direction:column;
     gap:3px 
}
 .lb-caption span{
     font-size:.8rem;
     letter-spacing:.14em;
     text-transform:uppercase;
     color:var(--sand);
     font-weight:500 
}
 .lb-caption em{
     font-style:normal;
     font-size:.68rem;
     letter-spacing:.1em;
     color:var(--accent);
     text-transform:uppercase 
}
 .lb-hint{
     font-size:.65rem;
     letter-spacing:.12em;
     text-transform:uppercase;
     color:rgba(232,220,200,.3) 
}
 .lb-btn{
     position:fixed;
     top:50%;
     transform:translateY(-50%);
     z-index:1001;
     background:rgba(196,148,74,.12);
     border:1px solid rgba(196,148,74,.3);
     color:var(--sand);
     width:48px;
     height:48px;
     display:flex;
     align-items:center;
     justify-content:center;
     cursor:pointer;
     transition:background .2s,border-color .2s,transform .2s;
     font-size:1.2rem;
}
 .lb-btn:hover{
     background:rgba(196,148,74,.3);
     border-color:var(--accent);
     transform:translateY(-50%) scale(1.05) 
}
 #lb-prev{
     left:18px 
}
 #lb-next{
     right:18px 
}
 #lb-close{
     position:fixed;
     top:18px;
     right:22px;
     z-index:1001;
     background:rgba(196,148,74,.12);
     border:1px solid rgba(196,148,74,.3);
     color:var(--sand);
     width:42px;
     height:42px;
     display:flex;
     align-items:center;
     justify-content:center;
     cursor:pointer;
     font-size:1.1rem;
     transition:background .2s,border-color .2s;
}
 #lb-close:hover{
     background:rgba(196,148,74,.3);
     border-color:var(--accent) 
}
 #lb-counter{
     position:fixed;
     top:24px;
     left:50%;
     transform:translateX(-50%);
     z-index:1001;
     font-size:.68rem;
     letter-spacing:.18em;
     text-transform:uppercase;
     color:rgba(232,220,200,.4);
}
 .lb-zoom-hint{
     position:fixed;
     top:22px;
     left:22px;
     z-index:1001;
     font-size:.65rem;
     letter-spacing:.12em;
     text-transform:uppercase;
     color:rgba(232,220,200,.28);
     pointer-events:none;
     display:flex;
     align-items:center;
     gap:6px;
}
 @media(hover:none),(pointer:coarse){
     .lb-zoom-hint{
         display:none 
    }
     .lb-hint{
         display:none 
    }
}
/* ── RESPONSIVE ── */
 @media(max-width:900px){
     #about{
         grid-template-columns:1fr;
         gap:50px 
    }
     .about-badge{
         right:0 
    }
     #caveavin,.detail-section{
         grid-template-columns:1fr;
         gap:50px 
    }
     .caveavin-badge,.detail-badge{
         right:0 
    }
     .contact-wrap{
         grid-template-columns:1fr;
         gap:40px 
    }
     .form-row{
         grid-template-columns:1fr 
    }
     .gallery-grid,.gallery-full-grid{
         grid-template-columns:1fr 1fr 
    }
     .gallery-preview .gallery-item{
         aspect-ratio:4/3 
    }
}
 @media(max-width:560px){
     .gallery-grid,.gallery-full-grid{
         grid-template-columns:1fr 
    }
     .gallery-preview .gallery-item{
         aspect-ratio:16/9 
    }
     .gallery-filters{
         gap:8px 
    }
     .filter-btn{
         padding:9px 18px;
         font-size:.7rem 
    }
}