/* ==========================================================================
   O BEAU CABOT — Ajustements multi-pages
   ========================================================================== */

/* Active nav link indicator */
.site-nav__link[aria-current="page"] {
  color: var(--terra-very-deep);
  font-weight: 500;
}
.site-nav__link[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  background: linear-gradient(135deg, var(--terra-mid), var(--terra-deep));
  border-radius: 2px;
  margin-top: 4px;
}

/* Sub-hero (pour les pages autres que l'accueil) */
.subhero {
  padding-block: clamp(4rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(180deg, var(--cream-layer) 0%, var(--cream-surface) 100%);
  text-align: center;
}
.subhero__inner {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.subhero h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-display-md);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--terra-very-deep);
  margin-top: var(--space-4);
}
.subhero p.lead {
  margin-top: var(--space-5);
  font-size: var(--fs-body-lg);
  color: var(--earth-soft);
  line-height: var(--lh-relaxed);
}

/* Page teaser cards (accueil) */
.teasers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.teaser {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream-elevated);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-ambient);
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.teaser:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.teaser__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-layer);
}
.teaser__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.teaser:hover .teaser__image img {
  transform: scale(1.04);
}
.teaser__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
}
.teaser__eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--terra-deep);
}
.teaser__title {
  font-family: var(--font-serif);
  font-size: var(--fs-headline-sm);
  color: var(--terra-very-deep);
  margin-top: var(--space-2);
  line-height: var(--lh-snug);
}
.teaser__desc {
  margin-top: var(--space-3);
  color: var(--earth-soft);
  font-size: var(--fs-body-md);
  line-height: var(--lh-relaxed);
}
.teaser__arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--terra-deep);
}
.teaser:hover .teaser__arrow { color: var(--terra-very-deep); }

/* Info block (contact page) */
.info-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-7);
}
.info-card {
  padding: var(--space-6);
  background: var(--cream-elevated);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.info-card h3 {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--terra-deep);
  margin-bottom: var(--space-3);
}
.info-card p, .info-card a {
  font-size: var(--fs-body-md);
  color: var(--earth-body);
  line-height: var(--lh-relaxed);
}
.info-card a {
  color: var(--terra-very-deep);
  text-decoration: underline;
  text-decoration-color: rgba(164, 85, 58, 0.3);
  text-underline-offset: 3px;
}
.info-card a:hover { text-decoration-color: var(--terra-deep); }

/* About page - timeline / story block */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.story__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-ambient);
  aspect-ratio: 4 / 5;
}
.story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story__text h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-display-md);
  color: var(--terra-very-deep);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.story__text p {
  margin-top: var(--space-4);
  color: var(--earth-soft);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}
.story__text p + p { margin-top: var(--space-4); }

@media (max-width: 860px) {
  .story {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .story__image { aspect-ratio: 4 / 3; }
}

/* Values list (about) */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.value {
  padding: var(--space-5);
  background: var(--cream-elevated);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.value__num {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--terra-mid);
  font-style: italic;
  font-weight: 400;
}
.value h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-headline-sm);
  color: var(--terra-very-deep);
  margin-top: var(--space-2);
}
.value p {
  margin-top: var(--space-3);
  color: var(--earth-soft);
  font-size: var(--fs-body-md);
  line-height: var(--lh-relaxed);
}

/* Gallery page layout (plus dense) */
.gallery-pro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.gallery-pro__item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.gallery-pro__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery-pro__item:hover img { transform: scale(1.05); }
.gallery-pro__item--wide { grid-column: span 2; aspect-ratio: 16 / 10; }
.gallery-pro__item--tall { grid-row: span 2; aspect-ratio: 4 / 6; }

@media (max-width: 700px) {
  .gallery-pro__item--wide { grid-column: auto; aspect-ratio: 4 / 5; }
  .gallery-pro__item--tall { grid-row: auto; aspect-ratio: 4 / 5; }
}

/* Breadcrumb */
.crumb {
  font-family: var(--font-label);
  font-size: var(--fs-label-md);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--earth-muted);
}
.crumb a { color: var(--terra-deep); text-decoration: none; }
.crumb a:hover { color: var(--terra-very-deep); }

/* Hours table (contact) */
.hours-table {
  width: 100%;
  border-collapse: collapse;
}
.hours-table tr { border-bottom: 1px solid var(--color-outline); }
.hours-table tr:last-child { border-bottom: 0; }
.hours-table td {
  padding: var(--space-3) 0;
  font-size: var(--fs-body-md);
  color: var(--earth-body);
}
.hours-table td:last-child {
  text-align: right;
  color: var(--earth-soft);
  font-family: var(--font-label);
}
.hours-table tr.closed td:last-child { color: var(--earth-muted); font-style: italic; }

/* Prestations page - list view denser */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

/* Simple hero on accueil (plus court que la version one-page) */
.hero-pro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5rem);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero-pro__text h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--terra-very-deep);
  margin-top: var(--space-4);
}
.hero-pro__text h1 em {
  font-style: italic;
  color: var(--terra-mid);
  font-weight: 400;
}
.hero-pro__text p {
  margin-top: var(--space-5);
  font-size: var(--fs-body-lg);
  color: var(--earth-soft);
  line-height: var(--lh-relaxed);
  max-width: 48ch;
}
.hero-pro__cta {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
  flex-wrap: wrap;
  align-items: center;
}
.hero-pro__image {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.hero-pro__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .hero-pro {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hero-pro__image { aspect-ratio: 4 / 3; order: -1; }
}