/* ==========================================================================
   Ampela — Savoir-faire
   Sober editorial style, white ground, high contrast
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Montserrat:ital,wght@0,300;0,400;0,500;1,300&family=Petit+Formal+Script&display=swap');

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Whites & inks */
  --c-bg: #ffffff;
  --c-ink: #111111;
  --c-ink-soft: #3a3a3a;
  --c-ink-mute: #767676;
  --c-ink-faint: #b8b8b8;
  --c-line: #e6e6e6;
  --c-line-soft: #f0f0f0;

  /* Type */
  --f-serif: 'Marcellus', Georgia, 'Times New Roman', serif;
  --f-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-script: 'Petit Formal Script', 'Sacramento', 'Great Vibes', cursive;

  /* Rhythm */
  --s-xs: 0.5rem;
  --s-sm: 1rem;
  --s-md: 2rem;
  --s-lg: 4rem;
  --s-xl: 6rem;
  --s-xxl: 10rem;

  /* Layout */
  --w-prose: 640px;
  --w-content: 960px;
  --w-wide: 1320px;
  --gutter: clamp(1rem, 2vw, 1.75rem);
  /* Largeur réservée pour compenser la scrollbar quand un overlay verrouille le scroll */
  --sb-w: 0px;

  /* Motion */
  --t-fast: 250ms;
  --t-slow: 600ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Scrollbar système entièrement masquée. On la remplace par un indicateur
     custom (créé en JS) : un fin rectangle noir sur le bord droit, sans arrondi,
     sans flèche, absolument minimaliste. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Transition entre les pages : écran blanc avec logo au centre,
   très sobre, fade in/out. Ne concerne que la navigation par lien,
   pas les modales de réalisation. */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--c-bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 500ms var(--ease);
}
.page-transition img {
  height: 84px;
  width: auto;
  display: block;
}
.page-transition.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Indicateur de scroll custom (rectangle vertical à droite) */
.scroll-indicator {
  position: fixed;
  top: 0;
  right: 0;
  width: 2px;
  height: 100vh;
  z-index: 500;
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}
.scroll-indicator-thumb {
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  background: rgba(0,0,0,0.28);
  will-change: transform, height;
}
body.rea-open .scroll-indicator,
body.menu-open .scroll-indicator {
  opacity: 0;
}
body {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.015em;
  padding-right: var(--sb-w);
}
.site-header {
  padding-right: var(--sb-w);
}
img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.display-xl {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
}
.display-l {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: 0.008em;
}
.display-m {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.3;
  letter-spacing: 0.008em;
}
.lead {
  font-family: var(--f-sans);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.7;
  color: var(--c-ink-soft);
  letter-spacing: 0.015em;
}
.body-l {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.8;
}
.eyebrow {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--c-ink-mute);
}

p + p { margin-top: 1rem; }
em, i { font-style: italic; font-weight: 300; }

/* --------------------------------------------------------------------------
   Layout containers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--w-wide);
  padding-left: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
  margin: 0 auto;
}
.container-prose {
  width: 100%;
  max-width: calc(var(--w-prose) + 3rem);
  padding-left: clamp(1.5rem, 4vw, 1.5rem);
  padding-right: clamp(1.5rem, 4vw, 1.5rem);
  margin: 0 auto;
}
.container-content {
  width: 100%;
  max-width: calc(var(--w-content) + 3rem);
  padding-left: clamp(1.5rem, 4vw, 1.5rem);
  padding-right: clamp(1.5rem, 4vw, 1.5rem);
  margin: 0 auto;
}
.container-md {
  width: 100%;
  max-width: 1160px;
  padding-left: clamp(1.5rem, 4vw, 1.5rem);
  padding-right: clamp(1.5rem, 4vw, 1.5rem);
  margin: 0 auto;
}
.section { padding-block: clamp(5rem, 10vw, 9rem); }

/* --------------------------------------------------------------------------
   Header — transparent over hero, white on scroll
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-block: 0.6rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}
/* Quand le menu principal est ouvert, on remonte le header au-dessus pour que
   le hamburger reste accessible et morphe visuellement en croix */
body.menu-open > .site-header { z-index: 210; }
.site-header .container {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: none;
}
.brand { margin-right: auto; } /* everything after brand pushed to the right */
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  height: 72px;
}
.brand-logo {
  height: 100%;
  width: auto;
  display: block;
  transition: opacity var(--t-slow) var(--ease);
}
.brand-logo-dark { display: none; }
.site-header.is-scrolled .brand-logo-light,
.site-header.is-dark .brand-logo-light { display: none; }
.site-header.is-scrolled .brand-logo-dark,
.site-header.is-dark .brand-logo-dark { display: block; }
.nav.primary { display: none; } /* replaced by overlay menu */
.site-header .lang { display: none; } /* moved into overlay menu */

/* Scrolled state: white background, dark inks */
.site-header.is-scrolled {
  background: rgba(255,255,255,0.98);
  border-bottom-color: transparent;
}

/* Force dark header on inner pages (no hero image on top) */
.site-header.is-dark {
  background: rgba(255,255,255,0.98);
  border-bottom-color: transparent;
}

/* --------------------------------------------------------------------------
   Hamburger toggle (always visible)
   -------------------------------------------------------------------------- */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.menu-toggle .bar {
  display: block;
  width: 26px;
  height: 1px;
  flex-shrink: 0;
  background: #fff;
  will-change: transform;
  transform: translateZ(0);
  transition: background var(--t-slow) var(--ease), width var(--t-fast) var(--ease);
}
.menu-toggle .bar:nth-child(2) { width: 18px; }
.menu-toggle:hover .bar:nth-child(2) { width: 26px; }
.site-header.is-scrolled .menu-toggle .bar,
.site-header.is-dark .menu-toggle .bar,
body.menu-open .menu-toggle .bar { background: var(--c-ink); }

/* --------------------------------------------------------------------------
   Overlay menu (full screen, centered content)
   -------------------------------------------------------------------------- */
.overlay-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease);
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 10vh, 8rem) 1.5rem clamp(4rem, 8vw, 6rem);
}
.overlay-inner {
  margin-block: auto;
}
.overlay-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* Bouton croix interne au menu masqué : c'est le hamburger morphé qui ferme */
.overlay-close { display: none; }

.overlay-inner {
  text-align: center;
  max-width: 720px;
  width: 100%;
}
.overlay-nav {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.overlay-nav a {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  color: var(--c-ink-mute);
  line-height: 1.15;
  letter-spacing: 0.01em;
  transition: color var(--t-fast) var(--ease);
  padding-block: 0.35rem;
}
.overlay-nav a:hover { color: var(--c-ink); }
.overlay-nav a.active { color: var(--c-ink); }

.overlay-lang {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--f-sans);
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.overlay-lang a { color: var(--c-ink-mute); transition: color var(--t-fast) var(--ease); }
.overlay-lang a.active { color: var(--c-ink); }
.overlay-lang a:hover { color: var(--c-ink); }
.overlay-lang span { color: var(--c-ink-faint); }

/* --------------------------------------------------------------------------
   Hero — sticky image; manifesto card overlaps bottom-left, then scrolls
   -------------------------------------------------------------------------- */
.hero-container {
  position: relative;
  z-index: 0;
  height: 180vh; /* image sticks for 80vh of scroll before unpinning */
}
.hero-image {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(100%);
  transition: filter 1200ms var(--ease);
}
body.has-scrolled .hero-image {
  filter: grayscale(0%);
}
.hero-image.placeholder {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.28) 100%),
    radial-gradient(ellipse at 30% 45%, rgba(210,180,140,0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 55%, rgba(160,110,80,0.5) 0%, transparent 55%),
    linear-gradient(135deg, #3a2c1e 0%, #1a1108 100%);
}

/* --------------------------------------------------------------------------
   Manifesto — bottom-left card overlapping the hero image
   -------------------------------------------------------------------------- */
.manifesto {
  position: relative;
  z-index: 1;
  margin-top: -38vh; /* card overlaps hero image bottom, image visible around */
  padding-bottom: clamp(4rem, 8vw, 7rem);
  background: transparent;
}
.manifesto-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding-left: 0;
  padding-right: clamp(1.5rem, 4vw, 3rem);
}
.manifesto-card {
  background: var(--c-bg);
  width: min(72%, 840px);
  padding:
    clamp(3.25rem, 5vw, 5rem)   /* top */
    clamp(3.5rem, 6vw, 5.5rem)  /* right */
    clamp(2.25rem, 3.5vw, 3.5rem) /* bottom */
    clamp(4.5rem, 7vw, 7rem);   /* left, more generous */
}
.manifesto-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  margin-bottom: 2.75rem;
}
.manifesto-body p {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.8;
  color: var(--c-ink-soft);
  margin-bottom: 1rem;
  letter-spacing: 0.015em;
}
.manifesto-cta {
  margin-top: 3rem;
}

@media (max-width: 780px) {
  .manifesto-card {
    width: 100%;
    padding: 2.5rem 1.75rem;
  }
  .manifesto {
    margin-top: -35vh;
  }
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink);
  padding: 1rem 2.25rem;
  border: 1px solid var(--c-ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover {
  background: var(--c-ink);
  color: var(--c-bg);
}
/* Mobile : texte des boutons sur une seule ligne */
@media (max-width: 520px) {
  .btn {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    padding: 0.95rem 1.4rem;
    white-space: nowrap;
  }
}
@media (max-width: 360px) {
  .btn {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    padding: 0.9rem 1.1rem;
  }
}
.btn-invert {
  color: #fff;
  border-color: rgba(255,255,255,0.85);
}
.btn-invert:hover {
  background: #fff;
  color: var(--c-ink);
}

.link {
  display: inline-block;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--c-ink);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.link:hover { color: var(--c-ink-mute); border-color: var(--c-ink-mute); }

/* --------------------------------------------------------------------------
   Savoir-faire showcase (home) — banner + duo
   -------------------------------------------------------------------------- */
.sf-showcase {
  position: relative;
  z-index: 1;
  background: var(--c-bg);
}
.sf-banner {
  display: block;
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 460px;
  overflow: hidden;
  color: #fff;
}
.sf-banner-media,
.sf-duo-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  transition: filter 700ms var(--ease);
}
.sf-banner:hover .sf-banner-media,
.sf-duo-block:hover .sf-duo-media {
  filter: grayscale(0%);
}
.sf-banner-media::after,
.sf-duo-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 55%, transparent 80%);
}
.sf-banner-media.m-broderie {
  background-image: url('images/accueil_broderie.jpg');
}
.sf-duo-media.m-tissage {
  background-image: url('images/accueil_tissage.jpg');
}
.sf-duo-media.m-teinture {
  background-image: url('images/accueil_teinture.jpg');
}
.sf-banner-content {
  position: absolute;
  bottom: clamp(2rem, 4vw, 3.5rem);
  left: clamp(2rem, 4vw, 3.5rem);
  right: clamp(2rem, 4vw, 3.5rem);
  max-width: 560px;
  color: #fff;
  z-index: 1;
}
.sf-badge {
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: 0.28em;
}
.sf-banner-title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  color: #fff;
  line-height: 1.15;
  margin-bottom: 0.9rem;
  letter-spacing: 0.008em;
}
.sf-banner-lead {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(0.88rem, 1vw, 0.98rem);
  line-height: 1.7;
  color: #fff;
  margin-bottom: 1.75rem;
  letter-spacing: 0.015em;
  max-width: 46ch;
}
.sf-arrow {
  display: inline-block;
  color: #fff;
  transition: transform var(--t-fast) var(--ease);
  line-height: 0;
}
.sf-arrow svg { display: block; }
.sf-banner:hover .sf-arrow,
.sf-duo-block:hover .sf-arrow { transform: translateX(8px); }

.sf-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  margin-top: clamp(1rem, 2.5vw, 2.5rem);
}
.sf-duo-block {
  display: block;
  position: relative;
  height: 60vh;
  min-height: 460px;
  overflow: hidden;
  color: #fff;
}

@media (max-width: 780px) {
  .sf-duo { grid-template-columns: 1fr; }
  .sf-duo-block { height: 50vh; min-height: 380px; }
  .sf-banner { height: 55vh; min-height: 400px; }
}

/* --------------------------------------------------------------------------
   Savoir-faire alternating blocks (legacy, kept for inner pages if reused)
   -------------------------------------------------------------------------- */
.sf {
  position: relative;
  z-index: 1;
  background: var(--c-bg);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.sf-row {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .sf-row { grid-template-columns: 1fr 1fr; }
  .sf-row.reverse .sf-media { order: 2; }
  .sf-row.reverse .sf-text { order: 1; }
}
.sf-media {
  aspect-ratio: 4 / 5;
  background: #f3efe7;
  overflow: hidden;
  display: block;
  position: relative;
}
.sf-media::before {
  content: '';
  position: absolute;
  inset: 40%;
  border: 1px solid #e2dcd0;
  opacity: 0.6;
}
.sf-text {
  padding-inline: clamp(0, 1vw, 1rem);
}
.sf-eyebrow { margin-bottom: 1rem; }
.sf-title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.2;
  color: var(--c-ink);
  margin-bottom: 1.5rem;
  letter-spacing: 0.008em;
}
.sf-lead {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--c-ink-soft);
  margin-bottom: 1.75rem;
  letter-spacing: 0.015em;
}
.sf-quote {
  font-family: var(--f-sans);
  font-weight: 300;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-ink-mute);
  padding-left: 1.25rem;
  border-left: 1px solid var(--c-line);
  margin-bottom: 2rem;
  max-width: 42ch;
}

/* --------------------------------------------------------------------------
   Réalisations mosaic gallery
   -------------------------------------------------------------------------- */
.realisations {
  position: relative;
  z-index: 1;
  background: var(--c-bg);
  padding-block: clamp(5rem, 10vw, 9rem);
}
.realisations-header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.realisations-header .eyebrow { margin-bottom: 1rem; }

.mosaic {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(220px, auto);
}
.mosaic > * {
  background: #f3efe7;
  overflow: hidden;
  display: block;
  position: relative;
}
.mosaic > *::before {
  content: '';
  position: absolute;
  inset: 42%;
  border: 1px solid #e2dcd0;
  opacity: 0.6;
}

/* Desktop mosaic layout: 12 cols, arranged asymmetrically */
@media (min-width: 800px) {
  .mosaic {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, 1fr);
    aspect-ratio: 16 / 10;
    grid-auto-rows: unset;
  }
  .mosaic > *:nth-child(1) { grid-column: 1 / 6; grid-row: 1 / 6; }
  .mosaic > *:nth-child(2) { grid-column: 6 / 13; grid-row: 1 / 5; }
  .mosaic > *:nth-child(3) { grid-column: 1 / 7; grid-row: 6 / 9; }
  .mosaic > *:nth-child(4) { grid-column: 7 / 13; grid-row: 5 / 9; }

  .mosaic-alt > *:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 4; }
  .mosaic-alt > *:nth-child(2) { grid-column: 7 / 13; grid-row: 1 / 6; }
  .mosaic-alt > *:nth-child(3) { grid-column: 1 / 8; grid-row: 4 / 9; }
  .mosaic-alt > *:nth-child(4) { grid-column: 8 / 13; grid-row: 6 / 9; }
}

/* --------------------------------------------------------------------------
   Réalisations — 2 rows × 4 square images
   -------------------------------------------------------------------------- */
.rea-squares {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 2.75vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
@media (min-width: 700px) { .rea-squares { grid-template-columns: repeat(4, 1fr); } }
.rea-sq {
  display: block;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.rea-sq .cover-media {
  position: absolute;
  inset: 0;
  background-color: #f3efe7;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  transition: filter 700ms var(--ease);
}
.rea-sq:hover .cover-media { filter: grayscale(0%); }
.rea-sq .cover-media::before {
  content: '';
  position: absolute;
  inset: 44%;
  border: 1px solid #e2dcd0;
  opacity: 0.6;
}

.realisations .container {
  padding-left: clamp(2rem, 4vw, 3.5rem);
  padding-right: clamp(2rem, 4vw, 3.5rem);
  max-width: none;
}
.realisations .realisations-cta {
  text-align: left;
}
.realisations-header {
  text-align: left;
}

.realisations-cta { text-align: center; margin-top: clamp(3rem, 6vw, 4rem); }

/* --------------------------------------------------------------------------
   Page Atelier — intertitre serif, image de groupe, deux colonnes simples
   -------------------------------------------------------------------------- */
/* Images propres à la page Broderie */
.m-broderie-hero { background-image: url('images/page%20broderie/2025-06-02Ampela-29.JPG'); }
.m-broderie-overlap-1 { background-image: url('images/page%20broderie/Ampelasavoir%20faire%20Web_51.jpg'); }
.m-broderie-overlap-2 {
  background-image: url('images/page%20broderie/broderie_fil.jpg');
  background-position: 50% 40%;
}
.m-broderie-portrait-1 { background-image: url('images/page%20broderie/perlages.jpg'); }
.m-broderie-portrait-2 { background-image: url('images/page%20broderie/2024-11-09Ampela-160.JPG'); }
.m-broderie-tech-1 { background-image: url('images/page%20broderie/2025-06-02Ampela-25.JPG'); }
.m-broderie-tech-2 { background-image: url('images/page%20broderie/robe-malala-detail.jpg'); }
.m-broderie-tech-3 { background-image: url('images/page%20broderie/Essai6.jpeg'); }
.m-broderie-tech-4 {
  background-image: url('images/page%20broderie/Essai8.jpeg');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #f3efe7;
}

/* Images propres à la page Teinture */
.m-teinture-overlap-1 {
  background-image: url('images/page-teinture/Tissage_bleu_blanc.jpeg');
  filter: grayscale(100%);
}
.m-teinture-hero { background-image: url('images/page-teinture/hero-cuiellette-plantes.jpeg'); }
.m-teinture-overlap-2 { background-image: url('images/page-teinture/icone-carre-superposition-.jpeg'); }
.m-teinture-portrait-1 { background-image: url('images/page-teinture/Tissage_cyan.jpeg'); }
.m-teinture-portrait-2 { background-image: url('images/page-teinture/Tissage_rouge.jpeg'); }
.m-teinture-tech-1 { background-image: url('images/page-teinture/bleus.jpg'); }
.m-teinture-tech-2 { background-image: url('images/page-teinture/jaunes.jpg'); }
.m-teinture-tech-3 { background-image: url('images/page-teinture/Rouges.jpeg'); }
.m-teinture-tech-4 { background-image: url('images/page-teinture/vert.jpeg'); }

/* Images propres à la page Tissage */
.m-tissage-hero { background-image: url('images/page_tissage/Ampelasavoir%20faire%20Web.jpg'); }
.m-tissage-overlap-1 { background-image: url('images/page_tissage/section_2_arriere.jpeg'); }
.m-tissage-overlap-2 { background-image: url('images/page_tissage/section_2_avant.jpg'); }
.portrait.m-tissage-portrait-1 {
  background-image: url('images/page_tissage/Abat-jour-tiss%C3%A9-soie-cuir%20(4).jpg');
  background-position: center top;
}
.m-tissage-portrait-2 { background-image: url('images/page_tissage/Abat-jour-tiss%C3%A9-soie-cuir%20(6).jpg'); }
.m-tissage-tech-1 { background-image: url('images/page_tissage/Tissages_couleurs.jpeg'); }
.m-tissage-tech-2 { background-image: url('images/page_tissage/landy_be.jpg'); }
.m-tissage-tech-3 { background-image: url('images/page_tissage/rabanne-revisitee.jpg'); }
.m-tissage-tech-4 { background-image: url('images/realisations/2026-10-14FOSA-46.jpg'); }

/* Images propres à la page Atelier */
.m-atelier-groupe { background-image: url('images/notre_atelier/Ampelasavoir%20faire%20Web_53.jpg'); }
.m-atelier-arriere {
  background-image: url('images/notre_atelier/section_2_arriere.JPG');
}
/* Spécificité renforcée pour battre .overlap-img { background-size: cover; }
   déclaré plus bas dans la feuille. */
.overlap-img.m-atelier-arriere {
  background-size: 150%;
  background-position: 35% 65%;
}
.m-atelier-avant { background-image: url('images/notre_atelier/section_2_avant.JPG'); }
.m-atelier-neny { background-image: url('images/notre_atelier/portrait_haingotiana.JPG'); }
.m-atelier-emilie { background-image: url('images/notre_atelier/portrait_emilie.jpg'); }
.m-team-kaliana { background-image: url('images/notre_atelier/portrait-kaliana.JPG'); }
.m-team-tovo { background-image: url('images/notre_atelier/portrait_tovo.JPG'); }
.m-team-tsilavina { background-image: url('images/notre_atelier/portrait-tsilavina.jpeg'); }
.m-team-nasy { background-image: url('images/notre_atelier/portrait-nasy.jpeg'); }

/* Masque le petit cadre-losange décoratif (::before) sur toutes les cases
   qui portent une vraie image. Les placeholders (sans classe m-*) le gardent. */
[class*="m-broderie"]::before,
[class*="m-tissage"]::before,
[class*="m-teinture"]::before,
[class*="m-atelier"]::before,
[class*="m-team"]::before,
[class*="m-rea"]::before,
[class*="m-contact"]::before {
  display: none;
}

.atelier-intertitle {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--c-ink);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  text-align: left;
}

.atelier-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .atelier-two-col {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 5rem);
  }
}
.atelier-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: #f3efe7;
  background-size: cover;
  background-position: center;
}
.atelier-text {
  max-width: 480px;
}

/* Réalisations : ouvrages réels sortis de l'atelier */
.m-rea-geometrie { background-image: url('images/realisations/2026-10-14FOSA-5.jpg'); }
.m-rea-jours     { background-image: url('images/realisations/2026-10-14FOSA-26-bis.jpg'); }
.m-rea-perlages  { background-image: url('images/realisations/2026-10-14FOSA-23.jpg'); }
.m-rea-smock     { background-image: url('images/realisations/Smock_perl%C3%A9_sur%20rabane.jpeg'); }
.m-rea-dia       { background-image: url('images/realisations/manteau-court-dia-detail.jpg'); }
.m-rea-mihaja    { background-image: url('images/realisations/manteau-long-mihaja-detail.jpg'); }
.m-rea-malala    { background-image: url('images/realisations/robe-malala-detail.jpg'); }
.m-rea-anjara    { background-image: url('images/realisations/haut-anjara-court-detail.jpg'); }
.m-rea-coussin-lin { background-image: url('images/realisations/2026-10-14FOSA-36.jpg'); }
.m-rea-coussin-lin-2 { background-image: url('images/realisations/2026-10-14FOSA-72.jpg'); }
.m-rea-blouse { background-image: url('images/realisations/blouse-harinavalona-detail.jpg'); }
.m-rea-linge-fleur { background-image: url('images/realisations/Set-de-table-bleu-fleur%20(2).jpg'); }
.m-rea-linge-table { background-image: url('images/realisations/Set-de-table-blanc-bulles%20(29).jpg'); }
.m-rea-paravent { background-image: url('images/realisations/Paravent-soie-brod%C3%A9%20(8).jpg'); }
.m-rea-abat-jour-smock { background-image: url('images/realisations/Abat-jour-smock-rabanne%20(8).jpg'); }
.m-rea-abat-jour-cuir { background-image: url('images/realisations/Abat-jour-tiss%C3%A9-soie-cuir%20(2).jpg'); }
.m-rea-abat-jour { background-image: url('images/realisations/Abat-jour-soie-brod%C3%A9e%20(15).jpg'); }
.m-rea-coussin-soie { background-image: url('images/realisations/2026-10-14FOSA-67-bis.jpg'); }

/* Placeholders : cases en attente d'ouvrages à venir */
.rea-sq-placeholder,
.catalog-item-placeholder {
  cursor: default;
  pointer-events: none;
}
.rea-sq-placeholder .cover-media,
.catalog-item-placeholder .cover-media {
  filter: none;
}

/* Section « À deux voix » : intertitre, intro, portraits alternés */
.founders-section {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(4rem, 8vw, 6.5rem);
}
.founders-intertitle {
  text-align: left;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.founders-intro {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(0.82rem, 0.95vw, 0.92rem);
  line-height: 1.75;
  letter-spacing: 0.015em;
  color: var(--c-ink);
  text-align: left;
  margin-bottom: clamp(4rem, 8vw, 6rem);
}
.founder-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(5rem, 9vw, 7rem);
}
.founder-block:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  .founder-block {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 5rem);
  }
}
/* Mobile : le portrait passe avant la citation */
@media (max-width: 899px) {
  .founder-block .founder-portrait { order: -1; }
}
.founder-portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: #f3efe7;
  background-size: cover;
  background-position: center;
}
.founder-quote-figure {
  margin: 0;
  max-width: 460px;
}
.founder-quote-figure blockquote {
  font-family: var(--f-serif);
  font-size: clamp(1.3rem, 1.95vw, 1.65rem);
  line-height: 1.5;
  color: var(--c-ink);
  margin: 0;
  quotes: none;
}
.founder-quote-figure blockquote em {
  font-style: italic;
}
.founder-quote-figure figcaption {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--c-ink-soft);
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}
.founder-quote-figure figcaption p + p {
  margin-top: 0.9em;
}
.founder-quote-figure blockquote sup,
.founders-footnote sup {
  font-size: 0.7em;
  vertical-align: super;
  color: var(--c-ink-mute);
  margin-left: 0.1em;
}
.founder-note {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--c-ink-mute);
  margin-top: clamp(1rem, 1.75vw, 1.5rem);
}
.founder-note em { font-style: italic; }

/* Section « Aux côtés de l'atelier » : trois portraits sobres */
.team-section {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 9vw, 7rem);
}
.team-intro {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(0.82rem, 0.95vw, 0.92rem);
  line-height: 1.75;
  letter-spacing: 0.015em;
  color: var(--c-ink);
  text-align: left;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 640px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
  }
}
@media (min-width: 900px) {
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}
/* Mobile : cartes à faire défiler, comme le catalogue des pages savoir-faire */
@media (max-width: 639px) {
  .team-grid {
    display: flex;
    gap: clamp(1rem, 2vw, 1.75rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .team-grid::-webkit-scrollbar { display: none; }
  .team-grid > .team-member {
    flex: 0 0 85%;
    max-width: none;
    scroll-snap-align: start;
  }
  .team-portrait { aspect-ratio: 3 / 4; }
}
.team-member {
  margin: 0;
  display: flex;
  flex-direction: column;
  max-width: 380px;
}
.team-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #f3efe7;
  background-size: cover;
  background-position: center;
  margin-bottom: clamp(1.25rem, 2vw, 1.5rem);
}
.team-name {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--c-ink);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}
.team-role {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--c-ink-soft);
  letter-spacing: 0.015em;
}

/* Manifeste : liste des trois entrées, écart vertical */
.manifesto-entries {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 5vw, 4rem);
}
.manifesto-entry .atelier-intertitle {
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}
.page-intro + .page-intro-italic {
  margin-top: 1.5rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Page Contact — deux colonnes très sobres, infos à gauche, image à droite
   -------------------------------------------------------------------------- */
.contact-section {
  padding-block: clamp(5rem, 10vw, 8rem);
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(3rem, 6vw, 5rem);
  }
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
}
.contact-block h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: 0.9rem;
}
.contact-block p {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-ink-soft);
  letter-spacing: 0.02em;
}
.contact-block a {
  color: var(--c-ink-soft);
  text-decoration: none;
  font-weight: 400;
  transition: color var(--t-fast) var(--ease);
}
.contact-block a:hover { color: var(--c-ink); }

.contact-media {
  width: 100%;
}
.contact-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: #f3efe7;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.contact-image::before {
  content: '';
  position: absolute;
  inset: 45%;
  border: 1px solid #e2dcd0;
  opacity: 0.6;
}
/* Placeholder par défaut : accueil_broderie si aucune image dédiée */
.m-contact-1 {
  background-image: url('images/accueil_broderie.jpg');
}

/* --------------------------------------------------------------------------
   Footer — centered, sober, no slogan
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--c-bg);
  color: var(--c-ink);
  padding-block: clamp(3.5rem, 6vw, 5rem);
  text-align: center;
}

/* Bloc newsletter dans le footer : bande centrée sobre, avant le logo */
.footer-newsletter {
  max-width: 480px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
}
.newsletter-title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  color: var(--c-ink);
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
}
.newsletter-lead {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--c-ink-soft);
  margin: 0 0 1.75rem;
  letter-spacing: 0.015em;
}
.newsletter-form {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.015em;
  color: var(--c-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  padding: 0.5rem 0;
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.newsletter-form input[type="email"]::placeholder {
  color: var(--c-ink-mute);
}
.newsletter-form input[type="email"]:focus {
  border-bottom-color: var(--c-ink);
}
.newsletter-form button {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: transparent;
  border: 0;
  padding: 0.5rem 0;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.newsletter-form button:hover {
  color: var(--c-ink-soft);
}
/* Soulignement très fin qui se trace progressivement au survol */
.newsletter-form button:not([disabled]) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  padding-bottom: 0.4rem;
  transition: color var(--t-fast) var(--ease), background-size 500ms var(--ease);
}
.newsletter-form button:not([disabled]):hover,
.newsletter-form button:not([disabled]):focus-visible {
  background-size: 100% 1px;
}
.newsletter-form button[disabled] {
  color: var(--c-ink-faint);
  cursor: default;
}
.newsletter-msg {
  flex: 1 0 100%;
  margin: 1rem 0 0;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.72rem;
  color: var(--c-ink-mute);
  letter-spacing: 0.02em;
  min-height: 1.2em;
}
.newsletter-msg.is-success { color: var(--c-ink); }
.newsletter-msg.is-error   { color: #a84040; }
.footer-brand {
  display: inline-block;
  line-height: 1;
  margin-bottom: 2rem;
  height: 60px;
}
.footer-brand img {
  height: 100%;
  width: auto;
  display: block;
}
.footer-line {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.footer-line > a {
  color: var(--c-ink-soft);
  transition: color var(--t-fast) var(--ease);
}
.footer-line > a:hover { color: var(--c-ink); }

.footer-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-ink-mute);
}
.footer-lang a { color: var(--c-ink-mute); transition: color var(--t-fast) var(--ease); }
.footer-lang a.active { color: var(--c-ink); }
.footer-lang a:hover { color: var(--c-ink); }
.footer-lang span { color: var(--c-ink-faint); }

/* --------------------------------------------------------------------------
   Inner pages (savoir-faire template)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: clamp(8rem, 15vw, 11rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  background: var(--c-bg);
  text-align: left;
}
.page-hero-title {
  margin-bottom: 1.25rem;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: 0.008em;
  color: var(--c-ink);
}
.page-hero.page-hero-centered {
  text-align: left;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.page-hero-centered .page-hero-title {
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.page-intro {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(0.82rem, 0.95vw, 0.92rem);
  line-height: 1.75;
  color: var(--c-ink);
  letter-spacing: 0.015em;
  max-width: 72ch;
  margin: 0;
}
.page-hero-subtitle {
  font-family: var(--f-sans);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.6;
  color: var(--c-ink-soft);
  letter-spacing: 0.015em;
  max-width: 52ch;
  margin: 0;
}

.section-title {
  text-align: left;
  margin-bottom: 2.5rem;
}
.section-title .eyebrow { margin-bottom: 1rem; }

/* Two-column: images left, text right */
.two-col {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; }
}
.two-col-images {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: 1fr;
}
.two-col-img {
  aspect-ratio: 3 / 4;
  background-color: #f3efe7;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.two-col-img::before {
  content: '';
  position: absolute;
  inset: 42%;
  border: 1px solid #e2dcd0;
  opacity: 0.6;
}
.two-col-text .prose { max-width: 100%; }

/* Page media blocks (landscape hero image + portrait duo) */
.page-media {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(4rem, 8vw, 6rem);
}
.page-media.page-media-flush {
  padding-bottom: 0;
}
/* Mobile uniquement : images Savoir-faire en pleine largeur (hors bloc superposé) */
@media (max-width: 780px) {
  .page-media > .container,
  .page-media > .container-md {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 699px) {
  .page-media-landscape { aspect-ratio: 4 / 5; }
}
.page-media-landscape {
  aspect-ratio: 16 / 9;
  background-color: #f3efe7;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}
.page-media-landscape::before {
  content: '';
  position: absolute;
  inset: 45%;
  border: 1px solid #e2dcd0;
  opacity: 0.6;
}

.portraits-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
@media (min-width: 700px) {
  .portraits-duo { grid-template-columns: repeat(2, 1fr); }
}
.portrait {
  aspect-ratio: 3 / 4;
  background-color: #f3efe7;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.portrait::before {
  content: '';
  position: absolute;
  inset: 42%;
  border: 1px solid #e2dcd0;
  opacity: 0.6;
}
.portraits-duo.portraits-tall .portrait {
  aspect-ratio: 3 / 4;
}

/* Offset-right block: content nested to the right column */
.offset-right {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .offset-right {
    grid-template-columns: 1fr 1fr;
  }
  .offset-right > * {
    grid-column: 2;
  }
}

/* Two-column with overlapping images on the right */
.two-col-overlap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .two-col-overlap {
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(3.5rem, 6vw, 6rem);
  }
}
/* Mobile : texte d'abord, puis les images superposées */
@media (max-width: 899px) {
  .two-col-overlap .two-col-text { order: -1; }
  .two-col-overlap { gap: 2.75rem; }
  /* Pages savoir-faire : même espace (1.5rem) entre toutes les sections */
  body:has(.page-media) .page-hero { padding-bottom: 0 !important; }
  body:has(.page-media) section:not(.page-hero) { padding-top: 2.75rem !important; }
  body:has(.page-media) section:not(.page-hero):not(:last-of-type) { padding-bottom: 0 !important; }
}
.two-col-overlap .two-col-text .display-m {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}
.overlap-images {
  position: relative;
  aspect-ratio: 5 / 4;
  width: 100%;
}
.overlap-img {
  position: absolute;
  background-color: #f3efe7;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.overlap-img::before {
  content: '';
  position: absolute;
  inset: 42%;
  border: 1px solid #e2dcd0;
  opacity: 0.6;
}
/* Main image on the right, centered vertically */
.overlap-img-a {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 70%;
  aspect-ratio: 4 / 5;
  filter: grayscale(100%);
}
/* Square image on the left, centered vertically, overlapping the main */
.overlap-img-b {
  left: 18%;
  top: 50%;
  transform: translateY(-50%);
  width: 58%;
  aspect-ratio: 1 / 1;
}

/* Wider prose block */
.prose.prose-wide { max-width: 100%; }

.prose {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(0.82rem, 0.95vw, 0.92rem);
  line-height: 1.75;
  color: var(--c-ink);
  letter-spacing: 0.015em;
  max-width: 62ch;
}
.prose p + p { margin-top: 1.5rem; }
.prose strong { font-weight: 500; color: var(--c-ink); }
.prose em { font-style: italic; font-weight: 300; }

/* Catalogue */
.catalog {
  background: var(--c-bg);
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.catalog-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.catalog-header .eyebrow { margin-bottom: 1rem; }
.catalog-quote {
  text-align: center;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
  padding: clamp(1.5rem, 2.5vw, 2.25rem) 1.5rem;
}
.catalog-quote p {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.35;
  color: var(--c-ink);
  letter-spacing: 0.015em;
  max-width: 34ch;
  margin: 0 auto;
}
.catalog-grid {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .catalog-grid { grid-template-columns: repeat(4, 1fr); } }
.catalog-grid-5 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .catalog-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .catalog-grid-5 { grid-template-columns: repeat(3, 1fr); } }
.catalog-grid-4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .catalog-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .catalog-grid-4 { grid-template-columns: repeat(4, 1fr); } }
.catalog-item {
  background: var(--c-bg);
  padding: 0;
}
.catalog-item .thumb {
  aspect-ratio: 1;
  background: #f3efe7;
  margin-bottom: 1.25rem;
  position: relative;
}
.catalog-item .thumb:not(.thumb-swatch)::before {
  content: '';
  position: absolute;
  inset: 42%;
  border: 1px solid #e2dcd0;
  opacity: 0.6;
}
.catalog-item h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--c-ink);
  margin-bottom: 0.5rem;
  letter-spacing: 0.015em;
}
.catalog-item p {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.82rem;
  color: var(--c-ink-soft);
  line-height: 1.65;
}

/* Catalog carousel: cards fill container (same width as portraits above),
   arrows sit in the container padding area on either side */
.catalog-carousel {
  position: relative;
}
.catalog-scroll {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.catalog-scroll::-webkit-scrollbar { display: none; }
.catalog-scroll { scrollbar-width: none; }
.catalog-scroll > .catalog-item-cover {
  flex: 0 0 calc((100% - clamp(1rem, 2vw, 1.75rem) * 2) / 3);
  scroll-snap-align: start;
}
@media (max-width: 780px) {
  .catalog-scroll > .catalog-item-cover {
    flex: 0 0 calc((100% - clamp(1rem, 2vw, 1.75rem)) / 2);
  }
}
@media (max-width: 520px) {
  .catalog-scroll > .catalog-item-cover {
    flex: 0 0 85%;
  }
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 0.75rem 0.5rem;
  cursor: pointer;
  color: var(--c-ink);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  line-height: 0;
}
.carousel-arrow:hover { color: var(--c-ink-soft); }
.carousel-arrow svg { display: block; }
.carousel-arrow-prev { right: 100%; margin-right: 0.5rem; }
.carousel-arrow-next { left: 100%; margin-left: 0.5rem; }
.carousel-arrow-prev:hover { transform: translate(-3px, -50%); }
.carousel-arrow-next:hover { transform: translate(3px, -50%); }
.carousel-arrow[disabled] { opacity: 0.25; cursor: default; }
.carousel-arrow[disabled]:hover { transform: translateY(-50%); }
.catalog .container { overflow: visible; }
@media (max-width: 900px) {
  .carousel-arrow { display: none; }
}

/* Catalog item with image cover + white text overlay (like sf-banner) */
.catalog-item-cover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #333;
  color: #fff;
}
.catalog-item-cover .cover-media {
  position: absolute;
  inset: 0;
  background-color: #f3efe7;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  transition: filter 700ms var(--ease);
}
.catalog-item-cover:hover .cover-media { filter: grayscale(0%); }
.catalog-item-cover .cover-media::before {
  content: '';
  position: absolute;
  inset: 44%;
  border: 1px solid rgba(255,255,255,0.15);
}
.catalog-item-cover .cover-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 50%, transparent 75%);
}
.catalog-item-cover .cover-content {
  position: absolute;
  bottom: clamp(1.25rem, 2vw, 1.75rem);
  left: clamp(1.25rem, 2vw, 1.75rem);
  right: clamp(1.25rem, 2vw, 1.75rem);
  z-index: 1;
  color: #fff;
}
.catalog-item-cover h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  color: #fff;
  margin-bottom: 0.5rem;
  letter-spacing: 0.015em;
}
.rea-list {
  padding-block: clamp(2rem, 4vw, 3rem);
}
.rea-list-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .rea-list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .rea-list-grid { grid-template-columns: repeat(3, 1fr); }
}
.rea-list-grid button.catalog-item-cover {
  padding: 0;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Pagination : flèches minimalistes sous la grille */
.rea-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
.rea-pager-arrow {
  background: none;
  border: 0;
  padding: 0.5rem;
  color: var(--c-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 300ms var(--ease), color 300ms var(--ease);
}
.rea-pager-arrow svg { width: 36px; height: 36px; }
.rea-pager-arrow:hover {
  color: var(--c-ink);
  opacity: 0.6;
}
.rea-pager-arrow[disabled] {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}
.rea-pager-status {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.75rem;
  color: var(--c-ink-mute);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  min-width: 3rem;
  text-align: center;
}
.catalog-item-cover[data-pager-hidden="true"] {
  display: none !important;
}

/* Fondu général de la page vers le blanc quand la modale s'ouvre.
   Le fond blanc du body devient le "backdrop" pendant que l'image de la carte
   "vole" vers la modale, sans nécessiter de calque supplémentaire. */
body > .overlay-menu,
body > section,
body > .site-footer {
  transition: opacity 600ms var(--ease);
}
body.rea-open > .overlay-menu,
body.rea-open > section,
body.rea-open > .site-footer {
  opacity: 0;
  pointer-events: none;
}
/* On efface visuellement le header pour ne laisser que le hamburger morphé en croix */
body > .site-header .brand,
body > .site-header .lang { transition: opacity 400ms var(--ease); }
body.rea-open > .site-header {
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 302;
}
body.rea-open > .site-header .brand,
body.rea-open > .site-header .lang {
  opacity: 0;
  pointer-events: none;
}

/* Modale d'une réalisation (avec animation FLIP de l'image) */
.rea-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  visibility: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background-color: var(--c-bg);
}
.rea-modal.is-open {
  pointer-events: auto;
  visibility: visible;
}
/* Pendant la fermeture, le fond blanc de la modale devient transparent
   progressivement, en même temps que l'image rétrécit vers sa case. Le
   contenu de la page dessous (grille, header, sections) réapparaît en
   douceur au lieu de « pop » au moment où la modale disparaît. */
.rea-modal.is-closing {
  transition: background-color 500ms var(--ease);
  background-color: transparent;
}

.rea-modal-inner {
  position: relative;
  z-index: 1;
}
.rea-modal-hero {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  gap: 0;
}
@media (min-width: 900px) {
  .rea-modal-hero { grid-template-columns: 1fr 1fr; }
}

/* Bloc « produit fini » : 1 à 3 photos qui apparaissent au scroll.
   1 photo → pleine largeur ; 2 photos → côte à côte ; 3 photos → les 2
   premières côte à côte, la 3e seule en dessous (adaptée au cas où la
   3e est une photo horizontale servant de plan large). */
.rea-modal-finished {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 2vw, 1.75rem);
  background: var(--c-bg);
}
@media (min-width: 700px) {
  .rea-modal-finished {
    grid-template-columns: 1fr 1fr;
  }
  .rea-modal-finished-img[data-slot="3"] {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 2;
  }
  /* Variante : photos empilées en pleine largeur, format horizontal */
  .rea-modal-finished[data-layout="stacked-horizontal"] {
    grid-template-columns: 1fr;
  }
  .rea-modal-finished[data-layout="stacked-horizontal"] .rea-modal-finished-img {
    aspect-ratio: 3 / 2;
  }
}
.rea-modal-finished-img[hidden] { display: none; }
.rea-modal-finished-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #f3efe7;
  background-size: cover;
  background-position: center;
}
/* Masquer le bloc quand aucune photo n'est fournie sur la case cliquée */
.rea-modal-finished[data-empty="true"] {
  display: none;
}
.rea-modal-media {
  background-color: #f3efe7;
  background-size: cover;
  background-position: center;
  min-height: 60vh;
  position: relative;
  will-change: transform;
}
@media (min-width: 900px) {
  .rea-modal-media { min-height: 100vh; }
}
.rea-modal-media::before {
  content: '';
  position: absolute;
  inset: 45%;
  border: 1px solid rgba(255,255,255,0.15);
}

.rea-modal-text {
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 620px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 400ms var(--ease), transform 500ms var(--ease);
}
.rea-modal.is-open:not(.is-closing) .rea-modal-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 500ms;
}
.rea-modal.is-closing .rea-modal-text {
  opacity: 0;
  transform: translateY(12px);
  transition-duration: 220ms;
  transition-delay: 0s;
}
/* Une fois le fade-in terminé, retire toute animation et propriété qui
   force le GPU compositor sur le bloc texte. Sans ça, backface-visibility /
   will-change / translate3d font sauter l'antialiasing subpixel du texte,
   ce qui produit un effet strié / doublé sur les caractères. */
.rea-modal-text {
  will-change: auto;
  backface-visibility: visible;
  transform-style: flat;
}

.rea-modal-title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  line-height: 1.2;
  color: var(--c-ink);
  letter-spacing: 0.008em;
  margin-bottom: 0.75rem;
}
.rea-modal-meta {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.78rem;
  color: var(--c-ink-mute);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 2.25rem;
}
.rea-modal-share {
  margin-top: 2rem;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  cursor: pointer;
}
.rea-modal-share:hover { color: var(--c-ink); }
.rea-modal-body {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.85;
  color: var(--c-ink);
  letter-spacing: 0.015em;
}
.rea-modal-body p + p { margin-top: 1rem; }

/* Le bouton de fermeture interne à la modale est masqué :
   c'est le hamburger du header (morphé en croix) qui joue ce rôle. */
.rea-modal-close { display: none; }

/* --- Hamburger <-> Croix (bouton morphé quand la modale est ouverte) --- */
.menu-toggle .bar {
  transition: background var(--t-slow) var(--ease),
              width 450ms var(--ease),
              transform 450ms var(--ease),
              opacity 250ms var(--ease);
  transform-origin: center;
}
.menu-toggle.is-cross .bar:nth-child(1) {
  width: 22px;
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle.is-cross .bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.menu-toggle.is-cross .bar:nth-child(3) {
  width: 22px;
  transform: translateY(-7px) rotate(-45deg);
}


.catalog-item-cover p {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 4);
}

/* Echo, crossref */
.echo {
  background: var(--c-bg);
  padding-block: clamp(5rem, 10vw, 8rem);
  border-top: 1px solid var(--c-line-soft);
}
.echo blockquote {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.85vw, 1.55rem);
  line-height: 1.6;
  color: var(--c-ink);
  text-align: center;
  max-width: 42ch;
  margin: 0 auto;
  letter-spacing: 0.015em;
}
.echo .attrib {
  display: block;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-top: 2.5rem;
}

.crossref {
  background: var(--c-bg);
  padding-block: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--c-line-soft);
}
.crossref-header { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.crossref-header .eyebrow { margin-bottom: 1rem; }
.crossref-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .crossref-grid { grid-template-columns: repeat(3, 1fr); } }
.crossref-item {
  display: block;
  background: var(--c-bg);
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease);
}
.crossref-item:hover { transform: translateY(-3px); }
.crossref-media {
  aspect-ratio: 4 / 5;
  margin-bottom: 1.25rem;
  background: #f3efe7;
  position: relative;
}
.crossref-media::before {
  content: '';
  position: absolute;
  inset: 42%;
  border: 1px solid #e2dcd0;
  opacity: 0.6;
}
.crossref-item h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--c-ink);
  margin-bottom: 0.5rem;
  letter-spacing: 0.015em;
}
.crossref-item p {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.88rem;
  color: var(--c-ink-soft);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* (Old mobile navigation removed — replaced by universal .overlay-menu above) */

/* --------------------------------------------------------------------------
   Écrans tactiles (pas de survol) : l'image passe en couleur quand elle
   atteint le centre de l'écran. Classe posée par scripts.js (is-centered).
   -------------------------------------------------------------------------- */
/* Tactile : le défilement vertical fait avancer les cartes (scripts.js) */
@media (hover: none) and (max-width: 780px) {
  .catalog-scroll,
  .team-grid {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}
@media (hover: none) and (max-width: 780px) {
  .sf-banner.is-centered .sf-banner-media,
  .sf-duo-block.is-centered .sf-duo-media,
  .rea-sq.is-centered .cover-media,
  .catalog-item-cover.is-centered .cover-media {
    filter: grayscale(0%);
  }
}

/* --------------------------------------------------------------------------
   Mobile : header plus fin. Après le début du texte, il suit le défilement :
   il monte quand on descend et se laisse « tirer » vers le bas quand on
   remonte (translateY piloté en continu par scripts.js, sans transition).
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
  .brand { height: 44px; }
  .site-header { will-change: transform; }
  body.menu-open .site-header,
  body.rea-open .site-header { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Viewers sur petits écrans : les images gardent leur vrai format (le ratio
   est posé en variable --ar par scripts.js), sans recadrage carré ou 4:5.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .rea-modal-hero { min-height: 0; align-items: start; }
  .rea-modal-media {
    min-height: 0;
    aspect-ratio: var(--ar, 4 / 5);
    background-size: cover;
  }
}
@media (max-width: 699px) {
  .rea-modal-finished-img { aspect-ratio: var(--ar, 4 / 5); }
}
/* Vignettes légères pour la grille Réalisations (le visualiseur garde l'original) */
.rea-sq .m-rea-geometrie { background-image: url('images/realisations/vignettes/2026-10-14FOSA-5.jpg'); }
.rea-sq .m-rea-jours { background-image: url('images/realisations/vignettes/2026-10-14FOSA-26-bis.jpg'); }
.rea-sq .m-rea-perlages { background-image: url('images/realisations/vignettes/2026-10-14FOSA-23.jpg'); }
.rea-sq .m-rea-smock { background-image: url('images/realisations/vignettes/Smock_perl%C3%A9_sur%20rabane.jpeg'); }
.rea-sq .m-rea-dia { background-image: url('images/realisations/vignettes/manteau-court-dia-detail.jpg'); }
.rea-sq .m-rea-mihaja { background-image: url('images/realisations/vignettes/manteau-long-mihaja-detail.jpg'); }
.rea-sq .m-rea-malala { background-image: url('images/realisations/vignettes/robe-malala-detail.jpg'); }
.rea-sq .m-rea-anjara { background-image: url('images/realisations/vignettes/haut-anjara-court-detail.jpg'); }
.rea-sq .m-rea-coussin-lin { background-image: url('images/realisations/vignettes/2026-10-14FOSA-36.jpg'); }
.rea-sq .m-rea-coussin-lin-2 { background-image: url('images/realisations/vignettes/2026-10-14FOSA-72.jpg'); }
.rea-sq .m-rea-blouse { background-image: url('images/realisations/vignettes/blouse-harinavalona-detail.jpg'); }
.rea-sq .m-rea-linge-fleur { background-image: url('images/realisations/vignettes/Set-de-table-bleu-fleur%20%282%29.jpg'); }
.rea-sq .m-rea-linge-table { background-image: url('images/realisations/vignettes/Set-de-table-blanc-bulles%20%2829%29.jpg'); }
.rea-sq .m-rea-paravent { background-image: url('images/realisations/vignettes/Paravent-soie-brod%C3%A9%20%288%29.jpg'); }
.rea-sq .m-rea-abat-jour-smock { background-image: url('images/realisations/vignettes/Abat-jour-smock-rabanne%20%288%29.jpg'); }
.rea-sq .m-rea-abat-jour-cuir { background-image: url('images/realisations/vignettes/Abat-jour-tiss%C3%A9-soie-cuir%20%282%29.jpg'); }
.rea-sq .m-rea-abat-jour { background-image: url('images/realisations/vignettes/Abat-jour-soie-brod%C3%A9e%20%2815%29.jpg'); }
.rea-sq .m-rea-coussin-soie { background-image: url('images/realisations/vignettes/2026-10-14FOSA-67-bis.jpg'); }

/* Ouvrages d'exception (accueil) : au survol, en plus de la couleur, le titre et la
   catégorie apparaissent comme sur les cartes de la page Réalisations */
.rea-sq .cover-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 50%, transparent 75%);
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.rea-sq .cover-content {
  position: absolute;
  bottom: clamp(1rem, 1.6vw, 1.5rem);
  left: clamp(1rem, 1.6vw, 1.5rem);
  right: clamp(1rem, 1.6vw, 1.5rem);
  z-index: 1;
  text-align: left;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  pointer-events: none;
}
.rea-sq .cover-content h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.25vw, 1.2rem);
  line-height: 1.25;
  letter-spacing: 0.015em;
  color: #fff;
  margin: 0 0 0.35rem;
}
.rea-sq .cover-content p {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.9);
  margin: 0;
}
.rea-sq:hover .cover-media::after,
.rea-sq:focus-visible .cover-media::after { opacity: 1; }
.rea-sq:hover .cover-content,
.rea-sq:focus-visible .cover-content { opacity: 1; transform: none; }
@media (hover: none) and (max-width: 780px) {
  .rea-sq.is-centered .cover-media::after { opacity: 1; }
  .rea-sq.is-centered .cover-content { opacity: 1; transform: none; }
  .rea-sq .cover-content h4 { font-size: 0.9rem; }
  .rea-sq .cover-content p { font-size: 0.7rem; }
}