/* Ritter'Hoft — couche d'harmonie transversale
   Chargée après les feuilles propres à chaque page pour conserver leur
   personnalité tout en partageant le même rythme éditorial. */

:root{
  --page-section-y:clamp(64px,7.2vw,104px);
  --page-section-y-compact:clamp(52px,6vw,80px);
  --page-head-gap:clamp(34px,4.2vw,52px);
  --page-content-wide:760px;
}

/* Un même rythme entre les pages générales, éditoriales et commerciales. */
main>.section{padding-block:var(--page-section-y)}
main>.section.section-sm{padding-block:var(--page-section-y-compact)}
main>.section.tint{background:var(--color-paper)}
main>.section:not(.tint):not(.cta)+.section:not(.tint):not(.cta){
  border-top:1px solid var(--color-rule-2)
}

/* En-têtes de section : largeur, respiration et alignement partagés. */
.lead-center{
  width:min(100%,var(--page-content-wide));
  max-width:var(--page-content-wide);
  margin:0 auto var(--page-head-gap);
  text-align:center
}
.lead-center .h2,.lead-center h2{max-width:18ch;margin-inline:auto}
.lead-center .lede,.lead-center>p{
  max-width:64ch;
  margin-inline:auto;
  color:var(--color-ink-2)
}
.lead-center .eyebrow+.h2,.lead-center .eyebrow+h2{margin-top:var(--space-sm)}
.lead-center .h2+p,.lead-center h2+p{margin-top:var(--space-sm)}

/* Tous les héros intérieurs ont désormais la même présence et le même axe. */
.page-hero{
  min-height:clamp(430px,56vh,610px);
  display:grid;
  align-items:end;
  padding-block:calc(clamp(76px,10vw,124px) + 76px) clamp(52px,6vw,78px)
}
.page-hero .wrap{width:100%}
.page-hero h1{max-width:20ch;margin-inline:auto;margin-top:var(--space-sm)}
.page-hero p{max-width:62ch;margin-top:var(--space-sm)}
.page-hero.small{min-height:clamp(360px,46vh,500px)}

/* Langage de carte commun : trait chaud, ombre légère, mouvement discret. */
:where(.blog-card,.room-card,.offer-card,.soiree-card,.exp-card,.article-note,.route,.faq details){
  border-color:var(--color-rule);
  box-shadow:var(--shadow-sm)
}
:where(.blog-card,.room-card,.offer-card,.soiree-card,.exp-card){
  border-radius:var(--radius-lg);
  overflow:hidden
}
:where(.blog-card,.room-card,.offer-card,.soiree-card,.exp-card):hover{
  box-shadow:var(--shadow-md)
}

/* Lecture : mêmes proportions et mêmes séparations dans les pages longues. */
.prose,.article-rich{max-width:860px;margin-inline:auto}
.article-rich h2,.prose h2{scroll-margin-top:112px}
.article-rich h2:not(:first-child),.prose h2:not(:first-child){
  padding-top:clamp(34px,4vw,50px);
  margin-top:clamp(34px,4vw,50px);
  border-top:1px solid var(--color-rule-2)
}
.article-rich h2+p,.prose h2+p{margin-top:var(--space-sm)}

/* Les rangées d'actions suivent le même espacement, quelle que soit la page. */
:where(.subtle-actions,.cta__actions,.hero-actions,.actions){
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-xs)
}
.cta{padding-block:clamp(72px,8vw,104px)}
.cta .wrap{width:100%}

@media (max-width:760px){
  :root{
    --page-section-y:56px;
    --page-section-y-compact:46px;
    --page-head-gap:32px
  }
  .page-hero{
    min-height:410px;
    padding-block:132px 48px
  }
  .page-hero.small{min-height:360px}
  .lead-center .h2,.lead-center h2{max-width:22ch}
  :where(.subtle-actions,.cta__actions,.hero-actions,.actions)>.btn{
    width:100%;
    max-width:360px
  }
}

@media (prefers-reduced-motion:reduce){
  :where(.blog-card,.room-card,.offer-card,.soiree-card,.exp-card){
    transition:none!important;
    transform:none!important
  }
}