/* ==========================================================
   Salon 6ter — pages secondaires
   Tarifs, mentions légales et page 404.
   ========================================================== */

/* ---------- Page 404 ---------- */

.actions-404 { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ---------- Page tarifs ---------- */

.page-tarifs { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem); }

.tarifs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.carte-tarif {
  position: relative;
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.carte-tarif::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: var(--jaune);
}
.carte-tarif__tete {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1rem;
}
.carte-tarif__tete svg {
  width: 3rem; height: 3rem;
  padding: .7rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--noir);
  color: var(--jaune);
}
.carte-tarif h2 { font-size: clamp(1.7rem, 3.5vw, 2.1rem); }
.prix { list-style: none; margin: 0; padding: 0; }
.prix li {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .5rem .6rem;
  margin-inline: -.6rem;
  border-radius: 8px;
  transition: background-color .25s;
}
.prix li:hover { background: var(--jaune-pale); }
.prix .presta { flex: 0 1 auto; }
.prix .presta small { display: block; font-size: .95rem; color: var(--texte-2); }
.prix .points {
  flex: 1 0 1.5rem;
  border-bottom: 2px dotted var(--gris-clair);
  transform: translateY(-.3em);
}
.prix .montant { font-weight: 700; white-space: nowrap; }
.prix .montant small { font-weight: 400; font-size: .9rem; color: var(--texte-2); }
.tarifs__note { margin: 1rem 0 0; color: var(--texte-2); font-size: 1.05rem; }

.titre-paiement {
  font-size: clamp(2rem, 4.5vw, 2.6rem);
  margin: clamp(2.75rem, 6vw, 4rem) 0 1.5rem;
}
.paiements {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.paiements li {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 1.1rem 1.25rem;
  font-weight: 700;
  box-shadow: var(--ombre);
}
.paiements li small { display: block; font-weight: 400; font-size: .95rem; color: var(--texte-2); }
.paiements svg {
  width: 3rem; height: 3rem;
  padding: .65rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--jaune);
  color: var(--noir);
}
.page-tarifs .rdv { margin-top: clamp(2.75rem, 6vw, 4rem); }

/* ---------- Page mentions légales ---------- */

.page-legale {
  background: var(--blanc);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
}
.page-legale .conteneur { max-width: 50rem; }
.page-legale h2 {
  font-size: 1.7rem;
  margin: 2.75rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--jaune);
  display: inline-block;
}
.page-legale h2:first-child { margin-top: 0; }
.page-legale dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1.5rem;
  margin: 0;
}
.page-legale dt { font-weight: 700; }
.page-legale dd { margin: 0; }

/* ---------- Écrans moyens et petits ---------- */

@media (max-width: 1000px) {
  .paiements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .tarifs { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .paiements { gap: .75rem; }
  .paiements li { flex-direction: column; text-align: center; gap: .6rem; padding: 1rem .75rem; }
  .page-legale dl { grid-template-columns: 1fr; gap: 0; }
  .page-legale dd { margin-bottom: .9rem; }
}