/* ══════════════════════════════════════════════════════════════
   PAGE ATELIER
══════════════════════════════════════════════════════════════ */

.atelier-page { padding-top: var(--nav-h); }

/* ── Section 1 — Introduction ─────────────────────────────────── */

.atelier-intro {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: calc(100vh - var(--nav-h));
}

.atelier-intro-visual {
  position: relative;
  overflow: hidden;
}

.atelier-intro-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.82);
  display: block;
}

.atelier-intro-accent {
  position: absolute;
  bottom: var(--sp-2xl);
  right: var(--sp-2xl);
  width: 170px;
  height: 170px;
  object-fit: cover;
  border: 3px solid var(--c-bg);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65);
}

.atelier-intro-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-xl);
  padding: var(--sp-3xl) var(--sp-2xl);
}

.atelier-intro-title {
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.1;
  color: var(--c-cream);
}

.atelier-intro-title em {
  font-style: italic;
  color: var(--c-gold);
}

.atelier-intro-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  color: var(--c-cream-dim);
  font-size: var(--size-md);
  line-height: 1.85;
  max-width: 480px;
}

/* ── Sections 2 & 3 — Bois / Cuivres ─────────────────────────── */

.atelier-section {
  display: grid;
  min-height: 640px;
  border-top: 1px solid var(--c-border);
}

.atelier-bois   { grid-template-columns: 1fr 42%; }
.atelier-cuivres { grid-template-columns: 42% 1fr; }

.atelier-section-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-xl);
  padding: var(--sp-3xl) var(--sp-2xl);
}

.atelier-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.atelier-section-title {
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  line-height: 1.1;
  color: var(--c-cream);
}

.atelier-section-note {
  font-size: var(--size-xs);
  color: var(--c-muted);
  font-style: italic;
  border-left: 2px solid var(--c-gold-dim);
  padding-left: var(--sp-md);
  line-height: 1.6;
  margin-top: var(--sp-xs);
}

/* ── Visuels ──────────────────────────────────────────────────── */

.atelier-section-visual {
  position: relative;
  overflow: hidden;
}

.atelier-visual-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  display: block;
  transition: filter var(--dur-slow) var(--ease);
}

.atelier-section-visual:hover .atelier-visual-main {
  filter: brightness(0.95);
}

.atelier-visual-accent {
  position: absolute;
  width: 190px;
  height: 190px;
  object-fit: cover;
  border: 3px solid var(--c-bg);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65);
}

/* Accent bois : coin bas-gauche */
.atelier-bois .atelier-visual-accent {
  bottom: var(--sp-2xl);
  left: var(--sp-2xl);
}

/* Accent cuivres : coin bas-droit */
.atelier-cuivres .atelier-visual-accent {
  bottom: var(--sp-2xl);
  right: var(--sp-2xl);
}

/* ── Tarifs ───────────────────────────────────────────────────── */

.tarifs-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
}

.tarifs-col-title {
  font-size: var(--size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-xs);
}

.tarifs-col-sub {
  font-size: var(--size-xs);
  color: var(--c-muted);
  margin-bottom: var(--sp-md);
  min-height: 1.4em;
}

.tarif-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(46, 41, 32, 0.4);
}

.tarif-row:last-child { border-bottom: none; }

.tarif-row--gold .tarif-name { color: var(--c-gold-dim); }
.tarif-row--gold .tarif-price { color: var(--c-gold); }

.tarif-name {
  font-size: var(--size-sm);
  color: var(--c-cream-dim);
  white-space: nowrap;
}

.tarif-dots {
  flex: 1;
  border-bottom: 1px dotted rgba(200, 168, 107, 0.2);
  margin-bottom: 3px;
  min-width: 8px;
}

.tarif-price {
  font-family: var(--font-serif);
  font-size: var(--size-md);
  color: var(--c-cream);
  white-space: nowrap;
  flex-shrink: 0;
}

.tarif-muted {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  color: var(--c-muted);
  letter-spacing: 0.04em;
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .atelier-intro {
    grid-template-columns: 1fr 1fr;
  }
  .atelier-bois    { grid-template-columns: 1fr 38%; }
  .atelier-cuivres { grid-template-columns: 38% 1fr; }
}

@media (max-width: 768px) {
  .atelier-intro {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .atelier-intro-visual {
    height: 65vw;
    min-height: 280px;
  }

  .atelier-intro-accent {
    width: 110px;
    height: 110px;
    bottom: var(--sp-lg);
    right: var(--sp-lg);
  }

  .atelier-intro-content {
    padding: var(--sp-2xl) var(--sp-lg);
  }

  .atelier-section {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  /* Image en premier sur mobile pour les cuivres */
  .atelier-cuivres .atelier-section-visual { order: -1; }

  .atelier-section-visual {
    height: 65vw;
    min-height: 280px;
  }

  .atelier-visual-accent {
    width: 110px;
    height: 110px;
  }

  .atelier-bois .atelier-visual-accent {
    bottom: var(--sp-lg);
    left: var(--sp-lg);
  }

  .atelier-cuivres .atelier-visual-accent {
    bottom: var(--sp-lg);
    right: var(--sp-lg);
  }

  .atelier-section-content {
    padding: var(--sp-2xl) var(--sp-lg);
  }

  .tarifs-cols {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }
}