/* ═══════════════════════════════════════════════════════════════════════════
   RÉCEPTION — structure de la SALLE DES FÊTES (templates/Salle/_structures/)
   Classique et lumineuse : la photo de la salle en plein écran, tout est centré
   et symétrique, sections ivoire et blanches en pleine largeur.
   Pensée pour le HTML de Salle-R (classes .gallery, .cards, .feat, .steps…).
   Aucune couleur en dur hors neutres : tout suit la palette du client.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-structure="reception"] { --r-ivory: #faf8f3; --r-line: #e8e1d3; background: var(--r-ivory); }

/* ── Barre : transparente sur la photo, ivoire dès qu'on descend ─────────── */
[data-structure="reception"] nav {
  padding: 1.1rem clamp(1rem, 4vw, 3rem); background: transparent; border-bottom: 1px solid transparent;
}
[data-structure="reception"] nav.scrolled {
  padding: .7rem clamp(1rem, 4vw, 3rem); background: rgba(250, 248, 243, .96);
  border-bottom-color: var(--r-line); box-shadow: 0 6px 24px -18px rgba(0, 0, 0, .5);
}
[data-structure="reception"] .nav-r { gap: 1.4rem; }
[data-structure="reception"] .btn-resa {
  background: var(--accent-strong); border-radius: 3px; min-height: 50px; padding: 0 1.9rem;
  font-size: .86rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  box-shadow: 0 10px 26px -12px rgba(var(--accent-rgb), .8);
}
[data-structure="reception"] .btn-resa:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* ── Hero : plein écran, centré ──────────────────────────────────────────── */
[data-structure="reception"] #hero { min-height: 100svh; padding-bottom: 8rem; }
[data-structure="reception"] #hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); font-weight: 400; }
[data-structure="reception"] .hero-cta {
  border-radius: 3px; min-height: 54px; padding: 0 2.2rem; text-transform: uppercase;
  letter-spacing: .14em; font-size: .86rem; background: #fff; color: var(--dark);
}
[data-structure="reception"] .hero-meta span { border-radius: 3px; }

/* ── Galerie posée à cheval sur le bas du hero ───────────────────────────── */
[data-structure="reception"] #hero + section.blk { padding-top: 0; background: var(--r-ivory); }
[data-structure="reception"] #hero + section.blk .gallery {
  margin-top: -5rem; z-index: 3; aspect-ratio: 21/9; border-radius: 4px; outline: none;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
}

/* ── Sections : ivoire, et blanches là où le template le prévoit ─────────── */
[data-structure="reception"] section.blk { background: var(--r-ivory); }
[data-structure="reception"] section.blk[style*="background"] { background: #fff !important; }
[data-structure="reception"] .s-head { max-width: 680px; margin-bottom: 3rem; }
[data-structure="reception"] .s-head h2 { font-weight: 400; font-size: clamp(2rem, 4.4vw, 3rem); }
[data-structure="reception"] .s-head h2::after { width: 48px; margin-top: 1.2rem; background: var(--accent); }

/* ── Cartes : fines, centrées, prix en serif ─────────────────────────────── */
[data-structure="reception"] .cards { gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
[data-structure="reception"] .card {
  border-radius: 4px; text-align: center; padding: 2.2rem 1.8rem; border-color: var(--r-line); box-shadow: none;
}
[data-structure="reception"] .card:hover { box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .45); }
[data-structure="reception"] .card > .ic {
  margin: 0 auto 1rem; border-radius: 50%; background: transparent; border: 1px solid var(--accent); color: var(--accent);
}
[data-structure="reception"] .card h3 { font-weight: 500; font-size: 1.35rem; }
[data-structure="reception"] .card .price { font-family: var(--fh); font-size: 1.6rem; font-weight: 600; color: var(--accent-strong); }

/* ── Prestations : trois colonnes séparées de filets, sans cartes ────────── */
[data-structure="reception"] .feat { gap: 0; }
[data-structure="reception"] .feat-i { border-radius: 0; padding: 2rem 1.6rem; border-bottom: 1px solid var(--r-line); }
[data-structure="reception"] .feat-i > .ic { border-radius: 50%; }
[data-structure="reception"] .feat-i h3 { font-size: 1.25rem; font-weight: 500; }
@media (min-width: 900px) {
  [data-structure="reception"] .feat-i:not(:nth-child(3n)) { border-right: 1px solid var(--r-line); }
}

/* ── Étapes : grands numéros 01 02 03, sans boîtes ───────────────────────── */
[data-structure="reception"] .step { background: transparent; border: 0; border-top: 1px solid var(--r-line); border-radius: 0; padding: 2rem 1rem 0; }
[data-structure="reception"] .step:hover { transform: none; box-shadow: none; }
[data-structure="reception"] .step-n {
  width: auto; height: auto; background: none; box-shadow: none; color: var(--accent-strong);
  font-family: var(--fh); font-style: italic; font-weight: 400; font-size: 3rem; line-height: 1;
}
[data-structure="reception"] .step-n::before { content: "0"; }
[data-structure="reception"] .step h3 { font-size: 1.25rem; font-weight: 500; }

/* ── Bandeau final sombre ────────────────────────────────────────────────── */
[data-structure="reception"] section.cta-blk { background: var(--dark) !important; padding: 5.5rem 0; }
[data-structure="reception"] .cta-blk h2 { color: #fff; font-weight: 400; font-size: clamp(2rem, 4.4vw, 3rem); }
[data-structure="reception"] .cta-blk h2::after { background: var(--accent2); }
[data-structure="reception"] .cta-blk p { color: rgba(255, 255, 255, .78) !important; }
[data-structure="reception"] .cta-blk .hero-cta {
  background: var(--accent-strong) !important; border-radius: 3px; min-height: 54px; padding: 0 2.2rem;
  text-transform: uppercase; letter-spacing: .14em; font-size: .86rem;
}

@media (max-width: 700px) {
  [data-structure="reception"] .btn-resa { min-height: 44px; padding: 0 1.1rem; letter-spacing: .08em; font-size: .8rem; }
  [data-structure="reception"] #hero { padding-bottom: 6rem; }
  [data-structure="reception"] #hero + section.blk .gallery { margin-top: -3.5rem; aspect-ratio: 4/3; }
}