/* Shared visual scale for the page templates. Partner form controls keep their own styles. */
:root {
  --title-page: clamp(36px, 4.1vw, 54px);
  --title-section: clamp(28px, 2.8vw, 36px);
  --title-card: 26px;
  --title-sidebar: 20px;
  --section-gap: 56px;
  --content-gap: 32px;
  --card-padding: 28px;
}

.site-main :is(.hero-copy, .region-hero-copy, .artisan-hero-copy, .location-hero, .request-intro, .contact-page, .simple-page) h1 {
  font-size: var(--title-page);
  line-height: 1.1;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.site-main :is(.services-heading, .workflow-heading, .home-directory-heading, .region-directory .section-heading, .region-guide, .faq-section, .city-project-guide, .city-other-towns, .artisan-related, .department-related) h2 {
  font-size: var(--title-section);
  line-height: 1.2;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.site-main :is(.artisan-card, .contact-card, .city-directory-heading, .city-map-heading, .department-introduction, .department-cities) h2 {
  font-size: var(--title-card);
  line-height: 1.25;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.site-main :is(.city-expertise, .city-services, .city-project-sidebar, .artisan-sidebar, .department-sidebar) h2 {
  font-size: var(--title-sidebar);
  line-height: 1.35;
  letter-spacing: -.02em;
  text-transform: none;
}
.department-cities>h2, .artisan-services h2 {padding-left: 0; border-left: 0}
.department-cities, #communes-du-departement {scroll-margin-top: calc(var(--site-header-height, 90px) + 20px - var(--anchor-padding, 112px))}
.artisan-services h2::before {content: none}
.site-main :is(.section-heading, .services-heading, .workflow-heading, .home-directory-heading) {margin-bottom: 28px}
.site-main :is(.directory-card, .department-city-card, .city-professional-info, .city-other-card, .artisan-facts td, .artisan-qualification-facts dd) {min-width: 0; overflow-wrap: anywhere}
.site-main :is(.region-guide, .faq-section, .department-main, .city-project-guide, .artisan-card)>div {min-width: 0}
.site-main :is(p, dd, li) {overflow-wrap: anywhere}

.btn {min-height: 48px; max-width: 100%; padding: 14px 20px; border-radius: 8px; font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere}
.header-cta {min-height: 44px; padding: 12px 18px; font-size: 13px}
.mobile-header-quote {display: none}
.btn:focus-visible {outline: 3px solid #78934f; outline-offset: 4px}
.hero-actions>.btn, .location-hero .btn {font-size: 14px; padding: 14px 20px}
.artisan-hero-copy>.artisan-back-cta {display: flex; width: fit-content; margin: 24px 0 0}
.city-profile-link {min-height: 40px; padding: 10px 14px; font-size: 12px; flex: none}
.hero-reassurance {font-size: 12px; padding: 9px 14px; line-height: 1.45}
.result-count, .city-results-count, .directory-region-count {font-size: 12px; line-height: 1.5; white-space: normal; max-width: 100%}

.services-section, .workflow-section, .directory-section, .region-directory {padding-block: var(--section-gap)}
.directory-section+.faq-section, .region-page>.faq-section {padding-top: var(--section-gap)}
.faq-section {column-gap: 48px; padding-bottom: var(--section-gap)}
.faq-section>div>p {margin-top: 16px; font-size: 14px; line-height: 1.75}
.region-guide {gap: var(--content-gap); margin-bottom: 0; padding: var(--card-padding)}
.city-page-layout {gap: var(--content-gap); margin-top: var(--content-gap)}
.department-layout {gap: var(--content-gap); margin-bottom: var(--section-gap)}
.artisan-content {gap: var(--content-gap); margin-top: var(--content-gap)}
.artisan-details {gap: var(--content-gap)}
.artisan-card, .city-professionals, .city-expertise, .city-services, .city-project-sidebar {padding: var(--card-padding)}
.artisan-presentation h2, .artisan-info>h2, .city-project-guide h2 {margin-bottom: 20px}
.artisan-details>.faq-section, .city-page-layout>.faq-section, .department-layout>.faq-section {padding-top: var(--content-gap)}
.empty-state {padding: 24px; margin: 0; color: var(--muted); background: #eef1e7; border: 1px solid var(--line); border-radius: var(--radius)}

/* The same line icons are used in the homepage, city sidebar and artisan services. */
.services-section--tiles .service-icon {width: 48px; height: 48px; border-radius: 12px; background: #edf2e5; color: #547344; font-family: inherit}
.services-section--tiles .service-icon .icon {width: 26px; height: 26px; stroke-width: 1.6}
.city-service-icon, .artisan-service-icon {display: flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 9px; background: #edf2e5; color: #547344}
.city-service-icon .icon, .artisan-service-icon .icon {width: 22px; height: 22px; stroke-width: 1.6}
.city-services li {gap: 12px}
.artisan-services-grid li {gap: 12px}

/* Quote destination: a concise introduction beside the shared form. */
.request-layout {display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "intro form" "benefits form"; gap: 0 32px; align-items: stretch; margin: 0 0 var(--section-gap)}
.request-intro {grid-area: intro; padding: 40px 40px 28px; border-radius: 24px 24px 0 0; background: var(--forest); color: #fff; min-width: 0}
.request-form {grid-area: form; align-self: start}
.request-reassurance {grid-area: benefits; padding: 0 40px 40px; border-radius: 0 0 24px 24px; background: var(--forest); color: #fff; min-width: 0}
.request-intro h1 {margin: 0 0 24px}
.request-intro>p {max-width: none; margin: 0; color: #c7d8cb; font-size: 15px; line-height: 1.8}
.request-points {list-style: none; padding: 28px 0 0; margin: 0; border-top: 1px solid #ffffff24; display: grid; gap: 24px}
.request-points li {display: flex; align-items: flex-start; gap: 14px}
.request-point-icon {display: flex; align-items: center; justify-content: center; flex: 0 0 34px; height: 34px; border-radius: 9px; background: #ffffff0d; color: var(--lime)}
.request-point-icon .icon {width: 21px; height: 21px}
.request-points strong {display: block; font-size: 15px; line-height: 1.45; font-weight: 650; margin: 3px 0 5px}
.request-points p {margin: 0; color: #c7d8cb; font-size: 13px; line-height: 1.7}
.request-form .quote-panel {border: 1px solid var(--line); box-shadow: 0 6px 24px #173d3008; border-radius: 24px}
.page-demande .faq-section {border-top: 1px solid var(--line); padding-top: var(--section-gap)}

/* Omit the empty grid row when a city has no neighbouring towns in the catalogue. */
@media (min-width: 901px) {
  .city-page-layout--no-nearby {grid-template-areas: "listing sidebar" "guide sidebar" "faq sidebar"}
  .city-page-layout--with-map.city-page-layout--no-nearby {grid-template-areas: "listing sidebar" "map sidebar" "guide sidebar" "faq sidebar"}
}
@media (max-width: 900px) {
  :root {--section-gap: 40px; --content-gap: 28px; --card-padding: 24px}
  .request-layout {grid-template-columns: 1fr; grid-template-areas: "intro" "form" "benefits"; gap: 24px}
  .request-intro {padding: 28px; border-radius: 24px}
  .request-reassurance {padding: 28px; border-radius: 24px}
  .request-intro h1 {max-width: 620px}
  .request-points {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; border: 0}
  .request-points li {display: block}
  .request-point-icon {width: 34px; margin-bottom: 10px}
  .request-form {width: 100%; max-width: 660px; justify-self: center}
  .city-page-layout--no-nearby {grid-template-areas: "listing" "sidebar" "guide" "faq"}
  .city-page-layout--with-map.city-page-layout--no-nearby {grid-template-areas: "listing" "map" "sidebar" "guide" "faq"}
}
@media (max-width: 600px) {
  :root {--title-page: 36px; --title-section: 28px; --title-card: 24px; --section-gap: 36px; --content-gap: 24px; --card-padding: 20px}
  .site-main :is(.section-heading, .services-heading, .workflow-heading, .home-directory-heading) {margin-bottom: 24px}
  .faq-section {gap: 24px}
  .mobile-cta .btn {min-height: 46px; padding: 12px 16px; font-size: 13px}
  .main-nav .mobile-header-quote {display: block; font-size: 12px; max-width: 125px; text-align: right; line-height: 1.4}
  .request-intro {padding: 24px; border-radius: 18px}
  .request-reassurance {padding: 24px; border-radius: 18px}
  .request-intro>p {font-size: 14px}
  .request-points {grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0}
  .request-points li {display: flex; align-items: center; gap: 12px}
  .request-point-icon {margin: 0}
  .request-points strong {font-size: 14px; margin: 0}
  .request-points p {font-size: 12px; margin-top: 3px}
  .request-form .quote-panel {border-radius: 18px}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto}
  .btn {transition: none}
  .btn:hover {transform: none}
}


/* Nearby listings state the actual town and the basis of the distance. */
.city-other-towns .city-all-towns {display: table; margin: 24px auto 0; text-align: center; font-weight: 600}
.city-professionals>.city-directory-cta {display: flex; width: fit-content; max-width: 100%; margin: 24px auto 0}
.city-professionals>.city-directory-cta+.city-nearby-note {margin-top: 24px}
.city-nearby-directory {margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line)}
.city-nearby-directory>h2 {margin: 0 0 16px; font-size: 24px; line-height: 1.3}
@media (max-width: 600px) {
 .city-nearby-directory {margin-top: 24px; padding-top: 24px}
 .city-nearby-directory>h2 {font-size: 22px}
}

.city-nearby-intro {margin: 0 0 12px; color: var(--forest); font-size: 15px; line-height: 1.7}
.city-nearby-note {margin: 0 0 24px; padding: 12px 14px; border-radius: 10px; background: #edf2e5; color: var(--muted); font-size: 12px; line-height: 1.65}
.city-professional-distance {margin: 5px 0; color: var(--forest); font-size: 12px; font-weight: 600; line-height: 1.5}

/* Readable legal pages, using the same spacing and colours as the directory. */
.page-mentions-legales .simple-page, .page-confidentialite .simple-page {max-width: 880px; margin: 0 auto; padding: 28px 0 64px}
.policy-document {padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 18px; font-size: 15px; line-height: 1.8}
.policy-intro {color: var(--muted); margin-bottom: 10px}
.policy-updated {color: var(--muted); font-size: 12px; margin-bottom: 28px}
.policy-document section+section {border-top: 1px solid var(--line); margin-top: 28px; padding-top: 28px}
.policy-document h2 {font-size: 23px; line-height: 1.3; letter-spacing: -.025em; margin-bottom: 16px}
.policy-document section>p:last-child {margin-bottom: 0}
.policy-document a {text-underline-offset: 3px; overflow-wrap: anywhere}
.policy-document a:hover {color: #547344}
.policy-facts {margin: 0}
.policy-facts>div {display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 20px; padding: 9px 0}
.policy-facts dt {color: var(--muted)}
.policy-facts dd {margin: 0; font-weight: 550}
@media(max-width:600px) {
 .page-mentions-legales .simple-page, .page-confidentialite .simple-page {padding-top: 12px; padding-bottom: 40px}
 .policy-document {padding: 22px 20px; font-size: 14px}
 .policy-document h2 {font-size: 21px}
 .policy-facts>div {grid-template-columns: 1fr; gap: 2px}
}