/* ============================================================
   Beauty by Nana — Onglerie (prestations + book)
   S'appuie sur les variables de style.css. Chargé uniquement ici.
   ============================================================ */

/* ---------- hero ---------- */
.og-hero { position: relative; padding: 132px 0 70px; background: linear-gradient(180deg, var(--rose-pale), var(--ivoire) 78%); overflow: hidden; }
.og-hero-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr .9fr; gap: 56px; align-items: center;
}
.og-hero h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.06; text-wrap: balance; }
.og-hero h1 em { font-style: italic; color: var(--or); }
.og-hero .script { display: block; font-size: clamp(32px, 4.4vw, 50px); margin-bottom: -.1em; }
.og-chapo { margin-top: 22px; font-size: 17.5px; color: var(--encre-doux); max-width: 32em; line-height: 1.7; }
.og-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* mosaïque de 3 photos décalées */
.og-mosaique { position: relative; height: 420px; }
.og-mosaique img {
  position: absolute; border-radius: 14px; object-fit: cover;
  box-shadow: 0 24px 50px -22px rgba(37, 50, 41, .5);
  border: 4px solid var(--blanc);
}
.og-mosaique img:nth-child(1) { width: 46%; aspect-ratio: 3/4; left: 0; top: 34px; transform: rotate(-5deg); }
.og-mosaique img:nth-child(2) { width: 50%; aspect-ratio: 3/4; left: 27%; top: 0; z-index: 2; }
.og-mosaique img:nth-child(3) { width: 44%; aspect-ratio: 3/4; right: 0; top: 62px; transform: rotate(5deg); }

/* ---------- marqueurs ---------- */
.og-marqueurs { background: var(--encre); color: var(--ivoire); }
.og-marqueurs .in {
  max-width: var(--maxw); margin: 0 auto; padding: 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: center;
}
.og-marqueurs b { display: block; font-family: var(--serif); font-size: 23px; color: var(--or-clair); }
.og-marqueurs span { font-size: 13.5px; opacity: .72; }

/* ---------- tarifs ---------- */
.og-tarifs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.og-bloc {
  background: var(--blanc); border: 1px solid rgba(180, 137, 46, .18);
  border-radius: var(--r); padding: 30px 28px; box-shadow: var(--ombre);
}
.og-bloc h3 { font-size: 25px; margin-bottom: 4px; }
.og-bloc .st { font-size: 14px; color: var(--encre-doux); margin-bottom: 20px; }
.og-ligne {
  display: flex; align-items: baseline; gap: 12px; padding: 11px 0;
  border-bottom: 1px dotted rgba(37, 50, 41, .18);
}
.og-ligne:last-child { border-bottom: none; }
.og-ligne .nom { font-weight: 500; }
.og-ligne .nom small { display: block; font-size: 13px; color: var(--encre-doux); font-weight: 400; }
.og-ligne .pointille { flex: 1; border-bottom: 1px dotted rgba(37, 50, 41, .22); transform: translateY(-4px); }
.og-ligne .prix { font-family: var(--serif); font-size: 21px; color: var(--or); white-space: nowrap; }
.og-ligne .duree { font-size: 12.5px; color: var(--encre-doux); white-space: nowrap; }
.og-note {
  margin-top: 18px; padding: 14px 16px; border-radius: 10px;
  background: var(--rose-pale); font-size: 14.5px; color: var(--encre-doux);
}

/* ---------- ce qui se passe pendant ---------- */
.og-etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.og-etape { background: var(--blanc); border-radius: var(--r); padding: 28px 26px; border: 1px solid rgba(180,137,46,.15); }
.og-etape .num { font-family: var(--serif); font-size: 30px; color: var(--rose); line-height: 1; }
.og-etape h3 { font-size: 20px; margin: 8px 0 6px; }
.og-etape p { font-size: 15px; color: var(--encre-doux); line-height: 1.6; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .og-hero { padding: 116px 0 56px; }
  .og-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .og-mosaique { height: 340px; max-width: 460px; margin: 0 auto; }
  .og-tarifs { grid-template-columns: 1fr; }
  .og-etapes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .og-marqueurs .in { grid-template-columns: 1fr; gap: 16px; }
  .og-mosaique { height: 290px; }
  .og-hero-cta .btn { width: 100%; text-align: center; }
  .og-bloc { padding: 24px 20px; }
  .og-ligne { flex-wrap: wrap; gap: 6px 10px; }
  .og-ligne .pointille { display: none; }
  .og-ligne .prix { margin-left: auto; }
}