/* =========================================================================
   Ferme Demi-Lune — feuille de style unique
   Palette relevée sur les matériaux du chantier : la pierre fendue gris-vert
   du Giffre et ses reflets de rouille, la chaux blanc cassé de la DP, le
   mélèze du bardage, et le bleu-noir de l'ombre d'hiver en fond de vallée.
   ========================================================================= */

:root{
  /* matériaux */
  --nuit:#12171A; --nuit-2:#1A2124; --pierre:#3F4B47; --pierre-c:#77837D;
  --chaux:#EFEAE0; --neige:#FBF9F5; --meleze:#C08B4F; --rouille:#A2512A;

  /* rôles — thème clair par défaut */
  --fond:var(--neige); --fond-2:#F2EEE6; --fond-3:#E6E0D4;
  --texte:#181C1B; --texte-2:#5A625E; --texte-3:#8A918C;
  --trait:#DBD4C6; --trait-2:#C3BAA8;
  --accent:var(--rouille); --accent-doux:#F0E0D6;
  --inverse-fond:var(--nuit); --inverse-texte:var(--chaux);

  /* mêmes voix que la page d'accueil (livre.css) : ce qui se déclame,
     ce qui se lit, ce qui se note. */
  --serif:'Cormorant Garamond',Garamond,Georgia,serif;
  --sans:'Spectral',Georgia,'Times New Roman',serif;
  --note:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --marge:clamp(20px,5vw,72px);
  --colonne:min(66ch,100%);
  --t-xs:12px; --t-s:14px; --t-m:17px; --t-l:20px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fond:var(--nuit); --fond-2:var(--nuit-2); --fond-3:#232B2E;
    --texte:#E9E4DA; --texte-2:#A0A8A3; --texte-3:#79817C;
    --trait:#2A3235; --trait-2:#3B4448;
    --accent:#D8794A; --accent-doux:#2A1E17;
    --inverse-fond:var(--chaux); --inverse-texte:#181C1B;
  }
}
:root[data-theme="dark"]{
  --fond:var(--nuit); --fond-2:var(--nuit-2); --fond-3:#232B2E;
  --texte:#E9E4DA; --texte-2:#A0A8A3; --texte-3:#79817C;
  --trait:#2A3235; --trait-2:#3B4448;
  --accent:#D8794A; --accent-doux:#2A1E17;
  --inverse-fond:var(--chaux); --inverse-texte:#181C1B;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--fond); color:var(--texte);
  font-family:var(--sans); font-size:var(--t-m); line-height:1.62;
  font-feature-settings:"kern" 1; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- squelette ---------- */
.enveloppe{max-width:1320px;margin:0 auto;padding-inline:var(--marge)}
.colonne{max-width:var(--colonne);margin-inline:auto}
.section{padding-block:clamp(64px,11vw,150px)}
.section--serre{padding-block:clamp(46px,7vw,92px)}

/* ---------- typographie ---------- */
.oeil{
  font-family:var(--note);
  font-size:var(--t-xs); letter-spacing:.19em; text-transform:uppercase;
  color:var(--texte-3); margin:0 0 18px; font-weight:500;
  display:flex; align-items:center; gap:12px;
}
.oeil::after{content:"";flex:1;height:1px;background:var(--trait);max-width:120px}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;
  text-wrap:balance;margin:0}
h1{font-size:clamp(46px,8.5vw,104px);line-height:.98}
h2{font-size:clamp(30px,4.6vw,54px);line-height:1.06;margin-bottom:.55em}
h3{font-size:clamp(21px,2.5vw,29px);line-height:1.18;margin-bottom:.4em}
p{margin:0 0 1.15em}
.mene{font-size:clamp(19px,2.1vw,25px);line-height:1.5;color:var(--texte-2);
  font-family:var(--serif)}
.petit{font-size:var(--t-s);color:var(--texte-2)}
.note{font-family:var(--note);font-size:var(--t-xs);color:var(--texte-3);line-height:1.5}
strong,b{font-weight:600;color:var(--texte)}
em{font-style:italic}

/* ---------- entête ---------- */
.entete{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--fond) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.entete.pose{border-bottom-color:var(--trait)}
/* l'entête s'efface quand on descend : sinon son bandeau clair traverse
   la section sombre du récit */
.entete{transform:translateY(0);transition:transform .32s cubic-bezier(.3,.7,.3,1),
  border-color .3s ease,background .3s ease}
.entete.cache{transform:translateY(-101%)}
@media (prefers-reduced-motion:reduce){.entete{transition:none}.entete.cache{transform:none}}
.entete__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:64px;max-width:1320px;margin:0 auto;padding-inline:var(--marge)}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.marque svg{width:22px;height:22px;color:var(--accent);flex-shrink:0}
.marque span{font-family:var(--serif);font-size:19px;letter-spacing:.01em;white-space:nowrap}
.nav{display:flex;gap:clamp(14px,2.4vw,32px);align-items:center}
.nav a{font-family:var(--note);font-size:var(--t-s);text-decoration:none;color:var(--texte-2);
  transition:color .2s ease;white-space:nowrap}
.nav a:hover{color:var(--accent)}
@media (max-width:900px){.nav a[data-secondaire]{display:none}}
@media (max-width:620px){.nav a[data-tertiaire]{display:none}}
@media (max-width:420px){.marque span{font-size:16px}.entete__in{gap:14px}}

/* ---------- ouverture ---------- */
.ouverture{position:relative;min-height:min(100svh,940px);display:flex;
  align-items:flex-end;overflow:hidden;background:var(--nuit)}
.ouverture__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 58%}
.ouverture__voile{position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(9,12,14,.94) 0%,rgba(9,12,14,.80) 22%,
      rgba(9,12,14,.46) 46%,rgba(9,12,14,.12) 70%,rgba(9,12,14,.38) 100%),
    linear-gradient(to right,rgba(9,12,14,.42) 0%,rgba(9,12,14,.06) 58%,transparent 100%)}
.ouverture__in{position:relative;width:100%;max-width:1320px;margin:0 auto;
  padding:0 var(--marge) clamp(42px,7vw,86px)}
.ouverture h1{color:#FCFAF6;max-width:15ch}
.ouverture .mene{color:rgba(252,250,246,.92);max-width:44ch;margin-top:22px;
  font-family:var(--sans);font-size:clamp(16px,1.7vw,19px);line-height:1.6;
  text-shadow:0 1px 22px rgba(9,12,14,.75)}
.ouverture h1{text-shadow:0 2px 44px rgba(9,12,14,.5)}
.laisse{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:32px;
  padding-top:22px;border-top:1px solid rgba(252,250,246,.22)}
.laisse span{font-family:var(--note);font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(252,250,246,.62);font-variant-numeric:tabular-nums}

/* ---------- chiffres ---------- */
.chiffres{display:grid;gap:1px;background:var(--trait);border-block:1px solid var(--trait);
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}
.chiffre{background:var(--fond);padding:clamp(24px,3.4vw,40px) clamp(16px,2vw,26px)}
.chiffre b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,4.6vw,54px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--texte)}
.chiffre b i{font-style:normal;font-size:.44em;color:var(--texte-3);
  margin-left:.18em;letter-spacing:0}
.chiffre span{display:block;margin-top:11px;font-family:var(--note);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--texte-3);line-height:1.45}

/* ---------- bandes d'image ---------- */
.bande{margin-block:clamp(38px,6vw,84px)}
.bande figure{margin:0}
.bande img{width:100%}
.bande--pleine{padding-inline:0;max-width:none}
.bande figcaption{display:grid;grid-template-columns:1fr;gap:6px;
  margin-top:16px;padding-inline:var(--marge);max-width:1320px;
  margin-inline:auto;font-size:var(--t-s);color:var(--texte-2)}
.bande figcaption b{font-weight:600;color:var(--texte);display:block}
@media (min-width:900px){
  .bande figcaption{grid-template-columns:minmax(0,22ch) minmax(0,56ch);
    gap:0 40px;align-items:start}
}

/* ---------- bande à deux colonnes, pour une image debout ---------- */
.paire{display:grid;gap:clamp(24px,4vw,56px);align-items:center;
  max-width:1320px;margin-inline:auto;padding-inline:var(--marge)}
.paire figure{margin:0}
.paire img{width:100%;border-radius:2px}
.paire__t b{font-weight:600;color:var(--texte);display:block;margin-bottom:10px}
.paire__t p{color:var(--texte-2);margin:0}
@media (min-width:920px){
  .paire{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
}

/* ---------- récit sur fond sombre ---------- */
.sombre{background:var(--nuit);color:var(--chaux)}
.sombre h2,.sombre h3{color:#FCFAF6}
.sombre .oeil{color:rgba(239,234,224,.52)}
.sombre .oeil::after{background:rgba(239,234,224,.22)}
.sombre p{color:rgba(239,234,224,.78)}
.sombre strong{color:#FCFAF6}
.citation{font-family:var(--serif);font-size:clamp(26px,4vw,46px);line-height:1.2;
  letter-spacing:-.014em;color:#FCFAF6;margin:0;max-width:22ch;text-wrap:balance}
.citation--large{max-width:26ch}
.source{margin-top:26px;font-size:var(--t-s);color:rgba(239,234,224,.52)}

/* ---------- niveaux ---------- */
.niveau{display:grid;gap:clamp(24px,4vw,56px);align-items:center;
  padding-block:clamp(38px,6vw,76px);border-top:1px solid var(--trait)}
@media (min-width:920px){
  .niveau{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .niveau--miroir>figure{order:2}
  .niveau--seul{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .niveau--seul>div{grid-column:2}
}
.niveau figure{margin:0}
.niveau img{width:100%;border-radius:2px}
.niveau__num{font-family:var(--serif);font-size:var(--t-s);color:var(--accent);
  letter-spacing:.1em;margin-bottom:10px;display:block;
  font-variant-numeric:tabular-nums}
.liste{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--trait)}
.liste li{display:flex;justify-content:space-between;gap:20px;
  padding:11px 0;border-bottom:1px solid var(--trait);font-size:var(--t-s)}
.liste li span:first-child{color:var(--texte-2)}
.liste li span:last-child{font-variant-numeric:tabular-nums;text-align:right;
  color:var(--texte);white-space:nowrap}

/* ---------- vallée ---------- */
.grille{display:grid;gap:clamp(20px,3vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.carte{border-top:2px solid var(--texte);padding-top:20px}
.carte h3{font-size:clamp(19px,2vw,23px)}
.carte p{font-size:var(--t-s);color:var(--texte-2);margin-bottom:0}
.carte__d{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-3);margin-bottom:14px;font-variant-numeric:tabular-nums}

/* ---------- journal ---------- */
.billets{display:grid;gap:1px;background:var(--trait);
  border-block:1px solid var(--trait);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.billet{background:var(--fond);padding:clamp(26px,3.2vw,38px);text-decoration:none;
  display:flex;flex-direction:column;gap:12px;transition:background .25s ease}
.billet:hover{background:var(--fond-2)}
.billet__m{font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent)}
.billet h3{margin-bottom:0}
.billet p{font-size:var(--t-s);color:var(--texte-2);margin:0}
.billet__l{margin-top:auto;padding-top:14px;font-size:var(--t-s);color:var(--texte-3)}

/* ---------- article ---------- */
.article{padding-block:clamp(46px,7vw,96px)}
.article__t{max-width:22ch}
.article__meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;
  padding-top:18px;border-top:1px solid var(--trait);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--texte-3)}
.corps{max-width:var(--colonne);margin-inline:0}
@media (max-width:760px){.corps{max-width:100%}}
.corps h2{font-size:clamp(25px,3.2vw,36px);margin-top:2em}
.corps h3{font-size:clamp(19px,2.2vw,25px);margin-top:1.7em}
.corps p,.corps li{font-size:var(--t-m);line-height:1.72}
.corps ul,.corps ol{padding-left:1.15em;margin:0 0 1.15em}
.corps li{margin-bottom:.5em}
.corps figure{margin:2.2em 0}
.corps figcaption{margin-top:10px;font-size:var(--t-xs);color:var(--texte-3)}
.corps a{color:var(--accent);text-underline-offset:3px}
.encadre{background:var(--fond-2);border-left:2px solid var(--accent);
  padding:22px 24px;margin:2em 0;font-size:var(--t-s);color:var(--texte-2)}
.encadre p:last-child{margin-bottom:0}
.encadre b{color:var(--texte)}

/* ---------- pied ---------- */
.pied{border-top:1px solid var(--trait);padding-block:clamp(46px,6vw,78px);
  background:var(--fond-2)}
.pied__g{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.pied h4{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-3);margin:0 0 14px;font-weight:500;font-family:var(--sans)}
.pied a{color:var(--texte-2);text-decoration:none;font-size:var(--t-s);
  display:block;padding:3px 0;transition:color .2s}
.pied a:hover{color:var(--accent)}
.pied__bas{margin-top:44px;padding-top:22px;border-top:1px solid var(--trait);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-size:var(--t-xs);color:var(--texte-3)}

/* ---------- apparition au défilement ---------- */
.monte{opacity:0;transform:translateY(22px);
  transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.monte.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .monte{opacity:1;transform:none;transition:none}
}