/* Positive Theme — pages (contact, à propos, documents légaux) et 404.
   Porté de pages/contact.dc.html, a-propos.dc.html, cgu.dc.html, 404.dc.html. */

/* ---------- EN-TÊTE DE PAGE ---------- */
.pm-page-hd { margin-top: 22px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 44px; align-items: center }
.pm-page-hd h1 { font-size: 82px; line-height: .92; margin: 0 0 18px; color: var(--pm-ink) }
.pm-page-hd p { font: 400 17.5px/1.66 var(--pm-font-body); margin: 0 0 26px; max-width: 46ch }
.pm-page-hd img { width: 100%; height: auto }
.pm-page-hd .lede {
  font: 500 20px/1.6 var(--pm-font-body); margin: 0; max-width: 42ch;
  border-left: 9px solid var(--pm-rose); padding-left: 20px;
}

/* Bouton email de la page contact */
.pm-mail {
  display: inline-flex; align-items: center; gap: 12px; background: var(--pm-ink); color: #fff;
  font: 800 18px/1 var(--pm-font-body); letter-spacing: .01em; padding: 19px 26px;
  border: var(--pm-bd); box-shadow: var(--pm-sh-rose-5); min-height: 44px;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.pm-mail:hover { background: var(--pm-rose); color: #fff; transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--pm-ink) }

/* ---------- CARTES « POURQUOI NOUS ÉCRIRE ? » ---------- */
.pm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch }
.pm-card {
  background: #fff; border: var(--pm-bd); box-shadow: var(--pm-sh-7); padding: 30px 28px;
  display: flex; flex-direction: column; align-items: flex-start; transition: transform .15s, box-shadow .15s;
}
.pm-card:hover { transform: translate(-2px,-2px); box-shadow: var(--pm-sh-10) }
.pm-card h2 { font-family: var(--pm-font-display); text-transform: uppercase; font-weight: 400; font-size: 26px; line-height: 1.04; margin: 0 0 12px }
.pm-card p { font: 400 15.5px/1.62 var(--pm-font-body); margin: 0 0 22px }
.pm-card .pm-btn { margin-top: auto }

/* Pastille numérotée (cartes contact et valeurs de la page à propos) */
.pm-num {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  font-family: var(--pm-font-display); font-size: 26px; color: #fff; background: var(--pm-violet);
  border: var(--pm-bd); box-shadow: var(--pm-sh-3); transform: rotate(-4deg); margin-bottom: 20px;
}
.pm-cards > *:nth-child(2) .pm-num, .pm-vals > *:nth-child(2) .pm-num { background: var(--pm-rose); transform: rotate(4deg) }
.pm-cards > *:nth-child(3) .pm-num, .pm-vals > *:nth-child(3) .pm-num { background: var(--pm-magenta) }

.pm-btn {
  display: inline-flex; align-items: center; gap: 9px; background: var(--pm-ink); color: #fff;
  font: 800 11.5px/1 var(--pm-font-body); letter-spacing: .12em; text-transform: uppercase;
  padding: 15px 20px; border: var(--pm-bd); border-radius: 999px;
  box-shadow: 4px 4px 0 rgba(20,20,20,.35); min-height: 44px;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.pm-btn:hover { background: var(--pm-rose); color: #fff; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(20,20,20,.5) }

/* ---------- ÉCRIS-NOUS ----------
   Le site n'envoie plus de mail : on affiche l'adresse, en gros et cliquable. */
.pm-direct { max-width: var(--pm-doc); margin: 0 auto; text-align: center }
.pm-direct__btn { font-size: 22px; padding: 22px 32px }

.pm-direct__fine { font: 600 13.5px/1.55 var(--pm-font-body); color: var(--pm-muted); margin: 24px auto 0; max-width: 44ch }

/* ---------- PAGE À PROPOS ---------- */
.pm-prose { max-width: var(--pm-reading); margin: 0 auto }
.pm-prose p { font: 400 17.5px/1.72 var(--pm-font-body); margin: 0 0 24px }
.pm-prose p a { color: var(--pm-link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px }
.pm-prose p a:hover { color: var(--pm-violet) }
.pm-prose h2 {
  color: var(--pm-violet); text-shadow: 4px 4px 0 var(--pm-rose); font-size: 44px; margin: 52px 0 22px;
  display: flex; align-items: center; gap: 18px; line-height: 1; flex-wrap: wrap;
  font-family: var(--pm-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
}
.pm-prose h2::after { content: ""; flex: 1 0 120px; height: 14px; background: var(--pm-zebra) }
.pm-prose h3 { font-family: var(--pm-font-display); font-weight: 400; text-transform: uppercase; font-size: 23px; line-height: 1.05; margin: 0 0 10px }
.pm-prose blockquote, .pm-quote {
  background: var(--pm-ink); color: #fff; border: var(--pm-bd); box-shadow: var(--pm-sh-rose-8);
  padding: 32px 34px; margin: 8px 0 36px;
}
.pm-prose blockquote p, .pm-quote p { font: 500 21px/1.55 var(--pm-font-body); color: #fff; margin: 0 }
.pm-quote small { display: block; font: 800 11px/1 var(--pm-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--pm-rose); margin-top: 18px }

.pm-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 8px 0 12px }
.pm-val { background: #fff; border: var(--pm-bd); box-shadow: var(--pm-sh-6); padding: 26px 24px; transition: transform .15s, box-shadow .15s }
.pm-val:hover { transform: translate(-2px,-2px); box-shadow: var(--pm-sh-9) }
.pm-val .pm-num { width: 48px; height: 48px; font-size: 24px; margin-bottom: 16px }
.pm-val p { font: 400 15px/1.6 var(--pm-font-body); margin: 0 }

.pm-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px }
.pm-list li { font: 700 20px/1.3 var(--pm-font-body); display: flex; gap: 13px; align-items: flex-start }
.pm-list li::before { content: ""; flex: none; width: 11px; height: 11px; margin-top: 8px; background: var(--pm-rose); border: var(--pm-bd-thin) }

.pm-kicker {
  font-family: var(--pm-font-display); text-transform: uppercase; font-weight: 400; font-size: 34px;
  line-height: 1.06; color: var(--pm-violet); text-shadow: 3px 3px 0 var(--pm-rose); margin: 36px 0 0;
}

.pm-team { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 44px; align-items: center }
.pm-team p { font: 400 16.5px/1.7 var(--pm-font-body); margin: 0 0 22px }

/* ---------- DOCUMENT LÉGAL ---------- */
.pm-doc-hd { max-width: var(--pm-doc); margin: 22px auto 0 }
.pm-doc-hd h1 { font-size: 60px; line-height: .94; margin: 0 0 14px; color: var(--pm-violet); text-shadow: 4px 4px 0 var(--pm-rose) }
.pm-doc-hd p { font: 500 16.5px/1.6 var(--pm-font-body); color: var(--pm-muted-2); margin: 0 }
.pm-doc-hd--wide h1 { font-size: 74px }

.pm-doc {
  max-width: var(--pm-doc); margin: 0 auto; background: #fff; border: var(--pm-bd);
  box-shadow: var(--pm-sh-9); padding: 44px 44px 40px;
}
.pm-doc h2 {
  font-family: var(--pm-font-display); text-transform: uppercase; font-weight: 400; font-size: 27px;
  line-height: 1.05; margin: 0 0 14px; display: flex; align-items: center; gap: 14px;
}
.pm-doc h2::before { content: ""; flex: none; width: 28px; height: 11px; background: var(--pm-rose) }
.pm-doc h2 + p, .pm-doc h2 + ul { margin-top: 0 }
.pm-doc > h2 ~ h2 { margin-top: 38px; padding-top: 36px; border-top: var(--pm-bd) }
.pm-doc section + section { margin-top: 38px; padding-top: 36px; border-top: var(--pm-bd) }
/* Certaines pages légales existantes titrent leurs sections en <h3> : même
   repère rose, taille légèrement inférieure pour qu'un vrai sous-titre reste
   distinguable. Le filet de séparation ne s'applique qu'aux sections de 1er rang. */
.pm-doc h3 {
  font-family: var(--pm-font-display); text-transform: uppercase; font-weight: 400; font-size: 23px;
  line-height: 1.05; margin: 34px 0 14px; display: flex; align-items: center; gap: 14px;
}
.pm-doc h3::before { content: ""; flex: none; width: 22px; height: 10px; background: var(--pm-rose) }
.pm-doc > h3:first-child { margin-top: 0 }
.pm-doc > h3 ~ h3 { margin-top: 38px; padding-top: 36px; border-top: var(--pm-bd) }
.pm-doc p { font: 400 16.5px/1.72 var(--pm-font-body); margin: 0 0 16px }
.pm-doc p:last-child { margin-bottom: 0 }
.pm-doc a { color: var(--pm-link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px }
.pm-doc a:hover { color: var(--pm-violet) }
.pm-doc ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px }
.pm-doc li { font: 400 16px/1.6 var(--pm-font-body); display: flex; gap: 11px; align-items: flex-start }
.pm-doc li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 9px; background: var(--pm-violet); border: var(--pm-bd-thin) }
.pm-doc li b { font-weight: 700 }

.pm-warn { background: var(--pm-ink); color: #fff; border: var(--pm-bd); box-shadow: var(--pm-sh-rose-9); padding: 26px 28px; margin: 0 0 8px }
.pm-warn b { display: block; font-family: var(--pm-font-display); text-transform: uppercase; font-weight: 400; font-size: 24px; line-height: 1.05; margin-bottom: 10px }
.pm-warn p { font: 500 16px/1.62 var(--pm-font-body); color: rgba(255,255,255,.9); margin: 0 }

.pm-maj {
  display: inline-block; transform: rotate(-2deg); background: var(--pm-ink); color: #fff;
  font: 800 10.5px/1 var(--pm-font-body); letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 13px; border: var(--pm-bd); box-shadow: var(--pm-sh-rose-5); margin-top: 36px;
}

/* ---------- 404 ---------- */
.pm-404-band { padding-top: 56px; padding-bottom: 64px }
.pm-404 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 50px; align-items: center }
.pm-404__big {
  font-size: 210px; line-height: .82; color: var(--pm-violet);
  text-shadow: 8px 8px 0 var(--pm-rose); margin: 0 0 6px; letter-spacing: -.02em;
}
.pm-404 h1 { font-size: 52px; line-height: .98; margin: 0 0 16px }
.pm-404 p { font: 400 17.5px/1.66 var(--pm-font-body); margin: 0 0 28px; max-width: 44ch }
.pm-404__acts { display: flex; gap: 14px; flex-wrap: wrap }
.pm-404__ill { width: 100%; height: auto }

@media (max-width: 1000px) {
  .pm-page-hd { grid-template-columns: 1fr; gap: 28px }
  .pm-page-hd h1 { font-size: 46px }
  .pm-cards, .pm-vals { grid-template-columns: 1fr }
  .pm-team { grid-template-columns: 1fr; gap: 26px }
  .pm-prose h2 { font-size: 32px }
  .pm-doc-hd h1, .pm-doc-hd--wide h1 { font-size: 42px }
  .pm-doc { padding: 32px 28px }
  .pm-404 { grid-template-columns: 1fr; gap: 28px }
  .pm-404__ill { order: -1; max-width: 420px }
  .pm-404__big { font-size: 150px; text-shadow: 6px 6px 0 var(--pm-rose) }
  .pm-404 h1 { font-size: 36px }
}
@media (max-width: 620px) {
  .pm-page-hd h1 { font-size: 34px }
  .pm-page-hd .lede { font-size: 17px; padding-left: 15px; border-left-width: 7px }
  .pm-mail { font-size: 15px; padding: 16px 18px }
  .pm-doc-hd h1, .pm-doc-hd--wide h1 { font-size: 30px; text-shadow: 2px 2px 0 var(--pm-rose) }
  .pm-doc-hd p { font-size: 15.5px }
  .pm-doc { padding: 24px 20px; box-shadow: var(--pm-sh-6) }
  .pm-doc h2 { font-size: 22px; gap: 11px }
  .pm-doc h2::before { width: 22px; height: 9px }
  .pm-doc p, .pm-doc li { font-size: 15.5px }
  .pm-doc section + section, .pm-doc > h2 ~ h2 { margin-top: 28px; padding-top: 26px }
  .pm-warn { padding: 22px 20px; box-shadow: 5px 5px 0 var(--pm-rose) }
  .pm-warn b { font-size: 20px }
  .pm-prose h2 { font-size: 26px; gap: 12px }
  .pm-prose h2::after { height: 11px }
  .pm-kicker { font-size: 26px }
  .pm-list li { font-size: 17px }
  .pm-404__big { font-size: 104px }
  .pm-404 h1 { font-size: 28px }
}