/* grimpe-haut.fr : feuille propre au site, 14 octobre 2026.
   Un topo d escalade : ardoise, craie, orange de corde, courbes de niveau.
   Oswald en capitales pour les titres, Source Serif pour le texte. */

:root {
  --ardoise: #1f2a30;
  --ardoise-2: #2b3a42;
  --roche: #5b6a70;
  --craie: #f4f1ea;
  --craie-2: #e9e4d8;
  --corde: #e8622c;
  --corde-f: #b8461a;
  --sapin: #2f5d50;
  --encre: #1c2327;
  --gris: #59646a;
  --titre: 'Oswald', 'Arial Narrow', sans-serif;
  --texte: 'Source Serif 4', Georgia, serif;
  --large: 70rem;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--craie); color: var(--encre); font: 400 1.125rem/1.7 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--corde-f); text-underline-offset: .2em; }
a:hover { color: var(--corde); }
:focus-visible { outline: 3px solid var(--corde); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.15; letter-spacing: .01em; }
.cordee { width: min(100% - 2rem, var(--large)); margin-inline: auto; }
.saut { position: absolute; left: -999px; }
.saut:focus { left: 1rem; top: 1rem; z-index: 9; background: #fff; padding: .5rem 1rem; }

/* ------------------------------------------------------------ en-tete */
.paroi { background: var(--ardoise); color: var(--craie); position: sticky; top: 0; z-index: 5; border-bottom: 3px solid var(--corde); }
.paroi__z { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; }
.sommet { display: inline-flex; align-items: center; gap: .6rem; color: var(--craie); text-decoration: none; font: 700 1.5rem/1 var(--titre); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.sommet:hover { color: #fff; }
.sommet em { font-style: normal; color: var(--corde); }
.pic { width: 2.2rem; height: auto; }
.pic path { fill: var(--corde); }
.pic .neige { fill: var(--craie); }
.voies { display: flex; gap: 1.5rem; margin-left: 2rem; }
.voies a, .voies-mobile a { color: var(--craie); text-decoration: none; font: 500 .95rem/1 var(--titre); text-transform: uppercase; letter-spacing: .08em; padding: .5rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.voies a:hover, .voies a[aria-current] { border-color: var(--corde); color: #fff; }
.voies-mobile { display: none; }
.voies-mobile summary { list-style: none; cursor: pointer; padding: .6rem; }
.voies-mobile summary::-webkit-details-marker { display: none; }
.voies-mobile summary span { display: block; width: 1.5rem; height: 2px; background: var(--craie); margin: 5px 0; }
@media (max-width: 1100px) {
  .voies { display: none; }
  .voies-mobile { display: block; }
  .voies-mobile nav { position: absolute; left: 0; right: 0; top: 4rem; display: flex; flex-direction: column; background: var(--ardoise-2); padding: .5rem 1rem 1rem; }
  .voies-mobile nav a { padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
}

/* les courbes de niveau */
.courbes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.courbes path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .16; }

/* ------------------------------------------------------------ accueil */
.falaise { position: relative; background: var(--ardoise-2); color: var(--craie); overflow: hidden; padding: 4.5rem 0 4rem; }
.falaise__z { position: relative; }
.falaise__sur { font: 500 .9rem/1 var(--titre); text-transform: uppercase; letter-spacing: .18em; color: var(--corde); margin: 0 0 1.2rem; }
.falaise h1 { font-size: clamp(2.4rem, 1.4rem + 4.5vw, 4.6rem); text-transform: uppercase; max-width: 16ch; margin: 0 0 1.4rem; color: #fff; }
.falaise__d { max-width: 38rem; font-size: 1.2rem; margin: 0; color: var(--craie-2); }

.repere { font-size: 1rem; text-transform: uppercase; letter-spacing: .16em; color: var(--roche); margin: 3.5rem 0 1.4rem; display: flex; align-items: center; gap: .8rem; }
.repere::before { content: ""; width: 2.2rem; height: 3px; background: var(--corde); }

.terrains__l { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--encre); }
.terrains__l a { display: grid; grid-template-columns: 4rem 1fr auto; align-items: baseline; gap: 1rem; padding: 1.1rem .4rem; border-bottom: 1px solid var(--craie-2); color: var(--encre); text-decoration: none; transition: background .15s, padding .15s; }
.terrains__l a:hover { background: #fff; padding-left: 1rem; color: var(--encre); }
.terrains__n { font: 700 1.8rem/1 var(--titre); color: var(--corde); }
.terrains__nom { font: 600 clamp(1.3rem, 1rem + 1.4vw, 2rem)/1.1 var(--titre); text-transform: uppercase; }
.terrains__c { font-size: .95rem; color: var(--gris); }

.une { display: grid; background: #fff; border-left: 6px solid var(--corde); margin-bottom: 2rem; }
@media (min-width: 860px) { .une { grid-template-columns: 1.3fr 1fr; } }
.une__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.une__c { padding: 1.6rem 1.8rem; display: flex; flex-direction: column; justify-content: center; }
.une h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); margin: .3rem 0 .8rem; }
.une h3 a, .carte h3 a { color: var(--encre); text-decoration: none; }
.une h3 a:hover, .carte h3 a:hover { color: var(--corde-f); }
.une p { margin: 0 0 .8rem; color: var(--gris); }
.une__m { font-size: .9rem; }

.grille { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); margin-bottom: 2.5rem; }
.carte { background: #fff; display: flex; flex-direction: column; position: relative; }
.carte__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.9); }
.carte__c { padding: 1rem 1.2rem 1.3rem; }
.carte__n { position: absolute; top: .6rem; left: .6rem; background: var(--ardoise); color: var(--craie); font: 700 1rem/1 var(--titre); padding: .45rem .55rem; }
.carte__r { font: 600 .78rem/1 var(--titre); text-transform: uppercase; letter-spacing: .12em; color: var(--corde-f); margin: 0 0 .5rem; }
.carte h3 { font-size: 1.3rem; margin: 0 0 .5rem; }
.carte__d { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--gris); }
.suite { color: var(--gris); margin-bottom: 3.5rem; }

/* ------------------------------------------------------------ article : le titre sur la photo */
.topo__tete { position: relative; background: var(--ardoise); color: #fff; min-height: clamp(22rem, 55vh, 34rem); display: flex; align-items: flex-end; overflow: hidden; }
.topo__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.topo__tete::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,28,32,.15) 0%, rgba(20,28,32,.55) 45%, rgba(20,28,32,.92) 100%); }
.topo__titre { position: relative; z-index: 1; padding: 2rem 0 2.4rem; }
.topo__tete .fil, .topo__tete .fil a { color: var(--craie-2); }
.topo__r { display: inline-block; margin: 1rem 0 .6rem; background: var(--corde); color: #fff; font: 600 .8rem/1 var(--titre); text-transform: uppercase; letter-spacing: .12em; padding: .45rem .7rem; text-decoration: none; }
.topo__r:hover { background: var(--corde-f); color: #fff; }
.topo h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); max-width: 22ch; margin: 0 0 .9rem; color: #fff; text-transform: uppercase; }
.topo__m { margin: 0; font-size: 1rem; color: var(--craie-2); }
.topo__m a { color: #fff; }

.topo__z { display: grid; gap: 2.5rem; padding: 2.5rem 0 1rem; }
@media (min-width: 1000px) { .topo__z { grid-template-columns: 15rem minmax(0, 42rem); justify-content: center; gap: 4rem; } }
.itineraire { align-self: start; font-family: var(--titre); }
@media (min-width: 1000px) { .itineraire { position: sticky; top: 5.5rem; } }
.itineraire__t { text-transform: uppercase; letter-spacing: .16em; font-size: .85rem; color: var(--roche); margin: 0 0 .8rem; }
.itineraire ol { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px dashed var(--corde); }
.itineraire li { position: relative; margin: 0 0 .7rem; }
.itineraire li::before { content: ""; position: absolute; left: calc(-1rem - 6px); top: .45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--craie); border: 2px solid var(--corde); }
.itineraire a { color: var(--encre); text-decoration: none; font-size: .95rem; line-height: 1.35; display: block; }
.itineraire a span { display: inline-block; min-width: 2rem; font-weight: 700; color: var(--corde-f); }
.itineraire a:hover { color: var(--corde-f); }

.texte > * { margin-block: 0 1.1em; }
.texte > p:first-child { font-style: italic; color: var(--gris); font-size: 1rem; }
.texte h2 { font-size: 1.85rem; text-transform: uppercase; margin: 2.2em 0 .6em; padding-top: .6em; border-top: 2px solid var(--encre); }
.texte h3 { font-size: 1.35rem; margin: 1.8em 0 .5em; color: var(--sapin); }
.texte ul, .texte ol { padding-left: 1.3rem; }
.texte li { margin-bottom: .45em; }
.texte li::marker { color: var(--corde); }
.texte table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; display: block; overflow-x: auto; background: #fff; }
.texte th { background: var(--ardoise); color: var(--craie); font: 500 .95rem/1.3 var(--titre); text-transform: uppercase; letter-spacing: .04em; text-align: left; }
.texte th, .texte td { padding: .7rem .9rem; border-bottom: 1px solid var(--craie-2); vertical-align: top; }
.texte tr:nth-child(even) td { background: #faf8f3; }
.texte blockquote { margin-inline: 0; padding: .4rem 0 .4rem 1.2rem; border-left: 4px solid var(--corde); color: var(--gris); }

.voisins { margin-top: 1rem; }

/* ------------------------------------------------------------ rubriques, pages */
.secteur { position: relative; background: var(--ardoise-2); color: var(--craie); overflow: hidden; padding: 1.6rem 0 2.8rem; margin-bottom: 2.5rem; }
.secteur .cordee { position: relative; }
.secteur .fil, .secteur .fil a { color: var(--craie-2); }
.secteur h1 { font-size: clamp(2.2rem, 1.4rem + 3.5vw, 4rem); text-transform: uppercase; margin: 1.4rem 0 .6rem; color: #fff; }
.secteur p { margin: 0; color: var(--craie-2); }
.secteur p a { color: #fff; }
.fil { font: 400 .85rem/1.4 var(--titre); letter-spacing: .06em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1rem; }
.fil a { color: var(--gris); }
.fil span[aria-current] { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixe { max-width: 46rem; padding-bottom: 3rem; }
.fixe h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); text-transform: uppercase; margin: 1.4rem 0 1.4rem; }
.perdu ul { padding-left: 1.2rem; }

/* ------------------------------------------------------------ pied */
.base { position: relative; overflow: hidden; background: var(--ardoise); color: var(--craie-2); margin-top: 3rem; font-size: 1rem; }
.base__z { position: relative; display: grid; gap: 2rem; padding: 3rem 0 2rem; }
@media (min-width: 800px) { .base__z { grid-template-columns: 2fr 1fr 1fr; } }
.sommet--pied { font-size: 1.3rem; margin-bottom: .9rem; }
.base__d { margin: 0; max-width: 28rem; line-height: 1.6; }
.base nav { display: flex; flex-direction: column; gap: .5rem; }
.base nav a { color: #fff; text-decoration: none; }
.base nav a:hover { color: var(--corde); }
.base__t { font: 600 .85rem/1 var(--titre); text-transform: uppercase; letter-spacing: .16em; color: var(--corde); margin: 0 0 .5rem; }
.base__bas { position: relative; border-top: 1px solid rgba(255,255,255,.12); padding: 1.2rem 0 1.6rem; margin-top: 0; font-size: .88rem; color: var(--roche); }
.base__bas a { color: var(--craie-2); }
body { overflow-wrap: break-word; }