/*
Theme Name: Ingrid Marcille — Le Tirage
Theme URI: https://www.ingridmarcille.com
Author: Atelier Ingrid Marcille
Description: Thème sur-mesure « Le Tirage » pour Ingrid Marcille, architecte d'intérieur & scénographe. Direction éditoriale : blanc pur, accent or, Playfair Display. Tokens et chrome portés depuis la maquette Claude Design.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ingridmarcille
*/

/* =========================================================================
   TOKENS — direction « Le Tirage » figée (palette pur · accent or ·
   Playfair Display · densité airy). Ces valeurs remplacent le :root de
   la maquette (qui était surchargé à l'exécution par le panneau de réglages).
   ========================================================================= */
:root {
  /* Palette — base */
  --noir:   #0A0A08;
  --noir-2: #1a1a17;
  --noir-3: #2a2a25;
  --blanc:  #FFFFFF;

  /* Accent — or */
  --or:      #C9A46A;
  --or-2:    #b08f5a;
  --or-3:    #e6cf9c;
  --or-soft: rgba(201,164,106,.5);
  --accent:  var(--or);

  /* Surfaces papier — palette « pur » */
  --paper:    #FFFFFF;
  --paper-2:  #F4F4F2;
  --ivoire:   #F8F7F4;
  --ivoire-2: #EDEBE6;

  /* Lignes (sur fond sombre, ex. footer / drawer) */
  --line: rgba(245,237,216,.14);

  /* Typographie */
  --serif: 'Playfair Display', 'Palatino', 'Palatino Linotype', 'Hoefler Text', Georgia, serif;
  --sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Densité — figée « airy » */
  --col-max: 1240px;
  --space-unit: 8px;
  --air-pad: 160px;
  --gutter: 40px;

  /* Échelle typographique */
  --t-display: clamp(72px, 9vw, 168px);
  --t-h1:      clamp(48px, 6vw, 96px);
  --t-h2:      clamp(36px, 4.2vw, 64px);
  --t-h3:      28px;
  --t-body:    17px;
  --t-small:   13px;
  --t-eyebrow: 11px;
}

/* =========================================================================
   RESET de base au niveau document (en complément du reset .home-root porté
   ci-dessous depuis la maquette). Garantit fond blanc et typo sur tout le body.
   ========================================================================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga' 1, 'kern' 1;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--or); color: var(--noir); }

/* Wrapper racine du thème : porte les classes attendues par le chrome porté
   (.home-root.v4 .page-root). data-density="airy" sur le wrapper côté PHP. */

/* =========================================================================
   SOCLE PARTAGÉ — porté fidèlement depuis la maquette « Le Tirage »
   (styles.css). Inclut : reset .home-root, utilitaires éditoriaux, reveal,
   parallaxe, boutons, header, navigation mobile, footer, marques, et tout
   le responsive du chrome. Le CSS propre à chaque page sera ajouté avec
   son template.
   ========================================================================= */
/* Reset */
.home-root, .project-root {
  font-family: var(--serif);
  color: var(--noir);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga' 1, 'kern' 1;
  line-height: 1.5;
  /* Designs target desktop; preview iframe may be narrower —
     this keeps composition intact at a horizontal-scroll cost in narrow panes. */
  min-width: 1280px;
}
.home-root *, .project-root * { box-sizing: border-box; }
.home-root img, .project-root img { display: block; max-width: 100%; }

/* V4 home + every site page are fully responsive (they have ≤1100 / ≤720
   handling), so they take no desktop min-width floor — that 1280 floor exists
   only to protect the static V1–V3 art-direction explorations from reflowing.
   Without this, widths 1101–1280px overflowed horizontally before collapsing. */
.home-root.v4, .page-root { min-width: 0; }

/* Generic editorial blocks */
.h-eyebrow {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.h-folio {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--or-2);
}
.h-caption {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--noir-3);
  font-weight: 500;
}
.h-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

/* Filet (hairline rule + optional glyph) */
.filet {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1;
}
.filet .filet-line {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.filet .filet-glyph {
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.06em;
}

/* Reveal — data-reveal hides initially, .is-in shows. JS sets inline styles
   to the visible state so we never depend on CSS transitions completing —
   they're added below purely as a graceful easing in environments that
   actually progress them (some embedded iframes freeze the document
   timeline; in those, the inline styles snap straight to visible). */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms),
              transform .9s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
}
[data-reveal].is-in {
  opacity: 1 !important;
  transform: none !important;
}
[data-reveal="image"] {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: none;
  transition: opacity .7s ease var(--reveal-delay, 0ms),
              clip-path 1.1s cubic-bezier(.65,.05,.05,1) var(--reveal-delay, 0ms);
}
[data-reveal="image"].is-in {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
}

/* Parallax images — wrapper hides overflow, img scales 1.06 */
[data-parallax] {
  overflow: hidden;
}
[data-parallax] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, 0, 0) scale(1.06);
  will-change: transform;
}

/* Buttons / CTAs — shared editorial style */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 18px 26px;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: background .35s ease, color .35s ease;
}
.btn:hover { background: var(--noir); color: var(--ivoire); border-color: var(--noir); }
.btn--gold {
  background: var(--or);
  border-color: var(--or);
  color: var(--noir);
}
.btn--gold:hover { background: var(--noir); color: var(--or); border-color: var(--noir); }
.btn--ghost-light { color: var(--ivoire); }
.btn--ghost-light:hover { background: var(--ivoire); color: var(--noir); border-color: var(--ivoire); }

/* Pill CTA — black capsule, gold dot, white caps. Mirrors the header CTA so
   the discovery/page CTAs reuse the same legible treatment everywhere
   (replaces the low-contrast gold-on-white button). */
.v4-btn-pill {
  display: inline-flex; align-items: center; gap: 13px;
  background: var(--noir); color: var(--blanc);
  border: 0; border-radius: 999px;
  padding: 17px 30px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 500;
  text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.v4-btn-pill:hover { background: var(--accent); color: var(--blanc); }
.v4-btn-pill-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto;
  transition: background .25s ease;
}
.v4-btn-pill:hover .v4-btn-pill-dot { background: var(--blanc); }
/* On dark sections the black pill would vanish — invert to an ivory capsule. */
.v4-btn-pill--on-dark { background: var(--blanc); color: var(--noir); }
.v4-btn-pill--on-dark:hover { background: var(--accent); color: var(--blanc); }
.v4-btn-pill--on-dark .v4-btn-pill-dot { background: var(--accent); }
.v4-btn-pill--on-dark:hover .v4-btn-pill-dot { background: var(--blanc); }

.link-arrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.link-arrow .arrow { display: inline-block; transition: transform .4s ease; }
.link-arrow:hover .arrow { transform: translateX(8px); }

/* Header — shared shell, variation overrides bg/color */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 56px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.site-header .nav-l, .site-header .nav-r {
  display: flex;
  gap: 28px;
  align-items: center;
}
.site-header .nav-r { justify-content: flex-end; }
.site-header a { color: inherit; text-decoration: none; opacity: 0.8; white-space: nowrap; }
.site-header a:hover { opacity: 1; }
.site-header .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  letter-spacing: 0.32em;
  font-weight: 600;
}
.site-header .brand .tag {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: none;
  opacity: 0.7;
}
.header-cta {
  border: 1px solid currentColor;
  padding: 10px 16px;
  font-size: 10px;
}

/* ─────────────────────────────────────────────────────────────────────
   V4 header — shared by the home (.v4-header) and every site page
   (.site-header-v4). Defined globally here so internal pages match the
   home exactly (the home also injects an identical copy via v4_tirage).
   ───────────────────────────────────────────────────────────────────── */
.site-header.v4-header,
.site-header.site-header-v4 {
  background: var(--blanc);
  border-bottom: 1px solid rgba(10,10,8,.12);
  grid-template-columns: auto 1fr auto;
  padding: 20px 56px;
  text-transform: none;
  letter-spacing: normal;
}
.v4-brand {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--sans);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  white-space: nowrap;
  color: var(--noir);
  text-decoration: none;
  opacity: 1;
}
.v4-brand-tag {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--noir-3);
  font-size: 13px;
  padding-left: 14px;
  border-left: 1px solid rgba(10,10,8,.2);
}
.v4-nav {
  display: flex; gap: 32px; justify-self: center;
}
.v4-nav a {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--noir);
  text-decoration: none;
  opacity: 0.85;
  position: relative;
  padding: 4px 0;
  transition: opacity .2s ease;
  white-space: nowrap;
}
.v4-nav a.is-active { opacity: 1; color: var(--accent); }
.v4-nav a:hover { opacity: 1; }
.v4-nav a sup {
  font-size: 8px;
  color: var(--accent);
  margin-left: 2px;
  letter-spacing: 0;
}
.v4-nav a::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .35s ease;
}
.v4-nav a.is-active::after,
.v4-nav a:hover::after { width: 100%; }
.site-header .v4-header-cta {
  display: inline-flex; align-items: center; gap: 10px;
  justify-self: end;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 18px;
  background: var(--noir);
  color: var(--blanc);
  border-radius: 999px;
  transition: background .25s ease;
  white-space: nowrap;
  opacity: 1;
}
.site-header .v4-header-cta:hover { background: var(--accent); color: var(--blanc); }
.v4-header-cta-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,.2);
  animation: v4-pulse 2.2s ease-in-out infinite;
}
@keyframes v4-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,.05); }
}

/* ─────────────────────────────────────────────────────────────────────
   Intermediate header tier (1101–1439px) — the full lock-up (wordmark +
   descriptor + 7-item nav + CTA) needs ~1430px to breathe. Below that, and
   before the hamburger takes over at ≤1100, tighten: drop the descriptor,
   pull the nav gaps in, and shrink the CTA so nothing collides.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 1101px) and (max-width: 1439px) {
  .site-header.v4-header,
  .site-header.site-header-v4 { padding: 20px 32px; }
  .v4-brand-tag { display: none; }
  .v4-nav { gap: 20px; }
  .v4-nav a { font-size: 10px; letter-spacing: 0.12em; }
  .site-header .v4-header-cta {
    gap: 8px; padding: 10px 14px; font-size: 10px; letter-spacing: 0.12em;
  }
}
/* Narrower still inside that tier — give the nav every spare pixel. */
@media (min-width: 1101px) and (max-width: 1219px) {
  .site-header.v4-header,
  .site-header.site-header-v4 { gap: 12px; }
  .v4-nav { gap: 15px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile / tablet navigation — hamburger toggle + full-screen drawer.
   Hidden on desktop; the .mnav wrapper flips to display:contents once the
   header collapses (≤1100px) so the toggle drops into the header grid.
   ───────────────────────────────────────────────────────────────────── */
.mnav { display: none; }

.mnav-toggle {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 2px; margin: 0;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--noir, #0A0A08);
  -webkit-tap-highlight-color: transparent;
}
.mnav-toggle-bars { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; width: 26px; }
.mnav-toggle-bars span {
  display: block; height: 1.5px; width: 100%;
  background: currentColor; transition: transform .3s ease, opacity .3s ease;
}
.mnav-toggle-bars span:nth-child(2) { width: 70%; }
.mnav-toggle:hover .mnav-toggle-bars span { background: var(--accent, #C9A46A); }
.mnav-toggle:hover .mnav-toggle-bars span:nth-child(2) { width: 100%; }
.mnav-toggle-label { font-weight: 500; }

.mnav-scrim {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(10, 10, 8, 0.42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
.mnav-scrim.is-open { opacity: 1; pointer-events: auto; }

.mnav-drawer {
  position: fixed; top: 0; right: 0; z-index: 9600;
  height: 100%; width: min(440px, 88vw);
  background: var(--blanc, #FFFFFF);
  border-left: 1px solid rgba(10, 10, 8, 0.12);
  box-shadow: -40px 0 80px -40px rgba(10, 10, 8, 0.35);
  display: flex; flex-direction: column;
  padding: 26px 34px 34px;
  transform: translateX(102%);
  transition: transform .5s cubic-bezier(.16, .84, .3, 1);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mnav-drawer.is-open { transform: none; }

.mnav-drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 26px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(10, 10, 8, 0.12);
}
.mnav-drawer-brand { display: inline-flex; align-items: center; gap: 11px; }
.mnav-drawer-eyebrow {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--noir-3, #2a2a25);
}
.mnav-close {
  position: relative; width: 34px; height: 34px;
  background: transparent; border: 1px solid rgba(10, 10, 8, 0.2);
  border-radius: 50%; cursor: pointer; flex: none;
  transition: border-color .25s ease, transform .25s ease;
}
.mnav-close:hover { border-color: var(--accent, #C9A46A); transform: rotate(90deg); }
.mnav-close span {
  position: absolute; top: 50%; left: 50%; width: 14px; height: 1.4px;
  background: var(--noir, #0A0A08);
}
.mnav-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mnav-close span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

.mnav-list { display: flex; flex-direction: column; padding: 10px 0; flex: 1; }
.mnav-link {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline; gap: 16px;
  padding: 16px 0;
  color: var(--noir, #0A0A08); text-decoration: none;
  border-bottom: 1px solid rgba(10, 10, 8, 0.08);
  opacity: 0; transform: translateX(18px);
}
.mnav-drawer.is-open .mnav-link {
  opacity: 1; transform: none;
  transition: opacity .5s ease calc(var(--i) * 55ms + 120ms),
              transform .5s cubic-bezier(.16,.84,.3,1) calc(var(--i) * 55ms + 120ms);
}
.mnav-link-n {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em;
  color: var(--accent, #C9A46A); font-feature-settings: "tnum"; padding-top: 6px;
}
.mnav-link-label {
  font-family: var(--serif); font-weight: 400; font-size: 30px;
  line-height: 1.05; letter-spacing: -0.01em;
}
.mnav-link-rule {
  align-self: center; height: 1px; background: var(--accent, #C9A46A);
  width: 0; transition: width .35s ease; justify-self: end; min-width: 0;
}
.mnav-link-arrow {
  font-family: var(--sans); font-size: 18px; color: var(--accent, #C9A46A);
  opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .3s ease;
}
.mnav-link.is-active .mnav-link-label { font-style: italic; color: var(--accent, #C9A46A); }
.mnav-link:hover .mnav-link-label { color: var(--accent, #C9A46A); }
.mnav-link:hover .mnav-link-rule { width: 28px; }
.mnav-link:hover .mnav-link-arrow { opacity: 1; transform: none; }

.mnav-foot { padding-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.mnav-cta {
  display: inline-flex; align-items: center; gap: 11px; align-self: flex-start;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500;
  color: var(--blanc, #fff); background: var(--noir, #0A0A08);
  padding: 16px 22px; text-decoration: none;
  transition: background .25s ease;
}
.mnav-cta:hover { background: var(--accent, #C9A46A); }
.mnav-cta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #C9A46A); }
.mnav-cta:hover .mnav-cta-dot { background: var(--blanc, #fff); }
.mnav-foot-note {
  font-family: var(--serif); font-style: italic; font-size: 14px;
  line-height: 1.6; color: var(--noir-3, #2a2a25);
}

/* Footer */
.site-footer {
  background: var(--noir);
  color: var(--ivoire);
  padding: 100px 56px 40px;
  font-family: var(--sans);
}
.site-footer .ft-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 64px;
  max-width: var(--col-max);
  margin: 0 auto;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(245, 237, 216, 0.18);
}
.site-footer h4 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--or);
  margin: 0 0 22px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { font-size: 13px; line-height: 2; }
.site-footer li a { color: var(--ivoire); text-decoration: none; opacity: 0.75; }
.site-footer li a:hover { opacity: 1; }
.site-footer .ft-baseline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--col-max);
  margin: 0 auto;
  padding-top: 32px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}
.site-footer .ft-sig {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--or);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 22px;
  max-width: 380px;
  line-height: 1.4;
}

/* Act marker — large numeral used as section punctuation */
.act-marker {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(80px, 8vw, 140px);
  line-height: 1;
  color: var(--or);
}
.act-tag {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--or);
}

/* Discovery CTA strip — used at end of every variation */
.discovery {
  background: var(--noir);
  color: var(--ivoire);
  padding: 120px 56px;
  text-align: center;
}
.discovery .eyebrow { color: var(--or); margin-bottom: 24px; }
.discovery h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 1.05;
  margin: 0 auto 28px;
  max-width: 18ch;
  font-style: italic;
}
.discovery p {
  max-width: 56ch;
  margin: 0 auto 44px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(245, 237, 216, 0.78);
  font-family: var(--serif);
}

/* Brand wordmark — uses the SVG as a CSS mask so it inherits color from
   `color`. Lets us drop the logo on white headers AND dark footers cleanly.
   The mark's intrinsic ratio is 140.04 : 17.2 — height derives from width so
   every placement stays in proportion regardless of the --wordmark-w given. */
.brand-wordmark {
  display: inline-block;
  width: var(--wordmark-w, 170px);
  aspect-ratio: 140.04 / 17.2;
  height: auto;
  background-color: currentColor;
  -webkit-mask: url('assets/logo-IM.svg') no-repeat center / contain;
          mask: url('assets/logo-IM.svg') no-repeat center / contain;
  flex: 0 0 auto;
}
/* Monogram mark — same masking trick, square-ish "im" lockup. */
.brand-mono {
  display: inline-block;
  width: var(--mono-w, 30px);
  aspect-ratio: 29.75 / 21.9;
  height: auto;
  background-color: currentColor;
  -webkit-mask: url('assets/IM-monogram.svg') no-repeat center / contain;
          mask: url('assets/IM-monogram.svg') no-repeat center / contain;
  flex: 0 0 auto;
}
/* Inline brand marks (SVG) — recolor via currentColor, render in capture/print/PDF. */
.brand-wordmark-inline, .brand-mono-inline { color: inherit; }
.brand-wordmark-inline svg, .brand-mono-inline svg { display: block; width: 100%; height: auto; }

/* Official baseline lockup — Jost, spaced caps, ampersand in or. */
.brand-baseline {
  font-family: 'Jost', var(--sans, sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.brand-baseline .amp { color: var(--accent); font-weight: 500; }
/* Footer lockup: baseline sits under the wordmark, hairline above. */
.ft-baseline-lockup {
  display: block;
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.24em;
  opacity: 0.7;
}
.col-max { max-width: var(--col-max); margin: 0 auto; }.col-narrow { max-width: 780px; margin: 0 auto; }
.pad-x { padding-left: 56px; padding-right: 56px; }
.serif-italic { font-style: italic; font-family: var(--serif); }
.center { text-align: center; }

/* ──────────────────────────────────────────────────────────────────────
   RESPONSIVE — tablet (≤ 1100px) + mobile (≤ 720px)
   Targets V4 / page-shell layouts (the production direction).
   V1-V3 stay at their min-width 1280 (art-direction exploration only).
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .home-root.v4, .home-root.v4 *,
  .page-root, .page-root * { min-width: 0; }
  .home-root.v4 { min-width: 0; }

  /* Header — collapse to brand + hamburger drawer */
  .site-header.v4-header, .site-header.site-header-v4 {
    grid-template-columns: 1fr auto;
    padding: 18px 32px;
    gap: 16px;
  }
  .site-header.v4-header .v4-nav,
  .site-header.site-header-v4 .v4-nav { display: none !important; }
  .site-header.v4-header .v4-header-cta,
  .site-header.site-header-v4 .v4-header-cta { display: none !important; }
  .mnav { display: contents; }
  .v4-brand-tag { display: none; }

  /* V4 Hero */
  .v4-hero { padding: 48px 32px 64px; }
  .v4-hero-meta { margin-bottom: 32px; }
  .v4-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .v4-hero-title { font-size: clamp(56px, 8.6vw, 96px); }
  .v4-hero-img { aspect-ratio: 4 / 3; max-height: 56vh; }
  .v4-hero-stamp { position: static; margin-top: 20px; }
  .v4-hero-actions { padding-top: 48px; gap: 24px; }
  .v4-hero-loc { margin-left: 0; flex-basis: 100%; }

  /* V4 Manifesto */
  .v4-manifesto { padding: 80px 32px; }
  .v4-manifesto-grid { grid-template-columns: 1fr; gap: 32px; }

  /* V4 Univers */
  .v4-univers-grid { grid-template-columns: repeat(2, 1fr); padding: 0 32px; }

  /* V4 Distinct */
  .v4-distinct { padding: 80px 32px; }
  .v4-distinct-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }

  /* V4 Projets */
  .v4-feature { grid-template-columns: 1fr; padding: 0 32px; gap: 24px; }
  .v4-projets-grid { grid-template-columns: repeat(2, 1fr); padding: 0 32px; gap: 32px; }

  /* V4 Discovery */
  .v4-discovery { padding: 80px 32px; }

  /* PageMast / page chrome */
  .page-mast { padding: 56px 32px 72px; }
  .page-mast-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .page-mast-title { font-size: clamp(48px, 8vw, 96px); }
  .page-mast-img { aspect-ratio: 4 / 3; }
  .page-section-head {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 32px;
    margin-bottom: 40px;
  }

  /* Page CTA */
  .page-cta { padding: 80px 32px; }
  .page-cta-inner { grid-template-columns: 1fr; gap: 28px; }

  /* Prestations list */
  .prest-row { padding: 48px 32px; }
  .prest-row-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .prest-row-img { aspect-ratio: 16 / 10; max-width: 100%; }
  .prest-row-num { display: none; }

  /* Prestations page */
  .prest-what, .prest-method, .prest-example, .prest-faq { padding: 80px 32px; }
  .prest-method-list li { grid-template-columns: 80px 1fr; gap: 24px; padding: 28px 0; }
  .prest-example-grid { grid-template-columns: 1fr; gap: 32px; }
  .prest-faq-item summary { font-size: 18px; }

  /* Lieux page */
  .lieu-intro, .lieu-zones, .lieu-specs, .lieu-projets { padding: 80px 32px; }
  .lieu-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .lieu-zones-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; }
  .lieu-specs-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .lieu-projets-grid { grid-template-columns: 1fr; gap: 48px; }

  /* À propos */
  .ap-story, .ap-method, .ap-atelier, .ap-press { padding: 80px 32px; }
  .ap-story-grid { grid-template-columns: 1fr; gap: 24px; }
  .ap-method-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ap-atelier-grid { grid-template-columns: 1fr; gap: 32px; }
  .ap-press-row { grid-template-columns: 70px 160px 1fr 30px; gap: 20px; }

  /* Contact */
  .ct-how, .ct-form, .ct-info { padding: 80px 32px; }
  .ct-info-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 40px; }

  /* Footer */
  .site-footer { padding: 64px 32px 32px; }
  .site-footer .ft-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 40px; }
}

@media (max-width: 720px) {
  /* Bigger reset: target ANY of the home-root variations + page-root
     so V1-V3 also gracefully degrade rather than horizontal-scroll. */
  .home-root, .home-root *, .project-root, .project-root * { min-width: 0; }
  .home-root, .project-root { min-width: 0; }

  /* Header — brand + hamburger on one row (drawer handles nav) */
  .site-header, .site-header.v4-header, .site-header.site-header-v4 {
    grid-template-columns: 1fr auto;
    padding: 16px 20px;
    gap: 12px;
  }
  .site-header .nav-l, .site-header .nav-r { display: none; }
  .site-header .brand { letter-spacing: 0.2em; font-size: 11px; }
  .mnav-drawer { padding: 22px 24px 28px; }
  .mnav-link-label { font-size: 27px; }

  /* Variation switcher pill — make compact on mobile */
  .vsw-host { bottom: 14px; }
  .vsw-center { min-width: 180px; padding: 4px 14px; }
  .vsw-label { font-size: 15px; }
  .vsw-sub { display: none; }
  .vsw-menu { width: calc(100vw - 28px); left: 14px; transform: none; }

  /* Headlines scale down */
  .v4-hero-title, .page-mast-title { font-size: clamp(44px, 11vw, 64px) !important; line-height: 0.96 !important; }
  .v4-section-h2, .page-section-h2 { font-size: clamp(34px, 8vw, 52px) !important; }

  /* V4 sections */
  .v4-hero { padding: 32px 20px 56px; }
  .v4-hero-meta { flex-direction: column; align-items: flex-start; gap: 14px; }
  .v4-hero-tag { font-size: 16px; }
  .v4-univers-grid { grid-template-columns: 1fr; gap: 48px; padding: 0 20px; }
  .v4-distinct-grid { grid-template-columns: 1fr; gap: 32px; }
  .v4-projets-grid { grid-template-columns: 1fr; gap: 32px; padding: 0 20px; }
  .v4-discovery { padding: 56px 20px; }
  .v4-discovery h2 { font-size: clamp(34px, 8vw, 52px); }
  .v4-manifesto { padding: 56px 20px; }
  .v4-manifesto-text h2 { font-size: clamp(30px, 7vw, 46px); }
  .v4-manifesto-text p { font-size: 17px; }

  /* PageMast etc */
  .page-mast { padding: 32px 20px 48px; }
  .page-mast-tagline { font-size: 18px; }
  .page-mast-spec { grid-template-columns: 1fr; gap: 12px; }
  .page-section-head { padding: 0 20px; }
  .page-cta { padding: 56px 20px; }
  .page-cta-title { font-size: clamp(28px, 7vw, 44px); }

  /* Prestations */
  .prest-list { padding: 32px 0 0; }
  .prest-row { padding: 40px 20px; }
  .prest-row-text h3 { font-size: clamp(30px, 7vw, 44px); }
  .prest-row-spec { flex-direction: column; gap: 12px; }
  .prest-what, .prest-method, .prest-example, .prest-faq { padding: 56px 20px; }
  .prest-method-list li { grid-template-columns: 60px 1fr; gap: 16px; padding: 24px 0; }
  .prest-method-num .act-marker { font-size: 40px; }
  .prest-method-body h4 { font-size: 22px; }
  .prest-faq-item summary { padding: 18px 0; font-size: 17px; }
  .prest-next { padding: 56px 20px; }
  .prest-next-title { font-size: clamp(24px, 6vw, 36px); gap: 12px; }

  /* Lieux */
  .lieu-intro, .lieu-zones, .lieu-specs, .lieu-projets { padding: 56px 20px; }
  .lieu-zones-grid { grid-template-columns: 1fr; gap: 32px; }
  .lieu-specs-grid { grid-template-columns: 1fr; gap: 32px; }
  .lieu-cross { padding: 48px 20px; }
  .lieu-cross-title { font-size: clamp(22px, 6vw, 36px); }

  /* À propos */
  .ap-story, .ap-method, .ap-atelier, .ap-press { padding: 56px 20px; }
  .ap-method-grid { grid-template-columns: 1fr; gap: 28px; }
  .ap-press-row {
    grid-template-columns: 56px 1fr 24px;
    grid-template-rows: auto auto;
    gap: 4px 14px;
    padding: 16px 0;
  }
  .ap-press-src { grid-column: 1 / -1; grid-row: 2; font-size: 10px; }
  .ap-press-t { font-size: 17px; }

  /* Contact */
  .ct-how, .ct-form, .ct-info { padding: 56px 20px; }
  .ct-how-list li { grid-template-columns: 56px 1fr; gap: 14px; padding: 24px 0; }
  .ct-how-num .act-marker { font-size: 40px; }
  .ct-how-list h4 { font-size: 22px; }
  .ct-form-grid { grid-template-columns: 1fr; gap: 24px; }
  .ct-submit { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ct-info-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .ct-info-big { font-size: 19px; }

  /* Footer */
  .site-footer { padding: 48px 20px 24px; }
  .site-footer .ft-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .site-footer .ft-baseline { flex-direction: column; gap: 12px; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE TWEAKS — driven by <html data-menu> / <html data-mtitle> and the
   per-root data-density. Set from the Tweaks panel (or ?menu=/?mt=/?dens=).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Mobile headline scale ───────────────────────────────────────────── */
html[data-mtitle="compact"]  { --m-title-scale: 0.86; }
html[data-mtitle="standard"] { --m-title-scale: 1; }
html[data-mtitle="genereux"] { --m-title-scale: 1.18; }

@media (max-width: 720px) {
  .v4-hero-title, .page-mast-title {
    font-size: calc(clamp(40px, 11vw, 64px) * var(--m-title-scale, 1)) !important;
    line-height: 0.96 !important;
  }
  .v4-section-h2, .page-section-h2 {
    font-size: calc(clamp(32px, 8vw, 52px) * var(--m-title-scale, 1)) !important;
  }
  .page-cta-title, .v4-discovery h2, .discovery h2 {
    font-size: calc(clamp(27px, 7vw, 44px) * var(--m-title-scale, 1)) !important;
  }
}

/* ── Mobile density → section rhythm ─────────────────────────────────── */
@media (max-width: 720px) {
  .home-root[data-density="airy"],    .page-root[data-density="airy"],    .project-root[data-density="airy"]    { --m-sec-y: 66px; }
  .home-root[data-density="regular"], .page-root[data-density="regular"], .project-root[data-density="regular"] { --m-sec-y: 50px; }
  .home-root[data-density="dense"],   .page-root[data-density="dense"],   .project-root[data-density="dense"]   { --m-sec-y: 36px; }

  .v4-hero, .v4-manifesto, .v4-distinct, .v4-discovery,
  .page-mast, .page-cta,
  .prest-row, .prest-what, .prest-method, .prest-example, .prest-faq, .prest-next,
  .lieu-intro, .lieu-zones, .lieu-specs, .lieu-projets, .lieu-cross,
  .ap-story, .ap-method, .ap-atelier, .ap-press,
  .ct-how, .ct-form, .ct-info,
  .pjx-grid-wrap, .jr-feature-wrap, .art-body,
  .sg-intro, .sg-pillars, .sg-bridge, .sg-univers {
    padding-top: var(--m-sec-y, 56px) !important;
    padding-bottom: var(--m-sec-y, 56px) !important;
  }
}

/* ── Mobile menu styles ──────────────────────────────────────────────── */
/* drawer (default) is defined in the base .mnav-drawer rules above. */

/* Overlay — full-screen fade, content in a centered column, no scrim */
html[data-menu="overlay"] .mnav-scrim { display: none; }
html[data-menu="overlay"] .mnav-drawer {
  width: 100%; max-width: 100%; border-left: 0;
  box-shadow: none; padding-left: 0; padding-right: 0;
  transform: none; opacity: 0; pointer-events: none;
  transition: opacity .42s ease;
}
html[data-menu="overlay"] .mnav-drawer.is-open { opacity: 1; pointer-events: auto; }
html[data-menu="overlay"] .mnav-drawer-top,
html[data-menu="overlay"] .mnav-list,
html[data-menu="overlay"] .mnav-foot {
  width: min(520px, 86vw); margin-left: auto; margin-right: auto;
}
html[data-menu="overlay"] .mnav-list { justify-content: center; flex: 0 1 auto; }
html[data-menu="overlay"] .mnav-link-label { font-size: 34px; }

/* Sheet — drops from the top, full width, auto height */
html[data-menu="sheet"] .mnav-drawer {
  top: 0; right: 0; left: 0; width: 100%; max-width: 100%;
  height: auto; max-height: 92vh;
  border-left: 0; border-bottom: 1px solid rgba(10, 10, 8, 0.12);
  box-shadow: 0 40px 80px -40px rgba(10, 10, 8, 0.35);
  transform: translateY(-102%);
}
html[data-menu="sheet"] .mnav-drawer.is-open { transform: none; }

/* ═══════════════════════════════════════════════════════════════════════
   AUTHORITATIVE RESPONSIVE COLLAPSES
   Each page's base grid CSS is injected by React as a <style> in <body>,
   which loads AFTER this stylesheet (in <head>) — so at equal specificity
   the desktop 2-column rule would win and blocks would never stack. These
   !important rules guarantee the tablet/mobile collapse regardless.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tablet (≤1100) — text + photo "split" blocks go to a single column so the
   prose column is never squeezed into an illegible width. */
@media (max-width: 1100px) {
  .v4-hero-grid,
  .v4-feature,
  .v4-manifesto-grid,
  .prest-example-grid,
  .ap-story-grid,
  .ap-atelier-grid,
  .lieu-intro-grid,
  .jr-feature,
  .sg-intro-grid,
  .sg-bridge-grid,
  .pj-mast-grid {
    grid-template-columns: 1fr !important;
  }

  /* Editorial / card grids cap at two-up on tablet (never 3–4). */
  .v4-univers-grid,
  .v4-distinct-grid,
  .v4-projets-grid,
  .lieu-zones-grid,
  .ap-method-grid,
  .ct-info-grid,
  .sg-pillars-grid,
  .jr-grid,
  .pj-next-grid,
  .pjx-grid,
  .pj-fig-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile (≤720) — everything to a single column. */
@media (max-width: 720px) {
  .v4-univers-grid,
  .v4-distinct-grid,
  .v4-projets-grid,
  .lieu-zones-grid,
  .lieu-specs-grid,
  .ap-method-grid,
  .ct-info-grid,
  .sg-pillars-grid,
  .jr-grid,
  .pj-next-grid,
  .pjx-grid,
  .pj-fig-row {
    grid-template-columns: 1fr !important;
  }
}

/* When a text+photo split is stacked (≤1100), the photo must fill the full
   column width — otherwise a height-capped image shrinks and leaves an
   awkward empty band to its right beside the full-width text. */
@media (max-width: 1100px) {
  .v4-hero-img {
    width: 100% !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   STACKED-BLOCK PASS — every image+text / label+content split on every page
   collapses to ONE column on tablet & mobile, and the gap left between the
   two stacked halves is tightened so a stacked block never opens a tall
   empty band between its photo and its prose.
   (Fixes: "tous les blocs sur 1 colonne" + "beaucoup d'espace entre les 2
   contenus".) Kept last so it wins the cascade over the page-injected CSS.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Section heads (eyebrow/filet column + heading) — were never collapsed.
   Drop to one column and pull the heading up tight under its label. ── */
@media (max-width: 1100px) {
  .v4-section-head,
  .page-section-head,
  .page-cta-inner {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: start !important;
  }
}

/* ── Every text+photo split — tighten the stacked vertical gap (tablet). ── */
@media (max-width: 1100px) {
  .v4-hero-grid,
  .v4-feature,
  .v4-manifesto-grid,
  .prest-example-grid,
  .prest-row-inner,
  .ap-story-grid,
  .ap-atelier-grid,
  .lieu-intro-grid,
  .jr-feature,
  .sg-intro-grid,
  .sg-bridge-grid,
  .pj-mast-grid,
  .page-mast-grid {
    gap: 28px !important;
  }
}

/* ── Phones — belt-and-braces single column on any of these splits, with the
   gap pulled in a touch further. ── */
@media (max-width: 720px) {
  .v4-section-head,
  .page-section-head,
  .page-cta-inner,
  .v4-hero-grid,
  .v4-feature,
  .v4-manifesto-grid,
  .prest-example-grid,
  .prest-row-inner,
  .ap-story-grid,
  .ap-atelier-grid,
  .lieu-intro-grid,
  .lieu-projets-grid,
  .jr-feature,
  .sg-intro-grid,
  .sg-bridge-grid,
  .sg-univers-grid,
  .pj-mast-grid,
  .pj-process-grid,
  .page-mast-grid {
    grid-template-columns: 1fr !important;
  }
  .v4-section-head,
  .page-section-head,
  .page-cta-inner {
    gap: 14px !important;
  }
  .v4-hero-grid,
  .v4-feature,
  .v4-manifesto-grid,
  .prest-example-grid,
  .prest-row-inner,
  .ap-story-grid,
  .ap-atelier-grid,
  .lieu-intro-grid,
  .jr-feature,
  .sg-intro-grid,
  .sg-bridge-grid,
  .pj-mast-grid,
  .page-mast-grid {
    gap: 24px !important;
  }
}

/* ── Number + text micro-layouts — the numeral must sit ABOVE the text on a
   phone, never in a cramped column beside it. (Fix: "chiffre + texte sur 1
   colonne et non 2".) These were also being beaten by the page-injected
   desktop CSS, so they need !important. ── */
@media (max-width: 1100px) {
  /* Numbered step lists (méthode / déroulé) stack on tablet & phone. */
  .prest-method-list li,
  .ct-how-list li {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .prest-method-num,
  .ct-how-num { margin-bottom: 2px; }
}
@media (max-width: 720px) {
  /* Project-card meta (numeral + title + caption) on the home & indexes. */
  .v4-projet-meta,
  .pcard-meta {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    align-items: start !important;
  }
  .v4-projet-meta .h-caption { grid-column: 1 !important; }
  /* Keep the act-marker numerals from eating the row on phones. */
  .prest-method-num .act-marker,
  .ct-how-num .act-marker { font-size: 34px; }
}


/* =========================================================================
   CHROME DE PAGE PARTAGÉ — porté depuis pages_shared.jsx (PageShell) :
   page-mast, section-head, CTA de page, bloc SEO. Utilisé par tous les
   templates de page.
   ========================================================================= */
.page-root { background: var(--blanc); color: var(--noir); min-height: 100vh; }

/* Site header — styled globally in styles.css (single source, shared by the
   home .v4-header and every page .site-header-v4), so the responsive header
   tiers there are not shadowed by a higher-specificity duplicate here. */

/* Page mast */
.page-mast {
  padding: 80px 56px 96px;
  background: var(--blanc);
}
.page-mast-grid {
  display: grid;
  grid-template-columns: 280px 1fr 1fr;
  gap: 64px;
  max-width: 1500px;
  margin: 0 auto;
  align-items: end;
}
.page-mast-grid:has(.page-mast-img) {
  grid-template-columns: 280px 1.2fr 1fr;
}
.page-mast-meta {
  display: flex; flex-direction: column; gap: 18px;
  padding-bottom: 8px;
}
.page-mast-kicker {
  color: var(--accent);
  margin-top: 4px;
}
.page-mast-text { padding-bottom: 8px; }
.page-mast-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 7vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  color: var(--noir);
}
.page-mast-title em { color: var(--accent); font-style: italic; }
.page-mast-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--accent);
  margin: 0 0 36px;
  max-width: 36ch;
}
.page-mast-spec {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  border-top: 1px solid rgba(10,10,8,.15);
  padding-top: 22px;
}
.page-mast-spec li {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--noir);
  line-height: 1.4;
}
.page-mast-spec li span {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  font-weight: 500;
}
.page-mast-img {
  aspect-ratio: 4 / 5;
  align-self: stretch;
}

/* Page section heads */
.page-section-head {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  padding: 0 56px;
  max-width: 1500px;
  margin: 0 auto 64px;
  align-items: end;
}
.page-section-meta { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }
.page-section-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 4.6vw, 76px);
  line-height: 0.98;
  margin: 0 0 22px;
  letter-spacing: -0.02em;
}
.page-section-h2 em { color: var(--accent); font-style: italic; }
.page-section-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--noir-2);
  margin: 0;
  max-width: 52ch;
}

/* Page CTA (light variant on white, dark variant on noir) */
.page-cta {
  background: var(--blanc);
  color: var(--noir);
  padding: var(--air-pad) 56px;
  border-top: 1px solid rgba(10,10,8,.1);
}
.page-cta--dark { background: var(--noir); color: var(--ivoire); border-top: 0; }
.page-cta-inner {
  max-width: 920px; margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: end;
}
.page-cta-eyebrow { color: var(--accent); }
.page-cta--dark .page-cta-eyebrow { color: var(--accent); }
.page-cta-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 0.98;
  margin: 0 0 22px;
  letter-spacing: -0.015em;
}
.page-cta-title em { color: var(--accent); font-style: italic; }
.page-cta p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--noir-2);
  margin: 0 0 28px;
  max-width: 54ch;
}
.page-cta--dark p { color: rgba(245,237,216,.78); }

/* SEO brief — discreet handoff block above the CTA */
.seo-brief {
  background: var(--blanc);
  padding: 0 56px 96px;
}
.seo-brief-box {
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid rgba(10,10,8,.14);
  background: var(--paper-2, #F4F4F2);
}
.seo-brief-box summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
}
.seo-brief-box summary::-webkit-details-marker { display: none; }
.seo-brief-box summary .h-eyebrow { color: var(--accent); }
.seo-brief-toggle {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  transition: transform .3s ease;
}
.seo-brief-box[open] .seo-brief-toggle { transform: rotate(45deg); }
.seo-brief-grid {
  border-top: 1px solid rgba(10,10,8,.12);
  padding: 8px 28px 24px;
}
.seo-brief-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(10,10,8,.08);
  align-items: baseline;
}
.seo-brief-row:last-child { border-bottom: 0; }
.seo-brief-k {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--noir-3);
  font-weight: 600;
}
.seo-brief-k em { font-style: normal; color: var(--or-2); letter-spacing: 0.04em; }
.seo-brief-v {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--noir);
}
.seo-brief-v b { color: var(--accent); font-weight: 400; font-style: italic; }
.seo-brief-url {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--or-2);
}
@media (max-width: 1100px) {
  .seo-brief { padding: 0 32px 72px; }
  .seo-brief-row { grid-template-columns: 1fr; gap: 6px; }
}


/* =========================================================================
   ACCUEIL « Le Tirage » — porté depuis v4_tirage.jsx. Le responsive de
   ces sections est déjà couvert par les media queries du socle ci-dessus.
   ========================================================================= */
.v4 {
  background: var(--blanc);
  color: var(--noir);
}

/* HEADER + mobile nav — owned globally by styles.css (single source,
   so responsive header tiers are not shadowed by this injected copy). */

/* HERO */
.v4-hero {
  padding: 64px 56px 96px;
  background: var(--blanc);
}
.v4-hero-meta {
  display: flex; align-items: center; gap: 32px;
  max-width: 1500px; margin: 0 auto 56px;
}
.v4-hero-meta .h-eyebrow {
  color: var(--noir);
  white-space: nowrap;
}
.v4-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  max-width: 1500px;
  margin: 0 auto 56px;
  align-items: center;
}
.v4-hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 6.6vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 40px;
  color: var(--noir);
}
.v4-hero-title .line { display: block; }
.v4-hero-title .line.italic { font-style: italic; padding-left: 8%; }
.v4-hero-title .line.accent {
  color: var(--accent);
  font-style: italic;
  padding-left: 16%;
}
.v4-hero-tag {
  display: flex; gap: 18px; align-items: flex-start;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--noir-2);
  max-width: 44ch;
}
.v4-hero-tag em { font-style: italic; color: var(--accent); }
.v4-hero-tag .dot {
  flex: 0 0 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 11px;
}
.v4-hero-img {
  aspect-ratio: 4 / 5;
  position: relative;
}
.v4-hero-stamp {
  position: absolute; bottom: -52px; left: 0;
  display: flex; gap: 18px; align-items: baseline;
}
.v4-hero-actions {
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  max-width: 1500px; margin: 0 auto;
  padding-top: 88px;
  border-top: 1px solid rgba(10,10,8,.12);
}
.v4-hero-loc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--noir-3);
  margin-left: auto;
}
.v4-hero-loc .sep { color: var(--accent); padding: 0 8px; }

/* SECTION HEADS */
.v4-section-head {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  padding: 0 56px;
  max-width: 1500px;
  margin: 0 auto 80px;
  align-items: end;
}
.v4-section-meta { display: flex; flex-direction: column; gap: 18px; }
.v4-section-meta .h-eyebrow { color: var(--noir); }
.v4-section-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 5.6vw, 92px);
  line-height: 0.96;
  margin: 0;
  letter-spacing: -0.02em;
}
.v4-section-h2 em { color: var(--accent); font-style: italic; }

/* MANIFESTO */
.v4-manifesto {
  background: var(--accent);
  color: var(--blanc);
  padding: var(--air-pad) 56px;
}
.v4-manifesto-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  max-width: 1500px;
  margin: 0 auto;
  align-items: start;
}
.v4-manifesto-side .act-tag { color: var(--blanc); opacity: 0.9; }
.v4-manifesto-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4.8vw, 76px);
  line-height: 1.04;
  margin: 0 0 40px;
  letter-spacing: -0.01em;
  color: var(--blanc);
}
.v4-manifesto-text h2 em { font-style: italic; opacity: 0.85; }
.v4-manifesto-text p {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
  color: rgba(255,255,255,.92);
}
.v4-manifesto-text p em {
  font-style: italic;
  color: var(--blanc);
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 2px;
}

/* UNIVERS */
.v4-univers { padding: var(--air-pad) 0; background: var(--blanc); }
.v4-univers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding: 0 56px;
  max-width: 1500px;
  margin: 0 auto;
}
.v4-univ {
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
}
.v4-univ-img { aspect-ratio: 4 / 5; }
.v4-univ-num {
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 64px;
  background: var(--accent);
  color: var(--blanc);
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.v4-univ h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.005em;
}
.v4-univ-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--accent);
  margin: 0;
}
.v4-univ-body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--noir-2);
  margin: 0;
}

/* DISTINCT — noir */
.v4-distinct {
  background: var(--noir);
  color: var(--ivoire-2);
  padding: var(--air-pad) 56px;
}
.v4-distinct-head {
  max-width: 1500px; margin: 0 auto 80px;
}
.v4-distinct-head .act-tag { display: block; margin-bottom: 18px; }
.v4-distinct-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 5.6vw, 92px);
  line-height: 0.98;
  margin: 0;
  color: var(--blanc);
  letter-spacing: -0.015em;
}
.v4-distinct-head h2 em { color: var(--accent); font-style: italic; }
.v4-distinct-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px 40px;
  max-width: 1500px; margin: 0 auto;
}
.v4-distinct-cell { display: flex; flex-direction: column; gap: 18px; }
.v4-distinct-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 72px;
  line-height: 0.9;
  color: var(--accent);
  display: inline-block;
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 14px;
  margin-bottom: 4px;
}
.v4-distinct-cell h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--blanc);
  letter-spacing: -0.005em;
}
.v4-distinct-cell p {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  margin: 0;
}

/* PROJETS */
.v4-projets { padding: var(--air-pad) 0; background: var(--blanc); }
.v4-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  padding: 0 56px;
  max-width: 1500px;
  margin: 0 auto 80px;
  align-items: end;
  text-decoration: none;
  color: inherit;
}
.v4-feature-img { aspect-ratio: 16 / 11; }
.v4-feature-meta { padding-bottom: 24px; }
.v4-tag-pill {
  display: inline-block;
  padding: 6px 14px;
  background: var(--accent);
  color: var(--blanc);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 22px;
  border-radius: 999px;
}
.v4-feature-meta h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.v4-feature-spec {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  border-top: 1px solid rgba(10,10,8,.15);
  border-bottom: 1px solid rgba(10,10,8,.15);
  padding: 22px 0;
}
.v4-feature-spec li {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--noir);
}
.v4-feature-spec li span {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  font-weight: 500;
}
.v4-projets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 0 56px;
  max-width: 1500px;
  margin: 0 auto;
}
.v4-projet {
  display: flex; flex-direction: column; gap: 18px;
  text-decoration: none; color: inherit;
}
.v4-projet-img { aspect-ratio: 4 / 3; }
.v4-projet-meta {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: baseline;
}
.v4-projet-meta h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.v4-projet-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
}
.v4-projet-meta .h-caption {
  grid-column: 2;
  color: var(--noir-3);
}

/* DISCOVERY */
.v4-discovery {
  background: var(--accent);
  color: var(--blanc);
  padding: var(--air-pad) 56px;
  text-align: center;
}
.v4-discovery-inner {
  max-width: 880px;
  margin: 0 auto;
}
.v4-discovery h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 5.4vw, 88px);
  line-height: 1.0;
  margin: 22px 0 28px;
  color: var(--blanc);
  letter-spacing: -0.015em;
}
.v4-discovery h2 em { font-style: italic; opacity: 0.88; }
.v4-discovery p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
  margin: 0 auto 40px;
  max-width: 56ch;
}

/* Buttons */
.v4-btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--blanc);
}
.v4-btn-accent:hover { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.v4-btn-on-accent {
  background: var(--blanc);
  border-color: var(--blanc);
  color: var(--accent);
}
.v4-btn-on-accent:hover { background: var(--noir); border-color: var(--noir); color: var(--blanc); }

.v4-link { color: var(--accent); border-bottom-color: var(--accent); }
.v4-link:hover { color: var(--noir); border-bottom-color: var(--noir); }


/* =========================================================================
   PAGE PROJET (étude de cas) — porté depuis project_template.jsx
   ========================================================================= */
.project-root, .page-root .pj-mast { background: var(--blanc); }

.pj-back {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--noir-3); text-decoration: none;
  padding: 32px 56px 0; max-width: 1500px; margin: 0 auto; width: 100%;
}
.pj-back .arrow { color: var(--accent); transition: transform .3s ease; }
.pj-back:hover { color: var(--noir); }
.pj-back:hover .arrow { transform: translateX(-6px); }

.pj-mast { padding: 24px 56px 0; }
.pj-mast-grid {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px;
  max-width: 1500px; margin: 0 auto; align-items: end;
}
.pj-mast-meta { padding-bottom: 24px; }
.pj-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 5.6vw, 88px); line-height: 0.96;
  margin: 20px 0 28px; letter-spacing: -0.015em;
}
.pj-tagline {
  font-family: var(--serif); font-style: italic; font-size: 22px;
  line-height: 1.45; color: var(--accent); margin: 0 0 36px; max-width: 38ch;
}
.pj-spec {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px;
  border-top: 1px solid var(--accent); padding-top: 22px;
}
.pj-spec li { font-family: var(--serif); font-size: 17px; color: var(--noir); }
.pj-spec li span {
  display: block; font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 4px; font-weight: 500;
}
.pj-mast-img { aspect-ratio: 4 / 5; }

.pj-intro { padding: var(--air-pad) 56px; }
.pj-section-head { max-width: 1400px; margin: 0 auto 56px; }
.pj-h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 72px); line-height: 1.0;
  margin: 18px 0 36px; letter-spacing: -0.01em;
}
.pj-h2 em { color: var(--accent); font-style: italic; }
.pj-intro p {
  font-family: var(--serif); font-size: 19px; line-height: 1.65;
  color: var(--noir-2); margin: 0 0 22px;
}

.pj-gallery { padding: 32px 56px var(--air-pad); }
.pj-fig { margin: 0 auto 64px; max-width: 1400px; display: flex; flex-direction: column; gap: 16px; }
.pj-fig-wide .pj-fig-img { aspect-ratio: 16 / 9; }
.pj-fig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1400px; margin: 0 auto 64px; }
.pj-fig-row .pj-fig { margin: 0; }
.pj-fig-row .pj-fig-img { aspect-ratio: 4 / 5; }
.pj-fig figcaption { display: flex; gap: 16px; align-items: baseline; }

.pj-quote { padding: var(--air-pad) 56px; background: var(--ivoire); }
.pj-quote blockquote { margin: 32px 0 0; font-family: var(--serif); }
.pj-quote blockquote p {
  font-size: clamp(28px, 3vw, 44px); line-height: 1.25; font-style: italic;
  margin: 0 0 24px; color: var(--noir);
}
.pj-quote blockquote footer { display: flex; justify-content: center; gap: 24px; color: var(--noir-3); }

.pj-process { padding: var(--air-pad) 56px; }
.pj-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; max-width: 1400px; margin: 0 auto; }
.pj-process-step { display: flex; flex-direction: column; gap: 16px; }
.pj-process-step h4 {
  font-family: var(--serif); font-weight: 400; font-size: 28px;
  line-height: 1.1; margin: 0; letter-spacing: -0.005em;
}
.pj-process-step p { font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--noir-2); margin: 0; }

.pj-next { padding: var(--air-pad) 56px; background: var(--paper-2); }
.pj-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1400px; margin: 0 auto; }
.pj-next-card { color: inherit; text-decoration: none; display: block; }
.pj-next-img { aspect-ratio: 4 / 3; margin-bottom: 22px; }
.pj-next-meta { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.pj-next-meta h4 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0; letter-spacing: -0.005em; }
.pj-next-meta .h-caption { flex-basis: 100%; }

@media (max-width: 1100px) {
  .pj-back { padding: 24px 32px 0; }
  .pj-mast { padding: 16px 32px 0; }
  .pj-mast-grid { grid-template-columns: 1fr; gap: 32px; }
  .pj-intro, .pj-gallery, .pj-quote, .pj-process, .pj-next { padding-left: 32px; padding-right: 32px; }
  .pj-fig-row { grid-template-columns: 1fr; gap: 32px; }
  .pj-process-grid { grid-template-columns: 1fr; gap: 40px; }
  .pj-next-grid { grid-template-columns: 1fr; gap: 40px; }
}


/* =========================================================================
   INDEX DES PROJETS — porté depuis pages_journal_signature.jsx (PageProjets)
   ========================================================================= */
.pjx-filters { padding: 0 56px 8px; }
.pjx-filters-inner {
  max-width: 1500px; margin: 0 auto;
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  padding-bottom: 40px; border-bottom: 1px solid rgba(10,10,8,.12);
}
.pjx-filter-row { display: flex; align-items: center; gap: 16px; }
.pjx-filter-label {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.pjx-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pjx-chip {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 500;
  padding: 9px 16px; border: 1px solid rgba(10,10,8,.25);
  background: transparent; cursor: pointer; border-radius: 999px;
  color: var(--noir); transition: all .2s ease;
}
.pjx-chip:hover { border-color: var(--accent); color: var(--accent); }
.pjx-chip.is-active { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.pjx-count { margin-left: auto; }

.pjx-grid-wrap { padding: 56px 56px var(--air-pad); }
.pjx-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px;
  max-width: 1500px; margin: 0 auto;
}
.pjx-card { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 18px; }
.pjx-card-img { aspect-ratio: 4 / 5; position: relative; }
.pjx-card-n {
  position: absolute; top: 0; left: 0; width: 56px; height: 56px;
  background: var(--accent); color: var(--blanc);
  font-family: var(--serif); font-style: italic; font-size: 24px;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.pjx-card-meta { display: flex; flex-direction: column; gap: 6px; }
.pjx-card-meta h3 {
  font-family: var(--serif); font-weight: 400; font-size: 28px;
  line-height: 1.1; margin: 4px 0 2px; letter-spacing: -0.005em;
}
.pjx-card-meta p { font-family: var(--serif); font-size: 16px; color: var(--noir-3); margin: 0; }
.pjx-card-mission {
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--accent); margin-top: 4px;
}
.pjx-card:hover h3 { color: var(--accent); }
.pjx-empty { text-align: center; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--noir-3); max-width: 1500px; margin: 0 auto; }

@media (max-width: 1100px) {
  .pjx-filters { padding: 0 32px 8px; }
  .pjx-grid-wrap { padding: 40px 32px 80px; }
  .pjx-grid { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .pjx-count { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 720px) {
  .pjx-grid { grid-template-columns: 1fr; gap: 48px; }

  /* Category filters — stack each filter into its own labelled block so the
     pills read cleanly instead of wrapping into a disordered pile. */
  .pjx-filters { padding: 0 20px 8px; }
  .pjx-filters-inner {
    flex-direction: column; align-items: stretch; gap: 18px;
    padding-bottom: 28px;
  }
  .pjx-filter-row {
    flex-direction: column; align-items: flex-start; gap: 10px;
    width: 100%;
  }
  .pjx-filter-label { font-size: 11px; }
  .pjx-chips { width: 100%; gap: 8px; }
  .pjx-chip {
    flex: 1 1 auto; text-align: center;
    padding: 12px 14px; font-size: 12px; letter-spacing: 0.06em;
  }
  .pjx-count { margin-left: 0; order: 9; font-size: 12px; }
}


/* =========================================================================
   PRESTATIONS — liste (pivot) + page offre — porté depuis pages_prestations.jsx
   ========================================================================= */
.prest-list { padding: 80px 0 0; }
.prest-row {
  padding: 80px 56px;
  border-bottom: 1px solid rgba(10,10,8,.08);
}
.prest-row-inner {
  display: grid;
  grid-template-columns: 100px 1fr 1.4fr;
  gap: 56px;
  max-width: 1500px;
  margin: 0 auto;
  align-items: center;
}
.prest-row-num .act-marker {
  font-size: clamp(64px, 5.6vw, 96px);
  color: var(--accent);
  line-height: 1;
}
.prest-row-img { aspect-ratio: 4 / 5; }
.prest-row-text { padding-right: 32px; }
.prest-row-text h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.prest-row-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--accent);
  margin: 0 0 18px;
}
.prest-row-short {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--noir-2);
  margin: 0 0 26px;
  max-width: 56ch;
}
.prest-row-spec {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; gap: 48px; flex-wrap: wrap;
  border-top: 1px solid rgba(10,10,8,.12);
  padding-top: 18px;
}
.prest-row-spec div { display: flex; flex-direction: column; gap: 4px; }
.prest-row-spec dt {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.prest-row-spec dd {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--noir);
  margin: 0;
}

.prest-what { padding: var(--air-pad) 56px; background: var(--blanc); }
.prest-what-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 48px;
  max-width: 1500px;
  margin: 0 auto;
}
.prest-what-cell { display: flex; flex-direction: column; gap: 14px; }
.prest-what-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  color: var(--accent);
}
.prest-what-cell h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  margin: 0;
  letter-spacing: -0.005em;
}
.prest-what-cell p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--noir-2);
  margin: 0;
}

.prest-method { padding: var(--air-pad) 56px; background: #FAFAF7; }
.prest-method-list {
  list-style: none; padding: 0; margin: 0;
  max-width: 1100px; margin: 0 auto;
}
.prest-method-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid rgba(10,10,8,.12);
  align-items: baseline;
}
.prest-method-num .act-marker {
  font-size: clamp(56px, 5vw, 80px);
  color: var(--accent);
  line-height: 1;
}
.prest-method-body h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.prest-method-body p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--noir-2);
  margin: 0 0 12px;
  max-width: 60ch;
}
.prest-method-dur { color: var(--accent); }

.prest-example { padding: var(--air-pad) 56px; }
.prest-example-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  max-width: 1500px;
  margin: 0 auto;
  align-items: end;
}
.prest-example-img { aspect-ratio: 16 / 11; }
.prest-example-meta { padding-bottom: 24px; }
.prest-example-meta h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.05;
  margin: 14px 0 14px;
  letter-spacing: -0.005em;
}
.prest-example-meta p {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--noir-3);
  margin: 0 0 24px;
}

.prest-faq { padding: var(--air-pad) 56px; background: #FAFAF7; }
.prest-faq-list {
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid rgba(10,10,8,.15);
}
.prest-faq-item {
  border-bottom: 1px solid rgba(10,10,8,.15);
}
.prest-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 24px 0;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.005em;
}
.prest-faq-item summary::-webkit-details-marker { display: none; }
.prest-faq-toggle {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 300;
  color: var(--accent);
  transition: transform .3s ease;
}
.prest-faq-item[open] .prest-faq-toggle { transform: rotate(45deg); }
.prest-faq-item p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--noir-2);
  margin: 0 0 24px;
  max-width: 70ch;
}

.prest-next {
  padding: 80px 56px;
  background: var(--noir);
  color: var(--ivoire);
  text-align: center;
}
.prest-next-link {
  display: inline-flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ivoire);
  text-decoration: none;
}
.prest-next-link .h-eyebrow { color: var(--accent); }
.prest-next-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1.0;
  color: var(--ivoire);
  display: inline-flex;
  align-items: baseline;
  gap: 24px;
}
.prest-next-title .arrow {
  color: var(--accent);
  font-style: normal;
  transition: transform .35s ease;
}
.prest-next-link:hover .arrow { transform: translateX(8px); }

/* Responsive prestations — complété (la maquette n'en fournissait pas) */
@media (max-width: 1100px) {
  .prest-row { padding: 56px 32px; }
  .prest-row-inner { grid-template-columns: 64px 1fr; gap: 28px 32px; }
  .prest-row-img { grid-column: 1 / -1; aspect-ratio: 16 / 10; order: 3; }
  .prest-row-text { grid-column: 1 / -1; padding-right: 0; order: 2; }
  .prest-row-num { order: 1; }
  .prest-what, .prest-method, .prest-example, .prest-faq { padding: 80px 32px; }
  .prest-method-list li { grid-template-columns: 88px 1fr; gap: 24px; }
  .prest-example-grid { grid-template-columns: 1fr; gap: 28px; }
  .prest-example-meta { padding-bottom: 0; }
  .prest-next { padding: 64px 32px; }
}
@media (max-width: 720px) {
  .prest-row { padding: 40px 20px; }
  .prest-row-inner { gap: 20px; }
  .prest-row-num .act-marker { font-size: 56px; }
  .prest-row-spec { gap: 28px; }
  .prest-what, .prest-method, .prest-example, .prest-faq { padding: 64px 20px; }
  .prest-method-list li { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .prest-method-num .act-marker { font-size: 48px; }
  .prest-faq-item summary { font-size: 18px; }
  .prest-next-title { font-size: 32px; gap: 14px; flex-direction: column; }
}


/* =========================================================================
   PAGES LIEUX (Paris / Normandie) — porté depuis pages_lieux.jsx
   ========================================================================= */
.lieu-intro { padding: var(--air-pad) 56px; background: var(--blanc); }
.lieu-intro-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  max-width: 1300px;
  margin: 0 auto;
}
.lieu-intro-side { padding-top: 8px; }
.lieu-intro-side .act-tag { color: var(--accent); }
.lieu-intro-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 5.6vw, 92px);
  line-height: 0.96;
  margin: 0 0 32px;
  letter-spacing: -0.015em;
}
.lieu-intro-text h2 em { color: var(--accent); font-style: italic; }
.lieu-intro-text p {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.55;
  color: var(--noir-2);
  margin: 0;
  max-width: 56ch;
}

.lieu-zones { padding: var(--air-pad) 56px; background: #FAFAF7; }
.lieu-zones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 48px;
  max-width: 1400px;
  margin: 0 auto;
}
.lieu-zone { display: flex; flex-direction: column; gap: 8px; }
.lieu-zone-n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
}
.lieu-zone h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  margin: 6px 0 6px;
  letter-spacing: -0.005em;
}
.lieu-zone p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--noir-2);
  margin: 0;
}

.lieu-specs { padding: var(--air-pad) 56px; }
.lieu-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 48px;
  max-width: 1400px;
  margin: 0 auto;
}
.lieu-spec { display: flex; flex-direction: column; gap: 14px; }
.lieu-spec-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  color: var(--accent);
}
.lieu-spec h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.005em;
}
.lieu-spec p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--noir-2);
  margin: 0;
}

.lieu-projets { padding: var(--air-pad) 56px; background: #FAFAF7; }
.lieu-projets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 40px;
  max-width: 1400px;
  margin: 0 auto;
}
.lieu-projet { color: inherit; text-decoration: none; display: block; }
.lieu-projet-img { aspect-ratio: 16 / 10; margin-bottom: 22px; }
.lieu-projet-meta { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.lieu-projet-meta h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  margin: 0;
  letter-spacing: -0.005em;
}
.lieu-projet-meta .h-caption { flex-basis: 100%; margin-top: 4px; }

.lieu-cross {
  padding: 80px 56px;
  text-align: center;
  background: var(--blanc);
}
.lieu-cross-link {
  display: inline-flex;
  flex-direction: column;
  gap: 14px;
  color: var(--noir);
  text-decoration: none;
}
.lieu-cross-link .h-eyebrow { color: var(--accent); }
.lieu-cross-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.0;
  display: inline-flex;
  align-items: baseline;
  gap: 20px;
}
.lieu-cross-title .arrow {
  color: var(--accent);
  font-style: normal;
  transition: transform .35s ease;
}
.lieu-cross-link:hover .arrow { transform: translateX(8px); }

/* Responsive lieux — complété */
@media (max-width: 1100px) {
  .lieu-intro, .lieu-zones, .lieu-specs, .lieu-projets { padding: 80px 32px; }
  .lieu-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .lieu-zones-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .lieu-projets-grid { grid-template-columns: 1fr; gap: 48px; }
  .lieu-cross { padding: 64px 32px; }
}
@media (max-width: 720px) {
  .lieu-intro, .lieu-zones, .lieu-specs, .lieu-projets { padding: 64px 20px; }
  .lieu-zones-grid { grid-template-columns: 1fr; gap: 32px; }
  .lieu-cross-title { font-size: 28px; gap: 12px; flex-direction: column; }
}


/* =========================================================================
   LOT 6 — À propos, Séance/Contact, Journal, Article, Signature
   ========================================================================= */

/* --- aproposCss --- */
.ap-story { padding: var(--air-pad) 56px; background: var(--blanc); }
.ap-story-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  max-width: 1300px;
  margin: 0 auto;
}
.ap-story-side { padding-top: 8px; }
.ap-story-side .act-tag { color: var(--accent); }
.ap-story-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 5.6vw, 92px);
  line-height: 0.96;
  margin: 0 0 32px;
  letter-spacing: -0.015em;
}
.ap-story-text h2 em { color: var(--accent); font-style: italic; }
.ap-story-text p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--noir-2);
  margin: 0 0 22px;
  max-width: 56ch;
}

.ap-method { padding: var(--air-pad) 56px; background: #FAFAF7; }
.ap-method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
}
.ap-method-cell {
  border-top: 1px solid rgba(10,10,8,.15);
  padding-top: 28px;
}
.ap-method-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}
.ap-method-cell h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.ap-method-cell p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--noir-2);
  margin: 0;
}

.ap-atelier { padding: var(--air-pad) 56px; }
.ap-atelier-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: center;
}
.ap-atelier-img { aspect-ratio: 4 / 5; }
.ap-atelier-text .act-tag { color: var(--accent); display: block; margin-bottom: 14px; }
.ap-atelier-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 5vw, 76px);
  line-height: 1.0;
  margin: 0 0 28px;
  letter-spacing: -0.015em;
}
.ap-atelier-text h2 em { color: var(--accent); font-style: italic; }
.ap-atelier-text p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--noir-2);
  margin: 0 0 28px;
  max-width: 50ch;
}
.ap-atelier-spec {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  border-top: 1px solid rgba(10,10,8,.15);
  padding-top: 20px;
}
.ap-atelier-spec li {
  font-family: var(--serif);
  font-size: 17px;
}
.ap-atelier-spec li span {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  font-weight: 500;
}

.ap-press { padding: var(--air-pad) 56px; background: #FAFAF7; }
.ap-press-list {
  list-style: none; padding: 0; margin: 0;
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid rgba(10,10,8,.15);
}
.ap-press-row {
  display: grid;
  grid-template-columns: 80px 200px 1fr 40px;
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(10,10,8,.12);
  align-items: baseline;
}
.ap-press-year {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
}
.ap-press-src {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--noir-3);
  font-weight: 500;
}
.ap-press-t {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--noir);
  letter-spacing: -0.005em;
}
.ap-press-arrow {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--accent);
  text-align: right;
}

/* --- contactCss --- */
.ct-how { padding: var(--air-pad) 56px; background: var(--blanc); }
.ct-how-list {
  list-style: none; padding: 0; margin: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.ct-how-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid rgba(10,10,8,.12);
  align-items: baseline;
}
.ct-how-num .act-marker {
  font-size: clamp(56px, 5vw, 80px);
  color: var(--accent);
  line-height: 1;
}
.ct-how-list h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.ct-how-list p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--noir-2);
  margin: 0;
  max-width: 60ch;
}

.ct-form { padding: var(--air-pad) 56px; background: #FAFAF7; }
.ct-form-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
}
.ct-field { display: flex; flex-direction: column; gap: 10px; }
.ct-field-wide { grid-column: 1 / -1; }
.ct-field span {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.ct-field input, .ct-field select, .ct-field textarea {
  font-family: var(--serif);
  font-size: 19px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(10,10,8,.25);
  background: transparent;
  color: var(--noir);
  outline: none;
  transition: border-color .25s ease;
}
.ct-field input::placeholder, .ct-field textarea::placeholder {
  color: rgba(10,10,8,.35);
  font-style: italic;
}
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus {
  border-bottom-color: var(--accent);
}
.ct-field textarea { resize: vertical; font-size: 18px; line-height: 1.5; padding: 14px 0; }
.ct-field-pills { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.ct-pill {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 18px;
  border: 1px solid rgba(10,10,8,.25);
  background: transparent;
  cursor: pointer;
  transition: all .2s ease;
  border-radius: 999px;
  color: var(--noir);
}
.ct-pill:hover { border-color: var(--accent); color: var(--accent); }
.ct-pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--blanc); }
.ct-submit {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px;
  padding-top: 16px;
  border-top: 1px solid rgba(10,10,8,.15);
  margin-top: 12px;
  flex-wrap: wrap;
}
.ct-rgpd { color: var(--noir-3); max-width: 40ch; }

.ct-form-thanks {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 72px 32px;
  border: 1px solid var(--accent);
  background: var(--blanc);
}
.ct-form-thanks .act-marker {
  font-size: 64px;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: 16px;
  font-family: var(--serif);
}
.ct-form-thanks h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  margin: 0 0 18px;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.ct-form-thanks p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--noir-2);
  margin: 0 0 28px;
}
.ct-form-thanks a { color: var(--accent); }

.ct-info { padding: var(--air-pad) 56px; background: var(--blanc); }
.ct-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(10,10,8,.15);
  padding-top: 56px;
}
.ct-info-block .h-eyebrow {
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
}
.ct-info-big {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.35;
  margin: 0 0 12px;
  color: var(--noir);
}
.ct-info-big a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent); }
.ct-info-big a:hover { color: var(--accent); }
.ct-info-small {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--noir-3);
  margin: 0 0 16px;
}
.ct-info-list { list-style: none; padding: 0; margin: 0; }
.ct-info-list li { font-family: var(--serif); font-size: 18px; line-height: 1.9; }
.ct-info-list a {
  color: var(--noir);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.ct-info-list a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ct-info-list .arrow { transition: transform .35s ease; color: var(--accent); }
.ct-info-list a:hover .arrow { transform: translateX(6px); }

/* --- journalCss --- */
.jr-feature-wrap { padding: 24px 56px var(--air-pad); }
.jr-feature {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px;
  max-width: 1500px; margin: 0 auto; align-items: center;
  color: inherit; text-decoration: none;
}
.jr-feature-img { aspect-ratio: 4 / 3; }
.jr-feature-text .h-eyebrow { color: var(--accent); }
.jr-feature-text h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 4.2vw, 64px); line-height: 1.0;
  margin: 18px 0 20px; letter-spacing: -0.015em;
}
.jr-feature-text h2 em { color: var(--accent); font-style: italic; }
.jr-feature-dek {
  font-family: var(--serif); font-size: 20px; line-height: 1.55;
  color: var(--noir-2); margin: 0 0 22px; max-width: 48ch;
}
.jr-meta {
  display: flex; gap: 12px; align-items: center;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--noir-3); margin-bottom: 26px;
}
.jr-dot { color: var(--accent); }
.jr-feature:hover h2 { color: var(--accent); }

.jr-grid-wrap { padding: 0 56px var(--air-pad); background: var(--ivoire); }
.jr-grid-wrap { padding-top: var(--air-pad); }
.jr-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px 56px;
  max-width: 1300px; margin: 0 auto;
}
.jr-card { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 14px; }
.jr-card-img { aspect-ratio: 16 / 10; margin-bottom: 6px; }
.jr-card .h-eyebrow { color: var(--accent); }
.jr-card h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.05; margin: 0; letter-spacing: -0.01em;
}
.jr-card h3 em { color: var(--accent); font-style: italic; }
.jr-card p { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--noir-2); margin: 0; max-width: 44ch; }
.jr-card:hover h3 { color: var(--accent); }

@media (max-width: 1100px) {
  .jr-feature-wrap { padding: 16px 32px 72px; }
  .jr-feature { grid-template-columns: 1fr; gap: 28px; }
  .jr-grid-wrap { padding: 72px 32px; }
  .jr-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* --- articleCss --- */
.art-body { max-width: 720px; margin: 0 auto; padding: var(--air-pad) 32px 64px; }
.art-back {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--noir-3); text-decoration: none;
  margin-bottom: 48px;
}
.art-back .arrow { color: var(--accent); transition: transform .3s ease; }
.art-back:hover { color: var(--noir); }
.art-back:hover .arrow { transform: translateX(-6px); }
.art-p {
  font-family: var(--serif); font-size: 20px; line-height: 1.7;
  color: var(--noir-2); margin: 0 0 28px;
}
.art-h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1; letter-spacing: -0.01em; color: var(--noir);
  margin: 56px 0 24px;
}
.art-quote {
  margin: 48px 0; padding: 0 0 0 28px; border-left: 2px solid var(--accent);
}
.art-quote p {
  font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.35; color: var(--noir); margin: 0 0 14px;
}
.art-quote footer { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.art-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin: 48px 0; padding: 36px 0; border-top: 1px solid var(--accent); border-bottom: 1px solid rgba(10,10,8,.12);
}
.art-stat { display: flex; flex-direction: column; gap: 8px; }
.art-stat-n { font-family: var(--serif); font-style: italic; font-size: clamp(32px, 4vw, 48px); color: var(--accent); line-height: 1; }
.art-stat-l { font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; line-height: 1.5; color: var(--noir-3); }
.art-related { margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(10,10,8,.15); }
.art-related .h-eyebrow { color: var(--accent); display: block; margin-bottom: 18px; }
.art-related-links { display: flex; gap: 32px; flex-wrap: wrap; }

.art-next { padding: 72px 56px; background: var(--noir); color: var(--ivoire); text-align: center; }
.art-next-link { display: inline-flex; flex-direction: column; gap: 14px; color: var(--ivoire); text-decoration: none; }
.art-next-link .h-eyebrow { color: var(--accent); }
.art-next-title {
  font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05; display: inline-flex; align-items: baseline; gap: 18px; justify-content: center;
}
.art-next-title .arrow { color: var(--accent); font-style: normal; transition: transform .35s ease; }
.art-next-link:hover .arrow { transform: translateX(8px); }

@media (max-width: 720px) {
  .art-body { padding: 64px 20px 48px; }
  .art-stats { grid-template-columns: 1fr; gap: 24px; }
  .art-next { padding: 56px 20px; }
}

/* --- signatureCss --- */
.sg-intro { padding: var(--air-pad) 56px; background: var(--blanc); }
.sg-intro-grid { display: grid; grid-template-columns: 280px 1fr; gap: 64px; max-width: 1300px; margin: 0 auto; }
.sg-intro-side .act-tag { color: var(--accent); }
.sg-intro-text h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.8vw, 76px);
  line-height: 1.0; margin: 0 0 28px; letter-spacing: -0.015em;
}
.sg-intro-text h2 em { color: var(--accent); font-style: italic; }
.sg-intro-text p { font-family: var(--serif); font-size: 21px; line-height: 1.6; color: var(--noir-2); margin: 0; max-width: 56ch; }

.sg-pillars { padding: var(--air-pad) 56px; background: var(--ivoire); }
.sg-pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1400px; margin: 0 auto; }
.sg-pillar { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--accent); padding-top: 22px; }
.sg-pillar-n { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--accent); }
.sg-pillar h4 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; margin: 0; }
.sg-pillar p { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--noir-2); margin: 0; }

.sg-bridge { padding: var(--air-pad) 56px; }
.sg-bridge-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; max-width: 1400px; margin: 0 auto; align-items: center; }
.sg-bridge-img { aspect-ratio: 4 / 5; }
.sg-bridge-text .act-tag { color: var(--accent); display: block; margin-bottom: 14px; }
.sg-bridge-text h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4vw, 60px);
  line-height: 1.0; margin: 0 0 24px; letter-spacing: -0.015em;
}
.sg-bridge-text h2 em { color: var(--accent); font-style: italic; }
.sg-bridge-text p { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--noir-2); margin: 0 0 24px; max-width: 50ch; }

.sg-univers { padding: var(--air-pad) 56px; background: var(--ivoire); }
.sg-univers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: 1400px; margin: 0 auto; }
.sg-univers-card { display: flex; flex-direction: column; gap: 12px; }
.sg-univers-img { aspect-ratio: 4 / 5; position: relative; margin-bottom: 6px; }
.sg-univers-n {
  position: absolute; top: 0; left: 0; width: 56px; height: 56px;
  background: var(--accent); color: var(--blanc);
  font-family: var(--serif); font-style: italic; font-size: 24px;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.sg-univers-card h4 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; margin: 0; letter-spacing: -0.005em; }
.sg-univers-sub { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--accent); margin: 0; }
.sg-univers-card p { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--noir-2); margin: 0; }

@media (max-width: 1100px) {
  .sg-intro, .sg-pillars, .sg-bridge, .sg-univers { padding-left: 32px; padding-right: 32px; }
  .sg-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .sg-pillars-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .sg-bridge-grid { grid-template-columns: 1fr; gap: 32px; }
  .sg-univers-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Responsive À propos — complété */
@media (max-width: 1100px) {
  .ap-story, .ap-method, .ap-atelier, .ap-press { padding-left: 32px; padding-right: 32px; }
  .ap-story-grid { grid-template-columns: 1fr; gap: 24px; }
  .ap-method-grid { grid-template-columns: 1fr; gap: 32px; }
  .ap-atelier-grid { grid-template-columns: 1fr; gap: 32px; }
  .ap-press-row { grid-template-columns: 60px 1fr; gap: 6px 18px; }
  .ap-press-src { grid-column: 2; } .ap-press-t { grid-column: 1 / -1; } .ap-press-arrow { display:none; }
}
/* Responsive Contact/Séance — complété */
@media (max-width: 1100px) {
  .ct-how, .ct-form, .ct-info { padding-left: 32px; padding-right: 32px; }
  .ct-how-list li { grid-template-columns: 88px 1fr; gap: 24px; }
  .ct-form-grid { grid-template-columns: 1fr; gap: 24px; }
  .ct-info-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .ct-how, .ct-form, .ct-info { padding-left: 20px; padding-right: 20px; }
  .ct-how-list li { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .ct-info-grid { grid-template-columns: 1fr; }
  .ct-submit { flex-direction: column; align-items: stretch; }
}
/* Article — le contenu natif WordPress hérite du style éditorial */
.art-body > p { font-family: var(--serif); font-size: 20px; line-height: 1.7; color: var(--noir-2); margin: 0 0 28px; }
.art-body > h2, .art-body > h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.01em; color: var(--noir); margin: 56px 0 24px; }
.art-body > blockquote { margin: 48px 0; padding: 0 0 0 28px; border-left: 2px solid var(--accent); }
.art-body > blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.35; color: var(--noir); }
.art-body > ul, .art-body > ol { font-family: var(--serif); font-size: 20px; line-height: 1.7; color: var(--noir-2); margin: 0 0 28px; padding-left: 1.2em; }
.art-body > ul li, .art-body > ol li { margin-bottom: 10px; }
.art-body img { width: 100%; height: auto; margin: 40px 0; }
.art-body a { color: var(--accent); }

/* Fix mobile : titres d'affichage qui débordaient (plancher de clamp trop haut) */
@media (max-width: 560px){
  .v4-hero-title   { font-size: clamp(34px, 11vw, 56px); }
  .page-mast-title { font-size: clamp(34px, 11vw, 56px); }
  .v4-section-h2   { font-size: clamp(30px, 9vw, 48px); }
  .page-section-h2 { font-size: clamp(28px, 8.5vw, 42px); }
  .page-cta-title  { font-size: clamp(28px, 8vw, 40px); }
  .v4-hero-title, .page-mast-title, .v4-section-h2,
  .page-section-h2, .page-cta-title { overflow-wrap: break-word; }
}
/* =====================================================================
   PATCH — Révélation des images (à coller À LA FIN de style.css)
   ---------------------------------------------------------------------
   Contexte : la transition opacity/clip-path d'origine sur
   [data-reveal="image"] ne s'achevait pas de façon fiable — le bloc
   restait figé sur sa frame de départ (opacity 0 + clip 100 %), donc la
   photo n'apparaissait pas avant un rechargement.

   Une animation @keyframes, elle, se joue et tient son état de fin sans
   ce blocage. On la déclenche à l'ajout de la classe .is-in (posée par
   theme.js) et on neutralise l'ancienne transition.

   À déployer AVEC le theme.js mis à jour (qui révèle les images par la
   classe seule, pour laisser cette animation s'exécuter).
   ===================================================================== */

@keyframes imRevealImage {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);   }
}

[data-reveal="image"].is-in {
  /* Animation fiable (0,9 s), maintient l'état révélé (fill-mode both). */
  animation: imRevealImage 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both !important;
  /* Neutralise la transition d'origine qui restait figée. */
  transition: none !important;
}

/* Accessibilité : pas d'animation si l'utilisateur la refuse → affichage direct. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal="image"].is-in {
    animation: none !important;
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
  }
}/* =====================================================================
   PATCH #6 — Réduction de la taille des titres H2 de section
   (à coller À LA FIN de style.css)
   ---------------------------------------------------------------------
   Les titres de section étaient très grands (ex. .page-section-h2 = 76px
   au max). On réduit la famille de ~20 %. Les line-heights d'origine sont
   conservées (on ne touche qu'au font-size). Valeurs facilement ajustables :
   le 3e paramètre de chaque clamp() est la taille max (grand écran).

   NB : on ne touche PAS aux titres « héros » (.page-mast-title,
   .v4-hero-title) qui sont des H1/accroches, pas des H2 de section.
   ===================================================================== */

.page-section-h2     { font-size: clamp(34px, 3.7vw, 60px); }
.page-cta-title      { font-size: clamp(32px, 3.6vw, 56px); }

.v4-section-h2       { font-size: clamp(38px, 4.4vw, 72px); }
.v4-manifesto-text h2{ font-size: clamp(32px, 3.8vw, 60px); }
.v4-distinct-head h2 { font-size: clamp(38px, 4.4vw, 72px); }
.v4-discovery h2     { font-size: clamp(38px, 4.3vw, 70px); }
.discovery h2        { font-size: clamp(32px, 4.0vw, 64px); }

.pj-h2               { font-size: clamp(32px, 3.6vw, 56px); }

/* =====================================================================
   ARTICLE (single post) — en-tête spécifique, meilleure lisibilité
   ---------------------------------------------------------------------
   Les articles du Journal réutilisent le mast des pages (.page-mast-title),
   dont l'échelle « display » (clamp 56→124 px) écrasait les titres-phrases
   d'article (rendus ~123 px). On scope une échelle réduite et lisible au
   body.single-post (spécificité 0,2,0 + !important) pour gagner sur la base
   ET sur les overrides mobiles !important existants. N'affecte que l'article.
   ===================================================================== */
body.single-post .page-mast-title {
  font-size: clamp(30px, 4.2vw, 52px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
}