/* =========================================================================
   L'AUBIER · cpie-troncais.com
   Magazine nature de la forêt de Tronçais. Squelette « journal-deux-col »
   rhabillé: manchette de journal, tribune large + lisière étroite.
   Aucune requête externe, aucun fichier de police. Préfixe: trn-.
   ========================================================================= */

:root {
  /* --- Palette: papier lichen, encre verte, cuivre de gland --- */
  --fond: #e6e9d5;
  --papier: #f5f6ec;
  --encre: #1c2a1e;
  --encre-douce: #43513f;
  --accent: #2d5236;
  --signal: #a05a1d;
  --filet: #c4cab0;
  --filet-fort: #1c2a1e;
  --surlignage: #dee5c3;

  /* --- Polices (piles système, aucun chargement) --- */
  --titre-police: "Cochin", Georgia, "Times New Roman", serif;
  --texte-police: "Charter", Cambria, Georgia, "Times New Roman", serif;
  --rubrique-police: "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- Rythme --- */
  --largeur-journal: 74rem;
  --largeur-lisiere: 20rem;
  --mesure: 38em;
  --gouttiere: 2.5rem;
  --pas: 1.15rem;
  --marge-page: clamp(1rem, 4vw, 2.75rem);

  /* --- Typographie --- */
  --corps: 1.0625rem;
  --interligne: 1.62;
  --capitales: 0.115em;

  /* --- Traits --- */
  --trait-fin: 1px solid var(--filet);
  --trait-gras: 3px solid var(--filet-fort);
  --trait-double: 4px double var(--filet-fort);
}

/* ---------------------------------------------------------------
   1. BASES
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte-police);
  font-size: var(--corps);
  line-height: var(--interligne);
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
a:hover { color: var(--signal); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--titre-police);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 calc(var(--pas) * 0.6);
  letter-spacing: -0.008em;
}

p, ul, ol, figure, table, blockquote { margin: 0 0 var(--pas); }

.trn-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: var(--papier);
  padding: 0.6rem 1rem;
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  z-index: 50;
}
.trn-evitement:focus { left: 0; color: var(--papier); }

/* ---------------------------------------------------------------
   2. ÉDITION: le conteneur général
   --------------------------------------------------------------- */
.trn-edition {
  max-width: var(--largeur-journal);
  margin: 0 auto;
  padding: 0 var(--marge-page) calc(var(--pas) * 3);
  background: var(--papier);
  border-inline: var(--trait-fin);
  min-height: 100vh;
}

/* ---------------------------------------------------------------
   3. MANCHETTE: nom du journal, date d'édition, navigation
   --------------------------------------------------------------- */
.trn-manchette {
  border-block-end: var(--trait-double);
  padding-block: calc(var(--pas) * 0.8) calc(var(--pas) * 0.6);
}

.trn-manchette-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pas) * 0.5) var(--pas);
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.82rem;
  color: var(--encre-douce);
}

.trn-manchette-cour {
  border-block-start: var(--trait-gras);
  margin-block-start: calc(var(--pas) * 0.5);
  padding-block: calc(var(--pas) * 0.45);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pas);
}

.trn-nom {
  font-family: var(--titre-police);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1;
  color: var(--encre);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.trn-nom:hover { color: var(--accent); }
.trn-nom-mark {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  flex: none;
}
.trn-nom-sous {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.86rem;
  color: var(--encre-douce);
  margin: 0;
  line-height: 1.35;
}

.trn-voies { margin-inline-start: auto; }
.trn-voies ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pas) * 0.35) calc(var(--pas) * 0.8);
}
.trn-voies a {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--encre);
  padding-block: 0.2em;
  border-block-end: 2px solid transparent;
}
.trn-voies a:hover { color: var(--accent); border-block-end-color: var(--accent); }
.trn-voies a[aria-current="page"] { color: var(--signal); border-block-end-color: var(--signal); }

/* ---------------------------------------------------------------
   4. CLAIRIÈRE: le héros en BANDE (voile vert en dur)
   --------------------------------------------------------------- */
.trn-clairiere {
  position: relative;
  border-block-end: var(--trait-gras);
  min-height: 17rem;
  display: grid;
}
.trn-clairiere-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
.trn-clairiere-voile {
  position: absolute;
  inset: 0;
  background: rgba(22, 38, 27, 0.82); /* couleur en dur, jamais une variable */
}
.trn-clairiere-texte {
  position: relative;
  padding: calc(var(--pas) * 1.6) 0 calc(var(--pas) * 1.4);
  max-width: 52rem;
  color: #f2f4e6;
}
.trn-clairiere-marque {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.86rem;
  color: #cfd9b8;
  margin: 0 0 calc(var(--pas) * 0.4);
}
.trn-clairiere-texte h1 {
  color: #f6f8ea;
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);
  margin-block-end: calc(var(--pas) * 0.5);
}
.trn-clairiere-texte h1 em { font-style: normal; color: #d8c89a; }
.trn-clairiere-chapo {
  font-size: 1.08rem;
  line-height: 1.5;
  color: #e4e8d2;
  margin: 0 0 calc(var(--pas) * 0.9);
  max-width: 40rem;
}
.trn-clairiere-tal {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pas) * 1.6);
  border-block-start: 1px solid rgba(242, 244, 230, 0.35);
  padding-block-start: calc(var(--pas) * 0.7);
}
.trn-clairiere-tal b {
  display: block;
  font-family: var(--titre-police);
  font-size: 1.5rem;
  color: #f6f8ea;
}
.trn-clairiere-tal span {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.76rem;
  color: #cfd9b8;
}

/* ---------------------------------------------------------------
   5. SÉRIES (sections) et lignes de titre
   --------------------------------------------------------------- */
.trn-serie { padding-block: calc(var(--pas) * 1.5); }
.trn-serie + .trn-serie { border-block-start: var(--trait-fin); }

.trn-serie-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--pas);
  border-block-end: var(--trait-gras);
  padding-block-end: calc(var(--pas) * 0.35);
  margin-block-end: var(--pas);
}
.trn-serie-ligne h2 {
  margin: 0;
  font-size: 1.55rem;
}
.trn-serie-sous {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.82rem;
  color: var(--encre-douce);
  margin: 0;
}

/* ---------------------------------------------------------------
   6. FICHES: les cartes à image du journal
   --------------------------------------------------------------- */
.trn-fiches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--pas) calc(var(--pas) * 1.2);
}
.trn-fiche {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 0.5);
  padding-block-end: var(--pas);
  border-block-end: var(--trait-fin);
}
.trn-fiches .trn-fiche:last-child { border-block-end: none; }
.trn-fiche-photo {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border: var(--trait-fin);
}
.trn-fiche-categorie {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.78rem;
  color: var(--signal);
  margin: 0;
}
.trn-fiche h2, .trn-fiche h3 {
  font-size: 1.18rem;
  margin: 0;
  line-height: 1.22;
}
.trn-fiche h2 a, .trn-fiche h3 a { color: var(--encre); text-decoration: none; }
.trn-fiche h2 a:hover, .trn-fiche h3 a:hover { color: var(--accent); text-decoration: underline; }
.trn-fiche-resume {
  margin: 0;
  font-size: 0.98rem;
  color: var(--encre-douce);
}

/* ---------------------------------------------------------------
   7. GRILLE TRIBUNE + LISIÈRE (deux colonnes asymétriques)
   --------------------------------------------------------------- */
.trn-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--largeur-lisiere);
  gap: calc(var(--pas) * 2);
  align-items: start;
}
.trn-grille > .trn-lisiere { order: 2; }
.trn-grille > .trn-tribune { order: 1; }

.trn-lisiere {
  border-inline-start: var(--trait-gras);
  padding-inline-start: calc(var(--pas) * 1.2);
  font-size: 0.97rem;
}
.trn-lisiere h2 {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.95rem;
  border-block-end: var(--trait-fin);
  padding-block-end: calc(var(--pas) * 0.3);
  margin-block-start: calc(var(--pas) * 0.6);
}
.trn-lisiere > *:first-child { margin-block-start: 0; }

.trn-brieves { list-style: none; margin: 0; padding: 0; counter-reset: breve; }
.trn-brieves li {
  counter-increment: breve;
  padding-block-start: calc(var(--pas) * 0.55);
  border-block-start: var(--trait-fin);
  margin: 0;
}
.trn-brieves li::before {
  content: counter(breve, decimal-leading-zero);
  font-family: var(--titre-police);
  font-size: 1.35rem;
  color: var(--signal);
  display: block;
  line-height: 1;
}
.trn-brieves a { color: var(--encre); }

.trn-chiffres { list-style: none; margin: 0; padding: 0; }
.trn-chiffres li { border-block-start: var(--trait-fin); padding-block: calc(var(--pas) * 0.5); }
.trn-chiffres b {
  display: block;
  font-family: var(--titre-police);
  font-size: 1.4rem;
  color: var(--accent);
}
.trn-chiffres span { font-size: 0.9rem; color: var(--encre-douce); }

.trn-agenda { list-style: none; margin: 0; padding: 0; }
.trn-agenda li {
  border-block-start: var(--trait-fin);
  padding-block: calc(var(--pas) * 0.45);
  margin: 0;
}
.trn-agenda b {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.8rem;
  color: var(--signal);
  display: block;
}

/* ---------------------------------------------------------------
   8. SENTIER: fil d'Ariane
   --------------------------------------------------------------- */
.trn-sentier { margin-block: var(--pas) calc(var(--pas) * 0.4); }
.trn-sentier ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.55em;
  margin: 0;
  padding: 0;
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.8rem;
  color: var(--encre-douce);
}
.trn-sentier li + li::before { content: "›"; margin-inline-end: 0.55em; color: var(--filet-fort); }
.trn-sentier a { color: var(--encre-douce); text-decoration: none; }
.trn-sentier a:hover { color: var(--accent); text-decoration: underline; }

/* ---------------------------------------------------------------
   9. ARTICLE
   --------------------------------------------------------------- */
.trn-article { max-width: var(--mesure); }
.trn-marquage {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.84rem;
  margin: 0 0 calc(var(--pas) * 0.3);
}
.trn-marquage a { color: var(--signal); text-decoration: none; }
.trn-marquage a:hover { text-decoration: underline; }
.trn-article-tete h1 { font-size: clamp(1.65rem, 3.4vw, 2.35rem); }
.trn-signature {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.8rem;
  color: var(--encre-douce);
  border-block: var(--trait-fin);
  padding-block: calc(var(--pas) * 0.35);
  margin-block-end: var(--pas);
}
.trn-chapo {
  font-family: var(--titre-police);
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--encre-douce);
  margin-block-end: calc(var(--pas) * 1.1);
}
.trn-figure { margin-block-end: calc(var(--pas) * 1.3); }
.trn-figure img { width: 100%; border: var(--trait-gras); }
.trn-figure figcaption {
  font-size: 0.88rem;
  color: var(--encre-douce);
  padding-block-start: 0.4em;
  border-block-start: var(--trait-fin);
}

.trn-texte p { text-align: justify; hyphens: auto; }
.trn-texte h2 {
  font-size: 1.35rem;
  margin-block-start: calc(var(--pas) * 1.4);
  border-block-start: var(--trait-fin);
  padding-block-start: calc(var(--pas) * 0.5);
}
.trn-texte h3 { font-size: 1.12rem; margin-block-start: calc(var(--pas) * 1.1); }
.trn-texte blockquote {
  border-inline-start: var(--trait-gras);
  padding-inline-start: calc(var(--pas) * 0.9);
  font-family: var(--titre-police);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--encre-douce);
}
.trn-texte .trn-exergue {
  background: var(--surlignage);
  border: var(--trait-fin);
  padding: calc(var(--pas) * 0.8);
  font-family: var(--titre-police);
  font-size: 1.08rem;
}

.trn-defilant { overflow-x: auto; }
.trn-texte table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}
.trn-texte th {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.78rem;
  text-align: start;
  border-block: var(--trait-gras);
  padding: 0.45em 0.6em;
}
.trn-texte td { border-block-end: var(--trait-fin); padding: 0.45em 0.6em; vertical-align: top; }

.trn-aussi {
  border-block: var(--trait-double);
  padding-block: calc(var(--pas) * 0.9);
  margin-block-start: calc(var(--pas) * 1.5);
}
.trn-aussi-titre {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.88rem;
  margin: 0 0 calc(var(--pas) * 0.4);
}
.trn-aussi ul { list-style: none; margin: 0; padding: 0; }
.trn-aussi li { padding-block: 0.3em; border-block-start: var(--trait-fin); }

/* ---------------------------------------------------------------
   10. RUBRIQUES (pages)
   --------------------------------------------------------------- */
.trn-rubrique-tete {
  max-width: var(--mesure);
  border-block-end: var(--trait-double);
  padding-block-end: calc(var(--pas) * 1);
  margin-block-end: calc(var(--pas) * 1.2);
}
.trn-rubrique-tete h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.trn-rubrique-photo {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border: var(--trait-gras);
}
.trn-rubrique-intro { max-width: var(--mesure); }

/* ---------------------------------------------------------------
   11. OURS (pied de page)
   --------------------------------------------------------------- */
.trn-ours {
  border-block-start: var(--trait-double);
  margin-block-start: calc(var(--pas) * 2);
  padding-block: calc(var(--pas) * 1.3) 0;
  font-size: 0.95rem;
}
.trn-ours-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: calc(var(--pas) * 1.4);
}
.trn-ours h2, .trn-ours-titre {
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.85rem;
  margin: 0 0 calc(var(--pas) * 0.35);
}
.trn-ours ul { list-style: none; margin: 0; padding: 0; }
.trn-ours li { padding-block: 0.18em; }
.trn-ours-post { font-family: var(--titre-police); font-size: 1.05rem; }
.trn-ours-bas {
  border-block-start: var(--trait-fin);
  margin-block-start: calc(var(--pas) * 1.2);
  padding-block: var(--pas) 0;
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.76rem;
  color: var(--encre-douce);
}

/* ---------------------------------------------------------------
   12. BOUTONS et blocs de service
   --------------------------------------------------------------- */
.trn-retour {
  display: inline-block;
  font-family: var(--rubrique-police);
  text-transform: uppercase;
  letter-spacing: var(--capitales);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--papier);
  background: var(--accent);
  padding: 0.55em 1.1em;
  border: none;
}
.trn-retour:hover { background: var(--signal); color: var(--papier); }

.trn-perdu {
  max-width: var(--mesure);
  padding-block: calc(var(--pas) * 2);
}
.trn-perdu-liens { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 calc(var(--pas) * 1); }
.trn-perdu-liens li { border-block-start: var(--trait-fin); padding-block: 0.4em; }

.trn-page-simple { max-width: var(--mesure); padding-block: calc(var(--pas) * 0.6); }

/* ---------------------------------------------------------------
   13. ADAPTATIONS MOBILES
   --------------------------------------------------------------- */
@media (max-width: 62rem) {
  .trn-grille { grid-template-columns: minmax(0, 1fr); }
  .trn-lisiere {
    order: 2;
    border-inline-start: none;
    border-block-start: var(--trait-double);
    padding-inline-start: 0;
    padding-block-start: var(--pas);
  }
}

@media (max-width: 40rem) {
  .trn-edition { border-inline: none; }
  .trn-voies { margin-inline-start: 0; }
  .trn-clairiere { min-height: 14rem; }
  .trn-clairiere-tal { gap: calc(var(--pas) * 0.9); }
  .trn-texte p { text-align: start; }
}

@media print {
  .trn-clairiere-voile { background: none; }
  .trn-clairiere-texte { color: var(--encre); }
}