/* sentiers.css — ce que le blog ajoute au kit Identity (préfixe st-).
   Charte 70/20/10 d'Identity : le papier domine, le sapin accompagne, le rouge-gorge ponctue.
   Lecture d'abord : colonne de 65 à 75 caractères, Figtree pour le texte. */

/* ---------- marque, pied ---------- */
.st-marque img { border-radius: 50%; }
.st-marque__suite { font-family: var(--font-texte); font-weight: 500; font-size: 14px; color: var(--encre-douce); margin-left: 4px; }
.st-pied__marque { display: grid; gap: var(--espace-3); align-content: start; }
.st-pied__devise { display: inline-flex; align-items: center; gap: var(--espace-2); }
.bw-pied a .bw-icone { vertical-align: -0.2em; }

/* ---------- utilitaires ---------- */
.st-etroit { max-width: 560px; }
.st-moyen { max-width: 820px; }
.st-marge { margin-top: var(--espace-6); }
.st-vide { display: grid; gap: var(--espace-3); justify-items: start; padding-block: var(--espace-8); }
.st-pagination { margin-top: var(--espace-8); }

/* ---------- accueil ---------- */
.st-hero .bw-affiche { max-width: 14ch; }
.st-hero__categories { margin-top: var(--espace-2); }
.st-hero__categories .bw-etiquette { font-size: 14px; padding: 6px 14px; }
.st-hero__categories .bw-icone { width: 14px; height: 14px; }

/* ---------- cartes d'article ---------- */
.st-carte { overflow: hidden; }
.st-carte__motif {
  margin: calc(-1 * var(--espace-6)) calc(-1 * var(--espace-6)) var(--espace-2);
  aspect-ratio: 16 / 4; background-color: var(--rouge-gorge-pale);
  background-image: url("../identite/web/assets/courbes-de-niveau.52004264d8f9.svg"); background-size: 220%; background-position: 30% 40%;
  transition: background-position .8s cubic-bezier(.2, .7, .2, 1);
}
.st-carte__motif--nature { background-color: var(--sapin-pale); background-position: 70% 60%; }
.st-carte:hover .st-carte__motif { background-position: 36% 46%; }
.st-carte:hover .st-carte__motif--nature { background-position: 64% 54%; }
.bw-carte--une .st-carte__motif { aspect-ratio: 16 / 5; }
:root[data-theme="dark"] .st-carte__motif { background-image: url("../identite/web/assets/courbes-de-niveau-sombre.20c6211daeeb.svg"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-carte__motif { background-image: url("../identite/web/assets/courbes-de-niveau-sombre.20c6211daeeb.svg"); } }

/* ---------- article ---------- */
.st-article__tete { display: grid; gap: var(--espace-4); padding-block: var(--espace-12) var(--espace-8); max-width: calc(68ch + 2 * var(--espace-8)); }
.st-article__titre { font-size: clamp(32px, 5vw, 46px); line-height: 1.1; letter-spacing: -0.02em; }
.st-article__meta { font-size: 14px; color: var(--encre-douce); }
.st-article > .bw-conteneur { max-width: calc(68ch + 2 * var(--espace-8)); padding-bottom: var(--espace-16); }
.st-article__etiquettes { margin-top: var(--espace-8); }
.st-article__auteur { margin-top: var(--espace-8); padding-top: var(--espace-6); border-top: 1px solid var(--trait); }
.st-article__auteur img { border-radius: 50%; }

.st-prose { font-size: 18px; line-height: 30px; }
.st-prose > h2 { font-size: clamp(23px, 3vw, 27px); }
.st-prose a { word-break: break-word; }
.st-prose pre.bw-code { font-size: 14px; }
.st-prose img { border-radius: var(--arrondi-m); display: block; }
.st-prose .st-citation { margin: 0; padding: var(--espace-1) 0 var(--espace-1) var(--espace-6); border-left: 2px solid var(--rouge-gorge); color: var(--encre-douce); font-style: italic; }
.st-prose .st-citation > * + * { margin-top: var(--espace-3); }
.st-prose .footnote { font-size: 15px; line-height: 24px; color: var(--encre-douce); }
.st-prose .footnote hr { margin: var(--espace-8) 0 var(--espace-4); }
.st-prose .footnote-ref { text-decoration: none; font-weight: 600; }
.st-prose .bw-tableau-cadre { font-size: 15px; }
.st-prose dt { font-weight: 650; }
.st-prose dd { margin-left: var(--espace-6); }

.st-bandeau-apercu { background: var(--ocre); color: var(--sur-rouge-gorge); padding-block: var(--espace-2); font-weight: 600; font-size: 14px; }
.st-bandeau-apercu .bw-btn--secondaire { color: inherit; border-color: currentColor; }

/* ---------- 404 ---------- */
.st-motif-clair { opacity: .5; object-fit: cover; }

/* ---------- l'éditeur ---------- */
.st-ecrire main { min-height: 70vh; }
.st-pied-ecrire { border-top: 1px solid var(--trait); padding-block: var(--espace-4); }
.st-pied-ecrire .bw-rangee { justify-content: space-between; }
.st-porte { gap: var(--espace-4); justify-items: start; }
.st-porte .bw-btn--grand { width: 100%; }
.st-section-ecrire { padding-top: var(--espace-8); }
.st-tableau__tete { display: flex; justify-content: space-between; align-items: center; gap: var(--espace-4); flex-wrap: wrap; }

.st-liste__titre { font-size: 15px; line-height: 20px; font-family: var(--font-texte); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); margin: var(--espace-8) 0 var(--espace-3); }
.st-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); }
.st-liste__lien, .st-liste__ligne, .st-revision {
  display: grid; gap: 4px; padding: var(--espace-3) var(--espace-4); border-radius: var(--arrondi-m);
  background: var(--papier-releve); border: 1px solid var(--trait); color: var(--encre); text-decoration: none;
}
.st-liste__ligne { grid-template-columns: 1fr auto; align-items: center; gap: var(--espace-4); }
.st-liste__ligne b, .st-liste__lien b { display: block; font-weight: 600; }
.st-liste__lien:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-douce); }
.st-liste__meta { display: flex; flex-wrap: wrap; gap: var(--espace-2); align-items: center; font-size: 14px; line-height: 20px; color: var(--encre-douce); }
.st-liste__meta .bw-etiquette, .st-liste__meta .bw-pastille { font-size: 12px; }
.st-revision summary { cursor: pointer; }
.st-revision__texte { max-height: 320px; margin-block: var(--espace-3); white-space: pre-wrap; }

.st-editeur__barre { position: sticky; top: 64px; z-index: 10; background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--trait); padding-block: var(--espace-2); }
.st-editeur__etat { flex: 1; min-width: 8em; }
.st-editeur__corps { display: grid; gap: var(--espace-6); padding-block: var(--espace-6) var(--espace-16); }
.st-titre {
  width: 100%; border: 0; border-bottom: 1.5px solid var(--trait); background: transparent; color: var(--encre);
  font-family: var(--font-titre); font-weight: 600; font-size: clamp(26px, 5vw, 36px); line-height: 1.2; padding: var(--espace-2) 0;
}
.st-titre:focus-visible { outline: none; box-shadow: none; border-bottom-color: var(--rouge-gorge); }
.st-chapo { min-height: 0; }
.st-redaction { display: grid; gap: 0; }
.st-redaction .bw-onglets__liste { align-items: center; }
.st-redaction__compte { margin-left: auto; padding-right: var(--espace-2); white-space: nowrap; }
.st-outils {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: var(--espace-2) 0;
  position: sticky; top: 118px; z-index: 5; background: var(--papier);
}
.st-outils button {
  flex: none; min-width: 40px; height: 40px; border: 1px solid var(--trait); border-radius: var(--arrondi-s);
  background: var(--papier-releve); color: var(--encre); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  display: grid; place-items: center;
}
.st-outils button:hover { border-color: var(--trait-fort); }
.st-outils .bw-icone { width: 16px; height: 16px; }
.st-texte {
  width: 100%; min-height: 60vh; resize: vertical; font-family: var(--font-code); font-size: 16px; line-height: 27px;
  color: var(--encre); background: var(--papier-releve); border: 1.5px solid var(--trait-fort); border-radius: var(--arrondi-s);
  padding: var(--espace-4); tab-size: 2;
}
.st-texte:focus-visible { border-color: var(--rouge-gorge); }
.st-apercu { padding: var(--espace-6) 0; max-width: 68ch; }

.st-remarques { display: grid; gap: var(--espace-4); }
.st-remarques__resume { white-space: normal; }
.st-remarques__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-3); }
.st-remarque { padding: var(--espace-4); gap: var(--espace-2); }
.st-remarque__extrait del { text-decoration-color: var(--brique); color: var(--encre-douce); }
.st-remarque__proposition ins { text-decoration: none; background: var(--sapin-pale); border-radius: 4px; padding: 0 2px; }
.st-remarque__extrait, .st-remarque__proposition { font-family: var(--font-code); font-size: 14px; line-height: 22px; white-space: pre-wrap; }

.st-publication { gap: var(--espace-4); }
.st-programmer .bw-saisie { width: auto; }
.st-supprimer summary { cursor: pointer; color: var(--brique); }
.st-supprimer form { margin-top: var(--espace-3); }
.st-consignes { min-height: 360px; font-family: var(--font-code); font-size: 15px; }
.st-copiable { white-space: pre-wrap; word-break: break-all; margin-block: var(--espace-2); }
.st-liste-coches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); }
.st-liste-coches li { display: flex; gap: var(--espace-2); align-items: flex-start; }
.st-liste-coches .bw-icone { margin-top: 3px; flex: none; }

@media (max-width: 760px) {
  .st-editeur__barre { top: 64px; }
  .st-editeur__apercu { display: none; }
  .st-texte { min-height: 55vh; font-size: 16px; }
  .st-prose { font-size: 17px; line-height: 28px; }
}