/* ═══════════════════════════════════════════════════════════════
   ATELIER BENJAMIN RIADO — Système visuel
   ─────────────────────────────────────────────────────────────
   Palette principale  : bleu pétrole + papier crème
   Accent (tweakable) : céladon · terre rouge · encre
   Typo              : Saira Condensed (display) / EB Garamond (text)
═════════════════════════════════════════════════════════════════ */

:root {
  /* Palette */
  --c-petrol:   #2f5f69;
  --c-petrol-d: #163f47;
  --c-cream:    #f1e9da;
  --c-paper:    #f7f1e5;
  --c-porcel:   #faf6ee;
  --c-ink:      #1d2b2f;

  /* Accent (tournant via tweaks) */
  --c-accent:   #b4c7b9;       /* céladon par défaut */
  --c-accent-d: #93ad99;

  /* Softness (tweakable) */
  --photo-radius: 18px;

  /* Type stacks */
  --ff-display: 'Unica One', 'Saira Condensed', 'Barlow Condensed', sans-serif;
  --ff-body:    'EB Garamond', 'Cormorant Garamond', 'Libre Caslon Text', Georgia, serif;
  --ff-mono:    'Saira Condensed', 'Barlow Condensed', sans-serif;

  /* Spacing */
  --gap: clamp(20px, 2.5vw, 40px);
  --pad-x: clamp(28px, 6vw, 120px);
  --section-y: clamp(70px, 9vw, 140px);

  /* Mesures */
  --measure: 62ch;
  --line: 1.55;
}

/* ─── Reset / base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; height: 100%; }
body {
  margin: 0;
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: var(--line);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga','kern','onum';
  text-wrap: pretty;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
h1,h2,h3,h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }
dl,dt,dd { margin: 0; }

/* Lu par les moteurs de recherche et les lecteurs d'écran, invisible à l'écran */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
address { font-style: normal; }

/* Reusable display label */
.disp {
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════════════ */
.topbar {
  position: relative; z-index: 50; flex: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 14px var(--pad-x);
  background: color-mix(in srgb, var(--c-cream) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--c-petrol) 18%, transparent);
}
.topbar-mark { display: flex; align-items: center; gap: 28px; flex: none; }
.topbar-picto { width: 20px; height: auto; }
.topbar-wordmark {
  position: relative; display: block; line-height: 1;
  font-family: var(--ff-display);
  color: var(--c-petrol);
}
.wm-lead {
  position: absolute; bottom: 100%; left: 0;
  margin-bottom: 0px;
  font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; font-weight: 500;
  color: color-mix(in srgb, var(--c-petrol) 65%, transparent);
}
.wm-name {
  display: block;
  font-size: 21px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.topbar-nav {
  display: flex; gap: 30px;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-petrol);
}
.topbar-nav { flex-wrap: nowrap; }
.topbar-nav a { white-space: nowrap;
  position: relative; padding: 4px 0;
  transition: color .25s;
}
.topbar-nav a::after {
  content: ''; position: absolute; left: 50%; bottom: -3px;
  width: 0; height: 1px; background: currentColor;
  transition: width .3s, left .3s;
}
.topbar-nav a:hover::after { width: 100%; left: 0; }
.topbar-meta {
  display: flex; gap: 10px;
  font-family: var(--ff-body); font-style: italic;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-petrol) 75%, transparent);
}
.meta-sep { opacity: 0.45; }

/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 88vh;
  display: block;
  padding: clamp(22px, 3.2vh, 46px) var(--pad-x) clamp(34px, 5vh, 72px);
  overflow: hidden;
}
.hero-top {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
  min-height: calc(88vh - clamp(34px, 5vh, 72px) * 2);
}
.hero-cta { display: none; }
.hero-cta--unused {
  position: absolute; z-index: 3;
  right: clamp(80px, 12vw, 190px); bottom: clamp(90px, 16vh, 170px);
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 26px;
  text-decoration: none;
  background: color-mix(in srgb, var(--c-petrol-d) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-porcel) 45%, transparent);
  backdrop-filter: blur(3px);
  transition: background .25s ease, border-color .25s ease;
}
.hero-cta:hover { background: var(--c-petrol-d); border-color: var(--c-porcel); }
.hcta-lead {
  font-family: var(--ff-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-porcel);
}
.hcta-mail {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--ff-body); font-size: 16px; line-height: 1.2;
  color: var(--c-porcel);
}
.hcta-arrow { font-size: 15px; }
.hero-picto {
  align-self: flex-end;
  margin-right: clamp(28px, 3.4vw, 58px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.hero-insta-lede {
  font-family: var(--ff-body); font-style: italic;
  font-size: 15px;
  color: color-mix(in srgb, var(--c-porcel) 82%, transparent);
  margin: 0;
}
.hero-picto .hero-insta-lede + .hero-insta { margin-top: -6px; }
.hero-insta {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding-bottom: 5px;
  color: var(--c-porcel);
  border-bottom: 1px solid color-mix(in srgb, var(--c-porcel) 45%, transparent);
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: border-color .3s, color .3s;
}
.hero-insta:hover { color: var(--c-porcel); border-bottom-color: var(--c-porcel); }
.hero-insta .hi-at { font-family: var(--ff-body); font-style: italic; font-size: 15px; letter-spacing: 0; }
.hero-insta .hi-arrow { font-size: 12px; letter-spacing: 0; }
.hero-picto img { width: clamp(44px, 5.4vh, 66px); height: auto; opacity: .9; }
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  border-radius: var(--photo-radius);
  overflow: hidden;
}
.hero-img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 97% 58%;
  transform: scale(1.28); transform-origin: 97% 58%;
  filter: saturate(0.72) contrast(0.94) brightness(0.9);
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 6% 8%, rgba(15,44,50,0.82) 0%, rgba(15,44,50,0.42) 42%, rgba(15,44,50,0.06) 72%),
    linear-gradient(180deg, rgba(15,44,50,0.5) 0%, rgba(15,44,50,0.14) 45%, rgba(15,44,50,0.34) 100%);
}

.hero-frame {
  position: relative; z-index: 2;
  max-width: 620px;
  color: var(--c-porcel);
}

.hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(18px, 2.6vh, 34px);
}
.eyebrow-rule {
  display: block; width: 60px; height: 1px;
  background: currentColor; opacity: 0.7;
}
.eyebrow-text {
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
}

.hero-cartouche { margin-bottom: 0; }
.hero-cartouche img {
  width: clamp(260px, 34vw, 430px);
  height: auto;
}

.hero-lede {
  font-family: var(--ff-body);
  font-size: clamp(20px, 1.55vw, 25px);
  line-height: 1.45;
  max-width: 540px;
  color: color-mix(in srgb, var(--c-porcel) 95%, transparent);
}
.hero-lede em {
  font-style: italic;
  color: color-mix(in srgb, var(--c-porcel) 75%, transparent);
}

.hero-cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 36px;
}

.btn-primary, .btn-ghost, .btn-inverse {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  font-family: var(--ff-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  border-radius: 999px;
  transition: transform .2s, background .2s, color .2s;
}
.btn-primary {
  background: var(--c-porcel);
  color: var(--c-petrol);
}
.btn-primary:hover { background: var(--c-accent); }
.btn-ghost {
  background: transparent;
  color: var(--c-porcel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-porcel) 70%, transparent);
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-inverse {
  background: var(--c-porcel);
  color: var(--c-petrol);
  margin-top: 28px;
}
.btn-inverse:hover { background: var(--c-accent); }

.hero-floor {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  border-top: 1px solid color-mix(in srgb, var(--c-porcel) 35%, transparent);
  padding: 22px 0;
  color: var(--c-porcel);
}
.floor-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 22px;
  border-left: 1px solid color-mix(in srgb, var(--c-porcel) 18%, transparent);
}
.floor-cell:first-child { border-left: 0; padding-left: 0; }
.cell-k {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px; letter-spacing: 0.02em;
  line-height: 1;
}
.cell-v {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--c-porcel) 70%, transparent);
}
.floor-cell--mark {
  justify-self: end;
  border-left: 0;
  padding: 0;
}
.floor-cell--mark img {
  width: 56px; height: auto; opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════
   MANIFESTE
═══════════════════════════════════════════════════════════════ */
.manifest {
  background: var(--c-cream);
  padding: var(--section-y) var(--pad-x);
}
.manifest-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
.manifest-say { position: relative; }
.manifest-figure { margin: 0; }
.manifest-figure image-slot {
  display: block; width: 100%;
  height: auto; aspect-ratio: 4 / 5;
  border-radius: var(--photo-radius);
  overflow: hidden;
}
.manifest-figure figcaption {
  display: flex; gap: 12px; align-items: baseline;
  margin-top: 14px;
}
.manifest-figure .fig-num {
  font-family: var(--ff-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-accent-d); white-space: nowrap;
}
.manifest-figure .fig-cap {
  font-family: var(--ff-body); font-style: italic;
  font-size: 14px; line-height: 1.5;
  color: color-mix(in srgb, var(--c-petrol) 68%, transparent);
}
.manifest-marker {
  font-family: var(--ff-display);
  font-size: 11px; letter-spacing: 0.32em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-petrol) 70%, transparent);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 32px;
}
.manifest-marker span {
  font-family: var(--ff-body); font-style: italic;
  font-size: 22px; letter-spacing: 0; color: var(--c-accent-d);
}
.manifest-text {
  font-family: var(--ff-body);
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.18;
  font-weight: 400;
  color: var(--c-petrol);
  max-width: 22ch;
  text-wrap: balance;
}
.manifest-text em {
  font-style: italic;
  color: var(--c-accent-d);
}
.manifest-text .m-soft em { color: var(--c-petrol); }
.manifest-text .m-soft {
  display: block;
  color: color-mix(in srgb, var(--c-petrol) 82%, transparent);
  font-size: 0.62em;
  margin-top: 0.5em;
  line-height: 1.35;
  max-width: 32ch;
}
.manifest-text .m-soft:nth-of-type(2) { margin-top: 0.2em; }
.manifest-text .m-soft:last-of-type { margin-top: 0.2em; }

.manifest-body {
  font-family: var(--ff-body);
  font-size: clamp(19px, 1.5vw, 24px);
  line-height: 1.6;
  color: var(--c-petrol);
  max-width: 62ch;
}
.manifest-sig {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(26px, 3.4vh, 46px);
}
.manifest-sig img { width: 44px; }
.manifest-sig img {
  width: 64px; height: auto; opacity: 0.6;
}
.manifest-sig span {
  font-family: var(--ff-display);
  font-size: 11px; letter-spacing: 0.32em;
  font-weight: 600;
  color: color-mix(in srgb, var(--c-petrol) 70%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER — réutilisable
═══════════════════════════════════════════════════════════════ */
.section-header {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center; gap: 18px;
  padding: 0 0 28px;
}
.sh-num {
  font-family: var(--ff-display);
  font-weight: 800; font-size: 13px;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--c-petrol) 80%, transparent);
}
.sh-label {
  font-family: var(--ff-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c-petrol);
}
.sh-rule {
  height: 1px;
  background: color-mix(in srgb, var(--c-petrol) 35%, transparent);
}
.sh-meta {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--c-petrol) 70%, transparent);
}
.section-header--inverse .sh-num,
.section-header--inverse .sh-label { color: var(--c-porcel); }
.section-header--inverse .sh-rule { background: color-mix(in srgb, var(--c-porcel) 40%, transparent); }
.section-header--inverse .sh-meta { color: color-mix(in srgb, var(--c-porcel) 75%, transparent); }

/* ═══════════════════════════════════════════════════════════════
   ATELIER
═══════════════════════════════════════════════════════════════ */
.atelier {
  background: var(--c-paper);
  padding: clamp(24px, 3vh, 52px) var(--pad-x);
  display: flex; flex-direction: column;
}
.atelier--mirror { background: var(--c-cream); }
.atelier--mirror .atelier-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
.atelier--mirror .atelier-text { order: 0; }
.atelier--mirror .atelier-figure { order: 1; margin-right: clamp(24px, 4vw, 64px); }
.atelier-grid {
  flex: 1;
  align-content: center;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.atelier-figure { margin: 0; }
.trio-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto; gap: 12px;
}
.trio-cell--lead { grid-column: 1 / -1; }
.atelier-figure--trio .trio-cell--logo {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 6px;
  border: 1px solid color-mix(in srgb, var(--c-petrol) 16%, transparent);
  border-radius: var(--photo-radius);
}
.trio-cell--logo img { width: auto; max-width: 86%; max-height: 100%; object-fit: contain; }
.trio-cell image-slot {
  display: block; width: 100%;
  height: clamp(130px, 19.5vh, 205px);
  border-radius: var(--photo-radius);
  overflow: hidden;
}
.atelier-figure--trio .trio-cell--lead image-slot { height: clamp(200px, 30vh, 315px); }
.atelier-figure--trio .trio-grid { height: 100%; align-content: space-between; }
.atelier-figure--trio { align-self: stretch; transform: translateX(-50px); }
.atelier-figure image-slot {
  display: block; width: 100%;
  height: clamp(210px, 36vh, 380px);
  border-radius: var(--photo-radius);
  overflow: hidden;
}
.atelier-figure img {
  width: 100%; height: auto;
  border-radius: var(--photo-radius);
}
.atelier-figure figcaption {
  display: flex; gap: 16px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--c-petrol) 20%, transparent);
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 13px;
  color: color-mix(in srgb, var(--c-petrol) 75%, transparent);
}
.fig-num {
  font-family: var(--ff-display);
  font-style: normal; font-weight: 700;
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-petrol);
  white-space: nowrap;
}

.atelier-text { padding-top: 0; }
.kicker {
  margin-bottom: 12px !important;
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-petrol) 70%, transparent);
  margin-bottom: 22px;
}
.atelier-title {
  font-family: var(--ff-body);
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.18;
  color: var(--c-petrol);
  max-width: 22ch;
  margin-bottom: 32px;
  text-wrap: balance;
}
.atelier-body {
  max-width: 64ch;
  display: flex; flex-direction: column; gap: .55em;
  color: var(--c-ink);
  font-size: 14.5px; line-height: 1.5;
}
.atelier-body p em { color: var(--c-petrol); font-style: italic; }
.dropcap.no-dropcap::first-letter {
  font-size: inherit; float: none; margin: 0; color: inherit; font-weight: inherit;
}
.dropcap::first-letter {
  font-family: var(--ff-body);
  font-size: 2.9em;
  float: left;
  line-height: 0.85;
  margin: 0.1em 0.12em 0 0;
  color: var(--c-petrol);
  font-weight: 500;
}

.atelier-keys {
  margin-top: 14px;
  padding-top: 12px;
  max-width: 84%;
  border-top: 1px solid color-mix(in srgb, var(--c-petrol) 20%, transparent);
  display: flex; flex-direction: column;
  gap: 14px;
}
.atelier-keys > div {
  display: grid; grid-template-columns: 132px 1fr; gap: 18px;
  font-size: 12.5px;
}
.atelier-keys dt {
  font-family: var(--ff-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--c-petrol);
  padding-top: 3px;
}
.atelier-keys dd {
  font-family: var(--ff-body);
  font-style: italic;
  color: color-mix(in srgb, var(--c-ink) 75%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   PIÈCES
═══════════════════════════════════════════════════════════════ */
.pieces {
  background: var(--c-cream);
  padding: var(--section-y) var(--pad-x);
}
.pieces-intro {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) auto;
  align-items: end;
  gap: 40px;
  margin: 0 0 60px;
}
.pi-text {
  max-width: 56ch;
  font-size: 18px;
  font-style: italic;
  color: color-mix(in srgb, var(--c-ink) 85%, transparent);
}
.pi-text em { color: var(--c-petrol); font-style: italic; font-weight: 500; }
.pi-link {
  font-family: var(--ff-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-petrol);
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
}
.pi-link:hover { color: var(--c-accent-d); }

.pieces-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: clamp(24px, 3vw, 50px);
}
.piece {
  grid-column: span 4;
  display: flex; flex-direction: column;
}
.piece--lg { grid-column: span 6; grid-row: span 1; }
.piece--tall { grid-column: span 6; }

.piece-media {
  position: relative;
  background: var(--c-porcel);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--photo-radius);
}
.piece--lg .piece-media { aspect-ratio: 4 / 5; }
.piece--tall .piece-media { aspect-ratio: 4 / 5; }

.piece-media image-slot {
  display: block;
  width: 100%; height: 100%;
}
.piece-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.piece:hover .piece-media img { transform: scale(1.03); }
.piece-status {
  position: absolute; top: 14px; left: 14px;
  background: var(--c-porcel);
  color: var(--c-petrol);
  font-family: var(--ff-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.piece-cap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding-top: 18px;
}
.piece-name {
  grid-column: 1 / -1;
  font-family: var(--ff-body);
  font-size: 21px;
  color: var(--c-petrol);
  line-height: 1.2;
}
.piece-name em { font-style: italic; }
.piece-meta {
  font-family: var(--ff-body);
  font-style: italic; font-size: 14px;
  color: color-mix(in srgb, var(--c-ink) 70%, transparent);
}
.piece-price {
  font-family: var(--ff-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-petrol);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   COURS — bandeau pétrole
═══════════════════════════════════════════════════════════════ */
.cours {
  background: var(--c-petrol);
  color: var(--c-porcel);
  padding: clamp(22px, 2.8vh, 42px) clamp(72px, 8vw, 130px) clamp(22px, 2.8vh, 42px) var(--pad-x);
  position: relative;
  display: flex; flex-direction: column;
}
.cours-body { position: relative; z-index: 1; max-width: 1080px; margin: 0; width: 100%; flex: 1; display: flex; flex-direction: column; }
.cours-title {
  font-family: var(--ff-body);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.1;
  margin-bottom: 10px;
  max-width: 16ch;
  text-wrap: balance;
}
.cours-lede {
  font-family: var(--ff-body);
  font-size: 15px;
  font-style: italic;
  max-width: 52ch;
  color: color-mix(in srgb, var(--c-porcel) 85%, transparent);
  margin-bottom: 16px;
}
.cours-cols {
  flex: 1; align-content: center;
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, .36fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}
.cours-offre { display: flex; flex-direction: column; max-width: 78%; }
.cours-offre .cours-list { margin-top: auto; }
.cours-list {
  display: flex; flex-direction: column;
  border-top: 1px solid color-mix(in srgb, var(--c-porcel) 20%, transparent);
}
.cours-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "tag price" "title price" "desc desc";
  column-gap: 22px; row-gap: 2px;
  padding: 12px 0 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-porcel) 20%, transparent);
  transition: padding-left .4s cubic-bezier(.2,.7,.3,1);
}
.cours-list li:hover { padding-left: 10px; }
.cl-tag {
  grid-area: tag;
  font-family: var(--ff-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-accent);
}
.cl-title {
  grid-area: title;
  font-family: var(--ff-body);
  font-size: 20px; line-height: 1.1;
}
.cl-dur { display: none; }
.cl-desc {
  grid-area: desc;
  font-family: var(--ff-body); font-style: italic;
  font-size: 13.5px; line-height: 1.4;
  color: color-mix(in srgb, var(--c-porcel) 68%, transparent);
  margin-top: 2px;
}
/* Horaires hebdomadaires — colonne droite de la page Cours */
.horaires {
  align-self: stretch;
  margin-left: -13px;
  transform: translateX(-34px);
  display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--c-porcel) 22%, transparent);
  border-radius: 4px;
  padding: clamp(16px, 2vh, 26px) clamp(18px, 2vw, 30px);
  background: color-mix(in srgb, var(--c-porcel) 5%, transparent);
}
.hor-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.hor-table tbody { display: block; }
.hor-table tr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hor-table th, .hor-table td { padding: 7px 0; vertical-align: baseline; border-bottom: 1px solid color-mix(in srgb, var(--c-porcel) 16%, transparent); }
.hor-table th { border-bottom: 0; }
.hor-table tr { border-bottom: 1px solid color-mix(in srgb, var(--c-porcel) 16%, transparent); }
.hor-table td { border-bottom: 0; }
.hor-table th {
  text-align: left; font-family: var(--ff-display);
  font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-porcel) 88%, transparent);
}
.hor-table td {
  text-align: right; font-family: var(--ff-body);
  font-size: 17px; line-height: 1.25; color: var(--c-porcel);
  white-space: nowrap;
}
.hor-second { display: block; }
.hor-closed {
  font-style: italic; font-size: 15px;
  color: color-mix(in srgb, var(--c-porcel) 50%, transparent);
}
.hor-note {
  margin-top: 14px;
  font-family: var(--ff-body); font-style: italic; font-size: 13px; line-height: 1.45;
  color: color-mix(in srgb, var(--c-porcel) 78%, transparent);
}
.hor-cta {
  margin-top: auto; margin-bottom: 2px;
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 18px; text-decoration: none;
  background: color-mix(in srgb, var(--c-porcel) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-porcel) 40%, transparent);
  transition: background .25s ease, border-color .25s ease;
}
.hor-cta .hcta-lead { font-family: var(--ff-display); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-porcel); }
.hor-cta .hcta-mail { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--ff-body); font-size: 15px; line-height: 1.2; color: var(--c-porcel); }
.hor-cta:hover { background: color-mix(in srgb, var(--c-porcel) 18%, transparent); border-color: var(--c-porcel); }
.hor-cta .hc-handle { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* Déroulé d'initiation — bandeau horizontal (page L'atelier) */
.parcours--row {
  align-self: stretch; padding: 0; border: 0; background: none;
  margin-top: clamp(16px, 2.4vh, 32px);
  color: var(--c-petrol);
}
.parcours--row .pk-label { color: color-mix(in srgb, var(--c-petrol) 70%, transparent); }
.parcours--row .pk-rule { background: color-mix(in srgb, var(--c-petrol) 22%, transparent); }
.parcours--row .parcours-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 40px);
  border-top: 1px solid color-mix(in srgb, var(--c-petrol) 18%, transparent);
  padding-top: 14px;
}
.parcours--row .pstep { padding: 0; border: 0; }
.parcours--row .pstep {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 5px; padding: 0; border: 0;
}
.parcours--row .pstep + .pstep { border-top: 0; }
.parcours--row .ps-title, .parcours--row .ps-desc, .parcours--row .ps-when { text-align: left; align-self: auto; }
.parcours--row .ps-when { margin-top: auto; padding-top: 6px; white-space: normal; }
.parcours--row .ps-ill,
.parcours--row .pstep--atelier .ps-ill { width: 34px; height: 34px; color: var(--c-petrol); margin-bottom: 2px; }
.parcours--row .ps-title { color: var(--c-petrol); }
.parcours--row .ps-desc { color: color-mix(in srgb, var(--c-petrol) 68%, transparent); }
.parcours--row .ps-when,
.parcours--row .pstep--atelier .ps-when { color: var(--c-petrol); }

.cours-note {
  margin-top: 12px;
  font-family: var(--ff-body); font-style: italic;
  font-size: 12.5px; line-height: 1.45;
  color: color-mix(in srgb, var(--c-porcel) 88%, transparent);
}
.cl-price small {
  font-family: var(--ff-body); font-style: italic;
  font-size: 13px; letter-spacing: 0; font-weight: 400;
  color: var(--c-porcel);
}
.cl-price {
  grid-area: price; align-self: center; text-align: right;
  font-family: var(--ff-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: 0.04em; white-space: nowrap;
}

/* Parcours d'initiation — schéma vertical */
.parcours {
  align-self: stretch;
  display: flex; flex-direction: column;
  padding: 18px clamp(16px, 1.8vw, 26px) 20px;
  border: 1px solid color-mix(in srgb, var(--c-porcel) 22%, transparent);
  background: color-mix(in srgb, var(--c-porcel) 5%, transparent);
}
.parcours-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.pk-label {
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
}
.pk-rule { flex: 1; height: 1px; background: color-mix(in srgb, var(--c-porcel) 25%, transparent); }
.parcours-steps { display: flex; flex-direction: column; flex: 1; justify-content: space-between; }
.pstep {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas: "ill title when" "ill desc when";
  column-gap: 14px; row-gap: 1px;
  align-items: center;
  padding: 9px 0;
}
.pstep + .pstep { border-top: 1px solid color-mix(in srgb, var(--c-porcel) 14%, transparent); }
.ps-ill {
  grid-area: ill;
  width: 36px; height: 36px;
  color: color-mix(in srgb, var(--c-porcel) 80%, transparent);
}
.pstep--atelier .ps-ill { color: color-mix(in srgb, var(--c-porcel) 52%, transparent); }
.ps-num { display: none; }
.ps-title {
  grid-area: title; align-self: end;
  font-family: var(--ff-body); font-size: 17px; line-height: 1.12;
}
.ps-desc {
  grid-area: desc; align-self: start;
  font-family: var(--ff-body); font-style: italic;
  font-size: 13px; line-height: 1.4;
  color: color-mix(in srgb, var(--c-porcel) 68%, transparent);
}
.ps-when {
  grid-area: when; align-self: center; text-align: right;
  font-family: var(--ff-display);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-accent);
  white-space: nowrap;
}
.pstep--atelier .ps-when { color: color-mix(in srgb, var(--c-porcel) 50%, transparent); }
@media (max-width: 1100px) {
  .cours-cols { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}
}


/* ═══════════════════════════════════════════════════════════════
   JOURNAL
═══════════════════════════════════════════════════════════════ */
.journal {
  background: var(--c-paper);
  padding: var(--section-y) var(--pad-x);
}
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: 12px;
}
.entry {
  display: flex; flex-direction: column;
  gap: 14px;
  padding-top: 22px;
  border-top: 2px solid var(--c-petrol);
}
.entry-date {
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--c-petrol);
}
.entry-title {
  font-family: var(--ff-body);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  color: var(--c-petrol);
  max-width: 18ch;
  text-wrap: balance;
}
.entry-excerpt {
  font-family: var(--ff-body);
  font-size: 16px;
  color: color-mix(in srgb, var(--c-ink) 82%, transparent);
}
.entry-more {
  margin-top: auto;
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-petrol);
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   INSTAGRAM
═══════════════════════════════════════════════════════════════ */
.insta {
  background: var(--c-paper);
  padding: var(--section-y) var(--pad-x);
}
.insta-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 48px;
}
.insta-text {
  max-width: 56ch;
  font-size: 18px; font-style: italic;
  color: color-mix(in srgb, var(--c-ink) 85%, transparent);
}
.insta-follow {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 14px 24px;
  background: var(--c-petrol);
  color: var(--c-porcel);
  border-radius: 999px;
  font-family: var(--ff-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.18em;
  transition: background .25s;
}
.insta-follow:hover { background: var(--c-petrol-d); }
.if-at { opacity: 0.6; font-size: 0.85em; }
.if-arrow { font-size: 0.9em; margin-left: 4px; }

.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.insta-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-porcel);
  overflow: hidden;
  display: block;
  border-radius: var(--photo-radius);
}
.insta-cell image-slot {
  width: 100%; height: 100%;
  display: block;
}
.insta-cell::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(22,63,71,0.55));
  opacity: 0; transition: opacity .35s;
  pointer-events: none;
}
.insta-cell:hover::after { opacity: 1; }
.ic-overlay {
  position: absolute; left: 12px; bottom: 10px;
  display: flex; align-items: center; gap: 8px;
  color: var(--c-porcel);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s, transform .35s;
  font-family: var(--ff-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  pointer-events: none;
}
.insta-cell:hover .ic-overlay { opacity: 1; transform: none; }
.ic-icon { font-size: 14px; line-height: 1; }
@media (max-width: 1024px) {
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .insta-intro { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   VISITER
═══════════════════════════════════════════════════════════════ */
.visiter {
  background: var(--c-cream);
  padding: clamp(22px, 2.6vh, 44px) var(--pad-x) 0;
  display: flex; flex-direction: column;
}
.visiter-outro { margin-top: auto; padding-top: clamp(18px, 2.4vh, 40px); }
.visiter-outro .signature {
  margin: 0 calc(var(--pad-x) * -1);
}
.visiter-outro .footer-foot {
  padding: 12px 0 14px;
  color: color-mix(in srgb, var(--c-petrol) 70%, transparent);
}
.visiter-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 4vw, 60px);
  align-items: stretch;
  align-content: start;
  padding-top: clamp(14px, 2vh, 30px);
}
.visiter-card {
  width: 100%;
  min-height: clamp(300px, 46vh, 420px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "logo info";
  column-gap: clamp(20px, 2.2vw, 34px);
  align-items: center;
  align-content: center;
  padding: 34px clamp(22px, 2.4vw, 38px);
  background: #f6eee4;
}
.vc-logo { width: clamp(96px, 10.5vw, 132px); height: auto; object-fit: contain; align-self: center; grid-area: logo; }
.vc-logo-legacy {
  width: clamp(160px, 18vw, 220px);
  height: auto;
  align-self: center;
}
.vc-info {
  grid-area: info;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-content: center;
  font-size: 15px;
}
.vc-info dd a { overflow-wrap: anywhere; }
.vc-info > div { display: flex; flex-direction: column; gap: 8px; }
.vc-info dt {
  font-family: var(--ff-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-petrol) 70%, transparent);
}
.vc-info dd {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--c-ink);
}
.vc-info dd a { color: var(--c-petrol); border-bottom: 1px solid color-mix(in srgb, var(--c-petrol) 30%, transparent); }
.vc-info dd a:hover { color: var(--c-accent-d); }

.visiter-map {
  margin: 0; width: 100%;
  padding-right: clamp(34px, 3.4vw, 52px);
  display: flex; flex-direction: column;
  position: relative;
  align-self: stretch;
}
.visiter-map image-slot {
  display: block; width: 100% !important;
  flex: 1 1 auto; height: auto !important; min-height: 0;
  aspect-ratio: auto;
  margin-left: 0;
  border-radius: var(--photo-radius);
  overflow: hidden;
}
.visiter-map img {
  width: 100%; height: auto; display: block;
  border: 1px solid color-mix(in srgb, var(--c-petrol) 14%, transparent);
}
.visiter-map figcaption {
  position: absolute; top: 100%; left: 0; right: clamp(34px, 3.4vw, 52px);
  margin-top: 14px;
  font-family: var(--ff-body); font-style: italic;
  font-size: 14px; line-height: 1.5;
  color: color-mix(in srgb, var(--c-petrol) 75%, transparent);
}
.visiter-map figcaption a {
  color: var(--c-petrol); font-style: normal;
  border-bottom: 1px solid color-mix(in srgb, var(--c-petrol) 35%, transparent);
}
.visiter-map figcaption a:hover { color: var(--c-accent-d); }


/* ═══════════════════════════════════════════════════════════════
   SIGNATURE
═══════════════════════════════════════════════════════════════ */
.signature {
  background: var(--c-petrol);
  color: var(--c-porcel);
  padding: clamp(20px, 3.2vh, 44px) var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 2.4vw, 36px);
  border-top: 1px solid color-mix(in srgb, var(--c-petrol) 20%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-porcel) 22%, transparent);
}
.sig-line {
  font-family: var(--ff-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-porcel) 85%, transparent);
}
.sig-line--left { display: flex; }
.sig-cartouche { width: auto; height: clamp(52px, 7.4vh, 88px); max-width: 46vw; object-fit: contain; }
.sig-line--right { text-align: left; }
.sig-mark img {
  width: clamp(42px, 5.4vh, 64px); height: auto;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.footer {
  background: var(--c-paper);
  padding: clamp(30px, 3.6vw, 52px) var(--pad-x) 30px;
  color: var(--c-petrol);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 3vw, 60px);
  align-items: start;
}
.footer-cell--mark { padding-right: 30px; }
.footer-cartouche {
  width: clamp(160px, 14vw, 200px);
  height: auto;
}
.fc-label {
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--c-petrol);
}
.footer-cell ul {
  display: flex; flex-direction: column; gap: 8px;
}
.footer-cell ul a,
.footer-cell address {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 15px;
  color: color-mix(in srgb, var(--c-ink) 80%, transparent);
}
.footer-cell ul a:hover { color: var(--c-petrol); }
.footer-cell address a { color: var(--c-petrol); }

.footer-rule {
  height: 1px;
  background: color-mix(in srgb, var(--c-petrol) 22%, transparent);
  margin: 30px 0 20px;
}
.footer-foot {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-petrol) 65%, transparent);
}
.footer-foot a:hover { color: var(--c-petrol); }
.ff-sep { opacity: 0.4; }
.ff-cert { margin-left: auto; font-style: normal; }

/* ═══════════════════════════════════════════════════════════════
   PICTO USAGE — discret / standard / motif
═══════════════════════════════════════════════════════════════ */
body[data-picto="discret"] .manifest-sig img,
body[data-picto="discret"] .floor-cell--mark img,
body[data-picto="discret"] .topbar-picto {
  opacity: 0;
}
body[data-picto="motif"] .manifest,
body[data-picto="motif"] .journal,
body[data-picto="motif"] .visiter {
  background-image:
    radial-gradient(color-mix(in srgb, var(--c-petrol) 10%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}
body[data-picto="motif"] .manifest-inner::before {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 240px; height: 240px;
  background-image: url('assets/brand/picto-bleu.png');
  background-size: contain; background-repeat: no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .topbar { grid-template-columns: auto 1fr; }
  .topbar-meta { display: none; }
  .topbar-nav { gap: 22px; }
  .atelier-grid, .visiter-grid, .cours { grid-template-columns: 1fr; }
  .atelier-figure { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-cell--mark { grid-column: 1 / -1; }
  .pieces-grid { grid-template-columns: repeat(6, 1fr); }
  .piece, .piece--lg, .piece--tall { grid-column: span 3; }
}
@media (max-width: 720px) {
  .topbar-nav { display: none; }
  .hero-floor { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .floor-cell { padding: 0; border: 0; }
  .floor-cell--mark { display: none; }
  .pieces-grid { grid-template-columns: 1fr; }
  .piece, .piece--lg, .piece--tall { grid-column: span 1; }
  .manifest-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .manifest-figure image-slot { aspect-ratio: 16 / 10; }
  .journal-grid { grid-template-columns: 1fr; }
  .vc-info { grid-area: info; }
.vc-info-base { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cours-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .pstep { grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "ill title" "ill desc" "ill when"; align-items: start; row-gap: 3px; }
  .ps-ill { width: 38px; height: 38px; align-self: center; }
  .ps-when { text-align: left; }
  .signature { grid-template-columns: 1fr; }
  .sig-line--left, .sig-line--right { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   FULL-PAGE — une section = un écran
═══════════════════════════════════════════════════════════════ */
.fullpage {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.fullpage::-webkit-scrollbar { width: 0; height: 0; }
.fullpage > .fp-panel {
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  align-content: center;
}
.fullpage > .fp-panel--tall { align-content: start; }
.fp-panel--outro { display: flex; flex-direction: column; justify-content: center; }
.fp-panel--outro > .footer { flex: 0 1 auto; }
.hero.fp-panel { min-height: 100%; }

/* Indicateur de progression */
.fp-rail {
  position: fixed; z-index: 60;
  right: clamp(14px, 2vw, 30px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 18px;
  align-items: flex-end;
}
.fp-dot { display: flex; align-items: center; gap: 10px; }
.fpd-mark {
  width: 9px; height: 9px; flex: none;
  border: 1px solid color-mix(in srgb, var(--c-petrol) 55%, transparent);
  border-radius: 50%;
  background: transparent;
  transition: background .3s, border-color .3s, transform .3s;
}
.fpd-label {
  font-family: var(--ff-display);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-petrol) 70%, transparent);
  opacity: 0; transform: translateX(6px);
  transition: opacity .3s, transform .3s;
  order: -1;
  white-space: nowrap;
}
.fp-dot:hover .fpd-label, .fp-dot.is-active .fpd-label { opacity: 1; transform: none; }
.fp-dot:hover .fpd-mark { border-color: var(--c-petrol); }
.fp-dot.is-active .fpd-mark {
  background: var(--c-petrol); border-color: var(--c-petrol);
  transform: scale(1.25);
}
/* sur fond pétrole (section Cours) — inversion */
body[data-fp-section="cours"] .fpd-mark { border-color: color-mix(in srgb, var(--c-porcel) 65%, transparent); }
body[data-fp-section="cours"] .fpd-label { color: color-mix(in srgb, var(--c-porcel) 78%, transparent); }
body[data-fp-section="cours"] .fp-dot.is-active .fpd-mark { background: var(--c-accent); border-color: var(--c-accent); }

/* état actif de la navigation existante */
.topbar-nav a.is-active { color: var(--c-petrol); }
.topbar-nav a.is-active::after { left: 0; width: 100%; }

/* Mobile / tactile — retour à un défilement naturel */
@media (max-width: 860px) {
  html, body { height: auto; overflow: visible; }
  body { display: block; }
  .topbar { position: sticky; top: 0; }
  .fullpage {
    overflow: visible;
    scroll-snap-type: none;
  }
  .fullpage > .fp-panel {
    min-height: 0;
    align-content: normal;
    scroll-snap-align: none;
  }
  .hero.fp-panel { min-height: 88vh; }
  .fp-panel--outro { display: block; }
  .fp-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fullpage { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   PLANCHE — six figures
═══════════════════════════════════════════════════════════════ */
.planche {
  background: var(--c-paper);
  padding: clamp(32px, 4vh, 72px) var(--pad-x);
  display: flex; flex-direction: column;
}
.planche-grid {
  flex: 0 1 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 30px) clamp(14px, 1.6vw, 26px);
  align-content: center;
}
.pl-fig { margin: 0; display: flex; flex-direction: column; }
.pl-fig image-slot {
  display: block; width: 100%; height: auto;
  border-radius: var(--photo-radius);
  overflow: hidden;
}
.pl-fig figcaption {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: 10px;
}
.pl-fig .fig-num {
  font-family: var(--ff-display);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-accent-d); white-space: nowrap;
}
.pl-fig .fig-cap {
  font-family: var(--ff-body); font-style: italic;
  font-size: 13px; line-height: 1.45;
  color: color-mix(in srgb, var(--c-petrol) 68%, transparent);
}
/* rythme décalé, comme une planche de gravures */
.pl-fig image-slot { aspect-ratio: auto; }
.pl-1 { grid-column: span 2; }
.pl-1 image-slot { height: clamp(150px, 28vh, 300px); }
.pl-2 { grid-column: span 2; margin-top: clamp(14px, 2.6vh, 40px); }
.pl-2 image-slot { height: clamp(130px, 24vh, 260px); }
.pl-3 { grid-column: span 2; }
.pl-3 image-slot { height: clamp(150px, 28vh, 300px); }
.pl-4 { grid-column: span 3; }
.pl-4 image-slot { height: clamp(120px, 22vh, 240px); }
.pl-5 { grid-column: span 1; margin-top: clamp(10px, 1.6vh, 24px); }
.pl-5 image-slot { height: clamp(105px, 19vh, 210px); }
.pl-6 { grid-column: span 2; }
.pl-6 image-slot { height: clamp(120px, 22vh, 240px); }
@media (max-width: 1100px) {
  .planche-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pl-1, .pl-2, .pl-3, .pl-6 { grid-column: span 2; }
  .pl-4 { grid-column: span 4; }
  .pl-5 { grid-column: span 2; }
  .pl-fig { margin-top: 0 !important; }
}
@media (max-width: 720px) {
  .planche-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-1, .pl-2, .pl-3, .pl-4, .pl-5, .pl-6 { grid-column: auto; }
  .pl-fig image-slot { height: 30vh !important; }
}

.planche-insta {
  margin-top: auto;
  padding-top: clamp(16px, 2.2vh, 30px);
  border-top: 1px solid color-mix(in srgb, var(--c-petrol) 16%, transparent);
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 14px 32px;
}
.planche-insta .pi-text {
  font-family: var(--ff-body); font-style: italic;
  font-size: 16px; line-height: 1.5;
  max-width: none; white-space: nowrap;
  color: color-mix(in srgb, var(--c-petrol) 78%, transparent);
}
.planche-insta .pi-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding-bottom: 5px;
  color: var(--c-petrol);
  border-bottom: 1px solid color-mix(in srgb, var(--c-petrol) 35%, transparent);
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: color .3s, border-color .3s;
}
.planche-insta .pi-link:hover { color: var(--c-accent-d); border-bottom-color: var(--c-accent-d); }
.planche-insta .pi-at { font-family: var(--ff-body); font-style: italic; font-size: 15px; letter-spacing: 0; }
.planche-insta .pi-arrow { font-size: 12px; letter-spacing: 0; }

/* ═══════════════════════════════════════════════════════════════
   SUR MESURE & GROUPES
═══════════════════════════════════════════════════════════════ */
.offres {
  background: var(--c-cream);
  padding: clamp(32px, 4vh, 72px) var(--pad-x);
  display: flex; flex-direction: column;
}
.offres-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 44px);
  align-content: center;
}
.of-media { margin-bottom: 4px; }
.of-media image-slot {
  display: block; width: 100%; height: clamp(110px, 20vh, 220px);
  border-radius: var(--photo-radius);
  overflow: hidden;
}
.offre {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--c-petrol) 24%, transparent);
}
.of-tag {
  font-family: var(--ff-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-accent-d);
}
.of-title {
  font-family: var(--ff-body);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.12;
  color: var(--c-petrol);
}
.of-desc {
  font-family: var(--ff-body);
  font-size: 15.5px; line-height: 1.55;
  color: color-mix(in srgb, var(--c-petrol) 78%, transparent);
}
.of-list {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 7px;
}
.of-list li {
  font-family: var(--ff-body); font-style: italic;
  font-size: 14px; line-height: 1.45;
  padding-left: 16px; position: relative;
  color: color-mix(in srgb, var(--c-petrol) 68%, transparent);
}
.of-list li::before {
  content: "·"; position: absolute; left: 4px; top: -1px;
  font-style: normal; color: var(--c-accent-d);
}
.offres-cta {
  margin-top: auto;
  padding-top: clamp(16px, 2.2vh, 30px);
  border-top: 1px solid color-mix(in srgb, var(--c-petrol) 16%, transparent);
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px 32px;
}
.oc-text {
  font-family: var(--ff-body); font-style: italic;
  font-size: 16px;
  color: color-mix(in srgb, var(--c-petrol) 78%, transparent);
}
.oc-link {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding-bottom: 5px;
  color: var(--c-petrol);
  border-bottom: 1px solid color-mix(in srgb, var(--c-petrol) 35%, transparent);
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: color .3s, border-color .3s;
}
.oc-link:hover { color: var(--c-accent-d); border-bottom-color: var(--c-accent-d); }
.oc-arrow { letter-spacing: 0; }
@media (max-width: 1100px) {
  .offres-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}


/* ═══════════════════════════════════════════════════════════════
   ADAPTATION FLUIDE — décalages et largeurs pilotés par la fenêtre
   ═══════════════════════════════════════════════════════════════ */

/* Décalages optiques : proportionnels, et nuls dès que la place manque */
.horaires { margin-left: 0; transform: translateX(clamp(-34px, -2.4vw, 0px)); }
.atelier-figure--trio { transform: translateX(clamp(-50px, -3.4vw, 0px)); }
.cours-offre { max-width: min(100%, 46ch); }
.atelier-keys { max-width: min(100%, 52ch); }
.offres-grid { width: auto; height: auto; }

/* Plan d'accès : l'image reste dans son cadre à toute hauteur */
.visiter-map { padding-right: clamp(0px, 3.4vw, 52px); }
.visiter-map image-slot { flex: 0 1 auto !important; min-height: clamp(180px, 30vh, 320px) !important; max-height: clamp(220px, 42vh, 460px); }
.visiter-map image-slot img, .visiter-map img { max-height: clamp(220px, 42vh, 460px); object-fit: cover; }
.visiter-map figcaption { right: clamp(0px, 3.4vw, 52px); }

@media (max-width: 1240px) {
  .horaires, .atelier-figure--trio { transform: none; }
  .cours-body { max-width: none; }
  .cours { padding-right: clamp(34px, 5vw, 92px); }
}

@media (max-width: 1100px) {
  .cours-cols { align-content: start; }
  .horaires { align-self: start; }
  .parcours--row .parcours-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .trio-grid { height: auto; }
  .atelier-figure--trio .trio-cell image-slot,
  .atelier-figure--trio .trio-cell--lead image-slot { height: clamp(120px, 22vh, 220px); }
  /* Plan : la légende repasse dans le flux au lieu de flotter sous le cadre */
  .visiter-map { padding-right: 0; }
  .visiter-map figcaption { position: static; right: auto; margin-top: 12px; }
  .visiter-map image-slot { min-height: clamp(170px, 26vh, 260px) !important; max-height: clamp(200px, 34vh, 340px); }
  .visiter-map image-slot img, .visiter-map img { max-height: clamp(200px, 34vh, 340px); }
}

@media (max-width: 860px) {
  .visiter-card { min-height: 0; }
  .hor-table td { font-size: 16px; }
  .parcours--row { margin-top: 22px; }
}

@media (max-width: 640px) {
  .parcours--row .parcours-steps { grid-template-columns: minmax(0, 1fr); }
  .trio-grid { grid-template-columns: 1fr; }
  .trio-cell--lead { grid-column: auto; }
  .hero-emblem img { height: auto; width: min(82vw, 340px); }
  .hor-table tr { flex-wrap: wrap; }
  .hor-table td { text-align: left; white-space: normal; }
}

/* Triptyque L'atelier : photo large, logo + photo dessous */
.atelier-figure--trio .trio-cell--logo { min-height: clamp(130px, 19.5vh, 205px); }
@media (max-width: 1100px) { .atelier-figure--trio .trio-cell--logo { min-height: clamp(120px, 22vh, 220px); } }

/* L'atelier (01) : collage décalé — photo qui déborde, vignette en recouvrement, logo posé en bas */
#lieu .atelier-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(22px,3vw,52px);align-items:center}
#lieu .atelier-figure--trio{transform:none;align-self:center;margin-right:calc(-1*clamp(24px,4vw,64px))}
#lieu .trio-grid{display:block;position:relative;height:auto;padding-bottom:clamp(18px,3.4vh,44px)}
#lieu .trio-cell--lead{width:100%;grid-column:auto}
#lieu .atelier-figure--trio .trio-cell--lead image-slot{height:clamp(200px,34vh,352px);border-radius:var(--photo-radius) 0 0 var(--photo-radius)}
#lieu .trio-cell--mid{position:relative;z-index:2;width:60%;margin-left:34%;margin-top:clamp(-56px,-6vh,-26px)}
#lieu .atelier-figure--trio .trio-cell--mid image-slot{height:clamp(130px,20vh,215px);border:6px solid var(--c-cream);box-shadow:0 26px 48px -30px rgba(20,40,52,.55)}
#lieu .atelier-figure--trio .trio-cell--logo{position:absolute;left:0;bottom:0;width:34%;min-height:0;padding:0;background:none;border-radius:0;display:flex;align-items:flex-end;justify-content:flex-start}
#lieu .atelier-figure--trio .trio-cell--logo img{width:auto;max-width:100%;height:clamp(100px,15.5vh,158px);object-fit:contain;object-position:left bottom}
@media (max-width:1100px){
  #lieu .atelier-figure--trio{margin-right:0}
  #lieu .atelier-figure--trio .trio-cell--lead image-slot{border-radius:var(--photo-radius)}
  #lieu .trio-cell--mid{width:56%;margin-left:40%;margin-top:clamp(-40px,-4vh,-18px)}
  #lieu .atelier-figure--trio .trio-cell--logo{width:34%}
}
@media (max-width:640px){
  #lieu .trio-grid{padding-bottom:0}
  #lieu .trio-cell--mid{width:72%;margin-left:28%;margin-top:-18px}
  #lieu .atelier-figure--trio .trio-cell--logo{position:static;width:56%;margin-top:16px}
}

/* LES COURS (02) : colonnes rééquilibrées, durées visibles, déroulé en bandeau bas */
#cours .cours-body{max-width:none}
#cours .cours-cols{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(28px,4vw,72px);flex:0 0 auto;align-content:start;padding-top:clamp(6px,1.4vh,18px)}
#cours .cours-offre{max-width:none}
#cours .cours-offre .cours-list{margin-top:0}
#cours .cours-list li{grid-template-areas:"tag price" "title price" "dur price" "desc price";padding:clamp(9px,1.5vh,15px) 0;column-gap:24px}
#cours .cl-dur{display:block;grid-area:dur;font-family:var(--ff-display);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--c-porcel) 58%,transparent);margin-top:3px}
#cours .cl-desc{margin-top:3px}
#cours .cl-price{align-self:center}
#cours .horaires{align-self:start;transform:none;margin-left:0;position:relative}
#cours .parcours--strip{margin-top:auto;padding:clamp(14px,2.2vh,24px) 0 0;border:0;border-top:1px solid color-mix(in srgb,var(--c-porcel) 20%,transparent);background:none;color:var(--c-porcel)}
#cours .parcours--strip .pk-label{color:color-mix(in srgb,var(--c-porcel) 66%,transparent)}
#cours .parcours--strip .pk-rule{background:color-mix(in srgb,var(--c-porcel) 22%,transparent)}
#cours .parcours--strip .parcours-head{margin-bottom:10px}
#cours .parcours--strip .parcours-steps{gap:clamp(14px,2vw,34px);padding-top:0}
#cours .parcours--strip .ps-ill,#cours .parcours--strip .pstep--atelier .ps-ill{width:26px;height:26px;color:var(--c-accent);margin-bottom:0}
#cours .parcours--strip .pstep--atelier .ps-ill{color:color-mix(in srgb,var(--c-porcel) 55%,transparent)}
#cours .parcours--strip .ps-title{color:var(--c-porcel);font-size:15px}
#cours .parcours--strip .ps-desc{color:color-mix(in srgb,var(--c-porcel) 62%,transparent);font-size:12.5px;line-height:1.35}
#cours .parcours--strip .ps-when,#cours .parcours--strip .pstep--atelier .ps-when{color:color-mix(in srgb,var(--c-porcel) 70%,transparent);font-size:10px;padding-top:4px}
@media (max-width:1100px){
  #cours .cours-cols{grid-template-columns:minmax(0,1fr);gap:32px}
  #cours .parcours--strip .parcours-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
}
@media (max-width:640px){#cours .parcours--strip .parcours-steps{grid-template-columns:minmax(0,1fr)}}

/* Déclencheur + fenêtre « déroulé d'une séance » */
.deroule-open{margin-top:clamp(16px,2.6vh,30px);align-self:start;display:inline-flex;align-items:center;gap:12px;padding:11px 18px;background:none;border:1px solid color-mix(in srgb,var(--c-porcel) 34%,transparent);border-radius:999px;color:var(--c-porcel);cursor:pointer;font:inherit;transition:background .25s ease,border-color .25s ease}
.deroule-open:hover{background:color-mix(in srgb,var(--c-porcel) 14%,transparent);border-color:var(--c-porcel)}
.deroule-open .do-ico{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--c-accent);color:var(--c-petrol);font-family:var(--ff-display);font-size:12px;font-weight:700}
.deroule-open .do-label{font-family:var(--ff-display);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.deroule-open .do-arrow{font-size:14px;opacity:.7}
.deroule-modal{width:min(880px,92vw);max-width:none;border:0;padding:clamp(26px,3.4vw,44px);background:var(--c-petrol);color:var(--c-porcel);box-shadow:0 40px 90px -40px rgba(10,26,36,.7)}
.deroule-modal::backdrop{background:rgba(12,30,40,.62)}
.deroule-modal .dm-close-form{display:flex;justify-content:flex-end;margin:calc(-1*clamp(10px,1.4vw,18px)) calc(-1*clamp(8px,1vw,14px)) 0 0}
.deroule-modal .dm-close{background:none;border:0;color:color-mix(in srgb,var(--c-porcel) 70%,transparent);font-size:28px;line-height:1;cursor:pointer;padding:0 4px}
.deroule-modal .dm-close:hover{color:var(--c-porcel)}
.deroule-modal .dm-kicker{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--c-accent);margin-bottom:clamp(14px,2vh,22px)}
.deroule-modal .parcours--modal{align-self:stretch;margin:0;padding:0;border:0;background:none;color:var(--c-porcel)}
.deroule-modal .parcours--modal .parcours-head{display:none}
.deroule-modal .parcours--modal .parcours-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,38px);padding-top:0}
.deroule-modal .parcours--modal .ps-ill,.deroule-modal .parcours--modal .pstep--atelier .ps-ill{width:32px;height:32px;color:var(--c-accent)}
.deroule-modal .parcours--modal .pstep--atelier .ps-ill{color:color-mix(in srgb,var(--c-porcel) 55%,transparent)}
.deroule-modal .parcours--modal .ps-title{color:var(--c-porcel);font-size:18px}
.deroule-modal .parcours--modal .ps-desc{color:color-mix(in srgb,var(--c-porcel) 70%,transparent);font-size:13.5px;line-height:1.4}
.deroule-modal .parcours--modal .ps-when,.deroule-modal .parcours--modal .pstep--atelier .ps-when{color:var(--c-accent);font-size:10px;padding-top:6px}
@media (max-width:640px){.deroule-modal .parcours--modal .parcours-steps{grid-template-columns:minmax(0,1fr)}}

/* Cours : deux boutons identiques, page resserrée */
#cours .cours-cols{padding-top:0;gap:clamp(24px,3.2vw,56px)}
#cours .cours-list li{padding:clamp(7px,1.15vh,12px) 0}
#cours .cours-note{margin-top:10px}
#cours .horaires{padding:clamp(16px,2.2vh,24px) clamp(18px,2vw,26px)}
#cours .hor-table th,#cours .hor-table td{padding:5px 0}
#cours .hor-note{margin-top:11px;font-size:12.5px}
#cours .horaires .hor-cta,#cours .deroule-open{margin-top:clamp(12px,1.8vh,20px);align-self:start;display:inline-flex;flex-direction:row;align-items:center;gap:12px;padding:11px 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c-porcel) 34%,transparent);background:none;color:var(--c-porcel);text-decoration:none;margin-bottom:0;width:auto}
#cours .horaires .hor-cta:hover,#cours .deroule-open:hover{background:color-mix(in srgb,var(--c-porcel) 14%,transparent);border-color:var(--c-porcel)}
#cours .hor-cta .do-ico{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--c-accent);color:var(--c-petrol);font-family:var(--ff-display);font-size:11px;font-weight:700}
#cours .hor-cta .do-label{font-family:var(--ff-display);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
#cours .hor-cta .do-arrow{font-size:14px;opacity:.7}

#cours .cours-cols{flex:1 1 auto;align-content:center;align-items:center}
#cours .horaires{align-self:center}

/* Cours : prix resserrés vers les intitulés, marge droite accrue, horaires décalées à gauche */
#cours .cours-offre{padding-right:clamp(48px,9vw,150px)}
#cours .cours-list li{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tag tag" "title price" "dur dur" "desc desc";column-gap:18px}
#cours .cl-title{align-self:baseline}
#cours .cl-price{grid-area:price;align-self:baseline;text-align:left;justify-self:start}
#cours .horaires{transform:translateX(clamp(-90px,-6vw,0px))}
#cours .cours-cols{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(18px,2.2vw,38px)}
@media (max-width:1100px){#cours .horaires{transform:none}#cours .cours-offre{padding-right:0}}

#cours .cours-cols{flex:0 0 auto}
#cours .cours-body{justify-content:center}
#cours .section-header--inverse{margin-bottom:auto}
#cours .deroule-open{margin-bottom:auto}

#cours .cours-list li{grid-template-columns:minmax(0,1fr) auto}
#cours .cl-price{text-align:right;justify-self:end}

/* L'ATELIER (01) — trois volets : le lieu, les ateliers, la boutique */
#lieu{display:flex;flex-direction:column}
.lieu-layout{flex:1;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,2.14fr);gap:clamp(26px,3.6vw,70px);align-content:center;align-items:center}
.lieu-intro{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px)}
.lieu-intro .atelier-title{margin:0;max-width:16ch}
.lieu-lede{max-width:34ch;font-size:clamp(14px,1.45vh + .3vw,16.5px);line-height:1.55;color:color-mix(in srgb,var(--c-ink) 74%,transparent);text-wrap:pretty}
.lieu-logo{width:min(100%,220px);height:auto;margin-top:clamp(4px,1.2vh,14px);opacity:.92}
.lieu-volets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,38px);align-items:start}
.volet{display:flex;flex-direction:column;gap:9px}
.volet--a{margin-top:clamp(0px,3vh,34px)}
.volet--b{margin-top:0}
.volet--c{margin-top:clamp(0px,5vh,58px)}
.volet-fig{margin:0 0 clamp(6px,1.2vh,12px)}
.volet-fig image-slot{display:block;width:100%;border-radius:var(--photo-radius);overflow:hidden;background:color-mix(in srgb,var(--c-ink) 6%,transparent)}
.volet--a .volet-fig image-slot{height:clamp(180px,30vh,310px)}
.volet--b .volet-fig image-slot{height:clamp(210px,35vh,365px)}
.volet--c .volet-fig image-slot{height:clamp(160px,26vh,270px)}
.volet-ord{margin:0;font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--c-accent)}
.volet-title{margin:0;font-family:var(--ff-display);font-size:clamp(19px,1.6vw + .4vh,26px);font-weight:600;letter-spacing:-.01em;color:var(--c-ink)}
.volet-text{margin:0;max-width:34ch;font-size:clamp(13px,1.3vh + .25vw,15px);line-height:1.5;color:color-mix(in srgb,var(--c-ink) 72%,transparent);text-wrap:pretty}
@media (max-width:1240px){
  .lieu-layout{grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vh,34px)}
  .lieu-intro{flex-direction:row;align-items:flex-end;flex-wrap:wrap;gap:clamp(14px,3vw,40px)}
  .lieu-intro .atelier-title{max-width:20ch;flex:1 1 280px}
  .lieu-lede{flex:1 1 300px}
  .lieu-intro .kicker{flex:0 0 100%}
  .lieu-logo{width:min(34vw,180px);margin-top:0}
  .volet--a,.volet--b,.volet--c{margin-top:0}
  .volet--a .volet-fig image-slot,.volet--b .volet-fig image-slot,.volet--c .volet-fig image-slot{height:clamp(140px,20vh,220px)}
}
@media (max-width:760px){
  .lieu-volets{grid-template-columns:minmax(0,1fr);gap:26px}
  .lieu-intro{flex-direction:column;align-items:flex-start}
  .volet-text,.lieu-lede{max-width:none}
}

.lieu-logo{width:auto;max-width:100%;height:clamp(118px,17vh,172px);object-fit:contain;object-position:left center}
.lieu-volets{padding-right:clamp(0px,2vw,26px)}
.volet-ord{font-size:12px;letter-spacing:.34em;color:color-mix(in srgb,var(--c-accent) 85%,var(--c-ink))}

.lieu-logo{height:clamp(150px,23vh,240px)}
.lieu-volets{padding-right:clamp(10px,3.4vw,54px)}

.volet-ord{font-size:12px;letter-spacing:.16em;color:color-mix(in srgb,var(--c-ink) 68%,transparent)}

/* L'atelier (01) — titre-affiche */
.lieu-headline{display:grid;margin:clamp(2px,1vh,12px) 0 clamp(10px,2vh,26px);line-height:.8;text-wrap:balance}
.lieu-headline .lh-1,.lieu-headline .lh-3{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;font-size:clamp(46px,9.2vw,148px);letter-spacing:-.015em;color:var(--c-petrol)}
.lieu-headline .lh-1{justify-self:start}
.lieu-headline .lh-2{font-family:var(--ff-body);font-style:italic;font-size:clamp(20px,2.6vw,42px);line-height:1;letter-spacing:.005em;color:var(--c-accent-d);justify-self:start;margin:clamp(4px,.9vh,12px) 0 clamp(2px,.7vh,10px);padding-left:clamp(10px,7vw,120px)}
.lieu-headline .lh-3{justify-self:end;padding-right:clamp(0px,1.6vw,26px);color:var(--c-ink)}
.lieu-layout{align-content:start;align-items:start;grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr)}
.lieu-intro{gap:clamp(8px,1.2vh,14px)}
.lieu-logo{height:clamp(96px,15vh,168px)}
.volet--a .volet-fig image-slot{height:clamp(130px,21vh,230px)}
.volet--b .volet-fig image-slot{height:clamp(150px,25vh,265px)}
.volet--c .volet-fig image-slot{height:clamp(118px,18vh,200px)}
.volet--a{margin-top:clamp(0px,2vh,22px)}
.volet--c{margin-top:clamp(0px,3.4vh,40px)}
.volet-text{font-size:clamp(12.5px,1.2vh + .22vw,14.5px)}
@media (max-width:1240px){
  .lieu-headline .lh-2{padding-left:clamp(8px,5vw,60px)}
  .lieu-headline .lh-3{justify-self:start;padding-right:0}
}
@media (max-width:760px){.lieu-headline{margin-bottom:18px}.lieu-headline .lh-1,.lieu-headline .lh-3{font-size:clamp(38px,13vw,72px)}}

.lieu-headline{margin:clamp(0px,.6vh,8px) 0 clamp(8px,1.4vh,18px);padding-right:clamp(36px,4.6vw,78px)}
.lieu-headline .lh-1,.lieu-headline .lh-3{font-size:clamp(44px,7.6vw,120px)}
.lieu-headline .lh-2{font-size:clamp(19px,2.2vw,34px);margin:clamp(2px,.6vh,8px) 0 0}
.volet--a .volet-fig image-slot{height:clamp(120px,17.5vh,196px)}
.volet--b .volet-fig image-slot{height:clamp(136px,20.5vh,228px)}
.volet--c .volet-fig image-slot{height:clamp(108px,15vh,170px)}
.volet--a{margin-top:clamp(0px,1.4vh,16px)}
.volet--c{margin-top:clamp(0px,2.6vh,30px)}
.volet{gap:7px}
.volet-fig{margin-bottom:clamp(4px,.8vh,9px)}
.lieu-logo{height:clamp(86px,12vh,140px)}
.lieu-lede{font-size:clamp(13.5px,1.3vh + .28vw,15.5px)}

/* Héro : cartouche ferré en haut à gauche, picto en bas à droite */
.fullpage > .hero.fp-panel,.hero{align-content:start}
.hero-top{justify-content:flex-start;align-items:flex-start;min-height:auto}
.hero-picto{position:absolute;z-index:3;right:var(--pad-x);bottom:clamp(34px,5vh,72px);margin:0}

/* ── L'ATELIER (01) — spread éditorial : grande photo + colonne de texte ── */
.lieu-v3{display:flex;flex-direction:column}
.lieu-spread{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);column-gap:clamp(24px,3vw,56px);margin-top:clamp(8px,1.4vh,20px)}
.lieu-shot{position:relative;margin:0;min-height:0;border-radius:var(--photo-radius);overflow:hidden;background:color-mix(in srgb,var(--c-ink) 8%,transparent)}
.lieu-shot image-slot{display:block;width:100%;height:100%}
.lieu-shot figcaption{position:absolute;left:clamp(12px,1.2vw,20px);bottom:clamp(12px,1.2vw,20px);padding:.5em .95em;border-radius:999px;background:color-mix(in srgb,var(--c-petrol-d) 82%,transparent);color:#fff;font-family:var(--ff-mono);font-size:clamp(11px,.72vw,14px);letter-spacing:.06em;text-transform:uppercase}
.lieu-col{display:flex;flex-direction:column;min-height:0;gap:clamp(12px,2vh,26px)}
.lieu-col .lieu-headline{margin:0;padding:0}
.lieu-col .lieu-headline .lh-1,.lieu-col .lieu-headline .lh-3{font-size:clamp(42px,4.8vw,96px)}
.lieu-col .lieu-headline .lh-2{font-size:clamp(19px,1.7vw,31px)}
.lieu-lede{margin:0;max-width:44ch;font-family:var(--ff-body);font-size:clamp(18px,1vw + .5vh,26px);font-weight:400;line-height:1.36;color:var(--c-petrol);text-wrap:pretty}
.lieu-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;border-top:1px solid color-mix(in srgb,var(--c-ink) 22%,transparent);padding-top:clamp(12px,2vh,24px)}
.lieu-notes{grid-column:1;grid-row:1;margin:0;display:flex;flex-direction:column;gap:clamp(14px,2.4vh,30px)}
.lieu-notes>div{display:grid;grid-template-columns:clamp(84px,7.5vw,124px) minmax(0,1fr);gap:clamp(12px,1.4vw,22px);align-items:baseline}
.lieu-notes dt{margin:0;font-family:var(--ff-mono);font-size:clamp(12px,.8vw,15px);letter-spacing:.1em;text-transform:uppercase;color:var(--c-petrol)}
.lieu-notes dd{margin:0;font-family:var(--ff-body);font-size:clamp(15px,.8vw + .45vh,19px);line-height:1.48;color:color-mix(in srgb,var(--c-ink) 88%,transparent);text-wrap:pretty}
.lieu-mark{align-self:flex-start;width:clamp(150px,15vw,240px);height:auto;object-fit:contain}
@media (max-width:1240px){
  .lieu-spread{grid-template-columns:minmax(0,1fr);row-gap:clamp(16px,2.4vh,28px)}
  .lieu-shot{min-height:clamp(180px,26vh,300px)}
  .lieu-notes>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .lieu-lede{max-width:58ch}
}
@media (max-width:640px){
  .lieu-mark{width:min(60vw,200px)}
}