/* oncauvergne.fr : le sentier balisé (23 octobre 2026). Papier de carte clair, courbes de niveau discrètes, une balise peinte par étape. */
:root {
  --papier: #f8f6ef;
  --feuille: #fffdf8;
  --encre: #26302b;
  --gris: #5d6660;
  --trait: #e3dfd2;
  --courbe: #e9e4d4;
  --mousse: #3f6b55;
  --mousse-clair: #e6efe8;
  --terre: #b5523b;
  --sable: #efe7d3;
  --titre: 'Rosarivo', Georgia, serif;
  --texte: 'Hind Siliguri', 'Segoe UI', sans-serif;
  --accent: 'Overlock', 'Trebuchet MS', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--encre); background: var(--papier); font: 400 18px/1.7 var(--texte); }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.saut { position: absolute; left: -999px; }
.saut:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 9; }

/* la balise peinte du sentier : un trait blanc sur un trait couleur terre */
.balise { display: inline-flex; flex-direction: column; gap: 2px; width: 18px; flex: none; vertical-align: middle; }
.balise i { display: block; height: 5px; border-radius: 1px; }
.balise i:first-child { background: #fff; box-shadow: inset 0 0 0 1px #cfc8b4; }
.balise i:last-child { background: var(--terre); }

/* --- l'en-tête : la carte */
.carte { background: var(--feuille); border-bottom: 1px solid var(--trait);
  background-image: radial-gradient(ellipse at 88% 120%, transparent 38%, var(--courbe) 38.4%, transparent 39%, transparent 48%, var(--courbe) 48.4%, transparent 49%, transparent 58%, var(--courbe) 58.4%, transparent 59%); }
.carte__in { max-width: 1160px; margin: 0 auto; padding: 24px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; }
.nom { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; margin: 0; }
.relief { width: 62px; height: 44px; flex: none; fill: none; stroke: var(--mousse); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.relief .relief__2 { stroke: #7d9c89; }
.relief .relief__3 { stroke: var(--terre); }
.nom > span { display: flex; flex-direction: column; }
.nom__t { font: 400 37px/1.05 var(--titre); color: var(--mousse); }
.nom__sous { font: 400 16px/1.3 var(--accent); color: var(--gris); margin-top: 4px; }
.etapes { display: flex; flex-wrap: wrap; gap: 8px; }
.etape { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--trait); border-radius: 999px; background: var(--feuille); font: 700 16px/1.2 var(--accent); text-decoration: none; }
.etape:hover, .etape[aria-current] { border-color: var(--mousse); background: var(--mousse-clair); color: var(--mousse); }

main { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section-t { font: 400 30px/1.2 var(--titre); color: var(--mousse); margin: 0 0 8px; }

/* --- au départ */
.depart { padding: 46px 0 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 48px; align-items: start; }
.depart > * { min-width: 0; }
.depart__sur { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 15px/1 var(--accent); text-transform: uppercase; letter-spacing: .14em; color: var(--terre); }
.depart h1 { font: 400 clamp(28px, 3.1vw, 40px)/1.25 var(--titre); margin: 6px 0 0; overflow-wrap: anywhere; }
.depart__mot { padding-top: 8px; color: var(--gris); }
.depart__mot p { margin: 0 0 14px; }

/* --- le tracé */
.trace { padding: 26px 30px 30px; margin-bottom: 34px; background: var(--feuille); border: 1px solid var(--trait); border-radius: 16px; }
.trace__intro { margin: 0 0 22px; color: var(--gris); }
.trace__etapes { list-style: none; margin: 0; padding: 0; position: relative; }
.trace__etapes::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; border-left: 3px dashed #c9bfa6; }
.borne { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 0 0 22px; }
.borne:last-child { padding-bottom: 0; }
.borne__n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--feuille); border: 3px solid var(--mousse); font: 700 20px/1 var(--accent); color: var(--mousse); position: relative; }
.borne__c { min-width: 0; padding-top: 4px; }
.borne__c h3 { margin: 0 0 2px; font: 400 23px/1.25 var(--titre); }
.borne__c h3 a { color: var(--mousse); }
.borne__c p { margin: 0; color: var(--gris); overflow-wrap: anywhere; }
.borne__etat { margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: var(--sable); font: 700 13.5px/1.3 var(--accent); text-transform: uppercase; letter-spacing: .08em; color: #7a6a45; white-space: nowrap; }
.borne--ouverte .borne__n { background: var(--mousse); color: #fff; }
.borne--ouverte .borne__etat { background: var(--mousse-clair); color: var(--mousse); }

/* --- les repères */
.reperes { margin-bottom: 46px; }
.reperes .section-t { margin-bottom: 16px; }
.reperes__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.reperes__liste li { min-width: 0; padding: 20px 22px; background: var(--feuille); border: 1px solid var(--trait); border-top: 5px solid var(--mousse); border-radius: 12px; }
.reperes__liste li:nth-child(2) { border-top-color: var(--terre); }
.reperes__liste li:nth-child(3) { border-top-color: #c9a64a; }
.reperes__liste p { margin: 0; color: var(--gris); font-size: 16.5px; }
.reperes__liste .reperes__t { margin: 0 0 8px; font: 400 21px/1.3 var(--titre); color: var(--encre); }

/* --- haltes (listes d'articles, quand il y en aura) */
.haltes-bloc { padding: 10px 0 36px; }
.haltes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 900px; }
.halte { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px; text-decoration: none; background: var(--feuille); border: 1px solid var(--trait); border-radius: 12px; }
.halte__img { display: block; overflow: hidden; border-radius: 8px; background: var(--sable); }
.halte__img img { width: 220px; height: 138px; object-fit: cover; }
.halte__c { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.halte__etape { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1.2 var(--accent); color: var(--terre); text-decoration: none; }
.halte__t { font: 400 21px/1.3 var(--titre); overflow-wrap: anywhere; }
.halte__d { font-size: 15px; color: var(--gris); }
.halte:hover .halte__t { color: var(--mousse); }

/* --- rubrique */
.titre-etape { display: flex; gap: 20px; align-items: center; margin: 34px 0 26px; padding: 22px 26px; background: var(--feuille); border: 1px solid var(--trait); border-radius: 16px; }
.titre-etape > div { min-width: 0; }
.titre-etape h1 { font: 400 clamp(30px, 4vw, 42px)/1.15 var(--titre); margin: 0 0 6px; color: var(--mousse); }
.titre-etape p { margin: 0; color: var(--gris); }

/* --- article et pages : le récit */
.recit { max-width: 800px; margin: 34px auto 18px; padding: 36px 44px 32px; background: var(--feuille); border: 1px solid var(--trait); border-radius: 16px; }
.recit__tete h1 { font: 400 clamp(30px, 3.5vw, 42px)/1.2 var(--titre); margin: 12px 0 12px; overflow-wrap: anywhere; }
.recit--page .recit__tete h1 { margin-top: 0; color: var(--mousse); }
.recit__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 22px; font: 400 15.5px/1.4 var(--accent); color: var(--gris); }
.recit__img { margin: 0 0 26px; }
.recit__img img { border-radius: 10px; }
.recit__avis { margin: 30px 0 0; padding: 14px 18px; background: var(--mousse-clair); border-left: 4px solid var(--mousse); border-radius: 6px; font-size: 16px; }
.texte { overflow-wrap: anywhere; }
.texte h2 { font: 400 27px/1.3 var(--titre); margin: 1.6em 0 .5em; color: var(--mousse); }
.texte h3 { font: 700 20px/1.3 var(--accent); margin: 1.4em 0 .4em; }
.texte a { color: var(--mousse); text-underline-offset: 3px; }
.texte a:hover { color: var(--terre); }
.texte img { border-radius: 8px; margin: 1em 0; }
.texte table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 16px; display: block; overflow-x: auto; }
.texte th, .texte td { border: 1px solid var(--trait); padding: 8px 10px; text-align: left; vertical-align: top; }
.texte th { background: var(--papier); }
.texte blockquote { margin: 1.4em 0; padding: 12px 18px; background: var(--papier); border-left: 4px solid var(--terre); }

/* --- formulaire */
.formulaire { margin-top: 26px; padding: 20px 22px; background: var(--papier); border: 1px solid var(--trait); border-radius: 12px; }
.formulaire label { display: block; font-weight: 600; margin-bottom: 4px; }
.formulaire input, .formulaire textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid #cdc6b2; border-radius: 6px; background: #fff; }
.formulaire button { font: 700 17px/1 var(--accent); background: var(--mousse); color: #fff; border: 0; border-radius: 999px; padding: 13px 26px; cursor: pointer; }
.formulaire button:hover { background: var(--terre); }
.formulaire__ok { background: var(--mousse-clair); padding: 10px 14px; border-radius: 6px; }
.formulaire__piege { position: absolute; left: -9999px; }

/* --- pied : le topo */
.topo { margin-top: 30px; background: var(--feuille); border-top: 1px solid var(--trait); }
.topo__in { max-width: 1160px; margin: 0 auto; padding: 34px 24px 18px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.topo__in > * { min-width: 0; }
.topo .nom__t { font-size: 30px; }
.topo .relief { width: 50px; height: 36px; }
.topo__nom > p:last-child { color: var(--gris); font-size: 16.5px; max-width: 420px; }
.topo__t { font: 700 14px/1 var(--accent); text-transform: uppercase; letter-spacing: .14em; color: var(--gris); margin: 6px 0 12px; }
.topo ul { list-style: none; margin: 0; padding: 0; }
.topo li { margin: 0 0 7px; }
.topo li a { text-decoration: none; }
.topo li a:hover { text-decoration: underline; }
.topo__urgence p { margin: 0 0 8px; font-size: 16.5px; }
.topo__urgence strong { color: var(--terre); font: 700 19px/1 var(--accent); }
.topo__independant { max-width: 1160px; margin: 0 auto; padding: 14px 24px 26px; font-size: 15px; color: var(--gris); border-top: 1px dashed var(--trait); }

@media (max-width: 1000px) {
  .depart { grid-template-columns: minmax(0, 1fr); }
  .reperes__liste { grid-template-columns: minmax(0, 1fr); }
  .topo__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .topo__nom { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .carte__in, main, .topo__in, .topo__independant { padding-left: 16px; padding-right: 16px; }
  .nom__t { font-size: 31px; }
  .relief { width: 50px; height: 36px; }
  .trace { padding: 20px 16px 22px; }
  .borne { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
  .borne__etat { grid-column: 2; justify-self: start; margin-top: 0; }
  .halte { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .halte__img img { width: 110px; height: 80px; }
  .titre-etape { flex-direction: column; align-items: flex-start; padding: 18px; }
  .recit { padding: 24px 16px; margin-top: 18px; }
  .topo__in { grid-template-columns: minmax(0, 1fr); }
}