/*
 * Salon en Vogue -- Global Fixes
 * fixes-global.css
 * ============================================================
 * FIX 11: Global Heading Size Reduction
 * FIX 15: Global Centering Audit
 * ============================================================
 * This file is loaded AFTER style.css and uses !important
 * overrides where necessary to correct layout issues.
 * ============================================================
 */


/* ============================================================
   FIX 11 -- GLOBAL HEADING SCALE
   Reduce oversized headings that break across 3+ lines.
   Uses clamp() for responsive fluid sizing.
   ============================================================ */

/* ---- Page Heroes ---- */
h1,
.hero__title,
.page-hero__title {
  font-size: clamp(32px, 5vw, 56px) !important;
  line-height: 1.15;
}

/* ---- Section Headings ---- */
h2,
.section-title {
  font-size: clamp(24px, 3.5vw, 40px) !important;
  line-height: 1.2;
}

h3 {
  font-size: clamp(20px, 2.5vw, 28px) !important;
  line-height: 1.3;
}

h4 {
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.3;
}

/* ---- Blog Content Headings ---- */
.blog-post__content h2,
.blog-content h2,
article.blog-post h2:not(.hero__title):not(.section-title) {
  font-size: clamp(22px, 3vw, 28px) !important;
  line-height: 1.3;
}

.blog-post__content h3,
.blog-content h3,
article.blog-post h3 {
  font-size: clamp(18px, 2.5vw, 22px) !important;
  line-height: 1.3;
}

/* ---- Service Pillar Page Headings ---- */
.pillar-faq__title,
.pillar-services__title,
.pillar-gallery__title,
.pillar-blog__title,
.service-pillar__article-title {
  font-size: clamp(22px, 3.5vw, 32px) !important;
  line-height: 1.2;
}

.page-hero--service-pillar .page-hero__title {
  font-size: clamp(28px, 4vw, 48px) !important;
  line-height: 1.15;
}

/* ---- CTA Headings ---- */
.cta-band__heading,
.blog-cta h2 {
  font-size: clamp(24px, 3.5vw, 36px) !important;
  line-height: 1.2;
}

.cta-banner__title {
  font-size: clamp(24px, 3.5vw, 36px) !important;
  line-height: 1.2;
}

.pillar-cta__title,
.service-detail__cta-title {
  font-size: clamp(22px, 3vw, 32px) !important;
  line-height: 1.2;
}

/* ---- Blog Card Title ---- */
.blog-card__title {
  font-size: clamp(18px, 2.5vw, 24px) !important;
  line-height: 1.3;
}

.blog-card--featured .blog-card__title {
  font-size: clamp(20px, 3vw, 28px) !important;
  line-height: 1.25;
}

/* ---- Blog Hero h1 ---- */
.blog-hero h1 {
  font-size: clamp(24px, 4vw, 40px) !important;
  line-height: 1.2;
}

/* ---- Display Text ---- */
.display-text {
  font-size: clamp(28px, 4vw, 48px) !important;
  line-height: 1.12;
}

/* ---- Team & Testimonial ---- */
.team-card__name {
  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.3;
}

/* ---- Footer Widget Titles ---- */
.footer-widget__title {
  font-size: clamp(16px, 1.8vw, 20px) !important;
  line-height: 1.3;
}

/* ---- Sidebar Titles ---- */
.sidebar-related-services__title {
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.3;
}

/* ---- Mobile Overrides ---- */
@media (max-width: 767px) {
  h1,
  .hero__title,
  .page-hero__title {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.15;
  }

  h2,
  .section-title {
    font-size: clamp(22px, 5vw, 32px) !important;
    line-height: 1.2;
  }

  h3 {
    font-size: clamp(18px, 4vw, 24px) !important;
    line-height: 1.3;
  }

  .cta-band__heading,
  .cta-banner__title,
  .blog-cta h2 {
    font-size: clamp(22px, 5vw, 30px) !important;
  }
}


/* ============================================================
   FIX 15 -- GLOBAL CENTERING FIXES
   Ensure consistent centering for section titles, CTAs,
   content containers, and gallery grids.
   ============================================================ */

/* ---- Section Titles: Always Centered ---- */
.section-title,
.section-title--center,
.section-heading {
  text-align: center;
}

/* ---- Pillar Section Titles: Centered ---- */
.pillar-faq__title,
.pillar-services__title,
.pillar-gallery__title,
.pillar-blog__title,
.pillar-cta__title,
.service-pillar__article-title {
  text-align: center;
}

/* ---- Section Subtitle: Centered ---- */
.section-subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Container Centering ---- */
.container,
.section-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Preserve the existing max-width variants */
.container--narrow {
  max-width: 800px;
}

.container--medium {
  max-width: 1100px;
}

.container--wide {
  max-width: 1800px;
}

/* ---- CTA Buttons: Centered ---- */
.cta-wrapper,
.buttons-wrapper,
.blog-cta,
.pillar-cta,
.pillar-cta__actions,
.pillar-blog__cta,
.pillar-gallery__cta {
  text-align: center;
}

/* ---- Pillar Sections: Centered within layout ---- */
.pillar-faq,
.pillar-services,
.pillar-gallery,
.pillar-blog {
  margin-left: auto;
  margin-right: auto;
}

/* ---- Pillar Text Content: Centered max-width ---- */
.pillar-cta__text,
.pillar-services__note,
.service-detail__cta-text {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Pillar Gallery Grid: Centered ---- */
.pillar-gallery__grid {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Related Posts Grid: Centered ---- */
.related-posts {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Blog Grid: Centered ---- */
.blog-grid {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Service Pillar Inner: Centered ---- */
.service-pillar__inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Page Hero Inner: Centered ---- */
.page-hero__inner {
  text-align: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- CTA Band Inner: Centered ---- */
.cta-band__inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Blog CTA: Centered content ---- */
.blog-cta {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Eyebrow: Centered ---- */
.eyebrow,
.eyebrow--gold {
  text-align: center;
}

/* ---- Hero Content: Ensure centered ---- */
.hero__content {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/*
 * SAFETY: Do NOT center the following elements
 * (readability and layout preservation):
 *
 * - .blog-content p         (body text stays left-aligned)
 * - .blog-content ul/ol     (lists stay left-aligned)
 * - .pillar-faq__toggle     (FAQ questions stay left-aligned)
 * - .pillar-faq__answer p   (FAQ answers stay left-aligned)
 * - form elements           (stay left-aligned)
 * - .site-footer__inner     (respects its own grid layout)
 * - .service-pillar__sidebar (sidebar stays left-aligned)
 * - nav elements            (navigation has its own layout)
 */

/* Explicitly ensure body text within articles stays left-aligned */
.blog-content p,
.blog-content ul,
.blog-content ol,
.blog-content li,
.blog-content blockquote {
  text-align: left;
}

/* FAQ answers stay left-aligned */
.pillar-faq__answer p,
.pillar-faq__toggle {
  text-align: left;
}

/* Sidebar content stays left-aligned */
.service-pillar__sidebar {
  text-align: left;
}

/* Service list items stay left-aligned for readability */
.pillar-service-list__name,
.pillar-service-list__info {
  text-align: left;
}

/* Footer text left-aligned on desktop (centered on mobile is already handled) */
@media (min-width: 768px) {
  .site-footer__inner {
    text-align: left;
  }
}


/* ============================================================
   FIX 16 -- BANNER IMAGE ALIGNMENT
   Shift background-position upward on all hero/banner sections
   so hair and results are visible instead of cropping to the body.
   ============================================================ */

/* ---- Homepage Hero Background ---- */
.hero__bg {
  background-position: center 15% !important;
  background-size: cover !important;
}

.hero__bg-img {
  object-position: center 15% !important;
  object-fit: cover !important;
}

/* ---- Inner-Page Hero (Contact, FAQ, Blog, etc.) ---- */
.page-hero {
  background-position: center 25% !important;
}

/* ---- Services Landing Page Hero ---- */
.page-hero--services {
  background-position: center 25% !important;
  background-size: cover !important;
}

/* ---- Service Category Hero ---- */
.sev-cat-hero {
  background-position: center 20% !important;
  background-size: cover !important;
  min-height: 340px;
}

/* ---- Thank-You / Merci Hero ---- */
.merci-hero-banner {
  background-position: center 25% !important;
  background-size: cover !important;
}

/* ---- Mobile: shift even more toward the top to keep hair visible ---- */
@media (max-width: 767px) {
  .hero__bg {
    background-position: center 10% !important;
  }

  .hero__bg-img {
    object-position: center 10% !important;
  }

  .page-hero {
    background-position: center 15% !important;
  }

  .page-hero--services {
    background-position: center 15% !important;
  }

  .sev-cat-hero {
    background-position: center 15% !important;
    min-height: 250px;
  }

  .merci-hero-banner {
    background-position: center 15% !important;
  }
}


/* ============================================================
   FIX 17 -- LEGAL PAGES TEXT READABILITY
   Privacy policy & Terms of use pages had near-invisible
   light text on the beige (#F2EEEB) background.
   Force dark brown text for all legal-content elements.
   ============================================================ */

.legal-content,
.legal-content p,
.legal-content li,
.legal-content ul,
.legal-content ol,
.legal-content h2,
.legal-content h3,
.legal-content em,
.legal-content strong,
.legal-content__updated,
.legal-content__contact,
.legal-content__contact li {
  color: #3D2E1E !important;
}

.legal-content a {
  color: #8B6F4E !important;
  text-decoration: underline;
}

.legal-content a:hover,
.legal-content a:focus {
  color: #3D2E1E !important;
}


/* ============================================================
   FIX 18 -- INSTAGRAM GRID ITEMS VISIBILITY
   GSAP stagger animation sets child elements to opacity:0 and
   sometimes fails to trigger on the Instagram section. Force
   all grid items and images to be always visible.
   ============================================================ */

.instagram-grid__item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.instagram-grid__img {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ============================================================
   FIX 19 -- TEAM CTA "RÉSERVER AVEC" READABILITY
   Increase text contrast on the dark brown CTA section.
   ============================================================ */

.team-cta__text {
  opacity: 1 !important;
  color: rgba(242, 238, 235, 0.92) !important;
}

.team-cta .btn--primary {
  background: transparent !important;
  color: #F2EEEB !important;
  border: 2px solid #B8956A !important;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.team-cta .btn--primary:hover {
  background: #B8956A !important;
  color: #1A1A1A !important;
  border-color: #B8956A !important;
}


/* ============================================================
   FIX 20 -- SERVICE CARD TITLE NO-WRAP
   Prevent "Coloration" and other service names from wrapping
   to 2 lines on the homepage.
   ============================================================ */

.service-card__title {
  white-space: nowrap;
}

/* On mobile, allow wrapping since space is limited */
@media (max-width: 767px) {
  .service-card__title {
    white-space: normal;
  }
}


/* ============================================================
   FIX 21 -- TEAM CARD CONDENSED VIEW
   On the /equipe/ listing page, show less info per card.
   Full bio is visible on the individual member page.
   Scoped to .team-grid to avoid affecting member profile pages.
   ============================================================ */

.team-grid .team-card__bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 4.5em;
}

.team-grid .team-card__specialties {
  display: none;
}

/* Individual member profile page — ensure full bio is visible */
.member-profile__bio {
  display: block !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
}


/* ============================================================
   FIX 22 -- MEMBER PROFILE PAGE CENTERED LAYOUT
   Center-align the member profile section instead of the
   default left-aligned 2-column grid.
   ============================================================ */

.member-profile__grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .member-profile__grid {
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
}

.member-profile__photo-col {
  display: flex;
  justify-content: center;
}

.member-profile__photo {
  max-width: 280px;
  margin: 0 auto;
}

.member-profile__info-col {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.member-profile__name {
  text-align: center !important;
}

.member-profile__role {
  text-align: center !important;
}

.member-profile__bio {
  text-align: center !important;
}

.member-profile__experience {
  text-align: center !important;
}

.member-profile__specialties {
  justify-content: center !important;
}

.member-profile__cta {
  display: flex;
  justify-content: center;
}

.member-profile__languages {
  text-align: center !important;
  justify-content: center !important;
}


/* ============================================================
   FIX 23 -- FOOTER SOCIAL ICONS
   Fix circle rendering for social media icons in footer.
   ============================================================ */

.site-footer__social {
  display: flex !important;
  gap: 0.75rem;
  align-items: center;
}

.site-footer__social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: var(--color-cream, #F5F0EB) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.site-footer__social-link:hover {
  background-color: var(--color-gold, #C9A96E) !important;
  border-color: var(--color-gold, #C9A96E) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.site-footer__social-link svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}


/* ============================================================
   FIX 24 -- LOCATION DIRECTIONS SECTION DESIGN
   Improve visual design of "Comment s'y rendre" sections.
   ============================================================ */

.section-directions {
  padding: 4rem 0 !important;
}

.directions-card {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 2.5rem !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06) !important;
  margin-bottom: 1.5rem !important;
  border-left: 4px solid var(--color-gold, #C9A96E) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.directions-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.1) !important;
}

.directions-card__icon {
  color: var(--color-gold, #C9A96E) !important;
  margin-bottom: 0.75rem !important;
}

.directions-card__icon svg {
  width: 32px !important;
  height: 32px !important;
  stroke: var(--color-gold, #C9A96E) !important;
}

.directions-card h3 {
  font-family: var(--font-heading, 'Cormorant Garamond', serif) !important;
  font-size: 1.5rem !important;
  margin-bottom: 1rem !important;
  color: var(--color-accent, #3D3229) !important;
}

.directions-grid {
  display: grid !important;
  gap: 1.5rem !important;
}

@media (min-width: 768px) {
  .directions-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================================
   FIX 23 -- Réalisations: Close gap between intro and filter bar
   Reduce the large whitespace between the stats section and
   the filter bar, and make filter bar compact.
   ============================================================ */
.realisations-intro {
  padding-bottom: 1.5rem !important;
}

.realisations-intro__stats {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.gallery-filter-bar {
  margin-top: 0 !important;
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
  border-top: none !important;
}

/* ============================================================
   FIX 24 -- Homepage: Darken hero overlay for text legibility
   ============================================================ */
.hero--home .hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(20, 18, 16, 0.5) 0%,
    rgba(20, 18, 16, 0.6) 35%,
    rgba(20, 18, 16, 0.7) 60%,
    rgba(20, 18, 16, 0.85) 100%
  ) !important;
}

/* ============================================================
   FIX 24B -- Réalisations gallery: reduce top padding gap
   ============================================================ */
.realisations-gallery {
  padding-top: 1.5rem !important;
}

/* ============================================================
   FIX 24C -- Service card title: allow wrapping for long names
   ============================================================ */
.service-card__title {
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* ============================================================
   FIX 25 -- Homepage: Team card bios — no truncation
   ============================================================ */
.team-card__bio {
  -webkit-line-clamp: unset !important;
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* ============================================================
   FIX 26 -- Homepage: Nous trouver — compact metro/parking
   Move metro stations and parking note under the map column
   using CSS grid reordering on desktop.
   ============================================================ */
@media (min-width: 768px) {
  .section-location__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }

  .section-location__info {
    display: contents !important;
  }

  /* Keep address/phone/email/hours in left column */
  .section-location__address,
  .section-location__hours {
    grid-column: 1 !important;
  }

  /* Move metro and parking to right column under map */
  .section-location__metro {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  .section-location__parking {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }

  /* CTA button stays in left column */
  .section-location__info > .btn {
    grid-column: 1 !important;
  }

  /* Map in right column spanning rows */
  .section-location__map {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
  }
}

/* ============================================================
   FIX 27 -- Services page: hide interstitial CTAs
   Redundant with the "Une question?" section at the top.
   ============================================================ */
.sev-interstitial-cta {
  display: none !important;
}

/* ============================================================
   FIX 28 -- Team cards: consistent vertical alignment
   Force all cards to align names/roles/bios at the same height
   ============================================================ */
.team-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2rem !important;
  align-items: start !important;
}

@media (max-width: 1023px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 599px) {
  .team-grid {
    grid-template-columns: 1fr !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }
}

.team-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  height: 100% !important;
}

/* Fixed height for photo area */
.team-card__photo-wrap {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
}

/* Role with fixed min-height to align bios */
.team-card__role {
  min-height: 2.8em !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

/* Bio with consistent display */
.team-card__bio {
  flex: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: none !important;
}

/* Results link always at bottom */
.team-card__results-link {
  margin-top: auto !important;
  padding-top: 0.75rem !important;
}


/* ============================================================
   FIX 29 -- LOCATION PAGE: HERO DARK OVERLAY (F2)
   Strengthen the overlay gradient so the H1 text is legible
   over bright hero images.
   ============================================================ */
.location-hero__overlay,
.page-hero--location .page-hero__overlay {
  background: linear-gradient(to bottom, rgba(20,18,16,0.45) 0%, rgba(20,18,16,0.65) 50%, rgba(20,18,16,0.8) 100%) !important;
}


/* ============================================================
   FIX 30 -- LOCATION PAGE: BREADCRUMBS (F1)
   Subtle, elegant breadcrumbs inside the location hero.
   Small font, lighter color, no list-style numbers.
   Matches the style established in fixes-blog.css.
   ============================================================ */
.page-hero--location .breadcrumb {
  margin-bottom: 1rem;
}

.page-hero--location .breadcrumb__list {
  list-style: none !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0;
  counter-reset: none;
  justify-content: center;
}

.page-hero--location .breadcrumb__item {
  display: inline-flex;
  align-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  list-style: none !important;
}

/* Remove any auto-generated counter numbers */
.page-hero--location .breadcrumb__list {
  list-style-type: none !important;
}

.page-hero--location .breadcrumb__item::marker {
  content: '' !important;
  display: none !important;
}

/* Chevron separator between items */
.page-hero--location .breadcrumb__item + .breadcrumb__item::before {
  content: '\203A';
  display: inline-block;
  margin: 0 0.6rem;
  color: rgba(201,169,110,0.7);
  font-size: 1rem;
  line-height: 1;
}

.page-hero--location .breadcrumb__link {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.25s ease;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-hero--location .breadcrumb__link:hover {
  color: #C9A96E;
}

/* Current page (last item) — slightly brighter */
.page-hero--location .breadcrumb__item--current {
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}


/* ============================================================
   FIX 31 -- LOCATION PAGE: HEADING ALIGNMENT (F3)
   Center all section headings on location pages.
   ============================================================ */
.page-hero--location ~ .section-directions .section-header__title,
.page-hero--location ~ .section-services .section-header__title,
.page-hero--location ~ section h2,
.page-hero--location ~ section .section-title,
.page-hero--location ~ section .section-header__title {
  text-align: center !important;
}

/* Also center the eyebrows and subtitles */
.page-hero--location ~ section .section-eyebrow,
.page-hero--location ~ section .section-header__subtitle {
  text-align: center !important;
}

/* Center the section headers as a block */
.page-hero--location ~ section .section-header {
  text-align: center !important;
}


/* ============================================================
   FIX 32 -- EQUIPE PAGE: BOTTOM SECTIONS REDESIGN (D1)
   Elegant typography and styling for "Decouvrir nos services"
   and "Rejoignez notre equipe" sections.
   ============================================================ */

/* --- Shared section styles --- */
.team-services,
.join-team {
  padding: 4rem 0 !important;
}

.team-services__inner,
.join-team__inner {
  text-align: center;
}

/* --- Section Titles: Cormorant Garamond --- */
.team-services__title,
.join-team__title {
  font-family: 'Cormorant Garamond', 'Georgia', serif !important;
  font-size: clamp(26px, 3.5vw, 38px) !important;
  font-weight: 500 !important;
  color: #3D2E1E !important;
  letter-spacing: 0.02em;
  margin-bottom: 1rem !important;
  position: relative;
  display: inline-block;
}

/* Gold underline accent below titles */
.team-services__title::after,
.join-team__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: #C9A96E;
  margin: 0.75rem auto 0;
  border-radius: 1px;
}

/* --- Body text --- */
.team-services__text,
.join-team__text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #5a4a3a;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
}

/* ---- "Decouvrir nos services" links list ---- */
.team-services__links {
  list-style: none !important;
  padding: 0 !important;
  margin: 2rem auto !important;
  max-width: 680px;
  text-align: left;
}

.team-services__links li {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(201,169,110,0.2);
  font-size: 1rem;
  line-height: 1.65;
  color: #5a4a3a;
}

.team-services__links li:first-child {
  border-top: 1px solid rgba(201,169,110,0.2);
}

.team-services__links li a {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #C9A96E !important;
  text-decoration: none;
  transition: color 0.25s ease;
}

.team-services__links li a:hover {
  color: #3D2E1E !important;
}

/* CTA button */
.team-services__cta {
  margin-top: 2.5rem;
  text-align: center;
}

.team-services__cta .btn {
  border-color: #C9A96E !important;
  color: #C9A96E !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 0.85rem 2.5rem;
  transition: background 0.3s ease, color 0.3s ease;
}

.team-services__cta .btn:hover {
  background: #C9A96E !important;
  color: #fff !important;
}

/* ---- "Rejoignez notre equipe" section ---- */
.join-team {
  background: #F8F5F1 !important;
  border-top: 1px solid rgba(201,169,110,0.15);
}

/* Icon styling */
.join-team__icon {
  margin-bottom: 1.25rem;
  color: #C9A96E !important;
}

.join-team__icon svg {
  stroke: #C9A96E !important;
  width: 44px !important;
  height: 44px !important;
}

/* Email address — styled as a prominent CTA button */
.join-team__email {
  display: inline-block !important;
  margin: 1.5rem auto !important;
  padding: 1rem 2.5rem !important;
  background: #C9A96E !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  transition: background 0.3s ease, transform 0.2s ease !important;
  box-shadow: 0 2px 12px rgba(201,169,110,0.3) !important;
}

.join-team__email:hover {
  background: #b8956a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(201,169,110,0.4) !important;
}

/* Note text */
.join-team__note {
  margin-top: 1.5rem;
  color: #8a7a6a;
  font-size: 0.85rem;
  font-style: italic;
}