/* =========================================================
   TERRES DE CHEVAUX — Sophie Briot
   Pages intérieures — Carnet d'atelier & gabarit d'article
   ---------------------------------------------------------
   Complément de styles.css. Tout est préfixé .tdc-site et
   réutilise les variables existantes (:root de styles.css).
   À charger APRÈS styles.css.
   Enveloppe : <div class="tdc-site is-inner"> … </div>
   ========================================================= */

/* ---------------------------------------------------------
   Header en page intérieure — fond clair dès le chargement
   (pas de hero plein écran sombre comme sur la landing).
   --------------------------------------------------------- */
.tdc-site.is-inner .site-header{
  background:rgba(245,241,234,.88);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.tdc-site.is-inner .site-header.scrolled{ background:rgba(245,241,234,.92); }

/* =========================================================
   HERO DE PAGE INTÉRIEURE — sobre, beaucoup d'air
   ========================================================= */
.tdc-site .page-hero{
  background:var(--paper);
  padding-top:clamp(8.5rem, 7rem + 8vw, 13rem);
  padding-bottom:clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.tdc-site .page-hero .inner{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);}
.tdc-site .page-hero .eyebrow{margin-bottom:clamp(1.8rem,4vw,2.6rem);}
.tdc-site .page-hero h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3rem, 1.6rem + 5.4vw, 6.6rem); line-height:.98;
  letter-spacing:.006em; max-width:16ch;
}
.tdc-site .page-hero .lede{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.35rem, 1rem + 1.1vw, 1.95rem); line-height:1.4;
  color:var(--stone); max-width:46ch; margin-top:clamp(1.8rem,4vw,2.6rem);
}
.tdc-site .page-hero .rule{height:1px; background:var(--line); max-width:var(--maxw); margin:clamp(3rem,6vw,5rem) auto 0;}
.tdc-site .page-hero .rule-inner{margin-inline:var(--gutter);}

/* fil d'ariane discret */
.tdc-site .crumb{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--stone); display:flex; align-items:center; gap:.7rem; margin-bottom:clamp(1.6rem,4vw,2.4rem);
}
.tdc-site .crumb a{color:var(--stone); transition:color .35s;}
.tdc-site .crumb a:hover{color:var(--accent);}
.tdc-site .crumb .sep{color:var(--accent); opacity:.7;}

/* =========================================================
   CARNET — chapeau éditorial + filtres très discrets
   ========================================================= */
.tdc-site .carnet-page{background:var(--paper); padding-bottom:var(--rhythm);}

/* introduction éditoriale */
.tdc-site .carnet-intro{max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,7vw,6rem) var(--gutter) 0;}
.tdc-site .carnet-intro p{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem, 1rem + 1.6vw, 2.4rem); line-height:1.42;
  color:var(--ink); max-width:30ch;
}

/* barre de filtres / catégories — fine, sans cadre */
.tdc-site .filters{
  max-width:var(--maxw); margin:clamp(3.5rem,8vw,6rem) auto 0;
  padding:0 var(--gutter);
  display:flex; align-items:center; gap:clamp(1.4rem,3vw,2.6rem);
  flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:1.4rem;
}
.tdc-site .filters .flabel{
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--stone-2); margin-right:.4rem; flex:none;
}
.tdc-site .filter{
  background:none; border:0; cursor:pointer; padding:.3rem 0;
  font-family:var(--body); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; color:var(--stone); position:relative; transition:color .4s;
}
.tdc-site .filter::after{content:""; position:absolute; left:0; bottom:-.2rem; height:1px; width:0; background:var(--accent); transition:width .5s cubic-bezier(.2,.7,.2,1);}
.tdc-site .filter:hover{color:var(--ink);}
.tdc-site .filter.active{color:var(--ink);}
.tdc-site .filter.active::after{width:100%;}

/* =========================================================
   CARNET — listing éditorial
   Une pièce maîtresse en tête, puis une grille très aérée.
   ========================================================= */
.tdc-site .carnet-list{max-width:var(--maxw); margin:0 auto; padding:clamp(3.5rem,8vw,6.5rem) var(--gutter) 0;}

/* entrée mise en avant (la plus récente) */
.tdc-site .post-feature{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
  margin-bottom:clamp(4.5rem,10vw,8rem);
}
.tdc-site .post-feature .frame{overflow:hidden; background:var(--sand); aspect-ratio:5/4;}
.tdc-site .post-feature .frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s cubic-bezier(.2,.7,.2,1);}
.tdc-site .post-feature:hover .frame img{transform:scale(1.03);}
.tdc-site .post-feature .body .kicker{display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem;}
.tdc-site .post-feature .body h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,1.4rem+2.4vw,3.6rem); line-height:1.08; margin-bottom:1.3rem;
}
.tdc-site .post-feature .body p{color:var(--stone); max-width:42ch; margin-bottom:2rem;}

/* étiquettes catégorie + date */
.tdc-site .cat{
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}
.tdc-site .when{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--stone-2); font-variant-numeric:tabular-nums;
}
.tdc-site .kicker .dot{width:3px; height:3px; border-radius:50%; background:var(--stone-3);}

/* grille des entrées */
.tdc-site .post-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(3rem,6vw,5.5rem) clamp(2.5rem,5vw,4.5rem);
}
.tdc-site .post{
  display:flex; flex-direction:column;
  transition:opacity .6s ease;
}
.tdc-site .post[hidden]{display:none;}
.tdc-site .post .frame{overflow:hidden; background:var(--sand); aspect-ratio:4/5; margin-bottom:1.6rem;}
.tdc-site .post .frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.5s cubic-bezier(.2,.7,.2,1);}
.tdc-site .post:hover .frame img{transform:scale(1.045);}
.tdc-site .post .kicker{display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem;}
.tdc-site .post h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem,1.2rem+1vw,2.1rem); line-height:1.14; margin-bottom:.9rem;
}
.tdc-site .post p{color:var(--stone); font-size:1rem; margin-bottom:1.4rem;}
.tdc-site .post .tlink{margin-top:auto; align-self:flex-start;}

/* lien-bloc : toute la carte cliquable, sans casser .tlink */
.tdc-site .post a.cover,
.tdc-site .post-feature a.cover{display:block; color:inherit;}

/* charger davantage */
.tdc-site .more{
  display:flex; justify-content:center;
  margin-top:clamp(4.5rem,10vw,8rem);
}
.tdc-site .more .btn-ink{border-color:var(--line);}
.tdc-site .more[hidden]{display:none;}

/* =========================================================
   ÉTAT VIDE — élégant, contemplatif
   ========================================================= */
.tdc-site .empty{
  max-width:46rem; margin:clamp(4rem,9vw,7rem) auto 0; padding:0 var(--gutter);
  text-align:center;
}
.tdc-site .empty .mark{
  width:54px; height:1px; background:var(--accent); margin:0 auto clamp(2rem,5vw,3rem);
}
.tdc-site .empty h2{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(1.9rem,1.2rem+2vw,3rem); line-height:1.2; color:var(--ink); margin-bottom:1.6rem;
}
.tdc-site .empty p{color:var(--stone); max-width:36ch; margin:0 auto 2.4rem;}
.tdc-site .empty[hidden]{display:none;}

/* =========================================================
   GABARIT D'ARTICLE
   ========================================================= */
.tdc-site .article{background:var(--paper); padding-bottom:var(--rhythm);}

/* en-tête d'article */
.tdc-site .article-head{max-width:50rem; margin:0 auto; padding:0 var(--gutter); text-align:center;}
.tdc-site .article-head .kicker{display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:clamp(1.6rem,4vw,2.4rem);}
.tdc-site .article-head h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem,1.6rem+3.6vw,5rem); line-height:1.04; letter-spacing:.005em;
}
.tdc-site .article-head .standfirst{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.35rem,1rem+1.1vw,1.9rem); line-height:1.42;
  color:var(--stone); max-width:40ch; margin:clamp(1.8rem,4vw,2.4rem) auto 0;
}

/* image principale — pleine largeur (wide) */
.tdc-site .article-hero{max-width:var(--wide); margin:clamp(3rem,7vw,5.5rem) auto 0; padding-inline:var(--gutter);}
.tdc-site .article-hero .frame{overflow:hidden; background:var(--sand);}
.tdc-site .article-hero .frame img{width:100%; height:clamp(440px,72vh,840px); object-fit:cover; object-position:center 45%;}
.tdc-site .article-hero .figcap{justify-content:center; margin-top:1.3rem;}

/* corps de texte — colonne éditoriale étroite */
.tdc-site .prose{max-width:42rem; margin:clamp(3.5rem,8vw,6rem) auto 0; padding:0 var(--gutter);}
.tdc-site .prose > *{max-width:none;}
.tdc-site .prose p{font-size:clamp(1.12rem,1rem+.4vw,1.3rem); line-height:1.84; color:var(--ink); margin-bottom:1.5em;}
.tdc-site .prose p.lead-in{font-size:clamp(1.3rem,1.1rem+.7vw,1.6rem); line-height:1.6; color:var(--ink);}
.tdc-site .prose p.lead-in::first-letter{
  font-family:var(--serif); font-size:3.4em; float:left; line-height:.72;
  padding:.06em .16em 0 0; color:var(--accent); font-weight:400;
}
.tdc-site .prose h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.8rem,1.3rem+1.4vw,2.6rem); line-height:1.12;
  margin:clamp(2.6rem,5vw,3.6rem) 0 1.2rem;
}
.tdc-site .prose em, .tdc-site .prose i{font-style:italic;}

/* citation éditoriale */
.tdc-site .pullquote{
  max-width:38rem; margin:clamp(3rem,7vw,5rem) auto; padding:0 var(--gutter); text-align:center;
}
.tdc-site .pullquote blockquote{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.8rem,1.2rem+1.9vw,3rem); line-height:1.26; color:var(--ink); margin:0;
}
.tdc-site .pullquote cite{
  display:block; margin-top:1.8rem; font-style:normal; font-family:var(--body);
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--stone);
}

/* image intercalée dans le texte */
.tdc-site .article-figure{max-width:54rem; margin:clamp(3rem,7vw,5rem) auto; padding:0 var(--gutter);}
.tdc-site .article-figure .frame{overflow:hidden; background:var(--sand);}
.tdc-site .article-figure .frame img{width:100%; height:auto; display:block;}
.tdc-site .article-figure .figcap{margin-top:1.2rem;}

/* galerie d'images de l'article */
.tdc-site .article-gallery{max-width:var(--wide); margin:clamp(3.5rem,8vw,6rem) auto 0; padding:0 var(--gutter);}
.tdc-site .article-gallery .gh{
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--stone-2); margin-bottom:1.8rem; text-align:center;
}
.tdc-site .article-gallery .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,1.8rem);}
.tdc-site .article-gallery figure{margin:0;}
.tdc-site .article-gallery .shot{overflow:hidden; background:var(--sand); aspect-ratio:3/4; cursor:zoom-in;}
.tdc-site .article-gallery .shot img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.2,.7,.2,1);}
.tdc-site .article-gallery figure:hover .shot img{transform:scale(1.05);}

/* navigation article précédent / suivant + retour */
.tdc-site .article-nav{
  max-width:var(--maxw); margin:clamp(5rem,11vw,9rem) auto 0; padding:0 var(--gutter);
}
.tdc-site .article-nav .back{
  display:flex; justify-content:center; padding-bottom:clamp(3rem,6vw,4.5rem);
  border-bottom:1px solid var(--line); margin-bottom:clamp(3rem,6vw,4.5rem);
}
.tdc-site .article-nav .pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem);}
.tdc-site .article-nav .pn{display:flex; flex-direction:column; gap:.7rem; color:inherit; transition:opacity .4s;}
.tdc-site .article-nav .pn .dir{font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--stone-2);}
.tdc-site .article-nav .pn .t{font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,1.1rem+1vw,2rem); line-height:1.16; color:var(--ink); transition:color .4s;}
.tdc-site .article-nav .pn.next{text-align:right; align-items:flex-end;}
.tdc-site .article-nav .pn:hover .t{color:var(--accent);}
.tdc-site .article-nav .pn.disabled{opacity:.35; pointer-events:none;}

/* =========================================================
   MINI-LIGHTBOX (galerie d'article) — sobre
   ========================================================= */
.tdc-site ~ .mini-lb, .mini-lb{
  position:fixed; inset:0; z-index:120;
  background:rgba(18,13,9,.95); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s ease;
  font-family:"EB Garamond", Georgia, serif;
}
.mini-lb.open{opacity:1; visibility:visible;}
.mini-lb .mlb-fig{margin:0; max-width:86vw; max-height:84vh; display:flex; align-items:center; justify-content:center;}
.mini-lb .mlb-fig img{
  max-width:86vw; max-height:84vh; object-fit:contain;
  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);
}
.mini-lb .mlb-fig img.loaded{opacity:1; transform:none;}
.mini-lb .mlb-close{
  position:absolute; top:1.2rem; right:clamp(1.2rem,4vw,2.6rem);
  background:none; border:0; cursor:pointer; color:rgba(245,241,234,.7);
  font-family:"Cormorant Garamond", Georgia, serif; font-size:2.4rem; line-height:1; transition:color .3s;
}
.mini-lb .mlb-close:hover{color:#f5f1ea;}
.mini-lb .mlb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; color:rgba(245,241,234,.55);
  font-family:"Cormorant Garamond", Georgia, serif; font-size:2.4rem; line-height:1; padding:1rem; transition:color .3s;
}
.mini-lb .mlb-nav:hover{color:#f5f1ea;}
.mini-lb .mlb-nav.prev{left:clamp(.4rem,2vw,1.6rem);}
.mini-lb .mlb-nav.next{right:clamp(.4rem,2vw,1.6rem);}
@media (max-width:760px){ .mini-lb .mlb-nav{font-size:1.8rem; padding:.5rem;} }

/* =========================================================
   RESPONSIVE — tablette / mobile
   ========================================================= */
@media (max-width:1024px){
  .tdc-site .post-feature{grid-template-columns:1fr; gap:2.4rem;}
  .tdc-site .post-feature .frame{aspect-ratio:16/10;}
}
@media (max-width:760px){
  .tdc-site .carnet-intro p{font-size:clamp(1.4rem,6vw,1.8rem);}
  .tdc-site .post-grid{grid-template-columns:1fr; gap:clamp(3rem,9vw,4rem);}
  .tdc-site .post .frame{aspect-ratio:4/3;}
  .tdc-site .filters{gap:1.1rem 1.4rem;}
  .tdc-site .filters .flabel{width:100%; margin-bottom:.2rem;}
  .tdc-site .article-gallery .grid{grid-template-columns:1fr 1fr; gap:.9rem;}
  .tdc-site .article-nav .pair{grid-template-columns:1fr; gap:2.2rem;}
  .tdc-site .article-nav .pn.next{text-align:left; align-items:flex-start;}
}