/* ============================================
   TOBY FINER — styles.css · Version 2
   fr.tobyfiner.com · Project Atelier

   Version 2 visual concept:
   The gallery in morning light. The same room,
   one direction of light, shadow and presence.

   Changes from V1:
   - Subtly textured background (CSS only)
   - Dark cinematic hero zone
   - Larger, more commanding display type
   - Page-load entry sequence
   - Refined placeholder image treatment
   - Section heading scale and weight
   - Creation text panel surface treatment
   - Considered hover states
   - More vertical breathing room

   Contents
   ─────────────────────────────────────────
   1.  CSS Custom Properties
   2.  Reset & Base
   3.  Page Entry Animation
   4.  Typography
   5.  Placeholders (V2 treatment)
   6.  Navigation
   7.  Hero (dark cinematic zone)
   8.  Section Shared
   9.  Vocation
   10. Pierre
   11. Créations (panel treatment)
   12. Sur Mesure
   13. Atelier
   14. Contact
   15. Page End
   16. Responsive — 768px+
   17. Responsive — 1024px+
   18. Accessibility
   ────────────────────────────────────────── */


/* ============================================
   1. CSS CUSTOM PROPERTIES
   ============================================ */

:root {

  /* ── COLOUR PALETTE
     V3: Japanese craftsmanship · Mediterranean warmth
     Material references: limestone, linen, ceramic, brushed silver
     ──────────────────────────────────────────────── */

  /* Backgrounds */
  --tf-linge:          #EDE5D8;   /* Calcaire — limestone in afternoon shadow */
  --tf-linge-warm:     #E6DDD0;   /* Argile — dry clay, slightly cooler undertone */

  /* Text */
  --tf-encre:          #1F1D18;   /* Fusain — charcoal on paper, warm near-black */
  --tf-cendres:        #6B6257;   /* Ocre — ochre earth, Mediterranean not Nordic */
  --tf-cendres-light:  #9A9089;   /* Sable — sand in shadow */

  /* Accent — one use only */
  --tf-pierre:         #7FA3B5;   /* Lune — moonstone blue, deepened to mineral */

  /* Surfaces */
  --tf-velin:          #F4EEE4;   /* Ivoire — ivory, for panels and à venir */
  --tf-velin-warm:     #EAE0D2;   /* Lin — linen, slightly darker, creation panels */
  --tf-velin-deep:     #E0D6C8;   /* Grès foncé — stoneware dark */

  /* Dividers */
  --tf-fil:            #DDD5C8;   /* Grès clair — light stoneware */
  --tf-fil-strong:     #C8BFB2;   /* Grès — stoneware, visible but not assertive */

  /* Hero dark zone — warm volcanic, not cold black */
  --tf-hero-dark:      #181510;   /* Basalte — volcanic dark with red undertone */
  --tf-hero-frame:     #100E0A;   /* Inside the kiln — deepest warm dark */
  --tf-hero-text:      #F4EEE4;   /* Ivoire on dark — warm white */
  --tf-hero-muted:     rgba(244, 238, 228, 0.50); /* Muted ivoire */
  --tf-hero-border:    rgba(244, 238, 228, 0.06); /* Frame inset border */

  /* Placeholders */
  --tf-placeholder-bg:   #C0B9B0;   /* Warm stone — lighter for body sections */
  --tf-placeholder-dark: #28231C;   /* Warm dark — for hero frame */
  --tf-placeholder-fg:   #7A7268;
  --tf-placeholder-fg-dark: #8A8275;

  /* Nav */
  --tf-nav-bg: rgba(237, 229, 216, 0.96); /* Calcaire · slightly more opaque for legibility */

  /* Grain texture
     V3: higher baseFrequency for finer grain (paper vs digital noise)
     Warm channel bias via feColorMatrix
     Lower opacity — felt not seen */
  --tf-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0 0.06 0 0 0 0.028 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");

  /* ── TYPOGRAPHY ──────────────────────────────── */
  --tf-font-display:   'Cormorant', Georgia, serif;
  --tf-font-body:      'Spectral', Georgia, serif;
  --tf-font-sc:        'Spectral SC', Georgia, serif;

  /* Type scale — mobile first */
  --tf-size-hero:      34px;
  --tf-size-heading:   22px;
  --tf-size-body:      16px;    /* Body: 16px / will use font-size inline for the 16.5 nudge */
  --tf-size-body-alt:  13px;
  --tf-size-caption:   11px;
  --tf-size-small:      9px;

  /* Line heights */
  --tf-lh-display:     1.1;
  --tf-lh-body:        1.90;    /* V3: slightly more — handset feel */
  --tf-lh-tight:       1.45;

  /* Letter spacing
     V3: sc tracking widened — handset type feel */
  --tf-ls-sc:          0.25em;  /* Wider — feels set by hand */
  --tf-ls-nav:         0.18em;
  --tf-ls-caps:        0.18em;
  --tf-ls-brand:       0.12em;
  --tf-ls-body:        0.015em; /* Slightly wider body — less digital */

  /* Font weights */
  --tf-weight-light:   300;
  --tf-weight-regular: 400;

  /* ── SPACING ──────────────────────────────────── */
  --tf-section-pad-v:  72px;
  --tf-section-pad-h:  24px;
  --tf-gap-lg:         28px;
  --tf-gap-md:         18px;
  --tf-gap-sm:         10px;
  --tf-gap-xs:          6px;

  /* Divider */
  --tf-divider-w:      48px;
  --tf-divider-h:      0.5px;

  /* Max widths */
  --tf-max-width:      1200px;
  --tf-text-max:       540px;
  --tf-creation-max:   1100px;

  /* ── MOTION ───────────────────────────────────── */
  --tf-trans-nav:         opacity 0.4s ease, transform 0.4s ease;
  --tf-trans-hover-img:   filter 0.7s ease;
  --tf-trans-hover-link:  color 0.3s ease;
  --tf-trans-arrow:       transform 0.28s ease;
  --tf-trans-reveal:      none;

  /* ── SHADOWS ──────────────────────────────────── */
  /* V3: shadows have warm tint — never cool grey */
  --tf-shadow-creation: 0 2px 20px rgba(31, 29, 24, 0.08);
  --tf-shadow-img:      0 6px 36px rgba(31, 29, 24, 0.14);
}


/* ============================================
   2. RESET & BASE
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--tf-linge);
  color: var(--tf-encre);
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-regular);
  font-size: 16.5px;            /* V3: half-point reduction for lighter feel */
  line-height: var(--tf-lh-body);
  letter-spacing: var(--tf-ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;

  /* V3: layered background — grain + subtle warm gradient
     The gradient is imperceptible as gradient; felt as sunlight from above.
     The grain reads as paper surface, not digital effect. */
  background-image:
    var(--tf-texture),
    linear-gradient(
      180deg,
      rgba(255, 248, 236, 0.18) 0%,
      transparent 40%,
      rgba(0, 0, 0, 0.03) 100%
    );
  background-repeat: repeat, no-repeat;
  background-size: 200px 200px, 100% 100%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: var(--tf-trans-hover-link);
}

button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

address { font-style: normal; }
ul, ol  { list-style: none; }


/* ============================================
   3. PAGE ENTRY ANIMATION
   Single sequence on load. Under 900ms total.
   The page arrives; it does not appear.
   ============================================ */

/* Elements that enter on load */
.tf-hero-name,
.tf-hero-image-wrap,
.tf-hero-caption {
  opacity: 0;
  transform: translateY(10px);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tf-hero-name {
  animation-name: tf-enter;
  animation-duration: 700ms;
  animation-delay: 100ms;
}

.tf-hero-image-wrap {
  animation-name: tf-enter;
  animation-duration: 800ms;
  animation-delay: 280ms;
}

.tf-hero-caption {
  animation-name: tf-enter;
  animation-duration: 600ms;
  animation-delay: 500ms;
}

@keyframes tf-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll-reveal for non-hero sections */
.tf-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tf-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children within a reveal group */
.tf-reveal-group .tf-reveal:nth-child(1) { transition-delay: 0ms;   }
.tf-reveal-group .tf-reveal:nth-child(2) { transition-delay: 120ms; }
.tf-reveal-group .tf-reveal:nth-child(3) { transition-delay: 240ms; }


/* ============================================
   4. TYPOGRAPHY
   ============================================ */

/* Brand name — H1 */
.tf-hero-name {
  font-family: var(--tf-font-display);
  font-weight: var(--tf-weight-light);
  font-size: var(--tf-size-hero);
  letter-spacing: var(--tf-ls-brand);
  color: var(--tf-hero-text);     /* V2: light — sits on dark hero */
  line-height: var(--tf-lh-display);
  text-align: center;
}

/* Section headings — H2 */
.tf-section-heading {
  font-family: var(--tf-font-display);
  font-weight: var(--tf-weight-light);
  font-style: italic;
  font-size: var(--tf-size-heading);
  color: var(--tf-encre);
  line-height: 1.2;
  margin-bottom: 22px;
}

.tf-section-heading--pierre {
  max-width: var(--tf-text-max);
}

/* Piece names — H3 */
.tf-piece-name {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-regular);
  font-size: var(--tf-size-body-alt);
  color: var(--tf-encre);
  line-height: var(--tf-lh-tight);
  margin-bottom: 10px;
  transition: var(--tf-trans-reveal); /* no transition — spec */
}

/* Section tag */
.tf-section-tag {
  display: block;
  font-family: var(--tf-font-sc);
  font-weight: var(--tf-weight-light);
  font-size: var(--tf-size-small);
  letter-spacing: var(--tf-ls-sc);
  color: var(--tf-cendres-light);
  text-transform: uppercase;
  margin-bottom: 24px;            /* V2: more space after tag */
}

/* Piece label */
.tf-piece-label {
  display: block;
  font-family: var(--tf-font-sc);
  font-weight: var(--tf-weight-light);
  font-size: var(--tf-size-small);
  letter-spacing: var(--tf-ls-caps);
  color: var(--tf-cendres-light);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Body text */
.tf-body {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-regular);
  font-size: var(--tf-size-body);
  color: var(--tf-encre);
  line-height: var(--tf-lh-body);
  margin-bottom: 16px;
}

.tf-body:last-child { margin-bottom: 0; }

.tf-body--italic {
  font-style: italic;
  font-weight: var(--tf-weight-light);
  color: var(--tf-cendres);
}

.tf-body--measure {
  max-width: var(--tf-text-max);
}

/* Piece description */
.tf-piece-desc {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-light);
  font-style: italic;
  font-size: var(--tf-size-body-alt);
  color: var(--tf-cendres);
  line-height: var(--tf-lh-body);
  margin-bottom: 18px;
}

/* Stone captions */
.tf-pierre-caption {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-light);
  font-style: italic;
  font-size: var(--tf-size-caption);
  color: var(--tf-cendres);
  line-height: var(--tf-lh-tight);
  margin-top: 10px;
}

/* Divider */
.tf-divider {
  width: var(--tf-divider-w);
  height: var(--tf-divider-h);
  background-color: var(--tf-fil-strong);  /* V2: slightly stronger */
  margin: 18px 0;
}


/* ============================================
   5. PLACEHOLDERS — V3 TREATMENT
   Material, directional, atmospheric.
   Hero placeholder: warm volcanic dark.
   Body placeholders: warm limestone stone.

   PHOTOGRAPHY NOTE — V3 direction:
   - Surface: unglazed ceramic or worn limestone (not white)
   - Light: single direction, Mediterranean (not studio)
   - Hero: portrait 3:4, tight crop, subject fills frame
   - Colour temp: warm — the colour of Narbonne at 10am
   - Shadow: present and deliberate, not removed in editing
   ============================================ */

.tf-photo-placeholder {
  background-color: var(--tf-placeholder-bg);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* V3: directional light — from upper left, Mediterranean window quality */
.tf-photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    rgba(255, 248, 236, 0.10) 0%,
    transparent 45%,
    rgba(31, 29, 24, 0.08) 100%
  );
  pointer-events: none;
}

/* Brief text — bottom-left, discreet */
.tf-photo-placeholder::after {
  content: attr(data-brief);
  font-family: var(--tf-font-body);
  font-style: italic;
  font-size: 9px;
  color: var(--tf-placeholder-fg);
  padding: 12px 14px;
  line-height: 1.6;
  max-width: 260px;
  position: relative;
  z-index: 1;
}

/* Hero placeholder — dark */
.tf-hero-photo {
  background-color: var(--tf-placeholder-dark);
  aspect-ratio: 4 / 5;  /* Mobile portrait */
}

.tf-hero-photo::before {
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.03) 0%,
    transparent 40%,
    rgba(0,0,0,0.15) 100%
  );
}

.tf-hero-photo::after {
  color: var(--tf-placeholder-fg-dark);
}

/* Portrait placeholder */
.tf-vocation-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
}

/* Stone placeholders */
.tf-pierre-photo {
  width: 100%;
  height: 100%;
  min-height: 120px;
}

/* Creation placeholders */
.tf-creation-img {
  aspect-ratio: 4 / 3;
}

/* Atelier placeholder */
.tf-atelier-photo {
  aspect-ratio: 4 / 3;
}

/* V2: real images get subtle shadow and slight hover warmth */
.tf-creation-photo img,
.tf-vocation-portrait img,
.tf-atelier-figure img {
  box-shadow: var(--tf-shadow-img);
  filter: brightness(1) saturate(1);
  transition: var(--tf-trans-hover-img);
}

/* V3: hover — warm saturation shift, like light moving across a surface */
.tf-creation-photo:hover img {
  filter: brightness(1.04) saturate(1.06) sepia(0.04);
}

.tf-vocation-portrait:hover img {
  filter: brightness(1.03) saturate(1.04) sepia(0.03);
}


/* ============================================
   6. NAVIGATION — V2
   ============================================ */

#tf-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--tf-section-pad-h);
  background-color: var(--tf-nav-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--tf-divider-h) solid transparent; /* shown on scroll */

  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: var(--tf-trans-nav);
}

/* V2: nav gets a faint border when visible */
#tf-nav.tf-nav-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  border-bottom-color: var(--tf-fil);
}

.tf-nav-name {
  font-family: var(--tf-font-sc);
  font-weight: var(--tf-weight-regular);
  font-size: 10px;
  letter-spacing: var(--tf-ls-nav);
  color: var(--tf-encre);
  text-transform: uppercase;
}

.tf-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tf-nav-link {
  font-family: var(--tf-font-sc);
  font-weight: var(--tf-weight-light);
  font-size: 9px;
  letter-spacing: var(--tf-ls-nav);
  color: var(--tf-cendres);
  text-transform: uppercase;
  padding: 10px 0;
  margin: -10px 0;
  display: inline-block;
  transition: var(--tf-trans-hover-link);
}

.tf-nav-link:hover {
  color: var(--tf-encre);
}

.tf-nav-sep {
  width: 0.5px;
  height: 10px;
  background-color: var(--tf-fil-strong);
  flex-shrink: 0;
}

/* Mobile: hide Les Créations */
.tf-nav-right .tf-nav-link:first-child,
.tf-nav-right .tf-nav-sep:first-of-type {
  display: none;
}


/* ============================================
   7. HERO — SPLIT EDITORIAL · V2 REVISED
   Left: text column (55%). Right: framed image (45%).
   Dark section. Composition independent of image quality.
   ============================================ */

#hero {
  /* V3: basalte — volcanic warm dark with grain and subtle warm-centre vignette */
  background-color: var(--tf-hero-dark);
  background-image:
    var(--tf-texture),
    radial-gradient(
      ellipse 80% 60% at 30% 50%,
      rgba(60, 44, 28, 0.22) 0%,
      transparent 70%
    );
  background-repeat: repeat, no-repeat;
  background-size: 200px 200px, 100% 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* Split container */
.tf-hero-split {
  width: 100%;
  max-width: var(--tf-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;       /* Stack on mobile */
  min-height: 100svh;
}

/* ── LEFT COLUMN ── */

.tf-hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px var(--tf-section-pad-h) 48px;
  flex: 1;
}

/* Eyebrow — name + location */
.tf-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.tf-hero-eyebrow-name {
  font-family: var(--tf-font-sc);
  font-weight: var(--tf-weight-regular);
  font-size: 10px;
  letter-spacing: var(--tf-ls-sc);
  color: var(--tf-hero-text);
  text-transform: uppercase;
  opacity: 0.9;
}

.tf-hero-eyebrow-sep {
  font-family: var(--tf-font-sc);
  font-size: 10px;
  color: rgba(237, 232, 223, 0.3);
}

.tf-hero-eyebrow-loc {
  font-family: var(--tf-font-sc);
  font-weight: var(--tf-weight-light);
  font-size: 10px;
  letter-spacing: var(--tf-ls-sc);
  color: rgba(237, 232, 223, 0.45);
  text-transform: uppercase;
}

/* Main headline — H1 */
.tf-hero-headline {
  font-family: var(--tf-font-display);
  font-weight: var(--tf-weight-light);
  font-style: italic;
  font-size: 32px;              /* Mobile: strong but not overwhelming */
  color: var(--tf-hero-text);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
  max-width: 480px;
}

/* Supporting paragraph */
.tf-hero-body {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-light);
  font-size: 15px;
  color: var(--tf-hero-muted);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 400px;
}

/* CTA — text link with arrow, not a button */
.tf-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-regular);
  font-size: 13px;
  color: rgba(237, 232, 223, 0.7);
  letter-spacing: 0.04em;
  transition: color 0.3s ease;
  align-self: flex-start;
}

.tf-hero-cta:hover {
  color: var(--tf-hero-text);
}

.tf-hero-cta-arrow {
  color: var(--tf-pierre);
  display: inline-block;
  transition: transform 0.25s ease;
  font-style: normal;
}

.tf-hero-cta:hover .tf-hero-cta-arrow {
  transform: translateX(5px);
}

/* ── RIGHT COLUMN ── */

.tf-hero-right {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
}

/* The dark frame that holds the image */
.tf-hero-frame {
  /* V3: use basalte frame token — inside the kiln */
  background-color: var(--tf-hero-frame);
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Inset lines — the frame gesture */
.tf-hero-frame::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 0.5px solid var(--tf-hero-border);  /* V3: uses palette token */
  pointer-events: none;
  z-index: 2;
}

/* Mobile: frame is a contained tall rectangle */
.tf-hero-frame {
  padding: 24px;
  min-height: 60vw;
}

/* Hero photo — inside the frame */
.tf-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;         /* Portrait — suits ring/pendant naturally */
  display: block;
  position: relative;
  z-index: 1;
}

/* Placeholder inside frame */
.tf-photo-placeholder.tf-hero-photo {
  background-color: var(--tf-placeholder-dark);  /* V3: basalte-adjacent */
  aspect-ratio: 3 / 4;
  min-height: 200px;
}

.tf-photo-placeholder.tf-hero-photo::before {
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.02) 0%,
    transparent 40%,
    rgba(0,0,0,0.2) 100%
  );
}

.tf-photo-placeholder.tf-hero-photo::after {
  color: rgba(160, 152, 144, 0.6);
  font-size: 9px;
  padding: 14px 16px;
}

/* Page entry animations — hero left */
.tf-hero-eyebrow {
  opacity: 0;
  transform: translateY(8px);
  animation: tf-enter 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 80ms both;
}

.tf-hero-headline {
  opacity: 0;
  transform: translateY(12px);
  animation: tf-enter 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms both;
}

.tf-hero-body {
  opacity: 0;
  transform: translateY(8px);
  animation: tf-enter 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 360ms both;
}

.tf-hero-cta {
  opacity: 0;
  transform: translateY(6px);
  animation: tf-enter 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 480ms both;
}

/* Hero right — image frame enters slightly later */
.tf-hero-right {
  opacity: 0;
  animation: tf-enter 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 300ms both;
}

/* ============================================
   8. SECTION SHARED
   ============================================ */

#vocation,
#pierre,
#creations,
#sur-mesure,
#contact {
  padding-top: var(--tf-section-pad-v);
  padding-bottom: var(--tf-section-pad-v);
  border-top: var(--tf-divider-h) solid var(--tf-fil);
}

/* V2: first section after dark hero gets no top border */
#vocation {
  border-top: none;
  padding-top: calc(var(--tf-section-pad-v) + 16px); /* extra breath after dark */
}

.tf-section-inner {
  max-width: var(--tf-max-width);
  margin: 0 auto;
  padding: 0 var(--tf-section-pad-h);
}


/* ============================================
   9. VOCATION — V2
   ============================================ */

.tf-vocation-grid {
  display: flex;
  flex-direction: column;
  gap: var(--tf-gap-lg);
}

.tf-vocation-portrait {
  order: -1;
}

.tf-vocation-text {
  order: 1;
}

.tf-vocation-text .tf-section-heading {
  margin-bottom: 22px;
}

.tf-vocation-text .tf-body {
  margin-bottom: 16px;
}


/* ============================================
   10. PIERRE — V2
   ============================================ */

.tf-pierre-grid {
  display: flex;
  flex-direction: column;
  gap: var(--tf-gap-lg);
  margin-top: 0;
}

.tf-pierre-item {
  display: flex;
  flex-direction: column;
}

.tf-pierre-photo {
  aspect-ratio: 4 / 3;
}


/* ============================================
   11. CRÉATIONS — V2
   Each creation has a warm surface panel
   on the text column — a considered frame.
   ============================================ */

#creations .tf-section-inner {
  max-width: var(--tf-creation-max);
}

.tf-creation {
  margin-bottom: 72px;
  padding-bottom: 72px;
  border-bottom: var(--tf-divider-h) solid var(--tf-fil);
}

.tf-creation:last-of-type {
  border-bottom: none;
  margin-bottom: 48px;
}

.tf-creation-inner {
  display: flex;
  flex-direction: column;
  gap: var(--tf-gap-lg);
}

.tf-creation-photo {
  order: -1;
}

/* V2: text column has a warm surface tint on desktop */
.tf-creation-text {
  order: 1;
  padding-top: 4px;
}

/* En savoir plus trigger */
.tf-reveal-trigger {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-light);
  font-style: italic;
  font-size: var(--tf-size-body-alt);
  color: var(--tf-cendres);
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
  cursor: pointer;
  transition: var(--tf-trans-hover-link);
}

.tf-reveal-trigger:hover {
  color: var(--tf-encre);
}

.tf-reveal-panel {
  margin-top: 10px;
}

.tf-reveal-panel[hidden] {
  display: none;
}

.tf-enquire-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-regular);
  font-size: var(--tf-size-body-alt);
  color: var(--tf-encre);
  padding: 12px 0;
  margin: -12px 0;
  transition: var(--tf-trans-hover-link);
}

.tf-enquire-arrow {
  color: var(--tf-pierre);
  display: inline-block;
  transition: var(--tf-trans-arrow);
  font-style: normal;
}

.tf-enquire-link:hover .tf-enquire-arrow {
  transform: translateX(4px);
}

/* V2: revealed state — instantaneous */
.tf-creation.is-revealed .tf-piece-name {
  color: var(--tf-pierre);
  transition: none;
}

/* À venir block — V2: border treatment */
.tf-avenir {
  /* V3: ivoire surface with grès border — like an unglazed ceramic tile */
  background-color: var(--tf-velin);
  padding: 52px 32px;
  text-align: center;
  border-radius: 1px;
  border: var(--tf-divider-h) solid var(--tf-fil-strong);
  box-shadow: inset 0 1px 0 rgba(31, 29, 24, 0.04);  /* Subtle inset depth */
}

.tf-avenir-line1 {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-light);
  font-style: italic;
  font-size: var(--tf-size-body);
  color: var(--tf-cendres);
  margin-bottom: 12px;
}

.tf-avenir-line2 {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-regular);
  font-size: var(--tf-size-body-alt);
  color: var(--tf-cendres-light);
  letter-spacing: 0.02em;
}


/* ============================================
   12. SUR MESURE — V2
   ============================================ */

.tf-surmesure-text {
  max-width: var(--tf-text-max);
}

.tf-surmesure-text .tf-section-heading {
  margin-bottom: 22px;
}

.tf-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-regular);
  font-size: var(--tf-size-body);
  color: var(--tf-encre);
  padding: 12px 0;
  margin: -12px 0;
  margin-top: 0;
  transition: var(--tf-trans-hover-link);
}

.tf-cta-arrow {
  color: var(--tf-pierre);
  display: inline-block;
  transition: var(--tf-trans-arrow);
  font-style: normal;
}

.tf-cta-link:hover .tf-cta-arrow {
  transform: translateX(4px);
}


/* ============================================
   13. ATELIER — V2
   Full-width. No padding. Dark top border.
   ============================================ */

#atelier {
  border-top: 1px solid var(--tf-fil-strong); /* V2: stronger border here */
  padding: 0;
}

.tf-atelier-inner {
  width: 100%;
}

.tf-atelier-figure {
  margin: 0;
  position: relative;
}

.tf-atelier-photo {
  width: 100%;
  display: block;
}

/* V2: atelier caption sits overlaid bottom-right on desktop */
.tf-atelier-caption {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-light);
  font-style: italic;
  font-size: var(--tf-size-caption);
  color: var(--tf-cendres-light);
  text-align: right;
  padding: 14px var(--tf-section-pad-h) 0;
  max-width: var(--tf-max-width);
  margin: 0 auto;
}


/* ============================================
   14. CONTACT — V2
   ============================================ */

.tf-contact-grid {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.tf-contact-intro {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-regular);
  font-size: var(--tf-size-body);
  color: var(--tf-encre);
  line-height: var(--tf-lh-body);
  margin-bottom: 28px;
}

.tf-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 20px;
}

.tf-field-label {
  font-family: var(--tf-font-sc);
  font-weight: var(--tf-weight-light);
  font-size: 8px;
  letter-spacing: var(--tf-ls-caps);
  color: var(--tf-cendres-light);
  text-transform: uppercase;
}

.tf-field-input,
.tf-field-textarea {
  background-color: transparent;
  border: none;
  border-bottom: var(--tf-divider-h) solid var(--tf-fil);
  border-radius: 0;
  padding: 10px 0;
  font-family: var(--tf-font-body);
  font-style: italic;
  font-weight: var(--tf-weight-light);
  font-size: var(--tf-size-body-alt);
  color: var(--tf-encre);
  line-height: var(--tf-lh-body);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.3s ease;
}

.tf-field-input::placeholder,
.tf-field-textarea::placeholder {
  color: var(--tf-cendres-light);
  font-style: italic;
}

.tf-field-input:focus,
.tf-field-textarea:focus {
  outline: none;
  border-bottom-color: var(--tf-encre);
}

.tf-field-textarea {
  resize: none;
  min-height: 128px;
}

.tf-field-group.tf-field-error .tf-field-input,
.tf-field-group.tf-field-error .tf-field-textarea {
  border-bottom-color: var(--tf-pierre);
}

.tf-honeypot {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

.tf-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.tf-whatsapp-link {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-light);
  font-style: italic;
  font-size: var(--tf-size-body-alt);
  color: var(--tf-cendres);
  padding: 12px 0;
  margin: -12px 0;
  display: inline-block;
  transition: var(--tf-trans-hover-link);
}

.tf-whatsapp-link:hover {
  color: var(--tf-encre);
}

.tf-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-regular);
  font-size: var(--tf-size-body-alt);
  color: var(--tf-encre);
  cursor: pointer;
  padding: 12px 0;
  margin: -12px 0;
  transition: var(--tf-trans-hover-link);
}

.tf-submit-arrow {
  color: var(--tf-pierre);
  display: inline-block;
  transition: var(--tf-trans-arrow);
  font-style: normal;
}

.tf-submit-btn:hover .tf-submit-arrow {
  transform: translateX(4px);
}

.tf-submit-btn[data-state="sending"] {
  opacity: 0.5;
  pointer-events: none;
}

.tf-form-success {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-light);
  font-style: italic;
  font-size: var(--tf-size-body);
  color: var(--tf-cendres);
  margin-top: 24px;
}

.tf-form-success[hidden] { display: none; }

.tf-form-error {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-regular);
  font-size: var(--tf-size-body-alt);
  color: var(--tf-cendres);
  margin-top: 14px;
}

.tf-form-error[hidden] { display: none; }

.tf-contact-note {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-light);
  font-style: italic;
  font-size: var(--tf-size-body-alt);
  color: var(--tf-cendres);
  line-height: var(--tf-lh-body);
}

.tf-contact-address {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tf-contact-location {
  font-family: var(--tf-font-sc);
  font-weight: var(--tf-weight-light);
  font-size: var(--tf-size-small);
  letter-spacing: 0.14em;
  color: var(--tf-cendres);
  text-transform: uppercase;
}

.tf-contact-email {
  font-family: var(--tf-font-sc);
  font-weight: var(--tf-weight-light);
  font-size: var(--tf-size-small);
  letter-spacing: 0.10em;
  color: var(--tf-pierre);
  transition: var(--tf-trans-hover-link);
}

.tf-contact-email:hover {
  color: var(--tf-encre);
}

.tf-contact-languages {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-light);
  font-style: italic;
  font-size: 11px;
  color: var(--tf-cendres-light);
  margin-top: 14px;
}


/* ============================================
   15. PAGE END — V2
   ============================================ */

.tf-page-end {
  border-top: var(--tf-divider-h) solid var(--tf-fil-strong);
  padding: 28px var(--tf-section-pad-h) 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.tf-page-end-line {
  font-family: var(--tf-font-sc);
  font-weight: var(--tf-weight-light);
  font-size: 8px;
  letter-spacing: var(--tf-ls-caps);
  color: var(--tf-cendres-light);
  text-transform: uppercase;
}

.tf-lang-toggle-mobile {
  font-family: var(--tf-font-body);
  font-weight: var(--tf-weight-light);
  font-style: italic;
  font-size: var(--tf-size-body-alt);
  color: var(--tf-cendres);
  display: inline-block;
  padding: 8px 0;
  transition: var(--tf-trans-hover-link);
}

.tf-lang-toggle-mobile:hover {
  color: var(--tf-encre);
}


/* ============================================
   16. RESPONSIVE — 768px+
   ============================================ */

@media (min-width: 768px) {

  :root {
    --tf-size-hero:       52px;    /* V2: more commanding at desktop */
    --tf-size-heading:    28px;    /* V3: present but not imposing */
    --tf-size-body:       17px;    /* Stays at 17 — 16.5 set on body directly */
    --tf-size-body-alt:   14px;
    --tf-size-caption:    12px;
    --tf-size-small:      10px;
    --tf-section-pad-v:   100px;
    --tf-section-pad-h:   48px;
    --tf-gap-lg:          40px;
  }

  /* Nav — Les Créations visible, no background */
  .tf-nav-right .tf-nav-link:first-child,
  .tf-nav-right .tf-nav-sep:first-of-type {
    display: inline-flex;
  }

  #tf-nav {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent !important;
  }

  /* V2: nav on dark hero — text colour adapts */
  /* JS adds .tf-nav-on-dark class when hero is in view */
  #tf-nav.tf-nav-on-dark .tf-nav-name,
  #tf-nav.tf-nav-on-dark .tf-nav-link {
    color: rgba(237, 232, 223, 0.7);
  }

  #tf-nav.tf-nav-on-dark .tf-nav-link:hover {
    color: var(--tf-hero-text);
  }

  #tf-nav.tf-nav-on-dark .tf-nav-sep {
    background-color: rgba(237, 232, 223, 0.2);
  }

  /* Hero — split layout activates at tablet */
  #hero {
    min-height: 100svh;
    align-items: stretch;
  }

  .tf-hero-split {
    flex-direction: row;
    min-height: 100svh;
    align-items: stretch;
  }

  .tf-hero-left {
    flex: 55;
    padding: 80px 56px 80px var(--tf-section-pad-h);
    justify-content: center;
  }

  .tf-hero-headline {
    font-size: 44px;
    max-width: 520px;
  }

  .tf-hero-body {
    font-size: 16px;
    max-width: 420px;
  }

  .tf-hero-right {
    flex: 45;
    align-items: stretch;
  }

  .tf-hero-frame {
    padding: 32px;
    height: 100%;
    min-height: unset;
  }

  .tf-hero-photo,
  .tf-photo-placeholder.tf-hero-photo {
    aspect-ratio: unset;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
  }

  /* Vocation — two column */
  .tf-vocation-grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: var(--tf-gap-lg);
    align-items: start;
  }

  .tf-vocation-portrait { order: 1; }
  .tf-vocation-text     { order: -1; }

  /* Pierre — three column, unequal */
  .tf-pierre-grid {
    flex-direction: row;
    align-items: flex-end;
    gap: 18px;
  }

  .tf-pierre-item--sm  { flex: 1; }
  .tf-pierre-item--lg  { flex: 1.3; }
  .tf-pierre-item--xs  { flex: 0.9; }

  .tf-pierre-item--sm .tf-pierre-photo  { min-height: 170px; aspect-ratio: unset; height: 190px; }
  .tf-pierre-item--lg .tf-pierre-photo  { min-height: 210px; aspect-ratio: unset; height: 240px; }
  .tf-pierre-item--xs .tf-pierre-photo  { min-height: 135px; aspect-ratio: unset; height: 150px; }

  /* Créations — alternating two-column + text panel */
  .tf-creation-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  .tf-creation-photo { order: -1; }

  /* V3: creation text panel — lin (linen) surface, slightly textured edge */
  .tf-creation-text {
    order: 1;
    padding: 28px 32px 32px;
    background-color: var(--tf-velin-warm);   /* Lin — warmer than ivoire */
    border-radius: 1px;
    border-left: 2px solid var(--tf-fil-strong); /* Tactile edge — like a folded card */
  }

  /* Reverse layout */
  .tf-creation--reverse .tf-creation-inner {
    grid-template-columns: 1fr 1.1fr;
  }

  .tf-creation--reverse .tf-creation-photo { order: 1; }
  .tf-creation--reverse .tf-creation-text  { order: -1; }

  /* Atelier — wider crop */
  .tf-atelier-photo {
    aspect-ratio: 16 / 9;
  }

  /* V2: atelier caption overlaid on image, bottom right */
  .tf-atelier-figure {
    position: relative;
  }

  .tf-atelier-caption {
    position: absolute;
    bottom: 20px;
    right: 24px;
    color: rgba(237, 232, 223, 0.6);
    padding: 0;
    margin: 0;
    /* Only works when real image is dark enough — adjust if needed */
  }

  /* Contact — two column */
  .tf-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
  }

  .tf-contact-info-col {
    padding-top: 10px;
  }

  /* Page end — hide mobile lang toggle */
  .tf-lang-toggle-mobile {
    display: none;
  }
}


/* ============================================
   17. RESPONSIVE — 1024px+
   ============================================ */

@media (min-width: 1024px) {

  :root {
    --tf-section-pad-v:  112px;
  }

  /* Hero — larger headline at full desktop */
  .tf-hero-headline {
    font-size: 52px;
  }

  .tf-hero-left {
    padding-left: 72px;
    padding-right: 64px;
  }

  .tf-hero-frame {
    padding: 40px;
  }

  .tf-atelier-photo {
    aspect-ratio: 3 / 2;
  }

  /* Pierre — taller at full desktop */
  .tf-pierre-item--sm .tf-pierre-photo  { height: 210px; }
  .tf-pierre-item--lg .tf-pierre-photo  { height: 270px; }
  .tf-pierre-item--xs .tf-pierre-photo  { height: 165px; }

  /* Vocation — tighter text column with more breathing */
  .tf-vocation-text .tf-section-heading {
    font-size: 32px;
  }
}


/* ============================================
   18. ACCESSIBILITY
   ============================================ */

:focus-visible {
  outline: 2px solid var(--tf-pierre);
  outline-offset: 3px;
  border-radius: 1px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.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;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  /* Disable page entry animations */
  .tf-hero-name,
  .tf-hero-image-wrap,
  .tf-hero-caption {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Disable scroll-reveal */
  .tf-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Disable nav transition */
  #tf-nav {
    transition: none;
  }

  /* Disable hover transitions */
  .tf-enquire-arrow,
  .tf-cta-arrow,
  .tf-submit-arrow {
    transition: none;
  }

  .tf-creation-photo img,
  .tf-vocation-portrait img {
    transition: none;
  }

  a, button {
    transition: none;
  }
}
.tf-vocation-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}
/* Contact contrast polish */
#contact .tf-section-tag {
  color: #8A8076;
}

.tf-contact-intro {
  color: #2A2720;
}

.tf-field-label {
  color: #8A8076;
}

.tf-field-input,
.tf-field-textarea {
  color: #2A2720;
  border-bottom-color: #D2C8BC;
}

.tf-field-input:focus,
.tf-field-textarea:focus {
  border-bottom-color: #8FAAB8;
}

.tf-field-textarea::placeholder {
  color: #9B9187;
}

.tf-contact-note,
.tf-contact-languages {
  color: #7A7067;
}

.tf-contact-location {
  color: #8A8076;
}

.tf-contact-email {
  color: #6F9AAD;
}

.tf-whatsapp-link {
  color: #7A7067;
}

.tf-submit-btn {
  color: #2A2720;
}

/* Legal pages */

.legal-page {
  min-height: 100vh;
  background: #f7f3ed;
  color: #1f1b16;
}

.legal-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 120px 24px 48px;
  text-align: left;
}

.legal-hero .eyebrow {
  margin-bottom: 16px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a6f4d;
}

.legal-hero h1 {
  margin: 0 0 24px;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.legal-hero p {
  max-width: 720px;
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: #4e463d;
}

.legal-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 120px;
}

.legal-content h2 {
  margin: 56px 0 18px;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #1f1b16;
}

.legal-content p {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.75;
  color: #4e463d;
}

.legal-content strong {
  color: #1f1b16;
  font-weight: 500;
}

.legal-content a {
  color: #8a6f4d;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.legal-updated {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(31, 27, 22, 0.16);
  font-size: 0.95rem;
  color: #6f655a;
}

.footer-legal {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 32px 24px;
  font-size: 0.9rem;
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
  opacity: 0.75;
}

.footer-legal a:hover {
  opacity: 1;
}

/* ============================================
   LEGAL PAGE NAV
   ============================================ */

.tf-legal-body #tf-nav.tf-nav-legal {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: 64px;
  padding: 0 32px;

  background-color: rgba(237, 229, 216, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 0.5px solid rgba(31, 29, 24, 0.08);
}

.tf-legal-body #tf-nav.tf-nav-legal .tf-nav-name {
  font-family: var(--tf-font-sc);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--tf-encre);
  text-transform: uppercase;
}

.tf-legal-body #tf-nav.tf-nav-legal .tf-nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.tf-legal-body #tf-nav.tf-nav-legal .tf-nav-link {
  font-family: var(--tf-font-sc);
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--tf-cendres);
  text-transform: uppercase;
}

.tf-legal-body #tf-nav.tf-nav-legal .tf-nav-link:hover {
  color: var(--tf-encre);
}

.tf-legal-body #tf-nav.tf-nav-legal .tf-nav-sep {
  width: 0.5px;
  height: 12px;
  background-color: var(--tf-fil-strong);
}

.tf-legal-body .legal-hero {
  padding-top: 160px;
}

@media (min-width: 768px) {
  .tf-legal-body #tf-nav.tf-nav-legal {
    height: 72px;
    padding: 0 56px;
  }

  .tf-legal-body .legal-hero {
    padding-top: 180px;
  }
}