/* Étape 4 : composition des pages publiques intérieures. Le CMS reste la source du contenu. */
.site-page:not(.page-home) #main { background: var(--jc-off-white); }
.site-page:not(.page-home) #main > .soft-section { background: var(--jc-off-white-cool); }
.site-page:not(.page-home) .breadcrumbs { padding-top: 1.1rem; }
.site-page:not(.page-home) .page-hero { position: relative; padding-block: clamp(3.5rem, 7vw, 7.5rem); }
.site-page:not(.page-home) .page-hero .eyebrow { margin-bottom: 1.4rem; }
.site-page:not(.page-home) .page-hero h1 { max-width: 14ch; margin-bottom: 1.7rem; color: var(--jc-blue-dark); font-size: clamp(3.25rem, 6.2vw, 7.2rem); line-height: .98; letter-spacing: -.065em; }
.site-page:not(.page-home) .page-hero .lead { max-width: 42rem; color: #48536a; font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.75; }
.site-page:not(.page-home) .section-heading h2 { max-width: 20ch; letter-spacing: -.05em; }
.site-page:not(.page-home) .section-heading > p { max-width: 30rem; }
.site-page:not(.page-home) .empty-state { border: 1px solid #e3e5e7; border-radius: 1.3rem; background: #fff; }
.site-page:not(.page-home) .cta-section { margin-top: clamp(3rem, 5vw, 6rem); }

/* À propos : portrait, convictions, méthode et avantages. */
.page-about .page-hero.about-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; margin-top: 1rem; background: transparent; border: 0; }
.page-about .about-hero > div { position: relative; z-index: 1; }
.page-about .page-hero.about-hero h1 { max-width: 14ch; font-size: clamp(3.2rem, 4.5vw, 5.4rem); }
.page-about .about-hero-art { margin: 0; padding: 0 0 1.7rem 1.7rem; }
.page-about .about-hero-art::before { display: block; inset: -1.25rem 1.25rem 2.75rem 0; border-color: #a78b18; border-radius: 1.5rem 9rem 1.5rem 1.5rem; }
.page-about .about-hero-art .hero-image { aspect-ratio: .98; border-radius: 1.4rem 8rem 1.4rem 1.4rem; box-shadow: 0 25px 55px rgb(17 43 117 / 11%); }
.page-about .about-hero-art .hero-image img { width: 100%; height: 100%; object-fit: cover; }
.page-about .about-intro { padding-block: clamp(5rem, 8vw, 9rem); }
.page-about .about-intro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; }
.page-about .about-intro-grid > * { min-width: 0; }
.page-about .about-intro h2 { max-width: 13ch; font-size: clamp(2.5rem, 4.2vw, 5rem); line-height: 1.08; letter-spacing: -.055em; }
.page-about .about-intro .prose { max-width: 36rem; font-size: 1rem; line-height: 1.85; }
.page-about .about-intro figure { margin: 0; }
/* Même plafond que les autres visuels éditoriaux, sans rogner la légende. */
.page-about .about-intro figure img { display: block; width: 100%; height: 400px; max-height: 400px; aspect-ratio: auto; object-fit: cover; object-position: center 35%; border-radius: 1.4rem; }
.page-about .about-intro figcaption { margin-top: .65rem; color: var(--muted); font-size: .7rem; }
.page-about .about-principles { padding-block: clamp(5rem, 8vw, 8rem); }
.page-about .about-principles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.page-about .about-principles-grid .statement-card { display: flex; flex-direction: column; min-height: 360px; padding: clamp(1.6rem, 2.5vw, 2.7rem); background: #fff; }
.page-about .about-principles-grid .statement-card:nth-child(2) { background: var(--jc-blue-dark); border-color: var(--jc-blue-dark); }
.page-about .about-principles-grid .statement-card:nth-child(2) :is(h3, .eyebrow, p) { color: #fff; }
.page-about .about-principles-grid .statement-card:nth-child(2) .eyebrow, .page-about .about-principles-grid .statement-card:nth-child(2) .principle-number { color: var(--jc-gold-light); }
.page-about .principle-number { display: block; margin-bottom: auto; padding-bottom: 4rem; color: #947815; font: 600 .85rem var(--font-display); }
.page-about .about-principles-grid h3 { max-width: 16ch; margin: .3rem 0 1.2rem; color: var(--jc-blue-dark); font-size: clamp(1.6rem, 2.1vw, 2.4rem); line-height: 1.13; letter-spacing: -.045em; }
.page-about .about-principles-grid p:last-child { margin: 0; color: #566071; line-height: 1.65; }
.page-about .values-section { background: var(--jc-blue-dark); color: #fff; }
.page-about .values-section h2, .page-about .values-section h3 { color: #fff; }
.page-about .values-section .lead { color: #d8e0f0; }
.page-about .values-section .eyebrow { color: var(--jc-gold-light); }
.page-about .values-section .values-grid > div { background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 15%); }
.page-about .values-section .service-number { color: var(--jc-gold-light); }
.page-about .process-grid li { border: 1px solid var(--jc-border); border-radius: 1.1rem; background: #fff; padding: 1.5rem; }

/* Catalogue : une grille éditoriale illustrée et facilement parcourable. */
.page-services:not(.page-variant-service-detail) .services-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); }
.page-services:not(.page-variant-service-detail) .services-hero h1 { max-width: 14ch; }
.page-services:not(.page-variant-service-detail) .services-hero .text-link { display: inline-flex; margin-top: 1rem; }
.page-services:not(.page-variant-service-detail) .services-hero figure { min-width: 0; margin: 0; }
/* Remplacer aussi la hauteur intrinsèque HTML : un ratio seul ne la plafonne pas.
   La légende reste hors du cadre et le recadrage conserve les proportions. */
.page-services:not(.page-variant-service-detail) .services-hero img { display: block; width: 100%; height: 400px; max-height: 400px; aspect-ratio: auto; object-fit: cover; border-radius: 1.4rem 8rem 1.4rem 1.4rem; }
.page-services:not(.page-variant-service-detail) .services-hero figcaption { margin-top: .65rem; color: var(--muted); font-size: .7rem; text-align: right; }
.page-services:not(.page-variant-service-detail) .services-list { padding-top: clamp(3rem, 6vw, 6rem); }
.page-services:not(.page-variant-service-detail) .services-grid-editorial { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.2rem; }
.page-services:not(.page-variant-service-detail) .services-grid-editorial > .service-card { grid-column: span 3; }
.page-services:not(.page-variant-service-detail) .services-grid-editorial > .service-card:nth-child(-n+3) { grid-column: span 4; }
.page-services:not(.page-variant-service-detail) .services-grid-editorial > .service-card:nth-child(4) { grid-column: span 6; }
.page-services:not(.page-variant-service-detail) .services-grid-editorial > .service-card:nth-child(5) { grid-column: span 6; }
.page-services:not(.page-variant-service-detail) .services-grid-editorial > .service-card:nth-child(n+6) { grid-column: span 6; }
.page-services:not(.page-variant-service-detail) .service-card .media { aspect-ratio: 1.5; }
.page-services:not(.page-variant-service-detail) .service-card:nth-child(4) .media, .page-services:not(.page-variant-service-detail) .service-card:nth-child(5) .media { aspect-ratio: 1.85; }
.page-services:not(.page-variant-service-detail) .service-card .card-body { padding: clamp(1.5rem, 2.4vw, 2.4rem); }
.page-services:not(.page-variant-service-detail) .service-card h3 { max-width: 18ch; font-size: clamp(1.4rem, 2vw, 2.2rem); line-height: 1.17; }
.page-services:not(.page-variant-service-detail) .service-card .card-body .text-link { display: flex; align-items: center; justify-content: space-between; }

/* Fiches services : chaque information conserve sa source MySQL. */
.page-variant-service-detail .service-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-top: 1rem; border: 0; background: linear-gradient(120deg, #fff 0%, #f4f6fa 100%); }
.page-variant-service-detail .service-hero h1 { max-width: 11ch; }
.page-variant-service-detail .service-hero .detail-hero-image { aspect-ratio: 1.13; border-radius: 1.2rem 7rem 1.2rem 1.2rem; overflow: hidden; }
.page-variant-service-detail .service-hero .detail-hero-image img { object-fit: cover; }
.page-variant-service-detail .service-hero .button-group { flex-wrap: wrap; }
.page-variant-service-detail .reading-width.prose { padding: clamp(1.4rem, 3vw, 3rem); border-left: 3px solid var(--jc-gold); background: #fff; border-radius: 0 1rem 1rem 0; }
.page-variant-service-detail .two-cards .statement-card { min-height: 100%; }
.page-variant-service-detail .service-offer .statement-card { border-top: 3px solid var(--jc-gold); }
.page-variant-service-detail .service-process li span { color: #866d0d; }

/* Portfolio et fiche projet. */
.page-projects:not(.page-variant-project-detail) .cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.page-projects:not(.page-variant-project-detail) .cards-grid .project-card:first-child:not(:only-child) { grid-column: span 2; }
.page-projects:not(.page-variant-project-detail) .project-card .media { aspect-ratio: 1.35; }
.page-projects:not(.page-variant-project-detail) .project-card:first-child .media { aspect-ratio: 1.8; }
.page-projects:not(.page-variant-project-detail) .project-card h3 { font-size: clamp(1.35rem, 1.9vw, 2rem); }
.page-projects:not(.page-variant-project-detail) .filter-form { border: 1px solid var(--jc-border); border-radius: 1rem; background: #fff; }
.page-variant-project-detail .project-intro { align-items: end; }
.page-variant-project-detail .project-intro h1 { max-width: 13ch; }
.page-variant-project-detail .project-facts { padding: 1.8rem; border: 1px solid var(--jc-border); border-radius: 1rem; background: #fff; }
.page-variant-project-detail .project-cover { aspect-ratio: 1.9; }
.page-variant-project-detail .project-cover > img { object-fit: cover; }
.page-variant-project-detail .project-story section { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.4rem; padding-block: 2rem; }
.page-variant-project-detail .project-story .story-index { color: #947815; font: 600 1.1rem var(--font-display); }
.page-variant-project-detail .gallery-grid figure { margin: 0; }
.page-variant-project-detail .gallery-grid .media { aspect-ratio: 1.4; }
.page-variant-project-detail .project-conversion { padding-block: clamp(2rem, 4vw, 4rem); }

/* Actualités : couverture éditoriale et lecture sereine. */
.page-news:not(.page-variant-article-detail) .page-hero { border-bottom: 1px solid var(--jc-border); }
.page-news:not(.page-variant-article-detail) .category-filters { margin-bottom: 2.2rem; }
.page-news:not(.page-variant-article-detail) .category-filters a[aria-current="page"] { background: var(--jc-blue-dark); color: #fff; border-color: var(--jc-blue-dark); }
.page-news:not(.page-variant-article-detail) .news-magazine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.page-news:not(.page-variant-article-detail) .news-magazine > .news-card { grid-column: span 1; }
.page-news:not(.page-variant-article-detail) .news-magazine > .news-featured:not(.news-lead) { display: flex; }
.page-news:not(.page-variant-article-detail) .news-magazine > .news-lead:first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.page-news:not(.page-variant-article-detail) .news-magazine > .news-lead:only-child { grid-column: 1 / -1; }
.page-news:not(.page-variant-article-detail) .news-magazine > .news-lead .media { min-height: 0; height: auto; aspect-ratio: 1.65; }
.page-news:not(.page-variant-article-detail) .news-magazine > .news-lead h3 { font-size: clamp(1.75rem, 2.6vw, 3.1rem); }
.page-news:not(.page-variant-article-detail) .news-magazine > .news-card:not(.news-lead) .media { aspect-ratio: 1.5; }
.page-news:not(.page-variant-article-detail) .news-card .card-body { padding: clamp(1.3rem, 2vw, 2rem); }
.page-variant-article-detail .article-heading { max-width: 56rem; margin-bottom: clamp(2.5rem, 5vw, 5rem); text-align: left; }
.page-variant-article-detail .article-heading .card-meta { justify-content: flex-start; }
.page-variant-article-detail .article-heading h1 { max-width: 15ch !important; }
.page-variant-article-detail .article-heading .lead { margin-inline: 0; }
.page-variant-article-detail .article-cover { aspect-ratio: 2; }
.page-variant-article-detail .article-cover > img { object-fit: cover; }
.page-variant-article-detail .article-body { max-width: 48rem; font-size: 1.02rem; line-height: 1.85; }
.page-variant-article-detail .article-body :is(h2, h3) { margin-top: 2.5rem; }
.page-variant-article-detail .article-body img { max-width: 100%; height: auto; border-radius: .9rem; }
.page-variant-article-detail .article-share { border-top: 2px solid var(--jc-gold); }
.page-variant-article-detail .article-next { padding: 2rem; border: 0; border-radius: 1rem; background: #fff; }

/* Contact, devis et états utiles. */
.page-contact .page-hero, .page-quote:not(.page-variant-quote-thanks) .page-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.page-contact .contact-grid, .page-quote .quote-layout { padding-bottom: clamp(4rem, 7vw, 8rem); }
.page-contact .contact-details { min-height: 100%; background: var(--jc-blue-dark); }
.page-contact .contact-details h2 { max-width: 13ch; font-size: clamp(2rem, 3vw, 3.4rem); line-height: 1.1; }
.page-contact .contact-details h2 em { color: var(--jc-gold-light); }
.page-contact .contact-details dl > div { padding-bottom: 1.2rem; border-bottom: 1px solid rgb(255 255 255 / 18%); }
.page-contact .contact-details dd { overflow-wrap: anywhere; }
.page-contact .contact-socials { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 2rem; }
.page-contact .contact-socials a { color: var(--jc-gold-light); font-size: .8rem; }
.page-contact .contact-socials a:hover { color: #fff; }
.page-contact .contact-form, .page-quote .quote-form { border-color: #e3e5e7; box-shadow: 0 16px 40px rgb(17 43 117 / 5%); }
.page-contact .contact-form > .button { width: 100%; }
.page-quote .quote-aside { overflow: hidden; background: var(--jc-blue-dark); }
.page-quote .quote-aside::after { content: ""; display: block; width: 9rem; height: 9rem; margin: 2rem -4rem -7rem auto; border: 1px solid rgb(212 184 16 / 55%); border-radius: 50%; }
.page-quote .quote-aside li { padding: .5rem 0; }
.page-quote .quote-steps { display: flex; gap: .5rem; margin: 2rem 0 2.5rem; }
.page-quote .quote-steps a { flex: 1; min-width: 0; padding: .85rem .6rem; border-top: 2px solid var(--jc-gold); color: var(--jc-blue-dark); font-size: .72rem; font-weight: 700; }
.page-quote .quote-steps span { display: block; margin-bottom: .25rem; color: #806a0c; font-size: .68rem; }
.page-quote .quote-form fieldset { scroll-margin-top: 7rem; }
.page-quote .quote-form legend { padding-bottom: .5rem; font-size: clamp(1.25rem, 1.8vw, 1.8rem); }
.page-quote .quote-form legend span { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--jc-blue-dark); color: var(--jc-gold-light); }
.page-quote .quote-form > .button { background: var(--jc-gold); color: var(--jc-blue-dark); }
.page-quote .quote-form > .button:hover { background: var(--jc-gold-light); }
.page-variant-quote-thanks .quote-thanks { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; max-width: 62rem; min-height: 65vh; }
.page-variant-quote-thanks .quote-thanks .button-group { margin-top: 1.5rem; }
.page-search .search-form { max-width: 56rem; }
.page-search .search-form > div { padding: .4rem; border: 1px solid var(--jc-border); border-radius: 1rem; background: #fff; }
.page-search .search-form input { border: 0; }
.page-search .search-results article { background: #fff; }
.page-interior .error-page { padding-block: clamp(5rem, 10vw, 10rem); }
.page-interior .error-page h1 { max-width: 12ch; font-size: clamp(3.5rem, 7vw, 7rem); }
.page-interior .error-page .lead { max-width: 42rem; }

@media (max-width: 1199px) {
    .page-services:not(.page-variant-service-detail) .services-hero img { height: 270px; max-height: 270px; }
    .page-about .about-intro figure img { height: 270px; max-height: 270px; }
}
@media (max-width: 1100px) {
    .page-about .about-principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-about .about-principles-grid .statement-card { min-height: 300px; }
    .page-services:not(.page-variant-service-detail) .services-grid-editorial > .service-card { grid-column: span 6 !important; }
    .page-news:not(.page-variant-article-detail) .news-magazine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-news:not(.page-variant-article-detail) .news-magazine > .news-lead:first-child { grid-row: auto; }
}
@media (max-width: 800px) {
    .page-about .page-hero.about-hero, .page-about .about-intro-grid,
    .page-services:not(.page-variant-service-detail) .services-hero,
    .page-variant-service-detail .service-hero { grid-template-columns: 1fr; }
    .page-about .about-hero-art, .page-services:not(.page-variant-service-detail) .services-hero figure { max-width: 40rem; }
    .page-about .about-intro-grid figure { max-width: 42rem; }
    .page-projects:not(.page-variant-project-detail) .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-variant-project-detail .project-intro { grid-template-columns: 1fr; }
    .page-contact .contact-form { order: 0; }
    .page-contact .contact-details { order: 0; }
}
@media (max-width: 600px) {
    .site-page:not(.page-home) .page-hero { padding-block: 3rem; }
    .site-page:not(.page-home) .page-hero h1 { font-size: clamp(2.75rem, 10.7vw, 4rem); }
    .page-about .page-hero.about-hero h1 { font-size: clamp(2.75rem, 10.7vw, 4rem); }
    .page-about .about-hero-art { padding: 0 0 .6rem .6rem; }
    .page-about .about-hero-art .hero-image { border-radius: 1rem 4.5rem 1rem 1rem; }
    .page-about .about-principles-grid,
    .page-projects:not(.page-variant-project-detail) .cards-grid,
    .page-news:not(.page-variant-article-detail) .news-magazine { grid-template-columns: 1fr; }
    .page-about .about-principles-grid .statement-card { min-height: 260px; }
    .page-about .process-grid li { padding-left: 4.8rem; }
    .page-services:not(.page-variant-service-detail) .services-grid-editorial > .service-card { grid-column: 1 / -1 !important; }
    .page-projects:not(.page-variant-project-detail) .cards-grid .project-card:first-child:not(:only-child),
    .page-news:not(.page-variant-article-detail) .news-magazine > .news-lead:first-child { grid-column: auto; }
    .page-variant-project-detail .project-story section { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .8rem; }
    .page-variant-article-detail .article-cover, .page-variant-project-detail .project-cover { aspect-ratio: 1.35; }
    .page-contact .contact-grid, .page-quote .quote-layout { gap: 1.2rem; }
    .page-contact .contact-form, .page-quote .quote-form { padding: 1.3rem; }
    .page-quote .quote-steps a { font-size: .64rem; }
    .page-search .search-form > div { display: grid; grid-template-columns: 1fr; }
    .page-search .search-form button { width: 100%; }
}
@media (max-width: 359px) {
    .page-quote .quote-steps { gap: .25rem; }
    .page-quote .quote-steps a { padding-inline: .35rem; font-size: .58rem; }
}