/* ==========================================================================
   REVETEMENT.COM — PAGES ÉDITORIALES STATIQUES
   À propos / Nous contacter / Mentions légales / CGU / Confidentialité
   Design : hero pleine largeur + bloc de contenu sur fond crème.
   ========================================================================== */

.pg-shell {
  max-width: 1180px;
  margin: 1.6rem auto 4rem;
  padding: 0 1.5rem;
}

.pg-card {
  background: #FBFAF8;
  border: 1px solid #E7E2DB;
}

.pg-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #EFEBE4;
}

.pg-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pg-body {
  padding: 3rem clamp(1.5rem, 5vw, 4.5rem) 3.6rem;
}

.pg-title {
  font-family: var(--font-title, 'Montserrat', sans-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #17130F;
  margin: 0 0 1.6rem;
}

.pg-body p,
.pg-body li {
  font-family: var(--font-subtitle, 'Noto Sans', sans-serif);
  font-size: .95rem;
  line-height: 1.95;
  color: #4A423A;
}

.pg-body p { margin: 0 0 1.35rem; max-width: 62ch; }

.pg-body h2 {
  font-family: var(--font-title, 'Montserrat', sans-serif);
  font-size: .92rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #17130F;
  margin: 2.4rem 0 .9rem;
}

.pg-body ul { margin: 0 0 1.35rem; padding-left: 1.1rem; }
.pg-body li { margin-bottom: .5rem; }
.pg-body a { color: #3B2350; text-decoration: underline; }

/* ---------- Contact : deux colonnes ---------- */
.pg-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.pg-contact-lead {
  font-family: var(--font-subtitle, 'Noto Sans', sans-serif);
  font-size: 1rem;
  line-height: 1.95;
  color: #4A423A;
  margin: 0 0 2.2rem;
}

.pg-contact-info { list-style: none; margin: 0; padding: 0; }

.pg-contact-info li {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #17130F;
  margin-bottom: 1.15rem;
}

.pg-contact-info i { color: #6B5F52; width: 16px; text-align: center; }

.pg-form { display: flex; flex-direction: column; gap: .85rem; }

.pg-form input,
.pg-form textarea {
  width: 100%;
  border: 1px solid #D9D2C8;
  background: #fff;
  padding: .95rem 1.1rem;
  font-family: var(--font-subtitle, 'Noto Sans', sans-serif);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #17130F;
  border-radius: 0;
  outline: none;
}

.pg-form textarea { min-height: 150px; resize: vertical; }
.pg-form input:focus,
.pg-form textarea:focus { border-color: #3B2350; }
.pg-form input::placeholder,
.pg-form textarea::placeholder { color: #9A9188; }

.pg-form button {
  align-self: flex-start;
  background: #17130F;
  color: #FBFAF8;
  border: 0;
  padding: .95rem 2.4rem;
  font-family: var(--font-subtitle, 'Noto Sans', sans-serif);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}

.pg-form button:hover { background: #3B2350; }

.pg-form-msg {
  font-size: .78rem;
  color: #3B2350;
  min-height: 1.1rem;
}

@media (max-width: 860px) {
  .pg-contact-grid { grid-template-columns: 1fr; }
  .pg-hero { aspect-ratio: 16 / 10; }
  .pg-body { padding: 2.2rem 1.5rem 2.6rem; }
}

/* ---------- RESPONSIVE (mise en page uniquement) ---------- */
@media (max-width: 767px) {
  .page-wrap,
  .page-container { padding-left: 16px; padding-right: 16px; }
  .page-grid,
  .page-two-col { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .page-title { font-size: 1.8rem; }
}