/* Joy Moussa: the site's own styles, loaded after the theme's wp.css.
   Colors: brand gold for titles, a darker gold for small text and buttons
   (readable: 5:1 on white), warm charcoal for the footer. */
:root {
  --jm-gold: #968152;
  --jm-gold-ink: #7d6a42;
  --jm-sand: #d4c492;
  --jm-cream: #f5f1e8;
  --jm-ink: #2b2a28;
  --jm-muted: #6b665c;
  --jm-night: #22201e;
  --jm-night-ink: #ece6da;
  --jm-night-muted: #b9b1a2;
  --jm-radius: 14px;
  --jm-serif: var(--wp--preset--font-family--playfair);
  --jm-sans: var(--wp--preset--font-family--jost);
}

/* ---------- Page changes: a soft cross-fade instead of a white flash ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Skip link (keyboard users) ---------- */
.jm-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--jm-ink); color: #fff; border-radius: 8px; font-family: var(--jm-sans); text-decoration: none; }
.jm-skip:focus { top: 12px; }

/* ---------- Menu: the page you are on ---------- */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.is-section > .wp-block-navigation-item__content {
  color: var(--jm-gold-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* ---------- Readable gold: small text and buttons ---------- */
.wp-block-button__link.wp-element-button:not(.jm-ghost) { background-color: var(--jm-gold-ink); }
h3.nfd-text-md.nfd-text-primary { color: var(--jm-gold-ink); }
.has-primary-background-color { background-color: var(--jm-gold-ink) !important; }

/* ---------- Buttons used by the new sections ---------- */
.jm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border-radius: 999px; font-family: var(--jm-sans); font-weight: 600; font-size: 1rem; letter-spacing: .02em; text-decoration: none; border: 1.5px solid transparent; transition: background-color .15s, color .15s, border-color .15s; cursor: pointer; }
.jm-btn-primary { background: var(--jm-gold-ink); color: #fff; }
.jm-btn-primary:hover { background: #6a5937; color: #fff; }
.jm-btn-light { background: #fff; color: var(--jm-ink); }
.jm-btn-light:hover { background: var(--jm-cream); color: var(--jm-ink); }
.jm-btn-outline-light { border-color: rgba(255,255,255,.8); color: #fff; background: rgba(0,0,0,.12); }
.jm-btn-outline-light:hover { background: rgba(255,255,255,.14); color: #fff; }
.jm-btn-outline { border-color: var(--jm-gold-ink); color: var(--jm-gold-ink); background: transparent; }
.jm-btn-outline:hover { background: var(--jm-gold-ink); color: #fff; }
.jm-btn:focus-visible, .jm-card:focus-visible, .jm-footer a:focus-visible { outline: 2px solid var(--jm-gold-ink); outline-offset: 3px; }
.jm-eyebrow { font-family: var(--jm-sans); font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 10px; }

/* ---------- Homepage first screen: a headline and two clear buttons over the photo ---------- */
.jm-hero-cover { position: relative; }
/* The shading covers the whole text block (eyebrow included) at every photo height. */
.jm-hero-cover .wp-block-cover__background { background: linear-gradient(to top, rgba(20,18,16,.66) 0%, rgba(20,18,16,.5) 32%, rgba(20,18,16,.22) 62%, rgba(20,18,16,0) 85%) !important; opacity: 1 !important; }
.jm-hero .jm-eyebrow { text-shadow: 0 1px 8px rgba(20,18,16,.45); }
.jm-hero { position: relative; z-index: 2; width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px) clamp(28px, 5vw, 64px); color: #fff; }
.jm-hero .jm-eyebrow { color: #f3ead6; }
.jm-hero h1 { font-family: var(--jm-serif); font-weight: 400; font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.12; margin: 0 0 24px; max-width: 18ch; color: #fff; text-wrap: balance; }
.jm-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Larger screens: the photo ends at the bottom of the screen (at most its
   full 772px; 130px = the header and the space under it), so the headline and
   both buttons are visible without scrolling on a 1366x768 or 1280x720 laptop. */
@media (min-width: 782px) {
  .jm-hero-cover { min-height: max(480px, min(772px, calc(100svh - 130px))) !important; }
}
@media (max-width: 781px) {
  .jm-hero-cover { min-height: min(640px, calc(100svh - 110px)) !important; }
  .jm-hero-actions .jm-btn { flex: 1 1 100%; }
}

/* ---------- Homepage short form ---------- */
.jm-quick { background: var(--jm-cream); padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 56px); margin-top: var(--wp--preset--spacing--60); }
.jm-quick-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.jm-quick .jm-eyebrow { color: var(--jm-gold-ink); }
.jm-quick h2 { font-family: var(--jm-serif); font-weight: 400; color: var(--jm-gold); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem); line-height: 1.15; margin: 0 0 16px; }
.jm-quick-intro p { font-family: var(--jm-sans); color: var(--jm-ink); font-size: 1.06rem; line-height: 1.6; margin: 0 0 14px; }
.jm-quick-intro a { color: var(--jm-gold-ink); font-weight: 600; }
.jm-quick-contact { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; font-family: var(--jm-sans); }
.jm-quick-contact a { color: var(--jm-ink); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.2); }
.jm-quick-contact a:hover { border-bottom-color: var(--jm-gold-ink); }
.jm-form-card { background: #fff; border-radius: var(--jm-radius); padding: clamp(22px, 3vw, 36px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(60,48,24,.08); }
.jm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.jm-field { display: grid; gap: 6px; min-width: 0; }
.jm-field.full { grid-column: 1 / -1; }
.jm-field label { font-family: var(--jm-sans); font-size: .95rem; font-weight: 500; color: var(--jm-ink); }
.jm-field label .req { color: var(--jm-gold-ink); }
.jm-field input, .jm-field select, .jm-field textarea { width: 100%; box-sizing: border-box; font-family: var(--jm-sans); font-size: 1rem; color: var(--jm-ink); background: #fff; border: 1px solid #8f877a; border-radius: 10px; padding: 11px 14px; min-height: 48px; transition: border-color .15s, box-shadow .15s; }
.jm-field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.jm-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237d6a42' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.jm-field input:focus, .jm-field select:focus, .jm-field textarea:focus { outline: none; border-color: var(--jm-gold-ink); box-shadow: 0 0 0 3px rgba(125,106,66,.18); }
.jm-field [aria-invalid="true"] { border-color: #a3322a; }
.jm-field-error { min-height: 0; font-family: var(--jm-sans); font-size: .88rem; color: #a3322a; }
.jm-field-error:empty { display: none; }
.jm-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 20px; }
.jm-form-foot small { font-family: var(--jm-sans); color: var(--jm-muted); }
.jm-form-error { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: #fbeceb; color: #a3322a; font-family: var(--jm-sans); font-size: .95rem; }
.jm-form-error:empty { display: none; }
.jm-success { font-family: var(--jm-sans); text-align: left; }
.jm-success h3 { font-family: var(--jm-serif); font-weight: 400; color: var(--jm-gold); font-size: 2rem; margin: 0 0 8px; }
.jm-success p { margin: 0 0 18px; color: var(--jm-ink); font-size: 1.05rem; }
[hidden] { display: none !important; }
@media (max-width: 781px) {
  .jm-quick-inner { grid-template-columns: 1fr; }
  .jm-fields { grid-template-columns: 1fr; }
  .jm-form-foot .jm-btn { flex: 1 1 100%; }
}

/* ---------- Portfolio: a grid of project cards ---------- */
.jm-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.jm-card { display: block; text-decoration: none; color: var(--jm-ink); border-radius: var(--jm-radius); }
.jm-card-img { display: block; overflow: hidden; border-radius: var(--jm-radius); aspect-ratio: 4 / 3; background: #eee; }
.jm-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.jm-card:hover .jm-card-img img { transform: scale(1.04); }
.jm-card-title { display: block; font-family: var(--jm-sans); font-weight: 600; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); margin: 12px 0 2px; }
.jm-card-meta { display: block; font-family: var(--jm-sans); font-size: .9rem; color: var(--jm-muted); }
@media (max-width: 1023px) { .jm-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 781px) {
  .jm-card-title { margin-top: 8px; font-size: .98rem; line-height: 1.3; }
  .jm-card-meta { font-size: .8rem; }
}

/* ---------- Project pages: previous / next ---------- */
.jm-pager { max-width: 1340px; margin: clamp(32px, 5vw, 64px) auto 0; padding: 28px clamp(20px, 4vw, 56px) 0; border-top: 1px solid rgba(0,0,0,.12); display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; font-family: var(--jm-sans); }
.jm-pager a { color: var(--jm-ink); text-decoration: none; display: flex; align-items: center; gap: 14px; min-width: 0; }
.jm-pager .next { justify-content: flex-end; text-align: right; }
.jm-pager img { width: 72px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.jm-pager small { display: block; color: var(--jm-muted); font-size: .85rem; }
.jm-pager strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-pager .all { justify-self: center; }
@media (max-width: 781px) {
  .jm-pager { grid-template-columns: 1fr 1fr; }
  .jm-pager .all { grid-column: 1 / -1; grid-row: 2; }
  .jm-pager img { display: none; }
}

/* ---------- Gallery on phones: two columns, the artist's words first ---------- */
@media (max-width: 781px) {
  .jm-gallery-grid > .wp-block-columns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
  .jm-gallery-grid > .wp-block-columns > .wp-block-column { display: contents; }
  .jm-gallery-grid figure { margin: 0 !important; }
  .jm-gallery-grid figure img { width: 100%; height: auto; border-radius: 6px; }
  .jm-gallery-bio-mobile { display: block !important; }
}
.jm-gallery-bio-mobile { display: none; padding: 0 20px 20px; font-family: var(--jm-sans); color: var(--jm-ink); }
.jm-gallery-bio-mobile p { margin: 0 0 10px; }
.jm-gallery-bio-mobile a { color: var(--jm-gold-ink); font-weight: 600; }

/* ---------- Contact on phones: phone, email and hours first ---------- */
.jm-contact-strip { display: none; }
@media (max-width: 781px) {
  .jm-contact-strip { display: grid; gap: 6px; margin: 0 0 20px; padding: 16px 18px; border-radius: 12px; background: #fff; font-family: var(--jm-sans); }
  .jm-contact-strip a { color: var(--jm-ink); font-weight: 600; text-decoration: none; }
  .jm-contact-strip span { color: var(--jm-muted); font-size: .92rem; }
  #contact > .wp-block-column:first-child { order: 2; }
}
.jm-form-note { font-family: var(--jm-sans); font-size: .9rem; color: var(--jm-muted); margin: 0 0 12px; }

/* ---------- Footer ---------- */
.jm-footer { background: var(--jm-night); color: var(--jm-night-ink); font-family: var(--jm-sans); margin-top: clamp(40px, 6vw, 80px); }
.jm-footer a { color: var(--jm-night-ink); text-decoration: none; }
.jm-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.jm-footer-cta { border-bottom: 1px solid rgba(255,255,255,.12); }
.jm-footer-cta-inner, .jm-footer-main, .jm-footer-bottom { max-width: 1240px; margin: 0 auto; padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); }
.jm-footer-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(36px, 5vw, 56px); }
.jm-footer-cta h2 { font-family: var(--jm-serif); font-weight: 400; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.15; margin: 0 0 6px; color: #fff; }
.jm-footer-cta p { margin: 0; color: var(--jm-night-muted); font-size: 1.05rem; }
.jm-footer-cta .jm-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.jm-footer-cta .jm-btn-primary { background: var(--jm-sand); color: var(--jm-night); }
.jm-footer-cta .jm-btn-primary:hover { background: #e3d6ad; color: var(--jm-night); text-decoration: none; }
.jm-footer-cta .jm-btn-outline-light { background: transparent; }
.jm-footer-cta .jm-btn:hover { text-decoration: none; }
.jm-footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(28px, 4vw, 44px); }
.jm-footer h3 { font-family: var(--jm-sans); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--jm-sand); margin: 0 0 12px; }
.jm-footer p, .jm-footer li { margin: 0; line-height: 1.6; font-size: 1rem; }
.jm-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jm-footer-brand .jm-tagline { font-family: var(--jm-serif); font-size: 1.5rem; line-height: 1.25; color: #fff; margin: 0 0 10px; }
.jm-footer-brand p + p { color: var(--jm-night-muted); }
.jm-social { display: flex !important; gap: 10px !important; margin-top: 14px !important; }
.jm-social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); }
.jm-social a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.jm-social svg { width: 20px; height: 20px; fill: currentColor; }
.jm-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; padding-bottom: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--jm-night-muted); font-size: .9rem; }
@media (max-width: 1023px) { .jm-footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .jm-footer-main { grid-template-columns: 1fr; gap: 26px; }
  .jm-footer-cta .jm-actions, .jm-footer-cta .jm-btn { width: 100%; }
}

/* ---------- Same look, better outline: headings whose level changed ---------- */
/* The band's slogan used to be an h1 and its title an h4 (browser default sizes). */
.jm-as-h1 { font-size: 2em; margin-block: .67em; line-height: inherit; }
h2.jm-as-h4 { font-size: 1em; margin-block: 1.33em; line-height: inherit; font-weight: bold; }

/* ---------- Services: link to a matching project ---------- */
.jm-example { margin: 2px 0 0; font-family: var(--jm-sans); font-size: .92rem; }
.jm-example a { color: var(--jm-gold-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(125,106,66,.35); }
.jm-example a:hover { border-bottom-color: var(--jm-gold-ink); }

/* ---------- Homepage testimonials ---------- */
.jm-quotes { max-width: 1180px; margin: clamp(48px, 7vw, 88px) auto 0; padding: 0 clamp(20px, 4vw, 56px); text-align: center; }
.jm-quotes .jm-eyebrow { color: var(--jm-gold-ink); margin-bottom: 22px; }
.jm-quotes-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); text-align: left; }
.jm-quotes figure { margin: 0; padding: 26px 26px 22px; border-radius: var(--jm-radius); background: #fff; border: 1px solid #e7e1d4; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.jm-quotes blockquote { margin: 0; font-family: var(--jm-serif); font-size: 1.12rem; line-height: 1.5; color: var(--jm-ink); }
.jm-quotes figcaption { font-family: var(--jm-sans); font-size: .92rem; font-weight: 600; color: var(--jm-gold-ink); }
.jm-quotes > p { margin: 20px 0 0; font-family: var(--jm-sans); }
.jm-quotes > p a { color: var(--jm-gold-ink); font-weight: 600; }
@media (max-width: 900px) { .jm-quotes-list { grid-template-columns: 1fr; } }

/* Gallery on phones: the introduction is shown at the top instead (no duplicate). */
@media (max-width: 781px) { .jm-gallery-cover { display: none !important; } }
h1.jm-as-h2 { font-size: 1.5em; margin-block: .83em; }
/* The testimonials title used to be followed by an empty paragraph: same space. */
#testimonials h2.jm-as-h1 { margin-bottom: calc(.67em + var(--wp--style--block-gap, 1.5rem)); }

/* =====================================================================
   Consistency pass (2026-10-20). See docs/brand-guidelines.md.
   ===================================================================== */

/* ---------- One button style: the theme's buttons look like the new ones ---------- */
/* Pill, 48px tall, Jost 600 at 1rem, same padding everywhere. Width classes
   (wp-block-button__width-50 / -100) keep their width. */
.wp-block-button__link.wp-element-button,
.wp-block-jetpack-contact-form .wp-block-button__link.wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 12px 28px !important; border-radius: 999px !important;
  font-family: var(--jm-sans); font-size: 1rem !important; font-weight: 600; line-height: 1.25; letter-spacing: .02em;
  box-sizing: border-box; transition: background-color .15s, color .15s;
}
.wp-block-button__link.wp-element-button strong { font-weight: inherit; }
.wp-block-button__link.wp-element-button:hover { background-color: #6a5937; color: #fff; }
/* The new buttons when they are a <button> (the theme styles every submit button). */
.jm-quick-form button.jm-btn, button.jm-btn { padding: 12px 28px; border-radius: 999px; font-weight: 600; font-size: 1rem; line-height: 1.25; }
.jm-btn { padding-left: 28px; padding-right: 28px; line-height: 1.25; box-sizing: border-box; }
/* Button rows: the theme's flex layout adds a top margin to every child but the
   first, which made the buttons uneven (74px instead of 50px). */
.jm-actions > *, .jm-hero-actions > *, .jm-pager > *, .jm-mobile-cta > * { margin: 0 !important; }
.jm-actions, .jm-hero-actions { align-items: center; }

/* ---------- Form labels: one weight ---------- */
.grunion-field-label, .jm-field label { font-weight: 600 !important; }

/* ---------- Header: side space below 1280px, and the menu never wraps ---------- */
@media (max-width: 1279px) {
  header.nfd-wb-header__header-1 > .wp-block-group { padding-left: clamp(16px, 3vw, 40px) !important; padding-right: clamp(16px, 3vw, 40px) !important; box-sizing: border-box; }
}
header .nfd-gap-2xl { gap: clamp(14px, 2vw, 32px) !important; }
header .wp-block-site-logo img { max-width: min(352px, 52vw); height: auto; }
/* Tablets: the menu button (the full menu does not fit on one line below 960px). */
@media (min-width: 600px) and (max-width: 959px) {
  header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* "Contact" stands out as a button in the full menu. */
@media (min-width: 960px) {
  header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li:last-child > a {
    border: 1.5px solid var(--jm-gold-ink); border-radius: 999px; padding: 6px 18px; color: var(--jm-gold-ink); text-decoration: none;
  }
  header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li:last-child.current-menu-item > a { background: var(--jm-gold-ink); color: #fff; }
}

/* ---------- Language switch (FR / EN), next to the menu ---------- */
.jm-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 36px; padding: 4px 12px; box-sizing: border-box;
  border: 1px solid rgba(43,42,40,.28); border-radius: 999px; font-family: var(--jm-sans); font-size: .82rem; font-weight: 600; letter-spacing: .1em;
  color: var(--jm-ink); text-decoration: none; white-space: nowrap; }
.jm-lang:hover { border-color: var(--jm-gold-ink); color: var(--jm-gold-ink); }
.jm-lang:focus-visible { outline: 2px solid var(--jm-gold-ink); outline-offset: 2px; }
@media (max-width: 959px) { header .jm-lang { order: -1; } }

/* ---------- Portfolio: space under the introduction; the bottom banner ---------- */
.jm-portfolio .jm-projects { margin-top: clamp(28px, 4vw, 48px); }
.jm-cta-cover .wp-block-cover__inner-container { box-sizing: border-box; width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
/* White text over a light photo: a dark veil, stronger on the text side. */
.jm-cta-cover .wp-block-cover__background { background: linear-gradient(90deg, rgba(24,21,18,.68) 0%, rgba(24,21,18,.45) 55%, rgba(24,21,18,.3) 100%) !important; opacity: 1 !important; }
@media (max-width: 781px) {
  .jm-cta-cover .wp-block-cover__background { background: rgba(24,21,18,.55) !important; }
  .jm-cta-cover h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.1rem) !important; }
}

/* ---------- Contact between a phone and a wide screen ---------- */
/* Below 1200px the side-by-side layout is too narrow: the form takes the full
   width, then the drawing and the contact box side by side (one under the
   other on a phone). The overlapping box is only kept on wide screens. */
@media (min-width: 600px) and (max-width: 1199px) {
  #contact { flex-direction: column !important; }
  #contact > .wp-block-column { flex-basis: auto !important; width: 100%; }
  #contact > .wp-block-column:first-child { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
  #contact > .wp-block-column:first-child > * { margin: 0 !important; }
  #contact > .wp-block-column:first-child .has-primary-background-color { padding: clamp(28px, 4vw, 44px) !important; }
  #contact > .wp-block-column:first-child .wp-block-spacer { height: 18px !important; }
  #contact .jm-contact-strip { display: none; }
}
@media (max-width: 1199px) {
  /* The hours fit on one line by shrinking; on narrow boxes they wrap instead. */
  #contact .has-fit-text { font-size: var(--wp--preset--font-size--medium) !important; white-space: normal; }
}
/* The phone number and email never break in the middle of a word. */
#contact .has-primary-background-color a { overflow-wrap: normal; word-break: normal; white-space: nowrap; }
@media (max-width: 1440px) { #contact .has-primary-background-color p { font-size: clamp(1rem, .85rem + .6vw, 1.25rem) !important; } }
/* Wide screens: the drawing and the gold box sit beside the grey box instead of
   overlapping it (the drawing's white background showed over the grey). */
@media (min-width: 1200px) {
  #contact > .negative-right-margin { margin-right: 0 !important; }
  #contact { gap: clamp(32px, 3vw, 56px) !important; }
}
/* The gold box is only as tall as its content (it had about 280px of empty space). */
#contact .has-primary-background-color { padding: clamp(32px, 3vw, 48px) !important; }
#contact .has-primary-background-color > .wp-block-spacer { height: 28px !important; }
#contact .has-primary-background-color .is-vertical > .wp-block-spacer:first-child { display: none; }
/* The form is one column: WordPress's "half width" fields take the full width
   (their labels broke over 2 or 3 lines on a phone). */
.wp-block-jetpack-contact-form .grunion-field-width-50-wrap { flex-basis: 100%; max-width: 100%; width: 100%; }

/* ---------- Contact after sending: no empty white area ---------- */
/* The grey box keeps the height of the column next to it and centres the
   thank-you; "Et maintenant?" follows it. */
@media (min-width: 1200px) {
  #contact[data-sent] > .wp-block-column:last-child { align-self: stretch !important; display: flex; flex-direction: column; justify-content: center; }
}
#contact-form-success { padding: clamp(8px, 2vw, 20px) 0; }
#contact-form-success h4 { font-family: var(--jm-serif); font-weight: 400; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); color: var(--jm-gold); margin: 0 0 10px; }
.jm-next { margin: 28px 0 8px; padding-top: 24px; border-top: 1px solid rgba(43,42,40,.15); font-family: var(--jm-sans); }
.jm-next h5 { font-family: var(--jm-sans); font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--jm-gold-ink); margin: 0 0 10px; }
.jm-next p { margin: 0 0 18px; font-size: 1.05rem; line-height: 1.6; color: var(--jm-ink); }
#contact-form-success .go-back-message { margin-top: 18px; font-family: var(--jm-sans); }
#contact-form-success .go-back-message a { color: var(--jm-gold-ink); font-weight: 600; }

/* ---------- Phones: "Appeler / Nous écrire" always at hand ---------- */
/* Hidden while the footer or a form is on screen (site.js). */
.jm-mobile-cta { display: none; }
@media (max-width: 781px) {
  .jm-mobile-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); box-shadow: 0 -4px 20px rgba(40,32,20,.12);
    transition: transform .25s ease; }
  .jm-mobile-cta .jm-btn { min-height: 46px; padding: 10px 12px; }
  .jm-mobile-cta.is-away { transform: translateY(110%); }
}
@media (prefers-reduced-motion: reduce) { .jm-mobile-cta { transition: none; } }

/* Decorative offsets (the gold block behind the cup photo) never cause a sideways scroll. */
html, body { overflow-x: clip; }

/* Content lines up with the header below 1280px (same side space). */
@media (max-width: 1279px) {
  main > .nfd-container:not(.alignfull) { padding-left: clamp(16px, 3vw, 40px) !important; padding-right: clamp(16px, 3vw, 40px) !important; }
}
#contact[data-sent] > .wp-block-column:last-child > * { width: 100%; }

/* ---------- The open menu (phones and tablets) ---------- */
/* Cream, the serif of the headings, large touch targets, and at the bottom
   the two ways to get in touch and the other language. */
.jm-menu-extra { display: none; }
header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--jm-cream) !important; padding: clamp(20px, 5vw, 40px) !important; }
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: clamp(48px, 10vh, 88px) !important; align-items: flex-start; }
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 6px !important; }
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--jm-serif); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.4rem); line-height: 1.25; padding: 6px 0 !important; color: var(--jm-ink);
}
header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--jm-gold-ink); text-underline-offset: 8px; }
header .wp-block-navigation__responsive-container.is-menu-open .jm-menu-extra { display: grid; gap: 14px; justify-items: start; margin-top: clamp(28px, 6vh, 48px); padding-top: 24px; border-top: 1px solid rgba(43,42,40,.15); width: 100%; font-family: var(--jm-sans); }
.jm-menu-extra .jm-btn { min-width: 220px; }
.jm-menu-phone { font-size: 1.15rem; font-weight: 600; color: var(--jm-ink); text-decoration: none; }
.jm-menu-lang { font-size: .95rem; color: var(--jm-muted); text-decoration: underline; text-underline-offset: 4px; }
/* The theme's "XL" button (Portfolio banner): same size as the others. */
.wp-block-button.nfd-btn-xl .wp-block-button__link.wp-element-button { padding: 12px 28px !important; font-size: 1rem !important; border-width: 0 !important; }
/* The thank-you lines up with the form title (the form plugin indents it). */
#contact-form-success.contact-form-submission { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ---------- Brand decisions of 2026-10-20 ---------- */
/* The title font (Playfair) is always regular: size alone sets the hierarchy.
   The WordPress texts wrapped some titles in bold; that bold is ignored. */
main :is(h1, h2, h3, h4, h5, h6, .jm-as-h1, .jm-as-h2, .jm-as-h4, .nfd-text-huge):not(.jm-eyebrow):not(.jm-next h5) { font-weight: 400 !important; }
main :is(h1, h2, h3, h4, h5, h6, .jm-as-h1, .jm-as-h2, .jm-as-h4, .nfd-text-huge):not(.jm-eyebrow):not(.jm-next h5) :is(strong, b) { font-weight: inherit !important; }
/* Form fields: a thin warm border people can see (3.6:1 on white); the home
   page's short form (.jm-field) uses the same colour. */
#contact-form-form :is(input:not([type=checkbox]):not([type=radio]), textarea, .contact-form__select-wrapper) { border: 1px solid #8f877a; }
#contact-form-form :is(input, textarea, .contact-form__select-wrapper):focus-within { border-color: var(--jm-gold-ink); }
#contact-form-form [aria-invalid="true"]:not(fieldset):not([type=radio]) { border-color: var(--jetpack--contact-form--error-color, #a3322a); }
.wp-block-jetpack-contact-form :is(input[type=checkbox], input[type=radio]) { color: #8f877a; }
/* Small gold text on the grey Contact box: one shade darker so it stays
   readable (4.9:1 instead of 4.3:1). */
.jm-next h5, #contact-form-success .go-back-message a { color: #73613c; }
/* Project pages: photos placed straight on the page, and rows made only of
   photos (Maison Ducats), get the width of the photo column used by the other
   projects (spacer columns on each side), instead of the full screen. */
@media (min-width: 782px) {
  .jm-project main > figure.wp-block-image { max-width: min(calc(81.7% - 58px), 1180px); margin-left: auto !important; margin-right: auto !important; }
  /* Rows of photos only (no spacer column, no text) that follow such photos. */
  .jm-project main > figure.wp-block-image ~ .wp-block-columns:not(:has(> .wp-block-column:empty)):not(:has(h1, h2, h3, h4, p, ul, blockquote)) { max-width: min(calc(81.7% - 58px), 1180px); margin-left: auto !important; margin-right: auto !important; }
}

/* ---------- Contact form: shorter on large screens ---------- */
/* The grey panel had 16% padding on each side (the form was 430 to 500px wide
   on a laptop, 233px on a phone). Smaller padding, content up to 720px wide. */
#contact > .wp-block-column:last-child { padding-left: clamp(20px, 6%, 64px) !important; padding-right: clamp(20px, 6%, 64px) !important; }
#contact > .wp-block-column:last-child > * { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
/* Two columns once the form is at least 560px wide: contact details in pairs,
   project type next to budget, the rooms in three columns, Oui / Non on one line. */
#contact-form { container-type: inline-size; }
@container (min-width: 560px) {
  #contact-form-form .wp-block-jetpack-contact-form { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 20px; align-items: start; }
  #contact-form-form .wp-block-jetpack-contact-form > * { width: auto !important; max-width: none !important; margin: 0 !important; min-width: 0; }
  #contact-form-form :is([data-field="rooms"], [data-field="details"], [data-field="heard_from"], .contact-form__error, .wp-block-button) { grid-column: 1 / -1; }
  #contact-form-form [data-field="heard_from"] .contact-form__select-wrapper { max-width: calc(50% - 12px); }
  #contact-form-form [data-field="name"] { order: 1; }
  #contact-form-form [data-field="phone"] { order: 2; }
  #contact-form-form [data-field="email"] { order: 3; }
  #contact-form-form [data-field="address"] { order: 4; }
  #contact-form-form [data-field="project_type"] { order: 5; }
  #contact-form-form [data-field="budget"] { order: 6; }
  #contact-form-form [data-field="rooms"] { order: 7; }
  #contact-form-form [data-field="start_date"] { order: 8; }
  #contact-form-form [data-field="has_contractor"] { order: 9; }
  #contact-form-form [data-field="details"] { order: 10; }
  #contact-form-form [data-field="heard_from"] { order: 11; }
  #contact-form-form .contact-form__error { order: 12; }
  #contact-form-form .wp-block-button { order: 13; }
  #contact-form-form .grunion-checkbox-multiple-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
  #contact-form-form .grunion-radio-options { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 4px 28px; }
}
/* Narrow forms (phones): Oui / Non on one line, the rooms in two columns. */
@container (max-width: 559px) {
  #contact-form-form .grunion-checkbox-multiple-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  #contact-form-form .grunion-radio-options { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 4px 28px; }
}
/* Nos services, the steps: every box in a row is as tall as the tallest one,
   so the grey / white pattern stays regular (step 06's list made its row taller). */
main .wp-block-column > .nfd-p-card-square { height: 100%; box-sizing: border-box; }

/* ---------- Témoignages page ---------- */
/* Every testimonial as a card. Laptops: the three balanced columns built by
   src/views/testimonials.js. Tablets and phones: the cards flow in two
   columns, then one. The clients' own quotation marks are kept as typed. */
.jm-testimonials { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px) clamp(56px, 8vw, 96px); }
.jm-testimonials-head { max-width: 640px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.jm-testimonials-head .jm-eyebrow { color: var(--jm-gold-ink); margin: 0 0 12px; }
.jm-testimonials-head h1 { font-family: var(--jm-serif); font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: 1.15; color: var(--jm-gold); margin: 0 0 14px; text-wrap: balance; }
.jm-testimonials-head p { font-family: var(--jm-sans); font-size: 1.05rem; line-height: 1.6; color: var(--jm-muted); margin: 0; }
.jm-testimonials-list { columns: 2 300px; column-gap: clamp(18px, 3vw, 32px); }
.jm-testimonials-col { display: contents; }
@media (min-width: 1000px) {
  .jm-testimonials-list { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
  .jm-testimonials-col { display: flex; flex-direction: column; gap: 32px; }
  .jm-testimonials-col figure { margin: 0 !important; }
}
.jm-testimonials-list figure { break-inside: avoid; margin: 0 0 clamp(18px, 3vw, 32px); padding: 26px 28px 24px; border-radius: var(--jm-radius); background: #fff; border: 1px solid #e7e1d4; display: flex; flex-direction: column; gap: 14px; }
.jm-testimonials-list blockquote { margin: 0; font-family: var(--jm-serif); font-size: 1.12rem; line-height: 1.55; color: var(--jm-ink); }
.jm-testimonials-list figcaption { font-family: var(--jm-sans); font-size: .92rem; font-weight: 600; color: var(--jm-gold-ink); }
/* On Contact the row of three sits under the form, with room below. */
#testimonials.jm-quotes { margin-bottom: clamp(48px, 7vw, 88px); }

/* ---------- Site review of 2026-10-20 ---------- */
/* The anti-robot box stays folded until a visitor has to solve a challenge
   (it reserved 72px of empty space above « Envoyer »). public/assets/contact.js
   opens it. */
.cf-turnstile:not(.is-shown) { height: 0; overflow: hidden; }

/* Page introuvable. */
.jm-notfound { max-width: 640px; margin: 0 auto; padding: clamp(56px, 9vw, 120px) clamp(20px, 4vw, 56px); text-align: center; }
.jm-notfound .jm-eyebrow { color: var(--jm-gold-ink); }
.jm-notfound h1 { font-family: var(--jm-serif); font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: 1.15; color: var(--jm-gold); margin: 0 0 12px; }
.jm-notfound > p { font-family: var(--jm-sans); color: var(--jm-muted); font-size: 1.05rem; margin: 0 0 24px; }
.jm-notfound .jm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.jm-notfound .jm-notfound-home { margin: 22px 0 0; }
.jm-notfound-home a { color: var(--jm-gold-ink); font-weight: 600; }

/* The closing invitation in the brand gold, apart from the dark footer. */
.jm-footer-cta { background: var(--jm-gold-ink); border-bottom: 0; }
.jm-footer-cta p { color: var(--jm-cream); }
.jm-footer-cta .jm-btn-primary { background: #fff; color: var(--jm-ink); }
.jm-footer-cta .jm-btn-primary:hover { background: var(--jm-cream); color: var(--jm-ink); }

/* Home: the presentation band touches the photo and the services (no white
   strips), and reads left to right: the tagline, one paragraph, the area. */
#propos { margin-top: 0 !important; margin-bottom: 0 !important; }
.jm-intro { max-width: 560px; }
.jm-intro h2 { font-family: var(--jm-serif); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.2; color: var(--jm-ink); margin: 0 0 16px; }
.jm-intro p { font-family: var(--jm-sans); font-size: 1.05rem; line-height: 1.65; color: var(--jm-ink); margin: 0 0 14px; }
.jm-intro .jm-intro-area { font-size: .95rem; color: #4a453d; margin: 0; }
/* Home: the six services by name, each to its description on Services. */
.jm-service-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(43,42,40,.15); width: 100%; }
.jm-service-links li { border-bottom: 1px solid rgba(43,42,40,.15); margin: 0; }
.jm-service-links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 4px; font-family: var(--jm-serif); font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); line-height: 1.3; color: var(--jm-ink); text-decoration: none; }
.jm-service-links a::after { content: "\2192"; font-family: var(--jm-sans); color: var(--jm-gold-ink); transition: transform .15s; }
.jm-service-links a:hover { color: var(--jm-gold-ink); }
.jm-service-links a:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .jm-service-links a::after { transition: none; } }

/* Services: the six services as cards, then the steps, in the site's column. */
.jm-section-title { box-sizing: border-box; max-width: 1180px; margin: clamp(48px, 7vw, 88px) auto clamp(24px, 4vw, 40px); padding: 0 clamp(20px, 4vw, 56px); font-family: var(--jm-serif); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.2; color: var(--jm-gold); text-align: center; text-wrap: balance; }
.jm-offer { box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.jm-offer-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); }
.jm-offer-card { background: #fff; border: 1px solid #e7e1d4; border-radius: var(--jm-radius); padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 24px; }
.jm-offer-card h3 { font-family: var(--jm-serif); font-size: 1.35rem; line-height: 1.25; color: var(--jm-gold-ink); margin: 0; }
.jm-offer-card p { margin: 0; font-family: var(--jm-sans); font-size: 1rem; line-height: 1.6; color: var(--jm-ink); }
.jm-offer-card .jm-example { margin-top: auto; padding-top: 6px; }
.jm-offer-card:target { border-color: var(--jm-gold-ink); box-shadow: 0 0 0 3px rgba(125,106,66,.18); }
@media (max-width: 1000px) { .jm-offer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .jm-offer-list { grid-template-columns: 1fr; } }
.jm-steps { box-sizing: border-box; width: 100%; max-width: 1180px; margin: 0 auto !important; }
/* One text colour and size in every step (they alternated between two greys, 14px). */
.jm-steps .nfd-p-card-square p.wp-block-paragraph:not(.nfd-text-xl), .jm-steps .nfd-p-card-square li { color: #4a453d !important; font-size: 1rem !important; line-height: 1.6; }

/* Contact: a line under the form title. */
.jm-form-intro { font-family: var(--jm-sans); font-size: 1rem; line-height: 1.6; color: var(--jm-ink); margin: 6px 0 18px; }
/* Phones: the drawing and the gold box repeated the details shown above the
   form and in the footer. */
@media (max-width: 599px) { #contact > .wp-block-column:first-child { display: none !important; } }

/* Project pages: the details on one line (they were a bulleted list). */
.jm-project main h1 ~ ul.wp-block-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font-family: var(--jm-sans); color: var(--jm-muted); }
.jm-project main h1 ~ ul.wp-block-list li { margin: 0; }
.jm-project main h1 ~ ul.wp-block-list li + li::before { content: "\00b7"; margin-right: 10px; }
/* Phones: every project photo uses the full width (the laptop columns left
   them at three different widths). */
@media (max-width: 781px) {
  .jm-project main .wp-block-image, .jm-project main .wp-block-image img { width: 100% !important; max-width: 100% !important; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  .jm-project main > figure.wp-block-image { box-sizing: border-box; padding-left: 16px; padding-right: 16px; }
  /* Some rows use thick white borders as side margins (45px each side). */
  .jm-project main .wp-block-columns.has-border-color { border-left-width: 0 !important; border-right-width: 0 !important; padding-left: 16px !important; padding-right: 16px !important; }
}

/* Galerie: margins on large screens; each artwork opens large. */
@media (min-width: 782px) { .jm-gallery-grid { box-sizing: border-box; max-width: 1400px; margin-left: auto !important; margin-right: auto !important; padding: 0 clamp(16px, 3vw, 40px); } }
.jm-art { all: unset; display: block; width: 100%; cursor: zoom-in; }
.jm-art:focus-visible { outline: 2px solid var(--jm-gold-ink); outline-offset: 3px; }
.jm-viewer { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; background: rgba(20,18,16,.92); }
.jm-viewer[open] { display: flex; align-items: center; justify-content: center; }
.jm-viewer::backdrop { background: rgba(20,18,16,.9); }
.jm-viewer-art { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.jm-viewer img { max-width: min(90vw, 1400px); max-height: calc(86vh - 64px); width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.jm-viewer button { position: fixed; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font: 400 30px/48px var(--jm-sans); text-align: center; cursor: pointer; padding: 0; }
.jm-viewer button:hover { background: rgba(255,255,255,.26); }
.jm-viewer button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jm-viewer-close { top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.jm-viewer-prev { left: max(12px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.jm-viewer-next { right: max(12px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }

/* No white strip between a coloured last section (the home form, the
   portfolio grid, the gallery photo) and the footer. */
body:has(main > :is(.jm-quick, .nfd-container, .jm-gallery-cover):last-child) .jm-footer { margin-top: 0; }

/* Laptops: a lower header (145px to about 110px), the logo slightly smaller. */
@media (min-width: 782px) {
  header .wp-block-site-logo img { max-width: min(250px, 52vw); }
  header.nfd-wb-header__header-1 > .wp-block-group.nfd-py-sm { padding-top: 20px !important; padding-bottom: 20px !important; }
}

/* ---------- New pages (À propos, Tarifs, FAQ, service pages) ---------- */
.jm-xpage { box-sizing: border-box; max-width: 820px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px) clamp(48px, 7vw, 88px); font-family: var(--jm-sans); color: var(--jm-ink); }
.jm-xpage-head { margin-bottom: clamp(24px, 4vw, 40px); }
.jm-xpage-head .jm-eyebrow { color: var(--jm-gold-ink); }
.jm-xpage-head h1 { font-family: var(--jm-serif); font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: 1.15; color: var(--jm-gold); margin: 0 0 14px; text-wrap: balance; }
.jm-xpage-intro { font-size: 1.15rem; line-height: 1.6; color: var(--jm-muted); margin: 0; max-width: 62ch; }
.jm-xpage-photo { margin: 0 0 clamp(24px, 4vw, 40px); }
.jm-xpage-photo img { width: 100%; height: auto; border-radius: var(--jm-radius); display: block; }
.jm-xpage-photo-todo { margin: 0 0 32px; padding: 48px 16px; border: 2px dashed #e0b800; border-radius: var(--jm-radius); text-align: center; }
.jm-prose { font-size: 1.05rem; line-height: 1.7; max-width: 68ch; }
.jm-prose > * { margin: 0 0 1em; }
.jm-prose h2 { font-family: var(--jm-serif); font-size: clamp(1.45rem, 1.2rem + .9vw, 1.9rem); line-height: 1.25; color: var(--jm-ink); margin: 1.8em 0 .5em; }
.jm-prose h3 { font-family: var(--jm-serif); font-size: 1.25rem; line-height: 1.35; color: var(--jm-gold-ink); margin: 1.6em 0 .4em; }
.jm-prose ul { padding-left: 1.2em; }
.jm-prose li { margin: 0 0 .35em; }
.jm-prose a { color: var(--jm-gold-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.jm-xpage-related { margin-top: clamp(40px, 6vw, 64px); }
.jm-xpage-related h2 { font-family: var(--jm-serif); font-size: clamp(1.45rem, 1.2rem + .9vw, 1.9rem); color: var(--jm-gold); margin: 0 0 20px; }
@media (max-width: 781px) { .jm-xpage-related .jm-projects { grid-template-columns: 1fr 1fr; } }
/* [À COMPLÉTER: ...]: impossible to miss (they block publishing). */
.jm-todo { background: #ffe14d; color: #2b2a28; padding: 1px 4px; border-radius: 3px; box-shadow: 0 0 0 1px #e0b800; font-weight: 600; }
/* Draft notice at the top (signed-in admin only). */
.jm-draft-banner { position: sticky; top: 0; z-index: 100000; background: #ffe14d; color: #2b2a28; font: 400 15px/1.4 system-ui, sans-serif; padding: 10px 16px; text-align: center; border-bottom: 1px solid #e0b800; }
.jm-draft-banner a { color: #2b2a28; font-weight: 700; margin-left: 8px; }
/* Footer: À propos, Tarifs, FAQ once published. */
.jm-footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.jm-footer-links a { color: var(--jm-night-ink); text-decoration: none; }
.jm-footer-links a:hover { text-decoration: underline; }

/* ---------- Services menu (once service pages are published) ---------- */
.jm-has-sub { position: relative; display: flex !important; align-items: center; gap: 2px; }
.jm-sub-toggle { all: unset; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: inherit; }
.jm-sub-toggle:focus-visible { outline: 2px solid var(--jm-gold-ink); outline-offset: 2px; }
.jm-sub-toggle svg { transition: transform .15s; }
.jm-has-sub.is-open .jm-sub-toggle svg { transform: rotate(180deg); }
.jm-sub { display: none; position: absolute; top: 100%; left: -14px; z-index: 60; min-width: 250px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid #e7e1d4; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.08); }
.jm-sub li { margin: 0; }
.jm-sub a { display: block; padding: 9px 12px; border-radius: 8px; font-family: var(--jm-sans); font-size: .98rem; color: var(--jm-ink); text-decoration: none; white-space: nowrap; }
.jm-sub a:hover, .jm-sub a[aria-current="page"] { background: var(--jm-cream); color: var(--jm-gold-ink); }
.jm-has-sub:hover > .jm-sub, .jm-has-sub.is-open > .jm-sub { display: block; }
/* In the open menu (phones, tablets): the services listed under « Services ». */
header .is-menu-open .jm-has-sub { flex-wrap: wrap; }
header .is-menu-open .jm-sub-toggle { display: none; }
header .is-menu-open .jm-sub { display: block; position: static; min-width: 0; width: 100%; padding: 4px 0 4px 14px; border: 0; box-shadow: none; background: transparent; }
header .is-menu-open .jm-sub a { font-size: 1.05rem; padding: 6px 0; }
/* With Tarifs and À propos in the menu it no longer fits on one line below
   1200px: the menu button until then (as below 960px with the short menu). */
@media (min-width: 600px) and (max-width: 1199px) {
  header.jm-nav-long .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  header.jm-nav-long .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}