/* =========================================================
   TERRES DE CHEVAUX — Sophie Briot
   PORTFOLIO / Galerie des œuvres — proposition immersive
   ---------------------------------------------------------
   Complément de styles.css. Préfixé .tdc-site, variables
   existantes réutilisées. À charger APRÈS styles.css.
   Enveloppe : <div class="tdc-site is-inner is-gallery"> … </div>
   ========================================================= */

/* La galerie ose un fond plus sombre, plus muséal. */
.tdc-site.is-gallery{background:var(--umber);}
.tdc-site.is-gallery .site-header{
  background:transparent; color:var(--paper);
  border-bottom:1px solid transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
}
.tdc-site.is-gallery .site-header.scrolled{
  background:rgba(26,20,14,.72); color:var(--paper);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-paper);
}
.tdc-site.is-gallery .site-header .nav a.cta{color:var(--accent-soft);}

/* =========================================================
   HERO DE GALERIE — plein écran, contemplatif
   ========================================================= */
.tdc-site .gallery-hero{
  position:relative; min-height:88svh; display:flex; align-items:flex-end;
  color:var(--paper); overflow:hidden; background:var(--umber);
}
.tdc-site .gallery-hero .bg{position:absolute; inset:0;}
.tdc-site .gallery-hero .bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transform-origin:center; animation:galBreath 36s ease-in-out infinite alternate;
}
@keyframes galBreath{from{transform:scale(1.02);}to{transform:scale(1.09);}}
.tdc-site .gallery-hero .bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(26,20,14,.5) 0%, rgba(26,20,14,.12) 22%, rgba(26,20,14,0) 42%),
    linear-gradient(0deg, rgba(26,20,14,.82) 0%, rgba(26,20,14,.2) 46%, rgba(26,20,14,0) 76%);
}
.tdc-site .gallery-hero .inner{
  position:relative; z-index:2; width:100%; max-width:var(--wide);
  margin:0 auto; padding:0 var(--gutter) clamp(3.5rem,8vh,7rem);
}
.tdc-site .gallery-hero .eyebrow{color:rgba(245,241,234,.82);}
.tdc-site .gallery-hero h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3rem,1.2rem+6.6vw,7rem); line-height:.98; margin:1.6rem 0 0;
  text-shadow:0 2px 50px rgba(0,0,0,.25);
}
.tdc-site .gallery-hero .lede{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.3rem,.9rem+1.3vw,2rem); line-height:1.36;
  color:rgba(245,241,234,.9); max-width:34ch; margin-top:1.6rem;
}

/* =========================================================
   BARRE D'EXPLORATION — filtres par statut + bascule de vue
   ========================================================= */
.tdc-site .gallery-bar{
  position:sticky; top:78px; z-index:30;
  background:rgba(26,20,14,.78); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-paper);
}
.tdc-site .gallery-bar .inner{
  max-width:var(--wide); margin:0 auto; padding:1.1rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap;
}
.tdc-site .gallery-bar .gfilters{display:flex; align-items:center; gap:clamp(1.2rem,2.6vw,2.4rem); flex-wrap:wrap;}
.tdc-site .gfilter{
  background:none; border:0; cursor:pointer; padding:.3rem 0; position:relative;
  font-family:var(--body); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; color:rgba(245,241,234,.62); transition:color .4s;
}
.tdc-site .gfilter::after{content:""; position:absolute; left:0; bottom:-.2rem; height:1px; width:0; background:var(--accent-soft); transition:width .5s cubic-bezier(.2,.7,.2,1);}
.tdc-site .gfilter:hover{color:var(--paper);}
.tdc-site .gfilter.active{color:var(--paper);}
.tdc-site .gfilter.active::after{width:100%;}
.tdc-site .gfilter .n{font-size:.6em; vertical-align:.35em; margin-left:.35rem; color:var(--accent-soft); font-variant-numeric:tabular-nums;}

.tdc-site .view-toggle{display:flex; align-items:center; gap:.2rem; border:1px solid var(--line-paper); border-radius:999px; padding:.25rem;}
.tdc-site .view-toggle button{
  background:none; border:0; cursor:pointer; border-radius:999px; padding:.42rem .95rem;
  font-family:var(--body); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; color:rgba(245,241,234,.6); transition:color .4s, background .4s;
}
.tdc-site .view-toggle button.active{background:var(--accent); color:var(--umber);}

/* =========================================================
   GRILLE ASYMÉTRIQUE — mur de galerie
   ========================================================= */
.tdc-site .gallery{
  max-width:var(--wide); margin:0 auto;
  padding:clamp(3.5rem,8vw,7rem) var(--gutter) var(--rhythm);
}
.tdc-site .wall{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(1.4rem,2.6vw,2.6rem);
  align-items:start;
}
.tdc-site .piece{
  position:relative; cursor:pointer; color:var(--paper);
  grid-column:span 6;
}
.tdc-site .piece[hidden]{display:none;}
/* rythme asymétrique : largeurs et hauteurs variées */
.tdc-site .piece.w-7{grid-column:span 7;}
.tdc-site .piece.w-5{grid-column:span 5;}
.tdc-site .piece.w-6{grid-column:span 6;}
.tdc-site .piece.w-12{grid-column:span 12;}
.tdc-site .piece.push{margin-top:clamp(2.5rem,6vw,6rem);}

.tdc-site .piece .frame{
  overflow:hidden; background:#221b13; position:relative;
}
.tdc-site .piece .frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.5s cubic-bezier(.2,.7,.2,1), filter 1.2s ease;
  filter:saturate(.96);
}
.tdc-site .piece .frame.tall{aspect-ratio:4/5;}
.tdc-site .piece .frame.wide{aspect-ratio:16/10;}
.tdc-site .piece .frame.square{aspect-ratio:1/1;}
.tdc-site .piece .frame.portrait{aspect-ratio:3/4;}
.tdc-site .piece:hover .frame img{transform:scale(1.045); filter:saturate(1.04);}

/* voile + métadonnées au survol */
.tdc-site .piece .veil{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.4rem,2.4vw,2.2rem);
  background:linear-gradient(0deg, rgba(20,15,10,.74) 0%, rgba(20,15,10,.12) 46%, rgba(20,15,10,0) 72%);
  opacity:0; transition:opacity .6s ease;
}
.tdc-site .piece:hover .veil, .tdc-site .piece:focus-visible .veil{opacity:1;}
.tdc-site .piece .veil .pname{font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,1.1rem+1vw,2.2rem); line-height:1.06;}
.tdc-site .piece .veil .pmeta{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(245,241,234,.78); margin-top:.7rem; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;}

/* pastille de statut */
.tdc-site .status{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  border:1px solid currentColor; border-radius:999px; padding:.22rem .7rem;
}
.tdc-site .status::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor;}
.tdc-site .status.dispo{color:var(--accent-soft);}
.tdc-site .status.vendue{color:var(--stone-2);}
.tdc-site .status.privee{color:var(--stone-2);}
.tdc-site .status.expo{color:#c0a16b;}

/* légende statique sous l'image (toujours visible, sobre) */
.tdc-site .piece .cap{
  margin-top:1rem; display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.tdc-site .piece .cap .nm{font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,1rem+.6vw,1.6rem); color:var(--paper);}
.tdc-site .piece .cap .dim{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone-2); white-space:nowrap;}

/* =========================================================
   VUE "ÉDITORIALE" — une œuvre par rangée, alternée
   ========================================================= */
.tdc-site .gallery.editorial .wall{display:flex; flex-direction:column; gap:clamp(5rem,12vw,12rem);}
.tdc-site .gallery.editorial .piece{
  grid-column:auto; margin-top:0 !important;
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(2.5rem,6vw,5.5rem); align-items:center; cursor:default;
}
.tdc-site .gallery.editorial .piece:nth-child(even){grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);}
.tdc-site .gallery.editorial .piece:nth-child(even) .frame{order:2;}
.tdc-site .gallery.editorial .piece .frame{aspect-ratio:auto; cursor:zoom-in;}
.tdc-site .gallery.editorial .piece .frame img{height:clamp(420px,64vh,760px);}
.tdc-site .gallery.editorial .piece .veil{display:none;}
.tdc-site .gallery.editorial .piece .cap{display:none;}
.tdc-site .gallery.editorial .edito{display:flex; flex-direction:column;}
.tdc-site .gallery .edito{display:none;} /* masquée en vue mur */
.tdc-site .gallery.editorial .edito{display:flex;}
.tdc-site .gallery.editorial .edito .idx{font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:1.4rem;}
.tdc-site .gallery.editorial .edito .nm{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(2rem,1.3rem+2vw,3.4rem); line-height:1.04; color:var(--paper); margin-bottom:1.5rem;}
.tdc-site .gallery.editorial .edito .specs{display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.6rem;}
.tdc-site .gallery.editorial .edito .specs .r{display:flex; gap:1rem; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;}
.tdc-site .gallery.editorial .edito .specs .r .k{color:var(--stone-2); min-width:7.5rem; flex:none;}
.tdc-site .gallery.editorial .edito .specs .r .v{color:rgba(245,241,234,.9);}
.tdc-site .gallery.editorial .edito .note{font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,1rem+.6vw,1.5rem); line-height:1.42; color:rgba(245,241,234,.74); max-width:36ch; margin-top:.4rem;}

/* =========================================================
   LIGHTBOX — consultation plein écran, zoom doux
   ========================================================= */
.tdc-site .lightbox{
  position:fixed; inset:0; z-index:120;
  background:rgba(18,13,9,.96); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .55s ease, visibility .55s ease;
}
.tdc-site .lightbox.open{opacity:1; visibility:visible;}
.tdc-site .lightbox .lb-top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.2rem clamp(1.2rem,4vw,2.6rem); color:rgba(245,241,234,.7);
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; flex:none;
}
.tdc-site .lightbox .lb-count{font-variant-numeric:tabular-nums;}
.tdc-site .lightbox .lb-close{
  background:none; border:0; cursor:pointer; color:rgba(245,241,234,.7);
  font-family:var(--serif); font-size:2.2rem; line-height:1; transition:color .3s;
}
.tdc-site .lightbox .lb-close:hover{color:var(--paper);}

.tdc-site .lightbox .lb-stage{
  flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) clamp(280px,26vw,400px);
  align-items:center; gap:clamp(1.5rem,4vw,4rem);
  padding:0 clamp(1.2rem,4vw,3.5rem) clamp(1.5rem,4vw,3rem);
}
.tdc-site .lightbox .lb-figure{height:100%; display:flex; align-items:center; justify-content:center; min-height:0;}
.tdc-site .lightbox .lb-figure img{
  max-width:100%; max-height:100%; object-fit:contain; display:block;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
  opacity:0; transform:scale(.985); transition:opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.tdc-site .lightbox .lb-figure img.loaded{opacity:1; transform:none;}

.tdc-site .lightbox .lb-info{color:var(--paper); align-self:center;}
.tdc-site .lightbox .lb-info .idx{font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:1.3rem;}
.tdc-site .lightbox .lb-info .nm{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(2rem,1.4rem+1.4vw,3rem); line-height:1.04; margin-bottom:1.6rem;}
.tdc-site .lightbox .lb-info .specs{display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.6rem; border-top:1px solid var(--line-paper); padding-top:1.6rem;}
.tdc-site .lightbox .lb-info .specs .r{display:flex; gap:1rem; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;}
.tdc-site .lightbox .lb-info .specs .r .k{color:var(--stone-2); min-width:7rem; flex:none;}
.tdc-site .lightbox .lb-info .specs .r .v{color:rgba(245,241,234,.92);}
.tdc-site .lightbox .lb-info .note{font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,1rem+.5vw,1.4rem); line-height:1.44; color:rgba(245,241,234,.74); max-width:34ch;}

/* flèches */
.tdc-site .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  background:none; border:0; cursor:pointer; color:rgba(245,241,234,.55);
  font-family:var(--serif); font-size:2.4rem; line-height:1; padding:1rem; transition:color .3s;
}
.tdc-site .lb-nav:hover{color:var(--paper);}
.tdc-site .lb-nav.prev{left:clamp(.4rem,2vw,1.6rem);}
.tdc-site .lb-nav.next{right:clamp(.4rem,2vw,1.6rem);}

/* =========================================================
   RESPONSIVE — tablette / mobile
   ========================================================= */
@media (max-width:1024px){
  .tdc-site .piece.w-7, .tdc-site .piece.w-5, .tdc-site .piece.w-6{grid-column:span 6;}
  .tdc-site .lightbox .lb-stage{grid-template-columns:1fr;}
  .tdc-site .lightbox .lb-info{align-self:start; max-height:30vh; overflow:auto;}
}
@media (max-width:760px){
  .tdc-site .gallery-bar{top:60px;}
  .tdc-site .wall{grid-template-columns:1fr; gap:clamp(2.6rem,8vw,3.6rem);}
  .tdc-site .piece, .tdc-site .piece.w-7, .tdc-site .piece.w-5, .tdc-site .piece.w-6, .tdc-site .piece.w-12{grid-column:auto;}
  .tdc-site .piece.push{margin-top:0;}
  .tdc-site .piece .frame.wide, .tdc-site .piece .frame.square{aspect-ratio:4/5;}
  /* sur mobile, métadonnées toujours lisibles */
  .tdc-site .piece .veil{opacity:1; background:linear-gradient(0deg, rgba(20,15,10,.7) 0%, rgba(20,15,10,0) 60%);}
  .tdc-site .gallery.editorial .piece{grid-template-columns:1fr !important; gap:1.8rem;}
  .tdc-site .gallery.editorial .piece:nth-child(even) .frame{order:0;}
  .tdc-site .gallery.editorial .piece .frame img{height:auto;}
  .tdc-site .view-toggle{display:none;} /* mur uniquement sur petit écran */
  .tdc-site .lightbox .lb-stage{padding-bottom:1.2rem;}
  .tdc-site .lb-nav{font-size:1.8rem; padding:.6rem;}
}

@media (prefers-reduced-motion:reduce){
  .tdc-site .gallery-hero .bg img{animation:none; transform:none;}
  .tdc-site .lightbox .lb-figure img{transition:opacity .2s ease;}
}