/* ============================================================
   AGENCE AUGUSTIN — Exact React parity corrections
   Source of truth: client/src/pages/Home.tsx + Header.tsx
   Loaded last to neutralise older generic layout rules.
   ============================================================ */

/* ---------- Header: transparent only at the top ---------- */
.site-header--transparent.site-header--scrolled,
.site-header--transparent.is-scrolled,
.site-header--transparent.site-header--menu-open {
  background: var(--aa-lin) !important;
  color: var(--aa-brun) !important;
  box-shadow: 0 1px 0 oklch(0.265 0.040 50 / 10%) !important;
}

.site-header--transparent.site-header--scrolled .site-header__logo-image--dark,
.site-header--transparent.is-scrolled .site-header__logo-image--dark,
.site-header--transparent.site-header--menu-open .site-header__logo-image--dark {
  opacity: 1 !important;
}

.site-header--transparent.site-header--scrolled .site-header__logo-image--light,
.site-header--transparent.is-scrolled .site-header__logo-image--light,
.site-header--transparent.site-header--menu-open .site-header__logo-image--light {
  opacity: 0 !important;
}

.site-header--transparent:not(.site-header--scrolled):not(.is-scrolled):not(.site-header--menu-open) {
  background: transparent !important;
  color: var(--aa-lin) !important;
  box-shadow: none !important;
}

/* ---------- Home Process: exact Home.tsx measurements ---------- */
.process-home.section {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.process-home > .container {
  width: 100%;
  max-width: 1440px !important;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem) !important;
}

.process-home .section-heading {
  width: 100%;
  max-width: 780px !important;
  margin: 0 auto 2.25rem !important;
  text-align: center;
}

.process-home .section-heading h2 {
  margin: 0 !important;
  font-size: clamp(2.35rem, 4.6vw, 4.45rem) !important;
  line-height: .98 !important;
  letter-spacing: .03em !important;
}

.process-home .section-heading > p:not(.eyebrow) {
  max-width: 56ch !important;
  margin: 1.25rem auto 0 !important;
  font-size: clamp(.98rem, 1.1vw, 1.08rem) !important;
  line-height: 1.85 !important;
  opacity: .82;
}

.process-home__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 2rem !important;
  row-gap: 2.25rem !important;
}

.process-home .process-card {
  min-width: 0;
  padding-top: 1.15rem !important;
  border-top: 1px solid oklch(0.920 0.025 72 / 38%) !important;
}

.process-home .process-card__image {
  display: block !important;
  width: 100% !important;
  height: clamp(138px, 15vw, 190px) !important;
  min-height: 0 !important;
  max-height: 190px !important;
  margin: 0 0 1.25rem !important;
  object-fit: cover !important;
}

.process-home .process-card h3 {
  margin: 0 0 .75rem !important;
  font-size: clamp(1.45rem, 2vw, 1.95rem) !important;
  line-height: 1.05 !important;
  letter-spacing: .045em !important;
}

.process-home .process-card .aa-rich-text,
.process-home .process-card .aa-rich-text p,
.process-home .process-card > p {
  max-width: 32ch !important;
  margin: 0 !important;
  font-size: .95rem !important;
  line-height: 1.75 !important;
}

/* ---------- Home spaced triptych: exact 4/5 React cards ---------- */
.triptych--spaced.section {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.triptych--spaced > .container {
  width: 100%;
  max-width: 1440px !important;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem) !important;
}

.triptych--spaced .triptych__head {
  width: 100%;
  margin-inline: auto !important;
  margin-top: 0 !important;
  text-align: center !important;
}

.triptych--spaced.theme-brun .triptych__head,
.triptych--spaced.theme-ardoise .triptych__head,
.triptych--spaced.theme-nuit .triptych__head {
  max-width: 820px !important;
  margin-bottom: 2rem !important;
}

.triptych--spaced.theme-lin .triptych__head,
.triptych--spaced.theme-white .triptych__head {
  max-width: 760px !important;
  margin-bottom: 2rem !important;
}

.triptych--spaced .triptych__head h2 {
  margin: 0 !important;
  font-size: clamp(2.35rem, 4.6vw, 4.45rem) !important;
  line-height: .98 !important;
  letter-spacing: .03em !important;
  text-align: center !important;
}

.triptych--spaced .triptych__intro,
.triptych--spaced .triptych__intro p {
  margin: 1.25rem auto 0 !important;
  text-align: center !important;
  font-size: clamp(.98rem, 1.1vw, 1.08rem) !important;
  line-height: 1.85 !important;
}

/* Home React: the section subtitle is slate on light backgrounds.
   Target the actual .triptych__intro paragraph as well as any nested paragraph. */
.triptych--spaced:is(.theme-lin, .theme-white) .triptych__intro,
.triptych--spaced:is(.theme-lin, .theme-white) .triptych__intro p {
  color: var(--aa-ardoise) !important;
  opacity: 1 !important;
}

.triptych--spaced:is(.theme-brun, .theme-ardoise, .theme-nuit) .triptych__intro,
.triptych--spaced:is(.theme-brun, .theme-ardoise, .theme-nuit) .triptych__intro p {
  color: var(--aa-lin) !important;
  opacity: .78 !important;
}

.triptych--spaced.theme-brun .triptych__intro,
.triptych--spaced.theme-brun .triptych__intro p,
.triptych--spaced.theme-ardoise .triptych__intro,
.triptych--spaced.theme-ardoise .triptych__intro p,
.triptych--spaced.theme-nuit .triptych__intro,
.triptych--spaced.theme-nuit .triptych__intro p {
  max-width: 56ch !important;
}

.triptych--spaced.theme-lin .triptych__intro,
.triptych--spaced.theme-lin .triptych__intro p,
.triptych--spaced.theme-white .triptych__intro,
.triptych--spaced.theme-white .triptych__intro p {
  max-width: 54ch !important;
}

.triptych--spaced .triptych__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.triptych--spaced.theme-brun .triptych__grid,
.triptych--spaced.theme-ardoise .triptych__grid,
.triptych--spaced.theme-nuit .triptych__grid {
  gap: 1.25rem !important;
}

.triptych--spaced.theme-lin .triptych__grid,
.triptych--spaced.theme-white .triptych__grid {
  gap: 1.5rem !important;
}

.triptych--spaced .triptych-card,
.triptych--spaced .triptych-card__media,
.triptych--spaced .triptych__grid figure,
.triptych--spaced .triptych__grid figure:nth-child(2) {
  min-width: 0;
  width: 100% !important;
}

.triptych--spaced .triptych-card__media,
.triptych--spaced .triptych__grid figure,
.triptych--spaced .triptych__grid figure:nth-child(2) {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

.triptych--spaced .triptych__image,
.triptych--spaced .triptych__grid figure:nth-child(2) .triptych__image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
}

.triptych--spaced .triptych-card__content {
  padding-top: 1.25rem !important;
}

.triptych--spaced .triptych-card__content h3 {
  margin: 0 0 .75rem !important;
  font-size: clamp(1.45rem, 2vw, 1.95rem) !important;
  line-height: 1.05 !important;
  letter-spacing: .045em !important;
}

.triptych--spaced .triptych-card__content p {
  max-width: 32ch !important;
  margin: 0 !important;
  font-size: .95rem !important;
  line-height: 1.75 !important;
  color: var(--aa-section-muted) !important;
}

.triptych--spaced .triptych__cta {
  display: flex !important;
  justify-content: center !important;
  margin-top: 2.25rem !important;
  text-align: center !important;
}

/* ---------- Home CTA banner: exact 12-column React composition ---------- */
.cta-banner--default.section {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.cta-banner--default > .container,
.cta-banner--default .cta-banner__inner {
  width: 100%;
  max-width: 1440px !important;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem) !important;
}

.cta-banner--default .cta-banner__inner {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 2rem !important;
  align-items: center !important;
  text-align: left !important;
}

.cta-banner--default .cta-banner__heading {
  grid-column: 1 / span 6 !important;
  min-width: 0;
}

.cta-banner--default .cta-banner__content {
  grid-column: 8 / span 5 !important;
  min-width: 0;
}

.cta-banner--default .cta-banner__kicker {
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 0 1rem !important;
  font-family: var(--aa-font-body) !important;
  font-size: .78rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  opacity: .62 !important;
}

.cta-banner--default .cta-banner__heading h2 {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(2.35rem, 4.6vw, 4.45rem) !important;
  line-height: .98 !important;
  letter-spacing: .03em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.cta-banner--default .cta-banner__content .aa-rich-text,
.cta-banner--default .cta-banner__content .aa-rich-text p {
  width: 100%;
  max-width: 40ch !important;
  margin: 0 !important;
  font-size: clamp(.98rem, 1.1vw, 1.08rem) !important;
  line-height: 1.85 !important;
}

.cta-banner--default .cta-banner__content .cta-link {
  margin-top: 2rem !important;
}

/* ---------- Desktop values from Tailwind md breakpoint ---------- */
@media (min-width: 768px) {
  .process-home.section,
  .triptych--spaced.section,
  .cta-banner--default.section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .process-home .section-heading {
    margin-bottom: 2.75rem !important;
  }

  .triptych--spaced.theme-brun .triptych__head,
  .triptych--spaced.theme-ardoise .triptych__head,
  .triptych--spaced.theme-nuit .triptych__head,
  .triptych--spaced.theme-lin .triptych__head,
  .triptych--spaced.theme-white .triptych__head {
    margin-bottom: 2.5rem !important;
  }

  .triptych--spaced.theme-brun .triptych__grid,
  .triptych--spaced.theme-ardoise .triptych__grid,
  .triptych--spaced.theme-nuit .triptych__grid {
    gap: 1.5rem !important;
  }

  .triptych--spaced.theme-lin .triptych__grid,
  .triptych--spaced.theme-white .triptych__grid {
    gap: 1.75rem !important;
  }

  .triptych--spaced.theme-brun .triptych__cta,
  .triptych--spaced.theme-ardoise .triptych__cta,
  .triptych--spaced.theme-nuit .triptych__cta {
    margin-top: 2.75rem !important;
  }

  .triptych--spaced.theme-lin .triptych__cta,
  .triptych--spaced.theme-white .triptych__cta {
    margin-top: 2.5rem !important;
  }
}

/* ---------- Responsive stacking exactly at React md breakpoint ---------- */
@media (max-width: 767px) {
  .process-home__grid,
  .triptych--spaced .triptych__grid,
  .cta-banner--default .cta-banner__inner {
    grid-template-columns: 1fr !important;
  }

  .cta-banner--default .cta-banner__heading,
  .cta-banner--default .cta-banner__content {
    grid-column: 1 !important;
  }

  .cta-banner--default .cta-banner__kicker {
    white-space: normal !important;
  }
}

/* Exact React colour output and readable secondary text on every theme. */
.theme-brun,
.aa-bg-brun { background-color: var(--aa-brun) !important; }

.theme-lin :is(.triptych__intro p,.triptych-card__content p,.process-card p,.cta-banner__content p),
.theme-white :is(.triptych__intro p,.triptych-card__content p,.process-card p,.cta-banner__content p) {
  color: var(--aa-ardoise) !important;
}

.theme-brun :is(.triptych__intro p,.triptych-card__content p,.process-card p,.cta-banner__content p),
.theme-ardoise :is(.triptych__intro p,.triptych-card__content p,.process-card p,.cta-banner__content p),
.theme-nuit :is(.triptych__intro p,.triptych-card__content p,.process-card p,.cta-banner__content p) {
  color: var(--aa-lin) !important;
  opacity: .78;
}

/* ============================================================
   V9 — Effective React container widths + Home section rhythm
   The compiled Tailwind stylesheet overrides the 1440px design token
   with breakpoint-based .container widths. WordPress must reproduce
   the compiled result, not only the source token.
   ============================================================ */

/* Effective Tailwind v4 container generated in the React build. */
.container,
.aa-container {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

@media (min-width: 40rem) {
  .container,
  .aa-container { max-width: 40rem; }
}

@media (min-width: 48rem) {
  .container,
  .aa-container { max-width: 48rem; }
}

@media (min-width: 64rem) {
  .container,
  .aa-container { max-width: 64rem; }
}

@media (min-width: 80rem) {
  .container,
  .aa-container { max-width: 80rem; }
}

@media (min-width: 96rem) {
  .container,
  .aa-container { max-width: 96rem; }
}

/* The earlier exact rules used the design token (1440px). The React build
   actually resolves to Tailwind's responsive container at runtime. */
.process-home > .container,
.triptych--spaced > .container,
.cta-banner--default > .container {
  max-width: 100% !important;
}

@media (min-width: 40rem) {
  .process-home > .container,
  .triptych--spaced > .container,
  .cta-banner--default > .container { max-width: 40rem !important; }
}

@media (min-width: 48rem) {
  .process-home > .container,
  .triptych--spaced > .container,
  .cta-banner--default > .container { max-width: 48rem !important; }
}

@media (min-width: 64rem) {
  .process-home > .container,
  .triptych--spaced > .container,
  .cta-banner--default > .container { max-width: 64rem !important; }
}

@media (min-width: 80rem) {
  .process-home > .container,
  .triptych--spaced > .container,
  .cta-banner--default > .container { max-width: 80rem !important; }
}

@media (min-width: 96rem) {
  .process-home > .container,
  .triptych--spaced > .container,
  .cta-banner--default > .container { max-width: 96rem !important; }
}

/* Home section rhythm from Home.tsx:
   - standard standalone sections: py-10 / md:py-14;
   - only the editorial rows immediately following Texte centré belong to the
     shared introduction section and remain flush;
   - a later editorial use (for example “Deux sœurs, deux expertises”) is a
     standalone React section and recovers its own top and bottom padding. */
main > .text-centered,
main > .process-home,
main > .triptych--spaced,
main > .founder,
main > .cta-banner--default {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

main > .text-centered {
  padding-bottom: 2rem !important;
}

@media (min-width: 48rem) {
  main > .text-centered,
  main > .process-home,
  main > .triptych--spaced,
  main > .founder,
  main > .cta-banner--default {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  main > .text-centered {
    padding-bottom: 2.5rem !important;
  }

}

/* ============================================================
   V12 — CMS-controlled title line breaks
   ============================================================ */

/* Hero and CTA titles now respect only the line breaks authored in ACF.
   Without a manual return, text wraps naturally inside the component grid. */
.hero__title,
.cta-banner__title {
  white-space: pre-line !important;
}

/* Remove the content-specific max-content lock previously used to force the
   original Home sentence onto three lines. The design measure remains fixed. */
.aa-page--home .hero--home .hero__title {
  width: auto !important;
  max-width: 8.4ch !important;
}

/* CTA wrapping is controlled by the textarea content, not by word-specific
   spans or string matching in PHP. */
.cta-banner--default .cta-banner__heading .cta-banner__title {
  width: auto !important;
  max-width: none !important;
  text-wrap: balance;
}

/* ============================================================
   V13 — exact editor-authored title lines
   ============================================================ */

/* New lines stored by ACF are rendered as real <br> elements. Titles without
   a manual return continue to wrap naturally. */
.hero__title,
.cta-banner__title {
  white-space: normal !important;
}

/* When the editor has deliberately composed several lines, size the title
   from its longest authored line instead of the old character-width measure.
   This prevents an authored line such as “AU CŒUR” from being split again. */
.hero__title--manual-lines,
.cta-banner__title--manual-lines {
  width: max-content !important;
  max-width: 100% !important;
}

.aa-page--home .hero--home .hero__title--manual-lines,
.cta-banner--default .cta-banner__title--manual-lines {
  width: max-content !important;
  max-width: 100% !important;
  text-wrap: initial !important;
}

/* ============================================================
   V15 — unrestricted CMS text measures
   ============================================================ */

/* Text entered through ACF may use the full width offered by its component.
   Character-based measures remain disabled: editors control deliberate line
   breaks in the textarea, while the viewport/container is the only remaining
   physical wrapping boundary. */
.aa-page main :where(h1, h2, h3, h4, h5, h6, p, blockquote),
.aa-page main :where(
  .hero__title,
  .hero__subtitle,
  .hero__intro,
  .eyebrow,
  .aa-kicker,
  .aa-rich-text,
  .text-centered__inner,
  .text-centered__content,
  .editorial__text,
  .cta-banner__title,
  .cta-banner__content,
  .image-banner__content,
  .triptych__head,
  .triptych__intro,
  .section-heading,
  .process-card,
  .project-showcase__content,
  .quote-section blockquote,
  .founder__content,
  .contact-minimal__content,
  .entry-content
),
.site-footer :where(h1, h2, h3, h4, h5, h6, p, blockquote),
.site-footer :where(.site-footer__description) {
  max-width: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-wrap: wrap !important;
}

/* Remove legacy character-width locks from editable titles. */
.aa-page main :where(
  .hero__title:not(.hero__title--manual-lines),
  .cta-banner__title:not(.cta-banner__title--manual-lines),
  .text-centered h2,
  .section-heading h2,
  .triptych__head h2,
  .project-showcase__content h2,
  .image-banner__content h2,
  .contact-minimal h2
) {
  width: auto !important;
  max-width: none !important;
}

/* The CTA body now uses the entire text column instead of the former 40ch
   reading measure. Manual returns stored by ACF remain authoritative. */
.cta-banner__content,
.cta-banner__content .aa-rich-text,
.cta-banner__content .aa-rich-text > *,
.cta-banner__content p {
  width: 100% !important;
  max-width: none !important;
}

/* Authored title lines keep their exact composition whenever they fit. On a
   smaller viewport, max-width:100% still prevents horizontal overflow. */
.hero__title--manual-lines,
.cta-banner__title--manual-lines {
  width: max-content !important;
  max-width: 100% !important;
  text-wrap: initial !important;
}

/* ============================================================
   V17 — authoritative manual line breaks on every visible text
   ============================================================ */

/*
 * Page context is stored on <body> as `.aa-page--home`,
 * `.aa-page--about`, etc. The previous `.aa-page main` selector therefore
 * matched no page content. This version targets the real document structure.
 *
 * ACF textarea returns are converted to explicit <br> elements by the PHP
 * helpers. `white-space: nowrap` prevents browser-created wrapping while
 * still honoring those explicit <br> elements and avoids rendering template
 * indentation as visible whitespace.
 */
body main :where(
  h1, h2, h3, h4, h5, h6,
  p, blockquote, figcaption,
  a, span,
  .hero__intro,
  .hero__subtitle,
  .eyebrow,
  .aa-kicker,
  .aa-rich-text,
  .aa-rich-text > *,
  .quote-section footer,
  .quote-section footer span,
  .contact-minimal__email
),
.site-header :where(a, span),
.site-footer :where(
  h1, h2, h3, h4, h5, h6,
  p, blockquote, figcaption,
  a, span
) {
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  max-width: none !important;
}

/* Keep explicit line breaks, but remove all legacy reading measures and
   clipping from editable text containers. The grid itself is unchanged. */
body main :where(
  .hero__content,
  .hero__content-inner,
  .hero__subtitle,
  .editorial__content,
  .editorial__text,
  .text-centered__inner,
  .text-centered__content,
  .section-heading,
  .process-card,
  .triptych__head,
  .triptych__intro,
  .triptych-card__content,
  .cta-banner__heading,
  .cta-banner__content,
  .cta-banner__content .aa-rich-text,
  .image-banner__content,
  .project-showcase__content,
  .founder__content,
  .quote-section blockquote,
  .contact-minimal__content,
  .entry-content,
  .aa-rich-text
) {
  max-width: none !important;
  overflow: visible !important;
}

/* Titles use the width of their longest editor-authored line. No `ch`, rem or
   viewport cap is allowed to add another line break. */
body main .hero__title,
body main .cta-banner__title,
body main .text-centered h2,
body main .section-heading h2,
body main .triptych__head h2,
body main .triptych-card h3,
body main .project-showcase__content h2,
body main .image-banner__content h2,
body main .process-card h3,
body main .timeline-step h3,
body main .founder__name,
body main .contact-minimal h2 {
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Content fields rendered through wpautop() become paragraphs. This direct
   rule is intentionally specific so older `.cta-banner p { max-width:... }`
   and similar component rules cannot take precedence. */
body main .aa-rich-text > p,
body main .hero__subtitle > p,
body main .cta-banner__content p,
body main .editorial__text p,
body main .text-centered__content p,
body main .process-card p,
body main .triptych__intro p,
body main .triptych-card__content p,
body main .image-banner__content p,
body main .project-showcase__content p,
body main .founder__content p,
body main .contact-minimal__content p {
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* ============================================================
   V18 — centered Process heading and legacy textarea breaks
   ============================================================ */

/* V17 gives editable text a max-content width so only manual returns create
   lines. The Process heading must therefore be explicitly centered inside its
   centered heading container. Card titles remain left-aligned, as in React. */
body main .process-home .section-heading {
  text-align: center !important;
}

body main .process-home .section-heading > :where(.eyebrow, h2, p, .aa-rich-text),
body main .process-home .section-heading > .aa-rich-text > p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* ============================================================
   V21 — Process heading alignment and compact triptych subtitles
   Scope intentionally limited to Process Home and triptych heads.
   ============================================================ */

/* The global manual-line-break rules give headings a max-content width.
   Flex centering is used here so the kicker, title and subtitle remain
   precisely centered regardless of their editor-authored line lengths. */
.process-home .process-home__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 780px !important;
  margin: 0 auto 2.25rem !important;
  text-align: center !important;
}

.process-home .process-home__head > .eyebrow,
.process-home .process-home__head > h2,
.process-home .process-home__head > .process-home__subtitle {
  align-self: center !important;
  width: max-content !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.process-home .process-home__head > .eyebrow {
  margin-top: 0 !important;
}

.process-home .process-home__head > h2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.process-home .process-home__head > .process-home__subtitle {
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;
  font-size: clamp(.98rem, 1.1vw, 1.08rem) !important;
  line-height: 1.85 !important;
  opacity: .82;
}

/* Triptych and Process subtitles are now a single paragraph containing
   explicit <br> elements. This prevents duplicate legacy breaks from becoming
   separate paragraphs with an artificial vertical offset. */
.triptych .triptych__head > .triptych__intro {
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  margin: 1.25rem auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: clamp(.98rem, 1.1vw, 1.08rem) !important;
  line-height: 1.85 !important;
}

/* ============================================================
   V22 — centered spaced-triptych heading stack
   ============================================================ */

/* The title had a max-content width but no automatic inline margins, so its
   box remained offset to the left while the subtitle was centered. Center the
   complete heading stack as one column without changing authored line breaks. */
body main .triptych--spaced .triptych__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body main .triptych--spaced .triptych__head > .eyebrow,
body main .triptych--spaced .triptych__head > h2,
body main .triptych--spaced .triptych__head > .triptych__intro {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body main .triptych--spaced .triptych__head > h2 {
  width: max-content !important;
  max-width: 100% !important;
}

/* ============================================================
   ABOUT — exact React compositions, scoped to the About page only
   ============================================================ */

/* Hero: React min-h-[92vh], full-cover image, lower-left content. */
.aa-page--about .hero--image {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  width: 100% !important;
  height: auto !important;
  min-height: 92svh !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: var(--aa-brun) !important;
}

.aa-page--about .hero--image .hero__media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.aa-page--about .hero--image .hero__image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.aa-page--about .hero--image .hero__overlay {
  background: linear-gradient(
    90deg,
    rgba(60, 42, 30, .78) 0%,
    rgba(60, 42, 30, .42) 46%,
    rgba(60, 42, 30, .12) 100%
  ) !important;
}

.aa-page--about .hero--image .hero__content {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: var(--aa-container-max) !important;
  height: auto !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding: 0 var(--aa-container-x) 5rem !important;
}

.aa-page--about .hero--image .hero__content-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: clamp(1rem, 2.25vw, 2.5rem) !important;
  overflow: visible !important;
  text-align: left !important;
}

.aa-page--about .hero--image .hero__title {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  color: var(--aa-lin) !important;
  font-size: clamp(3.5rem, 8vw, 7rem) !important;
  line-height: .92 !important;
  letter-spacing: .02em !important;
  text-align: left !important;
}

.aa-page--about .hero--image .hero__subtitle,
.aa-page--about .hero--image .hero__subtitle > p {
  width: max-content !important;
  max-width: none !important;
  margin: 1.75rem 0 0 !important;
  color: var(--aa-lin) !important;
  font-size: clamp(1.08rem, 1.75vw, 1.35rem) !important;
  line-height: 1.7 !important;
  opacity: .84 !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Intro: React py-14/md:py-20 and a genuinely centered subtitle. */
.text-centered {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}

.text-centered__inner {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  overflow: visible !important;
  text-align: center !important;
}

.text-centered h2 {
  margin-inline: auto !important;
  line-height: 1.08 !important;
  text-align: center !important;
}

.text-centered__content,
.text-centered__content > p {
  width: max-content !important;
  max-width: none !important;
  margin: 2rem auto 0 !important;
  color: var(--aa-ardoise) !important;
  font-size: 1rem !important;
  line-height: 1.9 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Founder portraits: full-bleed half-page image and centered page overlay. */
.founder {
  position: relative !important;
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
  overflow: hidden !important;
}

.founder__grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: clamp(3rem, 5vw, 5rem) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.founder__portrait {
  position: relative !important;
  grid-column: span 6 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.founder__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

.founder--left .founder__image {
  object-position: 35% 22% !important;
}

.founder--right .founder__image {
  object-position: 68% 22% !important;
}

.founder__content {
  grid-column: 8 / span 5 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  color: var(--aa-ardoise) !important;
}

.founder--right .founder__portrait {
  grid-column: 7 / span 6 !important;
  order: 2 !important;
}

.founder--right .founder__content {
  grid-column: 2 / span 5 !important;
  order: 1 !important;
}

.founder__name {
  position: absolute !important;
  z-index: 3 !important;
  top: clamp(5.1rem, 8vw, 6.9rem) !important;
  left: 50% !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  color: var(--aa-or) !important;
  font-family: var(--aa-font-body) !important;
  font-size: clamp(.92rem, 1.35vw, 1.14rem) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .24em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.founder__text,
.founder__text > p {
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  color: var(--aa-ardoise) !important;
  font-size: .98rem !important;
  line-height: 1.9 !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.founder blockquote {
  width: max-content !important;
  max-width: none !important;
  margin: 2rem 0 0 !important;
  padding-left: 1.25rem !important;
  border-left: 1px solid var(--aa-or) !important;
  color: var(--aa-or) !important;
  font-family: var(--aa-font-display) !important;
  font-size: 1.34rem !important;
  font-style: italic !important;
  font-weight: 300 !important;
  line-height: 1.45 !important;
  letter-spacing: .035em !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Attached triptych: shared React Vision component. */
.triptych--attached {
  --triptych-attached-title: var(--aa-brun);
  --triptych-attached-copy: var(--aa-ardoise);
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
  overflow: visible !important;
}

.triptych--attached:is(.theme-brun, .theme-ardoise, .theme-nuit) {
  --triptych-attached-title: var(--aa-lin);
  --triptych-attached-copy: var(--aa-lin);
}

.triptych--attached > .container {
  overflow: visible !important;
}

.triptych--attached .triptych__head {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto 3rem !important;
  overflow: visible !important;
  text-align: center !important;
}

.triptych--attached .triptych__head > .eyebrow,
.triptych--attached .triptych__head > h2,
.triptych--attached .triptych__head > .triptych__intro {
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  margin-inline: auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-align: center !important;
}

.triptych--attached .triptych__head > .eyebrow {
  color: var(--triptych-attached-copy) !important;
}

.triptych--attached .triptych__head h2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: var(--triptych-attached-title) !important;
  line-height: 1.08 !important;
}

.triptych--attached .triptych__intro {
  margin-top: 1.5rem !important;
  margin-bottom: 0 !important;
  color: var(--triptych-attached-copy) !important;
  font-size: .96rem !important;
  line-height: 1.85 !important;
}

.triptych--attached:is(.theme-brun, .theme-ardoise, .theme-nuit) :is(
  .triptych__head > .eyebrow,
  .triptych__intro,
  .triptych-card__content p
) {
  opacity: .78 !important;
}

.triptych--attached .triptych__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: visible !important;
}

.triptych--attached .triptych-card,
.triptych--attached .triptych-card__media {
  min-width: 0 !important;
  width: 100% !important;
}

.triptych--attached .triptych-card__media,
.triptych--attached .triptych__grid figure,
.triptych--attached .triptych__grid figure:nth-child(2) {
  position: relative !important;
  width: 100% !important;
  height: clamp(320px, 36vw, 520px) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: var(--aa-brun) !important;
}

.triptych--attached .triptych__image,
.triptych--attached .triptych__grid figure:nth-child(2) .triptych__image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  filter: saturate(.86) contrast(.94) brightness(.9) !important;
  transition: transform 1.4s ease !important;
}

.triptych--attached .triptych-card__media:hover .triptych__image {
  transform: scale(1.035) !important;
}

.triptych--attached .triptych-card__content {
  padding-top: 1.5rem !important;
  overflow: visible !important;
}

.triptych--attached .triptych-card__content h3,
.triptych--attached .triptych-card__content p {
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-align: left !important;
}

.triptych--attached .triptych-card__content h3 {
  margin: 0 0 1rem !important;
  color: var(--triptych-attached-title) !important;
  font-family: var(--aa-font-display) !important;
  font-size: .9rem !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.triptych--attached .triptych-card__rule {
  display: block !important;
  width: 42px !important;
  height: 1px !important;
  margin: 0 0 1.25rem !important;
  background: var(--aa-or) !important;
}

.triptych--attached .triptych-card__content p {
  margin: 0 !important;
  color: var(--triptych-attached-copy) !important;
  font-size: .9rem !important;
  line-height: 1.75 !important;
}

.triptych--attached .triptych__cta {
  display: flex !important;
  justify-content: center !important;
  margin-top: 3rem !important;
  text-align: center !important;
}

.triptych--attached .triptych__cta .cta-link {
  color: var(--triptych-attached-title) !important;
  font-size: .76rem !important;
}

@media (min-width: 768px) {
  .triptych--attached {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .triptych--attached .triptych__head {
    margin-bottom: 3.5rem !important;
  }

  .triptych--attached .triptych__cta {
    margin-top: 3.5rem !important;
  }
}

@media (max-width: 767px) {
  .triptych--attached .triptych__grid {
    grid-template-columns: 1fr !important;
  }

  .triptych--attached .triptych-card__media,
  .triptych--attached .triptych__grid figure,
  .triptych--attached .triptych__grid figure:nth-child(2) {
    height: 420px !important;
  }
}

/* About final CTA: exact React type scale, with no character-based text box. */
.cta-banner--minimal .cta-banner__kicker {
  width: max-content !important;
  max-width: none !important;
  margin: 0 0 1.25rem !important;
  color: var(--aa-lin) !important;
  font-size: .72rem !important;
  line-height: 1.3 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  opacity: .55 !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
}

.cta-banner--minimal .cta-banner__title {
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  color: var(--aa-lin) !important;
  font-size: clamp(1.85rem, 3.5vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: .12em !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
}

.cta-banner--minimal .cta-banner__content,
.cta-banner--minimal .cta-banner__content .aa-rich-text,
.cta-banner--minimal .cta-banner__content .aa-rich-text > p {
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}

.cta-banner--minimal .cta-banner__content .aa-rich-text > p {
  margin: 0 !important;
  color: var(--aa-lin) !important;
  font-size: .98rem !important;
  line-height: 1.85 !important;
  opacity: .74 !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.cta-banner--minimal .cta-banner__content .cta-link {
  font-size: .8rem !important;
}

@media (min-width: 768px) {
  .aa-page--about .hero--image .hero__content {
    padding-bottom: 7rem !important;
  }

  .text-centered,
  .founder {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }


}

@media (max-width: 767px) {
  .aa-page--about .hero--image .hero__content-inner {
    max-width: 100% !important;
    padding-left: 0 !important;
  }

  .aa-page--about .hero--image .hero__title {
    font-size: clamp(2.65rem, 13vw, 4.2rem) !important;
  }

  .founder__grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }

  .founder__portrait,
  .founder__content,
  .founder--right .founder__portrait,
  .founder--right .founder__content {
    grid-column: 1 !important;
    order: initial !important;
  }

  .founder__content {
    padding-inline: 1.5rem !important;
  }

  .founder__name {
    top: 4.15rem !important;
    font-size: .78rem !important;
    letter-spacing: .2em !important;
  }


}

/* ============================================================
   V31 — Hero viewport geometry identical to the React reference
   ============================================================ */

/* React uses h-screen on Home and min-h-[92vh] on About. Keep those
   viewport units literal instead of using svh, whose value can differ in
   Safari and make both heroes appear vertically offset. */
.aa-page--home .hero--home {
  height: 100vh !important;
  min-height: 680px !important;
}

.aa-page--about .hero--image {
  min-height: 92vh !important;
}

/* Exact React lower spacing: pb-16 on small screens, pb-22 from md. */
.aa-page--home .hero--home .hero__content {
  padding-top: 0 !important;
  padding-bottom: 4rem !important;
}

/* The WordPress admin bar moves the document down while vh still measures
   the complete viewport. Compensate its height so the visible bottom edge,
   and therefore the Hero text baseline, remains at the same coordinates as
   in the React reference while the editor is logged in. */
.admin-bar {
  --aa-admin-bar-offset: 32px;
}

.admin-bar.aa-page--home .hero--home {
  height: calc(100vh - var(--aa-admin-bar-offset)) !important;
  min-height: calc(680px - var(--aa-admin-bar-offset)) !important;
}

.admin-bar.aa-page--about .hero--image {
  min-height: calc(92vh - var(--aa-admin-bar-offset)) !important;
}

@media (min-width: 768px) {
  .aa-page--home .hero--home .hero__content {
    padding-bottom: 5.5rem !important;
  }
}

@media (max-width: 782px) {
  .admin-bar {
    --aa-admin-bar-offset: 46px;
  }
}

/* ============================================================
   V37 — Editorial image + text: authoritative React geometry
   Reference: Expertises.tsx — “Une offre pensée dans le détail”.
   The component owns this composition on every page and every theme.
   ============================================================ */
.editorial {
  padding-block: 4rem !important;
  overflow: hidden;
}

.editorial > .editorial__grid {
  width: 100%;
  margin-inline: auto;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: 3.5rem !important;
  row-gap: 2.5rem !important;
  align-items: center !important;
}

/* React default: image on the right, text in columns 1–5. */
.editorial--right .editorial__content {
  grid-column: 1 / span 5 !important;
  align-self: center !important;
  min-width: 0;
}

.editorial--right .editorial__content-inner {
  width: 100%;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.editorial--right .editorial__media {
  grid-column: 7 / span 6 !important;
  align-self: center !important;
}

/* Mirrored preset: same React proportions, image on the left. */
.editorial--left .editorial__media {
  grid-column: 1 / span 6 !important;
  align-self: center !important;
}

.editorial--left .editorial__content {
  grid-column: 8 / span 5 !important;
  align-self: center !important;
  min-width: 0;
}

.editorial--left .editorial__content-inner {
  width: 100%;
  max-width: 520px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.editorial .editorial__media {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5 / 4 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.editorial .editorial__image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.editorial .editorial__content,
.editorial .editorial__content-inner {
  overflow: visible !important;
}

.editorial .editorial__title,
.editorial .editorial__text,
.editorial .editorial__kicker,
.editorial .editorial__cta {
  text-align: left !important;
}

@media (min-width: 48rem) {
  .editorial {
    padding-block: 6rem !important;
  }
}

@media (max-width: 47.999rem) {
  .editorial > .editorial__grid {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 2.5rem !important;
  }

  .editorial--right .editorial__content,
  .editorial--left .editorial__content,
  .editorial--right .editorial__media,
  .editorial--left .editorial__media {
    grid-column: 1 !important;
  }

  .editorial--right .editorial__content,
  .editorial--left .editorial__content {
    order: 1 !important;
  }

  .editorial--right .editorial__media,
  .editorial--left .editorial__media {
    order: 2 !important;
  }

  .editorial--right .editorial__content-inner,
  .editorial--left .editorial__content-inner {
    max-width: none !important;
    margin-inline: 0 !important;
  }
}

/* ============================================================
   V38 — Editorial secondary paragraph: exact React accent colour
   React reference: Expertises.tsx uses #D4BFA0 for the closing
   sentence on dark backgrounds. This rule is component-scoped.
   ============================================================ */
.editorial:is(.theme-brun, .theme-ardoise, .theme-nuit) .editorial__text > p:last-child:not(:first-child) {
  color: #D4BFA0 !important;
  opacity: 1 !important;
}

/* ============================================================
   V41 — Shared Image banner
   Reference: Expertises / "Espace enfant" for the composition,
   with the media constrained to exactly half of the viewport as validated.
   Home / portrait remains the reference for handwritten-text treatment.
   ============================================================ */
.image-banner {
  --image-banner-title: var(--aa-brun);
  --image-banner-copy: var(--aa-ardoise);
  --image-banner-accent: var(--aa-or);
  display: block;
  grid-template-columns: none;
  min-height: 0;
  padding-block: 4rem;
  overflow: hidden;
}

.image-banner:is(.theme-brun, .theme-ardoise, .theme-nuit) {
  --image-banner-title: var(--aa-lin);
  --image-banner-copy: var(--aa-lin);
  --image-banner-accent: var(--aa-or-pale);
}

.image-banner__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 2.5rem;
  align-items: center;
  width: 100%;
}

.image-banner__media {
  grid-column: 1 / span 6;
  order: 1;
  aspect-ratio: 16 / 10;
  min-width: 0;
  overflow: hidden;
  background: var(--aa-or-pale);
}

.image-banner__content {
  grid-column: 8 / span 4;
  order: 2;
  display: block;
  min-width: 0;
  padding: 0;
  overflow: visible;
}

.image-banner--left .image-banner__media {
  order: 1;
}

.image-banner--left .image-banner__content {
  order: 2;
}

.image-banner--right .image-banner__content {
  grid-column: 2 / span 4;
  order: 1;
}

.image-banner--right .image-banner__media {
  grid-column: 7 / span 6;
  order: 2;
}

.image-banner__content-inner {
  width: 100%;
  max-width: none;
  overflow: visible;
}

.image-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-banner__kicker {
  margin: 0 0 1.25rem;
  color: var(--image-banner-accent) !important;
}

.image-banner__title-rule {
  width: 42px;
  height: 1px;
  margin: 0 0 1.75rem;
  background: var(--aa-or);
}

.image-banner__title {
  margin: 0;
  color: var(--image-banner-title) !important;
  font-size: clamp(1.85rem, 3.5vw, 3rem) !important;
  font-weight: 300;
  line-height: 1.08 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.image-banner__text {
  margin-top: 1.75rem;
  width: 100%;
  max-width: none;
  overflow: visible;
  color: var(--image-banner-copy) !important;
  font-size: clamp(.98rem, 1.08vw, 1.06rem) !important;
  line-height: 1.9 !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.image-banner--without-title .image-banner__text {
  margin-top: 0;
}

body main .image-banner__text > p,
body main .image-banner__text p {
  margin: 0;
  color: var(--image-banner-copy) !important;
  font-size: clamp(.98rem, 1.08vw, 1.06rem) !important;
  line-height: 1.9 !important;
  opacity: 1;
}

body main .image-banner__text > p + p,
body main .image-banner__text p + p {
  margin-top: 1.5rem;
}

.image-banner:is(.theme-brun, .theme-ardoise, .theme-nuit) .image-banner__text {
  opacity: .78;
}

.image-banner__quote {
  width: max-content;
  max-width: none;
  margin: 2rem 0 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--aa-or);
  color: var(--image-banner-accent) !important;
  font-family: var(--aa-font-display);
  font-size: 1.34rem !important;
  font-style: italic;
  font-weight: 300;
  line-height: 1.45 !important;
  letter-spacing: .02em;
}

.image-banner__signature {
  width: max-content;
  max-width: none;
  margin: 2rem 0 0;
  color: var(--image-banner-accent) !important;
  font-family: "Cormorant Garamond", var(--aa-font-display), serif;
  font-size: clamp(1.55rem, 2.4vw, 2.2rem) !important;
  font-style: italic;
  font-weight: 300;
  line-height: 1.15 !important;
  letter-spacing: .02em;
}

.image-banner__cta {
  margin-top: 2rem;
  color: var(--image-banner-title) !important;
  border-bottom-color: var(--aa-or) !important;
}

.image-banner__cta::before,
.image-banner__cta::after,
.image-banner__cta span {
  border-color: var(--aa-or) !important;
  border-bottom-color: var(--aa-or) !important;
}

.image-banner__cta::before,
.image-banner__cta::after {
  background-color: var(--aa-or) !important;
}

@media (min-width: 768px) {
  .image-banner {
    padding-block: 6rem;
  }
}

@media (max-width: 767px) {
  .image-banner__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 2.5rem;
  }

  .image-banner__media,
  .image-banner--right .image-banner__media {
    grid-column: 1;
    order: 1 !important;
  }

  .image-banner__content,
  .image-banner--right .image-banner__content {
    grid-column: 1;
    order: 2 !important;
    padding-inline: 1.5rem !important;
  }
}

/* ============================================================
   V49 — Projet Signature : rythme exact du groupe React
   Scope limité au composant partagé Projet Signature.
   ============================================================ */

/* Dans React, les projets appartiennent à une seule section :
   - 3rem avant le premier projet ;
   - 3.5rem entre les projets sur mobile, 4rem sur desktop ;
   - 3.5rem après le dernier projet.
   Les classes de contexte du Flexible Content reproduisent ce rythme sans
   dépendre de la page qui utilise le composant. */
body main .section.project-showcase {
  padding-top: 3rem !important;
  padding-bottom: 3.5rem !important;
}

body main .section.project-showcase.aa-layout-before--project_showcase {
  padding-bottom: 0 !important;
}

body main .section.project-showcase.aa-layout-after--project_showcase {
  padding-top: 3.5rem !important;
}

/* Le React place le séparateur après 3rem de respiration sous le texte.
   Il n'existe que lorsqu'un autre Projet Signature suit immédiatement. */
body main .section.project-showcase.aa-layout-before--project_showcase .project-showcase__content-row {
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(60, 42, 30, .12);
}

body main .section.project-showcase:is(.theme-brun, .theme-ardoise, .theme-nuit).aa-layout-before--project_showcase .project-showcase__content-row {
  border-bottom-color: rgba(243, 230, 212, .18);
}

@media (min-width: 768px) {
  body main .section.project-showcase.aa-layout-after--project_showcase {
    padding-top: 4rem !important;
  }
}

/* Équivalent exact de `text-brun` avec `opacity: 0.78` dans React. */
body main .project-showcase .project-showcase__content .project-showcase__subtitle {
  color: rgba(60, 42, 30, .78) !important;
  -webkit-text-fill-color: rgba(60, 42, 30, .78) !important;
  opacity: 1 !important;
}

body main .project-showcase:is(.theme-brun, .theme-ardoise, .theme-nuit) .project-showcase__content .project-showcase__subtitle {
  color: rgba(243, 230, 212, .78) !important;
  -webkit-text-fill-color: rgba(243, 230, 212, .78) !important;
}

/* ============================================================
   V50 — Process Home : composant partagé identique au React
   Source : Home.tsx, section PROCESS.
   Aucun sélecteur ne dépend d'un type ou d'un identifiant de page.
   ============================================================ */

body main .section.process-home {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

body main .process-home > .container {
  width: 100%;
  max-width: 100% !important;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem) !important;
}

body main .process-home .process-home__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 780px !important;
  margin: 0 auto 2.25rem !important;
  text-align: center !important;
}

body main .process-home .process-home__head > :where(.eyebrow, h2, .process-home__subtitle) {
  align-self: center !important;
  width: max-content !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body main .process-home .process-home__head > .eyebrow {
  margin-top: 0 !important;
}

body main .process-home .process-home__head > h2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: clamp(2.35rem, 4.6vw, 4.45rem) !important;
  line-height: .98 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase;
}

body main .process-home .process-home__head > .process-home__subtitle {
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;
  font-size: clamp(.98rem, 1.1vw, 1.08rem) !important;
  line-height: 1.85 !important;
  opacity: .82;
}

body main .process-home__grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  column-gap: 2rem !important;
  row-gap: 2.25rem !important;
}

body main .process-home .process-card {
  min-width: 0;
  padding-top: 1.15rem !important;
}

body main .process-home:is(.theme-brun, .theme-ardoise, .theme-nuit) .process-card {
  border-top: 1px solid rgba(243, 230, 212, .38) !important;
}

body main .process-home:is(.theme-lin, .theme-white) .process-card {
  border-top: 1px solid rgba(60, 42, 30, .18) !important;
}

body main .process-home .process-card__image {
  display: block !important;
  width: 100% !important;
  height: clamp(138px, 15vw, 190px) !important;
  min-height: 0 !important;
  max-height: 190px !important;
  margin: 0 0 1.25rem !important;
  object-fit: cover !important;
}

body main .process-home .process-card h3 {
  width: max-content !important;
  max-width: none !important;
  margin: 0 0 .75rem !important;
  font-size: clamp(1.45rem, 2vw, 1.95rem) !important;
  line-height: 1.05 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
}

body main .process-home .process-card__text {
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: .95rem !important;
  line-height: 1.75 !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body main .process-home__cta {
  margin-top: 2.5rem !important;
  text-align: center !important;
}

body main .process-home__cta .cta-link {
  margin-inline: auto !important;
}

@media (min-width: 40rem) {
  body main .process-home > .container {
    max-width: 40rem !important;
  }

  body main .process-home__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 48rem) {
  body main .section.process-home {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  body main .process-home > .container {
    max-width: 48rem !important;
  }

  body main .process-home .process-home__head {
    margin-bottom: 2.75rem !important;
  }

  body main .process-home__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body main .process-home__cta {
    margin-top: 3rem !important;
  }
}

@media (min-width: 64rem) {
  body main .process-home > .container {
    max-width: 64rem !important;
  }
}

@media (min-width: 80rem) {
  body main .process-home > .container {
    max-width: 80rem !important;
  }
}

@media (min-width: 96rem) {
  body main .process-home > .container {
    max-width: 96rem !important;
  }
}



/* ============================================================
   V56 — Founder portrait typography copied from React
   ============================================================ */

/* React uses DM Sans for the founder name and body copy. The exact
   font sizes below match APropos.tsx and are repeated here at the end
   of the cascade so generic theme typography cannot alter them. */
.founder__name {
  font-family: "DM Sans", sans-serif !important;
  font-size: clamp(.92rem, 1.35vw, 1.14rem) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .24em !important;
}

.founder__text,
.founder__text > p {
  font-family: "DM Sans", sans-serif !important;
  font-size: .98rem !important;
  font-weight: 300 !important;
  line-height: 1.9 !important;
  letter-spacing: .01em !important;
}

.founder blockquote {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 1.34rem !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.45 !important;
  letter-spacing: .035em !important;
}

@media (max-width: 767px) {
  .founder__name {
    font-size: .78rem !important;
    letter-spacing: .2em !important;
  }
}


/* ============================================================
   V57 — Reusable sections are page-independent
   Every validated layout owns its geometry. Page template classes may still
   select a Hero or page shell, but never alter a reusable section.
   ============================================================ */
@media (min-width: 48rem) {
  body main .editorial .editorial__content,
  body main .editorial .editorial__media {
    grid-row: 1 !important;
  }
}

/* Text centered: one component rhythm on every page. Width remains controlled
   by the CMS width option (container / wide / narrow), not by page_template. */
body main .text-centered {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}
body main .text-centered__inner {
  margin-inline: auto !important;
  text-align: center !important;
}
body main .text-centered h2 {
  margin-inline: auto !important;
  line-height: 1.08 !important;
  text-align: center !important;
}
body main .text-centered__content,
body main .text-centered__content > p {
  margin-top: 2rem !important;
  color: var(--aa-ardoise) !important;
  font-size: 1rem !important;
  line-height: 1.9 !important;
  text-align: center !important;
}
@media (min-width: 48rem) {
  body main .text-centered {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}

/* ============================================================
   V58 — New reusable layouts copied from the final React pages
   References:
   - Audit / "Constat sur le besoin"
   - Expérience famille / "Parcours client"
   - Home / alternating introduction rows
   - Journal + Signature / centered CTA
   - Journal / featured article
   ============================================================ */

/* ---------- Bandeau très grand + texte — Audit.tsx ---------- */
body main .full-width-banner.section {
  padding-top: clamp(4.4rem, 7vw, 7rem) !important;
  padding-bottom: clamp(4.4rem, 7vw, 7rem) !important;
  overflow: hidden;
}

.full-width-banner__heading {
  max-width: 900px;
  margin: 0 auto clamp(2.4rem, 4vw, 3.8rem);
  text-align: center;
}

.full-width-banner__title {
  margin: 0 !important;
  font-size: clamp(1.85rem, 3.5vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: .12em !important;
  text-align: center;
  text-transform: uppercase;
}

.full-width-banner__media {
  display: block;
  width: 100%;
  height: clamp(180px, 24vw, 320px);
  overflow: hidden;
  background: var(--aa-or-pale);
}

.full-width-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(.96) brightness(.94);
  transition: transform 1.4s ease;
}

.full-width-banner__media:hover .full-width-banner__image {
  transform: scale(1.025);
}

.full-width-banner__body {
  max-width: 760px;
  margin: clamp(2.5rem, 4vw, 4rem) auto 0;
  text-align: center;
}

.full-width-banner__text {
  max-width: none !important;
  margin: 0 auto !important;
  color: var(--aa-ardoise) !important;
  font-size: clamp(1rem, 1.15vw, 1.08rem) !important;
  line-height: 1.86 !important;
}

.full-width-banner:is(.theme-brun, .theme-ardoise, .theme-nuit) .full-width-banner__text {
  color: var(--aa-lin) !important;
  opacity: .78;
}

.full-width-banner__cta {
  margin-top: 2rem !important;
}

@media (max-width: 767px) {
  .full-width-banner__media {
    height: 220px;
  }
}

/* ---------- Bandeau image grand + texte — ExperienceFamille.tsx ---------- */
.large-image-text {
  --large-banner-title: var(--aa-brun);
  --large-banner-copy: var(--aa-ardoise);
  --large-banner-accent: var(--aa-or);
  padding: 0 0 3.5rem;
  overflow: hidden;
}

/* In ExperienceFamille.tsx, the first large image/text block starts flush
   beneath the Hero, while every later use recovers the section's py-14 /
   md:py-20 breathing room. The Flexible Content renderer marks the first
   reusable section, so this remains component-level and page-independent. */
.large-image-text:not(.aa-layout-context--first) {
  padding-top: 3.5rem;
}

.large-image-text:is(.theme-brun, .theme-ardoise, .theme-nuit) {
  --large-banner-title: var(--aa-lin);
  --large-banner-copy: var(--aa-lin);
  --large-banner-accent: var(--aa-or-pale);
}

.large-image-text__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
  width: 100%;
}

.large-image-text__media {
  grid-column: 1 / span 7;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--aa-or-pale);
}

.large-image-text__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) sepia(.08);
  transition: transform 1.4s ease;
}

.large-image-text__media:hover .large-image-text__image {
  transform: scale(1.035);
}

.large-image-text__content {
  grid-column: 9 / span 4;
  min-width: 0;
  padding-top: 6rem;
}

.large-image-text--right .large-image-text__media {
  grid-column: 6 / span 7;
  order: 2;
}

.large-image-text--right .large-image-text__content {
  grid-column: 1 / span 4;
  order: 1;
  padding-left: var(--aa-container-x);
}

.large-image-text__content-inner {
  width: 100%;
  max-width: none;
}

.large-image-text__kicker {
  margin: 0 0 1.25rem !important;
  color: var(--large-banner-accent) !important;
}

.large-image-text__title-rule {
  display: block;
  width: 42px;
  height: 1px;
  margin: 0 0 1.75rem;
  background: var(--aa-or);
}

.large-image-text__title {
  margin: 0 !important;
  color: var(--large-banner-title) !important;
  font-size: clamp(1.85rem, 3.5vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}

.large-image-text__text {
  margin-top: 1.25rem;
  color: var(--large-banner-copy) !important;
}

.large-image-text__text p {
  max-width: 41ch !important;
  margin: 0 !important;
  color: var(--large-banner-copy) !important;
  font-size: .88rem !important;
  line-height: 1.85 !important;
  opacity: 1;
}

.large-image-text__text p + p {
  margin-top: .8rem !important;
  color: var(--large-banner-title) !important;
}

.large-image-text:is(.theme-brun, .theme-ardoise, .theme-nuit) .large-image-text__text {
  opacity: .82;
}

.large-image-text__quote,
.image-text-multiple__quote {
  display: block;
  width: auto;
  max-width: 34ch;
  margin: 1.25rem 0 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--aa-or);
  color: var(--aa-brun) !important;
  font-family: var(--aa-font-display);
  font-size: clamp(1.08rem, 2vw, 1.45rem) !important;
  font-style: italic;
  font-weight: 300;
  line-height: 1.45 !important;
  letter-spacing: 0;
  text-align: left;
}

.large-image-text:is(.theme-brun, .theme-ardoise, .theme-nuit) .large-image-text__quote,
.image-text-multiple:is(.theme-brun, .theme-ardoise, .theme-nuit) .image-text-multiple__quote {
  color: var(--aa-lin) !important;
}

.large-image-text__signature,
.image-text-multiple__signature {
  width: max-content;
  max-width: 100%;
  margin: 2rem 0 0 !important;
  color: var(--large-banner-accent) !important;
  font-family: "Cormorant Garamond", var(--aa-font-display), serif;
  font-size: clamp(1.55rem, 2.4vw, 2.2rem) !important;
  font-style: italic;
  font-weight: 300;
  line-height: 1.15 !important;
}

.large-image-text__cta {
  margin-top: 1.5rem !important;
  color: var(--large-banner-title) !important;
}

@media (min-width: 768px) {
  .large-image-text {
    padding-bottom: 5rem;
  }

  .large-image-text:not(.aa-layout-context--first) {
    padding-top: 5rem;
  }
}

@media (max-width: 767px) {
  .large-image-text__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .large-image-text__media,
  .large-image-text--right .large-image-text__media {
    grid-column: 1;
    order: 1;
  }

  .large-image-text__content,
  .large-image-text--right .large-image-text__content {
    grid-column: 1;
    order: 2;
    padding: 0 1.5rem;
  }
}

/* ---------- Bandeau image + texte multiple — Home.tsx ---------- */
body main .image-text-multiple.section {
  --multiple-title: var(--aa-brun);
  --multiple-copy: var(--aa-ardoise);
  --multiple-accent: var(--aa-or);
  padding: 0 0 2.5rem !important;
  overflow: hidden;
}

@media (min-width: 768px) {
  body main .image-text-multiple.section {
    padding-bottom: 3.5rem !important;
  }
}

body main .image-text-multiple.section:is(.theme-brun, .theme-ardoise, .theme-nuit) {
  --multiple-title: var(--aa-lin);
  --multiple-copy: var(--aa-lin);
  --multiple-accent: var(--aa-or-pale);
}

.image-text-multiple__rows {
  width: 100%;
}

.image-text-multiple__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

.image-text-multiple__row + .image-text-multiple__row {
  margin-top: 0;
}

.image-text-multiple__media {
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--aa-or-pale);
}

.image-text-multiple__row--right .image-text-multiple__media {
  order: 2;
}

.image-text-multiple__row--right .image-text-multiple__content {
  order: 1;
}

.image-text-multiple__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) sepia(.08);
  transition: transform 1.4s ease;
}

.image-text-multiple__media:hover .image-text-multiple__image {
  transform: scale(1.035);
}

.image-text-multiple__content {
  min-width: 0;
  padding: 2.25rem 1.5rem;
}

.image-text-multiple__content-inner {
  width: 100%;
  max-width: 42ch;
}

.image-text-multiple__kicker {
  margin: 0 0 1.25rem !important;
  color: var(--multiple-accent) !important;
}

.image-text-multiple__title-rule {
  display: block;
  width: 42px;
  height: 1px;
  margin: 0 0 1.75rem;
  background: var(--aa-or);
}

.image-text-multiple__title {
  margin: 0 !important;
  color: var(--multiple-title) !important;
  font-size: clamp(1.85rem, 3.5vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}

.image-text-multiple__text {
  margin-top: 1.25rem;
  color: var(--multiple-copy) !important;
}

.image-text-multiple__content-inner > .image-text-multiple__text:first-child {
  margin-top: 0;
}

.image-text-multiple__text p {
  max-width: 42ch !important;
  margin: 0 !important;
  color: var(--multiple-copy) !important;
  font-size: clamp(.98rem, 1.1vw, 1.08rem) !important;
  line-height: 1.85 !important;
}

.image-text-multiple__text p + p {
  margin-top: 1rem !important;
}

.image-text-multiple__signature {
  color: var(--multiple-accent) !important;
}

.image-text-multiple__cta {
  margin-top: 2rem !important;
  color: var(--multiple-title) !important;
}

@media (min-width: 768px) {
  .image-text-multiple__content {
    padding: 3rem 3.5rem;
  }
}

@media (max-width: 767px) {
  .image-text-multiple__row {
    grid-template-columns: 1fr;
  }

  .image-text-multiple__row--left .image-text-multiple__media,
  .image-text-multiple__row--right .image-text-multiple__media {
    order: 1;
  }

  .image-text-multiple__row--left .image-text-multiple__content,
  .image-text-multiple__row--right .image-text-multiple__content {
    order: 2;
  }
}

/* ---------- Bandeau CTA centré — Journal.tsx + Signature.tsx ---------- */
body main .cta-banner--centered.section {
  padding: 4.5rem 0 !important;
}

.cta-banner--centered .cta-banner__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: min(48rem, calc(100% - (var(--aa-container-x) * 2))) !important;
  max-width: none !important;
  padding-inline: 0 !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.cta-banner--centered.cta-banner--title-quote .cta-banner__inner {
  width: min(42rem, calc(100% - (var(--aa-container-x) * 2))) !important;
  max-width: none !important;
}

.cta-banner--centered {
  --cta-centered-title: var(--aa-brun);
  --cta-centered-copy: var(--aa-ardoise);
  --cta-centered-kicker: var(--aa-ardoise);
}

.cta-banner--centered:is(.theme-brun, .theme-ardoise, .theme-nuit) {
  --cta-centered-title: var(--aa-lin);
  --cta-centered-copy: var(--aa-lin);
  --cta-centered-kicker: var(--aa-lin);
}

.cta-banner--centered .cta-banner__heading,
.cta-banner--centered .cta-banner__content {
  display: flex !important;
  width: 100%;
  max-width: none !important;
  margin-inline: auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.cta-banner--centered .cta-banner__kicker {
  width: auto !important;
  margin: 0 0 1.25rem !important;
  font-family: "DM Sans", var(--aa-font-body) !important;
  font-size: .65rem !important;
  line-height: 1.4 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--cta-centered-kicker) !important;
  text-align: center !important;
  opacity: .78;
}

.cta-banner--centered .cta-banner__title {
  max-width: 100% !important;
  margin: 0 auto !important;
  font-size: clamp(2rem, 4.4vw, 4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: .12em !important;
  color: var(--cta-centered-title) !important;
  text-align: center !important;
}

.cta-banner--centered .cta-banner__quote {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: center !important;
}

.cta-banner--centered .cta-banner__quote p {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  color: var(--cta-centered-title) !important;
  font-family: var(--aa-font-display) !important;
  font-size: clamp(1.45rem, 2.4vw, 2.15rem) !important;
  font-style: italic;
  font-weight: 300;
  line-height: 1.3 !important;
  letter-spacing: .04em !important;
  white-space: normal !important;
  text-wrap: wrap !important;
  text-align: center !important;
  text-transform: none !important;
}

.cta-banner--centered .cta-banner__content .aa-rich-text {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

body main .cta-banner--centered .cta-banner__content .aa-rich-text p {
  width: auto !important;
  max-width: 44ch !important;
  margin: 1.75rem auto 0 !important;
  color: var(--cta-centered-copy) !important;
  font-size: .88rem !important;
  line-height: 1.9 !important;
  white-space: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: center !important;
  opacity: .82;
}

.cta-banner--centered.cta-banner--title-quote .cta-banner__content .aa-rich-text {
  max-width: none !important;
  margin-inline: auto !important;
  text-align: center !important;
}

body main .cta-banner--centered.cta-banner--title-quote .cta-banner__content .aa-rich-text p {
  width: max-content !important;
  max-width: none !important;
  margin-inline: auto !important;
  color: var(--cta-centered-copy) !important;
  font-family: "DM Sans", var(--aa-font-body) !important;
  font-size: clamp(.98rem, 1.15vw, 1.08rem) !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  letter-spacing: .01em !important;
  /* Desktop: only editor-authored <br> elements may create a new line. */
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: center !important;
  opacity: .86;
}

@media (max-width: 767px) {
  body main .cta-banner--centered.cta-banner--title-quote .cta-banner__content .aa-rich-text p {
    width: 100% !important;
    max-width: 100% !important;
    /* Keep every manual <br>, but allow an exceptionally long authored line
       to wrap rather than create horizontal overflow on a small screen. */
    white-space: normal !important;
    text-wrap: wrap !important;
  }
}

.cta-banner--centered .cta-banner__content .cta-link {
  align-self: center !important;
  margin: 2.25rem auto 0 !important;
  text-align: center !important;
}

@media (min-width: 768px) {
  body main .cta-banner--centered.section {
    padding: 6rem 0 !important;
  }

  body main .cta-banner--centered.cta-banner--title-quote.section {
    padding: 4.5rem 0 !important;
  }
}

/* ---------- Article principal — Journal.tsx ---------- */
body main .journal-featured.section {
  padding: 4rem 0 !important;
}

.journal-featured__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: start;
}

.journal-featured__media {
  grid-column: 1 / span 7;
  display: block;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--aa-or-pale);
}

.journal-featured__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) sepia(.08);
  transition: transform 1.4s ease;
}

.journal-featured__media:hover .journal-featured__image {
  transform: scale(1.035);
}

.journal-featured__content {
  grid-column: 9 / span 4;
  min-width: 0;
  padding-top: 2rem;
}

.journal-featured__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.journal-featured__date {
  color: var(--aa-ardoise);
  font-family: "DM Sans", var(--aa-font-body);
  font-size: .65rem;
  line-height: 1.4;
  letter-spacing: .12em;
}

.journal-featured__title {
  margin: 1.25rem 0 0 !important;
  font-family: "DM Sans", var(--aa-font-body) !important;
  font-size: clamp(.98rem, 1.45vw, 1.18rem) !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.journal-featured__excerpt {
  max-width: 34ch !important;
  margin: 1.25rem 0 0 !important;
  font-size: .86rem !important;
  line-height: 1.9 !important;
  opacity: .75;
}

.journal-featured__cta {
  margin-top: 1.25rem !important;
  font-size: .7rem !important;
}

.journal-featured:is(.theme-brun, .theme-ardoise, .theme-nuit) .journal-featured__date,
.journal-featured:is(.theme-brun, .theme-ardoise, .theme-nuit) .journal-featured__excerpt {
  color: var(--aa-lin) !important;
}

.journal-featured:is(.theme-brun, .theme-ardoise, .theme-nuit) .journal-featured__cta {
  color: var(--aa-lin) !important;
  border-bottom-color: var(--aa-or) !important;
}

@media (min-width: 768px) {
  body main .journal-featured.section {
    padding: 6rem 0 !important;
  }

  .journal-featured__grid {
    gap: 4rem;
  }
}

@media (max-width: 767px) {
  .journal-featured__grid {
    grid-template-columns: 1fr;
  }

  .journal-featured__media,
  .journal-featured__content {
    grid-column: 1;
  }

  .journal-featured__content {
    padding-top: 0;
  }
}

.journal-featured--without-image .journal-featured__content {
  grid-column: 4 / span 6;
  padding-top: 0;
}

@media (max-width: 767px) {
  .journal-featured--without-image .journal-featured__content {
    grid-column: 1;
  }
}

/* ============================================================
   V67 — Validated reusable typography variants
   References:
   - Text centered large: Home / "Créer des univers pour les familles"
   - Text centered small: About / "À l’origine de l’agence"
   - Attached triptych: About / "Vision"
   ============================================================ */

/* The large variant remains the current validated Home composition. */
body main .text-centered--large .text-centered__inner {
  max-width: 820px !important;
}

body main .text-centered--large h2 {
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(2.35rem, 4.6vw, 4.45rem) !important;
  font-weight: 300 !important;
  line-height: .98 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}

/* Small variant copied from APropos.tsx. */
body main .text-centered--small .text-centered__inner {
  width: 100% !important;
  max-width: 920px !important;
}

body main .text-centered--small h2 {
  max-width: none !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(1.85rem, 3.5vw, 3rem) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body main .text-centered--small .text-centered__content,
body main .text-centered--small .text-centered__content > p {
  width: 100% !important;
  max-width: 76ch !important;
  margin: 2rem auto 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  line-height: 1.9 !important;
  letter-spacing: .01em !important;
  white-space: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Attached triptych typography copied from the About Vision section. */
body main .triptych--attached .triptych__head h2 {
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(1.85rem, 3.5vw, 3rem) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body main .triptych--attached .triptych__intro,
body main .triptych--attached .triptych__intro > p {
  font-family: "DM Sans", sans-serif !important;
  font-size: .96rem !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  letter-spacing: .01em !important;
}

body main .triptych--attached .triptych-card__content h3 {
  font-family: "Cormorant Garamond", serif !important;
  font-size: .9rem !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

body main .triptych--attached .triptych-card__content p {
  font-family: "DM Sans", sans-serif !important;
  font-size: .9rem !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  letter-spacing: .01em !important;
}

/* ============================================================
   V68 — Shared Hero punctuation + Large image/text centered style
   References:
   - Every Hero title/subtitle uses the Home Hero typography and apostrophe.
   - Centered large image/text: Expertises.tsx / "Espace enfant".
   ============================================================ */

/* The centered style changes only the composition around the same editable
   fields. The validated extended style remains the default for existing rows. */
.large-image-text--style-centered .large-image-text__grid {
  gap: 2.5rem;
  align-items: center;
}

.large-image-text--style-centered .large-image-text__content {
  padding-top: 0;
}

@media (min-width: 768px) {
  .large-image-text--style-centered .large-image-text__grid {
    gap: 4rem;
  }

  .large-image-text--style-centered.large-image-text--left .large-image-text__media {
    grid-column: 1 / span 7;
  }

  .large-image-text--style-centered.large-image-text--left .large-image-text__content {
    grid-column: 8 / span 4;
  }

  .large-image-text--style-centered.large-image-text--right .large-image-text__content {
    grid-column: 2 / span 4;
    padding-left: 0;
  }

  .large-image-text--style-centered.large-image-text--right .large-image-text__media {
    grid-column: 6 / span 7;
  }
}


/* ============================================================
   V70 — Editorial presets + centered quote text
   React references:
   - Square: current validated editorial component.
   - Rectangle: EspaceEnfant.tsx / “À hauteur d’enfant”.
   - Giant: EspaceEnfant.tsx / “Projection sensible”.
   - Text quote: EspaceEnfant.tsx / introductory gold statement.
   ============================================================ */

/* The media and its optional handwritten signature form one grid item. */
body main .editorial .editorial__media-column {
  min-width: 0;
  width: 100%;
}

body main .editorial .editorial__signature {
  margin: 2rem 0 0 !important;
  color: var(--aa-or) !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: 1.35rem !important;
  font-style: italic !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: .03em !important;
  text-align: right !important;
  text-transform: none !important;
}

body main .editorial:is(.theme-brun, .theme-ardoise, .theme-nuit) .editorial__signature {
  color: var(--aa-or-pale) !important;
}

/* Square keeps the exact V68 geometry. */
body main .editorial--style-square.editorial--right .editorial__media-column {
  grid-column: 7 / span 6 !important;
}

body main .editorial--style-square.editorial--left .editorial__media-column {
  grid-column: 1 / span 6 !important;
}

body main .editorial--style-square .editorial__media {
  aspect-ratio: 5 / 4 !important;
}

/* Rectangle: copy of “À hauteur d’enfant”. */
body main .editorial--style-rectangle {
  padding-block: 4rem !important;
}

body main .editorial--style-rectangle > .editorial__grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 3rem !important;
  align-items: center !important;
}

body main .editorial--style-rectangle.editorial--right .editorial__content {
  grid-column: 1 / span 5 !important;
}

body main .editorial--style-rectangle.editorial--right .editorial__media-column {
  grid-column: 7 / span 6 !important;
}

body main .editorial--style-rectangle.editorial--left .editorial__media-column {
  grid-column: 1 / span 6 !important;
}

body main .editorial--style-rectangle.editorial--left .editorial__content {
  grid-column: 8 / span 5 !important;
}

body main .editorial--style-rectangle .editorial__content-inner {
  width: 100% !important;
  max-width: 520px !important;
  margin-inline: 0 !important;
}

body main .editorial--style-rectangle.editorial--right .editorial__content-inner {
  margin-right: auto !important;
}

body main .editorial--style-rectangle.editorial--left .editorial__content-inner {
  margin-left: auto !important;
}

body main .editorial--style-rectangle .editorial__media {
  width: 100% !important;
  aspect-ratio: 5 / 6 !important;
}

body main .editorial--style-rectangle .editorial__title {
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(1.85rem, 3.5vw, 3rem) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body main .editorial--style-rectangle .editorial__text {
  margin-top: 1.75rem !important;
}

body main .editorial--style-rectangle .editorial__text p {
  width: 100% !important;
  max-width: 42ch !important;
  margin: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: .9rem !important;
  font-weight: 300 !important;
  line-height: 1.95 !important;
  letter-spacing: .01em !important;
  white-space: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Giant: copy of “Projection sensible”. */
body main .editorial--style-giant {
  padding-block: 4rem !important;
}

body main .editorial--style-giant > .editorial__grid {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
}

body main .editorial--style-giant .editorial__media-column,
body main .editorial--style-giant .editorial__content {
  width: 100% !important;
  max-width: 1080px !important;
  margin-inline: auto !important;
}

body main .editorial--style-giant .editorial__media {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
}

body main .editorial--style-giant .editorial__content {
  margin-top: 2rem !important;
  text-align: center !important;
}

body main .editorial--style-giant.editorial--has-signature .editorial__content {
  margin-top: 1.5rem !important;
}

body main .editorial--style-giant .editorial__content-inner {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  text-align: center !important;
}

body main .editorial--style-giant .editorial__kicker,
body main .editorial--style-giant .editorial__title,
body main .editorial--style-giant .editorial__text,
body main .editorial--style-giant .editorial__cta {
  text-align: center !important;
}

body main .editorial--style-giant .editorial__title {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(1.85rem, 3.5vw, 3rem) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  text-wrap: wrap !important;
}

body main .editorial--style-giant .editorial__text {
  margin-top: 2rem !important;
}

body main .editorial--style-giant .editorial__text p {
  width: 100% !important;
  max-width: 58ch !important;
  margin: 0 auto !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: .84rem !important;
  font-weight: 300 !important;
  line-height: 1.9 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  white-space: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body main .editorial--style-giant .editorial__cta {
  margin-top: 2.25rem !important;
}

body main .editorial--without-media .editorial__content {
  grid-column: 3 / span 8 !important;
  margin-inline: auto !important;
}

body main .editorial--without-media .editorial__content-inner {
  margin-inline: auto !important;
}

@media (min-width: 768px) {
  body main .editorial--style-rectangle,
  body main .editorial--style-giant {
    padding-block: 6rem !important;
  }

  body main .editorial--style-rectangle > .editorial__grid {
    gap: 4rem !important;
  }
}

@media (max-width: 767px) {
  body main .editorial--style-square > .editorial__grid,
  body main .editorial--style-rectangle > .editorial__grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  body main .editorial--style-square .editorial__content,
  body main .editorial--style-square .editorial__media-column,
  body main .editorial--style-rectangle .editorial__content,
  body main .editorial--style-rectangle .editorial__media-column,
  body main .editorial--without-media .editorial__content {
    grid-column: 1 !important;
  }

  body main .editorial--style-square .editorial__content,
  body main .editorial--style-rectangle .editorial__content {
    order: 1 !important;
  }

  body main .editorial--style-square .editorial__media-column,
  body main .editorial--style-rectangle .editorial__media-column {
    order: 2 !important;
  }

  body main .editorial--style-square .editorial__content-inner,
  body main .editorial--style-rectangle .editorial__content-inner {
    max-width: none !important;
    margin-inline: 0 !important;
  }
}

/* Citation variant: exact gold, italic, centered React statement. */
body main .text-centered--type-quote,
body main .text-centered--type-quote .text-centered__inner,
body main .text-centered--type-quote .text-centered__kicker,
body main .text-centered--type-quote .text-centered__quote,
body main .text-centered--type-quote .text-centered__quote p,
body main .text-centered--type-quote .text-centered__content,
body main .text-centered--type-quote .text-centered__content p,
body main .text-centered--type-quote .text-centered__cta {
  text-align: center !important;
}

body main .text-centered--type-quote .text-centered__inner {
  width: 100% !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
}

body main .text-centered--type-quote .text-centered__quote {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
}

body main .text-centered--type-quote .text-centered__quote p {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  color: var(--aa-or) !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(1.65rem, 4.15vw, 4.2rem) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  letter-spacing: .03em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body main .text-centered--type-quote:is(.aa-bg-brun, .aa-bg-ardoise, .aa-bg-petrole) .text-centered__quote p {
  color: var(--aa-or-pale) !important;
}

body main .text-centered--type-quote .text-centered__content,
body main .text-centered--type-quote .text-centered__content p {
  width: 100% !important;
  max-width: 58ch !important;
  margin-right: auto !important;
  margin-left: auto !important;
  white-space: normal !important;
  text-wrap: wrap !important;
}

body main .text-centered--type-quote .text-centered__cta {
  display: table !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* ============================================================
   V71 — Centered text reliability + React typography presets
   References:
   - Text centered: all variants remain perfectly centered.
   - Editorial rectangle: EspaceEnfant.tsx / “À hauteur d’enfant”.
   - Spaced triptych small titles: EspaceEnfant.tsx / “Espaces”.
   ============================================================ */

/* The component is a centered stack in both Classic and Citation modes.
   Flex centering neutralizes older max-content rules while preserving every
   explicit <br> generated from editor-authored textarea returns. */
body main .text-centered .text-centered__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

body main .text-centered :is(
  .text-centered__kicker,
  h2,
  .text-centered__quote,
  .text-centered__quote p,
  .text-centered__content,
  .text-centered__content p,
  .text-centered__cta
) {
  align-self: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

body main .text-centered .text-centered__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

/* “À hauteur d’enfant” uses the normal React foreground (deep brown), not
   the slate secondary-copy color used by the square editorial composition. */
body main .editorial--style-rectangle:is(.theme-lin, .theme-white) .editorial__text,
body main .editorial--style-rectangle:is(.theme-lin, .theme-white) .editorial__text p {
  color: var(--aa-brun) !important;
  opacity: 1 !important;
}

/* Section heading sizes. Large is the validated Home version. Small copies
   the generic h2 used by the “Espaces” section on Espace enfant. */
body main .triptych--spaced.triptych--section-title-large .triptych__head h2 {
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(2.35rem, 4.6vw, 4.45rem) !important;
  font-weight: 300 !important;
  line-height: .98 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}

body main .triptych--spaced.triptych--section-title-small .triptych__head h2 {
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(1.85rem, 3.5vw, 3rem) !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* Image-title sizes are controlled independently. Small copies the titles of
   the three cards in the React “Espaces” section. */
body main .triptych--spaced.triptych--item-titles-large .triptych-card__content h3 {
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(1.45rem, 2vw, 1.95rem) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}

body main .triptych--spaced.triptych--item-titles-small .triptych-card__content h3 {
  margin-bottom: .9rem !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: .82rem !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   V72 — Text centered: authoritative manual lines and true centering
   References:
   - Citation: EspaceEnfant.tsx / “Imaginer un territoire sensible…”
   - Classic: reusable centered heading with editor-authored line breaks.
   ============================================================ */

/* A title line authored in ACF must never be wrapped a second time by the
   browser. The inline-block is shrink-wrapped to its longest authored line,
   then centered by the full-width component rather than by the former 820px
   reading column. Explicit <br> elements remain the only line boundaries. */
body main .text-centered .text-centered__inner {
  max-width: none !important;
  overflow: visible !important;
}

body main .text-centered--type-classic h2 {
  display: inline-block !important;
  align-self: center !important;
  width: auto !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-align: center !important;
}

body main .text-centered--type-quote .text-centered__quote {
  max-width: none !important;
  text-align: center !important;
}

body main .text-centered--type-quote .text-centered__quote p {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-align: center !important;
}

/* ============================================================
   V75 — CTA banner minimal: Audit React title scale
   Reference: Audit.tsx final CTA (“Poser / un regard juste”).
   The component keeps unrestricted editor-authored lines: explicit <br>
   elements are the only permitted line breaks on desktop.
   ============================================================ */

body main .cta-banner--minimal .cta-banner__title {
  display: inline-block !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  font-family: "Cormorant Garamond", var(--aa-font-display), serif !important;
  font-size: clamp(1.85rem, 3.5vw, 3rem) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body main .cta-banner--minimal .cta-banner__content,
body main .cta-banner--minimal .cta-banner__content .aa-rich-text,
body main .cta-banner--minimal .cta-banner__content .aa-rich-text > p {
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}

body main .cta-banner--minimal .cta-banner__content .aa-rich-text > p {
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* ---------- Contact: keep the React reading measures after global no-wrap rules ---------- */
body main .contact-minimal__subtitle,
body main .contact-minimal__location,
body main .contact-minimal__quote,
body main .contact-minimal__text,
body main .contact-minimal__text p {
  width:auto !important;
  white-space:normal !important;
  text-wrap:wrap !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}

body main .contact-minimal__subtitle,
body main .contact-minimal__text,
body main .contact-minimal__text p {
  max-width:36ch !important;
}

body main .contact-minimal__quote {
  max-width:26ch !important;
}



/* ============================================================
   V84 — Journal rubric and article list copied from Journal.tsx
   ============================================================ */
body main .section-number {
  color: var(--aa-or) !important;
  font-family: "Cormorant Garamond", var(--aa-font-display), serif !important;
  font-size: .75rem !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

body main .journal-featured__rubric {
  color: var(--aa-or) !important;
  font-family: "Cormorant Garamond", var(--aa-font-display), serif !important;
  font-size: .75rem !important;
  letter-spacing: .2em !important;
}

body main .journal-list.section {
  padding: 4rem 0 !important;
}

.journal-list__heading {
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.journal-list .journal-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.journal-list .journal-card {
  display: block !important;
  padding: 2.5rem 0 !important;
  border-top: 1px solid rgba(60, 42, 30, .10) !important;
  border-bottom: 0 !important;
}

.journal-list .journal-card__link {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 2rem !important;
  align-items: start !important;
}

.journal-list .journal-card__meta {
  grid-column: 1 / span 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .25rem;
}

.journal-list .journal-card__date {
  color: var(--aa-ardoise) !important;
  font-family: "DM Sans", var(--aa-font-body) !important;
  font-size: .62rem !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  letter-spacing: .1em !important;
}

.journal-list .journal-card__media {
  grid-column: 3 / span 3 !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  overflow: hidden;
  background: var(--aa-or-pale);
}

.journal-list .journal-card__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(.9) sepia(.08);
  transition: transform 1.4s ease;
}

.journal-list .journal-card:hover .journal-card__media img {
  transform: scale(1.035);
}

.journal-list .journal-card__content {
  grid-column: 6 / span 5;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}


.journal-list .journal-card--without-image .journal-card__content {
  grid-column: 3 / span 6;
}

.journal-list .journal-card__title {
  margin: 0 !important;
  color: inherit;
  font-family: "DM Sans", var(--aa-font-body) !important;
  font-size: clamp(.9rem, 1.25vw, 1.08rem) !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.journal-list .journal-card__excerpt {
  max-width: 40ch !important;
  margin: 0 !important;
  color: inherit;
  font-size: .84rem !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  opacity: .7;
}

.journal-list .journal-card__cta {
  width: fit-content;
  margin: .25rem 0 0 !important;
  font-size: .68rem !important;
}

.journal-list:is(.theme-brun, .theme-ardoise, .theme-nuit) .journal-card__date,
.journal-list:is(.theme-brun, .theme-ardoise, .theme-nuit) .journal-card__excerpt {
  color: var(--aa-lin) !important;
}

.journal-list:is(.theme-brun, .theme-ardoise, .theme-nuit) .journal-card {
  border-top-color: rgba(243, 230, 212, .16) !important;
}

.journal-list:is(.theme-brun, .theme-ardoise, .theme-nuit) .journal-card__cta {
  color: var(--aa-lin) !important;
  border-bottom-color: var(--aa-or) !important;
}

@media (min-width: 768px) {
  body main .journal-list.section {
    padding: 6rem 0 !important;
  }
}

@media (max-width: 767px) {
  .journal-list .journal-card__link {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .journal-list .journal-card__meta,
  .journal-list .journal-card__media,
  .journal-list .journal-card__content {
    grid-column: 1 !important;
  }
}

/* ============================================================
   V116 — Portrait fondatrice : titre éditorial optionnel
   Le champ Nom conserve strictement son rendu historique sur la photo.
   ============================================================ */
body #main-content .founder__title {
  position: static !important;
  width: auto !important;
  max-width: 18ch !important;
  margin: 0 0 1.4rem !important;
  color: var(--aa-brun) !important;
  font-family: var(--aa-font-display) !important;
  font-size: clamp(1.9rem, 3.1vw, 3rem) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: .01em !important;
  text-align: left !important;
  white-space: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}