/* Pélion · le site. Direction : la carte de sentier imprimée (marque : marque/MARQUE.md).
   Émotion : la confiance qu'on a dans un bon guide de montagne. Du papier, deux encres (vert et ocre des balises),
   une gravure en trame de points, des courbes de niveau, des panneaux indicateurs, des notes de bas de page.
   Ce qu'on s'interdit (liste anti « AI slop ») : thème sombre, dégradés, ombres, pilules, cartes à coins doux en rangée
   de trois, badge au-dessus du titre, titres en deux temps, fausse fenêtre d'app, fondu au défilement, police mono. */

:root {
  --papier: #eef0e9;
  --papier-clair: #f6f7f2;
  --encre: #163b2c;
  --encre-fonce: #0c2219;
  --graphite: #252a26;
  --gris: #5a645d;
  --ocre: #c4932f;
  --ocre-fonce: #94701f;
  --courbe: #7f9a88;
  --trait: rgba(22, 59, 44, 0.2);
  --trait-fort: rgba(22, 59, 44, 0.45);

  --f-titre: "Marcellus", "Optima", "Palatino", Georgia, serif;
  --f-texte: "Barlow", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-panneau: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;

  --max: 1180px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--papier); }
body {
  margin: 0; background: var(--papier); color: var(--graphite);
  font: 400 18.5px/1.62 var(--f-texte); -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}
h1, h2, h3, p, ul, ol, figure, dl, dd, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--encre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, svg { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--ocre); outline-offset: 3px; }
[id] { scroll-margin-top: 96px; }
strong { font-weight: 600; color: var(--encre-fonce); }

/* ---------- Mise en page ---------- */
.cadre { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.cadre > .dedans { max-width: var(--max); margin-inline: auto; }
.bloc { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--trait); }
.bloc.clair { background: var(--papier-clair); }
.bloc > .dedans { display: grid; gap: clamp(28px, 4vw, 44px); }
.deux { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.deux > *, .moitie > * { min-width: 0; }
.moitie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.pile-v { display: grid; gap: 18px; align-content: start; }

/* ---------- Typographie ---------- */
h1, h2 { font-family: var(--f-titre); font-weight: 400; color: var(--encre-fonce); text-wrap: balance; letter-spacing: -0.005em; }
h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.06; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; }
h3 { font: 600 1.22rem/1.3 var(--f-texte); color: var(--encre-fonce); }
p { max-width: 62ch; }
.chapeau { font-size: 1.2rem; line-height: 1.55; color: var(--gris); max-width: 54ch; }
.petit { font-size: .88rem; color: var(--gris); }
.etiquette { font: 600 .82rem/1.2 var(--f-panneau); letter-spacing: .08em; text-transform: uppercase; color: var(--ocre-fonce); }
.grec { font-family: var(--f-titre); letter-spacing: .3em; }
.liste { display: grid; gap: 10px; }
.liste li { position: relative; padding-left: 22px; }
.liste li::before { content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 9px; border: 2px solid var(--ocre); transform: rotate(45deg); }
sup a { font: 600 .72em var(--f-panneau); text-decoration: none; color: var(--ocre-fonce); padding: 0 1px; }

/* Infobulles sur les mots du métier */
.info { border-bottom: 1px dotted currentColor; cursor: help; position: relative; }
.info::after { content: attr(data-info); display: none; position: absolute; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(260px, 70vw);
  padding: 8px 10px; background: var(--encre-fonce); color: var(--papier-clair); font: 400 .82rem/1.4 var(--f-texte); z-index: 5; }
.info:hover::after, .info:focus::after { display: block; }

/* ---------- Panneaux indicateurs (les boutons) ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.panneau {
  display: inline-flex; align-items: center; gap: 12px; min-height: 50px;
  padding: 12px 34px 12px 18px; background: var(--ocre); color: var(--encre-fonce);
  font: 600 1.08rem/1.15 var(--f-panneau); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  transition: background .15s, transform .08s; -webkit-tap-highlight-color: transparent; cursor: pointer; border: 0;
}
.panneau:hover { background: #d3a23c; }
.panneau:active { transform: translateY(1px) scale(.985); }
.panneau .prix { font-weight: 500; opacity: .85; letter-spacing: .02em; }
.panneau.vert { background: var(--encre); color: var(--papier-clair); }
.panneau.vert:hover { background: var(--encre-fonce); }
.lien { font-weight: 600; color: var(--encre); text-decoration: underline; text-decoration-color: var(--ocre); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lien:hover { text-decoration-color: var(--encre); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--papier); border-bottom: 1px solid var(--trait-fort); }
.entete .dedans { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 12px; }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre-fonce); font: 400 1.35rem var(--f-titre); }
.marque img { width: 30px; height: 30px; }
.entete nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font: 600 .98rem var(--f-panneau); letter-spacing: .06em; text-transform: uppercase; }
.entete nav a { text-decoration: none; color: var(--gris); padding: 4px 0; border-bottom: 2px solid transparent; }
.entete nav a:hover { color: var(--encre-fonce); }
.entete nav a[aria-current] { color: var(--encre-fonce); border-bottom-color: var(--ocre); }

/* ---------- Héros : la gravure et les courbes ---------- */
.heros { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 96px) clamp(48px, 7vw, 88px); }
.heros .courbes { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; pointer-events: none; }
.heros .dedans { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.heros .dedans > * { min-width: 0; }
.heros .texte { display: grid; gap: 24px; }
.heros.court .dedans { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.planche { display: grid; gap: 10px; }
.planche img { width: 100%; border: 1px solid var(--trait-fort); background: var(--papier); }
.legende { font-size: .86rem; color: var(--gris); display: flex; gap: 10px; }
.legende b { font: 600 .82rem var(--f-panneau); letter-spacing: .08em; text-transform: uppercase; color: var(--ocre-fonce); white-space: nowrap; }

/* ---------- Les vraies captures, annotées ---------- */
.capture { display: grid; gap: 12px; }
.capture .image { position: relative; border: 1px solid var(--trait-fort); background: #fff; }
.capture .image img { width: 100%; }
.repere { position: absolute; width: 30px; height: 30px; display: grid; place-items: center; background: var(--ocre); color: var(--encre-fonce);
  font: 700 .95rem var(--f-panneau); border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--papier-clair); }
.notes { display: grid; gap: 14px; }
.notes li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.notes li > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; background: var(--ocre); color: var(--encre-fonce); font: 700 .95rem var(--f-panneau); border-radius: 50%; }

/* ---------- Le calcul ---------- */
.calcul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--trait-fort); background: var(--papier-clair); }
.calcul > * { min-width: 0; padding: clamp(20px, 3vw, 36px); }
.calcul .entrees { display: grid; gap: 22px; }
.curseur { display: grid; gap: 6px; }
.curseur label { display: flex; justify-content: space-between; gap: 14px; font-weight: 500; }
.curseur output { font: 600 1.05rem var(--f-panneau); color: var(--encre); white-space: nowrap; }
.curseur input[type=range] { width: 100%; accent-color: var(--encre); height: 28px; }
.calcul .sortie { border-left: 1px solid var(--trait-fort); display: grid; gap: 16px; align-content: center; background-image: repeating-linear-gradient(transparent 0 33px, var(--trait) 33px 34px); }
.calcul .gros { font: 600 clamp(3rem, 6vw, 4.6rem)/1 var(--f-panneau); color: var(--encre-fonce); }
.calcul .gros small { display: block; font: 400 1.05rem/1.5 var(--f-texte); color: var(--gris); margin-top: 12px; }

/* ---------- Le profil du sentier (les prix) ---------- */
.profil { border: 1px solid var(--trait-fort); background: var(--papier-clair); padding: clamp(10px, 2vw, 24px); }
.profil svg { width: 100%; height: auto; }
.profil .terrain { fill: rgba(22, 59, 44, .08); stroke: var(--encre); stroke-width: 2; }
.profil .balise { fill: var(--ocre); stroke: var(--encre-fonce); stroke-width: 1.5; }
.profil text { font-family: var(--f-panneau); fill: var(--encre-fonce); }
.profil .axe { stroke: var(--trait-fort); stroke-width: 1; }
.profil .sentier-trace { fill: none; stroke: var(--ocre-fonce); stroke-width: 2.5; stroke-dasharray: 8 6; }
.stations { display: grid; border-top: 2px solid var(--encre); }
.station { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: clamp(14px, 3vw, 36px); padding: 24px 0; border-bottom: 1px solid var(--trait); align-items: start; }
.station .alt { font: 600 1rem/1.3 var(--f-panneau); letter-spacing: .06em; text-transform: uppercase; color: var(--ocre-fonce); }
.station .alt b { display: block; font: 400 1.25rem var(--f-titre); text-transform: none; letter-spacing: 0; color: var(--encre-fonce); }
.station h3 { font: 400 1.6rem/1.2 var(--f-titre); margin-bottom: 6px; }
.station p { color: var(--gris); }
.station .achat { display: grid; gap: 10px; justify-items: end; text-align: right; }
.station .prix-grand { font: 600 1.9rem/1 var(--f-panneau); color: var(--encre-fonce); white-space: nowrap; }
.station .prix-grand small { display: block; font: 400 .85rem/1.3 var(--f-texte); color: var(--gris); margin-top: 4px; }

/* ---------- Pile de valeur et caisse ---------- */
.inventaire { border-top: 2px solid var(--encre); }
.inventaire li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--trait); align-items: baseline; }
.inventaire li > div { display: grid; gap: 2px; min-width: 0; }
.inventaire li span { color: var(--gris); font-size: .95rem; }
.inventaire li .v { font: 600 1.05rem var(--f-panneau); color: var(--gris); white-space: nowrap; }
.inventaire li.total { border-bottom: 2px solid var(--encre); }
.inventaire li.total b { font: 400 1.3rem var(--f-titre); }
.inventaire li.total .v { color: var(--encre-fonce); text-decoration: line-through; text-decoration-color: var(--ocre); text-decoration-thickness: 2px; }
.caisse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--trait-fort); }
.caisse > * { min-width: 0; padding: clamp(22px, 3.4vw, 40px); display: grid; gap: 16px; align-content: start; }
.caisse .payer { background: var(--papier-clair); }
.caisse .prix-grand { font: 600 clamp(3rem, 6vw, 4.4rem)/1 var(--f-panneau); color: var(--encre-fonce); display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.caisse .prix-grand s { font-size: .45em; color: var(--gris); text-decoration-color: var(--ocre); }
.caisse .garantie { background: var(--encre); color: var(--papier-clair); }
.caisse .garantie h3 { font: 400 1.7rem/1.2 var(--f-titre); color: #fff; }
.caisse .garantie p { color: rgba(246, 247, 242, .92); }
.caisse .garantie .part { font-size: .92rem; border-top: 1px solid rgba(246, 247, 242, .3); padding-top: 14px; }
.caisse .garantie .etiquette { color: var(--ocre); }

/* ---------- Tableaux (règle du GO) et fiches techniques ---------- */
.tableau { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--trait); }
.tableau th { font: 600 .9rem var(--f-panneau); letter-spacing: .08em; text-transform: uppercase; color: var(--ocre-fonce); border-bottom: 2px solid var(--encre); }
.defile { overflow-x: auto; }
.defile .tableau { min-width: 560px; }
.fiche { border: 1px solid var(--trait-fort); background: var(--papier-clair); padding: 6px 20px 20px; display: grid; gap: 16px; }
.fiche dl { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.fiche dt, .fiche dd { padding: 10px 0; border-bottom: 1px solid var(--trait); }
.fiche dt { color: var(--gris); padding-right: 18px; }
.fiche dd { text-align: right; font-weight: 500; }

/* ---------- Les documents imprimés (transcript de Sténo, fenêtre de Guidance) ---------- */
.feuille { background: #fbfbf8; border: 1px solid var(--trait-fort); padding: clamp(18px, 3vw, 34px); font-size: .97rem; display: grid; gap: 12px; position: relative; }
.feuille .titre-doc { font: 400 1.25rem var(--f-titre); color: var(--encre-fonce); padding-right: 90px; }
.feuille .meta { font: 500 .85rem var(--f-panneau); letter-spacing: .05em; color: var(--gris); text-transform: uppercase; }
.feuille .ligne-t { display: grid; grid-template-columns: 56px 104px minmax(0, 1fr); gap: 10px; }
.feuille .ligne-t .h { font: 500 .9rem var(--f-panneau); color: var(--gris); }
.feuille .ligne-t .qui { font-weight: 600; color: var(--encre); }
.feuille .note-mise { background: rgba(196, 147, 47, .18); padding: 1px 6px; }
.feuille .tampon { position: absolute; right: 18px; top: 16px; font: 600 .78rem var(--f-panneau); letter-spacing: .1em; color: var(--ocre-fonce); border: 1.5px solid var(--ocre-fonce); padding: 3px 8px; transform: rotate(3deg); }
.fenetre-guidance { background: #fbfbf8; border: 1px solid var(--trait-fort); padding: 20px; display: grid; gap: 12px; max-width: 440px; position: relative; }
.fenetre-guidance .compte { font: 600 .9rem var(--f-panneau); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.fenetre-guidance .titre-etape { font-weight: 600; font-size: 1.15rem; color: var(--encre-fonce); }
.fenetre-guidance .chemin { font: 500 .95rem var(--f-panneau); background: var(--papier); padding: 6px 10px; }
.fenetre-guidance .boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.fenetre-guidance .boutons span { font: 600 .9rem var(--f-panneau); letter-spacing: .04em; padding: 7px 14px; border: 1px solid var(--trait-fort); }
.fenetre-guidance .boutons span:first-child { background: var(--encre); color: #fff; border-color: var(--encre); }
.fenetre-guidance .copie { display: inline-block; font: 500 .9rem var(--f-panneau); border: 1px dashed var(--trait-fort); padding: 3px 9px; }
.fenetre-guidance .tampon { position: absolute; right: 14px; top: 14px; font: 600 .74rem var(--f-panneau); letter-spacing: .1em; color: var(--ocre-fonce); border: 1.5px solid var(--ocre-fonce); padding: 2px 7px; transform: rotate(3deg); }

/* ---------- Journal des nouveautés ---------- */
.journal { border-top: 2px solid var(--encre); }
.journal article { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(16px, 4vw, 48px); padding: 28px 0; border-bottom: 1px solid var(--trait); }
.journal time { font: 600 1rem/1.3 var(--f-panneau); letter-spacing: .06em; text-transform: uppercase; color: var(--ocre-fonce); }
.journal h3 { font: 400 1.55rem/1.2 var(--f-titre); margin-bottom: 8px; }
.journal p + p, .journal p + .liste { margin-top: 10px; }

/* ---------- Questions ---------- */
.questions { border-top: 2px solid var(--encre); }
details { border-bottom: 1px solid var(--trait); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 600; color: var(--encre-fonce); -webkit-tap-highlight-color: transparent; }
summary:active { opacity: .7; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 600 1.2rem var(--f-panneau); color: var(--ocre-fonce); }
details[open] summary::after { content: "–"; }
details p { padding-bottom: 16px; color: var(--gris); }

/* ---------- Texte long (conditions, à propos) ---------- */
.texte-long { display: grid; gap: 16px; max-width: 760px; }
.texte-long h2 { font-size: 1.7rem; margin-top: 18px; }

/* ---------- Notes de bas de page ---------- */
.notes-bas { border-top: 1px solid var(--trait-fort); padding-top: 14px; display: grid; gap: 6px; font-size: .84rem; color: var(--gris); }
.notes-bas li { display: grid; grid-template-columns: 22px minmax(0, 1fr); }
.notes-bas li b { font: 600 .84rem var(--f-panneau); color: var(--ocre-fonce); }

/* ---------- Pied de page ---------- */
.pied { position: relative; overflow: hidden; background: var(--encre-fonce); color: rgba(246, 247, 242, .88); padding-block: 56px 34px; }
.pied .courbes { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .14; pointer-events: none; }
.pied .dedans { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.pied h3 { font: 600 .9rem var(--f-panneau); letter-spacing: .1em; text-transform: uppercase; color: var(--ocre); margin-bottom: 10px; }
.pied a { color: rgba(246, 247, 242, .88); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied li + li { margin-top: 6px; }
.pied .marque { color: #fff; }
.pied p { margin-top: 10px; font-size: .95rem; }
.pied .bas { grid-column: 1 / -1; border-top: 1px solid rgba(246, 247, 242, .2); padding-top: 18px; font-size: .85rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

@media (max-width: 900px) {
  .deux, .moitie, .heros .dedans, .calcul, .caisse, .station, .journal article { grid-template-columns: minmax(0, 1fr); }
  .calcul .sortie { border-left: 0; border-top: 1px solid var(--trait-fort); }
  .station .achat { justify-items: start; text-align: left; }
  .pied .dedans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feuille .ligne-t { grid-template-columns: 50px minmax(0, 1fr); }
  .feuille .ligne-t > :last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Les listes des conditions */
.liste-doc ul { display: grid; gap: 10px; }
.liste-doc li { position: relative; padding-left: 22px; }
.liste-doc li::before { content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 9px; border: 2px solid var(--ocre); transform: rotate(45deg); }