/*
Theme Name:   Beron Gallery Rail (Blocksy child)
Theme URI:    https://berongallery.com
Description:  Thème enfant de Blocksy pour berongallery.com. Direction "Rail vertical" : colonne latérale en motif, fond noir, jaune acide, mosaïque d'œuvres séparée par des bandeaux de motif.
Author:       Beron Gallery
Template:     blocksy
Version:      1.0.0
Text Domain:  beron-gallery-rail
*/

:root{
  --bg-yellow:#D4E600;
  --bg-black:#0d0d0d;
  --bg-ink:#111111;
  --bg-white:#F5F3EA;
  --bg-grey:#2a2a28;
  --bg-font-title:'Syne',system-ui,sans-serif;
  --bg-font-body:'Space Grotesk',system-ui,sans-serif;
  --bg-rail-w:110px;
  --bg-strip-a:url(assets/img/motif-strip-a.jpg);
  --bg-strip-b:url(assets/img/motif-strip-b.jpg);
  --bg-mask:url(assets/img/motif-lines-mask.png);
}

/* Palette Blocksy : noir et jaune */
body{
  --theme-palette-color-1:#D4E600;
  --theme-palette-color-2:#B9C700;
  --theme-palette-color-3:#F5F3EA;
  --theme-palette-color-4:#D4E600;
  --theme-palette-color-5:#333333;
  --theme-palette-color-6:#1b1b1a;
  --theme-palette-color-7:#111111;
  --theme-palette-color-8:#0d0d0d;
  --theme-text-color:#F5F3EA;
  --theme-headings-color:#D4E600;
  --theme-link-initial-color:#D4E600;
  --theme-link-hover-color:#F5F3EA;
  --theme-font-family:var(--bg-font-body);
  padding-left:var(--bg-rail-w);
  color:var(--bg-white);
  font-family:var(--bg-font-body);
}
html{background:var(--bg-black)!important}
body,#main-container,#main,.site-main,.ct-container,[data-prefix] .entry-content{background:transparent!important}
h1,h2,h3,h4,.entry-title{font-family:var(--bg-font-title);color:var(--bg-yellow);font-weight:800;letter-spacing:-.01em}
a{color:var(--bg-yellow)}
a:hover{color:var(--bg-white)}

/* ---------- RAIL VERTICAL (permanent) ---------- */
.bg-rail{
  position:fixed;top:var(--wp-admin--admin-bar--height,0px);left:0;bottom:0;width:var(--bg-rail-w);z-index:9999;
  background:url(assets/img/rail.jpg) center/cover no-repeat var(--bg-yellow);
  border-right:3px solid var(--bg-yellow);display:block;text-decoration:none}
.bg-rail__label{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;font:800 12px var(--bg-font-title);letter-spacing:.3em;text-transform:uppercase;
  color:var(--bg-ink);background:var(--bg-yellow);padding:12px 5px;max-height:calc(100% - 32px);overflow:hidden;white-space:nowrap}

/* ---------- TRAME DE TRAITS EN FOND ---------- */
body::before{
  content:"";position:fixed;top:0;bottom:0;left:var(--bg-rail-w);right:0;z-index:0;pointer-events:none;
  background:var(--bg-yellow);opacity:.07;
  -webkit-mask:var(--bg-mask) center top/cover no-repeat;mask:var(--bg-mask) center top/cover no-repeat}
#main-container,#header,#footer,.ct-header,.ct-footer{position:relative;z-index:1}

/* ---------- EN-TÊTE ET PIED DE PAGE BLOCKSY ---------- */
#header [data-row],.ct-header [data-row]{background:var(--bg-black)!important;border-color:transparent!important}
#header .ct-menu-link,.ct-header .menu>li>a{color:var(--bg-white)!important;font-family:var(--bg-font-title);letter-spacing:.06em}
#header .menu>li:hover>a,#header .menu>li.current-menu-item>a{color:var(--bg-yellow)!important}
#header .site-title,#header .site-title a{color:var(--bg-yellow)!important;font:800 16px var(--bg-font-title);letter-spacing:.14em}
#header [data-sticky*="yes"]{left:var(--bg-rail-w)!important;right:0!important;width:auto!important}
#header::after,#footer::before{content:"";display:block;height:28px;background:var(--bg-strip-a) repeat-x left center/auto 100%}
#footer::before{background-image:var(--bg-strip-b);height:44px}
#footer [data-row]{background:var(--bg-ink)!important;color:var(--bg-white)}
#footer{position:relative}
#footer::after{content:"";position:absolute;inset:44px 0 0;pointer-events:none;background:var(--bg-yellow);opacity:.10;
  -webkit-mask:var(--bg-mask) center 30%/cover no-repeat;mask:var(--bg-mask) center 30%/cover no-repeat}
#footer>*{position:relative;z-index:1}

/* ---------- BOUTONS ---------- */
.bg-btn,.wp-block-button__link,.button,button[type=submit],input[type=submit]{
  display:inline-block;background:transparent;color:var(--bg-yellow)!important;border:2px solid var(--bg-yellow);
  padding:.8em 1.5em;font:500 .9rem var(--bg-font-body);border-radius:3px;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.bg-btn:hover,.wp-block-button__link:hover,.button:hover,button[type=submit]:hover{background:var(--bg-yellow);color:var(--bg-ink)!important}
.bg-btn--solid{background:var(--bg-yellow);color:var(--bg-ink)!important}
.bg-btn--solid:hover{background:transparent;color:var(--bg-yellow)!important}

/* ---------- BANDEAUX DE MOTIF ---------- */
.bg-band{height:56px;background:var(--bg-strip-a) repeat-x left center/auto 100%}
.bg-band--b{background-image:var(--bg-strip-b)}
.bg-band--thin{height:30px}

/* ---------- ACCUEIL ---------- */
.bg-wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.bg-hero{padding-top:72px;padding-bottom:64px}
.bg-hero h1{font-size:clamp(2.8rem,7.5vw,6rem);line-height:.95;margin:0 0 20px}
.bg-hero p{max-width:42ch;font-size:1.1rem;margin:0 0 28px}
.bg-section{padding-top:56px;padding-bottom:56px}
.bg-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.bg-head h2,.bg-head h1{margin:0;font-size:clamp(1.6rem,3vw,2.2rem)}
.bg-head h2::after,.bg-head h1::after,.bg-about h2::after{content:"";display:block;width:96px;height:10px;margin-top:12px;background:var(--bg-strip-b) repeat-x left center/auto 100%}

/* Mosaïque */
.bg-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:3px;background:var(--bg-black)}
.bg-mosaic .bg-card:first-child{grid-column:span 2;grid-row:span 2}
.bg-card{position:relative;display:block;overflow:hidden;background:var(--bg-grey);text-decoration:none;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .2s}
.bg-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.bg-card:hover img{transform:scale(1.04)}
.bg-card:hover,.bg-card:focus-visible{outline-color:var(--bg-yellow)}
.bg-card::after{content:"";position:absolute;top:0;right:0;width:42px;height:42px;background:var(--bg-strip-b) center/cover;clip-path:polygon(0 0,100% 0,100% 100%)}
.bg-card__meta{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 14px;background:rgba(13,13,13,.8);color:var(--bg-white);display:flex;justify-content:space-between;align-items:center;gap:10px;transform:translateY(100%);transition:transform .25s ease;z-index:1}
.bg-card:hover .bg-card__meta,.bg-card:focus-visible .bg-card__meta{transform:none}
.bg-card__title{font:800 1rem var(--bg-font-title);color:var(--bg-yellow)}
.bg-badge{font-size:.72rem;padding:2px 9px;border-radius:3px;background:var(--bg-yellow);color:var(--bg-ink);white-space:nowrap}
.bg-badge--vendu{background:var(--bg-white)}

/* Archive : grille régulière */
.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:3px}
.bg-grid .bg-card{aspect-ratio:4/5}
.bg-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px;padding:0;list-style:none}
.bg-filters a{display:inline-block;padding:6px 14px;border:2px solid var(--bg-yellow);border-radius:3px;text-decoration:none;font-size:.85rem}
.bg-filters .is-active a,.bg-filters a:hover{background:var(--bg-yellow);color:var(--bg-ink)}

/* À propos */
.bg-about{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.bg-about__imgwrap{position:relative;margin:0 14px 14px 0}
.bg-about__imgwrap::before,.bg-single__imgwrap::before{content:"";position:absolute;inset:14px -14px -14px 14px;background:var(--bg-strip-a) center/cover;border:2px solid var(--bg-yellow)}
.bg-about__img{position:relative;aspect-ratio:4/5;background:url(assets/img/hero.jpg) 50% 12%/cover;border:2px solid var(--bg-yellow)}
.bg-about p{max-width:52ch;line-height:1.7}

/* Bandeau contact */
.bg-cta{position:relative;background:var(--bg-yellow);color:var(--bg-ink);overflow:hidden}
.bg-cta::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--bg-ink);opacity:.22;-webkit-mask:var(--bg-mask) center 40%/cover no-repeat;mask:var(--bg-mask) center 40%/cover no-repeat}
.bg-cta .bg-wrap{position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:46px;padding-bottom:46px}
.bg-cta h2{margin:0;color:var(--bg-ink);font-size:clamp(1.5rem,3vw,2.2rem)}
.bg-cta .bg-btn{background:var(--bg-ink);border-color:var(--bg-ink);color:var(--bg-yellow)!important}
.bg-cta .bg-btn:hover{background:transparent;color:var(--bg-ink)!important}

/* Fiche œuvre */
.bg-single{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start;padding:48px 0 72px}
.bg-single__imgwrap{position:relative;margin:0 14px 14px 0}
.bg-single__imgwrap img{position:relative;width:100%;height:auto;display:block;border:2px solid var(--bg-yellow)}
.bg-single h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 16px}
.bg-specs{margin:20px 0 28px;border-top:1px solid #333}
.bg-specs div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #333;font-size:.92rem}
.bg-specs dt{color:#aaa}.bg-specs dd{margin:0}

/* ---------- MOBILE ---------- */
@media(max-width:1000px){.bg-mosaic{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){
  :root{--bg-rail-w:44px}
  .bg-rail__label{display:none}
  .bg-wrap{padding:0 18px}
  .bg-about,.bg-single{grid-template-columns:1fr;gap:36px}
  .bg-mosaic{grid-auto-rows:170px}
  .bg-band{height:36px}
  .bg-card__meta{transform:none}
  #header::after{height:22px}
}
@media(prefers-reduced-motion:reduce){.bg-card img,.bg-card__meta{transition:none}}
@media print{.bg-rail,body::before,#footer::after,.bg-cta::before{display:none}body{padding-left:0}}