/* ==========================================================================
   GABARIT ARTICLE DE BLOG — styles propres aux articles (ex. que-faire-a-foix.html)
   Chargé APRÈS styles.css : réutilise tokens et composants (nav, pill,
   breadcrumb, boutons, blog-card, footer). Aucune couleur en dur.
   ========================================================================== */
.page-article{--u:1rem;--read-w:calc(42.5 * var(--u));--toc-w:calc(15 * var(--u))}
/* Échelle de lecture (--u) : 1rem jusqu'à 1440 px ; au-dessus, le sommaire et le corps de l'article
   grandissent plus que l'interface (×1,4 à 2560 px) sans changer de proportions : même longueur
   de ligne, mais une lecture à la mesure d'un grand écran. Les tokens empruntés au site sont
   redéfinis avec --u dans .article-layout. */
@media (min-width:1441px){
  .page-article{--u:clamp(1rem,calc(7.7714px + .571429vw),22.4px)}
}
.article-layout{
  --fs-lead:calc(1.125 * var(--u)); --fs-body-lg:calc(1.0625 * var(--u)); --fs-body:var(--u);
  --fs-ui:calc(.9375 * var(--u)); --fs-sm:calc(.875 * var(--u)); --fs-caption:calc(.8125 * var(--u));
  --fs-h3-ui:calc(1.25 * var(--u)); --fs-h3:calc(1.75 * var(--u));
  --r-sm:calc(.375 * var(--u)); --r-md:calc(.5 * var(--u)); --r-lg:calc(.75 * var(--u));
  --btn-h:calc(3 * var(--u)); --btn-h-sm:calc(2.5 * var(--u));
}
.page-article [id]{scroll-margin-top:6.5rem}

/* ---------- Hero d'article ---------- */
.article-hero{padding:9.25rem var(--pad-x) 0}
.article-hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.article-hero-inner > *:not(.hero-ridge){position:relative;z-index:1}
/* Montagnes du footer en fond des titres : 3 % (opacity), couleurs inversées (plan lointain foncé,
   plan proche clair), fondu vers le blanc en bas */
.hero-ridge{position:absolute;z-index:0;left:calc(50% - 50vw);width:100vw;bottom:-3.5rem;height:clamp(12.5rem,32vw,28.75rem);opacity:.03;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,var(--black) 35%,transparent 100%);mask-image:linear-gradient(to bottom,var(--black) 35%,transparent 100%)}
.hero-ridge .ridge--far{background:var(--ink);opacity:1}
.hero-ridge .ridge--mid{background:var(--green-mid);opacity:1}
.hero-ridge .ridge--near{background:var(--green-sage)}
.article-hero-inner .breadcrumb{justify-content:center}
.article-hero-inner .pill{align-self:center}
.article-hero h1{max-width:56.25rem;font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:1.05;color:var(--ink);text-wrap:balance}
.article-chapo{max-width:var(--read-w);margin-top:1.75rem;font-size:var(--fs-lead);line-height:1.6;color:var(--text-2)}
.article-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.75rem;font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--text-3)}
.article-cover{margin-top:3.5rem}
.article-cover img{width:100%;height:auto;aspect-ratio:1232/616;object-fit:cover;border-radius:var(--r-lg)}

/* Crédits photo (couverture + images du texte) */
.article-cover figcaption,.article-body figcaption{margin-top:.625rem;font-family:var(--font-sans);font-size:var(--fs-caption);line-height:1.45;color:var(--text-3)}
.article-cover figcaption a,.article-body figcaption a{color:inherit;text-decoration:underline;text-underline-offset:.125rem}

/* ---------- Sommaire + colonne de lecture ---------- */
.article-layout{display:grid;grid-template-columns:var(--toc-w) minmax(0,var(--read-w));gap:calc(6 * var(--u));justify-content:center;padding:calc(5 * var(--u)) var(--pad-x) calc(7.5 * var(--u))}

.toc{position:sticky;top:calc(7 * var(--u));align-self:start}
.toc summary{display:none}
.toc-title{margin-bottom:var(--u);font-family:var(--font-sans);font-weight:600;font-size:var(--fs-caption);letter-spacing:calc(.0375 * var(--u));text-transform:uppercase;color:var(--green-deep)}
.toc ol{list-style:none;counter-reset:toc;border-left:1px solid rgba(var(--rgb-ink),.12)}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:calc(.625 * var(--u));padding:calc(.5 * var(--u)) 0 calc(.5 * var(--u)) var(--u);margin-left:-1px;border-left:calc(.125 * var(--u)) solid transparent;font-family:var(--font-sans);font-size:var(--fs-sm);line-height:1.4;color:var(--text-2);transition:color .15s ease,border-color .15s ease}
.toc a::before{content:counter(toc,decimal-leading-zero);font-variant-numeric:tabular-nums;color:var(--text-3)}
.toc a:hover{color:var(--ink)}
.toc a.is-active{color:var(--green-deep);font-weight:500;border-left-color:var(--green-deep)}
.toc a.is-active::before{color:var(--green-deep)}

/* ---------- Typographie de lecture ---------- */
.article-body > *:first-child{margin-top:0}
.article-body h2{margin-top:calc(4.5 * var(--u));font-family:var(--font-display);font-weight:400;font-size:calc(2.25 * var(--u));line-height:1.15;color:var(--ink)}
.article-body h3{margin-top:calc(2.5 * var(--u));font-family:var(--font-sans);font-weight:600;font-size:var(--fs-h3-ui);line-height:1.3;color:var(--ink)}
.article-body p{margin-top:var(--u);font-size:var(--fs-lead);line-height:1.7;color:var(--ink)}
.article-body h2 + p,.article-body h3 + p{margin-top:calc(.875 * var(--u))}
.article-body strong{font-weight:600}
.article-body a{color:var(--green-deep);text-decoration:underline;text-underline-offset:calc(.1875 * var(--u))}
.article-body a:hover{text-decoration-thickness:calc(.125 * var(--u))}
.article-body figure{margin:calc(2 * var(--u)) 0}
.article-body figure img{width:100%;height:auto;border-radius:var(--r-md)}
.article-body h2 + figure,.article-body h3 + figure{margin-top:calc(1.25 * var(--u))}

/* Lien source : discret, après le paragraphe */
.article-body a.src{display:inline-block;margin-left:calc(.125 * var(--u));font-size:var(--fs-sm);color:var(--text-3);text-decoration:none;white-space:nowrap}
.article-body a.src::before{content:'Source : '}
.article-body a.src:hover{color:var(--green-deep);text-decoration:underline}

/* Note de repères */
.article-body .note{margin-top:calc(1.25 * var(--u));padding:var(--u) calc(1.25 * var(--u));border-left:calc(.1875 * var(--u)) solid var(--green-sage);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--beige);font-size:var(--fs-body);line-height:1.6;color:var(--text-2)}

/* Fiche technique d'une randonnée : distance · dénivelé · durée · niveau */
.hike-facts{list-style:none;display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:calc(.5 * var(--u)) calc(1.75 * var(--u));margin-top:calc(.875 * var(--u));padding:calc(.875 * var(--u)) calc(1.125 * var(--u));border-radius:var(--r-md);background:var(--beige)}
.hike-facts li{display:flex;flex-direction:column;gap:calc(.125 * var(--u));font-family:var(--font-sans);font-weight:600;font-size:var(--fs-ui);color:var(--ink)}
.hike-facts li span{font-weight:400;font-size:var(--fs-caption);color:var(--text-3)}
.article-body h3 + .hike-facts{margin-top:calc(.875 * var(--u))}
.article-body .hike-facts + figure{margin-top:calc(1.25 * var(--u))}

/* Programme 2–3 jours */
.programme{list-style:none;counter-reset:jour;margin-top:calc(1.5 * var(--u));display:flex;flex-direction:column;gap:calc(.75 * var(--u))}
.programme li{counter-increment:jour;position:relative;padding:calc(1.25 * var(--u)) calc(1.5 * var(--u)) calc(1.25 * var(--u)) calc(4.5 * var(--u));border-radius:var(--r-md);background:var(--beige);font-family:var(--font-sans);font-size:var(--fs-body-lg);line-height:1.6;color:var(--ink)}
.programme li::before{content:counter(jour);position:absolute;left:calc(1.5 * var(--u));top:calc(1.25 * var(--u));width:calc(2 * var(--u));height:calc(2 * var(--u));border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--fs-ui);color:var(--green-deep)}
.programme strong{display:block;margin-bottom:calc(.25 * var(--u))}

/* Sources (repliées) */
.sources{margin-top:calc(4 * var(--u));border-top:1px solid rgba(var(--rgb-ink),.12);border-bottom:1px solid rgba(var(--rgb-ink),.12)}
.sources summary{display:flex;justify-content:space-between;align-items:center;padding:calc(1.25 * var(--u)) 0;cursor:pointer;list-style:none;font-family:var(--font-sans);font-weight:600;font-size:var(--fs-body);color:var(--ink)}
.sources summary::-webkit-details-marker{display:none}
.sources summary::after{content:'+';font-weight:400;font-size:calc(1.375 * var(--u));line-height:1;color:var(--ink);transition:transform .2s ease}
.sources[open] summary::after{transform:rotate(45deg)}
.sources > p{margin-top:0;font-size:var(--fs-sm);line-height:1.6;color:var(--text-2)}
.sources ul{list-style:none;margin:var(--u) 0 calc(1.5 * var(--u));display:flex;flex-direction:column;gap:calc(.5 * var(--u))}
.sources li{font-family:var(--font-sans);font-size:var(--fs-sm);line-height:1.5;color:var(--text-2)}
.sources li strong{color:var(--ink)}

/* ---------- CTA réservation ---------- */
.article-cta{display:grid;grid-template-columns:calc(12.5 * var(--u)) 1fr;margin-top:calc(3 * var(--u));border-radius:var(--r-lg);overflow:hidden;background:var(--green-mid)}
.article-cta img{width:100%;height:100%;object-fit:cover}
.article-cta-body{padding:calc(2 * var(--u))}
.article-body .article-cta-title{margin:0;font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.2;color:var(--white)}
.article-body .article-cta-body p:not(.article-cta-title){margin-top:calc(.625 * var(--u));font-size:var(--fs-body);line-height:1.5;color:var(--on-dark-2)}
.article-cta-btns{display:flex;flex-wrap:wrap;gap:calc(.75 * var(--u));margin-top:calc(1.5 * var(--u))}
.article-cta-btns .btn-acid,.article-cta-btns .btn-outline{align-self:auto}
.article-body .article-cta-btns a{text-decoration:none}
.article-body .article-cta-btns .btn-acid{color:var(--btn-ink)}
.article-body .article-cta-btns .btn-outline{color:var(--white);border-color:rgba(var(--rgb-light),.5)}
.article-body .article-cta-btns .btn-outline:hover{background:rgba(var(--rgb-light),.1)}

/* ---------- Autres articles (fond beige) : la crête du footer se pose sur le beige ---------- */
.page-article{--footer-ridge-bg:var(--beige)}
.more-articles .blog-grid{margin-top:2.5rem}
.more-articles .blog-card>img{height:13.75rem}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .page-article{--toc-w:12.5rem}
  .article-layout{gap:3.5rem}
}

/* ≤960 : sommaire replié en tête de l'article */
@media (max-width:960px){
  .article-layout{grid-template-columns:minmax(0,var(--read-w));gap:0;padding-top:3rem}
  .toc{position:static;margin-bottom:2.5rem;border:1px solid rgba(var(--rgb-ink),.12);border-radius:var(--r-md)}
  .toc summary{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;cursor:pointer;list-style:none;font-family:var(--font-sans);font-weight:600;font-size:var(--fs-body);color:var(--ink)}
  .toc summary::-webkit-details-marker{display:none}
  .toc summary::after{content:'+';font-weight:400;font-size:1.375rem;line-height:1;transition:transform .2s ease}
  .toc details[open] summary::after{transform:rotate(45deg)}
  .toc-title{display:none}
  .toc ol{margin:0 1.25rem 1rem}
}

@media (max-width:900px){
  .article-hero{padding-top:7.5rem}
  .article-hero h1{font-size:clamp(2.125rem,8vw,3.25rem)}
  .article-chapo{font-size:var(--fs-body-lg)}
  .article-cover{margin-top:2.5rem}
  .article-cover img{aspect-ratio:3/2;border-radius:var(--r-md)}
  .article-layout{padding-bottom:5rem}
  .article-body h2{margin-top:3.5rem;font-size:clamp(1.75rem,6vw,2.125rem)}
  .article-body p{font-size:var(--fs-body-lg)}
}

@media (max-width:600px){
  .article-hero-inner{align-items:flex-start;text-align:left}
  .article-hero-inner .breadcrumb,.article-meta{justify-content:flex-start}
  .article-hero-inner .pill{align-self:flex-start}
  .article-cta{grid-template-columns:1fr}
  .article-cta img{height:11.25rem}
  .article-cta-body{padding:1.5rem}
  .article-cta-btns{flex-direction:column}
  .article-cta-btns a{width:100%}
  .hike-facts{grid-template-columns:repeat(2,auto);gap:.75rem 1.5rem}
  .programme li{padding:1.25rem 1.25rem 1.25rem 4rem}
  .programme li::before{left:1.25rem}
}

/* ==========================================================================
   LISTE DU BLOG (blog.html)
   ========================================================================== */
/* Fond : blanc en haut, beige progressivement, beige plein derrière la crête du footer */
body.page-blog{background:linear-gradient(to bottom,var(--white) 0,var(--beige) calc(100% - 37.5rem),var(--beige) 100%)}
.blog-hero{padding:9.25rem var(--pad-x) 0}
.blog-hero h1{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:1.05;color:var(--ink)}
.blog-intro{margin-top:1.25rem;max-width:35rem;font-size:var(--fs-lead);line-height:1.6;color:var(--text-2)}
.blog-list{padding:3.5rem var(--pad-x) var(--space-section)}

/* Article mis en avant */
.post-featured{display:grid;grid-template-columns:7fr 5fr;border-radius:var(--r-md);overflow:hidden;background:var(--white);transition:box-shadow .25s ease}
.post-featured:hover{box-shadow:0 .875rem 2rem rgba(var(--rgb-shadow),.08)}
.post-featured:hover .blog-link{text-decoration:underline}
.post-featured img{width:100%;height:100%;min-height:22.5rem;object-fit:cover}
.post-featured-body{display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:3rem}
.post-featured h2{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-quote);line-height:1.3;color:var(--ink)} /* même famille que les titres des cartes */
.post-featured-body > p:not(.post-meta){font-size:var(--fs-body-lg);line-height:1.55;color:var(--text-2)}
.post-featured .blog-link{margin-top:.5rem}
.post-meta{display:flex;flex-wrap:wrap;gap:.5rem;font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--text-3)}
.blog-card p.post-meta{margin:0 0 .625rem;font-size:var(--fs-caption);color:var(--text-3)}

/* Prochains articles */
.blog-list-title{margin-top:4.5rem;color:var(--ink)}
.blog-list .blog-grid{margin-top:1.5rem}
.blog-list .blog-card{flex:0 1 calc((100% - 3rem) / 3)} /* cartes blanches, comme sur la homepage */
.blog-card.is-upcoming{cursor:default}
.blog-card.is-upcoming:hover{transform:none;box-shadow:none}
.blog-card.is-upcoming img{filter:saturate(.6);opacity:.85}
.post-soon{width:fit-content;padding:.25rem .75rem;border-radius:var(--r-pill);background:var(--white);font-family:var(--font-sans);font-weight:500;font-size:var(--fs-caption);color:var(--green-deep)}

@media (max-width:900px){
  .blog-hero{padding-top:7.5rem}
  .blog-hero h1{font-size:clamp(2.25rem,8vw,3.25rem)}
  .blog-list{padding-bottom:5rem}
  .post-featured{grid-template-columns:1fr}
  .post-featured img{min-height:0;height:auto;aspect-ratio:3/2}
  .post-featured-body{padding:1.75rem 1.5rem}
  .blog-list-title{margin-top:3.5rem}
  .blog-list .blog-card{flex:0 0 var(--slide-w)}
}

/* ==========================================================================
   PAGES LÉGALES + 404 (mentions-legales.html, politique-de-confidentialite.html, 404.html)
   Reprennent l'en-tête du blog et la typographie de lecture des articles.
   ========================================================================== */
.page-legal{--u:1rem;--read-w:42.5rem}
.legal{padding:3rem var(--pad-x) var(--space-section)}
.legal-body,.page-legal .blog-hero .container{max-width:var(--read-w);margin:0 auto} /* titre aligné sur la colonne de texte */
.legal-body h2{margin-top:3rem;font-size:var(--fs-h3)}
.legal-list{list-style:none;margin-top:1rem;display:flex;flex-direction:column;gap:.625rem}
.legal-list li{font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.55;color:var(--text-2)}
.legal-list a,.legal-body p a{color:var(--green-deep);text-decoration:underline;text-underline-offset:.1875rem}
.legal-date{margin-top:3rem;font-size:var(--fs-sm);color:var(--text-3)}
/* 404 */
.legal-404{padding-top:12rem;text-align:center}
.legal-404 .err-code{font-family:var(--font-display);font-size:var(--fs-h1);line-height:1;color:var(--green-deep)}
.legal-404 h1{margin-top:1rem;font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1.1;color:var(--ink)}
.legal-404 p:not(.err-code){margin-top:1.25rem;font-size:var(--fs-lead);line-height:1.6;color:var(--text-2)}
.err-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2.5rem}
.err-btns .btn-acid,.err-btns .btn-outline{align-self:auto}
@media (max-width:900px){
  .legal-404{padding-top:8rem}
  .legal-404 h1{font-size:clamp(2rem,7vw,2.75rem)}
}